function MainComponent() { const [dreamJournal, setDreamJournal] = React.useState(''); const [dreamStyle, setDreamStyle] = React.useState(''); const [isVisualizing, setIsVisualizing] = React.useState(false); const [dreamImages, setDreamImages] = React.useState([]); const [slideShowIntervalId, setSlideShowIntervalId] = React.useState(null); const [isError, setIsError] = React.useState(false); const [dreamInterpretation, setDreamInterpretation] = React.useState(''); const handleJournalChange = (event)=>{ setDreamJournal(event.target.value); }; const handleStyleChange = (event)=>{ setDreamStyle(event.target.value); }; const fetchDreamInterpretation = async ()=>{ const response = await fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: [ { "role": "user", "content": dreamJournal } ], system_prompt: 'Provide a psychology-based dream interpretation that is scientifically correct', max_tokens: 1000 }) }); const { result, status } = await response.json(); if (response.ok && status) { setDreamInterpretation(result); } else { setIsError(true); } }; const fetchDreamImages = async (style)=>{ const prompt = `${dreamJournal}, ${style}`; const response = await fetch(`/integrations/stable-diffusion/?prompt=${encodeURIComponent(prompt)}&batch_size=1`, { method: 'GET' }); if (response.ok) { const { data } = await response.json(); setDreamImages(data); } else { setIsError(true); } }; const startVisualization = async ()=>{ if (!dreamJournal.trim() || !dreamStyle) return; setIsVisualizing(true); setIsError(false); setDreamImages([]); await fetchDreamImages(dreamStyle); await fetchDreamInterpretation(); setIsVisualizing(false); startSlideShow(); }; const startSlideShow = ()=>{ if (slideShowIntervalId) clearInterval(slideShowIntervalId); let index = 0; const newSlideShowIntervalId = setInterval(()=>{ if (index < dreamImages.length - 1) { index++; } else { index = 0; } const imgElement = document.getElementById('dreamImage'); imgElement.src = dreamImages[index]; }, 3000); setSlideShowIntervalId(newSlideShowIntervalId); }; React.useEffect(()=>{ return ()=>{ if (slideShowIntervalId) clearInterval(slideShowIntervalId); }; }, [ slideShowIntervalId ]); return /*#__PURE__*/ React.createElement("div", { className: "bg-[#f0f0f0] min-h-screen p-4", __source: { fileName: "", lineNumber: 89, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-4xl mx-auto p-6 bg-white rounded-lg shadow-xl", __source: { fileName: "", lineNumber: 90, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 91, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-semibold text-[#333] mb-4", __source: { fileName: "", lineNumber: 92, columnNumber: 11 }, __self: this }, "Dream Journal and Interpreter"), /*#__PURE__*/ React.createElement("textarea", { name: "dreamJournalEntry", value: dreamJournal, onChange: handleJournalChange, className: "w-full p-4 border-2 border-gray-200 rounded text-[#333] font-normal mb-4", placeholder: "Journal your dream here...", rows: "6", __source: { fileName: "", lineNumber: 93, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("select", { name: "dreamImageStyle", value: dreamStyle, onChange: handleStyleChange, className: "w-full p-4 border-2 border-gray-200 rounded text-[#333] font-normal mb-4", __source: { fileName: "", lineNumber: 101, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "", __source: { fileName: "", lineNumber: 107, columnNumber: 13 }, __self: this }, "Select dream visualization style..."), /*#__PURE__*/ React.createElement("option", { value: "cartoon", __source: { fileName: "", lineNumber: 108, columnNumber: 13 }, __self: this }, "Cartoon"), /*#__PURE__*/ React.createElement("option", { value: "BD", __source: { fileName: "", lineNumber: 109, columnNumber: 13 }, __self: this }, "BD (Comic Strip)"), /*#__PURE__*/ React.createElement("option", { value: "Manga", __source: { fileName: "", lineNumber: 110, columnNumber: 13 }, __self: this }, "Manga"), /*#__PURE__*/ React.createElement("option", { value: "Photorealistic", __source: { fileName: "", lineNumber: 111, columnNumber: 13 }, __self: this }, "Photorealistic"))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 114, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: startVisualization, disabled: isVisualizing || !dreamJournal.trim() || !dreamStyle, className: `w-full py-3 rounded bg-blue-600 text-white font-semibold mb-4 ${isVisualizing || !dreamJournal.trim() || !dreamStyle ? 'opacity-50 cursor-not-allowed' : ''}`, __source: { fileName: "", lineNumber: 115, columnNumber: 11 }, __self: this }, isVisualizing ? 'Visualizing...' : 'Visualize Dream'), isError && /*#__PURE__*/ React.createElement("p", { className: "text-red-500 text-center font-medium", __source: { fileName: "", lineNumber: 122, columnNumber: 23 }, __self: this }, "An error has occurred. Please try again later.")), dreamImages.length > 0 && /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center my-8", __source: { fileName: "", lineNumber: 125, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("img", { id: "dreamImage", src: dreamImages[0], alt: `Dream visualization style: ${dreamStyle}`, className: "w-full max-h-[60vh]", __source: { fileName: "", lineNumber: 126, columnNumber: 13 }, __self: this })), dreamInterpretation && /*#__PURE__*/ React.createElement("div", { className: "prose prose-lg", __source: { fileName: "", lineNumber: 135, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { __source: { fileName: "", lineNumber: 136, columnNumber: 13 }, __self: this }, "Dream Interpretation"), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 137, columnNumber: 13 }, __self: this }, dreamInterpretation)))); }