Val Town Code SearchReturn to Val Town

4
5// Import using namespace to see if API methods are attached
6import * as domtoimage from "https://esm.sh/dom-to-image-more";
7// Log the imported object on load to verify
8console.log("domtoimage library namespace:", domtoimage);
9
10// --- Texture Data ---
27const PERSPECTIVE = 600;
28const BASE_TEXTURE_URL = "https://www.transparenttextures.com";
29const IMAGE_WIDTH = 120;
30const GRID_GAP = "1rem";
31const UPLOADED_IMAGE_WIDTH = 300;
32
33// --- Holographic Image Component ---
34// (Keep HolographicImage component as is)
35interface HolographicImageProps {
36  baseSrc: string;
37  textureUrl: string;
45  forwardedRef?: React.Ref<HTMLDivElement>;
46}
47const HolographicImage = React.forwardRef<HTMLDivElement, HolographicImageProps>(({
48  baseSrc,
49  textureUrl,
123
124  const perspectiveWrapperClasses = `perspective-wrapper ${framed ? "framed" : ""} ${
125    isUploaded ? "uploaded-image-wrapper" : ""
126  } ${containerClassName}`.trim().replace(/\s+/g, " ");
127  const shaderContainerClasses = `shader`.trim().replace(/\s+/g, " ");
142            display: "block",
143            width: "100%",
144            height: isUploaded ? "auto" : `${IMAGE_WIDTH}px`,
145            objectFit: "cover",
146          }}
147          onError={(e) => {
148            (e.target as HTMLImageElement).src = `https://placehold.co/${width}x${
149              isUploaded ? width : IMAGE_WIDTH
150            }/333/eee?text=Error`;
151            (e.target as HTMLImageElement).alt = "Error loading image";
152          }}
153        />
159            style={{ display: "block" }}
160            onError={(e) => {
161              (e.target as HTMLImageElement).style.display = "none";
162            }}
163          />
164        </div>
165      </div>
166      {caption && <p className="holographic-image-caption">{caption}</p>}
167    </div>
168  );
172// (Keep gradientStyles as is)
173const gradientStyles = `
174.gradient-sparrow { background-image: linear-gradient( hsl(359, 70%, 50%), hsl(16, 70%, 55%), hsl(33, 70%, 60%), hsl(45, 70%, 65%), hsl(58, 70%, 70%), hsl(58, 70%, 75%), hsl(58, 70%, 80%), hsl(96, 70%, 75%), hsl(146, 70%, 70%), hsl(183, 70%, 65%), hsl(225, 70%, 60%), hsl(265, 70%, 55%), hsl(303, 70%, 50%) ); }
175.gradient-deer { background-image: linear-gradient( hsl(0, 0%, 10%) 30%, hsl(104, 30%, 80%) 45%, hsl(273, 25%, 30%) 65%, hsl(0, 0%, 5%) 70% ); }
176.gradient-tech { background-image: linear-gradient( 45deg, hsl(180, 100%, 50%), hsl(210, 100%, 60%), hsl(240, 80%, 60%), hsl(280, 80%, 55%), hsl(180, 100%, 50%) ); }
177.gradient-sunset { background-image: linear-gradient(to right, #ff7e5f, #feb47b); }
178.gradient-ocean { background-image: linear-gradient(to right, #00c6ff, #0072ff); }
179.gradient-purple { background-image: linear-gradient(to right, #da22ff, #9733ee); }
180`;
181
182// --- Main App Component ---
183function App() {
184  const [uploadedImage, setUploadedImage] = useState<string | null>(null);
185  const [selectedTextureUrl, setSelectedTextureUrl] = useState<string>(
186    `${BASE_TEXTURE_URL}${patternsData[0].downloadUrl}`,
189  const [isRecording, setIsRecording] = useState(false);
190  const [recordProgress, setRecordProgress] = useState(0);
191  const uploadedImageRef = useRef<HTMLDivElement>(null);
192
193  // (Keep baseImages, gradientClasses, patternsToDisplay, handleFileChange as is)
194  const baseImages = [
195    "https://maxm-imggenurl.web.val.run/a-futuristic-cyberpunk-landscape-with-neon-lights",
196    "https://maxm-imggenurl.web.val.run/a-serene-mountain-landscape-with-misty-peaks",
214      const reader = new FileReader();
215      reader.onloadend = () => {
216        setUploadedImage(reader.result as string);
217      };
218      reader.readAsDataURL(file);
220  };
221
222  // --- Video Export Implementation (Using dom-to-image-more namespace) ---
223  const handleExportVideo = async () => {
224    // **MODIFIED:** Add specific logging before the check
225    console.log("handleExportVideo called. State:", {
226      isRecording,
227      hasRef: !!uploadedImageRef.current, // Log if ref exists (true/false)
228      hasDomToImage: !!domtoimage, // Log if library object exists (true/false)
229    });
230
231    // **MODIFIED:** Updated check with specific reasons and logging
232    // Check if the library object exists and has the 'toPng' method needed
233    const isLibraryReady = domtoimage && typeof domtoimage.toPng === "function";
234
235    if (isRecording || !uploadedImageRef.current || !isLibraryReady) {
236      let reason = "";
237      if (isRecording) reason = "Already recording.";
238      else if (!uploadedImageRef.current) reason = "Target element ref not found.";
239      else if (!isLibraryReady) reason = "dom-to-image library not loaded or invalid."; // More specific
240      else reason = "Unknown check failure.";
241
244      // Optional: Add specific alert if library check fails
245      if (!isLibraryReady) {
246        alert("Error: dom-to-image library failed to load or is not valid. Cannot export video.");
247      }
248      return; // Stop execution
253    setRecordProgress(0);
254
255    const targetElement = uploadedImageRef.current; // The perspective-wrapper div
256    const shaderElement = targetElement.querySelector(".shader") as HTMLElement; // The inner shader div
257
357      console.log("Recording started...");
358
359      // --- Animation Loop (Using dom-to-image namespace) ---
360      let currentFrame = 0;
361      const recordFrame = () => {
368        setRecordProgress(Math.round((currentFrame / totalFrames) * 100));
369
370        // --- Capture Frame using dom-to-image-more ---
371        new Promise<void>(async (resolve, reject) => {
372          try {
376
377            // **MODIFIED:** Call using namespace if needed (already correct)
378            const dataUrl = await domtoimage.toPng(targetElement, options);
379
380            const img = new Image();
381            img.onload = () => {
382              ctx.clearRect(0, 0, hiddenCanvas!.width, hiddenCanvas!.height);
383              ctx.drawImage(img, 0, 0, hiddenCanvas!.width, hiddenCanvas!.height);
384              resolve();
385            };
386            img.onerror = (err) => {
387              console.error("Failed to load generated image data URL", err);
388              reject(new Error("Image loading failed"));
389            };
390            img.src = dataUrl;
391          } catch (error) {
392            console.error(`Error capturing frame ${currentFrame} with dom-to-image:`, error);
393            reject(error);
394          }
426    <div className="App">
427      <header style={{ textAlign: "center", margin: "2vh 0 4vh 0", padding: "0 1rem" }}>
428        <h1>React Holographic Image Tool</h1>
429        <p>Upload an image or move mouse/touch over grid images</p>
430      </header>
431
442        }}
443      >
444        <h2>Upload Your Image</h2>
445        <input
446          type="file"
447          accept="image/*"
448          onChange={handleFileChange}
449          style={{ display: "block", margin: "1rem auto" }}
450          disabled={isRecording}
451        />
452        {uploadedImage && (
453          <div
454            style={{
501              </select>
502            </div>
503            {/* --- Display Uploaded Image --- */}
504            <HolographicImage
505              forwardedRef={uploadedImageRef}
506              key="uploaded-image"
507              baseSrc={uploadedImage}
508              textureUrl={selectedTextureUrl}
509              alt="Uploaded holographic image"
510              width={UPLOADED_IMAGE_WIDTH}
511              gradientClass={selectedGradient}
512              isUploaded={true}
518              <button
519                onClick={handleExportVideo}
520                disabled={isRecording || !(domtoimage && typeof domtoimage.toPng === "function")}
521                style={{
522                  padding: "0.8rem 1.5rem",
523                  fontSize: "1rem",
524                  cursor: (isRecording || !(domtoimage && typeof domtoimage.toPng === "function")) ? "wait" : "pointer",
525                  backgroundColor: (isRecording || !(domtoimage && typeof domtoimage.toPng === "function"))
526                    ? "#ccc"
527                    : "#007bff",
528                  color: (isRecording || !(domtoimage && typeof domtoimage.toPng === "function")) ? "#555" : "white",
529                  border: "none",
530                  borderRadius: "5px",
531                  opacity: (isRecording || !(domtoimage && typeof domtoimage.toPng === "function")) ? 0.6 : 1,
532                  minWidth: "180px",
533                }}
546              )}
547              {/* **MODIFIED:** Error message check uses isLibraryReady */}
548              {!(domtoimage && typeof domtoimage.toPng === "function") && !isRecording && (
549                <p style={{ fontSize: "0.8em", color: "#ff8888", marginTop: "0.5em" }}>
550                  Error: Capture library failed to load correctly.
562        style={{
563          display: "grid",
564          gridTemplateColumns: `repeat(auto-fit, minmax(${IMAGE_WIDTH}px, 1fr))`,
565          gap: GRID_GAP,
566          padding: GRID_GAP,
573          if (!pattern) return null;
574          const fullTextureUrl = `${BASE_TEXTURE_URL}${pattern.downloadUrl}`;
575          const baseImageSrc = baseImages[index % baseImages.length];
576          const gradientClass = gradientClasses[index % gradientClasses.length];
577          return (
578            <HolographicImage
579              key={pattern.title + index}
580              baseSrc={baseImageSrc}
581              textureUrl={fullTextureUrl}
582              alt={`Holographic ${pattern.title}`}
583              width={IMAGE_WIDTH}
584              gradientClass={gradientClass}
585              caption={`${index + 1}. ${pattern.title}`}
594      {/* (Keep Footer as is) */}
595      <footer style={{ textAlign: "center", marginTop: "4vh", padding: "1rem", color: "#aaa", fontSize: "0.8em" }}>
596        <p>Textures from transparenttextures.com | Base Images via val.run endpoint.</p>
597        <p>
598          <strong>Note:</strong> Requires correct{" "}
617export async function server(request: Request): Promise<Response> {
618  return new Response(
619    `<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Interactive Holographic Tool</title><style>:root{--mouse-x:0.5;--mouse-y:0.5;--rotate-x:0deg;--rotate-y:0deg;--bg-pos-x:50%;--bg-pos-y:50%}body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif;line-height:1.6;margin:0;padding:0;min-height:100vh;background-color:#1e1e1e;color:#eee;overflow-x:hidden}.App{max-width:100%}.holographic-image-caption{margin:.4rem 0 0;padding:0 .2rem;font-size:.7em;color:#aaa;line-height:1.3;min-height:1.3em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;text-align:center}.perspective-wrapper{display:block;position:relative;transition:transform .2s ease-out,box-shadow .3s ease;border-radius:6px;overflow:hidden;margin:0 auto}.perspective-wrapper:hover{transform:scale(1.03);z-index:10}.uploaded-image-wrapper:hover{transform:scale(1.05);box-shadow:0 8px 25px rgba(0,0,0,.6)}.perspective-wrapper.framed{padding:8px;background-color:#282828;box-shadow:0 4px 10px rgba(0,0,0,.4);border:1px solid #444}.shader{position:relative;overflow:hidden;backface-visibility:hidden;display:block;line-height:0;transform-style:preserve-3d;transform:rotateX(var(--rotate-x)) rotateY(var(--rotate-y));transition:transform .08s linear;will-change:transform;border-radius:4px;height:${IMAGE_WIDTH}px;width:100%}.uploaded-image-wrapper .shader{height:auto;max-height:60vh}.perspective-wrapper:not(:hover) .shader{transition:transform .6s cubic-bezier(.23,1,.32,1)}.shader>img{display:block;width:100%;height:100%;object-fit:cover;position:relative;z-index:1;border-radius:inherit}.uploaded-image-wrapper .shader>img{height:auto;max-height:calc(60vh - 16px);object-fit:contain}.shader-layer{position:absolute;inset:0;width:100%;height:100%;background-size:cover;background-position:center;pointer-events:none;z-index:2;border-radius:inherit}.specular{mix-blend-mode:color-dodge;opacity:.95;background-position:var(--bg-pos-x) var(--bg-pos-y);background-size:180% 180%;transition:background-position .6s cubic-bezier(.23,1,.32,1);will-change:background-position}.perspective-wrapper:hover .specular{transition:background-position .08s linear}.mask{mix-blend-mode:multiply;opacity:.8;position:absolute;inset:0;z-index:3;width:100%;height:100%;display:block;object-fit:cover;background-repeat:repeat;background-size:auto;filter:contrast(1.1) brightness(1.0)}.mask img{display:block;width:100%;height:100%;object-fit:cover;background:transparent!important}${gradientStyles}a{color:#9cf;text-decoration:none}a:hover{text-decoration:underline}button{padding:.6rem 1.2rem;font-size:.9rem;cursor:pointer;background-color:#4a4a4a;color:#fff;border:1px solid #666;border-radius:5px;transition:background-color .2s ease,border-color .2s ease}button:hover:not(:disabled){background-color:#5a5a5a;border-color:#888}button:active:not(:disabled){background-color:#3a3a3a}button:disabled{cursor:not-allowed;opacity:.6}input[type=file]{color:#ccc;padding:5px}input[type=file]::file-selector-button{padding:.5rem 1rem;margin-right:1rem;border-radius:4px;border:1px solid #555;background-color:#3a3a3a;color:#eee;cursor:pointer;transition:background-color .2s ease}input[type=file]::file-selector-button:hover{background-color:#4a4a4a}input[type=file]:disabled{opacity:.6;cursor:not-allowed}input[type=file]:disabled::file-selector-button{cursor:not-allowed}select{padding:.5rem;border-radius:4px;background-color:#333;color:#eee;border:1px solid #555;min-width:150px}select:disabled{opacity:.6;cursor:not-allowed}</style></head><body><div id="root"><noscript>Please enable JavaScript to view this interactive page.</noscript></div><script type="module" src="${import.meta.url}"></script></body></html>`,
620    { headers: { "content-type": "text/html; charset=utf-8" } },
621  );

26    "title": "Markdown Editor",
27    "code":
28      "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>Markdown Editor</title>\n    <link href=\"https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css\" rel=\"stylesheet\">\n</head>\n<body class=\"bg-white\">\n    <div class=\"max-w-full mx-auto p-4 pt-6 md:p-6 lg:p-8\">\n        <h1 class=\"text-3xl text-center mb-4\">Markdown Editor</h1>\n        <div class=\"flex flex-row\">\n            <div class=\"editor p-4 rounded-lg border border-gray-200 w-full md:w-1/2\">\n                <textarea id=\"editor\" class=\"w-full h-screen p-2 border border-gray-200 rounded-lg\" placeholder=\"Type your Markdown here...\"></textarea>\n            </div>\n            <div class=\"preview p-4 rounded-lg border border-gray-200 w-full md:w-1/2 ml-2 md:ml-4 lg:ml-8\">\n                <div id=\"preview\"></div>\n            </div>\n        </div>\n        <p class=\"text-center mt-4\">Built on <a href=\"https://cerebrascoder.com\">Cerebras Coder</a></p>\n    </div>\n\n    <script>\n        const editor = document.getElementById('editor');\n        const preview = document.getElementById('preview');\n\n        // Initialize textarea with default markdown\n        const defaultMarkdown = `\n# Introduction to Markdown\nMarkdown is a lightweight markup language that is easy to read and write. It is often used for formatting text in plain text editors, chat applications, and even web pages.\n\n## Headers\nHeaders are denoted by the # symbol followed by a space. The number of # symbols determines the level of the header:\n# Heading 1\n## Heading 2\n### Heading 3\n\n## Emphasis\nYou can use emphasis to make your text **bold** or *italic*:\n*Italics*\n**Bold**\n\n## Lists\nYou can use lists to organize your text:\n* Item 1\n* Item 2\n* Item 3\nOr\n1. Item 1\n2. Item 2\n3. Item 3\n\n## Links\nYou can use links to reference external resources:\n[Google](https://www.google.com)\n\n## Images\nYou can use images to add visual content:\n![Markdown Logo](https://upload.wikimedia.org/wikipedia/commons/thumb/4/48/Markdown-mark.svg/208px-Markdown-mark.svg.png)\n`;\n        editor.value = defaultMarkdown;\n\n        // Update preview on input\n        editor.addEventListener('input', () => {\n            const markdown = editor.value;\n            const html = markdownToHtml(markdown);\n            preview.innerHTML = html;\n        });\n\n        // Initialize preview with default markdown\n        const defaultHtml = markdownToHtml(defaultMarkdown);\n        preview.innerHTML = defaultHtml;\n\n        // Function to convert Markdown to HTML\n        function markdownToHtml(markdown) {\n            // Bold\n            markdown = markdown.replace(/\\*\\*(.*?)\\*\\*/g, '<b>$1</b>');\n\n            // Italic\n            markdown = markdown.replace(/\\*(.*?)\\*/g, '<i>$1</i>');\n\n            // Links\n            markdown = markdown.replace(/\\[(.*?)\\]\\((.*?)\\)/g, '<a href=\"$2\">$1</a>');\n\n            // Images\n            markdown = markdown.replace(/!\\[(.*?)\\]\\((.*?)\\)/g, '<img src=\"$2\" alt=\"$1\">');\n\n            // Headings\n            markdown = markdown.replace(/(^#{1,6} )(.*)/gm, (match, level, text) => {\n                return `<h${level.length}>${text}</h${level.length}>`;\n            });\n\n            // Lists\n            markdown = markdown.replace(/^(\\*|\\d+\\.) (.*)/gm, (match, marker, text) => {\n                if (marker.startsWith('*')) {\n                    return `<li>${text}</li>`;\n                } else {\n                    return `<li>${text}</li>`;\n                }\n            });\n\n            // Line breaks\n            markdown = markdown.replace(/\\n/g, '<br>');\n\n            // Fix for nested lists\n            markdown = markdown.replace(/<li><li>/g, '<li>');\n            markdown = markdown.replace(/<\\/li><\\/li>/g, '</li>');\n\n            // Wrap lists in ul\n            markdown = markdown.replace(/(<li>.*<\\/li>)/g, '<ul>$1</ul>');\n\n            return markdown;\n        }\n    </script>\n</body>\n</html>",
29    "performance": {
30      "tokensPerSecond": 4092.96,

21      <meta property="og:description" content="Turn your ideas into fully functional apps in less than a second – powered by Llama3.3-70b on Cerebras's super-fast wafer chips. Code is 100% open-source, hosted on Val Town."">
22      <meta property="og:type" content="website">
23      <meta property="og:image" content="https://stevekrouse-blob_admin.web.val.run/api/public/CerebrasCoderOG.jpg">
24      
25          

3It's common to have code and types that are needed on both the frontend and the backend. It's important that you write this code in a particularly defensive way because it's limited by what both environments support:
4
5![shapes at 25-02-25 11.57.13.png](https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/75db1d51-d9b3-45e0-d178-25d886c10700/public)
6
7For example, you *cannot* use the `Deno` keyword. For imports, you can't use `npm:` specifiers, so we reccomend `https://esm.sh` because it works on the server & client. You *can* use TypeScript because that is transpiled in `/backend/index.ts` for the frontend. Most code that works on the frontend tends to work in Deno, because Deno is designed to support "web-standards", but there are definitely edge cases to look out for.

21## `favicon.svg`
22
23As of this writing Val Town only supports text files, which is why the favicon is an SVG and not an .ico or any other binary image format. If you need binary file storage, check out [Blob Storage](https://docs.val.town/std/blob/).
24
25## `components/`

73});
74
75// --- Blob Image Serving Routes ---
76
77// GET /api/images/:filename - Serve images from blob storage
78app.get("/api/images/:filename", async (c) => {
79  const filename = c.req.param("filename");
80
81  try {
82    // Get image data from blob storage
83    const imageData = await blob.get(filename);
84
85    if (!imageData) {
86      return c.json({ error: "Image not found" }, 404);
87    }
88
90    let contentType = "application/octet-stream"; // Default
91    if (filename.endsWith(".jpg") || filename.endsWith(".jpeg")) {
92      contentType = "image/jpeg";
93    } else if (filename.endsWith(".png")) {
94      contentType = "image/png";
95    } else if (filename.endsWith(".gif")) {
96      contentType = "image/gif";
97    } else if (filename.endsWith(".svg")) {
98      contentType = "image/svg+xml";
99    }
100
101    // Return the image with appropriate headers
102    return new Response(imageData, {
103      headers: {
104        "Content-Type": contentType,
107    });
108  } catch (error) {
109    console.error(`Error serving image ${filename}:`, error);
110    return c.json(
111      { error: "Failed to load image", details: error.message },
112      500,
113    );

10      href="/public/favicon.svg"
11      sizes="any"
12      type="image/svg+xml"
13    />
14    <link rel="preconnect" href="https://fonts.googleapis.com" />
36        height: 100%;
37        font-family: "Pixelify Sans", sans-serif;
38        image-rendering: pixelated;
39      }
40      body::before {
50      /* For pixel art aesthetic */
51      * {
52        image-rendering: pixelated;
53      }
54    </style>

12}
13
14type ImageSummary = {
15  sender: string;
16  recipient: (typeof RECIPIENTS)[number] | "both" | "other";
22  anthropic: Anthropic,
23  htmlContent: string,
24  imageSummaries: ImageSummary[]
25) {
26  try {
36              text: `Analyze the following content from an email and provide a response as a JSON blob (only JSON, no other text) with two parts.
37
38                The email is from the USPS showing mail I'm receiving. Metadata about packages is stored directly in the email. Info about mail pieces is in images, so I've included summaries of those as well.
39
40                Your response should include:
66              And here is info about the mail pieces:
67
68              ${JSON.stringify(imageSummaries)}`,
69            },
70          ],
95  const anthropic = new Anthropic({ apiKey });
96
97  // Process each image attachment serially
98  const summaries = [];
99  for (const [index, attachment] of e.attachments.entries()) {
100    try {
101      const imageData = await attachment.arrayBuffer();
102      const base64Image = btoa(
103        String.fromCharCode(...new Uint8Array(imageData))
104      );
105
112            content: [
113              {
114                type: "image",
115                source: {
116                  type: "base64",
117                  media_type: attachment.type,
118                  data: base64Image,
119                },
120              },
148      summaries.push(parsedResponse);
149    } catch (error) {
150      console.error(`Image analysis error:`, error);
151      summaries.push({
152        sender: "Error",
153        recipient: "Error",
154        type: "error",
155        notes: `Image ${index + 1} Analysis Failed: ${error.message}`,
156      });
157    }

187## Val Town Platform Specifics
188- **Redirects:** Use `return new Response(null, { status: 302, headers: { Location: "/place/to/redirect" }})` instead of `Response.redirect` which is broken
189- **Images:** Avoid external images or base64 images. Use emojis, unicode symbols, or icon fonts/libraries instead
190- For AI-generated images, use: `https://maxm-imggenurl.web.val.run/the-description-of-your-image`
191- **Storage:** DO NOT use the Deno KV module for storage
192- **Browser APIs:** DO NOT use the `alert()`, `prompt()`, or `confirm()` methods

2  // Background
3  BACKGROUND:
4    "https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/8b501664-722e-4be8-cf71-83aab7756e00/public",
5
6  // Stevens
7  STEVENS_FRONT:
8    "https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/8b8432bb-add2-44ad-bb12-44b8ea215500/public",
9  STEVENS_BACK:
10    "https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/e28da8ab-7710-4b82-8e32-8fdf65c2ed00/public",
11  STEVENS_WALKING:
12    "https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/bd7b9997-09b2-4b35-6eb9-9975a85bb700/public",
13
14  // Mailman
15  MAILMAN_STANDING:
16    "https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/20a6493d-cc31-475e-aa83-ac97d317e400/public",
17  MAILMAN_WALKING:
18    "https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/61604576-8a83-4d85-d5e4-8e8e26641700/public",
19};
20