Val Town Code SearchReturn to Val Town

10#### to do:
11- [ ] create some val town apis for the profile widgets (add vals people have already made)
12- [ ] add profile image (will probably point to val town profile pic)
13- [ ] add delete profile handler
14- [ ] finish public profile page

34      "<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" version=\"1.1\" ",
35    ),
36    { headers: { "Content-Type": "image/svg+xml" } },
37  );
38}

3This Todo App is server rendered *and* client-hydrated React. This architecture is a lightweight alternative to NextJS, RemixJS, or other React metaframeworks with no compile or build step. The data is saved server-side in [Val Town SQLite](https://docs.val.town/std/sqlite/).
4
5![demo](https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/3bbc3a39-9017-4a95-797b-2f205aa57f00/public)
6
7## SSR React Mini Framework

1/** @jsxImportSource npm:hono@3/jsx */
2import { modifyImage } from "https://esm.town/v/stevekrouse/modifyImage";
3import { Hono } from "npm:hono@3";
4
7  c.html(
8    <form action="/" method="post" enctype="multipart/form-data">
9      <input type="file" accept="image/*" name="file">Upload photo</input>
10      <button type="submit">Submit</button>
11    </form>,
14  const formData = await c.req.formData();
15  const file = formData.get("file") as File;
16  const compressed = await modifyImage(file, { width: 200, height: 200 });
17  return c.newResponse(compressed);
18});

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

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

1Migrated from folder: Archive/compress_image_demo

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
7Forl this val to install:

2
3Helpers to convert files to base64 & base64-encoded data URLs,
4which are particularly helpful for sending images to LLMs
5like ChatGPT, Anthropic, and Google.
6
25    role: "user",
26    content: [{
27      type: "image_url",
28      image_url: {
29        url: dataURL,
30      },
54      "content": [
55        {
56          "type": "image",
57          "source": {
58            "type": "base64",
80import { fileToBase64 } from "https://esm.town/v/stevekrouse/fileToDataURL";
81
82const base64Image = await fileToBase64(image);
83
84const result = await model.generateContent([
86  {
87    inlineData: {
88      data: base64Image,
89      mimeType: image.type,
90    },
91  },

3Every Monday at 9am EDT send a message to our team's Discord channel to remind us to water our plant.
4
5![Screenshot 2024-04-17 at 11.53.31.png](https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/49477876-1b12-4303-9a36-9736baa22f00/public)
6
7