A modern, responsive web-based translation tool powered by Microsoft Azure Cognitive Services (Translator Text API v3.0).
This application allows users to translate text between multiple languages using their own Azure API key and region.
- 🔐 Secure API key input (with show/hide option)
- 🌍 Multi-language support (including auto-detect)
- 🔄 Swap source and target languages
- 📋 Copy translated text to clipboard
- 🧠 Language detection with confidence percentage
- 💾 Saves API credentials in browser (localStorage)
- ⚡ Fast and responsive UI
- 🎨 Clean modern dark theme
- HTML5
- CSS3
- JavaScript (Vanilla JS)
- Azure Translator Text API (v3.0)
azure-translator/
│
├── index.html # Main UI structure
├── styles.css # Styling and layout
├── app.js # Core logic & API integration
└── README.md # Project documentation
-
Go to https://portal.azure.com
-
Create a Translator resource
-
Copy:
- API Key
- Region (e.g. eastus, centralindia)
No installation required.
Simply open:
index.html
in your browser.
- Enter your API Key
- Enter your Region
- Type or paste text
- Click Translate
- View and copy translated text
- Endpoint:
https://api.cognitive.microsofttranslator.com
- API Version:
v3.0
- Method:
POST
- Source text input (max 5000 characters)
- Translated output display
- Language selectors (dropdown)
- Translate button with loading indicator
- Status messages and error handling
- Detected language badge
- API key is stored only in your browser (localStorage)
- Do NOT share your API key publicly
- Free Azure tier may have rate limits
Handles common issues like:
- Invalid API key
- Incorrect region
- Network errors
- Rate limit exceeded
- Light/Dark mode toggle
- Voice input translation
- File/document translation
- Deployment (Netlify / Vercel)
- AI-based enhancements (summarization + translation)
Krishna
If you like this project, give it a ⭐ on GitHub!