/** @jsxImportSource https://esm.sh/react@18.2.0 */ import debounce from "https://esm.sh/lodash.debounce@4.0.8"; import ReactDOM from "https://esm.sh/react-dom@18.2.0"; import React, { useCallback, useEffect, useState } from "https://esm.sh/react@18.2.0"; function App() { const [prompt, setPrompt] = useState(""); const [imageUrl, setImageUrl] = useState(""); const [count, setCount] = useState(0); const generateImage = useCallback( debounce(async (input) => { if (input.trim() === "") { setImageUrl(""); return; } const encodedPrompt = encodeURIComponent(input); const url = `https://maxm-imggenurl.web.val.run/${encodedPrompt}`; setImageUrl(url); }, 300), [], ); useEffect(() => { const fetchCount = async () => { const response = await fetch("/visitor-count"); if (response.ok) { const { count } = await response.json(); setCount(count); } }; fetchCount(); }, []); useEffect(() => { generateImage(prompt); }, [prompt, generateImage]); const handleDownload = async () => { if (!imageUrl) return; try { const response = await fetch(imageUrl); const blob = await response.blob(); const url = window.URL.createObjectURL(blob); const a = document.createElement("a"); a.style.display = "none"; a.href = url; a.download = `generated-image-${Date.now()}.png`; document.body.appendChild(a); a.click(); window.URL.revokeObjectURL(url); } catch (error) { console.error("Error downloading image:", error); } }; return (

Visitor Count: {count}

Real-time Image Generator

setPrompt(e.target.value)} placeholder="Enter your prompt here..." className="prompt-input" />

{imageUrl ? ( <> {prompt}

) :

Image will appear here

}

); } function client() { const root = document.getElementById("root"); if (root) { ReactDOM.createRoot(root).render( , ); } } if (typeof document !== "undefined") { client(); } export default async function server(request: Request): Promise { const { sqlite } = await import("https://esm.town/v/stevekrouse/sqlite"); const KEY = new URL(import.meta.url).pathname.split("/").at(-1); // Create table if it doesn't exist await sqlite.execute(` CREATE TABLE IF NOT EXISTS ${KEY}_visitor_count ( id INTEGER PRIMARY KEY, count INTEGER DEFAULT 0 ) `); // Initialize count if not present await sqlite.execute(` INSERT OR IGNORE INTO ${KEY}_visitor_count (id, count) VALUES (1, 0) `); if (request.url.endsWith('/visitor-count')) { // Increment and get the new count await sqlite.execute(` UPDATE ${KEY}_visitor_count SET count = count + 1 WHERE id = 1 `); const result = await sqlite.execute(` SELECT count FROM ${KEY}_visitor_count WHERE id = 1 `); const count = result.rows[0].count; return new Response(JSON.stringify({ count }), { headers: { 'Content-Type': 'application/json' }, }); } return new Response( ` Real-time Image Generator

`, { headers: { "content-type": "text/html", }, }, ); } const css = ` body { font-family: 'Inter', sans-serif; margin: 0; padding: 0; background: linear-gradient(135deg, #1f1f1f, #333); color: #d0d0d0; } .container { max-width: 800px; margin: 40px auto; padding: 30px; text-align: center; background: linear-gradient(135deg, #252525, #2f2f2f); border-radius: 12px; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5); } h1 { color: #ffffff; font-size: 2.5rem; margin-bottom: 20px; font-weight: 600; } .prompt-input { width: 100%; padding: 14px; font-size: 1rem; margin-bottom: 20px; border: 1px solid #444; border-radius: 8px; background-color: #222; color: #d0d0d0; } .prompt-input::placeholder { color: #888; } .image-container { background-color: #1e1e1e; border-radius: 8px; padding: 15px; min-height: 300px; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 1px solid #444; } .generated-image { max-width: 100%; max-height: 500px; border-radius: 6px; margin-bottom: 15px; } .placeholder { color: #666; font-style: italic; } button { background: linear-gradient(90deg, #3b82f6 0%, #6366f1 100%); color: #ffffff; border: none; padding: 12px 24px; font-size: 1rem; border-radius: 6px; cursor: pointer; transition: all 0.3s ease; box-shadow: 0 4px 10px rgba(0, 118, 255, 0.3); width: 220px; margin-top: 15px; } button:hover { transform: scale(1.05); box-shadow: 0 6px 16px rgba(0, 118, 255, 0.5); } .download-button { background: linear-gradient(90deg, #10b981 0%, #059669 100%); margin-top: 0; } .source-link { display: inline-block; margin-top: 20px; color: #aaa; text-decoration: none; } .source-link:hover { color: #ffffff; } `;

imageGen