function MainComponent() { const [voiceFile, setVoiceFile] = React.useState(null); const [vocaloidCharacter, setVocaloidCharacter] = React.useState("hatsune_miku"); const handleVoiceUpload = (event)=>{ setVoiceFile(event.target.files[0]); }; const handleCharacterChange = (event)=>{ setVocaloidCharacter(event.target.value); }; const processVoice = ()=>{ if (voiceFile) { // Mock implementation: In real implementation, you would send the file and character to the backend alert(`Processing ${voiceFile.name} with ${vocaloidCharacter}`); } else { alert("Please upload a voice file first."); } }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#f7f7f7] flex flex-col items-center font-roboto", __source: { fileName: "", lineNumber: 23, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "w-full bg-[#333] text-white p-4 text-center text-2xl", __source: { fileName: "", lineNumber: 24, columnNumber: 7 }, __self: this }, "Vocaloid Voice App"), /*#__PURE__*/ React.createElement("main", { className: "flex flex-col items-center mt-8 w-full max-w-[600px]", __source: { fileName: "", lineNumber: 27, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full flex flex-col items-center", __source: { fileName: "", lineNumber: 28, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl mb-2", __source: { fileName: "", lineNumber: 29, columnNumber: 11 }, __self: this }, "Upload your Voice"), /*#__PURE__*/ React.createElement("input", { type: "file", accept: "audio/*", className: "mb-4 p-2 w-full max-w-[400px] border border-gray-400", name: "voiceUpload", onChange: handleVoiceUpload, __source: { fileName: "", lineNumber: 30, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "p-2 bg-[#ff7f50] text-white w-full max-w-[200px]", onClick: processVoice, __source: { fileName: "", lineNumber: 37, columnNumber: 11 }, __self: this }, "Process Voice")), /*#__PURE__*/ React.createElement("div", { className: "mt-8 w-full flex flex-col items-center", __source: { fileName: "", lineNumber: 44, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl mb-2", __source: { fileName: "", lineNumber: 45, columnNumber: 11 }, __self: this }, "Choose Vocaloid Character"), /*#__PURE__*/ React.createElement("select", { className: "p-2 w-full max-w-[400px] border border-gray-400", name: "vocaloidCharacter", value: vocaloidCharacter, onChange: handleCharacterChange, __source: { fileName: "", lineNumber: 46, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "hatsune_miku", __source: { fileName: "", lineNumber: 52, columnNumber: 13 }, __self: this }, "Hatsune Miku"), /*#__PURE__*/ React.createElement("option", { value: "kagamine_rin", __source: { fileName: "", lineNumber: 53, columnNumber: 13 }, __self: this }, "Kagamine Rin"), /*#__PURE__*/ React.createElement("option", { value: "megurine_luka", __source: { fileName: "", lineNumber: 54, columnNumber: 13 }, __self: this }, "Megurine Luka"))))); }