Val Town Code SearchReturn to Val Town

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;

8// Val-name scoped table addressing.
9const { name } = extractValInfo(import.meta.url);
10const tableName = `${name}_svg_images`;
11const heartHashTableName = `${name}_heart_hash`;
12
94    const decoder = new TextDecoder();
95    const svgCode = document.getElementById("svgCode");
96    const svgImage = document.getElementById("svgImage");
97    let foundSVGEnd = false;
98    let htmlContent = "";
99    let jsonResponse = "";
100    svgCode.textContent = "";
101    svgImage.innerHTML = "";
102    while (true) {
103      const { done, value } = await reader.read();
105      if (!foundSVGEnd) {
106        svgCode.textContent += decoder.decode(value, { stream: true });
107        svgImage.innerHTML = svgCode.textContent + "</svg>";
108        Prism.highlightElement(svgCode);
109        if (svgCode.textContent.indexOf("</svg>") > -1) {
338        <div class="bg-white p-6 rounded-lg shadow-md mb-8">
339            <div class="flex space-x-4 mb-4">
340                <div class="w-1/2 border p-4 rounded" id="svgImage">
341                    ${svg.svg.svg_source}
342                </div>
398  const stream = await openai.chat.completions.create({
399    messages: [
400      { role: "user", content: "make me an svg image" },
401      { role: "system", content: "```xml\n" + svg.svg_source + "\n```" },
402      { role: "user", content: "Edit this svg. " + prompt },
421    });
422    try {
423      const svgDoc = parser.parseFromString(svgString, "image/svg+xml");
424      if (!svgDoc) return false;
425      const parserError = svgDoc.getElementsByTagName("parsererror");
434  let foundSVGEnd = false;
435  let buffer = "";
436  let svgImage = "";
437  return new Response(
438    new ReadableStream({
444          if (!foundSVGStart && location > -1) {
445            foundSVGStart = true;
446            svgImage = buffer.slice(location);
447            controller.enqueue(encoder.encode(buffer.slice(location)));
448            buffer = "";
449          } else if (foundSVGStart && !foundSVGEnd) {
450            svgImage += line;
451            let endLocation = svgImage.indexOf("</svg>");
452            if (endLocation > -1) {
453              svgImage = svgImage.slice(0, endLocation + "</svg>".length);
454              foundSVGEnd = true;
455              console.log(JSON.stringify(svgImage));
456            }
457            controller.enqueue(encoder.encode(line));
459        }
460        controller.enqueue(encoder.encode("     "));
461        if (isValidSVG(svgImage)) {
462          try {
463            let resp = await sqlite.execute({
464              sql: `INSERT INTO ${tableName} (prompt, svg_source, parent_id) VALUES (?, ?, ?) RETURNING *`,
465              args: [prompt, svgImage, svg.id],
466            });
467            controller.enqueue(encoder.encode(JSON.stringify(resultSetToSVG(resp)[0])));
496  let svg = await getSVG(c.req.param("id"));
497  return new Response(addSVGNamespace(svg.svg_source), {
498    headers: { "Content-Type": "image/svg+xml", "Cache-Control": "max-age=86400" },
499  });
500});

1# Code on Val Town
2
3![Screenshot 2024-02-27 at 1.25.46 PM.png](https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/6b67bb0a-d80f-4f3d-5b17-57b5378b3e00/public)
4
5Adds a "Code on Val Town" ribbon to your page. This lets your website visitors navigate to the code behind it.

1# Code on Val Town
2
3![Screenshot 2024-02-27 at 1.25.46 PM.png](https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/6b67bb0a-d80f-4f3d-5b17-57b5378b3e00/public)
4
5Adds a "Code on Val Town" ribbon to your page. This lets your website visitors navigate to the code behind it.

1# Code on Val Town
2
3![Screenshot 2024-02-27 at 1.25.46 PM.png](https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/6b67bb0a-d80f-4f3d-5b17-57b5378b3e00/public)
4
5Adds a "Code on Val Town" ribbon to your page. This lets your website visitors navigate to the code behind it.