Val Town Code SearchReturn to Val Town

1# [Infinite SVG Graph](https://maxm-infinitesvggraph.web.val.run/)
2
3[![image.png](https://i.imgur.com/noRUzvk.gif)](https://maxm-infinitesvggraph.web.val.run/)
4
5A connected graph of AI-generated SVG images.
6
7Ask it to make any kind of SVG. Add your contribution to the graph. Make it POP!

1# Test Explorer
2
3![3c584b1ccdd2115d031f49d69f2ac68ea33c450bbde9fdd462036dc2cbf8e907.png](https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/cef156f7-f018-493f-6e25-6649e7f0b500/public)
4
5Click on the play button next to list items to run them.

9const app = new Hono();
10
11const DOWNLOAD_URL = "https://yawnxyz-serve.web.val.run"; // https://yawnxyz-serve.web.val.run/myImage.jpg
12// Define an array of JSON objects
13let blobbyList = await blobby.list();
428                  <form class="input-btn-group | flex flex-row gap-0" @submit.prevent="uploadFromUrl(item.key)">
429                    <button type="submit" class="flex items-center rounded-l-md px-4 py-1 text-sm cursor-pointer bg-gray-100 hover:bg-gray-200">Upload from Url</button>
430                    <input x-text="blobs[item.key]?.uploadUrl" type="text" class="rounded-l-xs rounded-r-md border-1 border-gray-200 px-4 py-1 text-sm text-gray-800 bg-gray-100" @input="updateBlobUrl(item.key, $event.target.value)" placeholder="https://image/mp3/etc">
431                  </form>
432                </div>
461                </template>
462                
463                <template x-if="blobs[item.key]?.type?.includes('image')">
464                  <img :src="blobs[item.key]?.url" controls></audio>
465                </template>
643      <form class="input-btn-group flex flex-row gap-0" @submit.prevent="uploadFromUrl">
644        <button type="submit" class="flex items-center rounded-l-md px-4 py-1 text-sm cursor-pointer bg-gray-100 hover:bg-gray-200">Upload from Url</button>
645        <input x-model="uploadUrl" type="text" class="rounded-l-xs rounded-r-md border-1 border-gray-200 px-4 py-1 text-sm text-gray-800 bg-gray-100" placeholder="https://image/mp3/etc">
646      </form>
647    </div>
676      </template>
677      
678      <template x-if="blobType && blobType.includes('image')">
679        <img :src="blobUrl" alt="Blob content">
680      </template>

1import {
2  ImageMagick,
3  initializeImageMagick,
4  Magick,
5  MagickFormat,
6  Quantum,
7} from "https://esm.sh/@imagemagick/magick-wasm";
8
9const resp = await fetch("https://esm.sh/@imagemagick/magick-wasm@0.0.29/dist/magick.wasm");
10const wasmBytes = await resp.arrayBuffer();
11
12initializeImageMagick(wasmBytes).then(() => {
13  console.log(Magick.imageMagickVersion);
14  console.log("Delegates:", Magick.delegates);
15  console.log("Features:", Magick.features);
17
18  console.log("");
19  ImageMagick.read("logo:", image => {
20    image.resize(100, 100);
21    image.blur(1, 5);
22    console.log(image.toString());
23
24    image.write(MagickFormat.Jpeg, data => {
25      console.log(data.length);
26    });

3Outputs:
4```text
5ImageMagick 7.1.1-30 Q8 x86_64 dd459b01f:20240407 https://imagemagick.org
6Delegates: freetype heic jng jp2 jpeg jxl lcms lqr openexr png raw tiff webp xml zlib
7Features: Cipher

1export default async function(req: Request) {
2  const body = (await fetch("https://live.staticflickr.com/65535/53782948438_9b85e57a6c_o_d.png")).body
3  return new Response(body, {headers: {"Content-Type": "image/png"}});
4}

6<p align=center>
7<a href="https://maxm-valtownchatgpt.web.val.run/">
8<img width=600 src="https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/c180aba1-997a-4e40-615a-1ed8456b5a00/public">
9</a>
10</p>

3
4import valTownBadge from "https://esm.town/v/jxnblk/valTownBadge?v=16";
5import { imageToAscii } from "https://esm.town/v/maxm/imageToAscii";
6import { extractValInfo } from "https://esm.town/v/pomdtr/extractValInfo";
7import { Hono } from "npm:hono@3";
35      document.getElementById("message").style.display = "none";
36      document.getElementById("close-btn").style.display = "flex";
37      await fetchImage(id);
38    };
39
152                    <p>
153                      Click on a circle to select a traffic camera. <br />{" "}
154                      The traffic images will be converted to ASCII and streamed to your browser.
155                      <br /> <a className="underline" href={info.htmlUrl}>Source code & info</a>.
156                    </p>
196);
197app.get("/camera-ascii/:id", async (c) => {
198  const url = "https://webcams.nyctmc.org/api/cameras/" + c.req.param("id") + "/image";
199  const { stringColor } = await imageToAscii(url, 150);
200  return new Response(stringColor, { headers: { "Content-Type": "text/plain" } });
201});
203  "/camera/:id",
204  async (c) => {
205    const url = "https://webcams.nyctmc.org/api/cameras/" + c.req.param("id") + "/image";
206    const { string, stringColor } = await imageToAscii(url, 150);
207    return new Response(
208      `<style>
228  <p class="loading"></p>
229  <p>
230    <a target="_blank" href="${url}">view source image</a>
231  </p>
232  <script>
258app.get("/camera-text-stream/:id", async (c) => {
259  let timerId: number | undefined;
260  const url = "https://webcams.nyctmc.org/api/cameras/" + c.req.param("id") + "/image";
261  const body = new ReadableStream({
262    async start(controller) {
264        controller.enqueue(new TextEncoder().encode("data: " + JSON.stringify(msg) + "\r\n\r\n"));
265      };
266      const { stringColor } = await imageToAscii(url, 150);
267      write(stringColor);
268      timerId = setInterval(async () => {
269        const { stringColor } = await imageToAscii(url, 150);
270        write(stringColor);
271      }, 2000);

1import { imageToAscii } from "https://esm.town/v/maxm/imageToAscii";
2
3export default async function(req: Request): Promise<Response> {
4  const { string, stringColor } = await imageToAscii(
5    "https://webcams.nyctmc.org/api/cameras/9fa5b0dd-e955-449e-97e1-9c53ad9c23a8/image",
6    150,
7  );

25
26// Converted from: https://github.com/victorqribeiro/imgToAscii/blob/ca7e181b9bb9770798ed3a0d3dfeb344c60953f2/src/imgToAscii.js
27import { createCanvas, loadImage } from "https://deno.land/x/canvas@v1.4.1/mod.ts";
28export async function imageToAscii(src: string, maxWidth?: number) {
29  let string = "";
30  let stringColor = "";
38            "`","'","."," "]
39  }
40  const image = await loadImage(src);
41  let width = image.width();
42  const scale = maxWidth ? maxWidth / width : 1;
43  const height = Math.floor(image.height() * scale * 0.6);
44  width = Math.floor(width * scale);
45  const canvas = createCanvas(width, height);
46  const context = canvas.getContext("2d");
47  context.drawImage(image, 0, 0, canvas.width, canvas.height);
48  const imageData = context.getImageData(0, 0, canvas.width, canvas.height);
49  let grayStep = Math.ceil(255 / alphabet[charType].length);
50  for (let i = 0; i < imageData.data.length; i += 4) {
51    for (let j = 0; j < alphabet[charType].length; j++) {
52      let r = imageData.data[i];
53      let g = imageData.data[i + 1];
54      let b = imageData.data[i + 2];
55      if ((r * 0.2126) + (g * 0.7152) + (b * 0.0722) < (j + 1) * grayStep) {
56        const char = alphabet[charType][j];