function MainComponent() { const [text, setText] = React.useState(''); const [language, setLanguage] = React.useState('en-US'); const [voice, setVoice] = React.useState('male'); const [speed, setSpeed] = React.useState(1); const [pitch, setPitch] = React.useState(1); const handleTextChange = (e)=>{ setText(e.target.value); }; const handleLanguageChange = (e)=>{ setLanguage(e.target.value); }; const handleVoiceChange = (e)=>{ setVoice(e.target.value); }; const handleSpeedChange = (e)=>{ setSpeed(e.target.value); }; const handlePitchChange = (e)=>{ setPitch(e.target.value); }; const handlePlayClick = ()=>{ fetch(`https://texttospeech.googleapis.com/v1/text:synthesize?key=YOUR_API_KEY`, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ input: { text }, voice: { languageCode: language, name: `en-US-${voice}` }, audioConfig: { audioEncoding: 'MP3', speakingRate: speed, pitch } }) }).then((response)=>response.json()).then((data)=>{ const audio = new Audio(`data:audio/mp3;base64,${data.audioContent}`); audio.play(); }).catch((error)=>console.error('Error playing audio:', error)); }; const handleDownloadClick = ()=>{ fetch(`https://texttospeech.googleapis.com/v1/text:synthesize?key=YOUR_API_KEY`, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ input: { text }, voice: { languageCode: language, name: `en-US-${voice}` }, audioConfig: { audioEncoding: 'MP3', speakingRate: speed, pitch } }) }).then((response)=>response.json()).then((data)=>{ const link = document.createElement('a'); link.href = `data:audio/mp3;base64,${data.audioContent}`; link.download = 'speech.mp3'; document.body.appendChild(link); link.click(); document.body.removeChild(link); }); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#FFA500] flex flex-col items-center justify-center px-6 py-4", __source: { fileName: "", lineNumber: 71, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white p-6 rounded-lg shadow-lg w-full max-w-4xl", __source: { fileName: "", lineNumber: 72, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-crimson-text mb-4 text-center text-[#374151]", __source: { fileName: "", lineNumber: 73, columnNumber: 9 }, __self: this }, "Voice Creator - Elegant Text to Speech"), /*#__PURE__*/ React.createElement("img", { src: "https://ondoku3.com/ja/", alt: "Elegant microphone illustration", className: "w-full h-[300px] object-cover mb-8", __source: { fileName: "", lineNumber: 74, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "mb-10", __source: { fileName: "", lineNumber: 75, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "text-input", className: "block text-xl font-crimson-text text-[#374151] mb-3", __source: { fileName: "", lineNumber: 76, columnNumber: 11 }, __self: this }, "Enter text:"), /*#__PURE__*/ React.createElement("textarea", { id: "text-input", name: "text-input", rows: "5", className: "w-full p-3 border-2 border-[#cbd5e1] rounded-md font-crimson-text text-lg", placeholder: "Type here to speak...", onChange: handleTextChange, value: text, __source: { fileName: "", lineNumber: 77, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8 mb-10", __source: { fileName: "", lineNumber: 81, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 82, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "language-select", className: "block text-xl font-crimson-text text-[#374151] mb-3", __source: { fileName: "", lineNumber: 83, columnNumber: 13 }, __self: this }, "Language:"), /*#__PURE__*/ React.createElement("select", { id: "language-select", name: "language", className: "w-full p-2 border-2 border-[#cbd5e1] rounded-md bg-white font-crimson-text", onChange: handleLanguageChange, value: language, __source: { fileName: "", lineNumber: 84, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "en-US", __source: { fileName: "", lineNumber: 86, columnNumber: 15 }, __self: this }, "English"), /*#__PURE__*/ React.createElement("option", { value: "es-ES", __source: { fileName: "", lineNumber: 87, columnNumber: 15 }, __self: this }, "Spanish"), /*#__PURE__*/ React.createElement("option", { value: "fr-FR", __source: { fileName: "", lineNumber: 88, columnNumber: 15 }, __self: this }, "French"), /*#__PURE__*/ React.createElement("option", { value: "ja-JP", __source: { fileName: "", lineNumber: 89, columnNumber: 15 }, __self: this }, "Japanese"))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 92, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "voice-select", className: "block text-xl font-crimson-text text-[#374151] mb-3", __source: { fileName: "", lineNumber: 93, columnNumber: 13 }, __self: this }, "Voice:"), /*#__PURE__*/ React.createElement("select", { id: "voice-select", name: "voice", className: "w-full p-2 border-2 border-[#cbd5e1] rounded-md bg-white font-crimson-text", onChange: handleVoiceChange, value: voice, __source: { fileName: "", lineNumber: 94, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "male", __source: { fileName: "", lineNumber: 96, columnNumber: 15 }, __self: this }, "Male"), /*#__PURE__*/ React.createElement("option", { value: "female", __source: { fileName: "", lineNumber: 97, columnNumber: 15 }, __self: this }, "Female"))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 100, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "speed-select", className: "block text-xl font-crimson-text text-[#374151] mb-3", __source: { fileName: "", lineNumber: 101, columnNumber: 13 }, __self: this }, "Speed:"), /*#__PURE__*/ React.createElement("input", { id: "speed-select", type: "range", name: "speed", min: "0.5", max: "2", step: "0.1", className: "w-full bg-[#E5E7EB]", onChange: handleSpeedChange, value: speed, __source: { fileName: "", lineNumber: 102, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 105, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "pitch-select", className: "block text-xl font-crimson-text text-[#374151] mb-3", __source: { fileName: "", lineNumber: 106, columnNumber: 13 }, __self: this }, "Pitch:"), /*#__PURE__*/ React.createElement("input", { id: "pitch-select", type: "range", name: "pitch", min: "0.5", max: "2", step: "0.1", className: "w-full bg-[#E5E7EB]", onChange: handlePitchChange, value: pitch, __source: { fileName: "", lineNumber: 107, columnNumber: 13 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col sm:flex-row items-center justify-between gap-6", __source: { fileName: "", lineNumber: 111, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "flex-1 sm:flex-none bg-[#10B981] hover:bg-[#059669] text-white font-crimson-text py-3 px-6 rounded transition-colors duration-300", onClick: handlePlayClick, name: "play", __source: { fileName: "", lineNumber: 112, columnNumber: 11 }, __self: this }, "Play"), /*#__PURE__*/ React.createElement("button", { className: "flex-1 sm:flex-none bg-[#3B82F6] hover:bg-[#2563EB] text-white font-crimson-text py-3 px-6 rounded transition-colors duration-300", onClick: handleDownloadClick, name: "download", __source: { fileName: "", lineNumber: 115, columnNumber: 11 }, __self: this }, "Download MP3")))); }