function MainComponent() { const [audioUrl, setAudioUrl] = React.useState(null); const [currentPage, setCurrentPage] = React.useState(1); const [transcription, setTranscription] = React.useState(""); const [illustrationUrls, setIllustrationUrls] = React.useState([]); const pages = [ "Meet Stella, a six-year-old black American girl with dreams bigger than the sky.", "Stella loves stars and dreams of exploring space to visit them one day.", "With her telescope, she gazed at the stars every night, wishing she could fly among them.", "One evening, Stella decided to build her own spaceship out of cardboard and dreams.", "With her spaceship ready, she imagined blasting off into the night sky.", "Stella journeyed past the moon, waving to the man on the moon as she passed.", "She danced on the rings of Saturn and raced shooting stars.", "In the distance, Stella saw a planet glowing brightly and steered her ship towards it.", "Landing on the planet, she discovered it was made entirely of ice cream!", "After a feast, Stella felt homesick. She looked up to see Earth, a blue marble in the distance.", "With a heart full of adventure, Stella flew her spaceship back home.", "Back in her room, Stella realized that with imagination, she could travel anywhere.", "The end." ]; const fetchIllustrations = ()=>{ pages.forEach((page, index)=>{ const prompt = `a 6-year-old black American girl dreaming of space, page ${index + 1} of the adventure, cheerful, illustrated style`; fetch(`/integrations/stable-diffusion/?prompt=${encodeURIComponent(prompt)}&batch_size=1`, { method: 'GET' }).then((response)=>response.json()).then(({ data })=>{ setIllustrationUrls((currentUrls)=>{ const newUrls = [ ...currentUrls ]; newUrls[index] = data[0]; return newUrls; }); }); }); }; const fetchPageAudio = (pageIndex)=>{ const text = pages[pageIndex - 1]; const encodedText = encodeURIComponent(text); fetch(`/integrations/text-to-speech/speech?text=${encodedText}`, { method: 'GET' }).then((response)=>response.blob()).then((blob)=>{ setAudioUrl(URL.createObjectURL(blob)); }); }; const transcribeAudio = (audioFile)=>{ fetch('/integrations/transcribe-audio-2/listen', { method: 'POST', body: audioFile, headers: { 'Content-Type': 'audio/mpeg' } }).then((response)=>response.json()).then((data)=>{ if (data.results.channels[0].alternatives[0]) { setTranscription(data.results.channels[0].alternatives[0].transcript); } }); }; const handleAudioUpload = (event)=>{ const file = event.target.files[0]; if (file) { transcribeAudio(file); } }; const goToNextPage = ()=>{ if (currentPage < pages.length) { setCurrentPage(currentPage + 1); fetchPageAudio(currentPage + 1); } }; const goToPreviousPage = ()=>{ if (currentPage > 1) { setCurrentPage(currentPage - 1); fetchPageAudio(currentPage - 1); } }; React.useEffect(()=>{ fetchIllustrations(); }, []); React.useEffect(()=>{ fetchPageAudio(currentPage); }, [ currentPage ]); const totalPages = pages.length; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center p-4 bg-[#E2F0CB] min-h-screen", __source: { fileName: "", lineNumber: 100, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "font-roboto text-3xl text-[#344055] mb-4", __source: { fileName: "", lineNumber: 101, columnNumber: 7 }, __self: this }, "Stella's Space Adventure"), /*#__PURE__*/ React.createElement("p", { className: "text-[#344055] mb-2 font-roboto", __source: { fileName: "", lineNumber: 102, columnNumber: 7 }, __self: this }, "Page ", currentPage, " of ", totalPages), illustrationUrls[currentPage - 1] && /*#__PURE__*/ React.createElement("img", { src: illustrationUrls[currentPage - 1], alt: `Illustration of Stella's space adventure, Page ${currentPage}`, className: "w-[320px] h-[240px] md:w-[480px] md:h-[360px] object-cover mb-4", __source: { fileName: "", lineNumber: 103, columnNumber: 45 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-center gap-4 mb-4", __source: { fileName: "", lineNumber: 104, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "text-white bg-[#344055] hover:bg-[#2c3e50] focus:outline-none font-medium rounded-lg text-lg px-6 py-3", onClick: goToPreviousPage, disabled: currentPage === 1, __source: { fileName: "", lineNumber: 105, columnNumber: 9 }, __self: this }, "Previous"), /*#__PURE__*/ React.createElement("button", { className: "text-white bg-[#344055] hover:bg-[#2c3e50] focus:outline-none font-medium rounded-lg text-lg px-6 py-3", onClick: goToNextPage, disabled: currentPage === totalPages, __source: { fileName: "", lineNumber: 106, columnNumber: 9 }, __self: this }, "Next")), audioUrl && /*#__PURE__*/ React.createElement("audio", { controls: true, className: "mt-5", autoPlay: true, __source: { fileName: "", lineNumber: 108, columnNumber: 20 }, __self: this }, /*#__PURE__*/ React.createElement("source", { src: audioUrl, type: "audio/mpeg", __source: { fileName: "", lineNumber: 109, columnNumber: 9 }, __self: this }), "Your browser does not support the audio element."), /*#__PURE__*/ React.createElement("input", { type: "file", accept: "audio/*", onChange: handleAudioUpload, className: "mt-5", __source: { fileName: "", lineNumber: 112, columnNumber: 7 }, __self: this }), transcription && /*#__PURE__*/ React.createElement("p", { className: "mt-2 font-roboto text-lg text-[#344055]", __source: { fileName: "", lineNumber: 113, columnNumber: 25 }, __self: this }, transcription)); }