' + '' + "

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

' + '' + "

" : activity }, __source: { fileName: "", lineNumber: 153, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "flex gap-4 flex-wrap", __source: { fileName: "", lineNumber: 169, columnNumber: 15 }, __self: this }, /*#__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", __source: { fileName: "", lineNumber: 170, columnNumber: 17 }, __self: this }, audioPlaying ? "⏸️ Pause" : "🔊 Read Aloud"), /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-2 mt-4", __source: { fileName: "", lineNumber: 226, columnNumber: 17 }, __self: this }, /*#__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, __source: { fileName: "", lineNumber: 227, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-2", __source: { fileName: "", lineNumber: 235, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-volume-down text-[#60a5fa]", __source: { fileName: "", lineNumber: 236, columnNumber: 21 }, __self: this }), /*#__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", __source: { fileName: "", lineNumber: 237, columnNumber: 21 }, __self: this }), /*#__PURE__*/ React.createElement("i", { className: "fas fa-volume-up text-[#60a5fa]", __source: { fileName: "", lineNumber: 252, columnNumber: 21 }, __self: this }))))) : /*#__PURE__*/ React.createElement("div", { className: "text-center space-y-4", __source: { fileName: "", lineNumber: 258, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-[#4a5568] font-montserrat text-xl", __source: { fileName: "", lineNumber: 259, columnNumber: 15 }, __self: this }, "Choose a category above to get started!"), /*#__PURE__*/ React.createElement("div", { className: "text-[#60a5fa] animate-bounce text-4xl", __source: { fileName: "", lineNumber: 262, columnNumber: 15 }, __self: this }, "↑")))), /*#__PURE__*/ React.createElement("footer", { className: "text-center text-[#4a5568] font-montserrat py-8 border-t border-[#60a5fa]", __source: { fileName: "", lineNumber: 267, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 268, columnNumber: 9 }, __self: this }, "Javier Reyes © 2024"))); }

Let's Take a Break! 🎯