function MainComponent() { const [loading, setLoading] = React.useState(false); const [response, setResponse] = React.useState(''); const handleFileChange = async (event)=>{ const file = event.target.files[0]; if (file) { setLoading(true); const formData = new FormData(); formData.append('file', file); try { const result = await fetch('/integrations/google-gemini-1-5-flash/', { method: 'POST', body: JSON.stringify({ messages: [ { role: 'user', content: 'Please process this audio file.' } ] }), headers: { 'Content-Type': 'application/json' } }); const data = await result.json(); const content = data.choices[0].message.content; setResponse(content); } catch (error) { setResponse('Error processing the audio file.'); } finally{ setLoading(false); } } }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-gray-100 font-roboto", __source: { fileName: "", lineNumber: 39, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-bold mb-5", __source: { fileName: "", lineNumber: 40, columnNumber: 7 }, __self: this }, "Doublage Voix Française Réconnaissance"), /*#__PURE__*/ React.createElement("div", { className: "w-[300px] h-[300px] border-2 border-dashed border-gray-400 flex items-center justify-center mb-5 relative", __source: { fileName: "", lineNumber: 41, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "file", accept: "audio/*", name: "audio-upload", className: "opacity-0 absolute w-full h-full cursor-pointer", onChange: handleFileChange, __source: { fileName: "", lineNumber: 42, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "text-center", __source: { fileName: "", lineNumber: 49, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-upload text-5xl text-gray-500 mb-3", __source: { fileName: "", lineNumber: 50, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("p", { className: "text-gray-500", __source: { fileName: "", lineNumber: 51, columnNumber: 11 }, __self: this }, "Upload Audio"))), loading ? /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 55, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("svg", { className: "animate-spin h-5 w-5 mr-3 text-gray-500", xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", __source: { fileName: "", lineNumber: 56, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4", __source: { fileName: "", lineNumber: 62, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8v8h8a8 8 0 01-8 8V12H4z", __source: { fileName: "", lineNumber: 70, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("span", { className: "text-gray-500", __source: { fileName: "", lineNumber: 76, columnNumber: 11 }, __self: this }, "Loading Audio...")) : response && /*#__PURE__*/ React.createElement("div", { className: "text-gray-700 mt-5", __source: { fileName: "", lineNumber: 79, columnNumber: 21 }, __self: this }, response)); }