const subscribeToMessages = (onMessage)=>{ const eventSource = new EventSource(`/api/messages`); eventSource.onmessage = (event)=>{ try { const data = JSON.parse(event.data); onMessage(data); } catch (error) { console.error("Error parsing message:", error); } }; eventSource.onerror = (error)=>{ console.error("EventSource error:", error); eventSource.close(); }; return eventSource; }; function MainComponent() { const [imagePrompt, setImagePrompt] = useState(""); const [images, setImages] = useState([]); const [allGeneratedImages, setAllGeneratedImages] = useState([]); const [isGenerating, setIsGenerating] = useState(false); const [imageError, setImageError] = useState(null); const [notes, setNotes] = useState(""); const [saveStatus, setSaveStatus] = useState(""); const [isNotesExpanded, setIsNotesExpanded] = useState(false); const [isNotesUnlocked, setIsNotesUnlocked] = useState(false); const [password, setPassword] = useState(""); const [passwordError, setPasswordError] = useState(""); const [totalGeneratedCount, setTotalGeneratedCount] = useState(0); const [currentBatchProgress, setCurrentBatchProgress] = useState(0); const CORRECT_PASSWORD = "Sialkot1"; const handlePasswordSubmit = (e)=>{ e.preventDefault(); if (password === CORRECT_PASSWORD) { setIsNotesUnlocked(true); setPasswordError(""); setPassword(""); } else { setPasswordError("Incorrect password"); setPassword(""); } }; const handleLockNotes = ()=>{ setIsNotesUnlocked(false); setIsNotesExpanded(false); }; const generateOneImage = async ()=>{ try { const response = await fetch("/api/generate-images", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ prompt: imagePrompt, existingCount: totalGeneratedCount, numberOfImages: 4 }) }); if (!response.ok) { throw new Error(`HTTP error: ${response.status}`); } const data = await response.json(); if (data.error) { throw new Error(data.error); } if (data.images?.[0]) { setAllGeneratedImages((prev)=>[ ...prev, ...data.images ]); setTotalGeneratedCount((prev)=>prev + data.images.length); setCurrentBatchProgress((prev)=>prev + 1); } return data.canLoadMore; } catch (error) { console.error("Error:", error); setImageError(error.message); return false; } }; const handleImageGeneration = async ()=>{ if (!imagePrompt.trim() || isGenerating) return; setIsGenerating(true); setImageError(null); setCurrentBatchProgress(0); try { const response = await fetch("/api/generate-images-1", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ prompt: imagePrompt, existingCount: totalGeneratedCount, numberOfImages: 4 }) }); if (!response.ok) { throw new Error(`HTTP error: ${response.status}`); } const data = await response.json(); if (data.error) { throw new Error(data.error); } if (data.images) { setAllGeneratedImages((prev)=>[ ...prev, ...data.images ]); setTotalGeneratedCount((prev)=>prev + data.images.length); } } catch (error) { console.error("Error:", error); setImageError(error.message); } finally{ setIsGenerating(false); } }; const toggleNotes = ()=>{ if (isNotesUnlocked) { setIsNotesExpanded(!isNotesExpanded); } }; useEffect(()=>{ fetchNotes(); }, []); const fetchNotes = async ()=>{ try { const response = await fetch("/api/notes", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ method: "GET" }) }); const data = await response.json(); if (data.error) throw new Error(data.error); setNotes(data.content || ""); } catch (error) { console.error("Failed to fetch notes:", error); } }; const saveNotes = async (content)=>{ try { setSaveStatus("Saving..."); const response = await fetch("/api/notes-handler", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ method: "POST", content }) }); const data = await response.json(); if (data.error) throw new Error(data.error); setSaveStatus("Saved!"); setTimeout(()=>setSaveStatus(""), 2000); } catch (error) { setSaveStatus("Failed to save"); setTimeout(()=>setSaveStatus(""), 2000); } }; const handleNotesChange = (e)=>{ const newContent = e.target.value; setNotes(newContent); saveNotes(newContent); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-white dark:bg-gray-900 p-4 md:p-8", __source: { fileName: "", lineNumber: 173, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-4xl mx-auto", __source: { fileName: "", lineNumber: 174, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl md:text-5xl font-bold text-gray-900 dark:text-white text-center mb-8 font-inter", __source: { fileName: "", lineNumber: 175, columnNumber: 9 }, __self: this }, "Image Generator & Notes"), /*#__PURE__*/ React.createElement("div", { className: "mb-12", __source: { fileName: "", lineNumber: 178, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full rounded-lg bg-gray-100 dark:bg-gray-800 p-4", __source: { fileName: "", lineNumber: 179, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between", __source: { fileName: "", lineNumber: 180, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold text-gray-900 dark:text-white font-inter", __source: { fileName: "", lineNumber: 181, columnNumber: 15 }, __self: this }, "My Notes", " ", isNotesUnlocked && /*#__PURE__*/ React.createElement("span", { className: "text-sm text-gray-500", __source: { fileName: "", lineNumber: 184, columnNumber: 19 }, __self: this }, "(", saveStatus, ")")), isNotesUnlocked && /*#__PURE__*/ React.createElement("button", { onClick: handleLockNotes, className: "text-red-600 hover:text-red-700 text-sm", __source: { fileName: "", lineNumber: 188, columnNumber: 17 }, __self: this }, "Lock Notes")), !isNotesUnlocked ? /*#__PURE__*/ React.createElement("div", { className: "mt-4", __source: { fileName: "", lineNumber: 198, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("form", { onSubmit: handlePasswordSubmit, className: "space-y-4", __source: { fileName: "", lineNumber: 199, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "password", value: password, onChange: (e)=>setPassword(e.target.value), placeholder: "Enter password to unlock notes", className: "w-full p-2 rounded border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-white", __source: { fileName: "", lineNumber: 200, columnNumber: 19 }, __self: this }), passwordError && /*#__PURE__*/ React.createElement("p", { className: "text-red-500 text-sm", __source: { fileName: "", lineNumber: 208, columnNumber: 21 }, __self: this }, passwordError), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700", __source: { fileName: "", lineNumber: 210, columnNumber: 19 }, __self: this }, "Unlock Notes"))) : /*#__PURE__*/ React.createElement("button", { onClick: toggleNotes, className: "w-full flex justify-between items-center mt-4", __source: { fileName: "", lineNumber: 219, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-gray-600 dark:text-gray-300", __source: { fileName: "", lineNumber: 223, columnNumber: 17 }, __self: this }, "Click to ", isNotesExpanded ? "collapse" : "expand", " notes"), /*#__PURE__*/ React.createElement("svg", { className: `w-6 h-6 transform transition-transform ${isNotesExpanded ? "rotate-180" : ""}`, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", __source: { fileName: "", lineNumber: 226, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7", __source: { fileName: "", lineNumber: 232, columnNumber: 19 }, __self: this }))), isNotesUnlocked && isNotesExpanded && /*#__PURE__*/ React.createElement("div", { className: "mt-4", __source: { fileName: "", lineNumber: 243, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("textarea", { value: notes, onChange: handleNotesChange, placeholder: "Write your notes here... They will be automatically saved.", className: "w-full p-4 rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-gray-900 dark:text-white font-inter mb-4 min-h-[150px]", __source: { fileName: "", lineNumber: 244, columnNumber: 17 }, __self: this })))), /*#__PURE__*/ React.createElement("div", { className: "mt-12", __source: { fileName: "", lineNumber: 255, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-3xl md:text-4xl font-bold text-gray-900 dark:text-white text-center mb-8 font-inter", __source: { fileName: "", lineNumber: 256, columnNumber: 11 }, __self: this }, "Generate Images with DALL-E 3"), /*#__PURE__*/ React.createElement("div", { className: "mb-8", __source: { fileName: "", lineNumber: 259, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("textarea", { value: imagePrompt, onChange: (e)=>setImagePrompt(e.target.value), placeholder: "Describe the image you want to create...", className: "w-full p-4 rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-gray-900 dark:text-white font-inter mb-4 min-h-[120px]", disabled: isGenerating, __source: { fileName: "", lineNumber: 260, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "flex gap-4 flex-wrap", __source: { fileName: "", lineNumber: 267, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: handleImageGeneration, disabled: isGenerating || !imagePrompt.trim(), className: "px-6 py-3 bg-gray-900 dark:bg-gray-800 text-white font-inter rounded-md hover:bg-gray-700 dark:hover:bg-gray-700 transition-colors disabled:opacity-50", __source: { fileName: "", lineNumber: 268, columnNumber: 15 }, __self: this }, isGenerating ? `Generating ${currentBatchProgress}/4...` : "Generate 4 Images")), imageError && /*#__PURE__*/ React.createElement("div", { className: "mt-4 p-4 rounded-lg bg-red-50 dark:bg-red-900/20 text-red-600 dark:text-red-400 font-inter flex items-center justify-between", __source: { fileName: "", lineNumber: 279, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 280, columnNumber: 17 }, __self: this }, imageError), /*#__PURE__*/ React.createElement("button", { onClick: handleImageGeneration, className: "text-sm underline hover:no-underline", __source: { fileName: "", lineNumber: 281, columnNumber: 17 }, __self: this }, "Try Again")))), imageError && /*#__PURE__*/ React.createElement("div", { className: "mb-8 p-4 rounded-lg bg-red-50 dark:bg-red-900/20 text-red-600 dark:text-red-400 font-inter flex items-center justify-between", __source: { fileName: "", lineNumber: 293, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 294, columnNumber: 13 }, __self: this }, imageError), /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleImageGeneration(false), className: "text-sm underline hover:no-underline", __source: { fileName: "", lineNumber: 295, columnNumber: 13 }, __self: this }, "Try Again")), (allGeneratedImages.length > 0 || isGenerating) && /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("div", { className: "mb-4 text-gray-700 dark:text-gray-300", __source: { fileName: "", lineNumber: 306, columnNumber: 13 }, __self: this }, totalGeneratedCount, "/48 images generated"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 sm:grid-cols-2 gap-4", __source: { fileName: "", lineNumber: 309, columnNumber: 13 }, __self: this }, allGeneratedImages.map((image, index)=>/*#__PURE__*/ React.createElement("div", { key: `complete-${index}`, className: "rounded-lg overflow-hidden group relative hover:shadow-lg transition-shadow", __source: { fileName: "", lineNumber: 311, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: image, target: "_blank", rel: "noopener noreferrer", className: "block relative", __source: { fileName: "", lineNumber: 315, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 bg-black opacity-0 group-hover:opacity-10 transition-opacity", __source: { fileName: "", lineNumber: 321, columnNumber: 21 }, __self: this }), /*#__PURE__*/ React.createElement("img", { src: image, alt: `Generated image ${index + 1}`, className: "w-full h-auto cursor-pointer", loading: "lazy", title: "Click to open in new tab", __source: { fileName: "", lineNumber: 322, columnNumber: 21 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "absolute bottom-0 left-0 right-0 p-2 bg-black bg-opacity-50 text-white text-sm opacity-0 group-hover:opacity-100 transition-opacity", __source: { fileName: "", lineNumber: 329, columnNumber: 21 }, __self: this }, "Click to open/save")))), isGenerating && /*#__PURE__*/ React.createElement("div", { className: "rounded-lg overflow-hidden bg-gray-200 dark:bg-gray-800 aspect-square animate-pulse flex items-center justify-center", __source: { fileName: "", lineNumber: 336, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-gray-400 dark:text-gray-600", __source: { fileName: "", lineNumber: 337, columnNumber: 19 }, __self: this }, "Generating...")))))); }