Val Town Code SearchReturn to Val Town

105- 'name': The character race/type name (e.g., Elf, Cyborg, Star Pilot). Be creative.
106- 'description': A brief description (1-2 sentences max).
107- 'styleHint': 3-5 descriptive keywords for image generation (e.g., "steampunk robot, gears, brass", "mystical elf, ancient forest, glowing runes").
108- 'effectColor': A hex color code (#RRGGBB format) that fits the character's theme.
109- 'borderAnimationHint': OPTIONAL. A single keyword: 'shimmer', 'pulse', or 'none'. Default to 'none'.
110- 'maskSrc': OPTIONAL. A URL to a subtle, tileable black and white texture/pattern image (like from transparenttextures.com) suitable for a holographic overlay mask (multiply blend). Ensure it's a direct image URL (e.g., ending in .png). If unsure, omit this property (a default will be used).
111
112Return STRICTLY as a single JSON object: { "races": [ { race1 }, { race2 }, ... ] }. No introductory text or explanations outside the JSON structure.`;
282    }
283
284    /* <<< Holographic Content Area (The Image Section) >>> */
285    .holographic-content {
286      position: relative; /* Containing block for overlays */
304    }
305
306    /* Base Image within Holo Wrapper */
307    .holographic-content > img {
308      display: block;
314      border-radius: inherit; /* Inherit top radius */
315      background-color: #2a2a2e; /* Placeholder BG */
316      pointer-events: none; /* Prevent image dragging */
317    }
318
324      height: 100%;
325      pointer-events: none;
326      z-index: 2; /* Above base image */
327      border-radius: inherit; /* Match top radius */
328      background-size: 180% 180%; /* Zoomed gradient for movement */
345      mix-blend-mode: color-dodge; /* The key shine effect */
346      opacity: var(--holo-gradient-opacity); /* Control intensity */
347      z-index: 3; /* Above base image, below mask */
348      /* background-image is set dynamically via JS per card */
349    }
350
365      pointer-events: none;
366    }
367    .mask img { /* Style the actual image inside the mask container */
368        display: block;
369        width: 100%;
370        height: 100%;
371        object-fit: cover; /* Cover the container */
372        opacity: 0.6; /* Make texture image itself slightly transparent */
373        background: transparent !important; /* Ensure no bg color interferes */
374        border-radius: inherit;
439    /* Border Animations */
440    @keyframes border-shimmer { /* Needs careful gradient stops */
441        0%   { border-image-source: linear-gradient(90deg,  transparent 0%, rgba(from var(--effect-color) r g b / 0) 10%, var(--effect-color) 50%, rgba(from var(--effect-color) r g b / 0) 90%, transparent 100%); }
442        50%  { border-image-source: linear-gradient(90deg,  transparent 0%, rgba(from var(--effect-color) r g b / 0) 40%, var(--effect-color) 90%, rgba(from var(--effect-color) r g b / 0) 100%, transparent 100%); }
443        100% { border-image-source: linear-gradient(90deg,  transparent 0%, rgba(from var(--effect-color) r g b / 0) 10%, var(--effect-color) 50%, rgba(from var(--effect-color) r g b / 0) 90%, transparent 100%); }
444    }
445    @keyframes border-pulse {
450        border-width: 2px;
451        border-style: solid;
452        border-image-slice: 1;
453        /* border-image-source set by keyframes */
454        animation: border-shimmer var(--border-anim-duration) linear infinite;
455    }
468        flex-grow: 1; /* Take remaining space */
469        position: relative;
470        z-index: 5; /* Above base image/overlays */
471        background: inherit; /* Inherit card background */
472        border-radius: 0 0 18px 18px; /* Match card bottom radius */
537        #carousel-container { height: var(--card-height-desktop); }
538        .race-card { width: var(--card-width-desktop); height: var(--card-height-desktop); min-height: 0; }
539        .holographic-content { height: 300px; } /* Fixed height for image area on desktop */
540        .race-card .card-content { padding: 25px; gap: 15px; }
541        .race-card h3 { font-size: 26px; }
592  const HOLOGRAPHIC_CONTENT_CLASS = 'holographic-content';
593  const SPECULAR_LAYER_CLASS = 'specular';
594  const MASK_LAYER_CLASS = 'mask'; // The container div for the mask image
595  const SHADER_LAYER_CLASS = 'shader-layer'; // Common class for specular/mask layers
596
674      card.style.setProperty('--effect-color', safeEffectColor);
675
676      // --- Image Generation URL ---
677      // Using maxm-imggenurl service example - adapt if needed
678      const prompt = encodeURIComponent(\`professional character portrait, centered composition, detailed illustration, \${safeStyleHint}, \${safeName}, cinematic lighting, high fantasy art style\`);
679      const imageUrl = \`https://maxm-imggenurl.web.val.run/\${prompt}.jpg\`;
680      const fallbackColor = safeEffectColor.substring(1); // Use effect color for placeholder
681      const fallbackUrl = \`https://placehold.co/350x300/\${fallbackColor}/1A1A1E?text=\${encodeURIComponent(safeName)}\`; // Placeholder uses image area dimensions
682
683      // --- Holographic Gradient ---
686
687      // --- Card Inner HTML Structure ---
688       // <<< Structure includes holographic content area with base image, specular layer, and mask layer >>>
689      card.innerHTML = \`
690        <div class="\${HOLOGRAPHIC_CONTENT_CLASS}">
691          <img src="\${imageUrl}" alt="Image of \${safeName}" loading="lazy" onerror="this.onerror=null; this.src='\${fallbackUrl}'; console.warn('Image failed for \${safeName}. Using fallback.');">
692
693          <div class="\${SPECULAR_LAYER_CLASS} \${SHADER_LAYER_CLASS}" style="background-image: \${specularGradient};">
694              \${useMaskSrc ? \`<div class="\${MASK_LAYER_CLASS}"><img src="\${useMaskSrc}" alt="" loading="lazy" onerror="this.parentElement.style.display='none'; console.warn('Mask image failed for \${safeName}');"></div>\` : ''}
695          </div>
696        </div>
941    if (!holoContent) return; // Should always exist, but check anyway
942
943    const rect = holoContent.getBoundingClientRect(); // Get bounds of the image area
944
945    // Calculate mouse position relative to the holographic content area

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