function MainComponent() { const [text, setText] = useState(""); const [speaking, setSpeaking] = useState(false); const [volume, setVolume] = useState(1); const [upload, { loading }] = useUpload(); const [transcribing, setTranscribing] = useState(false); const [error, setError] = useState(null); const [supported, setSupported] = useState(true); useEffect(()=>{ if (!("speechSynthesis" in window)) { setSupported(false); setError("Your browser doesn't support text-to-speech"); } }, []); const speak = useCallback(()=>{ if (!supported) return; try { setSpeaking(true); speechSynthesis.cancel(); const utterance = new SpeechSynthesisUtterance(text); utterance.volume = volume; utterance.onend = ()=>setSpeaking(false); utterance.onerror = ()=>{ setSpeaking(false); setError("Failed to speak text"); }; speechSynthesis.speak(utterance); } catch (e) { setSpeaking(false); setError("Failed to initialize speech"); } }, [ text, volume, supported ]); const stopSpeaking = useCallback(()=>{ speechSynthesis.cancel(); setSpeaking(false); }, []); const handleFileUpload = useCallback(async (file)=>{ setError(null); const { url, error: uploadError } = await upload({ file }); if (uploadError) { setError(uploadError); return; } setTranscribing(true); try { const response = await fetch("/api/process-audio", { method: "POST", body: JSON.stringify({ url }), headers: { "Content-Type": "application/json" } }); const data = await response.json(); if (data.error) { setError(data.error); return; } if (data.text) { setText(data.text); } } catch (e) { setError("Failed to transcribe audio"); } setTranscribing(false); }, []); return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gray-100 flex flex-col items-center justify-center p-4", __source: { fileName: "", lineNumber: 75, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg shadow-lg p-6 w-full max-w-md", __source: { fileName: "", lineNumber: 76, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-roboto mb-4 text-center", __source: { fileName: "", lineNumber: 77, columnNumber: 9 }, __self: this }, "Audio Assistant"), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 81, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block mb-2 text-sm font-medium text-gray-700", __source: { fileName: "", lineNumber: 82, columnNumber: 11 }, __self: this }, "Upload MP3"), /*#__PURE__*/ React.createElement("input", { type: "file", accept: "audio/mp3", onChange: (e)=>e.target.files?.[0] && handleFileUpload(e.target.files[0]), className: "w-full p-2 border rounded-lg", name: "audio-input", __source: { fileName: "", lineNumber: 85, columnNumber: 11 }, __self: this })), error && /*#__PURE__*/ React.createElement("div", { className: "mb-4 p-2 bg-red-100 text-red-700 rounded", __source: { fileName: "", lineNumber: 97, columnNumber: 11 }, __self: this }, error), (loading || transcribing) && /*#__PURE__*/ React.createElement("div", { className: "mb-4 text-center text-gray-600", __source: { fileName: "", lineNumber: 103, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-spinner fa-spin mr-2", __source: { fileName: "", lineNumber: 104, columnNumber: 13 }, __self: this }), loading ? "Uploading..." : "Transcribing..."), /*#__PURE__*/ React.createElement("textarea", { value: text, onChange: (e)=>setText(e.target.value), className: "w-full p-2 border rounded-lg mb-4 h-32 resize-none", placeholder: "Enter text or upload audio to transcribe", name: "text-input", __source: { fileName: "", lineNumber: 109, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 117, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block mb-2 text-sm font-medium text-gray-700", __source: { fileName: "", lineNumber: 118, columnNumber: 11 }, __self: this }, "Volume"), /*#__PURE__*/ React.createElement("input", { type: "range", min: "0", max: "1", step: "0.1", value: volume, onChange: (e)=>setVolume(parseFloat(e.target.value)), className: "w-full", name: "volume", __source: { fileName: "", lineNumber: 121, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex gap-2", __source: { fileName: "", lineNumber: 133, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: speak, disabled: speaking || !text || !supported, className: "flex-1 bg-blue-500 hover:bg-blue-600 text-white font-semibold py-2 px-4 rounded-lg disabled:opacity-50 disabled:cursor-not-allowed", __source: { fileName: "", lineNumber: 134, columnNumber: 11 }, __self: this }, speaking ? "Speaking..." : "Speak", /*#__PURE__*/ React.createElement("i", { className: "fas fa-volume-up ml-2", __source: { fileName: "", lineNumber: 140, columnNumber: 13 }, __self: this })), speaking && /*#__PURE__*/ React.createElement("button", { onClick: stopSpeaking, className: "bg-red-500 hover:bg-red-600 text-white font-semibold py-2 px-4 rounded-lg", __source: { fileName: "", lineNumber: 144, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-stop", __source: { fileName: "", lineNumber: 148, columnNumber: 15 }, __self: this }))))); }