Val Town Code SearchReturn to Val Town

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 

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 

23  return html(render(<FavIcon emoji={emoji} />), {
24    headers: {
25      "Content-Type": "image/svg+xml",
26      "Cache-Control": `public, max-age=${60 * 60 * 24}, s-maxage=${60 * 60 * 24 * 7}`,
27    },

20  return new Response(htmlString, {
21    headers: {
22      "content-type": "image/svg+xml",
23    },
24  });

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;

1# ☔️ Umbrella reminder if there's rain today
2
3![Screenshot 2023-09-14 at 12.31.32.png](https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/d82916ca-f8d9-4b49-88c6-420ab67a7700/public)
4
5## Setup

21
22  // Retrieve HTCI API key from environment variables
23  const apiUrl = 'https://hcti.io/v1/image';
24
25  const apiKey = Deno.env.get("HTCI");
57    return new Response(pngBuffer, {
58      headers: {
59        'Content-Type': 'image/png',
60        'Cache-Control': 'public, max-age=604800, immutable'
61      },
63  } catch (error) {
64    console.error('Error converting SVG to PNG:', error);
65    return new Response('Error generating image', { status: 500 });
66  }
67}

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

1Fancy animated SVGs in readmes, along with centering and image sizing.
2```
3<div align="center"><img width=200 src="https://gpanders.com/img/DEC_VT100_terminal.jpg"></div>