cedar-voice

byharendra kumar

Create a futuristic, dark-themed Jarvis AI Assistant Dashboard for learning Data Structures and Algorithms (DSA). The UI colors must be charcoal black (#0d0d0d), dark slate, and glowing neon-cyan (#00f2fe) for borders and highlights. The application must be a single-file, production-ready implementation combining HTML5, Tailwind CSS, and fully functional vanilla JavaScript. ### 1. CORE ENGINE & WEB SPEECH INTEGRATION - Hands-Free Continuous Voice Input: Implement a background JavaScript 'SpeechRecognition' (Web Speech API) loop that stays permanently active. It must listen to the user continuously without requiring any microphone button clicks. When the user stops speaking (onend / choice parsing), automatically process the spoken words. - Dual Feedback Output: Every time Jarvis replies, the response text must stream inside the conversational chat window AND simultaneously speak out loud using 'SpeechSynthesisUtterance' with the language locale strictly set to Hindi ('hi-IN') at a comfortable speech rate (0.95). ### 2. DYNAMIC WORKSPACE LAYOUT (SPLIT PANEL) - Top Navigation Bar: Contains an active status indicator showing "JARVIS: ONLINE/LISTENING", and a configuration input field where the user can dynamically paste or change their custom Automation/Backend WebSocket URL endpoint. - Left Panel (Chat, Metrics, & System Core): - At the top, render a high-tech glowing cyan circular vector orb animation representing Jarvis's core. - Below the orb, display a Gamification Scoreboard showing: Current Level (e.g., "Level 1"), Current Rank (e.g., "Bronze Coder"), and an interactive XP Progress Bar (e.g., "150 / 500 XP"). - Under the scoreboard, a scrolling terminal-style Conversational Chat Window that keeps a history of text logs. - Right Panel (Interactive Coding Workspace): - A clean, monospace text area acting as a Code Editor for the user to type their programmatic solutions. - Directly underneath the text editor, place a large, distinct "Submit Solution" action button. ### 3. AUTOMATED DSA CURRICULUM DATA STRUCTURE Hardcode the following complete sequential DSA Syllabus array directly inside the JavaScript engine logic to track the user's progress state: const dsaSyllabus = [ { stage: 1, topic: "Arrays", analogy: "Toy Train ya Ek line mein rakhe boxes jahan har box ka ek index number hota hai.", questions: ["Find the maximum element in an array", "Reverse an array", "Check if array is sorted"] }, { stage: 2, topic: "Linked Lists", analogy: "Treasure Hunt game, jahan har ek box ke paas agle box ki chit ya address hoti hai.", questions: ["Reverse a Linked List", "Detect a loop in Linked List", "Find middle of Linked List"] }, { stage: 3, topic: "Stacks & Queues", analogy: "Stack matlab Chapatis ka dher (LIFO) aur Queue matlab ticket ki line (FIFO).", questions: ["Implement Stack using Arrays", "Balanced Parentheses check", "Queue using Stacks"] }, { stage: 4, topic: "Searching Algorithms", analogy: "Linear Search matlab ek-ek karke dhoondhna, Binary Search matlab dictionary ko beech se kholna.", questions: ["Binary Search implementation", "Search in a rotated sorted array"] }, { stage: 5, topic: "Sorting Algorithms", analogy: "Bikhre hue khilono ko height ke hisab se line mein systematically arrange karna.", questions: ["Bubble Sort", "Merge Sort implementation", "Quick Sort"] }, { stage: 6, topic: "Trees & Binary Trees", analogy: "Aapka Family Tree - ek Dada ji (Root), unke bachche (Nodes), aur aakhiri generation (Leaves).", questions: ["Inorder Traversal", "Height of a Binary Tree", "Invert a Binary Tree"] }, { stage: 7, topic: "Graphs", analogy: "Google Maps ya Facebook Friends network jahan log ya shehar aapas mein jude hain.", questions: ["BFS Traversal", "DFS Traversal", "Find shortest path in graph"] } ]; ### 4. INTERACTION WORKFLOW & GAME LOGIC - When the user speaks keywords like "DSA shuru karo" or "Sikhao", Jarvis initializes at Stage 1 (Arrays), outputs the simple Hindi analogy both in text and voice, and presents the first question. - Coding Mode: The user must write their code entirely via text typing in the editor. Voice triggers are disabled inside the code editor to avoid unwanted noise injection while coding. - Evaluation on Submit: Clicking "Submit Solution" simulates a verification sweep. - If successful: Update state, add 100 XP to the progress tracker, trigger a level-up animation if the stage changes, and have Jarvis say a dynamic reward message in Hindi (e.g., "Bahut badhiya Javed! Aapka code bilkul sahi hai. Aapko 100 XP milte hain."). Then advance to the next question or topic. - If the solution fails: Do not display or give the direct code answer. Jarvis must act as an expert teacher, breaking down the problem by offering step-by-step logic hints in spoken Hindi to guide Javed until he types the correct solution. - Stuck/Help Voice Command: If at any point the continuous background mic captures the user saying phrases like "Samajh nahi aa raha hai" or "Help me", Jarvis must intercept, interrupt the current flow, and explain the specific active question or concept using even simpler, child-friendly Hindi analogies. Ensure the entire asset is packed inside a beautiful, polished, and fully functional unified script. Ismein Tum Ek Hi taiyari Karoge pahle yah Mujhe use topic ko padhaayega FIR use topic ko code bhi karaega FIR Court mein question Dega tab main call karunga.http://localhost:5678/webhook-test/a3f8ee1d-206e-4e6b-8972-3f84e602c759