Visitor Count: {count}

Real-time Image Generator

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

\n {imageUrl\n ? (\n <>\n {prompt}

\n \n \n )\n :

Image will appear here

}\n

\n \n \n val town\n \n \n

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

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