stevekrouse

An interactive, runnable TypeScript val by stevekrouse

Simple SQLite dashboard made by townie in this video: https://x.com/stevekrouse/status/1833577807093371325

An interactive, runnable TypeScript val by stevekrouse

An interactive, runnable TypeScript val by stevekrouse

* This meme creation tool app will allow users to create memes by selecting an image and adding top and bottom text. * We'll use HTML5 Canvas to render the meme directly in the browser, with custom positioning for different meme templates.

An interactive, runnable TypeScript val by stevekrouse

@jsxImportSource https://esm.sh/react

This val shows how to break up your HTTP val into three vals: @stevekrouse/zod_demo_http (this val) @stevekrouse/zod_demo_frontend (client-side react component) @stevekrouse/zod_demo_shared (code that is imported in both vals, but only run on the backend) I have these vals in a folder. Unfortunately, folders are not publicly shareable, which is why I listed all the vals above. The Val Town full-screen editor makes it a lot easier to work with multiple vals at once. The trickiest and most interesting part of this particular demo is how we import just the zod type in the frontend which avoids the error if we were to import any real value from that shared file. In this sense, it's not a truly safe shared file. Open questions I don't know why zod types aren't working when imported via esm.sh I don't know how we would get zod validation working on the frontend without reimporting zod from esm.sh (which would then lose us types or require us to duplicate the zod code)

* This ego booster app takes a selfie, sends it to GPT-4o-mini for analysis, * and streams funny, specific compliments about the user's appearance. * We use the WebRTC API for camera access, the OpenAI API for image analysis, * and server-sent events for real-time streaming of compliments.

* This val creates an interactive webpage that demonstrates the functionality of the Anthropic API. * It uses a React frontend with an input for the API key and buttons to trigger different operations. * The Anthropic API key is stored in the frontend state and sent with each API request.

Cross-platform safe Lucia-middleware This is a pretty ugly sittuation. It's really a hack around the way @stevekrouse/lucia_middlware was written, but to make it safe to import on the frontend, because it only imports the backend stuff dynamically per request.

Hardware Startup 2024 Bingo Made with Claude Artifacts

Open the Val Town Office Doors with Switchbot We installed two switchbot robots in our office: Ground Floor Office Door This webpage will let Val Town employees or guests to use these bots. The original version of this val was for a party. That fork is preserved here: @stevekrouse/switchbot_party Next steps [ ] Remove party theme [ ] Add one of @pomdtr's login methods [ ] Allow all @val.town emails to login [ ] Have any other email login ping me for approval or make a private val with a list of approved emails [ ] Add the office door to the site [ ] Add instructions (ie turn off wifi completely downstairs; be gentle with the office door one) Switchbot API This val authenticates to the switchbot API with SWITCHBOT_TOKEN and SWITCHBOT_KEY . Learn how to get your own Switchbot API keys here: Switchbot Docs .

Strip HTML Remove HTML tags from a string by parsing the HTML. There are certainly faster ways of doing this, ie html.replace(/<\/[^>]+(>|$)/g, "") // source https://stackoverflow.com/a/5002161 but this way is likely the most correct in that you're using a proper HTML parser.

Auto-Upgrade for HTTP Preview This val is experimentally testing if we can use an LLM to determine if an old-style HTTP val needs to be upgraded for the new HTTP runtime, currently in preview. You can read more about the breaking change and upgrade proccess here: https://blog.val.town/blog/http-preview/#breaking-changes In some light testing, it seems like ChatGPT 3.5 and 4o both are bad at this task, so I'm pausing experimenting with this for now. Example output from 4o: [ { "name": "harlequinChickadee", "probabilityUpgradeNeeded": true, "reason": "The current code structure has several functions and program logic outside the main handler, including word selection, game state management, and SVG generation. These parts would not re-run with the new runtime, potentially affecting functionality. They need to be moved inside the handler to ensure consistent behavior across requests." }, { "name": "redElephant", "probabilityUpgradeNeeded": "100%", "reason": "The initialization of `fs` and `vscode` objects should occur \n inside the handler in the new runtime in order to ensure that they are \n freshly created for each request. This is critical since the new runtime \n does not rerun code outside of the handler for each request.." }, { "name": "untitled_indigoNightingale", "probabilityUpgradeNeeded": false, "reason": "The code initializes and configures the Hono app outside of the handler, but it does not appear to have any stateful logic that would need to be re-calculated with each request. Each request will call the handler provided by Hono and should behave the same in the new runtime." }, { "name": "untitled_pinkRoundworm", "probabilityUpgradeNeeded": true, "reason": "The functions `addComment` and `getComments` as well as the initialization \nof the KEY variable perform actions that are intended to be run per request. These need to be moved \ninside the relevant HTTP handler to ensure the behavior remains consistent in the new runtime." }, { "name": "untitled_harlequinIguana", "probabilityUpgradeNeeded": false, "reason": "The provided code defines the handler directly without any side effects or additional code outside the handler. The behavior should remain the same in the new runtime." }, { "name": "untitled_moccasinHeron", "probabilityUpgradeNeeded": false, "reason": "The code outside the handler is just a constant string declaration, which does not change behavior between requests. The handler itself handles requests correctly and independently." }, { "name": "untitled_maroonSwallow", "probabilityUpgradeNeeded": false, "reason": "All the code, including the check for authentication,\n is inside the handler function. This means the behavior will stay \n the same with the new runtime." }, { "name": "wikiOG", "probabilityUpgradeNeeded": true, "reason": "The function `getWikipediaInfo` defined outside of the handler makes network requests and processes data for each request. In the new runtime, this function would only be executed once and cached. To ensure the same behavior in the new runtime, this function should be moved into the handler." }, { "name": "parsePostBodyExample", "probabilityUpgradeNeeded": false, "reason": "All the code is inside the handler, so the behavior will remain consistent in the new runtime." }, { "name": "discordEventReceiver", "probabilityUpgradeNeeded": false, "reason": "All the relevant code for handling requests and logging input is inside the handler.\n No code needs to be moved for the new runtime to function correctly." } ] Feel free to fork this and try it yourself! If you could get it working, it'd be a big help for us as we upgrade the thousands of HTTP vals. Future ideas: Better LLM (Claude 3.5) Better prompt More examples JSON mode having it reply with upgraded code send pull requests to users with public vals that probably need upgrading