Val Town Code SearchReturn to Val Town

1// This program creates an image generation service using the maxm-imggenurl API.
2// It provides a simple HTML interface for users to enter a prompt and generate an image.
3// The generated images are displayed in a grid, and clicking on an image shows a popup with the image and prompt.
4
5/** @jsxImportSource https://esm.sh/react */
7import { createRoot } from "https://esm.sh/react-dom/client";
8
9// Define a type for our generated images
10type GeneratedImage = { imageUrl: string; prompt: string };
11
12function App() {
13  const [prompt, setPrompt] = useState("");
14  const [imageUrl, setImageUrl] = useState("");
15  const [loading, setLoading] = useState(false);
16
17  const generateImage = async () => {
18    setLoading(true);
19    try {
20      const response = await fetch(`/generate?prompt=${encodeURIComponent(prompt)}`, { method: 'POST' });
21      const data = await response.json();
22      setImageUrl(data.imageUrl);
23      // After generating, fetch the updated list of images
24      fetchImages();
25    } catch (error) {
26      console.error("Error generating image:", error);
27    }
28    setPrompt(""); // Clear the prompt after generating
30  };
31
32  const [images, setImages] = useState<GeneratedImage[]>([]);
33  const [selectedImage, setSelectedImage] = useState<GeneratedImage | null>(null);
34
35  const fetchImages = async () => {
36    try {
37      const response = await fetch('/images');
38      const data = await response.json();
39      setImages(data);
40    } catch (error) {
41      console.error("Error fetching images:", error);
42    }
43  };
44
45  React.useEffect(() => {
46    fetchImages();
47  }, []);
48
49  const openPopup = (image: GeneratedImage) => {
50    setSelectedImage(image);
51  };
52
53  const closePopup = () => {
54    setSelectedImage(null);
55  };
56
57  return (
58    <div className="container">
59      <h1>AI Image Generator</h1>
60      <div className="input-container">
61        <input
63          value={prompt}
64          onChange={(e) => setPrompt(e.target.value)}
65          placeholder="Enter your image prompt"
66        />
67        <button onClick={generateImage} disabled={loading || !prompt}>
68          {loading ? "Generating..." : "Generate Image"}
69        </button>
70      </div>
71      <div className="image-grid">
72        {images.map((image, index) => (
73          <div key={index} className="image-item" onClick={() => openPopup(image)}>
74            <img src={image.imageUrl} alt={image.prompt} />
75          </div>
76        ))}
77      </div>
78      {selectedImage && (
79        <div className="popup-overlay" onClick={closePopup}>
80          <div className="popup-content" onClick={(e) => e.stopPropagation()}>
81            <img src={selectedImage.imageUrl} alt={selectedImage.prompt} />
82            <p>{selectedImage.prompt}</p>
83            <button onClick={closePopup}>Close</button>
84          </div>
103  const { sqlite } = await import("https://esm.town/v/stevekrouse/sqlite");
104  const url = new URL(request.url);
105  const KEY = "genimage";
106
107  // Create table if it doesn't exist
108  await sqlite.execute(`
109    CREATE TABLE IF NOT EXISTS ${KEY}_images (
110      id INTEGER PRIMARY KEY AUTOINCREMENT,
111      imageUrl TEXT NOT NULL,
112      prompt TEXT NOT NULL
113    )
123    }
124    
125    const imageUrl = `https://maxm-imggenurl.web.val.run/${encodeURIComponent(prompt)}`;
126    
127    // Store the generated image in the database
128    await sqlite.execute(`
129      INSERT INTO ${KEY}_images (imageUrl, prompt) VALUES (?, ?)
130    `, [imageUrl, prompt]);
131
132    return new Response(JSON.stringify({ imageUrl }), {
133      headers: { "Content-Type": "application/json" },
134    });
135  }
136
137  if (url.pathname === "/images") {
138    const result = await sqlite.execute(`SELECT * FROM ${KEY}_images ORDER BY id DESC`);
139    return new Response(JSON.stringify(result.rows), {
140      headers: { "Content-Type": "application/json" },
148        <meta charset="UTF-8">
149        <meta name="viewport" content="width=device-width, initial-scale=1.0">
150        <title>AI Image Generator</title>
151        <style>${css}</style>
152      </head>
204    cursor: not-allowed;
205  }
206  .image-grid {
207    display: grid;
208    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
210    margin-top: 20px;
211  }
212  .image-item {
213    cursor: pointer;
214    transition: transform 0.3s ease;
215  }
216  .image-item:hover {
217    transform: scale(1.05);
218  }
219  .image-item img {
220    width: 100%;
221    height: 150px;
261  return (
262    <div className="container">
263      <h1>AI Image Generator</h1>
264      <div className="input-container">
265        <input
267          value={prompt}
268          onChange={(e) => setPrompt(e.target.value)}
269          placeholder="Enter your image prompt"
270        />
271        <button onClick={generateImage} disabled={loading || !prompt}>
272          {loading ? "Generating..." : "Generate Image"}
273        </button>
274      </div>
275      <div className="image-grid">
276        {images.map((image, index) => (
277    padding: 20px;
278    background-color: #fff;
307    cursor: not-allowed;
308  }
309  .image-container {
310    text-align: center;
311  }

7* Type text prompts, select it, press "Q". Select a previous generation with a new text prompt to keep iterating. Selecting shapes doesn't work yet. Have fun!
8
9<a href="https://x.com/JanPaul123/status/1815502582015754657"><img width=500 src="https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/5893dfbf-c2de-4be0-049e-d8fdd1970a00/public"/></a>
10

10* Create a [Val Town API token](https://www.val.town/settings/api), open the browser preview of this val, and use the API token as the password to log in.
11
12<img width=500 src="https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/7077d1b5-1fa7-4a9b-4b93-f8d01d3e4f00/public"/>

10* Create a [Val Town API token](https://www.val.town/settings/api), open the browser preview of this val, and use the API token as the password to log in.
11
12<img width=500 src="https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/7077d1b5-1fa7-4a9b-4b93-f8d01d3e4f00/public"/>

7* Type text prompts, select it, press "Q". Select a previous generation with a new text prompt to keep iterating. Selecting shapes doesn't work yet. Have fun!
8
9<a href="https://x.com/JanPaul123/status/1815502582015754657"><img width=500 src="https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/5893dfbf-c2de-4be0-049e-d8fdd1970a00/public"/></a>
10

1// This app uses the fal.ai API to generate images based on user prompts.
2// It features a clean UI with an input field for the prompt and a button to generate the image.
3// The generated image is displayed below the input field.
4// React is used for the UI and the fal.ai serverless client for image generation.
5// The app measures and displays the latency for each image generation.
6// The background features randomly placed pixelart lightning bolts in neon yellow.
7
17const BOLT_SIZE = 40; // Width and height of each bolt
18const DEFAULT_PROMPT = "green grass landscape with text \"val.town\" is engraved, a townhouse in the background";
19const PLACEHOLDER_IMAGE = "https://fal.media/files/penguin/PysYf1-_ddhM7JKiLrkcF.png";
20const RATE_LIMIT = 15; // requests per hour
21const RATE_LIMIT_WINDOW = 5 * 60 * 1000; // 5 minutes in milliseconds
72function App() {
73  const [prompt, setPrompt] = useState(DEFAULT_PROMPT);
74  const [imageUrl, setImageUrl] = useState(PLACEHOLDER_IMAGE);
75  const [latency, setLatency] = useState<number | null>(null);
76  const [loading, setLoading] = useState(false);
77  const [error, setError] = useState("");
78
79  const generateImage = async () => {
80    setLoading(true);
81    setError("");
87      });
88      const data = await response.json();
89      if (!response.ok) throw new Error(data.error || "Failed to generate image");
90      setLatency(data.latency);
91      setImageUrl(data.imageUrl);
92      setError(""); // Clear any previous errors
93    } catch (err) {
103      <Background />
104      <div className="container">
105        <h1 className="title">AI Image Generator</h1>
106        <div className="input-container">
107          <input
113          />
114        </div>
115        <button onClick={generateImage} disabled={loading || !prompt} className="generate-btn">
116          {loading ? "Generating..." : "Generate Image"}
117        </button>
118        {error && <p className="error">{error}</p>}
119        <div className="image-container">
120          {latency !== null && (
121            <p className="latency">Inference time (doesn't include network): {latency.toFixed(2)} ms</p>
123          {loading
124            ? <LoadingSpinner />
125            : <img src={imageUrl} alt="Generated image" className="generated-image" />}
126        </div>
127        <div className="footer">
193        input: {
194          prompt,
195          image_size: "landscape_4_3",
196          num_inference_steps: 4,
197          num_images: 1,
198          enable_safety_checker: true,
199          sync_mode: true,
201      });
202      return new Response(
203        JSON.stringify({ imageUrl: result.images[0].url, latency: result.timings.inference * 1000 }),
204        {
205          headers: { "Content-Type": "application/json" },
207      );
208    } catch (error) {
209      return new Response(JSON.stringify({ error: "Failed to generate image" }), {
210        status: 500,
211        headers: { "Content-Type": "application/json" },
221        <meta charset="UTF-8">
222        <meta name="viewport" content="width=device-width, initial-scale=1.0">
223        <title>AI Image Generator</title>
224        <style>${css}</style>
225      </head>
315    text-align: center;
316  }
317  .image-container {
318    margin-top: 20px;
319    text-align: center;
322    border-radius: 10px;
323  }
324  .generated-image {
325    max-width: 100%;
326    height: auto;

7* Type text prompts, select it, press "Q". Select a previous generation with a new text prompt to keep iterating. Selecting shapes doesn't work yet. Have fun!
8
9<a href="https://x.com/JanPaul123/status/1815502582015754657"><img width=500 src="https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/5893dfbf-c2de-4be0-049e-d8fdd1970a00/public"/></a>
10

10* Create a [Val Town API token](https://www.val.town/settings/api), open the browser preview of this val, and use the API token as the password to log in.
11
12<img width=500 src="https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/7077d1b5-1fa7-4a9b-4b93-f8d01d3e4f00/public"/>

1# ☔️ Umbrella reminder if there's rain today
2
3![Screenshot 2023-09-14 at 12.31.32.png](https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/d82916ca-f8d9-4b49-88c6-420ab67a7700/public)
4
5## Setup

4
5<div align="center">
6<img src="https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/67a1d35e-c37c-41a4-0e5a-03a9ba585d00/public" width="700px"/>
7</div>
8