Building JARVIS: Bilingual Voice Assistant in Hindi & English | VIPHacker.100

Aryan Ahirwar
Feb 16
7 min read

You can now create JARVIS, the legendary AI from Iron Man, as a web application capable of effortlessly comprehending voice commands in both English and Hindi. This single-page application leverages the Web Speech API for real-time bilingual processing, making it ideal for users in India.

Futuristic screen displaying "Building Jarvis: Bilingual Voice Assistant in Hindi & English" with digital interface and text prompts in blue.

Why Bilingual JARVIS Excels in India

In India's digital landscape, English and Hindi are intertwined daily, yet most voice assistants falter with code-switching or pure Hindi speech. The Web Speech API includes 'hi-IN' for Hindi recognition and synthesis, ensuring precise command detection such as "गूगल खोलो" or "Open Google".github+1

This ViPHacker.100 initiative emulates Iron Man's arc reactor interface with glitch effects, Devanagari fonts, and contact mappings for "मम्मी" or "mom". It draws inspiration from ethical hacking: secure, local processing with no cloud vulnerabilities.

Core Features Breakdown

Activation Hub: Click the pulsating arc reactor button ("ACTIVATE / सक्रिय करें") to enable the microphone; it switches to DEACTIVATE when listening.
Smart Detection: Automatically sets recognition.lang to 'hi-IN' or 'en-US' based on transcript analysis; responds through SpeechSynthesis in the corresponding language.
Commands Mapped:
EnglishHindiAction"Open Google""गूगल खोलो"New tab: google.com [youtube]"Play song on YouTube""YouTube पर गाना चलाओ"YouTube search results"Time?""कितने बजे हैं?"Speaks current IST time"Mom message hi""मम्मी को मैसेज भेजो"wa.me/[number]?text=hi (pre-mapped contacts)

The visual transcript instantly displays Devanagari script; the log panel records history.

UI: Futuristic with Indian Flair

A dark holographic theme with saffron glows pulses upon activation. Fonts like Poppins (Devanagari + Latin) ensure sharp Hindi rendering—no font issues.

The language toggle switches UI text; the status bar is bilingual: "Listening... / सुन रहा हूँ". Glitch animations via CSS keyframes contribute to a cyberpunk atmosphere, deployable on viphacker100.com

Ready-to-Copy Master Prompt

Insert this into Google AI Studio (Gemini) for immediate code creation—complete with HTML/JS/CSS.

Select and copy the entire section below, then paste it into Gemini 3 Pro within Google AI Studio.

Role: You are an expert software architect and front-end developer. Your task is to generate a fully functional, single-page HTML/CSS/JavaScript application for a Personal AI Assistant named "JARVIS" with complete bilingual support for English and Hindi.

Core Concept: This application is a web-based control hub. It features a futuristic, Iron-Man-inspired UI with a central "activation" mechanism. The assistant listens for voice commands in BOTH English and Hindi, intelligently detects the language, and executes actions while responding in the same language.

Functional Requirements (The "Skills"):

The assistant must understand and execute voice commands in English and Hindi with high accuracy. The system should provide visual and auditory feedback in the language the user spoke.

1. Wake Word & Activation:

- The user must click a prominent "ACTIVATE / सक्रिय करें" button (styled like an arc reactor) to start listening.

- Upon activation, the button should change to "DEACTIVATE / निष्क्रिय करें" (or a listening state), and the interface should indicate that the microphone is active.

- A deactivation method (clicking the same button) must stop the listening loop.

2. Bilingual Voice Command Processing:

- Use the Web Speech API (`webkitSpeechRecognition` or `SpeechRecognition`) with language set to `'hi-IN'` for Hindi detection. Configure it to handle both languages by setting the language dynamically or using grammar lists.

- The assistant should continuously listen while activated, process the command in either language, execute it, and then listen for the next command until deactivated.

- Provide real-time feedback of what the user said in a transcript area (displayed in Devanagari script for Hindi commands).

