🤖 Jarvis Web – Quick Requirements (MVP)🏗️ Tech Stack Frontend: React + TailwindCSS (sci-fi glowing UI) Backend: Node.js + Express (to handle API calls securely) AI Chat: OpenAI GPT-4o mini (for smart conversation) Voice Input: Web Speech API (free, in-browser speech recognition)* Voice Output: ElevenLabs API (realistic voice synthesis)* Real-Time Search: SearchAPI (Google search results in JSON)🔑 Environment Variables* OPENAI_API_KEY → for GPT-4o mini* ELEVENLABS_API_KEY → for text-to-speech* SEARCHAPI_KEY → for real-time Google search📁 File Structure/jarvis-web /public /src /components ChatWindow.jsx VoiceControl.jsx SciFiUI.jsx /utils speech.js // speech recognition tts.js // ElevenLabs voice synthesis search.js // SearchAPI requests chat.js // GPT-4o mini handler App.jsx index.js /server server.js // Express backend .env package.json tailwind.config.js🎯 Core Features1. Wake Word Detection – Jarvis activates when you say “Jarvis.”2. Voice-to-Text Input – Browser mic → Web Speech API → text.3. AI Chat Response – GPT-4o mini processes user query.4. Real-Time Search – If query needs live info, use SearchAPI.5. Voice Output – ElevenLabs converts Jarvis’s reply to realistic speech.6. Sci-Fi Themed UI – Dark console with glowing animations.🔌 APIs & Tools* AI Chat: OpenAI GPT-4o mini* Voice Recognition: Web Speech API (free, built-in)* Voice Synthesis: ElevenLabs API ([PAID] after free tier)* Search: SearchAPI (Google results JSON, free/paid tier)🧠 Key States (React)* wakeActive → true/false (is “Jarvis” detected)* listening → true/false (mic is on)* userQuery → last spoken text* chatHistory → conversation log* assistantReply → GPT/Search response* speaking → true/false (ElevenLabs audio playing)🚀 User Flow* User says “Jarvis” → wake word activates listening.* Mic captures speech → transcribes via Web Speech API.* Text sent to GPT-4o mini → generates smart response.* If response needs live data → SearchAPI fetch → merged into GPT reply.* Reply sent to ElevenLabs → Jarvis speaks with chosen voice.* Sci-fi UI shows glowing console-style conversation.✅ Must-Have Features* [x] Wake word detection (“Jarvis”)* [x] Voice input (Web Speech API)* [x] GPT-4o mini conversation* [x] SearchAPI integration for real-time info* [x] ElevenLabs voice replies* [x] Sci-fi web interface