PolyGlot - Live AI-Powered Translator

A modern, responsive web application for real-time translation using OpenAI's GPT models. Features voice recognition, text-to-speech, and a clean modular architecture.

✨ Features

🌍 Multi-language Support - Auto-detect source language or choose from supported languages
🎤 Voice Recognition - Speech-to-text input with browser API
🔊 Text-to-Speech - Listen to translations with natural voices
📱 Responsive Design - Mobile-first design that works on all devices
💾 History Management - Keep track of recent translations
⚡ Live Translation - Real-time translation as you type
🎨 Modern UI - Clean, intuitive interface with smooth animations
🔧 Modular Architecture - Well-organized, maintainable codebase
🚀 Performance Optimized - Fast loading with lazy loading and caching

🛠 Technology Stack

Frontend: Vanilla JavaScript (ES6+), CSS3, HTML5
API: OpenAI GPT-3.5-turbo
Build Tools: ESLint, Prettier, http-server
Browser APIs: Web Speech API, Speech Synthesis API, localStorage

📁 Project Structure

/
├── index.html              # Main HTML file
├── main.js                 # Application entry point
├── package.json           # Dependencies and scripts
├── css/                   # Modular CSS files
│   ├── variables.css      # CSS custom properties
│   ├── base.css          # Reset & fundamental styles
│   ├── header.css        # Header & branding
│   ├── translation-container.css  # Main interface
│   ├── controls.css      # Control panel & interactive elements
│   ├── history.css       # Translation history
│   ├── notifications.css # Toast notifications
│   └── responsive.css    # Mobile optimizations
├── js/                   # JavaScript modules
│   ├── ApiManager.js     # OpenAI API integration
│   ├── VoiceController.js # Speech recognition & synthesis
│   ├── TranslationEngine.js # Core translation logic
│   ├── HistoryManager.js # Translation history
│   ├── UIController.js   # UI interactions & notifications
│   ├── EventManager.js   # Event handling & shortcuts
│   └── PerformanceUtils.js # Performance optimizations
└── original/             # Backup of original files

## 🚀 Quick Start

### Prerequisites

- Node.js >= 16.0.0
- OpenAI API key
- Modern web browser with ES6+ support

### Installation