- Provide feedback on the action being taken (e.g., "Executing: [action]" / "कार्य हो रहा है: [action]").

- Language Detection: The system must detect whether the command was in English or Hindi and respond (via text-to-speech) in the same language.

3. Hindi Command Mapping (The Core Features in Hindi):

The assistant must understand these Hindi commands and map them to the same actions as their English counterparts:

A. Web Navigation (English)

- "Open [website name]"

- "Go to [website name]"

- "Navigate to [website name]"

A. वेब नेविगेशन (Hindi)

- "[वेबसाइट का नाम] खोलो" (e.g., "गूगल खोलो")

- "[वेबसाइट का नाम] पर जाओ"

- "वेबसाइट खोलो [वेबसाइट का नाम]"

Action: Open `https://www.[websitename].com` in a new browser tab.

B. YouTube Music/Video (English)

- "Play [song/video name] on YouTube"

- "Search [song/video name] on YouTube"

B. YouTube संगीत/वीडियो (Hindi)

- "[गाने/वीडियो का नाम] चलाओ YouTube पर"

- "YouTube पर [गाने का नाम] सर्च करो"

- "यूट्यूब पर [वीडियो का नाम] देखना है"

Action: Search for that query on YouTube and open the results page (`https://www.youtube.com/results?search_query=[query]`).

C. WhatsApp Messaging (English)

- "Send message to [contact name] saying [message content]"

C. WhatsApp मैसेजिंग (Hindi)

- "[संपर्क का नाम] को मैसेज भेजो [मैसेज की बात]"

- "[संपर्क का नाम] को कहो [मैसेज की बात]"

- "व्हाट्सएप पर [संपर्क का नाम] को संदेश दो [मैसेज की बात]"

Action:

- Open `https://web.whatsapp.com`.

- Display a clear instruction in both languages: "Please scan the QR code to log in to WhatsApp Web. After logging in, I will assist with the message." / "कृपया WhatsApp Web में लॉग इन करने के लिए QR कोड स्कैन करें। लॉग इन करने के बाद, मैं मैसेज भेजने में सहायता करूंगा।"

- Use a contact mapping system (in-app object) with names in both English and Hindi keys (e.g., `"mom"` and `"मम्मी"` both mapping to the same number, `"dad"` and `"पिता जी"`, `"raj"` and `"राज"`). If the name is found, open `https://wa.me/[number]?text=[encoded message]`. If not found, inform the user in the appropriate language.

D. Time & Date (English)

- "What time is it?"

- "What's today's date?"

D. समय और तारीख (Hindi)

- "कितने बजे हैं?"

- "आज कौन सी तारीख है?"

- "टाइम क्या हुआ?"

Action: Use JavaScript's `Date` object to get the information and speak it aloud using the `SpeechSynthesisUtterance` API in the correct language (Hindi for Hindi commands, English for English commands).

E. Basic System Control Simulation (English)

- "Increase volume"

- "Decrease volume"

E. बेसिक सिस्टम कंट्रोल (Hindi)

- "आवाज़ बढ़ाओ"

- "वॉल्यूम कम करो"

- "धीमा करो"

Action: Provide visual feedback (e.g., a volume bar on the UI that goes up/down) and a spoken response in the detected language like "Simulating volume increase." / "आवाज़ बढ़ा रहा हूँ।"

F. Greetings & General (Bilingual Support)

- "Hello" / "नमस्ते" / "हेलो" → Respond with "Hello Sir, how can I help you?" / "नमस्ते सर, मैं आपकी कैसे मदद कर सकता हूँ?"

- "Thank you" / "धन्यवाद" / "शुक्रिया" → Respond with "You're welcome, Sir" / "आपका स्वागत है सर"

- "Who are you?" / "तुम कौन हो?" → Respond with "I am JARVIS, your personal AI assistant" / "मैं JARVIS हूँ, आपका निजी AI सहायक"

