Val Town Code SearchReturn to Val Town

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

82  const [cookieAndTeaMode, setCookieAndTeaMode] = useState(false);
83
84  // Fetch images from backend instead of blob storage directly
85  useEffect(() => {
86    // Set default background color in case image doesn't load
87    if (document.body) {
88      document.body.style.backgroundColor = "#2D1700"; // Dark brown leather color
89    }
90
91    // Fetch avatar image
92    fetch("/api/images/stevens.jpg")
93      .then((response) => {
94        if (response.ok) return response.blob();
95        throw new Error("Failed to load avatar image");
96      })
97      .then((imageBlob) => {
98        const url = URL.createObjectURL(imageBlob);
99        setAvatarUrl(url);
100      })
104
105    // Fetch wood background
106    fetch("/api/images/wood.jpg")
107      .then((response) => {
108        if (response.ok) return response.blob();
109        throw new Error("Failed to load wood background");
110      })
111      .then((imageBlob) => {
112        const url = URL.createObjectURL(imageBlob);
113        setWoodUrl(url);
114
115        // Apply wood background to body
116        if (document.body) {
117          document.body.style.backgroundImage = `url(${url})`;
118        }
119      })
362      return {
363        position: SCENE_ELEMENTS.DESK_SITTING,
364        image: ASSETS.STEVENS_FRONT,
365        highlightElement: SCENE_ELEMENTS.DESK,
366        animationClass: "no-animation",
372      return {
373        position: SCENE_ELEMENTS.DESK_SITTING,
374        image: ASSETS.STEVENS_FRONT,
375        highlightElement: null,
376        animationClass: "no-animation",
387            y: SCENE_ELEMENTS.MAILBOX.y - 20,
388          },
389          image: ASSETS.STEVENS_BACK,
390          highlightElement: SCENE_ELEMENTS.MAILBOX,
391          animationClass: "walk-to-mailbox",
398            y: SCENE_ELEMENTS.CALENDAR.y + 30,
399          },
400          image: ASSETS.STEVENS_BACK,
401          highlightElement: SCENE_ELEMENTS.CALENDAR,
402          animationClass: "walk-to-calendar",
409            y: SCENE_ELEMENTS.TELEGRAM.y + 10,
410          },
411          image: ASSETS.STEVENS_BACK,
412          highlightElement: SCENE_ELEMENTS.TELEGRAM,
413          animationClass: "walk-to-telegram",
417        return {
418          position: SCENE_ELEMENTS.OUTSIDE,
419          image: ASSETS.STEVENS_FRONT,
420          highlightElement: null,
421          animationClass: "walk-to-outside",
425        return {
426          position: SCENE_ELEMENTS.DESK_SITTING,
427          image: ASSETS.STEVENS_FRONT,
428          highlightElement: SCENE_ELEMENTS.DESK,
429          animationClass: "walk-to-desk",
623          box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.4),
624            0 3px 8px rgba(0, 0, 0, 0.5);
625          image-rendering: pixelated;
626          cursor: pointer;
627          transition: transform 0.2s;
634        .notebook-pages {
635          background-color: #f8f1e0;
636          background-image: linear-gradient(#d6c6a5 1px, transparent 1px);
637          background-size: 100% 16px;
638          box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.3);
639          image-rendering: pixelated;
640        }
641
652
653        .pixel-character {
654          image-rendering: pixelated;
655          position: absolute;
656          transition: left 0.7s ease-in-out, top 0.7s ease-in-out;
763          className="w-[512px] h-[512px] mx-auto relative"
764          style={{
765            backgroundImage: `url(${ASSETS.BACKGROUND})`,
766            backgroundSize: "cover",
767            backgroundPosition: "center",
768            imageRendering: "pixelated",
769          }}
770        >
799          {/* Stevens character */}
800          <img
801            src={stevensState.image}
802            alt="Stevens"
803            className={`pixel-character ${

100    <!-- Controls on the right -->
101    <div id="controlsContainer" class="w-[300px] min-w-[300px] p-5 overflow-y-auto border-l-4 border-accent bg-base-100 text-base-content flex flex-col gap-5">
102      <div id="pdfImageControls" style="display: none;" class="flex flex-col gap-4">
103        <h4 class="font-bold uppercase mb-2">Image Controls:</h4>
104        <button
105          class="btn btn-success w-full"
106          id="downloadZipButton"
107          onclick="downloadAllPdfImagesAsZip()"
108        >
109          Download All Images as ZIP
110        </button>
111
112        <!-- Image Buttons -->
113        <div id="imageButtonsContainer" class="flex flex-col gap-3">
114          <button class="btn btn-info w-full" onclick="copyAllPdfImagesToClipboard()">
115            Copy All Images to Clipboard
116          </button>
117          <button class="btn btn-warning w-full" onclick="downloadAllPdfImagesAsZip()">
118            Download All Images
119          </button>
120        </div>
124    <!-- Main Content -->
125    <div id="mainContentContainer" class="flex-1 p-5 overflow-y-auto bg-base-100 text-base-content flex flex-wrap gap-8 items-start">
126      <div id="pdfImagesContainer">
127        <!-- Images will be inserted here -->
128      </div>
129    </div>
148    <script src="https://cdn.jsdelivr.net/npm/tesseract.js@4.0.3/dist/tesseract.min.js"></script>
149
150    <!-- JSZip library for zipping images -->
151    <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
152
340          const totalPages = loadedPdf.numPages
341
342          // Clear any previously displayed images
343          const pdfImagesContainer = document.getElementById(
344            'pdfImagesContainer',
345          )
346          pdfImagesContainer.innerHTML = ''
347
348          // Retrieve the current or selected week number
377
378            // Convert the canvas to a JPG data URL
379            const jpgDataUrl = tempCanvas.toDataURL('image/jpeg', 1.0)
380
381            // Perform OCR on the image using Tesseract.js
382            const ocrResult = await Tesseract.recognize(tempCanvas, 'eng', {
383              logger: (message) => console.log(message),
397            )
398
399            // Build the image container
400            const singleImageContainer = document.createElement('div')
401            singleImageContainer.className = 'singleImageContainer card bg-base-200 shadow-md p-4 flex flex-col items-center w-64 min-w-56 max-w-xs mb-5'
402
403            // Add the rendered image
404            const renderedImg = document.createElement('img')
405            renderedImg.src = jpgDataUrl
407            renderedImg.className = 'max-w-full h-auto object-contain rounded-box border border-base-300 bg-base-100'
408
409            // Create a container for the image buttons
410            const singleImageButtonsDiv = document.createElement('div')
411            singleImageButtonsDiv.className = 'singleImageButtons flex flex-wrap gap-2 mt-3 justify-center'
412
413            // Copy Image Button
414            const copyImageButton = document.createElement('button')
415            copyImageButton.className = 'btn btn-info'
416            copyImageButton.textContent = 'Copy'
417            copyImageButton.onclick = () =>
418              copySingleImageToClipboard(renderedImg)
419
420            // Download Image Button
421            const downloadImageButton = document.createElement('button')
422            downloadImageButton.className = 'btn btn-warning'
423            downloadImageButton.textContent = 'Download'
424            // Construct filename based on name (if found) or page number
425            let fileNameToUse = `week_${finalWeekNumber}-page_${pageIndex}.jpg`
427              fileNameToUse = `week_${finalWeekNumber}-${extractedPersonName}.jpg`
428            }
429            downloadImageButton.setAttribute('data-filename', fileNameToUse)
430            downloadImageButton.onclick = () =>
431              downloadSingleImage(jpgDataUrl, fileNameToUse)
432
433            singleImageButtonsDiv.appendChild(copyImageButton)
434            singleImageButtonsDiv.appendChild(downloadImageButton)
435
436            // Optional button: Copy Pay Amount
441              copyPayAmountButton.onclick = () =>
442                copyTextToClipboard(extractedPayAmount)
443              singleImageButtonsDiv.appendChild(copyPayAmountButton)
444            }
445
446            // Append everything to the container
447            singleImageContainer.appendChild(renderedImg)
448            singleImageContainer.appendChild(singleImageButtonsDiv)
449            pdfImagesContainer.appendChild(singleImageContainer)
450          }
451
452          // Show image controls
453          document.getElementById('pdfImageControls').style.display = 'block'
454        } catch (error) {
455          console.error('Error loading PDF:', error)
511      }
512
513      function copySingleImageToClipboard(imageElement) {
514        fetch(imageElement.src)
515          .then((response) => response.blob())
516          .then((blob) => {
518            navigator.clipboard.write([clipboardItem]).then(
519              () => {
520                alert('Image copied to clipboard!')
521              },
522              (error) => {
523                alert('Failed to copy image: ' + error)
524              },
525            )
527      }
528
529      function downloadSingleImage(dataUrl, fileName) {
530        const hiddenLink = document.createElement('a')
531        hiddenLink.href = dataUrl
536      }
537
538      async function copyAllPdfImagesToClipboard() {
539        const allImages = document.querySelectorAll('#pdfImagesContainer img')
540        if (allImages.length === 0) {
541          alert('No images to copy.')
542          return
543        }
544
545        try {
546          for (let imageElem of allImages) {
547            const imageResponse = await fetch(imageElem.src)
548            const imageBlob = await imageResponse.blob()
549            const clipboardItem = new ClipboardItem({
550              [imageBlob.type]: imageBlob,
551            })
552            await navigator.clipboard.write([clipboardItem])
553          }
554          alert('All images copied to clipboard!')
555        } catch (error) {
556          console.error('Error copying images:', error)
557          alert(
558            'Failed to copy all images. Your browser may not support this feature.',
559          )
560        }
561      }
562
563      async function downloadAllPdfImagesAsZip() {
564        const allImages = document.querySelectorAll('#pdfImagesContainer img')
565        if (allImages.length === 0) {
566          alert('No images to download.')
567          return
568        }
576          document.getElementById('currentWeekNumberText').textContent
577
578        for (let [index, imgElement] of allImages.entries()) {
579          const imageResponse = await fetch(imgElement.src)
580          const imageBlob = await imageResponse.blob()
581          const imageBuffer = await imageBlob.arrayBuffer()
582
583          // Retrieve the filename from the corresponding download button
589            `week-${finalWeekNumber}-page_${index + 1}.jpg`
590
591          zipArchive.file(fileName, imageBuffer)
592        }
593
594        zipArchive.generateAsync({ type: 'blob' }).then((zipFileBlob) => {
595          saveAs(zipFileBlob, `week-${finalWeekNumber}-images.zip`)
596        })
597      }

199      }
200
201      #imageButtonsContainer {
202        margin-top: 20px;
203      }
204
205      #imageButtonsContainer .btn {
206        width: 48%;
207        display: inline-block;
209      }
210
211      #imageButtonsContainer .btn:last-child {
212        margin-right: 0;
213      }
214
215      .singleImageContainer {
216        margin-bottom: 20px;
217        text-align: center;
221      }
222
223      .singleImageContainer img {
224        max-width: 100%;
225        height: auto;
229      }
230
231      .singleImageButtons {
232        margin-top: 10px;
233      }
234
235      .singleImageButtons button {
236        margin: 5px;
237        font-size: 0.9em;
337    <!-- Controls on the right -->
338    <div id="controlsContainer">
339      <div id="pdfImageControls" style="display: none;">
340        <h4>Image Controls:</h4>
341        <button
342          class="btn btn-success mt-2"
343          id="downloadZipButton"
344          onclick="downloadAllPdfImagesAsZip()"
345        >
346          Download All Images as ZIP
347        </button>
348
349        <!-- Image Buttons -->
350        <div id="imageButtonsContainer">
351          <button class="btn btn-info" onclick="copyAllPdfImagesToClipboard()">
352            Copy All Images to Clipboard
353          </button>
354          <button class="btn btn-warning" onclick="downloadAllPdfImagesAsZip()">
355            Download All Images
356          </button>
357        </div>
361    <!-- Main Content -->
362    <div id="mainContentContainer">
363      <div id="pdfImagesContainer">
364        <!-- Images will be inserted here -->
365      </div>
366    </div>
387    <script src="https://cdn.jsdelivr.net/npm/tesseract.js@4.0.3/dist/tesseract.min.js"></script>
388
389    <!-- JSZip library for zipping images -->
390    <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
391
579          const totalPages = loadedPdf.numPages
580
581          // Clear any previously displayed images
582          const pdfImagesContainer = document.getElementById(
583            'pdfImagesContainer',
584          )
585          pdfImagesContainer.innerHTML = ''
586
587          // Retrieve the current or selected week number
616
617            // Convert the canvas to a JPG data URL
618            const jpgDataUrl = tempCanvas.toDataURL('image/jpeg', 1.0)
619
620            // Perform OCR on the image using Tesseract.js
621            const ocrResult = await Tesseract.recognize(tempCanvas, 'eng', {
622              logger: (message) => console.log(message),
636            )
637
638            // Build the image container
639            const singleImageContainer = document.createElement('div')
640            singleImageContainer.className = 'singleImageContainer'
641
642            // Add the rendered image
643            const renderedImg = document.createElement('img')
644            renderedImg.src = jpgDataUrl
645            renderedImg.alt = `Page ${pageIndex}`
646
647            // Create a container for the image buttons
648            const singleImageButtonsDiv = document.createElement('div')
649            singleImageButtonsDiv.className = 'singleImageButtons'
650
651            // Copy Image Button
652            const copyImageButton = document.createElement('button')
653            copyImageButton.className = 'btn btn-info'
654            copyImageButton.textContent = 'Copy'
655            copyImageButton.onclick = () =>
656              copySingleImageToClipboard(renderedImg)
657
658            // Download Image Button
659            const downloadImageButton = document.createElement('button')
660            downloadImageButton.className = 'btn btn-warning'
661            downloadImageButton.textContent = 'Download'
662            // Construct filename based on name (if found) or page number
663            let fileNameToUse = `week_${finalWeekNumber}-page_${pageIndex}.jpg`
665              fileNameToUse = `week_${finalWeekNumber}-${extractedPersonName}.jpg`
666            }
667            downloadImageButton.setAttribute('data-filename', fileNameToUse)
668            downloadImageButton.onclick = () =>
669              downloadSingleImage(jpgDataUrl, fileNameToUse)
670
671            singleImageButtonsDiv.appendChild(copyImageButton)
672            singleImageButtonsDiv.appendChild(downloadImageButton)
673
674            // Optional button: Copy Pay Amount
679              copyPayAmountButton.onclick = () =>
680                copyTextToClipboard(extractedPayAmount)
681              singleImageButtonsDiv.appendChild(copyPayAmountButton)
682            }
683
684            // Append everything to the container
685            singleImageContainer.appendChild(renderedImg)
686            singleImageContainer.appendChild(singleImageButtonsDiv)
687            pdfImagesContainer.appendChild(singleImageContainer)
688          }
689
690          // Show image controls
691          document.getElementById('pdfImageControls').style.display = 'block'
692        } catch (error) {
693          console.error('Error loading PDF:', error)
749      }
750
751      function copySingleImageToClipboard(imageElement) {
752        fetch(imageElement.src)
753          .then((response) => response.blob())
754          .then((blob) => {
756            navigator.clipboard.write([clipboardItem]).then(
757              () => {
758                alert('Image copied to clipboard!')
759              },
760              (error) => {
761                alert('Failed to copy image: ' + error)
762              },
763            )
765      }
766
767      function downloadSingleImage(dataUrl, fileName) {
768        const hiddenLink = document.createElement('a')
769        hiddenLink.href = dataUrl
774      }
775
776      async function copyAllPdfImagesToClipboard() {
777        const allImages = document.querySelectorAll('#pdfImagesContainer img')
778        if (allImages.length === 0) {
779          alert('No images to copy.')
780          return
781        }
782
783        try {
784          for (let imageElem of allImages) {
785            const imageResponse = await fetch(imageElem.src)
786            const imageBlob = await imageResponse.blob()
787            const clipboardItem = new ClipboardItem({
788              [imageBlob.type]: imageBlob,
789            })
790            await navigator.clipboard.write([clipboardItem])
791          }
792          alert('All images copied to clipboard!')
793        } catch (error) {
794          console.error('Error copying images:', error)
795          alert(
796            'Failed to copy all images. Your browser may not support this feature.',
797          )
798        }
799      }
800
801      async function downloadAllPdfImagesAsZip() {
802        const allImages = document.querySelectorAll('#pdfImagesContainer img')
803        if (allImages.length === 0) {
804          alert('No images to download.')
805          return
806        }
814          document.getElementById('currentWeekNumberText').textContent
815
816        for (let [index, imgElement] of allImages.entries()) {
817          const imageResponse = await fetch(imgElement.src)
818          const imageBlob = await imageResponse.blob()
819          const imageBuffer = await imageBlob.arrayBuffer()
820
821          // Retrieve the filename from the corresponding download button
827            `week-${finalWeekNumber}-page_${index + 1}.jpg`
828
829          zipArchive.file(fileName, imageBuffer)
830        }
831
832        zipArchive.generateAsync({ type: 'blob' }).then((zipFileBlob) => {
833          saveAs(zipFileBlob, `week-${finalWeekNumber}-images.zip`)
834        })
835      }

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    );