sqlite_adminREADME.md1 match
3This is a lightweight SQLite Admin interface to view and debug your SQLite data.
45
67It's currently super limited (no pagination, editing data, data-type specific viewers), and is just a couple dozens lines of code over a couple different vals. Forks encouraged! Just comment on the val if you add any features that you want to share.
sqliteExplorerAppREADME.md1 match
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.
45
67## Install
45<div align="center">
6<img src="https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/67a1d35e-c37c-41a4-0e5a-03a9ba585d00/public" width="700px"/>
7</div>
1011<div align="center">
12<img src="https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/67a1d35e-c37c-41a4-0e5a-03a9ba585d00/public" width="500px"/>
13</div>
generateQRmain.tsx2 matches
13);
14}
15const base64Image = await qrcode(url.toString(), { type: "text/html" });
16return new Response(
17`<html>
20</head>
21<body>
22<img src=${base64Image} style="margin: 0 auto; max-width: 600px" width="100%" />
23<p style="font-size: 0.85rem">QR Code generated using <a href="https://val.town">val.town</a></p>
24<p style="font-size: 0.85rem">Built with 💗 by <a href="https://twitter.com/neverstew">Neverstew</a></p>
getValsContextWindowmain.tsx1 match
338---
339
340Val 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).
341
342Blob 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 promptHeader from "https://esm.town/v/substrate/promptHeader";
2import wrapper from "https://esm.town/v/substrate/substrateBadgeMiddleware";
3import { ComputeJSON, ComputeText, GenerateImage, sb, Substrate } from "npm:substrate";
45async function handler(req: Request): Promise<Response> {
substrateBadgemain.tsx1 match
45return new Response(badge, {
46headers: {
47"Content-Type": "image/svg+xml",
48},
49});
IllustratedPrimermain.tsx22 matches
1import wrapper from "https://esm.town/v/substrate/substrateBadgeMiddleware";
2import { ComputeJSON, ComputeText, GenerateImage, sb, Substrate } from "npm:substrate";
3import { z } from "npm:zod";
4import { zodToJsonSchema } from "npm:zod-to-json-schema";
23});
24const prompt1 = new ComputeText({
25prompt: sb.interpolate`generate a description of an image of ${
26c1.future.json_object.get("concepts").at(0)
27}. Be concise and terse. Include details on the background, angle & framing, and style.`,
28});
29const prompt2 = new ComputeText({
30prompt: sb.interpolate`generate a description of an image of ${
31c1.future.json_object.get("concepts").at(1)
32}. Be concise and terse. Include details on the background, angle & framing, and style.`,
43${caption1.future.text}`,
44}, { cache_age: 800 });
45const image1 = new GenerateImage({ prompt: prompt1.future.text });
46const image2 = new GenerateImage({ prompt: prompt2.future.text });
47const c2 = new ComputeJSON({
48prompt: sb.interpolate`List deeper concepts or ideas related to: ${c1.future.json_object.get("concepts").at(0)}
53});
54const prompt3 = new ComputeText({
55prompt: sb.interpolate`generate a description of an image of ${
56c2.future.json_object.get("concepts").at(0)
57}. Be creative depicting abstract topics with extra detail. Include details on the background, angle & framing, and style.`,
58});
59const prompt4 = new ComputeText({
60prompt: sb.interpolate`generate a description of an image of ${
61c2.future.json_object.get("concepts").at(1)
62}. Be creative depicting abstract topics with extra detail. Include details on the background, angle & framing, and style.`,
77${caption3.future.text}`,
78});
79const image3 = new GenerateImage({ prompt: prompt3.future.text });
80const image4 = new GenerateImage({ prompt: prompt4.future.text });
81const nodes = [image1, caption1, image2, caption2, image3, caption3, image4, caption4];
82const stream = await substrate.stream(...nodes);
8388async start(controller) {
89const pairs = [
90{ image: null, caption: null, title: null },
91{ image: null, caption: null, title: null },
92{ image: null, caption: null, title: null },
93{ image: null, caption: null, title: null },
94];
9596const outputPair = (pair, index) => {
97if (pair.image && pair.caption) {
98controller.enqueue(new TextEncoder().encode(
99`<div style="display:flex;justify-content:center;align-items:center;margin-bottom:20px;">
100<div style="margin:0 10px;">${pair.image}</div>
101<div style="margin:0 10px;font-size:1.2rem;">
102<a href="/?subject=${pair.title}"><b>${capitalize(pair.title)}</b></a><br/>${pair.caption}</div>
103</div>`,
104));
105pairs[index] = { image: null, caption: null, title: null }; // Reset after output
106}
107};
152if (index !== -1) {
153const pairIndex = Math.floor(index / 2);
154const isImage = index % 2 === 0;
155const content = event.data.image_uri
156? `<img src="${event.data.image_uri}" width=400/>`
157: `<div>${event.data.text}</div>`;
158159if (isImage) {
160pairs[pairIndex].image = content;
161} else {
162pairs[pairIndex].caption = content;
blob_adminREADME.md1 match
3This is a lightweight Blob Admin interface to view and debug your Blob data.
45
67Use this button to install the val: