Thunder AI by HTKhan

\n {[1, 2, 3, 4, 5].map((line) => (\n \n ))}\n

\n );\n}\n\nfunction App() {\n const [isListening, setIsListening] = useState(false);\n const [isSpeaking, setIsSpeaking] = useState(false);\n const recognitionRef = useRef(null);\n const audioRef = useRef(null);\n\n const THUNDER_LOGO_URL =\n \"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRWV6j1lss3TUvaeY0W5BHk6xuZ3nG4twxi0OCgIfBkW-yTWHqOJbEmHDA&s=10\";\n const THEME_COLORS = {\n primary: \"#1A73E8\", // Professional blue\n background: \"#121212\", // Deep dark background\n accent: \"#34A853\", // Accent green\n text: \"#E0E0E0\", // Light text\n };\n\n // Urdu language detection regex\n const URDU_REGEX = /[\\u0600-\\u06FF]/;\n\n // Enhanced system prompts\n const SYSTEM_PROMPTS = {\n urdu:\n `آپ تھنڈر نام کا ایک ذہین اور مہربان ایآئی معاون ہیں۔ آپ کو مختلف موضوعات پر بات چیت کرنے، سوالوں کے جواب دینے اور مدد کرنے میں مہارت حاصل ہے۔ اپنے جوابات کو دوستانہ، واضح اور مددگار بنائیں۔ جدید اور روانی سے اردو بولیں۔`,\n english:\n \"You are Thunder, an intelligent and helpful AI assistant Created by Team HTKhan. You are skilled in conversing about various topics, answering questions,playing games and providing assistance. HTKhan refers to Huzaifa Taif Khan,Provide friendly, clear, and helpful responses.\",\n };\n\n useEffect(() => {\n // Add animation styles\n if (typeof window !== \"undefined\") {\n const styleSheet = document.createElement(\"style\");\n styleSheet.type = \"text/css\";\n styleSheet.innerText = `\n @keyframes soundWave {\n 0% { height: 10px; opacity: 0.5; transform: scaleX(0.7); }\n 100% { height: 30px; opacity: 1; transform: scaleX(1); }\n }\n @keyframes pulseGlow {\n 0%, 100% { box-shadow: 0 0 10px ${THEME_COLORS.primary}; }\n 50% { box-shadow: 0 0 20px ${THEME_COLORS.accent}; }\n }\n @keyframes breathe {\n 0%, 100% { transform: scale(1); }\n 50% { transform: scale(1.05); }\n }\n `;\n document.head.appendChild(styleSheet);\n }\n\n // Initialize speech recognition\n if (typeof window !== \"undefined\" && \"webkitSpeechRecognition\" in window) {\n recognitionRef.current = new webkitSpeechRecognition();\n recognitionRef.current.continuous = false;\n recognitionRef.current.interimResults = false;\n\n // Support both English and Urdu\n recognitionRef.current.lang = \"en-US,ur-PK\";\n\n recognitionRef.current.onresult = async (event) => {\n const transcript = event.results[0][0].transcript;\n setIsListening(false);\n await handleVoiceInput(transcript);\n };\n\n recognitionRef.current.onerror = (event) => {\n console.error(\"Speech recognition error:\", event.error);\n setIsListening(false);\n speakResponse(\"Error occurred\");\n };\n }\n\n // Initialize speech synthesis\n if (typeof window !== \"undefined\" && \"speechSynthesis\" in window) {\n window.speechSynthesis.cancel();\n }\n }, []);\n\n const startListening = () => {\n if (recognitionRef.current) {\n setIsListening(true);\n recognitionRef.current.start();\n }\n };\n\n const handleVoiceInput = async (transcript) => {\n try {\n const response = await fetch(\"/generate\", {\n method: \"POST\",\n body: JSON.stringify({\n message: transcript,\n language: URDU_REGEX.test(transcript) ? \"urdu\" : \"english\",\n }),\n });\n const data = await response.json();\n await speakResponse(data.response);\n } catch (error) {\n console.error(\"Error processing voice input:\", error);\n await speakResponse(\"Sorry, request failed\");\n }\n };\n\n const speakResponse = (text) => {\n return new Promise((resolve, reject) => {\n if (\"speechSynthesis\" in window) {\n window.speechSynthesis.cancel();\n\n const utterance = new SpeechSynthesisUtterance(text);\n\n // Improved language detection\n const isUrdu = URDU_REGEX.test(text);\n utterance.lang = isUrdu ? \"ur-PK\" : \"en-US\";\n utterance.pitch = 1;\n utterance.rate = isUrdu ? 0.7 : 1; // Adjusted rate for Urdu\n\n utterance.onstart = () => {\n setIsSpeaking(true);\n };\n\n utterance.onend = () => {\n setIsSpeaking(false);\n resolve();\n };\n\n utterance.onerror = (error) => {\n console.error(\"Speech synthesis error:\", error);\n setIsSpeaking(false);\n reject(error);\n };\n\n window.speechSynthesis.speak(utterance);\n } else {\n fetch(\"/speak\", {\n method: \"POST\",\n body: JSON.stringify({ text }),\n })\n .then(async (response) => {\n const audioBlob = await response.blob();\n const audioUrl = URL.createObjectURL(audioBlob);\n\n if (audioRef.current) {\n audioRef.current.src = audioUrl;\n audioRef.current.play();\n }\n })\n .catch(reject);\n }\n });\n };\n\n const handleLogoClick = () => {\n // If assistant is speaking, do nothing\n if (isSpeaking) return;\n\n // Start listening\n startListening();\n };\n\n return (\n

\n \n\n \n \n

\n\n setIsSpeaking(true)}\n onEnded={() => setIsSpeaking(false)}\n />\n \n );\n}\n\nfunction client() {\n createRoot(document.getElementById(\"root\")).render();\n}\n\n// Only run client-side code when document is available\nif (typeof document !== \"undefined\") {\n client();\n}\n\nexport default async function server(request: Request): Promise {\n if (request.method === \"POST\") {\n const { OpenAI } = await import(\"https://esm.town/v/std/openai\");\n const openai = new OpenAI();\n\n const body = await request.json();\n\n if (request.url.includes(\"/generate\")) {\n // Enhanced language detection\n const isUrdu = /[\\u0600-\\u06FF]/.test(body.message);\n\n const systemPrompt = isUrdu\n ? \"آپ تھنڈر نام کا ایک ذہین اور مہربان ایآئی معاون ہیں۔ آپ کو مختلف موضوعات پر بات چیت کرنے، سوالوں کے جواب دینے اور مدد کرنے میں مہارت حاصل ہے۔ اپنے جوابات کو دوستانہ، واضح اور مددگار بنائیں۔ جدید اور روانی سے اردو بولیں۔\"\n : \"You are Thunder, an intelligent and helpful AI assistant created by Team HTKhan. You are skilled in conversing about various topics, answering questions, and providing assistance. and HTKhan refers to Huzaifa Taif Khan,Provide friendly, clear, and helpful responses.\";\n\n const completion = await openai.chat.completions.create({\n messages: [\n { role: \"system\", content: systemPrompt },\n { role: \"user\", content: body.message },\n ],\n model: \"gpt-4o-mini\",\n max_tokens: 250,\n });\n\n return new Response(\n JSON.stringify({\n response: completion.choices[0].message.content,\n }),\n {\n headers: { \"Content-Type\": \"application/json\" },\n },\n );\n }\n\n if (request.url.includes(\"/speak\")) {\n // Detect language for TTS\n const detectedLanguage = /[\\u0600-\\u06FF]/.test(body.text) ? \"ur\" : \"en\";\n\n const ttsUrl =\n `https://translate.google.com/translate_tts?ie=UTF-8&total=1&idx=0&textlen=32&tl=${detectedLanguage}&q=${\n encodeURIComponent(body.text)\n }`;\n\n const ttsResponse = await fetch(ttsUrl, {\n headers: {\n \"User-Agent\":\n \"Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.124 Safari/537.36\",\n },\n });\n\n return new Response(await ttsResponse.blob(), {\n headers: { \"Content-Type\": \"audio/mpeg\" },\n });\n }\n }\n\n return new Response(\n `\n \n \n Thunder AI by HTKhan\n \n \n \n \n \n \n

\n \n \n \n `,\n {\n headers: { \"Content-Type\": \"text/html\" },\n },\n );\n}","deleted","label",[99],"permalink","https://www.val.town/x/HTKhan7/incredibleBrownEarwig/code/main.tsx","extension","actionData","errors"]