Val Town Code SearchReturn to Val Town

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;

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 

233                onChange: setEditorContent,
234                className: "editor",
235                formats: ["header", "bold", "italic", "underline", "strike", "blockquote", "list", "bullet", "indent", "link", "image"],
236                modules: { toolbar: [['bold', 'italic', 'underline', 'strike'], ['blockquote', 'code-block'], [{ 'header': 1 }, { 'header': 2 }], [{ 'list': 'ordered'}, { 'list': 'bullet' }], [{ 'script': 'sub'}, { 'script': 'super' }], [{ 'indent': '-1'}, { 'indent': '+1' }], [{ 'direction': 'rtl' }], ['link', 'image'], ['clean']] },
237                preserveWhitespace: true,
238                modules: { toolbar: true }

3This is a lightweight Blob Admin interface to view and debug your Blob data.
4
5![b7321ca2cd80899250589b9aa08bc3cae9c7cea276282561194e7fc537259b46.png](https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/311a81bb-18d8-4583-b7e3-64bac326f700/public)
6
7Use this button to install the val:

7    {
8      headers: {
9        "Content-Type": "image/svg+xml",
10        "Cache-Control": `public, max-age=${60 * 60 * 24}, s-maxage=${60 * 60 * 24}`,
11      },

84  const tools = [
85    { name: 'MidJourney', description: 'Create stunning artwork with text prompts' },
86    { name: 'DALL-E', description: 'Generate images from textual descriptions' },
87    { name: 'Stable Diffusion', description: 'Open-source image generation model' },
88  ];
89

29  const img2Buf = Buffer.from(previousBuffer);
30
31  const previousImage = PNG.sync.read(img1Buf);
32  const currentImage = PNG.sync.read(img2Buf);
33
34  try {
35    const result = pixelmatch(previousImage.data, currentImage.data, null, previousImage.width, previousImage.height, {
36      threshold,
37    });

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 

4
5
6![Screenshot 2024-07-17 at 14.14.45@2x.png](https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/b4cd5cc8-84f5-4c1a-1668-7e0abf909100/public)
7
8

1import { createTidbytWorkoutsImage } from "https://esm.town/v/andreterron/createTidbytWorkoutsImage";
2import { setTidbytImage } from "https://esm.town/v/andreterron/setTidbytImage";
3import { weekWorkoutIcons } from "https://esm.town/v/andreterron/weekWorkoutIcons";
4import { workedOutByDay } from "https://esm.town/v/andreterron/workedOutByDay";
18  const icons = weekWorkoutIcons(byDay, timezone);
19
20  // Don't update the image if it didn't change
21  let iconsCache: string[] | undefined;
22  // try {
31  }
32
33  // img is the resulting jimp image
34  const img = await createTidbytWorkoutsImage(icons);
35
36  // Send the image to Tidbyt
37  await setTidbytImage({
38    image: (await img.getBufferAsync(img.getMIME())).toString("base64"),
39  });
40};