/** @jsxImportSource https://esm.sh/react */ import React, { useState } from "https://esm.sh/react"; import { createRoot } from "https://esm.sh/react-dom/client"; function App() { const [prompt, setPrompt] = useState(""); const [isLoading, setIsLoading] = useState(false); const [imageUrl, setImageUrl] = useState(""); const [error, setError] = useState(""); async function generateImage() { setIsLoading(true); setError(""); try { const encodedPrompt = encodeURIComponent(prompt); const url = `https://maxm-imggenurl.web.val.run/${encodedPrompt}`; setImageUrl(url); } catch (err) { setError("Failed to generate image. Please try again."); } finally { setIsLoading(false); } } return (

🎨 AI Image Generator

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

{error &&

{error}

} {imageUrl && (

)}

View Source

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

`, { headers: { "Content-Type": "text/html" }, }); } const css = ` .container { max-width: 800px; margin: 2rem auto; padding: 0 1rem; text-align: center; } .input-group { display: flex; gap: 0.5rem; margin: 1rem 0; } input { flex: 1; padding: 0.5rem; font-size: 1rem; border: 1px solid #ccc; border-radius: 4px; } button { padding: 0.5rem 1rem; font-size: 1rem; background: #4CAF50; color: white; border: none; border-radius: 4px; cursor: pointer; } button:disabled { background: #ccc; cursor: not-allowed; } .error { color: red; margin: 1rem 0; } .image-container { margin: 2rem 0; } .image-container img { max-width: 100%; height: auto; border-radius: 8px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); } .footer { margin-top: 2rem; font-size: 0.9rem; } .footer a { color: #666; } `;

musicFromPrompt