stevekrouse

@jsxImportSource npm:hono@3/jsx

An interactive, runnable TypeScript val by stevekrouse

Replacement for Deno KV for Val Town on top of @std/sqlite.

An interactive, runnable TypeScript val by stevekrouse

Passkeys Demo Passkeys are pretty neat! I wanted to get a demo working in Val Town so I ported over https://github.com/maximousblk/passkeys-demo. One challenge was that the original extensively uses DenoKV store with compound keys and values. I created @stevekrouse/DenoSyntheticKV as a replacement for DenoKV. It uses SuperJSON to encode the keys and values. You can find the client-side script for the main page here: @stevekrouse/passkey_script

An interactive, runnable TypeScript val by stevekrouse

// Function to upload data using Wormhole API and return the URL

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

@jsxImportSource npm:hono@3/jsx

Oak Server Example

An interactive, runnable TypeScript val by stevekrouse

Made with val writer With prompt The app is just a simple plant watering app. Had a bunch of plants with different watering schedules. I want to be able to add new plants. I want to open the app and mark a plant as watered. I want to track all watering events. Store only a `waterings` table where the plant name is a string.

File to Data URL Helpers to convert files to base64 & base64-encoded data URLs, which are particularly helpful for sending images to LLMs like ChatGPT, Anthropic, and Google. ChatGPT Live example import { fileToDataURL } from "https://esm.town/v/stevekrouse/fileToDataURL"; const dataURL = await fileToDataURL(file); const response = await chat([ { role: "system", content: `You are an nutritionist. Estimate the calories. We only need a VERY ROUGH estimate. Respond ONLY in a JSON array with values conforming to: {ingredient: string, calories: number} `, }, { role: "user", content: [{ type: "image_url", image_url: { url: dataURL, }, }], }, ], { model: "gpt-4o", max_tokens: 200, }); Anthropic Live example import { fileToBase64 } from "https://esm.town/v/stevekrouse/fileToDataURL"; const base64File = await fileToBase64(file); let res = await anthropic.messages.create({ model: "claude-3-5-sonnet-20240620", max_tokens: 1024, messages: [ { "role": "user", "content": [ { "type": "image", "source": { "type": "base64", "media_type": file.type, "data": base64File, }, }, { "type": "text", "text": `Write an HTML email that evokes this photo in the funniest way possible, with code fences.`, }, ], }, ], }); Google Live example import { fileToBase64 } from "https://esm.town/v/stevekrouse/fileToDataURL"; const base64Image = await fileToBase64(image); const result = await model.generateContent([ "Write all the names and authors of these books in JSON format. The response should be a valid JSON array of objects, each with 'title' and 'author' properties.", { inlineData: { data: base64Image, mimeType: image.type, }, }, ]);

SQLite Migrate Table via cloning it into a new table example There are a lot of migrations that SQLite doesn't allow, such as adding a primary key on a table. The way to accomplish this is by creating a new table with the schema you desire and then copying the rows of the old table into it. This example shows how to: Get the schema for the existing table Create the new table Copy all rows from old to new Rename the old table to an archive (just in case) Rename the new table to the original table name This script shows me adding a primary key constraint to the Profile column of my DateMeDocs database. I would console and comment out various parts of it as I went. You can see everything I did in the version history. The main tricky part for me was removing the duplicate primary key entries before doing the migration step, which is a useful thing anyways, from a data cleaning perspective.

Example of an HTML Form with a File Upload, handled by the server The key step was setting enctype="multipart/form-data" on the <form> element. If you skip that step, you'll only get the file's name on the server. Limitation on files > 1mb Currently (as of 4/14/24) this only works for small files (< 1mb). For larger files you get an error: {"statusCode":413,"error":"Payload Too Large","message":"request entity too large"} . A workaround is to upload to another service client-side, send the URL from that service to your Val Town server, and then fetch the file server-side (helper: @stevekrouse/uploadTo0x0).

@jsxImportSource npm:hono/jsx