Val Town Code SearchReturn to Val Town

3Feel free to mess around with this val and make it your own :). Just click on "Fork" in the top right.
4
5You can change the phrases that show up as you click no, you can change the firstImg and secondImg, maybe even add more images. And you can also change the colors and any of the text on the screen!
6
7Have fun with it and hopefully your crush says yes hehe.

3Feel free to mess around with this val and make it your own :). Just click on "Fork" in the top right.
4
5You can change the phrases that show up as you click no, you can change the firstImg and secondImg, maybe even add more images. And you can also change the colors and any of the text on the screen!
6
7Have fun with it and hopefully your crush says yes hehe.

45    created_at: string;
46    profile_banner_url: string;
47    profile_image_url_https: string;
48    can_dm: boolean;
49  };

16
17function CatVisionSimulator() {
18  const [imageUrl, setImageUrl] = useState("/api/placeholder/600/400");
19  const [catVisionEnabled, setCatVisionEnabled] = useState(false);
20  const [brightness, setBrightness] = useState(100);
21  const [explanation, setExplanation] = useState("default");
22  const [cameraActive, setCameraActive] = useState(false);
23  const [imageSource, setImageSource] = useState("default"); // "default", "upload", "camera"
24
25  const videoRef = useRef(null);
33      const reader = new FileReader();
34      reader.onload = (event) => {
35        setImageUrl(event.target.result);
36        setImageSource("upload");
37        // Stop camera if it's active
38        if (cameraActive) {
44  };
45
46  // Function to apply cat vision filter to the image
47  const applyCatVision = (img, canvas, ctx) => {
48    ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
49    const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
50    const data = imageData.data;
51
52    // Apply cat vision transformation
65    }
66
67    ctx.putImageData(imageData, 0, 0);
68  };
69
79        videoRef.current.play();
80        setCameraActive(true);
81        setImageSource("camera");
82      }
83    } catch (err) {
107
108      const ctx = canvas.getContext("2d");
109      ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
110
111      // Convert to data URL and set as image
112      const dataUrl = canvas.toDataURL("image/png");
113      setImageUrl(dataUrl);
114      setImageSource("upload");
115
116      // Stop camera after taking photo
119  };
120
121  // Reset to default image
122  const resetToDefault = () => {
123    setImageUrl("/api/placeholder/600/400");
124    setImageSource("default");
125    if (cameraActive) {
126      stopCamera();
129
130  useEffect(() => {
131    if (imageSource === "camera") {
132      return; // Don't process image if camera is the source
133    }
134
137
138    const ctx = canvas.getContext("2d");
139    const img = new Image();
140
141    img.onload = () => {
146        applyCatVision(img, canvas, ctx);
147      } else {
148        ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
149      }
150    };
151
152    img.src = imageUrl;
153  }, [imageUrl, catVisionEnabled, brightness, imageSource]);
154
155  // Process video frames when camera is active
172          // Draw the video frame to canvas
173          if (catVisionEnabled) {
174            ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
175            const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
176            const data = imageData.data;
177
178            // Apply cat vision filter
188            }
189
190            ctx.putImageData(imageData, 0, 0);
191          } else {
192            ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
193          }
194
276          />
277
278          {/* Visible canvas for displaying images or processed camera feed */}
279          <canvas
280            id="vision-canvas"
305          {/* Media source controls */}
306          <div className="source-controls">
307            <h3>Image Source:</h3>
308            <div className="source-buttons">
309              <button
310                onClick={resetToDefault}
311                className={`source-btn ${imageSource === "default" ? "active" : ""}`}
312              >
313                Default Image
314              </button>
315
316              <button
317                onClick={() => fileInputRef.current.click()}
318                className={`source-btn ${imageSource === "upload" ? "active" : ""}`}
319              >
320                <svg
333                  <line x1="12" y1="3" x2="12" y2="15" />
334                </svg>
335                Upload Image
336              </button>
337              <input
339                ref={fileInputRef}
340                onChange={handleFileUpload}
341                accept="image/*"
342                style={{ display: "none" }}
343              />
347                  <button
348                    onClick={startCamera}
349                    className={`source-btn ${imageSource === "camera" && cameraActive ? "active" : ""}`}
350                  >
351                    <Camera size={16} />
488            <h4>Human Perception</h4>
489            <div className="refresh-demo human"></div>
490            <p>Smooth image at 60Hz+</p>
491          </div>
492          <div>

3Feel free to mess around with this val and make it your own :). Just click on "Fork" in the top right.
4
5You can change the phrases that show up as you click no, you can change the firstImg and secondImg, maybe even add more images. And you can also change the colors and any of the text on the screen!
6
7Have fun with it and hopefully your crush says yes hehe.

6    <title>React Hono Val Town Starter</title>
7    <link rel="stylesheet" href="/public/style.css">
8    <link rel="icon" href="/public/favicon.svg" sizes="any" type="image/svg+xml">
9  </head>
10  <body>

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>

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 />);