1. **Clone the repository**
   ```bash
   git clone https://github.com/jimmyhanh/.git
   cd

Install dependencies
```
npm install
```
Start the development server
```
npm start
```
Open your browser Navigate to http://localhost:3000
Configure your API key
- Enter your OpenAI API key in the settings panel
- The key is stored securely in localStorage

Available Scripts

npm start - Start development server
npm run dev - Start with auto-reload (no cache)
npm run lint - Check code quality
npm run lint:fix - Fix linting issues automatically
npm run format - Format code with Prettier
npm run validate - Run linting and format checks
npm run build - Validate and build for production

🌟 Usage

Basic Translation

Enter your OpenAI API key in the settings panel
Type or paste text in the source language box
Select source and target languages
Click "Translate" or enable live translation

Voice Features

🎤 Voice Input: Click the microphone to speak your text
🔊 Text-to-Speech: Click the play button to hear translations
🔄 Language Swap: Click the swap arrow to reverse languages

Keyboard Shortcuts

Ctrl/Cmd + Enter - Translate text
Ctrl/Cmd + K - Clear all text
Ctrl/Cmd + M - Toggle voice input

🏗 Architecture

Modular JavaScript Design

The application uses a modular architecture with clear separation of concerns:

ApiManager - Handles all OpenAI API communication with retry logic
VoiceController - Manages speech recognition and text-to-speech
TranslationEngine - Core translation logic and language management
HistoryManager - Persistent storage and retrieval of translations
UIController - UI state management and user interactions
EventManager - Centralized event handling and keyboard shortcuts
PerformanceUtils - Performance optimizations and utilities

🔧 Configuration

Environment Variables

The app uses localStorage for configuration. No server-side environment variables needed.

Adding Languages

Update the language maps in TranslationEngine.js:

this.languageNames = {
  'auto': 'Auto Detect',
  'en': 'English',
  'es': 'Spanish', // Add new language
  // ... more languages
};

Required Browser APIs

Fetch API
ES6 Modules
CSS Custom Properties
Web Speech API (optional, for voice features)

🚀 Performance Features

Lazy Loading - Resources loaded on demand
Debounced Translation - Prevents excessive API calls
Memory Management - Efficient event listener cleanup
Optimized Animations - Respects user motion preferences
Caching - Service worker for offline functionality

🔒 Security & Privacy

API keys stored locally in browser
No server-side data storage
HTTPS required for voice features
Input validation and sanitization
Rate limiting and retry logic

🧪 Development

Code Quality

ESLint - Code linting with recommended rules
Prettier - Consistent code formatting
JSDoc - Comprehensive code documentation
Error Boundaries - Robust error handling

Testing the Application

Test with different languages and text lengths
Verify voice recognition works in supported browsers
Test responsive design on various screen sizes
Validate offline functionality with service worker

🤝 Contributing

Fork the repository
Create a feature branch: git checkout -b feature/amazing-feature
Commit your changes: git commit -m 'Add amazing feature'
Push to the branch: git push origin feature/amazing-feature
Open a Pull Request

Development Guidelines

Follow the existing code style
Add JSDoc comments for new functions
Update tests for new features
Ensure responsive design compatibility

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

OpenAI for the GPT API
Font Awesome for icons
Google Fonts for typography
Web Speech API for voice features

A modern, real-time translation application powered by OpenAI's GPT models, supporting both text and voice input with speech synthesis capabilities.

🌟 Features

Core Translation Features

Real-time Translation: Translate text instantly as you type
Voice Input: Speak in any supported language using Web Speech API
Text-to-Speech: Listen to translations with natural voice synthesis
Multi-language Support: Vietnamese, English, Japanese, German, Chinese
Auto Language Detection: Automatically detect source language
Bidirectional Translation: Easy language swapping with one click

Advanced Features

Live Translation Mode: Toggle real-time translation as you type
Translation History: Keep track of recent translations
Offline Storage: API key and history stored locally
Responsive Design: Works perfectly on desktop, tablet, and mobile
Keyboard Shortcuts: Quick actions with keyboard shortcuts
Copy to Clipboard: Easy sharing of translations
Modern UI: Beautiful gradient design with smooth animations

🚀 Quick Start

Prerequisites

Modern web browser with JavaScript enabled
OpenAI API key (Get one here)
Internet connection for API calls

Setup Instructions

Clone or Download

git clone https://github.com/yourusername/polyglot-translator.git
cd polyglot-translator

Open the Application

Open index.html in your web browser
Or serve it using a local web server:

# Using Python
python -m http.server 8000

# Using Node.js
npx serve .

# Using PHP
php -S localhost:8000

Configure API Key
- Enter your OpenAI API key in the settings panel
- Click "Save" to store it locally
- Your key is stored securely in your browser's local storage
Start Translating!
- Type text in the source language box
- Select source and target languages
- Click "Translate" or enable live translation
- Use voice input by clicking the microphone button

🎮 How to Use

Basic Translation

Enter text in the left text area
Select source and target languages
Click the "Translate" button
View the translation in the right text area

Voice Input

Click the microphone button (🎤)
Speak clearly in your chosen language
The speech will be converted to text automatically
Translation happens instantly if live mode is enabled

Live Translation

Toggle the "Live Translation" switch
Start typing in the source text area
Translation updates automatically after 1 second pause
Perfect for real-time conversations

Text-to-Speech

Click the play button (▶️) next to any text area
Listen to the pronunciation in the selected language
Supports all target languages with native voice synthesis

⌨️ Keyboard Shortcuts

Ctrl/Cmd + Enter: Translate text
Ctrl/Cmd + K: Clear all text
Ctrl/Cmd + M: Toggle voice input
Tab: Navigate between elements
Enter: Save API key (when focused on key input)

🌐 Supported Languages

Language	Code	Voice Input	Text-to-Speech
English	`en`	✅	✅
Vietnamese	`vi`	✅	✅
Japanese	`ja`	✅	✅
German	`de`	✅	✅
Chinese	`zh`	✅	✅

🔧 Configuration

OpenAI API Setup

Visit OpenAI Platform
Create an account or sign in
Generate a new API key
Copy the key and paste it in PolyGlot's settings
Ensure you have sufficient API credits

Browser Permissions

Microphone Access: Required for voice input
Local Storage: Used to save API key and history
Clipboard Access: For copy translation feature

📱 Mobile Support

PolyGlot is fully responsive and optimized for mobile devices:

Touch-friendly interface
Adaptive layout for different screen sizes
Mobile-optimized voice input
Gesture support for common actions

🔒 Privacy & Security

API Key: Stored locally in your browser, never sent to third parties
Translation Data: Sent only to OpenAI for processing
No Server: Runs entirely in your browser
No Analytics: No tracking or data collection
Open Source: Full transparency of code

🛠️ Customization

Adding New Languages

To add support for new languages, modify the languageNames object in script.js:

this.languageNames = {
    'auto': 'Auto Detect',
    'en': 'English',
    'vi': 'Vietnamese',
    'ja': 'Japanese',
    'de': 'German',
    'zh': 'Chinese',
    'fr': 'French', // Add new language
    'es': 'Spanish'  // Add new language
};

Also update the HTML select options in index.html.

Styling Customization

Modify styles.css to customize:

Color scheme (change CSS custom properties)
Layout and spacing
Animations and transitions
Mobile breakpoints

🐛 Troubleshooting

Common Issues

Translation not working:

Check your OpenAI API key
Verify internet connection
Check browser console for errors
Ensure you have API credits

Voice input not working:

Allow microphone permissions
Check if using HTTPS (required for speech API)
Try different browsers (Chrome/Edge recommended)

Text-to-speech not working:

Check browser compatibility
Ensure audio is not muted
Try different languages

Browser Compatibility

Feature	Chrome	Firefox	Safari	Edge
Basic Translation	✅	✅	✅	✅
Voice Input	✅	❌	✅	✅
Text-to-Speech	✅	✅	✅	✅
Live Translation	✅	✅	✅	✅

📝 API Usage

OpenAI Model Used

Model: GPT-3.5-turbo
Max Tokens: 1000 per translation
Temperature: 0.3 (for consistent translations)

Cost Estimation

Average cost: ~$0.002 per translation
1000 translations ≈ $2.00
Voice input adds no extra cost

🤝 Contributing

We welcome contributions! Here's how to get started:

Fork the repository
Create a feature branch: git checkout -b feature-name
Make your changes
Test thoroughly
Submit a pull request

Development Setup

Clone the repository
Make changes to HTML, CSS, or JavaScript files
Test in multiple browsers
Ensure mobile compatibility

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

OpenAI for providing the powerful GPT models
Web Speech API for voice recognition capabilities
Font Awesome for beautiful icons
Google Fonts for typography
Contributors who help improve PolyGlot

📞 Support

Issues: GitHub Issues
Documentation: This README file
Email: support@polyglot-translator.com

🔄 Version History

v1.0.0 (Current)

Initial release with full translation features
Voice input and text-to-speech support
Live translation mode
Multi-language support
Responsive design
Translation history

Planned Features

Made with ❤️ using OpenAI's GPT technology

Happy Translating! 🌍

Name		Name	Last commit message	Last commit date
Latest commit History 5 Commits
css		css
js		js
original		original
.env.example		.env.example
.eslintrc.json		.eslintrc.json
.gitattributes		.gitattributes
.gitignore		.gitignore
.prettierrc.json		.prettierrc.json
MODULAR-STRUCTURE.md		MODULAR-STRUCTURE.md
OPTIMIZATION-SUMMARY.md		OPTIMIZATION-SUMMARY.md
README.md		README.md
index.html		index.html
main.js		main.js
package-lock.json		package-lock.json
package.json		package.json
script.js		script.js
styles.css		styles.css
sw.js		sw.js

Folders and files

Latest commit

History

Repository files navigation

PolyGlot - Live AI-Powered Translator

✨ Features

🛠 Technology Stack

📁 Project Structure

Available Scripts

🌟 Usage

Basic Translation

Voice Features

Keyboard Shortcuts

🏗 Architecture

Modular JavaScript Design

🔧 Configuration

Environment Variables

Adding Languages

Required Browser APIs

🚀 Performance Features

🔒 Security & Privacy

🧪 Development

Code Quality

Testing the Application

🤝 Contributing

Development Guidelines

📄 License

🙏 Acknowledgments

🌟 Features

Core Translation Features

Advanced Features

🚀 Quick Start

Prerequisites

Setup Instructions

🎮 How to Use

Basic Translation

Voice Input

Live Translation

Text-to-Speech

⌨️ Keyboard Shortcuts

🌐 Supported Languages

🔧 Configuration

OpenAI API Setup

Browser Permissions

📱 Mobile Support

🔒 Privacy & Security

🛠️ Customization

Adding New Languages

Styling Customization

🐛 Troubleshooting

Common Issues

Browser Compatibility

📝 API Usage

OpenAI Model Used

Cost Estimation

🤝 Contributing

Development Setup

📄 License

🙏 Acknowledgments

📞 Support

🔄 Version History

v1.0.0 (Current)

Planned Features

About

Topics

Resources

Stars

Watchers

Forks

Releases

Packages

Contributors

Languages