Val Town Code SearchReturn to Val Town

3This is a lightweight Blob Admin interface to view and debug your Blob data.
4
5![b7321ca2cd80899250589b9aa08bc3cae9c7cea276282561194e7fc537259b46.png](https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/311a81bb-18d8-4583-b7e3-64bac326f700/public)
6
7Use this button to install the val:

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

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

2 * This program creates an HTTP server that fetches various data from NASA APIs
3 * and returns a JSON response with a collection of interesting information about today.
4 * It uses multiple NASA APIs to gather diverse space-related data, including real-time imagery
5 * and additional interesting data points.
6 */
17  const apodData = await apodResponse.json();
18
19  // Fetch latest EPIC image metadata
20  const epicResponse = await fetch(`https://api.nasa.gov/EPIC/api/natural?api_key=${NASA_API_KEY}`);
21  const epicData = await epicResponse.json();
22  const latestEpicImage = epicData[0];
23
24  // Fetch Near Earth Objects for today
38  const issData = await issResponse.json();
39
40  // Fetch NASA Image and Video Library data
41  const nasaLibraryResponse = await fetch(`https://images-api.nasa.gov/search?q=space&media_type=image`);
42  const nasaLibraryData = await nasaLibraryResponse.json();
43
55    },
56    earthPolychromaticImagingCamera: {
57      date: latestEpicImage.date,
58      caption: latestEpicImage.caption,
59      imageUrl: `https://epic.gsfc.nasa.gov/archive/natural/${latestEpicImage.date.split(' ')[0].replace(/-/g, '/')}/png/${latestEpicImage.image}.png`,
60    },
61    nearEarthObjects: {
85      timestamp: new Date(issData.timestamp * 1000).toISOString()
86    },
87    nasaImageLibrary: {
88      recentImages: nasaLibraryData.collection.items.slice(0, 5).map(item => ({
89        title: item.data[0].title,
90        description: item.data[0].description,

21With some variable renaming, and rewriting of the prompt, this should produce very accurate data analytic reports for any data provided.
22
23![Screenshot 2024-08-22 at 7.32.16 PM.png](https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/fb6a3ff0-59ff-441d-9c36-3db88cdce200/public)
24![Screenshot 2024-08-22 at 7.33.22 PM.png](https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/94532123-291c-4208-0482-c28c64f51400/public)
25
26

17      <meta property="of:accepts:xmtp" content="2024-02-09" />
18      
19      <meta property="fc:frame:image" content="${prefixUrl(frame.image)}" />
20      <meta property="of:image" content="${prefixUrl(frame.image)}" />
21      <meta property="og:image" content="${prefixUrl(frame.image)}" />
22      
23      <meta property="fc:frame:image:aspect_ratio" content="${aspectRatio}" />
24      <meta property="of:image:aspect_ratio" content="${aspectRatio}" />
25      
26      ${buttonsHtml}

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.