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 

2 * This ego booster app takes a selfie, sends it to GPT-4o-mini for analysis,
3 * and streams funny, specific compliments about the user's appearance.
4 * We use the WebRTC API for camera access, the OpenAI API for image analysis,
5 * and server-sent events for real-time streaming of compliments.
6 */
73    const context = canvasRef.current.getContext('2d');
74    if (context) {
75      context.drawImage(videoRef.current, 0, 0, canvasRef.current.width, canvasRef.current.height);
76      console.log("Selfie captured on canvas");
77      try {
78        const blob = await new Promise<Blob | null>((resolve) => canvasRef.current!.toBlob(resolve, 'image/jpeg'));
79        if (blob) {
80          console.log("Blob created, size:", blob.size);
81          const formData = new FormData();
82          formData.append('image', blob, 'selfie.jpg');
83          
84          console.log("Sending request to /analyze");
112        } else {
113          console.log("Failed to create blob");
114          throw new Error("Failed to create image blob");
115        }
116      } catch (error) {
177    console.log("Handling POST request to /analyze");
178    const formData = await request.formData();
179    const image = formData.get('image') as File;
180
181    if (!image) {
182      console.log("No image provided in request");
183      return new Response('No image provided', { status: 400 });
184    } else {
185      console.log("Image received, size:", image.size);
186    }
187
192      async start(controller) {
193        try {
194          console.log("Starting to process image");
195          const arrayBuffer = await image.arrayBuffer();
196          const base64Image = btoa(String.fromCharCode(...new Uint8Array(arrayBuffer)));
197
198          console.log("Sending request to OpenAI");
202              {
203                role: "system",
204                content: "You are a hilarious and overly enthusiastic ego booster. Your job is to provide 5 funny, specific, and over-the-top compliments about the person's appearance in the image. Be creative, exaggerate, and make it entertaining! Keep each compliment short and punchy, around 10-15 words max. Use lots of emojis and fun language. Respond in markdown format, with each compliment as a separate bullet point."
205              },
206              {
208                content: [
209                  { type: "text", text: "Analyze this selfie and give me 5 short, funny, specific compliments about my appearance:" },
210                  { type: "image_url", image_url: { url: `data:image/jpeg;base64,${base64Image}` } }
211                ]
212              }

3Protect your vals behind a password. Use session cookies to persist authentication.
4
5![6ed0648ae8813e958dbe79468572cb52f578239c0fae55857a13660beebdc5fd.png](https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/36c1dc4f-4e19-457b-ad89-0bf139754e00/public)
6
7## Demo

218  functions where possible. Unless specified, don't add error handling, 
219  make sure that errors bubble up to the caller.
220  Avoid external images or base64 images, use emojis, unicode symtols, or icon fonts/libraries instead, unless that's
221  not practical for the user's request (e.g. if they ask for a particular animated gif).
222  If the user asks for something that requires persistence, use the Val Town Blob storage API, unless
280functions where possible. Unless specified, don't add error handling, 
281make sure that errors bubble up to the caller.
282Avoid external images or base64 images, use emojis, unicode symtols, or icon fonts/libraries instead, unless that's
283not practical for the user's request (e.g. if they ask for a particular animated gif).
284If the user asks for something that requires persistence, use the Val Town Blob storage API, unless
315  ---
316  
317  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).
318  
319  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.

1/**
2 * This dating app allows users to upload photos of their bedside table and phone case.
3 * It uses Val Town's SQLite for data persistence and blob storage for image uploads.
4 * The app includes a simple matching algorithm based on common items in bedside tables.
5 */
12  const [user, setUser] = useState(null);
13  const [matches, setMatches] = useState([]);
14  const [bedsideImage, setBedsideImage] = useState(null);
15  const [phoneCaseImage, setPhoneCaseImage] = useState(null);
16
17  useEffect(() => {
25      const userData = await response.json();
26      setUser(userData);
27      setBedsideImage(userData.bedsideImage);
28      setPhoneCaseImage(userData.phoneCaseImage);
29    }
30  };
38  };
39
40  const handleImageUpload = async (event, type) => {
41    const file = event.target.files[0];
42    const formData = new FormData();
43    formData.append('image', file);
44    formData.append('type', type);
45
52      const result = await response.json();
53      if (type === 'bedside') {
54        setBedsideImage(result.imageUrl);
55      } else {
56        setPhoneCaseImage(result.imageUrl);
57      }
58    }
65        <div>
66          <h2>Welcome, {user.name}!</h2>
67          <div className="image-upload">
68            <h3>Your Bedside Table</h3>
69            {bedsideImage ? (
70              <img src={bedsideImage} alt="Bedside Table" className="uploaded-image" />
71            ) : (
72              <input type="file" onChange={(e) => handleImageUpload(e, 'bedside')} />
73            )}
74          </div>
75          <div className="image-upload">
76            <h3>Your Phone Case</h3>
77            {phoneCaseImage ? (
78              <img src={phoneCaseImage} alt="Phone Case" className="uploaded-image" />
79            ) : (
80              <input type="file" onChange={(e) => handleImageUpload(e, 'phonecase')} />
81            )}
82          </div>
86              <div key={match.id} className="match">
87                <h4>{match.name}</h4>
88                <img src={match.bedsideImage} alt="Bedside Table" className="match-image" />
89                <img src={match.phoneCaseImage} alt="Phone Case" className="match-image" />
90              </div>
91            ))}
118      id INTEGER PRIMARY KEY AUTOINCREMENT,
119      name TEXT NOT NULL,
120      bedsideImage TEXT,
121      phoneCaseImage TEXT
122    )
123  `);
131      id: 1,
132      name: "John Doe",
133      bedsideImage: "https://maxm-imggenurl.web.val.run/a-simple-bedside-table-with-a-lamp-and-book",
134      phoneCaseImage: "https://maxm-imggenurl.web.val.run/a-plain-black-phone-case"
135    };
136    return new Response(JSON.stringify(user), { headers: { 'Content-Type': 'application/json' } });
140    // In a real app, you'd implement a matching algorithm. Here we're returning dummy data.
141    const matches = [
142      { id: 2, name: "Jane Smith", bedsideImage: "https://maxm-imggenurl.web.val.run/a-bedside-table-with-plants-and-a-clock", phoneCaseImage: "https://maxm-imggenurl.web.val.run/a-colorful-floral-phone-case" },
143      { id: 3, name: "Bob Johnson", bedsideImage: "https://maxm-imggenurl.web.val.run/a-messy-bedside-table-with-many-gadgets", phoneCaseImage: "https://maxm-imggenurl.web.val.run/a-rugged-outdoor-phone-case" }
144    ];
145    return new Response(JSON.stringify(matches), { headers: { 'Content-Type': 'application/json' } });
148  if (path === '/upload' && request.method === 'POST') {
149    const formData = await request.formData();
150    const image = formData.get('image') as File;
151    const type = formData.get('type') as string;
152
153    if (image && type) {
154      const imageBuffer = await image.arrayBuffer();
155      const imageKey = `${KEY}_${type}_${Date.now()}`;
156      await blob.set(imageKey, imageBuffer);
157      const imageUrl = `https://val.town/v/${KEY}/blobs/${imageKey}`;
158
159      // Update user's image in the database
160      await sqlite.execute(`
161        UPDATE ${KEY}_users
162        SET ${type === 'bedside' ? 'bedsideImage' : 'phoneCaseImage'} = ?
163        WHERE id = 1
164      `, [imageUrl]);
165
166      return new Response(JSON.stringify({ imageUrl }), { headers: { 'Content-Type': 'application/json' } });
167    }
168
206}
207
208.image-upload {
209  margin-bottom: 20px;
210}
211
212.uploaded-image, .match-image {
213  max-width: 200px;
214  max-height: 200px;

1interface WikipediaImage {
2  source: string;
3  width: number;
9  pageId: number;
10  extract: string;
11  image?: WikipediaImage;
12  url: string;
13}
14
15export const fetchWikipediaImage = async (request: Request): Promise<Response> => {
16  const url = new URL(request.url);
17  const pageName = url.searchParams.get("title");
30    return formatResponse(pageData, format);
31  } catch (error) {
32    console.error("Error fetching Wikipedia image:", error);
33    return new Response("An error occurred while fetching the image", { status: 500 });
34  }
35};
63  apiUrl.searchParams.append("action", "query");
64  apiUrl.searchParams.append("titles", searchResult.title);
65  apiUrl.searchParams.append("prop", "pageimages|extracts|info|images|pageprops");
66  apiUrl.searchParams.append("piprop", "original|name");
67  apiUrl.searchParams.append("pithumbsize", "1000");
89  const page = pages[0] as any;
90
91  const image = await getImageFromPage(page);
92
93  return {
95    pageId: page.pageid,
96    extract: page.extract || "No description available.",
97    image: image,
98    url: page.fullurl,
99  };
100}
101
102async function getImageFromPage(page: any): Promise<WikipediaImage | undefined> {
103  console.log("Page data:", JSON.stringify(page, null, 2));
104
105  // Check for page_image in pageprops (this is usually the main image)
106  if (page.pageprops && page.pageprops.page_image) {
107    const imageData = await getImageInfo(page.pageprops.page_image);
108    if (imageData) return imageData;
109  }
110
111  // If no main image found, try the original image
112  if (page.original) {
113    return {
118  }
119
120  // If still no image, try the images array
121  if (page.images && page.images.length > 0) {
122    for (const image of page.images) {
123      const imageData = await getImageInfo(image.title);
124      if (imageData) return imageData;
125    }
126  }
127
128  console.log("No image found for the page.");
129  return undefined;
130}
131
132async function getImageInfo(filename: string): Promise<WikipediaImage | undefined> {
133  // Remove 'File:' prefix if it exists
134  filename = filename.replace(/^File:/, "");
137  apiUrl.searchParams.append("action", "query");
138  apiUrl.searchParams.append("titles", `File:${filename}`);
139  apiUrl.searchParams.append("prop", "imageinfo");
140  apiUrl.searchParams.append("iiprop", "url|size");
141  apiUrl.searchParams.append("format", "json");
144  const data = await response.json();
145
146  console.log("Image info response:", JSON.stringify(data, null, 2));
147
148  const pages = Object.values(data.query.pages);
149  if (pages.length > 0) {
150    const page = pages[0] as any;
151    if (page.imageinfo && page.imageinfo[0]) {
152      const imageInfo = page.imageinfo[0];
153      return {
154        source: imageInfo.url,
155        width: imageInfo.width,
156        height: imageInfo.height,
157      };
158    }
159  }
160
161  console.log("No image info found for:", filename);
162  return undefined;
163}
168): Response {
169  const responseData = {
170    imageUrl: pageData.image ? pageData.image.source : "No image available",
171    pageTitle: pageData.title,
172    pageUrl: pageData.url,
186          <h2>${responseData.pageTitle}</h2>
187          ${
188        responseData.imageUrl !== "No image available"
189          ? `<img src="${responseData.imageUrl}" alt="${responseData.pageTitle}" style="max-width: 100%; height: auto;"/>`
190          : "<p>No image available</p>"
191      }
192          <p>${responseData.extract}</p>
198      });
199    default:
200      return new Response(responseData.imageUrl, {
201        headers: { "Content-Type": "text/plain" },
202      });

