// This program creates an image generation service using the maxm-imggenurl API. // It provides a simple HTML interface for users to enter a prompt and generate an image. // The generated images are displayed in a grid, and clicking on an image shows a popup with the image and prompt. /** @jsxImportSource https://esm.sh/react */ import React, { useState } from "https://esm.sh/react"; import { createRoot } from "https://esm.sh/react-dom/client"; // Define a type for our generated images type GeneratedImage = { imageUrl: string; prompt: string }; function App() { const [prompt, setPrompt] = useState(""); const [imageUrl, setImageUrl] = useState(""); const [loading, setLoading] = useState(false); const generateImage = async () => { setLoading(true); try { const response = await fetch(`/generate?prompt=${encodeURIComponent(prompt)}`, { method: 'POST' }); const data = await response.json(); setImageUrl(data.imageUrl); // After generating, fetch the updated list of images fetchImages(); } catch (error) { console.error("Error generating image:", error); } setPrompt(""); // Clear the prompt after generating setLoading(false); }; const [images, setImages] = useState([]); const [selectedImage, setSelectedImage] = useState(null); const fetchImages = async () => { try { const response = await fetch('/images'); const data = await response.json(); setImages(data); } catch (error) { console.error("Error fetching images:", error); } }; React.useEffect(() => { fetchImages(); }, []); const openPopup = (image: GeneratedImage) => { setSelectedImage(image); }; const closePopup = () => { setSelectedImage(null); }; return (

AI Image Generator

setPrompt(e.target.value)} placeholder="Enter your image prompt" />

{images.map((image, index) => (

openPopup(image)}> {image.prompt}

))}

{selectedImage && (

e.stopPropagation()}>

{selectedImage.prompt}

)}

View source on Val Town

); } function client() { createRoot(document.getElementById("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 url = new URL(request.url); 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}_images ( id INTEGER PRIMARY KEY AUTOINCREMENT, imageUrl TEXT NOT NULL, prompt TEXT NOT NULL ) `); if (url.pathname === "/generate" && request.method === "POST") { const prompt = url.searchParams.get("prompt"); if (!prompt) { return new Response(JSON.stringify({ error: "Prompt is required" }), { status: 400, headers: { "Content-Type": "application/json" }, }); } const imageUrl = `https://maxm-imggenurl.web.val.run/${encodeURIComponent(prompt)}`; // Store the generated image in the database await sqlite.execute(` INSERT INTO ${KEY}_images (imageUrl, prompt) VALUES (?, ?) `, [imageUrl, prompt]); return new Response(JSON.stringify({ imageUrl }), { headers: { "Content-Type": "application/json" }, }); } if (url.pathname === "/images") { const result = await sqlite.execute(`SELECT * FROM ${KEY}_images ORDER BY id DESC`); return new Response(JSON.stringify(result.rows), { headers: { "Content-Type": "application/json" }, }); } return new Response(` AI Image Generator

`, { headers: { "Content-Type": "text/html" }, }); } const css = ` body { font-family: Arial, sans-serif; line-height: 1.6; margin: 0; padding: 0; background-color: #f4f4f4; } .container { max-width: 800px; margin: 0 auto; padding: 20px; background-color: #fff; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); } h1 { text-align: center; color: #333; } .input-container { display: flex; margin-bottom: 20px; } input { flex-grow: 1; padding: 10px; font-size: 16px; border: 1px solid #ddd; border-radius: 4px 0 0 4px; } button { padding: 10px 20px; font-size: 16px; background-color: #4CAF50; color: white; border: none; border-radius: 0 4px 4px 0; cursor: pointer; } button:disabled { background-color: #ddd; cursor: not-allowed; } .image-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-top: 20px; } .image-item { cursor: pointer; transition: transform 0.3s ease; } .image-item:hover { transform: scale(1.05); } .image-item img { width: 100%; height: 150px; object-fit: cover; border-radius: 4px; } .popup-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.7); display: flex; justify-content: center; align-items: center; } .popup-content { background-color: white; padding: 20px; border-radius: 8px; max-width: 80%; max-height: 80%; overflow: auto; text-align: center; } .popup-content img { max-width: 100%; max-height: 60vh; object-fit: contain; } .footer { text-align: center; margin-top: 20px; font-size: 14px; color: #666; } .footer a { color: #4CAF50; text-decoration: none; } return (

AI Image Generator

setPrompt(e.target.value)} placeholder="Enter your image prompt" />

{images.map((image, index) => ( padding: 20px; background-color: #fff; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); } h1 { text-align: center; color: #333; } .input-container { display: flex; margin-bottom: 20px; } input { flex-grow: 1; padding: 10px; font-size: 16px; border: 1px solid #ddd; border-radius: 4px 0 0 4px; } button { padding: 10px 20px; font-size: 16px; background-color: #4CAF50; color: white; border: none; border-radius: 0 4px 4px 0; cursor: pointer; } button:disabled { background-color: #ddd; cursor: not-allowed; } .image-container { text-align: center; } img { max-width: 100%; height: auto; border-radius: 4px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); } .footer { text-align: center; margin-top: 20px; font-size: 14px; color: #666; } .footer a { color: #4CAF50; text-decoration: none; } `;

genimage