Val Town Code SearchReturn to Val Town

1#### SHOTCLIP
2
3Demo of embedding images with [substrate](https://www.substrate.run/), and querying them for semantic relevance.
4
5Use the query parameter `prompt` to control the search.

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"/>

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 

29  title: text("title"),
30  url: text("url"),
31  image_url: text("image_url"),
32  thumbnail_url: text("thumbnail_url"),
33  icon_url: text("icon_url"),
125        >
126        </script>
127        <link rel="icon" href="/favicon.ico" type="image/x-icon" />
128        <title>Play me a song in Spotify</title>
129      </head>

20  title: text("title"),
21  url: text("url"),
22  image_url: text("image_url"),
23  thumbnail_url: text("thumbnail_url"),
24  icon_url: text("icon_url"),
36    title text,
37    url text,
38    image_url text,
39    thumbnail_url text,
40    icon_url text,
63      title,
64      url: external_urls.spotify,
65      image_url: album.images[0].url,
66      thumbnail_url: album.images[1].url,
67      icon_url: album.images[2].url,
68      duration_ms,
69      duration: duration_ms / 1_000.0,

13  title: text("title"),
14  url: text("url"),
15  image_url: text("image_url"),
16  thumbnail_url: text("thumbnail_url"),
17  icon_url: text("icon_url"),
28    title: String!
29    url: String!
30    image_url: String
31    thumbnail_url: String
32    icon_url: String
68    title
69    url
70    image_url
71  }
72}

18    title
19    url
20    image_url
21  }
22}

20  "User-Agent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:128.0) Gecko/20100101 Firefox/128.0",
21  "Accept":
22    "text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/png,image/svg+xml,*/*;q=0.8",
23  "Accept-Language": "en-US,en;q=0.5",
24  "Content-Type": "application/x-www-form-urlencoded",

327  ---
328  
329  Val Town comes with blob storage built-in. It allows for storing any data: text, JSON, images. You can access it via [\`std/blob\`](https://www.val.town/v/std/blob).
330  
331  Blob storage is scoped globally to your account. If you set a blob in one val, you can retrieve it by the same key in another val. It's backed by Cloudflare R2.

1import inputHeader from "https://esm.town/v/substrate/inputHeader";
2import { ComputeJSON, ComputeText, GenerateImage, sb, Substrate } from "npm:substrate";
3import { z } from "npm:zod";
4import { zodToJsonSchema } from "npm:zod-to-json-schema";
21  });
22  const prompt1 = new ComputeText({
23    prompt: sb.interpolate`generate a description of an image of ${
24      c1.future.json_object.get("concepts").at(0)
25    }. Be creative depicting abstract topics using detailed abstract imagery. Include details on the background, angle & framing, and style.`,
26  });
27  const prompt2 = new ComputeText({
28    prompt: sb.interpolate`generate a description of an image of ${
29      c1.future.json_object.get("concepts").at(1)
30    }. Be creative depicting abstract topics using detailed abstract imagery. Include details on the background, angle & framing, and style.`,
31  });
32  const caption1 = new ComputeText({
39    ${caption1.future.text}`,
40  }, { cache_age: 800 });
41  const image1 = new GenerateImage({ prompt: prompt1.future.text });
42  const image2 = new GenerateImage({ prompt: prompt2.future.text });
43  const c2 = new ComputeJSON({
44    prompt: sb.interpolate`List advanced concepts related to: ${c1.future.json_object.get("concepts").at(0)}
49  });
50  const prompt3 = new ComputeText({
51    prompt: sb.interpolate`generate a description of an image of ${
52      c2.future.json_object.get("concepts").at(0)
53    }. Be creative depicting abstract topics using detailed abstract imagery. Include details on the background, angle & framing, and style.`,
54  });
55  const prompt4 = new ComputeText({
56    prompt: sb.interpolate`generate a description of an image of ${
57      c2.future.json_object.get("concepts").at(1)
58    }. Be creative depicting abstract topics using detailed abstract imagery. Include details on the background, angle & framing, and style.`,
59  });
60  const caption3 = new ComputeText({
73    ${caption3.future.text}`,
74  });
75  const image3 = new GenerateImage({ prompt: prompt3.future.text });
76  const image4 = new GenerateImage({ prompt: prompt4.future.text });
77  const nodes = [image1, caption1, image2, caption2, image3, caption3, image4, caption4];
78  const stream = await substrate.stream(...nodes);
79
84      async start(controller) {
85        const pairs = [
86          { image: null, caption: null, title: null },
87          { image: null, caption: null, title: null },
88          { image: null, caption: null, title: null },
89          { image: null, caption: null, title: null },
90        ];
91
92        const outputPair = (pair, index) => {
93          if (pair.image && pair.caption) {
94            controller.enqueue(new TextEncoder().encode(
95              `<div style="display:flex;justify-content:center;align-items:center;margin-bottom:20px;">
96  <div style="margin:0 10px;">${pair.image}</div>
97  <div style="margin:0 10px;font-size:1.2rem;">
98  <a href="/?input=${pair.title}"><b>${capitalize(pair.title)}</b></a><br/>${pair.caption}</div>
99</div>`,
100            ));
101            pairs[index] = { image: null, caption: null, title: null }; // Reset after output
102          }
103        };
119              if (index !== -1) {
120                const pairIndex = Math.floor(index / 2);
121                const isImage = index % 2 === 0;
122                const content = event.data.image_uri
123                  ? `<img src="${event.data.image_uri}" width=400/>`
124                  : `<div style="font-family:system-ui,sans-serif;">${event.data.text}</div>`;
125
126                if (isImage) {
127                  pairs[pairIndex].image = content;
128                } else {
129                  pairs[pairIndex].caption = content;