/** @jsxImportSource https://esm.sh/react@18.2.0 */ import { createRoot } from "https://esm.sh/react-dom@18.2.0/client"; import React, { useEffect, useRef, useState } from "https://esm.sh/react@18.2.0"; function App() { const [conversation, setConversation] = useState<{ role: string; content: string }[]>([]); const recognitionRef = useRef(null); const speechSynthesisRef = useRef(null); const [status, setStatus] = useState("Click 'Start Listening' to activate Jarvis"); const [isListening, setIsListening] = useState(false); const [permissionStatus, setPermissionStatus] = useState<"initial" | "granted" | "denied">("initial"); useEffect(() => { if (typeof window !== "undefined") { const SpeechRecognition = (window as any).SpeechRecognition || (window as any).webkitSpeechRecognition; if (SpeechRecognition) { recognitionRef.current = new SpeechRecognition(); recognitionRef.current.continuous = true; recognitionRef.current.interimResults = false; recognitionRef.current.lang = "en-US"; recognitionRef.current.onstart = () => { setIsListening(true); setStatus("Listening... Say 'Hi Jarvis'"); }; recognitionRef.current.onresult = async (event: any) => { const voiceInput = event.results[event.results.length - 1][0].transcript.trim(); handleVoiceInput(voiceInput); }; recognitionRef.current.onerror = (event: any) => { console.error("Speech recognition error:", event.error); setStatus(`Error: ${event.error}`); setIsListening(false); if (event.error === "not-allowed") { setPermissionStatus("denied"); } }; recognitionRef.current.onend = () => { setIsListening(false); setStatus("Listening stopped. Click 'Start Listening' to resume."); }; speechSynthesisRef.current = window.speechSynthesis; } } }, []); const requestMicrophonePermission = async () => { try { const stream = await navigator.mediaDevices.getUserMedia({ audio: true }); stream.getTracks().forEach(track => track.stop()); setPermissionStatus("granted"); startContinuousListening(); } catch (error) { console.error("Microphone permission denied:", error); setPermissionStatus("denied"); setStatus("Microphone access is required. Please enable permissions in your browser."); } }; const startContinuousListening = () => { if (recognitionRef.current) { try { recognitionRef.current.start(); } catch (error) { console.error("Continuous listening error:", error); setStatus("Could not start listening. Try again."); } } }; const speakResponse = (text: string) => { if (speechSynthesisRef.current) { const utterance = new SpeechSynthesisUtterance(text); speechSynthesisRef.current.speak(utterance); } }; const handleVoiceInput = async (command: string) => { const lowercaseCommand = command.toLowerCase(); // Wake word detection if (lowercaseCommand.includes("hi jarvis") || lowercaseCommand.includes("hey jarvis")) { setStatus("Jarvis activated. How can I help?"); speakResponse("Hello! I'm listening. What can I do for you?"); return; } // If wake word is detected, process the command if (status === "Jarvis activated. How can I help?") { try { const response = await fetch("/chat", { method: "POST", body: JSON.stringify({ messages: [ { role: "system", content: "You are Jarvis, an advanced AI assistant. Respond conversationally and helpfully.", }, { role: "user", content: command }, ], }), }); const data = await response.json(); const assistantResponse = data.message; setConversation(prev => [ ...prev, { role: "user", content: command }, { role: "assistant", content: assistantResponse }, ]); speakResponse(assistantResponse); setStatus("Waiting for next command..."); } catch (error) { console.error("Chat error:", error); speakResponse("Sorry, I encountered an error processing your request."); } } }; const renderPermissionContent = () => { switch (permissionStatus) { case "denied": return (

🚫 Microphone access is blocked. To use Jarvis:

Click the lock icon in the browser's address bar
Allow microphone permissions
Reload the page

); case "initial": return ( ); default: return null; } }; return (

🤖 Jarvis Voice Assistant

Status: {status}

{renderPermissionContent()} {permissionStatus === "granted" && ( )}

{conversation.map((msg, index) => (

{msg.role === "user" ? "You" : "Jarvis"}: {msg.content}

))}

View Jarvis Source

); } function client() { createRoot(document.getElementById("root")).render(); } if (typeof document !== "undefined") { client(); } export default async function server(request: Request): Promise { if (request.method === "POST") { const { OpenAI } = await import("https://esm.town/v/std/openai"); const openai = new OpenAI(); const body = await request.json(); const messages = body.messages || []; const completion = await openai.chat.completions.create({ messages: messages, model: "gpt-4o-mini", max_tokens: 200, }); return new Response( JSON.stringify({ message: completion.choices[0].message.content || "I'm not sure how to respond.", }), { headers: { "Content-Type": "application/json" }, }, ); } return new Response( ` Jarvis Voice Assistant

`, { headers: { "Content-Type": "text/html" }, }, ); }

pashaabhi