🌐 AI Translator Web App

A modern, responsive web-based translation application built using HTML, CSS, and JavaScript, powered by the Microsoft Azure Translator API.

This project combines a clean structured layout with smooth animations and an interactive user experience, making it suitable for both learning and portfolio demonstration.

---

✨ Features

• 🌍 Real-time text translation using Azure API
• 🔑 User-provided API key and region input
• 🎨 Animated gradient background with glassmorphism UI
• ⚡ Smooth transitions and hover animations
• ⌨️ Typing-style output effect
• 💻 Optimized for desktop/laptop screens
• 🧩 Clean and structured layout design

---

🛠️ Tech Stack

• Frontend: HTML5, CSS3, JavaScript
• API: Microsoft Azure Translator API
• Styling: CSS animations, gradients, glassmorphism

---

📂 Project Structure

AI-Translator-App/
│── index.html
│── style.css
│── script.js
│── README.md

---

🚀 Getting Started

1. Clone the Repository

git clone https://github.com/your-username/AI-Translator-App.git

2. Open the Project

• Navigate to the folder
• Open index.html in your browser

---

🔑 Azure API Setup

1. Go to Microsoft Azure Portal

2. Create a Translator resource

3. Copy:

   • API Key
   • Region (e.g., centralindia)

---

🧪 Usage

1. Enter your Azure API key
2. Enter your region
3. Type the text you want to translate
4. Select the target language
5. Click Translate

---

⚠️ Security Note

This application uses the API key directly in the frontend, which is not secure for production use.

👉 Recommended improvement:

• Use a backend (Node.js / Java / Python)
• Store API keys securely

---

💡 Future Enhancements

• 🔁 Language swap functionality
• 🌐 Auto-detect source language
• 🎤 Voice input & speech translation
• 📱 Fully responsive mobile design
• 🔐 Backend integration for security

---

🎯 Project Highlights

• Combines UI/UX design + API integration
• Demonstrates real-world API usage
• Showcases frontend animation and interaction skills

---

📄 License

This project is intended for educational and portfolio purposes.

---

🙌 Acknowledgements

• Microsoft Azure Translator API