UMAR AI TRANSLATOR

UMAR AI • Royal Translator | Kiroween Hackathon Submission A modern AI-powered translation system built using Kiro Specs,

Inspiration

What it doesAbout the Project

UMAR AI • Royal Translator is a next-generation AI-powered translation tool designed to make global communication seamless, accurate, and interactive.

Inspiration

The idea came from the frustration of switching between multiple translation apps and struggling with voice output, inconsistent translations, or limited language support. I wanted to create a single, elegant platform that not only translates text across 25+ languages but also provides voice output, instant translation, and an elite interface for a premium feel.

What I Learned

While building this project, I explored and strengthened skills in:

Web Development: HTML, CSS, JavaScript, and responsive design

API Integration: Using the Gemini AI API for natural language translation

Voice Synthesis & Speech Recognition: Implementing Text-to-Speech (TTS) and Speech-to-Text (STT) with browser APIs

Debounce & Performance Optimization: Ensuring instant translation without overwhelming the API

UI/UX Design: Crafting a polished, futuristic interface with ambient particle effects

How I Built It

Frontend:

Designed a modern, glassy interface using HTML, CSS, and JavaScript.

Added a dual-panel input/output system for easy text translation.

Implemented a sidebar for advanced settings, including auto-speak, female voice preference, and instant translation mode.

Backend / API Integration:

Connected to the Gemini AI API to handle translations.

Implemented retry logic for network resilience.

Used debounce functions to prevent excessive API calls during typing.

Voice Features:

Used the Web Speech API for speech recognition and synthesis.

Added locale-based voice selection, with a preference for female voices where available.

Extras:

Ambient background particles for a premium visual experience.

Responsive design for mobile and desktop.

Challenges Faced

API Limitations: Managing retries and handling API response structure variations.

Voice Synchronization: Ensuring TTS and STT worked smoothly across multiple browsers.

Real-time Translation: Balancing instant translation with performance to prevent lag.

UI/UX Polish: Designing a futuristic yet functional interface with fluid animations and particle effects.

Despite these challenges, the project became a fully functional, free, and modular AI translator, ready for real-world usage and hackathon presentation.