Val Town Code SearchReturn to Val Town

57    return new Response(svg, {
58      headers: {
59        "Content-Type": "image/svg+xml",
60        "Cache-Control": "no-store, no-cache, must-revalidate, proxy-revalidate",
61        "Pragma": "no-cache",

41    return new Response(svg, {
42      headers: {
43        "Content-Type": "image/svg+xml",
44        "Cache-Control": "public, max-age=86400",
45        "Access-Control-Allow-Origin": "*"

24
25redirects.set("/avatar", "https://jxnblk-avatar.web.val.run/");
26redirects.set("/images/avatar.png", "https://jxnblk-avatar.web.val.run/");
27redirects.set("/avatar.png", "https://jxnblk-avatar.web.val.run/");
28

158/* Hero Section Styles */
159.hero-section {
160  background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url('https://maxm-imggenurl.web.val.run/disneyland-castle-at-night-with-purple-lighting');
161  background-size: cover;
162  background-position: center;

25  return new Response(svgContent, {
26    headers: {
27      "Content-Type": "image/svg+xml",
28      "Cache-Control": "public, max-age=86400",
29      "Access-Control-Allow-Origin": "*"

12- If a section of code that you're working on is getting too complex, consider refactoring it into subcomponents
13
14## Image Handling
15
16- When users upload images, carefully analyze them to understand their content
17- Reference specific details from the images in your responses
18- If multiple images are uploaded, consider their relationship to each other
19- For code-related images (screenshots, diagrams), extract relevant information and incorporate it into your solutions
20- For UI mockups or design images, use them as reference for layout and design, use the colors from the image
21- When images contain text or code, transcribe relevant portions as needed
22- If image content is unclear, ask clarifying questions about what the user wants you to focus on
23
24## Technical Requirements
95## Val Town Platform Specifics
96- **Redirects:** Use `return new Response(null, { status: 302, headers: { Location: "/place/to/redirect" }})` instead of `Response.redirect` which is broken
97- **Images:** Avoid external images or base64 images. Use emojis, unicode symbols, or icon fonts/libraries instead
98- For AI-generated images, use: `https://maxm-imggenurl.web.val.run/the-description-of-your-image`
99- **Storage:** DO NOT use the Deno KV module for storage
100- **Browser APIs:** DO NOT use the `alert()`, `prompt()`, or `confirm()` methods

2import React, { useRef, useState } from "https://esm.sh/react@18.2.0?dev";
3
4// Maximum number of images that can be uploaded
5export const PROMPT_IMAGE_LIMIT = 5;
6
7interface ImageUploadProps {
8  images: (string | null)[];
9  setImages: (images: (string | null)[]) => void;
10}
11
12export function ImageUpload({ images, setImages }: ImageUploadProps) {
13  const fileInputRef = useRef<HTMLInputElement>(null);
14  const [isDragging, setIsDragging] = useState(false);
23  // Process the selected files
24  const processFiles = async (files: File[]) => {
25    // Filter for image files only
26    const imageFiles = files.filter(file => file.type.startsWith('image/'));
27    
28    // Limit the number of images
29    const filesToProcess = imageFiles.slice(0, PROMPT_IMAGE_LIMIT - images.filter(Boolean).length);
30    
31    if (filesToProcess.length === 0) return;
32
33    // Add null placeholders for loading state
34    const newImages = [...images, ...Array(filesToProcess.length).fill(null)];
35    setImages(newImages);
36
37    // Process each file
38    const processedImages = await Promise.all(
39      filesToProcess.map(async (file) => {
40        return await readFileAsDataURL(file);
42    );
43
44    // Replace null placeholders with actual images
45    const updatedImages = [...images];
46    processedImages.forEach((dataUrl, index) => {
47      updatedImages[images.length + index] = dataUrl;
48    });
49    
50    setImages(updatedImages.slice(0, PROMPT_IMAGE_LIMIT));
51  };
52
57      reader.onload = () => {
58        const result = reader.result as string;
59        console.log("Image loaded, size:", result.length, "bytes");
60        resolve(result);
61      };
93  };
94
95  // Handle removing an image
96  const removeImage = (index: number) => {
97    const newImages = [...images];
98    newImages.splice(index, 1);
99    setImages(newImages);
100  };
101
102  // Check if we've reached the image limit
103  const isAtLimit = images.filter(Boolean).length >= PROMPT_IMAGE_LIMIT;
104
105  return (
106    <div className="w-full">
107      {/* Image previews */}
108      {images.length > 0 && (
109        <div className="flex flex-wrap gap-2 mb-2">
110          {images.map((image, index) => (
111            <div key={index} className="relative">
112              {image ? (
113                <div className="relative group">
114                  <img 
115                    src={image} 
116                    alt={`Uploaded ${index + 1}`} 
117                    className="h-16 w-16 object-cover rounded border border-gray-300"
119                  <button
120                    className="absolute top-0 right-0 bg-red-500 text-white rounded-full w-5 h-5 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity"
121                    onClick={() => removeImage(index)}
122                    title="Remove image"
123                  >
124                    ×
151            ref={fileInputRef}
152            onChange={handleFileChange}
153            accept="image/*"
154            multiple
155            className="hidden"
157          <div className="text-sm text-gray-500">
158            {isDragging ? (
159              "Drop images here"
160            ) : (
161              <>
162                <span className="text-blue-500">Upload images</span> or drag and drop
163                <div className="text-xs mt-1">
164                  {images.filter(Boolean).length}/{PROMPT_IMAGE_LIMIT} images
165                </div>
166              </>
173}
174
175// Component to display images in messages
176export function ImagePreview({ images }: { images: string[] }) {
177  const [expandedImage, setExpandedImage] = useState<string | null>(null);
178
179  if (!images || images.length === 0) return null;
180
181  return (
182    <div className="mt-2">
183      <div className="flex flex-wrap gap-2">
184        {images.map((image, index) => (
185          <div key={index} className="relative">
186            <img
187              src={image}
188              alt={`Image ${index + 1}`}
189              className="max-h-32 max-w-32 object-contain rounded cursor-pointer"
190              onClick={() => setExpandedImage(image)}
191            />
192          </div>
194      </div>
195
196      {/* Modal for expanded image */}
197      {expandedImage && (
198        <div 
199          className="fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center z-50"
200          onClick={() => setExpandedImage(null)}
201        >
202          <div className="max-w-[90%] max-h-[90%]">
203            <img
204              src={expandedImage}
205              alt="Expanded view"
206              className="max-w-full max-h-full object-contain"

5  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6  <title>MD Crawl - Website to Markdown Crawler</title>
7  <link rel="icon" href="/public/favicon.svg" type="image/svg+xml">
8  <script src="https://cdn.twind.style" crossorigin></script>
9  <script src="https://esm.town/v/std/catch"></script>

84  // Handle downloading the SVG
85  const handleDownload = () => {
86    const blob = new Blob([svgContent], { type: 'image/svg+xml' });
87    const url = URL.createObjectURL(blob);
88    const a = document.createElement('a');
95  };
96
97  // Image to SVG conversion
98  const handleImageToSvg = (imageDataUrl: string) => {
99    // Create a placeholder SVG that embeds the image
100    // This is a simple embedding, not a true vector conversion
101    const imgSvg = `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 800 600">
102  <image href="${imageDataUrl}" width="100%" height="100%" />
103</svg>`;
104    

4import React, { useEffect, useRef, useState } from "https://esm.sh/react@18.2.0?dev";
5import { playBellSound } from "../utils/soundEffects.ts";
6import { ImageUpload, PROMPT_IMAGE_LIMIT } from "./ImageUpload.tsx";
7import { MessagePart } from "./MessagePart.tsx";
8import { SvgEditor } from "./SvgEditor.tsx";
22  const [usages, setUsages] = useState<Record<string, any>>({});
23  const [soundEnabled, setSoundEnabled] = useLocalStorage<boolean>("soundEnabled", true);
24  const [images, setImages] = useState<(string | null)[]>([]);
25  const [currentSvg, setCurrentSvg] = useState<string>("");
26  const [showSvgEditor, setShowSvgEditor] = useState<boolean>(true);
63      project,
64      anthropicApiKey,
65      images: images
66        .filter((img): img is string => {
67          // Make sure it's a string and a valid data URL
68          const isValid = typeof img === "string" && img.startsWith("data:");
69          if (!isValid && img !== null) {
70            console.warn("Invalid image format:", img?.substring(0, 50) + "...");
71          }
72          return isValid;
102  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
103    e.preventDefault();
104    const validImages = images.filter((img): img is string => typeof img === "string");
105    console.log("Submitting with images:", validImages);
106    if (input.trim() || validImages.length > 0) {
107      originalHandleSubmit(e);
108      setImages([]);
109    }
110  };
253          onSubmit={handleSubmit}
254        >
255          {(images.length > 0 || !running) && <ImageUpload images={images} setImages={setImages} />}
256
257          <div className="flex gap-2">
268                  if (e.key === "Enter" && !e.shiftKey && !isMobile) {
269                    e.preventDefault();
270                    if (input.trim() || images.filter(Boolean).length > 0) {
271                      handleSubmit(e as any);
272                    }
291                    }
292                  }}
293                  title="Attach images"
294                >
295                  📎