function RoundedButtonDesign({ children, onClick }) { return /*#__PURE__*/ React.createElement("button", { className: "font-inter font-medium text-[#0E0F10] bg-[#E4E4E4] rounded-[8px] px-4 py-2 hover:bg-white transition-colors duration-200", onClick: onClick, __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, children); } function RoundedButtonDesignStory() { return /*#__PURE__*/ React.createElement("div", { className: "p-4 space-y-4", __source: { fileName: "", lineNumber: 14, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(RoundedButtonDesign, { onClick: ()=>console.log('Button clicked'), __source: { fileName: "", lineNumber: 15, columnNumber: 7 }, __self: this }, "Click me"), /*#__PURE__*/ React.createElement(RoundedButtonDesign, { onClick: ()=>console.log('Another button clicked'), __source: { fileName: "", lineNumber: 18, columnNumber: 7 }, __self: this }, "Another button")); } function MainComponent() { const [text, setText] = React.useState(""); const [enhancedText, setEnhancedText] = React.useState(""); const [isGenerating, setIsGenerating] = React.useState(false); const [error, setError] = React.useState(null); const [selectedVoice, setSelectedVoice] = React.useState(""); const [audioSpeed, setAudioSpeed] = React.useState(1); const [isPlaying, setIsPlaying] = React.useState(false); const [utterance, setUtterance] = React.useState(null); const [availableVoices, setAvailableVoices] = React.useState([]); const [isPaused, setIsPaused] = React.useState(false); React.useEffect(()=>{ if (typeof window === "undefined" || !window.speechSynthesis) return; const updateVoices = ()=>{ const voices = window.speechSynthesis.getVoices(); const englishVoices = voices.filter((voice)=>voice.lang.startsWith("en")); setAvailableVoices(englishVoices); if (englishVoices.length && !selectedVoice) { setSelectedVoice(englishVoices[0].voiceURI); } }; window.speechSynthesis.onvoiceschanged = updateVoices; updateVoices(); return ()=>{ window.speechSynthesis.onvoiceschanged = null; }; }, []); React.useEffect(()=>{ const handleKeyPress = (event)=>{ if ((event.ctrlKey || event.metaKey) && event.key === "Enter") { generateSpeech(); } }; document.addEventListener("keydown", handleKeyPress); return ()=>document.removeEventListener("keydown", handleKeyPress); }, [ text ]); React.useEffect(()=>{ if (typeof window !== "undefined" && !window.speechSynthesis) { setError("Your browser does not support speech synthesis"); return; } }, []); React.useEffect(()=>{ if (utterance) { utterance.rate = audioSpeed; } }, [ audioSpeed, utterance ]); const estimateAudioLength = (text)=>{ const wordsPerMinute = 150; const wordCount = text.trim().split(/\s+/).length; return Math.ceil(wordCount / wordsPerMinute * 60); }; const generateSpeech = async ()=>{ if (!text.trim()) { setError("Please enter some text to convert to speech"); return; } setIsGenerating(true); setError(null); setEnhancedText(""); if (window.speechSynthesis.speaking) { window.speechSynthesis.cancel(); } try { const chatResponse = await fetch("/integrations/google-gemini-1-5/", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ messages: [ { role: "system", content: "You are an expert at optimizing text for text-to-speech. Enhance the given text by adding natural pauses, improving pronunciation clarity, and making it more suitable for speech synthesis. Keep the meaning intact but make it sound more natural when spoken. Return only the enhanced text without any explanations." }, { role: "user", content: text.trim() } ] }) }); const chatData = await chatResponse.json(); const optimizedText = chatData.choices[0].message.content; setEnhancedText(optimizedText); const newUtterance = new SpeechSynthesisUtterance(optimizedText); newUtterance.voice = availableVoices.find((voice)=>voice.voiceURI === selectedVoice); newUtterance.rate = audioSpeed; newUtterance.onend = ()=>{ setIsPlaying(false); setIsPaused(false); }; setUtterance(newUtterance); window.speechSynthesis.speak(newUtterance); setIsPlaying(true); } catch (err) { setError(err.message || "Failed to generate speech. Please try again."); console.error("Error generating speech:", err); } finally{ setIsGenerating(false); } }; const handlePlayPause = ()=>{ if (isPlaying) { window.speechSynthesis.pause(); setIsPaused(true); } else if (isPaused) { window.speechSynthesis.resume(); setIsPaused(false); } setIsPlaying(!isPlaying); }; const handleStop = ()=>{ window.speechSynthesis.cancel(); setIsPlaying(false); setIsPaused(false); }; const handleDownload = async ()=>{ if (!enhancedText) return; try { const response = await fetch("/api/text-to-speech", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ text: enhancedText, voice: selectedVoice.includes("female") ? "female" : "male" }) }); const data = await response.json(); if (!response.ok) throw new Error(data.error || "Failed to download audio"); const link = document.createElement("a"); link.href = data.audioUrl; link.download = "generated-speech.mp3"; document.body.appendChild(link); link.click(); document.body.removeChild(link); } catch (err) { setError(err.message || "Failed to download audio"); console.error("Error downloading audio:", err); } }; return /*#__PURE__*/ React.createElement("div", { className: "flex min-h-screen bg-gradient-to-b from-[#141415] to-[#1d2124] text-[#B6B7B7] font-inter", __source: { fileName: "", lineNumber: 166, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "fixed h-full w-64 bg-[#141415] border-r border-[#B6B7B7]/10 p-6 z-50 left-0 top-0", __source: { fileName: "", lineNumber: 167, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "https://ucarecdn.com/82bf40ba-7691-4c03-bef1-55eb63212828/-/format/auto/", alt: "Logo", className: "h-8 mb-8", __source: { fileName: "", lineNumber: 168, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "flex items-center mb-12", __source: { fileName: "", lineNumber: 173, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-microphone text-white mr-3", __source: { fileName: "", lineNumber: 174, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "text-white font-semibold text-xl", __source: { fileName: "", lineNumber: 175, columnNumber: 11 }, __self: this }, "Text to Speech")), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col space-y-6", __source: { fileName: "", lineNumber: 179, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/homepage", className: "text-[#B6B7B7] hover:text-white transition-colors flex items-center text-base", __source: { fileName: "", lineNumber: 180, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-home w-8", __source: { fileName: "", lineNumber: 184, columnNumber: 13 }, __self: this }), "Home"), /*#__PURE__*/ React.createElement("a", { href: "/explore", className: "text-[#B6B7B7] hover:text-white transition-colors flex items-center text-base", __source: { fileName: "", lineNumber: 187, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-compass w-8", __source: { fileName: "", lineNumber: 191, columnNumber: 13 }, __self: this }), "Explore"), /*#__PURE__*/ React.createElement("a", { href: "/prompt-library", className: "text-[#B6B7B7] hover:text-white transition-colors flex items-center text-base", __source: { fileName: "", lineNumber: 194, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-book w-8", __source: { fileName: "", lineNumber: 198, columnNumber: 13 }, __self: this }), "Prompt Library"), /*#__PURE__*/ React.createElement("a", { href: "/app", className: "text-[#B6B7B7] hover:text-white transition-colors flex items-center text-base", __source: { fileName: "", lineNumber: 201, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-cog w-8", __source: { fileName: "", lineNumber: 205, columnNumber: 13 }, __self: this }), "Settings"))), /*#__PURE__*/ React.createElement("div", { className: "fixed top-4 right-4 z-50 bg-[#1d2124] p-4 rounded-lg border border-[#7C4DFF] text-white", __source: { fileName: "", lineNumber: 210, columnNumber: 1 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-sm", __source: { fileName: "", lineNumber: 211, columnNumber: 9 }, __self: this }, "Credits Remaining"), /*#__PURE__*/ React.createElement("div", { className: "text-2xl font-bold", __source: { fileName: "", lineNumber: 212, columnNumber: 9 }, __self: this }, "15")), /*#__PURE__*/ React.createElement("div", { className: "flex-1 ml-64 p-4 md:p-8 xl:p-12 flex flex-col min-h-screen", __source: { fileName: "", lineNumber: 215, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-4xl mx-auto space-y-8 flex-1", __source: { fileName: "", lineNumber: 216, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 217, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-semibold text-white", __source: { fileName: "", lineNumber: 218, columnNumber: 13 }, __self: this }, "AI-Enhanced Text to Speech"), /*#__PURE__*/ React.createElement("p", { className: "text-lg text-[#B6B7B7]", __source: { fileName: "", lineNumber: 221, columnNumber: 13 }, __self: this }, "Transform your text into natural-sounding speech with AI optimization")), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-6", __source: { fileName: "", lineNumber: 226, columnNumber: 1 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-[#1d2124] p-6 rounded-lg", __source: { fileName: "", lineNumber: 227, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-robot text-[#7C4DFF] text-2xl mb-4", __source: { fileName: "", lineNumber: 228, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("h3", { className: "text-white font-semibold mb-2", __source: { fileName: "", lineNumber: 229, columnNumber: 15 }, __self: this }, "AI Enhancement"), /*#__PURE__*/ React.createElement("p", { className: "text-sm", __source: { fileName: "", lineNumber: 230, columnNumber: 15 }, __self: this }, "Optimizes your text for better speech output")), /*#__PURE__*/ React.createElement("div", { className: "bg-[#1d2124] p-6 rounded-lg", __source: { fileName: "", lineNumber: 234, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-microphone text-[#7C4DFF] text-2xl mb-4", __source: { fileName: "", lineNumber: 235, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("h3", { className: "text-white font-semibold mb-2", __source: { fileName: "", lineNumber: 236, columnNumber: 15 }, __self: this }, "Natural Voice"), /*#__PURE__*/ React.createElement("p", { className: "text-sm", __source: { fileName: "", lineNumber: 237, columnNumber: 15 }, __self: this }, "Choose between male and female voices")), /*#__PURE__*/ React.createElement("div", { className: "bg-[#1d2124] p-6 rounded-lg", __source: { fileName: "", lineNumber: 239, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-sliders-h text-[#7C4DFF] text-2xl mb-4", __source: { fileName: "", lineNumber: 240, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("h3", { className: "text-white font-semibold mb-2", __source: { fileName: "", lineNumber: 241, columnNumber: 15 }, __self: this }, "Customizable"), /*#__PURE__*/ React.createElement("p", { className: "text-sm", __source: { fileName: "", lineNumber: 242, columnNumber: 15 }, __self: this }, "Adjust playback speed to your preference"))), error && /*#__PURE__*/ React.createElement("div", { className: "bg-red-500/10 border border-red-500/20 rounded-lg p-4 mb-6", __source: { fileName: "", lineNumber: 249, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-red-400", __source: { fileName: "", lineNumber: 250, columnNumber: 15 }, __self: this }, error)), /*#__PURE__*/ React.createElement("div", { className: "bg-[#1d2124] rounded-lg p-6 space-y-8", __source: { fileName: "", lineNumber: 254, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "space-y-6", __source: { fileName: "", lineNumber: 255, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 256, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-white mb-3", __source: { fileName: "", lineNumber: 257, columnNumber: 17 }, __self: this }, "Voice Selection"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", __source: { fileName: "", lineNumber: 258, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("select", { value: selectedVoice, onChange: (e)=>setSelectedVoice(e.target.value), className: "w-full bg-[#141415] text-[#B6B7B7] p-4 rounded-lg border border-[#B6B7B7]/10 focus:border-[#B6B7B7]/30 transition-all text-base", __source: { fileName: "", lineNumber: 259, columnNumber: 19 }, __self: this }, availableVoices.map((voice)=>/*#__PURE__*/ React.createElement("option", { key: voice.voiceURI, value: voice.voiceURI, __source: { fileName: "", lineNumber: 265, columnNumber: 23 }, __self: this }, voice.name))), /*#__PURE__*/ React.createElement("button", { onClick: ()=>{ const voice = availableVoices.find((v)=>v.voiceURI === selectedVoice); if (voice) { const audio = new Audio(voice.sample); audio.play(); } }, className: "bg-[#141415] text-[#B6B7B7] p-4 rounded-lg border border-[#B6B7B7]/10 hover:border-[#B6B7B7]/30", __source: { fileName: "", lineNumber: 270, columnNumber: 19 }, __self: this }, "Preview Voice"))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 286, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center mb-3", __source: { fileName: "", lineNumber: 287, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-white", __source: { fileName: "", lineNumber: 288, columnNumber: 19 }, __self: this }, "Text Input"), /*#__PURE__*/ React.createElement("div", { className: "text-sm", __source: { fileName: "", lineNumber: 289, columnNumber: 19 }, __self: this }, text.length, " characters • ~", estimateAudioLength(text), "s audio")), /*#__PURE__*/ React.createElement("textarea", { value: text, onChange: (e)=>setText(e.target.value), placeholder: "Enter your text here... (Ctrl/Cmd + Enter to generate)", className: "w-full h-40 bg-[#141415] text-[#B6B7B7] p-4 rounded-lg border border-[#B6B7B7]/10 focus:border-[#B6B7B7]/30 transition-all resize-none text-base", "aria-label": "Text to convert to speech", __source: { fileName: "", lineNumber: 294, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("button", { onClick: generateSpeech, disabled: isGenerating || !text.trim(), className: `w-full py-4 rounded-lg font-medium transition-all text-base ${isGenerating || !text.trim() ? "bg-[#B6B7B7]/20 cursor-not-allowed" : "bg-[#7C4DFF] hover:bg-[#6A1B9A] text-white"}`, __source: { fileName: "", lineNumber: 302, columnNumber: 15 }, __self: this }, isGenerating ? /*#__PURE__*/ React.createElement("span", { className: "flex items-center justify-center", __source: { fileName: "", lineNumber: 312, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-circle-notch animate-spin mr-2", __source: { fileName: "", lineNumber: 313, columnNumber: 21 }, __self: this }), "Generating Speech...") : "Generate Speech")), enhancedText && /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 323, columnNumber: 15 }, __self: this }, enhancedText && /*#__PURE__*/ React.createElement("div", { className: "bg-[#141415] p-4 rounded-lg border border-[#B6B7B7]/10", __source: { fileName: "", lineNumber: 325, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-white mb-2", __source: { fileName: "", lineNumber: 326, columnNumber: 21 }, __self: this }, "AI-Enhanced Text:"), /*#__PURE__*/ React.createElement("p", { className: "text-[#B6B7B7]", __source: { fileName: "", lineNumber: 327, columnNumber: 21 }, __self: this }, enhancedText)), enhancedText && /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 331, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between space-x-4 bg-[#141415] p-4 rounded-lg", __source: { fileName: "", lineNumber: 332, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex space-x-4", __source: { fileName: "", lineNumber: 333, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: handlePlayPause, className: "text-[#B6B7B7] hover:text-white transition-colors", "aria-label": isPlaying ? "Pause" : "Play", __source: { fileName: "", lineNumber: 334, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fas fa-${isPlaying ? "pause" : "play"} text-xl`, __source: { fileName: "", lineNumber: 339, columnNumber: 27 }, __self: this })), /*#__PURE__*/ React.createElement("button", { onClick: handleStop, className: "text-[#B6B7B7] hover:text-white transition-colors", "aria-label": "Stop", __source: { fileName: "", lineNumber: 343, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-stop text-xl", __source: { fileName: "", lineNumber: 348, columnNumber: 27 }, __self: this }))), /*#__PURE__*/ React.createElement("select", { value: audioSpeed, onChange: (e)=>setAudioSpeed(parseFloat(e.target.value)), className: "bg-[#141415] text-[#B6B7B7] p-2 rounded-lg border border-[#B6B7B7]/10", __source: { fileName: "", lineNumber: 351, columnNumber: 23 }, __self: this }, [ 0.5, 0.75, 1, 1.25, 1.5, 1.75, 2 ].map((speed)=>/*#__PURE__*/ React.createElement("option", { key: speed, value: speed, __source: { fileName: "", lineNumber: 359, columnNumber: 27 }, __self: this }, speed, "x")))), /*#__PURE__*/ React.createElement("div", { className: "flex space-x-2", __source: { fileName: "", lineNumber: 365, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: handleDownload, className: "flex-1 py-3 bg-[#141415] text-[#B6B7B7] rounded-lg hover:bg-[#1d2124] transition-colors flex items-center justify-center text-base", __source: { fileName: "", lineNumber: 366, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-download mr-2 text-xs", __source: { fileName: "", lineNumber: 370, columnNumber: 25 }, __self: this }), "Download Audio")))))), /*#__PURE__*/ React.createElement("footer", { className: "mt-auto w-full pt-8", __source: { fileName: "", lineNumber: 381, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-4xl mx-auto", __source: { fileName: "", lineNumber: 382, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "border-t border-[#B6B7B7]/10 pt-8 pb-4", __source: { fileName: "", lineNumber: 383, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col md:flex-row justify-between items-center gap-4", __source: { fileName: "", lineNumber: 384, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center space-x-4", __source: { fileName: "", lineNumber: 385, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/about", className: "text-sm hover:text-white transition-colors", __source: { fileName: "", lineNumber: 386, columnNumber: 19 }, __self: this }, "About"), /*#__PURE__*/ React.createElement("a", { href: "/blog", className: "text-sm hover:text-white transition-colors", __source: { fileName: "", lineNumber: 387, columnNumber: 19 }, __self: this }, "Blog"), /*#__PURE__*/ React.createElement("a", { href: "/contact", className: "text-sm hover:text-white transition-colors", __source: { fileName: "", lineNumber: 388, columnNumber: 19 }, __self: this }, "Contact")), /*#__PURE__*/ React.createElement("div", { className: "flex items-center space-x-6", __source: { fileName: "", lineNumber: 390, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "https://twitter.com", target: "_blank", rel: "noopener noreferrer", className: "hover:text-white transition-colors", __source: { fileName: "", lineNumber: 391, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fab fa-twitter text-sm", __source: { fileName: "", lineNumber: 392, columnNumber: 21 }, __self: this })), /*#__PURE__*/ React.createElement("a", { href: "https://github.com", target: "_blank", rel: "noopener noreferrer", className: "hover:text-white transition-colors", __source: { fileName: "", lineNumber: 394, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fab fa-github text-sm", __source: { fileName: "", lineNumber: 395, columnNumber: 21 }, __self: this })), /*#__PURE__*/ React.createElement("a", { href: "https://discord.com", target: "_blank", rel: "noopener noreferrer", className: "hover:text-white transition-colors", __source: { fileName: "", lineNumber: 397, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fab fa-discord text-sm", __source: { fileName: "", lineNumber: 398, columnNumber: 21 }, __self: this })))), /*#__PURE__*/ React.createElement("div", { className: "text-center mt-8 text-sm text-[#B6B7B7]/60", __source: { fileName: "", lineNumber: 402, columnNumber: 15 }, __self: this }, "© 2025 Create. All rights reserved.")))))); }