Val Town Code SearchReturn to Val Town

3import React from "https://esm.sh/react@18.2.0";
4
5function ImageGenerator() {
6  const [prompt, setPrompt] = React.useState("");
7  const [images, setImages] = React.useState<any>([]);
8  const [loading, setLoading] = React.useState(false);
9
36  }, []);
37
38  const generateImage = async () => {
39    try {
40      setLoading(true);
41      const response = await fetch("/generate-image", {
42        method: "POST",
43        headers: {
52      }
53
54      setImages(prevImages => [{
55        url: data.imageUrl,
56        prompt,
57        timestamp: new Date().toLocaleTimeString(),
58      }, ...prevImages]);
59    } catch (error) {
60      alert("An error occurred while generating the image: " + error.message);
61      console.error("Error generating image:", error);
62    } finally {
63      setLoading(false);
68    e.preventDefault();
69    if (!loading && prompt) {
70      generateImage();
71
72      // Set a new random prompt after submission, unless user has entered a custom prompt
80    <div className="max-w-3xl mx-auto px-4 py-8">
81      <h1 className="text-3xl font-bold text-center text-gray-800 mb-8">
82        Flux Image Generator
83      </h1>
84
85      <p className="text-center text-gray-600 mb-8">
86        Generate images with{" "}
87        <a
88          href="https://replicate.com/black-forest-labs/flux-schnell"
112          value={prompt}
113          onChange={(e) => setPrompt(e.target.value)}
114          placeholder="Enter your image prompt"
115          className="flex-1 max-w-lg px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-orange-500 focus:border-transparent"
116        />
120          className="px-6 py-2 bg-orange-600 text-white rounded-md hover:bg-orange-700 disabled:bg-gray-400 disabled:cursor-not-allowed transition-colors"
121        >
122          {loading ? "Generating..." : "Generate Image"}
123        </button>
124      </form>
125      <div className="space-y-8">
126        {images.map((image, index) => (
127          <div key={image.timestamp} className="bg-white p-4 rounded-md shadow-lg">
128            <img
129              src={image.url}
130              alt={image.prompt}
131              className="rounded-md w-full mb-2"
132            />
133            <div>
134              <p className="text-gray-700 font-medium text-center">"{image.prompt}"</p>
135            </div>
136          </div>
142
143const root = createRoot(document.getElementById("root"));
144root.render(<ImageGenerator />);

4	<meta charset="UTF-8">
5	<meta name="viewport" content="width=device-width, initial-scale=1.0">
6	<title>Flux Image Generator</title>
7	<script src="https://cdn.tailwindcss.com"></script>
8</head>

3import React from "https://esm.sh/react@18.2.0";
4
5function ImageGenerator() {
6  const [prompt, setPrompt] = React.useState("");
7  const [images, setImages] = React.useState<any>([]);
8  const [loading, setLoading] = React.useState(false);
9
36  }, []);
37
38  const generateImage = async () => {
39    try {
40      setLoading(true);
41      const response = await fetch("/generate-image", {
42        method: "POST",
43        headers: {
52      }
53
54      setImages(prevImages => [{
55        url: data.imageUrl,
56        prompt,
57        timestamp: new Date().toLocaleTimeString(),
58      }, ...prevImages]);
59    } catch (error) {
60      alert("An error occurred while generating the image: " + error.message);
61      console.error("Error generating image:", error);
62    } finally {
63      setLoading(false);
68    e.preventDefault();
69    if (!loading && prompt) {
70      generateImage();
71
72      // Set a new random prompt after submission, unless user has entered a custom prompt
80    <div className="max-w-3xl mx-auto px-4 py-8">
81      <h1 className="text-3xl font-bold text-center text-gray-800 mb-8">
82        Flux Image Generator
83      </h1>
84
85      <p className="text-center text-gray-600 mb-8">
86        Generate images with{" "}
87        <a
88          href="https://replicate.com/black-forest-labs/flux-schnell"
112          value={prompt}
113          onChange={(e) => setPrompt(e.target.value)}
114          placeholder="Enter your image prompt"
115          className="flex-1 max-w-lg px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-orange-500 focus:border-transparent"
116        />
120          className="px-6 py-2 bg-orange-600 text-white rounded-md hover:bg-orange-700 disabled:bg-gray-400 disabled:cursor-not-allowed transition-colors"
121        >
122          {loading ? "Generating..." : "Generate Image"}
123        </button>
124      </form>
125      <div className="space-y-8">
126        {images.map((image, index) => (
127          <div key={image.timestamp} className="bg-white p-4 rounded-md shadow-lg">
128            <img
129              src={image.url}
130              alt={image.prompt}
131              className="rounded-md w-full mb-2"
132            />
133            <div>
134              <p className="text-gray-700 font-medium text-center">"{image.prompt}"</p>
135            </div>
136          </div>
142
143const root = createRoot(document.getElementById("root"));
144root.render(<ImageGenerator />);

257    <meta charset="UTF-8"/>
258    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
259    <link rel="icon" type="image/png" href="data:image/png;base64,${favicon}">
260    <style>${style}</style>
261    <title>Bolivia Digest</title>

61            });
62          } else {
63            // Handle other image types with CanvasKit
64            const image = CanvasKit.MakeImageFromEncoded(new Uint8Array(buffer));
65            if (image) {
66              try {
67                width = image.width();
68                height = image.height();
69                faviconCandidates.push({ url: u, buffer, width, height });
70              } finally {
71                image.delete();
72              }
73            }
74          }
75        } catch (e) {
76          console.warn(`Failed to decode image from ${u}:`, e);
77        }
78      }

13## Example
14This val tracks mentions of "Val Town" and related terms on Reddit, filtering results from the last 7 days and sending alerts to a Discord webhook. 
15![Screenshot 2025-01-10 at 5.13.16 PM.png](https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/beecb766-824e-4672-8393-3abd2edb1c00/public)
16
17---
21### 1. Fork this Val
22To start using this template, fork this val by clicking the fork button at the top-right corner of the page.
23![Screenshot 2025-01-10 at 1.22.10 PM.png](https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/c4ae349d-7e28-4378-8646-21c8958e1f00/public)
24
25---
26### 2. View Source Code
27<em>The `CODE` box shows you the the full source code of this val, you may need to scroll down to see it.</em>
28![image.png](https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/6a4dabb4-3b27-4cea-fce3-95a1a1c3cd00/public)
29
30---

3View and interact with your Val Town SQLite data. It's based off Steve's excellent [SQLite Admin](https://www.val.town/v/stevekrouse/sqlite_admin?v=46) val, adding the ability to run SQLite queries directly in the interface. This new version has a revised UI and that's heavily inspired by [LibSQL Studio](https://github.com/invisal/libsql-studio) by [invisal](https://github.com/invisal). This is now more an SPA, with tables, queries and results showing up on the same page. 
4
5![image.webp](https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/c8e102fd-39ca-4bfb-372a-8d36daf43900/public)
6
7## Install 

3Ported from https://github.com/replicate/getting-started-cloudflare-workers
4
5This is a template for a simple web app using [Hono](https://honojs.dev/), and [Replicate](https://replicate.com/) to generate images using [Flux Schnell](https://replicate.com/black-forest-labs/flux-schnell), a fast and high-quality open-source image generation model.
6
7![Screenshot 2025-03-04 at 10.51.39@2x.png](https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/63806b79-4a28-4ca3-7bf5-e5a631986800/public)
8
9## Stack
11- [Hono](https://honojs.dev/) is a minimalist web framework for building serverless applications. It's built and maintained by Cloudflare.
12- [Replicate](https://replicate.com/) is a platform for building and running machine learning models.
13- [Flux Schnell](https://replicate.com/black-forest-labs/flux-schnell) is a fast and high-quality open-source image generation model, made by the original creators of Stable Diffusion.

11app.get("/frontend/**/*", c => serveFile(c.req.path, import.meta.url));
12
13// Generate image
14app.post("/generate-image", async (c) => {
15  try {
16    const { prompt } = await c.req.json();
21      input: {
22        prompt,
23        image_format: "webp",
24      },
25    }) as { url: string }[] | { url: string };
26
27    // Some image models return an array of output files, others just a single file.
28    const imageUrl = Array.isArray(output) ? output[0].url() : output.url();
29
30    console.log({ imageUrl });
31
32    return c.json({ imageUrl });
33  } catch (error) {
34    console.error(error);

4	<meta charset="UTF-8">
5	<meta name="viewport" content="width=device-width, initial-scale=1.0">
6	<title>Flux Image Generator</title>
7	<script src="https://cdn.tailwindcss.com"></script>
8</head>