` : activity.split("Answer:")[0] + `

` : activity } } ), /* @__PURE__ */ React.createElement("div", { className: "flex gap-4 flex-wrap" }, /* @__PURE__ */ React.createElement( "button", { onClick: async () => { if (audioRef.current && audioPlaying) { audioRef.current.pause(); setAudioPlaying(false); return; } const rawText = showAnswer ? activity.replace(/<[^>]*>/g, "") : activity.split("Answer:")[0].replace(/<[^>]*>/g, ""); const processedText = rawText.replace(/\n/g, ", ").replace(/\./g, ". ").replace(/!/g, "! ").replace(/\?/g, "? ").replace(/,\s*,/g, ",").replace(/\s+/g, " ").trim(); try { const response = await fetch( `/integrations/text-to-speech/speech?text=${encodeURIComponent(processedText)}` ); const blob = await response.blob(); if (audioRef.current) { audioRef.current.src = URL.createObjectURL(blob); audioRef.current.volume = volume; audioRef.current.playbackRate = 0.95; audioRef.current.play(); setAudioPlaying(true); } else { audioRef.current = new Audio(URL.createObjectURL(blob)); audioRef.current.volume = volume; audioRef.current.playbackRate = 0.95; audioRef.current.addEventListener("timeupdate", () => { setAudioProgress( audioRef.current.currentTime / audioRef.current.duration * 100 ); }); audioRef.current.addEventListener("ended", () => { setAudioPlaying(false); setAudioProgress(0); }); audioRef.current.play(); setAudioPlaying(true); } } catch (error) { console.error("Error playing audio:", error); } }, className: "mt-4 bg-gradient-to-r from-[#60a5fa] to-[#3b82f6] text-white px-6 py-3 rounded-lg hover:shadow-lg transition duration-200 font-montserrat font-bold transform hover:scale-105" }, audioPlaying ? "\u23F8\uFE0F Pause" : "\u{1F50A} Read Aloud" ), /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-2 mt-4" }, /* @__PURE__ */ React.createElement( "input", { type: "range", min: "0", max: "100", value: audioProgress, className: "w-48 h-2 bg-[#60a5fa] rounded-lg appearance-none cursor-pointer", readOnly: true } ), /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-2" }, /* @__PURE__ */ React.createElement("i", { className: "fas fa-volume-down text-[#60a5fa]" }), /* @__PURE__ */ React.createElement( "input", { type: "range", min: "0", max: "1", step: "0.1", value: volume, onChange: (e) => { const newVolume = parseFloat(e.target.value); setVolume(newVolume); if (audioRef.current) { audioRef.current.volume = newVolume; } }, className: "w-24 h-2 bg-[#60a5fa] rounded-lg appearance-none cursor-pointer" } ), /* @__PURE__ */ React.createElement("i", { className: "fas fa-volume-up text-[#60a5fa]" }))))) : /* @__PURE__ */ React.createElement("div", { className: "text-center space-y-4" }, /* @__PURE__ */ React.createElement("div", { className: "text-[#4a5568] font-montserrat text-xl" }, "Choose a category above to get started!"), /* @__PURE__ */ React.createElement("div", { className: "text-[#60a5fa] animate-bounce text-4xl" }, "\u2191")))), /* @__PURE__ */ React.createElement("footer", { className: "text-center text-[#4a5568] font-montserrat py-8 border-t border-[#60a5fa]" }, /* @__PURE__ */ React.createElement("p", null, "Javier Reyes \xA9 2024"))); } var page_default = MainComponent; return __toCommonJS(page_exports); })();

Let's Take a Break! 🎯