function MainComponent() { const [text, setText] = React.useState(""); const [wordCount, setWordCount] = React.useState(0); const [loading, setLoading] = React.useState(false); const [audioUrl, setAudioUrl] = React.useState(""); const [previousAudioUrl, setPreviousAudioUrl] = React.useState(""); const [voice, setVoice] = React.useState("21m00Tcm4TlvDq8ikWAM"); const [language, setLanguage] = React.useState("de"); const [error, setError] = React.useState(""); const [stability, setStability] = React.useState(0.5); const [similarityBoost, setSimilarityBoost] = React.useState(0.5); const [style, setStyle] = React.useState(0); const [displayLanguage, setDisplayLanguage] = React.useState("de"); const audioRef = React.useRef(null); const handleVoiceChange = (e)=>{ const selectedVoice = e.target.value; setVoice(selectedVoice); }; const handleStabilityChange = (e)=>{ const value = Math.max(0, Math.min(1, parseFloat(e.target.value))); setStability(value); }; const handleSimilarityBoostChange = (e)=>{ const value = Math.max(0, Math.min(1, parseFloat(e.target.value))); setSimilarityBoost(value); }; const handleStyleChange = (e)=>{ const value = Math.max(0, Math.min(1, parseFloat(e.target.value))); setStyle(value); }; const handleTextChange = (e)=>{ const newText = e.target.value; setText(newText); setWordCount(newText.split(/\s+/).filter((word)=>word.length > 0).length); }; const generateSpeech = async ()=>{ if (!text.trim()) return; setLoading(true); setError(""); const params = { text, voice_id: voice, model_id: "eleven_multilingual_v2", stability: Number(stability), similarity_boost: Number(similarityBoost), style: Number(style) }; try { const response = await fetch("/api/elevenlabs-api-access", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(params) }); const data = await response.json(); if (data.error) { setError(data.error); } else { setPreviousAudioUrl(audioUrl); setAudioUrl(data.audioUrl); setText(""); setWordCount(0); } } catch (error) { setError("Ein Fehler ist aufgetreten. Bitte versuchen Sie es später erneut."); } setLoading(false); }; const handleDownload = async ()=>{ try { const response = await fetch(audioUrl); const blob = await response.blob(); const url = window.URL.createObjectURL(blob); const a = document.createElement("a"); a.href = url; a.download = "speech.mp3"; document.body.appendChild(a); a.click(); window.URL.revokeObjectURL(url); document.body.removeChild(a); } catch (error) { console.error("Download error:", error); } }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-white text-[#282727] font-montserrat", __source: { fileName: "", lineNumber: 98, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full px-4 py-12", __source: { fileName: "", lineNumber: 99, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-end mb-4", __source: { fileName: "", lineNumber: 100, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setDisplayLanguage(displayLanguage === "en" ? "de" : "en"), className: "px-4 py-2 rounded-lg bg-[#315caa] text-white font-montserrat", __source: { fileName: "", lineNumber: 101, columnNumber: 11 }, __self: this }, displayLanguage === "en" ? "DE" : "EN")), /*#__PURE__*/ React.createElement("h1", { className: "text-3xl md:text-4xl font-bold text-left mb-6", __source: { fileName: "", lineNumber: 110, columnNumber: 9 }, __self: this }, displayLanguage === "en" ? "AI Voice Over Creator" : "KI Voice Over Creator"), /*#__PURE__*/ React.createElement("p", { className: "text-xl text-[#315caa] text-left mb-12 font-bold", __source: { fileName: "", lineNumber: 115, columnNumber: 9 }, __self: this }, displayLanguage === "en" ? "Transform your ideas into stunning voices" : "Verwandeln Sie Ihre Ideen in beeindruckende Stimmen"), /*#__PURE__*/ React.createElement("div", { className: "space-y-6", __source: { fileName: "", lineNumber: 120, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex gap-4 flex-col sm:flex-row", __source: { fileName: "", lineNumber: 121, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("select", { value: voice, onChange: handleVoiceChange, className: "flex-1 p-3 rounded-lg bg-[#315caa] text-white border border-[#315caa] focus:border-[#315caa] focus:outline-none [&>optgroup]:text-white [&>optgroup>option]:text-white font-montserrat", __source: { fileName: "", lineNumber: 122, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("optgroup", { label: "English", __source: { fileName: "", lineNumber: 127, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "21m00Tcm4TlvDq8ikWAM", __source: { fileName: "", lineNumber: 128, columnNumber: 17 }, __self: this }, "Rachel"), /*#__PURE__*/ React.createElement("option", { value: "AZnzlk1XvdvUeBnXmlld", __source: { fileName: "", lineNumber: 129, columnNumber: 17 }, __self: this }, "Domi"), /*#__PURE__*/ React.createElement("option", { value: "TxGEqnHWrfWFTfGW9XjX", __source: { fileName: "", lineNumber: 130, columnNumber: 17 }, __self: this }, "Josh"), /*#__PURE__*/ React.createElement("option", { value: "yoZ06aMxZJJ28mfd3POQ", __source: { fileName: "", lineNumber: 131, columnNumber: 17 }, __self: this }, "Sam"), /*#__PURE__*/ React.createElement("option", { value: "ThT5KcBeYPX3keUQqHPh", __source: { fileName: "", lineNumber: 132, columnNumber: 17 }, __self: this }, "Dorothy"), /*#__PURE__*/ React.createElement("option", { value: "IKne3meq5aSn9XLyUdCD", __source: { fileName: "", lineNumber: 133, columnNumber: 17 }, __self: this }, "Charlie"), /*#__PURE__*/ React.createElement("option", { value: "GBv7mTt0atIp3Br8iCZE", __source: { fileName: "", lineNumber: 134, columnNumber: 17 }, __self: this }, "Thomas"), /*#__PURE__*/ React.createElement("option", { value: "LcfcDJNUP1GQjkzn1xUU", __source: { fileName: "", lineNumber: 135, columnNumber: 17 }, __self: this }, "Emily"), /*#__PURE__*/ React.createElement("option", { value: "pNInz6obpgDQGcFmaJgB", __source: { fileName: "", lineNumber: 136, columnNumber: 17 }, __self: this }, "Adam"), /*#__PURE__*/ React.createElement("option", { value: "EXAVITQu4vr4xnSDxMaL", __source: { fileName: "", lineNumber: 137, columnNumber: 17 }, __self: this }, "Bella"), /*#__PURE__*/ React.createElement("option", { value: "ErXwobaYiN019PkySvjV", __source: { fileName: "", lineNumber: 138, columnNumber: 17 }, __self: this }, "Antoni"), /*#__PURE__*/ React.createElement("option", { value: "MF3mGyEYCl7XYWbV9V6O", __source: { fileName: "", lineNumber: 139, columnNumber: 17 }, __self: this }, "Elli"), /*#__PURE__*/ React.createElement("option", { value: "VR6AewLTigWG4xSOukaG", __source: { fileName: "", lineNumber: 140, columnNumber: 17 }, __self: this }, "Arnold"), /*#__PURE__*/ React.createElement("option", { value: "jBpfuIE2acCO8z3wKNLl", __source: { fileName: "", lineNumber: 141, columnNumber: 17 }, __self: this }, "Charlotte"), /*#__PURE__*/ React.createElement("option", { value: "onwK4e9ZLuTAKqWW03F9", __source: { fileName: "", lineNumber: 142, columnNumber: 17 }, __self: this }, "Matilda"), /*#__PURE__*/ React.createElement("option", { value: "t0jbNlBVZ17f02VDIeMI", __source: { fileName: "", lineNumber: 143, columnNumber: 17 }, __self: this }, "Jessie"), /*#__PURE__*/ React.createElement("option", { value: "z9fAnlkpzviPz146aGWa", __source: { fileName: "", lineNumber: 144, columnNumber: 17 }, __self: this }, "Callum"), /*#__PURE__*/ React.createElement("option", { value: "g5CIjZEefAph4nQFvHAz", __source: { fileName: "", lineNumber: 145, columnNumber: 17 }, __self: this }, "Patrick"), /*#__PURE__*/ React.createElement("option", { value: "zcAOhNBS3c14rBihAFp1", __source: { fileName: "", lineNumber: 146, columnNumber: 17 }, __self: this }, "Harry"), /*#__PURE__*/ React.createElement("option", { value: "oWAxZDx7w5VEj9dCyTzz", __source: { fileName: "", lineNumber: 147, columnNumber: 17 }, __self: this }, "Liam"), /*#__PURE__*/ React.createElement("option", { value: "TX3LPaxmHKxFdv7VOQHJ", __source: { fileName: "", lineNumber: 148, columnNumber: 17 }, __self: this }, "Daniel"))), /*#__PURE__*/ React.createElement("select", { value: language, onChange: (e)=>setLanguage(e.target.value), className: "flex-1 p-3 rounded-lg bg-[#315caa] text-white border border-[#315caa] focus:border-[#315caa] focus:outline-none [&>option]:text-white font-montserrat", __source: { fileName: "", lineNumber: 152, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "en", __source: { fileName: "", lineNumber: 157, columnNumber: 15 }, __self: this }, "English"), /*#__PURE__*/ React.createElement("option", { value: "de", __source: { fileName: "", lineNumber: 158, columnNumber: 15 }, __self: this }, "German"), /*#__PURE__*/ React.createElement("option", { value: "pl", __source: { fileName: "", lineNumber: 159, columnNumber: 15 }, __self: this }, "Polish"), /*#__PURE__*/ React.createElement("option", { value: "es", __source: { fileName: "", lineNumber: 160, columnNumber: 15 }, __self: this }, "Spanish"), /*#__PURE__*/ React.createElement("option", { value: "it", __source: { fileName: "", lineNumber: 161, columnNumber: 15 }, __self: this }, "Italian"), /*#__PURE__*/ React.createElement("option", { value: "fr", __source: { fileName: "", lineNumber: 162, columnNumber: 15 }, __self: this }, "French"), /*#__PURE__*/ React.createElement("option", { value: "pt", __source: { fileName: "", lineNumber: 163, columnNumber: 15 }, __self: this }, "Portuguese"), /*#__PURE__*/ React.createElement("option", { value: "hi", __source: { fileName: "", lineNumber: 164, columnNumber: 15 }, __self: this }, "Hindi"), /*#__PURE__*/ React.createElement("option", { value: "ar", __source: { fileName: "", lineNumber: 165, columnNumber: 15 }, __self: this }, "Arabic"), /*#__PURE__*/ React.createElement("option", { value: "ko", __source: { fileName: "", lineNumber: 166, columnNumber: 15 }, __self: this }, "Korean"), /*#__PURE__*/ React.createElement("option", { value: "ja", __source: { fileName: "", lineNumber: 167, columnNumber: 15 }, __self: this }, "Japanese"), /*#__PURE__*/ React.createElement("option", { value: "zh", __source: { fileName: "", lineNumber: 168, columnNumber: 15 }, __self: this }, "Chinese"), /*#__PURE__*/ React.createElement("option", { value: "id", __source: { fileName: "", lineNumber: 169, columnNumber: 15 }, __self: this }, "Indonesian"), /*#__PURE__*/ React.createElement("option", { value: "nl", __source: { fileName: "", lineNumber: 170, columnNumber: 15 }, __self: this }, "Dutch"), /*#__PURE__*/ React.createElement("option", { value: "tr", __source: { fileName: "", lineNumber: 171, columnNumber: 15 }, __self: this }, "Turkish"), /*#__PURE__*/ React.createElement("option", { value: "fil", __source: { fileName: "", lineNumber: 172, columnNumber: 15 }, __self: this }, "Filipino"), /*#__PURE__*/ React.createElement("option", { value: "uk", __source: { fileName: "", lineNumber: 173, columnNumber: 15 }, __self: this }, "Ukrainian"), /*#__PURE__*/ React.createElement("option", { value: "el", __source: { fileName: "", lineNumber: 174, columnNumber: 15 }, __self: this }, "Greek"), /*#__PURE__*/ React.createElement("option", { value: "cs", __source: { fileName: "", lineNumber: 175, columnNumber: 15 }, __self: this }, "Czech"), /*#__PURE__*/ React.createElement("option", { value: "fi", __source: { fileName: "", lineNumber: 176, columnNumber: 15 }, __self: this }, "Finnish"), /*#__PURE__*/ React.createElement("option", { value: "ro", __source: { fileName: "", lineNumber: 177, columnNumber: 15 }, __self: this }, "Romanian"), /*#__PURE__*/ React.createElement("option", { value: "sv", __source: { fileName: "", lineNumber: 178, columnNumber: 15 }, __self: this }, "Swedish"), /*#__PURE__*/ React.createElement("option", { value: "hu", __source: { fileName: "", lineNumber: 179, columnNumber: 15 }, __self: this }, "Hungarian"), /*#__PURE__*/ React.createElement("option", { value: "sk", __source: { fileName: "", lineNumber: 180, columnNumber: 15 }, __self: this }, "Slovak"), /*#__PURE__*/ React.createElement("option", { value: "vi", __source: { fileName: "", lineNumber: 181, columnNumber: 15 }, __self: this }, "Vietnamese"), /*#__PURE__*/ React.createElement("option", { value: "bg", __source: { fileName: "", lineNumber: 182, columnNumber: 15 }, __self: this }, "Bulgarian"))), /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 185, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col gap-2", __source: { fileName: "", lineNumber: 186, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "text-sm text-[#282727]", __source: { fileName: "", lineNumber: 187, columnNumber: 15 }, __self: this }, "Stability (", stability.toFixed(1), ")"), /*#__PURE__*/ React.createElement("input", { type: "range", min: "0", max: "1", step: "0.1", value: stability, onChange: handleStabilityChange, className: "w-full accent-[#315caa]", __source: { fileName: "", lineNumber: 190, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col gap-2", __source: { fileName: "", lineNumber: 201, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "text-sm text-[#282727]", __source: { fileName: "", lineNumber: 202, columnNumber: 15 }, __self: this }, "Similarity Boost (", similarityBoost.toFixed(1), ")"), /*#__PURE__*/ React.createElement("input", { type: "range", min: "0", max: "1", step: "0.1", value: similarityBoost, onChange: handleSimilarityBoostChange, className: "w-full accent-[#315caa]", __source: { fileName: "", lineNumber: 205, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col gap-2", __source: { fileName: "", lineNumber: 216, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "text-sm text-[#282727]", __source: { fileName: "", lineNumber: 217, columnNumber: 15 }, __self: this }, "Style (", style.toFixed(1), ")"), /*#__PURE__*/ React.createElement("input", { type: "range", min: "0", max: "1", step: "0.1", value: style, onChange: handleStyleChange, className: "w-full accent-[#315caa]", __source: { fileName: "", lineNumber: 220, columnNumber: 15 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "relative", __source: { fileName: "", lineNumber: 231, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("textarea", { value: text, onChange: handleTextChange, className: "w-full h-48 p-4 rounded-lg bg-white border border-[#315caa] focus:border-[#315caa] focus:outline-none resize-none text-[#282727]", placeholder: displayLanguage === "en" ? "Enter your text here..." : "Geben Sie hier Ihren Text ein...", maxLength: 1000, __source: { fileName: "", lineNumber: 232, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "absolute bottom-3 right-3 text-sm text-[#282727]", __source: { fileName: "", lineNumber: 243, columnNumber: 13 }, __self: this }, wordCount, "/200 ", displayLanguage === "en" ? "words" : "Wörter")), error && /*#__PURE__*/ React.createElement("div", { className: "p-4 rounded-lg bg-[#ff000020] border border-[#ff0000] text-[#ff0000]", __source: { fileName: "", lineNumber: 248, columnNumber: 13 }, __self: this }, error), /*#__PURE__*/ React.createElement("button", { onClick: generateSpeech, disabled: loading || wordCount > 200 || wordCount === 0, className: "w-full py-3 px-6 rounded-lg font-semibold text-white bg-[#315caa]", __source: { fileName: "", lineNumber: 252, columnNumber: 11 }, __self: this }, loading ? /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-center gap-2", __source: { fileName: "", lineNumber: 258, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-5 h-5 border-2 border-white border-t-transparent rounded-full animate-spin", __source: { fileName: "", lineNumber: 259, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 260, columnNumber: 17 }, __self: this }, displayLanguage === "en" ? "Generating..." : "Generierung...")) : displayLanguage === "en" ? "Generate" : "Generieren"), audioUrl && /*#__PURE__*/ React.createElement("div", { className: "mt-8", __source: { fileName: "", lineNumber: 273, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "p-4 rounded-lg bg-[#315caa] text-white", __source: { fileName: "", lineNumber: 274, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col w-full gap-4", __source: { fileName: "", lineNumber: 275, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full", __source: { fileName: "", lineNumber: 276, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("audio", { ref: audioRef, key: audioUrl, controls: true, className: "w-full h-12 rounded", __source: { fileName: "", lineNumber: 277, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("source", { src: audioUrl, type: "audio/mpeg", __source: { fileName: "", lineNumber: 283, columnNumber: 23 }, __self: this }), displayLanguage === "en" ? "Your browser does not support the audio element." : "Ihr Browser unterstützt das Audio-Element nicht.")), /*#__PURE__*/ React.createElement("div", { className: "w-full flex justify-end", __source: { fileName: "", lineNumber: 289, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: handleDownload, className: "py-3 px-6 rounded-lg font-semibold bg-white text-[#315caa] flex items-center gap-2 whitespace-nowrap", __source: { fileName: "", lineNumber: 290, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-download text-lg", __source: { fileName: "", lineNumber: 294, columnNumber: 23 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 295, columnNumber: 23 }, __self: this }, displayLanguage === "en" ? "Download" : "Herunterladen"))))))))); }