🌐 Azure AI Translator Web App

A futuristic, animated web application that uses Microsoft Azure Translator API to translate text into multiple languages in real-time.

---

🚀 Features

• 🔑 User-provided Azure API Key & Region
• 🌍 Multi-language translation (Hindi, English, French, Spanish)
• ⚡ Real-time translation using Azure API
• 🎨 Futuristic UI with glassmorphism design
• ✨ Smooth animations & loading indicator
• 📱 Responsive and clean interface

---

🛠️ Technologies Used

• HTML5
• CSS3 (Animations + Glassmorphism UI)
• JavaScript (Fetch API)
• Microsoft Azure Translator API

---

📂 Project Structure

project-folder/
│── index.html
│── style.css
│── script.js

---

⚙️ Setup Instructions

1️⃣ Clone or Download Project

git clone <your-repo-url>

---

2️⃣ Get Azure Translator API Key

1. Go to Azure Portal

2. Create Translator Resource

3. Copy:

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

---

3️⃣ Run the Project

Simply open:

index.html

in your browser.

---

🧪 How to Use

1. Enter your Azure API Key
2. Enter your Region
3. Type text in the input box
4. Select target language
5. Click Translate 🚀
6. View translated output instantly

---

⚠️ Important Notes

• Make sure your API key and region are correct
• Internet connection is required
• Some browsers may block requests due to CORS policy

👉 For production:

• Use a backend (Node.js/Express) to secure your API key

---

❌ Common Errors & Fixes

Problem	Solution
No output	Check API key & region
Error message	Ensure Azure service is active
CORS error	Use backend server

---

🔮 Future Improvements

• 🎤 Voice-to-text translation
• 🌐 Auto language detection
• 💾 Translation history
• 🔐 Secure backend integration
• ⚛️ React / modern frontend upgrade

---

📸 Preview

A sleek futuristic UI with glowing animations and smooth transitions for a modern user experience.

---

👨‍💻 Author

Ashish Yadav

---

📄 License

This project is for educational purposes.