🎨 AI Image Generator

\n setPrompt(e.target.value)}\n placeholder=\"Describe the image you want to see...\"\n disabled={isLoading}\n />\n \n

\n {error &&

{error}

}\n {imageUrl && (\n

\n )}\n

\n View Source\n

\n );\n}\n\nfunction client() {\n createRoot(document.getElementById(\"root\")).render();\n}\n\nif (typeof document !== \"undefined\") {\n client();\n}\n\nexport default async function server(req: Request): Promise {\n return new Response(`\n \n \n \n AI Image Generator\n \n \n \n \n

\n \n \n \n \n `, {\n headers: { \"Content-Type\": \"text/html\" },\n });\n}\n\nconst css = `\n .container {\n max-width: 800px;\n margin: 2rem auto;\n padding: 0 1rem;\n text-align: center;\n }\n\n .input-group {\n display: flex;\n gap: 0.5rem;\n margin: 1rem 0;\n }\n\n input {\n flex: 1;\n padding: 0.5rem;\n font-size: 1rem;\n border: 1px solid #ccc;\n border-radius: 4px;\n }\n\n button {\n padding: 0.5rem 1rem;\n font-size: 1rem;\n background: #4CAF50;\n color: white;\n border: none;\n border-radius: 4px;\n cursor: pointer;\n }\n\n button:disabled {\n background: #ccc;\n cursor: not-allowed;\n }\n\n .error {\n color: red;\n margin: 1rem 0;\n }\n\n .image-container {\n margin: 2rem 0;\n }\n\n .image-container img {\n max-width: 100%;\n height: auto;\n border-radius: 8px;\n box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\n }\n\n .footer {\n margin-top: 2rem;\n font-size: 0.9rem;\n }\n\n .footer a {\n color: #666;\n }\n`;","deleted","label",[98],"permalink","https://www.val.town/x/insectagon/musicFromPrompt/code/main.tsx","extension","actionData","errors"]