function MainComponent({ onFileChange, transcription, isLoading, error }) { const handleSubmit = async (e)=>{ e.preventDefault(); const formData = new FormData(e.target); const file = formData.get('audioFile'); if (file && onFileChange) { onFileChange(file); } }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center p-4 w-full", __source: { fileName: "", lineNumber: 12, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, className: "flex flex-col items-center w-full mb-4", __source: { fileName: "", lineNumber: 13, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300", htmlFor: "audioFile", __source: { fileName: "", lineNumber: 14, columnNumber: 9 }, __self: this }, "Upload audio file"), /*#__PURE__*/ React.createElement("input", { className: "block w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 cursor-pointer dark:text-gray-400 focus:outline-none dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400", id: "audioFile", name: "audioFile", type: "file", accept: "audio/*", __source: { fileName: "", lineNumber: 15, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "mt-2 px-3 py-2 bg-blue-500 text-white rounded hover:bg-blue-700", __source: { fileName: "", lineNumber: 22, columnNumber: 9 }, __self: this }, isLoading ? 'Processing...' : 'Transcribe')), transcription && /*#__PURE__*/ React.createElement("div", { className: "text-center p-4", __source: { fileName: "", lineNumber: 27, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-semibold text-lg mb-2", __source: { fileName: "", lineNumber: 28, columnNumber: 11 }, __self: this }, "Transcription Result"), /*#__PURE__*/ React.createElement("p", { className: "text-gray-600", __source: { fileName: "", lineNumber: 29, columnNumber: 11 }, __self: this }, transcription)), error && /*#__PURE__*/ React.createElement("p", { className: "text-red-500", __source: { fileName: "", lineNumber: 32, columnNumber: 17 }, __self: this }, error)); } function StoryComponent() { const [file, setFile] = React.useState(null); const [transcription, setTranscription] = React.useState(''); const [isLoading, setIsLoading] = React.useState(false); const [error, setError] = React.useState(''); const handleFileChange = async (selectedFile)=>{ setIsLoading(true); setTranscription(''); setError(''); try { const response = await fetch('/integrations/transcribe-audio-2/listen', { method: 'POST', body: selectedFile, headers: { 'Content-Type': selectedFile.type } }); if (!response.ok) { throw new Error('Failed to process the file'); } const result = await response.json(); setTranscription(result.results.channels[0].alternatives[0].transcript || 'No transcription available'); } catch (err) { setError(err.message || 'An error occurred'); } finally{ setIsLoading(false); } }; React.useEffect(()=>{ if (file) { handleFileChange(file); } }, [ file ]); return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gray-100 p-4", __source: { fileName: "", lineNumber: 75, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(MainComponent, { onFileChange: setFile, transcription: transcription, isLoading: isLoading, error: error, __source: { fileName: "", lineNumber: 76, columnNumber: 7 }, __self: this })); }