function MainComponent() { const [upload, { loading: uploadLoading }] = useUpload(); const [chatMessages, setChatMessages] = useState([]); const [newChatMessage, setNewChatMessage] = useState(""); const [streamingMessage, setStreamingMessage] = useState(""); const [imagePrompt, setImagePrompt] = useState(""); const [generatedImage, setGeneratedImage] = useState(""); const [translationText, setTranslationText] = useState(""); const [translatedText, setTranslatedText] = useState(""); const [targetLanguage, setTargetLanguage] = useState("en"); const [sourceLanguage, setSourceLanguage] = useState("auto"); const [isTranslating, setIsTranslating] = useState(false); const [visionFile, setVisionFile] = useState(null); const [visionResponse, setVisionResponse] = useState(""); const [textToConvert, setTextToConvert] = useState(""); const [audioUrl, setAudioUrl] = useState(""); const [voiceType, setVoiceType] = useState("female-1"); const [speechSpeed, setSpeechSpeed] = useState("1"); const [isGeneratingAudio, setIsGeneratingAudio] = useState(false); const [transcriptionFile, setTranscriptionFile] = useState(null); const [transcribedText, setTranscribedText] = useState(""); const [error, setError] = useState(null); const handleStreamResponse = useHandleStreamResponse({ onChunk: setStreamingMessage, onFinish: async (message)=>{ if (targetLanguage !== "en") { try { const translatedMessage = await translateMessage(message); setChatMessages((prev)=>[ ...prev, { role: "assistant", content: translatedMessage } ]); } catch (err) { setChatMessages((prev)=>[ ...prev, { role: "assistant", content: message } ]); } } else { setChatMessages((prev)=>[ ...prev, { role: "assistant", content: message } ]); } setStreamingMessage(""); } }); const translateMessage = async (text)=>{ const response = await fetch("/integrations/google-translate/language/translate/v2", { method: "POST", body: new URLSearchParams({ q: text, target: targetLanguage }) }); const data = await response.json(); return data.data.translations[0].translatedText; }; const sendChatMessage = async ()=>{ if (!newChatMessage.trim()) return; const userMessage = { role: "user", content: newChatMessage }; setChatMessages((prev)=>[ ...prev, userMessage ]); setNewChatMessage(""); const response = await fetch("/integrations/chat-gpt/conversationgpt4", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ messages: [ ...chatMessages, userMessage ], stream: true }) }); handleStreamResponse(response); }; const generateImage = async ()=>{ try { const response = await fetch(`/integrations/stable-diffusion-v-3/?prompt=${encodeURIComponent(imagePrompt)}`); const data = await response.json(); setGeneratedImage(data.data[0]); } catch (err) { setError("Failed to generate image"); } }; const translateText = async ()=>{ if (!translationText.trim()) return; setIsTranslating(true); setError(null); try { const response = await fetch("/integrations/google-translate/language/translate/v2", { method: "POST", body: new URLSearchParams({ q: translationText, target: targetLanguage, ...sourceLanguage !== "auto" && { source: sourceLanguage } }) }); if (!response.ok) { throw new Error("Translation failed"); } const data = await response.json(); setTranslatedText(data.data.translations[0].translatedText); } catch (err) { setError("Translation failed. Please try again."); console.error("Translation error:", err); } finally{ setIsTranslating(false); } }; const analyzeImage = async ()=>{ try { if (!visionFile) return; const { url: imageUrl } = await upload({ file: visionFile }); const response = await fetch("/integrations/gpt-vision/", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ messages: [ { role: "user", content: [ { type: "text", text: "What's in this image?" }, { type: "image_url", image_url: { url: imageUrl } } ] } ] }) }); const data = await response.json(); const content = data.choices[0].message.content; if (targetLanguage !== "en") { const translatedContent = await translateMessage(content); setVisionResponse(translatedContent); } else { setVisionResponse(content); } } catch (err) { setError("Image analysis failed"); } }; const convertTextToSpeech = async ()=>{ if (!textToConvert.trim()) return; setIsGeneratingAudio(true); try { const response = await fetch(`/integrations/text-to-speech/speech?text=${encodeURIComponent(textToConvert)}`); const blob = await response.blob(); setAudioUrl(URL.createObjectURL(blob)); } catch (err) { setError("Text to speech conversion failed"); } finally{ setIsGeneratingAudio(false); } }; const transcribeAudio = async ()=>{ try { if (!transcriptionFile) return; const response = await fetch("/integrations/transcribe-audio-2/listen", { method: "POST", body: transcriptionFile }); const data = await response.json(); setTranscribedText(data.results.channels[0].alternatives[0].transcript); } catch (err) { setError("Audio transcription failed"); } }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gradient-to-b from-[#0a0a0a] to-[#1a1a1a] p-4 md:p-8 font-inter text-gray-100", __source: { fileName: "", lineNumber: 178, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-[1920px] mx-auto space-y-8", __source: { fileName: "", lineNumber: 179, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between", __source: { fileName: "", lineNumber: 180, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-bold bg-gradient-to-r from-blue-400 to-purple-500 bg-clip-text text-transparent", __source: { fileName: "", lineNumber: 181, columnNumber: 11 }, __self: this }, "AI Entertainment Suite"), /*#__PURE__*/ React.createElement("select", { value: targetLanguage, onChange: (e)=>setTargetLanguage(e.target.value), className: "bg-[#2a2a2a]/50 backdrop-blur-sm text-gray-200 rounded-xl px-4 py-2 border border-[#3a3a3a] focus:ring-2 focus:ring-[#2563eb] transition-all duration-300 hover:border-[#4a4a4a]", __source: { fileName: "", lineNumber: 184, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "en", __source: { fileName: "", lineNumber: 189, columnNumber: 13 }, __self: this }, "English"), /*#__PURE__*/ React.createElement("option", { value: "es", __source: { fileName: "", lineNumber: 190, columnNumber: 13 }, __self: this }, "Spanish"), /*#__PURE__*/ React.createElement("option", { value: "fr", __source: { fileName: "", lineNumber: 191, columnNumber: 13 }, __self: this }, "French"), /*#__PURE__*/ React.createElement("option", { value: "de", __source: { fileName: "", lineNumber: 192, columnNumber: 13 }, __self: this }, "German"), /*#__PURE__*/ React.createElement("option", { value: "it", __source: { fileName: "", lineNumber: 193, columnNumber: 13 }, __self: this }, "Italian"), /*#__PURE__*/ React.createElement("option", { value: "ja", __source: { fileName: "", lineNumber: 194, columnNumber: 13 }, __self: this }, "Japanese"), /*#__PURE__*/ React.createElement("option", { value: "ko", __source: { fileName: "", lineNumber: 195, columnNumber: 13 }, __self: this }, "Korean"), /*#__PURE__*/ React.createElement("option", { value: "zh", __source: { fileName: "", lineNumber: 196, columnNumber: 13 }, __self: this }, "Chinese"), /*#__PURE__*/ React.createElement("option", { value: "ru", __source: { fileName: "", lineNumber: 197, columnNumber: 13 }, __self: this }, "Russian"), /*#__PURE__*/ React.createElement("option", { value: "ar", __source: { fileName: "", lineNumber: 198, columnNumber: 13 }, __self: this }, "Arabic"), /*#__PURE__*/ React.createElement("option", { value: "hi", __source: { fileName: "", lineNumber: 199, columnNumber: 13 }, __self: this }, "Hindi"), /*#__PURE__*/ React.createElement("option", { value: "pt", __source: { fileName: "", lineNumber: 200, columnNumber: 13 }, __self: this }, "Portuguese"), /*#__PURE__*/ React.createElement("option", { value: "nl", __source: { fileName: "", lineNumber: 201, columnNumber: 13 }, __self: this }, "Dutch"), /*#__PURE__*/ React.createElement("option", { value: "pl", __source: { fileName: "", lineNumber: 202, columnNumber: 13 }, __self: this }, "Polish"), /*#__PURE__*/ React.createElement("option", { value: "tr", __source: { fileName: "", lineNumber: 203, columnNumber: 13 }, __self: this }, "Turkish"))), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6", __source: { fileName: "", lineNumber: 206, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-[#1a1a1a] rounded-2xl p-6 shadow-lg border border-[#2a2a2a] h-[500px] flex flex-col", __source: { fileName: "", lineNumber: 207, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl mb-4 text-gray-100 font-semibold", __source: { fileName: "", lineNumber: 208, columnNumber: 13 }, __self: this }, "AI Chat"), /*#__PURE__*/ React.createElement("div", { className: "flex-1 overflow-y-auto mb-4", __source: { fileName: "", lineNumber: 211, columnNumber: 13 }, __self: this }, chatMessages.map((msg, i)=>/*#__PURE__*/ React.createElement("div", { key: i, className: `mb-4 ${msg.role === "user" ? "text-right" : "text-left"}`, __source: { fileName: "", lineNumber: 213, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: `inline-block p-3 rounded-lg ${msg.role === "user" ? "bg-[#2563eb]" : "bg-[#2a2a2a]"}`, __source: { fileName: "", lineNumber: 217, columnNumber: 19 }, __self: this }, msg.content))), streamingMessage && /*#__PURE__*/ React.createElement("div", { className: "text-left", __source: { fileName: "", lineNumber: 225, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "inline-block p-3 rounded-lg bg-[#2a2a2a]", __source: { fileName: "", lineNumber: 226, columnNumber: 19 }, __self: this }, streamingMessage))), /*#__PURE__*/ React.createElement("div", { className: "flex gap-2", __source: { fileName: "", lineNumber: 232, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("input", { value: newChatMessage, onChange: (e)=>setNewChatMessage(e.target.value), onKeyPress: (e)=>e.key === "Enter" && sendChatMessage(), className: "flex-1 bg-[#2a2a2a] rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-[#2563eb] text-gray-100 placeholder-gray-400", placeholder: "Type a message...", __source: { fileName: "", lineNumber: 233, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: sendChatMessage, className: "bg-[#2563eb] px-4 py-2 rounded-lg hover:bg-[#1d4ed8] transition-colors text-white font-medium", __source: { fileName: "", lineNumber: 240, columnNumber: 15 }, __self: this }, "Send"))), /*#__PURE__*/ React.createElement("div", { className: "bg-[#1a1a1a] rounded-2xl p-6 shadow-lg border border-[#2a2a2a]", __source: { fileName: "", lineNumber: 248, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl mb-4 text-gray-100 font-semibold", __source: { fileName: "", lineNumber: 249, columnNumber: 13 }, __self: this }, "Image Generation"), /*#__PURE__*/ React.createElement("input", { value: imagePrompt, onChange: (e)=>setImagePrompt(e.target.value), className: "w-full bg-[#2a2a2a] rounded-lg px-4 py-2 mb-4 focus:outline-none focus:ring-2 focus:ring-[#2563eb] text-gray-100 placeholder-gray-400", placeholder: "Enter image description...", __source: { fileName: "", lineNumber: 252, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: generateImage, className: "w-full bg-[#2563eb] px-4 py-2 rounded-lg hover:bg-[#1d4ed8] transition-colors mb-4 text-white font-medium", __source: { fileName: "", lineNumber: 258, columnNumber: 13 }, __self: this }, "Generate"), generatedImage && /*#__PURE__*/ React.createElement("img", { src: generatedImage, alt: "Generated", className: "w-full h-[300px] object-cover rounded-lg", __source: { fileName: "", lineNumber: 265, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "bg-[#1a1a1a] rounded-2xl p-6 shadow-lg border border-[#2a2a2a]", __source: { fileName: "", lineNumber: 272, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl mb-4 text-gray-100 font-semibold", __source: { fileName: "", lineNumber: 273, columnNumber: 13 }, __self: this }, "Translation"), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col gap-4", __source: { fileName: "", lineNumber: 276, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("textarea", { value: translationText, onChange: (e)=>setTranslationText(e.target.value), className: "w-full bg-[#2a2a2a] rounded-lg px-4 py-2 h-32 focus:outline-none focus:ring-2 focus:ring-[#2563eb] text-gray-100", placeholder: "Enter text to translate...", __source: { fileName: "", lineNumber: 277, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "flex gap-4", __source: { fileName: "", lineNumber: 284, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("select", { value: sourceLanguage, onChange: (e)=>setSourceLanguage(e.target.value), className: "flex-1 bg-[#2a2a2a] rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-[#2563eb] text-gray-100", __source: { fileName: "", lineNumber: 285, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "auto", __source: { fileName: "", lineNumber: 290, columnNumber: 19 }, __self: this }, "Detect Language"), /*#__PURE__*/ React.createElement("option", { value: "en", __source: { fileName: "", lineNumber: 291, columnNumber: 19 }, __self: this }, "English"), /*#__PURE__*/ React.createElement("option", { value: "es", __source: { fileName: "", lineNumber: 292, columnNumber: 19 }, __self: this }, "Spanish"), /*#__PURE__*/ React.createElement("option", { value: "fr", __source: { fileName: "", lineNumber: 293, columnNumber: 19 }, __self: this }, "French"), /*#__PURE__*/ React.createElement("option", { value: "de", __source: { fileName: "", lineNumber: 294, columnNumber: 19 }, __self: this }, "German"), /*#__PURE__*/ React.createElement("option", { value: "it", __source: { fileName: "", lineNumber: 295, columnNumber: 19 }, __self: this }, "Italian"), /*#__PURE__*/ React.createElement("option", { value: "pt", __source: { fileName: "", lineNumber: 296, columnNumber: 19 }, __self: this }, "Portuguese"), /*#__PURE__*/ React.createElement("option", { value: "ru", __source: { fileName: "", lineNumber: 297, columnNumber: 19 }, __self: this }, "Russian"), /*#__PURE__*/ React.createElement("option", { value: "ja", __source: { fileName: "", lineNumber: 298, columnNumber: 19 }, __self: this }, "Japanese"), /*#__PURE__*/ React.createElement("option", { value: "ko", __source: { fileName: "", lineNumber: 299, columnNumber: 19 }, __self: this }, "Korean"), /*#__PURE__*/ React.createElement("option", { value: "zh", __source: { fileName: "", lineNumber: 300, columnNumber: 19 }, __self: this }, "Chinese")), /*#__PURE__*/ React.createElement("button", { onClick: ()=>{ if (sourceLanguage !== "auto") { const temp = sourceLanguage; setSourceLanguage(targetLanguage); setTargetLanguage(temp); } }, className: "px-4 bg-[#2a2a2a] rounded-lg hover:bg-[#3a3a3a]", __source: { fileName: "", lineNumber: 303, columnNumber: 17 }, __self: this }, "↔️"), /*#__PURE__*/ React.createElement("select", { value: targetLanguage, onChange: (e)=>setTargetLanguage(e.target.value), className: "flex-1 bg-[#2a2a2a] rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-[#2563eb] text-gray-100", __source: { fileName: "", lineNumber: 316, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "en", __source: { fileName: "", lineNumber: 321, columnNumber: 19 }, __self: this }, "English"), /*#__PURE__*/ React.createElement("option", { value: "es", __source: { fileName: "", lineNumber: 322, columnNumber: 19 }, __self: this }, "Spanish"), /*#__PURE__*/ React.createElement("option", { value: "fr", __source: { fileName: "", lineNumber: 323, columnNumber: 19 }, __self: this }, "French"), /*#__PURE__*/ React.createElement("option", { value: "de", __source: { fileName: "", lineNumber: 324, columnNumber: 19 }, __self: this }, "German"), /*#__PURE__*/ React.createElement("option", { value: "it", __source: { fileName: "", lineNumber: 325, columnNumber: 19 }, __self: this }, "Italian"), /*#__PURE__*/ React.createElement("option", { value: "pt", __source: { fileName: "", lineNumber: 326, columnNumber: 19 }, __self: this }, "Portuguese"), /*#__PURE__*/ React.createElement("option", { value: "ru", __source: { fileName: "", lineNumber: 327, columnNumber: 19 }, __self: this }, "Russian"), /*#__PURE__*/ React.createElement("option", { value: "ja", __source: { fileName: "", lineNumber: 328, columnNumber: 19 }, __self: this }, "Japanese"), /*#__PURE__*/ React.createElement("option", { value: "ko", __source: { fileName: "", lineNumber: 329, columnNumber: 19 }, __self: this }, "Korean"), /*#__PURE__*/ React.createElement("option", { value: "zh", __source: { fileName: "", lineNumber: 330, columnNumber: 19 }, __self: this }, "Chinese"))), /*#__PURE__*/ React.createElement("button", { onClick: translateText, disabled: isTranslating || !translationText.trim(), className: "w-full bg-[#2563eb] px-4 py-2 rounded-lg hover:bg-[#1d4ed8] transition-colors disabled:opacity-50 text-white font-medium", __source: { fileName: "", lineNumber: 334, columnNumber: 15 }, __self: this }, isTranslating ? "Translating..." : "Translate"), translatedText && /*#__PURE__*/ React.createElement("div", { className: "bg-[#2a2a2a] rounded-lg p-4", __source: { fileName: "", lineNumber: 343, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-gray-100 whitespace-pre-wrap", __source: { fileName: "", lineNumber: 344, columnNumber: 19 }, __self: this }, translatedText)))), /*#__PURE__*/ React.createElement("div", { className: "bg-[#1a1a1a] rounded-2xl p-6 shadow-lg border border-[#2a2a2a]", __source: { fileName: "", lineNumber: 351, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl mb-4 text-gray-100 font-semibold", __source: { fileName: "", lineNumber: 352, columnNumber: 13 }, __self: this }, "Vision AI"), /*#__PURE__*/ React.createElement("input", { type: "file", accept: "image/*", onChange: (e)=>e.target.files && setVisionFile(e.target.files[0]), className: "w-full bg-[#2a2a2a] rounded-lg px-4 py-2 mb-4 text-gray-100 file:mr-4 file:py-2 file:px-4 file:rounded-lg file:border-0 file:bg-[#2563eb] file:text-white hover:file:bg-[#1d4ed8]", __source: { fileName: "", lineNumber: 355, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: analyzeImage, className: "w-full bg-[#2563eb] px-4 py-2 rounded-lg hover:bg-[#1d4ed8] transition-colors mb-4 text-white font-medium", __source: { fileName: "", lineNumber: 363, columnNumber: 13 }, __self: this }, "Analyze Image"), visionResponse && /*#__PURE__*/ React.createElement("div", { className: "bg-[#2a2a2a] rounded-lg p-4 text-gray-100", __source: { fileName: "", lineNumber: 370, columnNumber: 15 }, __self: this }, visionResponse)), /*#__PURE__*/ React.createElement("div", { className: "bg-[#1a1a1a] rounded-2xl p-6 shadow-lg border border-[#2a2a2a]", __source: { fileName: "", lineNumber: 375, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl mb-4 text-gray-100 font-semibold", __source: { fileName: "", lineNumber: 376, columnNumber: 13 }, __self: this }, "Text to Speech"), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col gap-4", __source: { fileName: "", lineNumber: 379, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("textarea", { value: textToConvert, onChange: (e)=>setTextToConvert(e.target.value), className: "w-full bg-[#2a2a2a] rounded-lg px-4 py-2 h-32 focus:outline-none focus:ring-2 focus:ring-[#2563eb] text-gray-100", placeholder: "Enter text to convert...", __source: { fileName: "", lineNumber: 380, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-2 gap-4", __source: { fileName: "", lineNumber: 387, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("select", { value: voiceType, onChange: (e)=>setVoiceType(e.target.value), className: "bg-[#2a2a2a] rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-[#2563eb] text-gray-100", __source: { fileName: "", lineNumber: 388, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "female-1", __source: { fileName: "", lineNumber: 393, columnNumber: 19 }, __self: this }, "Female Voice 1"), /*#__PURE__*/ React.createElement("option", { value: "female-2", __source: { fileName: "", lineNumber: 394, columnNumber: 19 }, __self: this }, "Female Voice 2"), /*#__PURE__*/ React.createElement("option", { value: "male-1", __source: { fileName: "", lineNumber: 395, columnNumber: 19 }, __self: this }, "Male Voice 1"), /*#__PURE__*/ React.createElement("option", { value: "male-2", __source: { fileName: "", lineNumber: 396, columnNumber: 19 }, __self: this }, "Male Voice 2")), /*#__PURE__*/ React.createElement("select", { value: speechSpeed, onChange: (e)=>setSpeechSpeed(e.target.value), className: "bg-[#2a2a2a] rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-[#2563eb] text-gray-100", __source: { fileName: "", lineNumber: 399, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "0.75", __source: { fileName: "", lineNumber: 404, columnNumber: 19 }, __self: this }, "Slow"), /*#__PURE__*/ React.createElement("option", { value: "1", __source: { fileName: "", lineNumber: 405, columnNumber: 19 }, __self: this }, "Normal"), /*#__PURE__*/ React.createElement("option", { value: "1.25", __source: { fileName: "", lineNumber: 406, columnNumber: 19 }, __self: this }, "Fast"))), /*#__PURE__*/ React.createElement("button", { onClick: convertTextToSpeech, disabled: isGeneratingAudio || !textToConvert.trim(), className: "w-full bg-[#2563eb] px-4 py-2 rounded-lg hover:bg-[#1d4ed8] transition-colors disabled:opacity-50 text-white font-medium", __source: { fileName: "", lineNumber: 410, columnNumber: 15 }, __self: this }, isGeneratingAudio ? "Generating..." : "Convert to Speech"), audioUrl && /*#__PURE__*/ React.createElement("div", { className: "bg-[#2a2a2a] rounded-lg p-4", __source: { fileName: "", lineNumber: 419, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("audio", { controls: true, className: "w-full", __source: { fileName: "", lineNumber: 420, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("source", { src: audioUrl, type: "audio/mpeg", __source: { fileName: "", lineNumber: 421, columnNumber: 21 }, __self: this }), "Your browser does not support the audio element.")))), /*#__PURE__*/ React.createElement("div", { className: "bg-[#1a1a1a] rounded-2xl p-6 shadow-lg border border-[#2a2a2a]", __source: { fileName: "", lineNumber: 428, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl mb-4 text-gray-100 font-semibold", __source: { fileName: "", lineNumber: 429, columnNumber: 13 }, __self: this }, "Audio Transcription"), /*#__PURE__*/ React.createElement("input", { type: "file", accept: "audio/*", onChange: (e)=>e.target.files && setTranscriptionFile(e.target.files[0]), className: "w-full bg-[#2a2a2a] rounded-lg px-4 py-2 mb-4 text-gray-100 file:mr-4 file:py-2 file:px-4 file:rounded-lg file:border-0 file:bg-[#2563eb] file:text-white hover:file:bg-[#1d4ed8]", __source: { fileName: "", lineNumber: 432, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: transcribeAudio, className: "w-full bg-[#2563eb] px-4 py-2 rounded-lg hover:bg-[#1d4ed8] transition-colors mb-4 text-white font-medium", __source: { fileName: "", lineNumber: 440, columnNumber: 13 }, __self: this }, "Transcribe Audio"), transcribedText && /*#__PURE__*/ React.createElement("div", { className: "bg-[#2a2a2a] rounded-lg p-4 text-gray-100", __source: { fileName: "", lineNumber: 447, columnNumber: 15 }, __self: this }, transcribedText)))), error && /*#__PURE__*/ React.createElement("div", { className: "fixed bottom-4 right-4 bg-red-600/90 backdrop-blur-sm text-white px-6 py-3 rounded-xl shadow-lg border border-red-500/20 animate-fade-in", __source: { fileName: "", lineNumber: 456, columnNumber: 9 }, __self: this }, error), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 461, columnNumber: 7 }, __self: this }, ` @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } @keyframes glow { 0% { box-shadow: 0 0 5px rgba(37, 99, 235, 0.2); } 50% { box-shadow: 0 0 20px rgba(37, 99, 235, 0.4); } 100% { box-shadow: 0 0 5px rgba(37, 99, 235, 0.2); } } .animate-fade-in { animation: fadeIn 0.3s ease-out; } .hover-glow:hover { animation: glow 2s infinite; } @media (max-width: 768px) { .p-6 { padding: 1rem; } .px-6 { padding-left: 1rem; padding-right: 1rem; } .py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; } } ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: rgba(17, 17, 17, 0.5); border-radius: 3px; } ::-webkit-scrollbar-thumb { background: rgba(51, 51, 51, 0.8); border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: rgba(68, 68, 68, 0.9); } `)); }