22  borderWindowOuter: `inset -1px -1px ${colors.windowFrame}, inset 1px 1px ${colors.buttonFace}`,
23  minimizeIcon:
24    "data:image/svg+xml;charset=utf-8,%3Csvg width='6' height='2' viewBox='0 0 6 2' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Crect width='6' height='2' fill='black'/%3E %3C/svg%3E",
25  maximizeIcon:
26    "data:image/svg+xml;charset=utf-8,%3Csvg width='9' height='8' viewBox='0 0 9 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0 2V7V8H1H8H9V7V2V0H8H1H0V2ZM8 7V2H1V7H8Z' fill='black'/%3E %3C/svg%3E",
27  closeIcon:
28    "data:image/svg+xml;charset=utf-8,%3Csvg width='8' height='7' viewBox='0 0 8 7' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0 0H1H2V1H3V2H4H5V1H6V0H7H8V1H7V2H6V3H5V4H6V5H7V6H8V7H7H6V6H5V5H4H3V6H2V7H1H0V6H1V5H2V4H3V3H2V2H1V1H0V0Z' fill='black'/%3E %3C/svg%3E",
29  elementSpacing: 8,
30};
122    <TitleBarControl
123      style={{
124        backgroundImage: `url(${tokens.minimizeIcon})`,
125        backgroundRepeat: "no-repeat",
126        // // Only a single value is supported
139    <TitleBarControl
140      style={{
141        backgroundImage: `url(${tokens.maximizeIcon})`,
142        backgroundRepeat: "no-repeat",
143        // backgroundPosition: "top 2px left 3x",
155      marginLeft={2}
156      style={{
157        backgroundImage: `url(${tokens.closeIcon})`,
158        backgroundRepeat: "no-repeat",
159        // backgroundPosition: "top 3px left 4px",
285
286  return c.body(svg, 200, {
287    "Content-Type": "image/svg+xml",
288  });
289});

1Code from https://deno.com/blog/build-image-resizing-api
2
3Useful for compressing an image before sending to chatgpt4v, for example

1import { ImageMagick, initializeImageMagick, MagickGeometry } from "https://deno.land/x/imagemagick_deno@0.0.14/mod.ts";
2
3export async function modifyImage(
4  file: File,
5  params: { width: number; height: number },
6) {
7  const imageBuffer = new Uint8Array(await file.arrayBuffer());
8  const sizingData = new MagickGeometry(
9    params.width,
12  sizingData.ignoreAspectRatio = params.height > 0 && params.width > 0;
13  return new Promise<File>((resolve) => {
14    ImageMagick.read(imageBuffer, (image) => {
15      image.resize(sizingData);
16      image.write((data) => resolve(new File([data], file.name, { type: file.type })));
17    });
18  });

16            <meta name="viewport" content="width=device-width, initial-scale=1.0">
17            <title>hello, resume</title>
18            <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><text y='50%' font-size='24' text-anchor='middle' x='50%' dy='.3em'>📄</text></svg>">
19            <style>
20              ${helloResume}
29      }
30
31      // Add OG image URL and custom title to the config
32      const ogImageUrl = 'https://tseeley.com/images/ufoog.JPG'; // Replace with your actual OG image URL
33      const customTitle = `resume ✦ thomas seeley`; // You can customize this as needed
34
35      const resumeHTML = renderResume({
36        ...config,
37        ogImageUrl,
38        customTitle
39      });