Val Town Code SearchReturn to Val Town

1import { createCanvas, loadImage } from "https://deno.land/x/canvas/mod.ts";
2import { BLOB_PREFIX, PlateDetails, POST_PREFIX } from "https://esm.town/v/adnan/findPlates";
3import { blueskyPostWithImage } from "https://esm.town/v/dupontgu/heavenlyOrangeMarmoset";
4import { Counter } from "https://esm.town/v/dupontgu/persistentCounter";
5import { blob } from "https://esm.town/v/std/blob";
6
7interface Image {
8  url: string;
9  // text locations within image, Vec3: [x, y, rotation]
10  slammer_txt_loc: number[];
11  slammed_txt_loc: number[];
14}
15
16// async function overlayTextOnImage(imageDef: Image): Promise<Uint8Array> {
17//   console.log(imageDef);
18//   const image = await loadImage(imageDef);
19
20//   // Define the desired aspect ratio (16:9)
22
23//   // Calculate the new dimensions for the canvas
24//   let newWidth = image.width();
25//   let newHeight = image.height();
26
27//   if (newWidth / newHeight > targetAspectRatio) {
28//     // Image is wider than 16:9, adjust width
29//     newWidth = newHeight * targetAspectRatio;
30//   } else {
31//     // Image is taller than 16:9, adjust height
32//     newHeight = newWidth / targetAspectRatio;
33//   }
37
38//   // Calculate the cropping offset
39//   const offsetX = (image.width() - newWidth) / 2;
40//   const offsetY = (image.height() - newHeight) / 2;
41
42//   // Draw the image with cropping
43//   ctx.drawImage(
44//     image,
45//     offsetX,
46//     offsetY,
53//   );
54
55//   return canvas.toBuffer("image/png");
56// }
57
58async function overlayTextOnImage(imageDef: Image): Promise<Uint8Array> {
59  const image = await loadImage(imageDef);
60
61  // Original image dimensions
62  const originalWidth = 541;
63  const originalHeight = 132;
74  ctx.fillRect(0, 0, canvasSize, canvasSize);
75
76  // Center the original image on the canvas
77  const xOffset = (canvasSize - originalWidth) / 2;
78  const yOffset = (canvasSize - originalHeight) / 2;
79  ctx.drawImage(image, xOffset, yOffset, originalWidth, originalHeight);
80
81  return canvas.toBuffer("image/png");
82}
83
92  const postCounter = new Counter("PLATE_post_counter");
93  const count = await postCounter.get();
94  const image = plateDetails.imageUrl;
95
96  const adjustedHeadline = plateDetails.title;
101  console.log(plateDetails);
102  console.log(statusText);
103  const altText = `\n A number plate with the digits ${plateDetails.title}.\n\n image source: ${plateDetails.imageUrl}`;
104  await blob.delete(inputs[0].key);
105  await blob.setJSON(POST_PREFIX + plateDetails.url);
106  await postCounter.increment();
107
108  const modifiedImageBuffer = await overlayTextOnImage(image);
109
110  await blueskyPostWithImage(statusText, modifiedImageBuffer, altText);
111  return new Response(modifiedImageBuffer, {
112    headers: {
113      "Content-Type": "image/png",
114    },
115  });

12  link: string;
13  description: string;
14  imageUrl: string;
15}
16
49      link: item.querySelector("link")?.textContent || "",
50      description: extractPrice(item.querySelector("description")?.textContent || ""),
51      imageUrl: item.querySelector("image")?.textContent || "",
52    }));
53

3This is a lightweight Blob Admin interface to view and debug your Blob data.
4
5![Screenshot 2024-11-22 at 15.43.43@2x.png](https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/d075a4ee-93ec-4cdd-4823-7c8aee593f00/public)
6
7Versions 0-17 of this val were done with Hono and server-rendering. 

440          {profile && (
441            <div className="flex items-center space-x-4">
442              <img src={profile.profileImageUrl} alt="Profile" className="w-8 h-8 rounded-full" />
443              <span>{profile.username}</span>
444              <a href="/auth/logout" className="text-blue-400 hover:text-blue-300">Logout</a>
583                            alt="Blob content"
584                            className="max-w-full h-auto"
585                            onError={() => console.error("Error loading image")}
586                          />
587                        </div>
635                  <li>Create public shareable links for blobs</li>
636                  <li>View and manage public folder</li>
637                  <li>Preview images directly in the interface</li>
638                </ul>
639              </div>
693  const { ValTown } = await import("npm:@valtown/sdk");
694  const vt = new ValTown();
695  const { email: authorEmail, profileImageUrl, username } = await vt.me.profile.retrieve();
696  // const authorEmail = me.email;
697
761
762  c.set("email", email);
763  c.set("profile", { profileImageUrl, username });
764  await next();
765};

2
3Want your BlueSky handle to be [username]-did.web.val.run? Fork this val, and go through the steps in your account settings: https://bsky.app/settings/account
4![Screenshot 2024-11-28 at 16.45.27.png](https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/bab54d09-185a-4ff4-c69c-8b815048d100/public)
5

378        <meta property="og:title" content="theonesky">
379        <meta property="og:description" content="bsky firehose as The Matrix source code">
380        <meta property="og:image" content="https://opengraph.b-cdn.net/production/images/63dd4f65-f10d-4ddb-8423-a9423fcc4025.png?token=jlC14BeNbB7_P1qgMfaHhowQJDJx9OeHxMirSfGfYiU&height=739&width=1200&expires=33268646651">
381        
382        <!-- Twitter Meta Tags -->
383        <meta name="twitter:card" content="summary_large_image">
384        <meta property="twitter:domain" content="opnsrc.codes">
385        <meta property="twitter:url" content="https://opnsrc.codes">
386        <meta name="twitter:title" content="theonesky">
387        <meta name="twitter:description" content="bsky firehose as The Matrix source code">
388        <meta name="twitter:image" content="https://opengraph.b-cdn.net/production/images/63dd4f65-f10d-4ddb-8423-a9423fcc4025.png?token=jlC14BeNbB7_P1qgMfaHhowQJDJx9OeHxMirSfGfYiU&height=739&width=1200&expires=33268646651">
389
390        <meta name="viewport" content="width=device-width, initial-scale=1">

111//   bio: "🕳️",
112//   username: "maxm",
113//   profileImageUrl: "...",
114//   url: "https://www.val.town/u/maxm",
115//   tier: "pro",

857  <meta charset="UTF-8">
858  <meta name="viewport" content="width=device-width, initial-scale=1.0">
859  <link rel="icon" type="image/png" href="https://labspace.ai/ls2-circle.png" />
860  <title>Scribe • Audio Recorder</title>
861  <meta property="og:title" content="Scribe • Audio Recorder" />
862  <meta property="og:description" content="A tool to record and process audio" />
863  <meta property="og:image" content="https://yawnxyz-og.web.val.run/img?link=https://scribe.labspace.ai&title=Scribe&subtitle=Audio%20Recorder" />
864  
865  <!-- Load dependencies first -->

4
5<div align="center">
6<img src="https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/67a1d35e-c37c-41a4-0e5a-03a9ba585d00/public" width="700px"/>
7</div>

3This is a lightweight Blob Admin interface to view and debug your Blob data.
4
5![Screenshot 2024-11-22 at 15.43.43@2x.png](https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/d075a4ee-93ec-4cdd-4823-7c8aee593f00/public)
6
7Versions 0-17 of this val were done with Hono and server-rendering.