User Interface & Experience (UI/UX) Requirements:

- Theme: Dark, futuristic, holographic, and glitchy with subtle Indian design elements (optional saffron/digital patterns).

- Language Toggle: Include a small toggle switch or indicator showing "English | हिंदी" that displays the currently detected language or allows manual override.

- Layout:

- A central, circular "Arc Reactor" button with bilingual text: "ACTIVATE / सक्रिय करें" (inactive) and "DEACTIVATE / निष्क्रिय करें" (active/listening).

- A status display area showing current state in both languages (e.g., "Status: Listening..." / "स्थिति: सुन रहा हूँ...").

- A transcript area to show the user's spoken command (with Devanagari script support).

- A response/feedback area to show what action the AI is taking (bilingual).

- A small, stylized log panel to show a history of commands and actions.

- Typography: Use fonts that support both Latin and Devanagari scripts (e.g., 'Poppins', 'Hind', 'Rajdhani' which has Devanagari support, or 'Noto Sans' which supports both). Import them from Google Fonts.

- Animations: Subtle glitch effects, data scanning lines, and pulsing glows on the main button.

Technical Implementation Details:

- Generate a single, self-contained HTML file with `<style>` and `<script>` tags.

- Speech Recognition Setup: Configure the Web Speech API to attempt Hindi first, or use a detection mechanism. Set `recognition.lang = 'hi-IN'` but ensure it can still process English words. Alternatively, use a hybrid approach with grammars.

- Text-to-Speech: Use `SpeechSynthesisUtterance` with language set dynamically (`'hi-IN'` or `'en-US'`) based on the detected command language.

- Implement robust error handling with bilingual messages (e.g., "Microphone access denied. Please allow permissions." / "माइक्रोफ़ोन एक्सेस अस्वीकार कर दिया गया। कृपया अनुमतियाँ दें।")

- Use `localStorage` or an in-memory object to store the contact name-to-number mapping. Pre-populate it with bilingual examples:

```javascript

const contacts = {

"mom": "9876xxxxx",

"मम्मी": "987654xxxx",

"dad": "9876xxxxxx1",

"पिता जी": "987xxxx211",

"office": "987xxxxx12",

"ऑफिस": "98xxxxx3212",

"raj": "987xxx3213",

"राज": "987xx3213"

};

The assistant must provide spoken feedback for most actions in the correct language.

All UI text elements should be dynamic and change based on the last detected language or a manual toggle.
The code must be well-commented to explain the bilingual logic.

Goal: To create a stunning, functional, and culturally-aware demo of JARVIS that seamlessly understands and responds in both English and Hindi, making it accessible to a wider audience in India and beyond.

### Key Hindi Features Added:

1. Complete Voice Command Mapping: All major functions now have Hindi equivalents with natural phrasing patterns.

2. Devanagari Script Support: The transcript area will display Hindi commands in Hindi script.

3. Bilingual Contact Mapping: Contacts can be referred to in either language (e.g., "Mom" or "मम्मी").

4. Dynamic Language Detection: The system detects whether the user spoke in Hindi or English and responds appropriately.

5. Culturally Appropriate Responses: Greetings and system messages are adapted for an Indian audience.

6. Font Support: Uses fonts that properly render both Latin and Devanagari characters.

This upgraded version will give you a JARVIS that feels truly personalized for Hindi-speaking users while maintaining full English functionality!

Pro Tip: Conduct tests in Chrome for optimal Web Speech support; ensure microphone permissions are granted. Adjust the contacts object to fit your numbers.

Deploy & Hack On

Save the file as index.html and host it on GitHub Pages or viphacker100.com. Enhance cybersecurity by warning about insecure WhatsApp links and logging commands locally.

Develop this for your projects to enhance your ethical hacking portfolio with an AI and voice security demonstration. Share it on LinkedIn @viphacker_100

#VIPHacker100 #JARVIS #BilingualAI #WebSpeechAPI #CybersecurityIndia