Val Town Code SearchReturn to Val Town

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

11  let html = `<h1>${valTownInspo.title}</h1>
12  <p>${valTownInspo.description}</p>
13  <a href="https://val.town/${valTownInspo.val}"><img src="${valTownInspo.image}" style="max-width:576px"/></a>
14  <p><a href="https://www.val.town/settings/intervals">Unsubscribe here</a></p>`;
15

3Every weekday at 9am EDT send a message to our team's #engineering Discord channel to start a thread to remind us to do our standup.
4
5![Screenshot 2024-03-14 at 09.27.26.png](https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/c5309028-4983-4a27-1aab-0e2bb0fc1800/public)
6
7Slack version: @mikker/dailySlackRoundup