Val Town Code SearchReturn to Val Town

3
4/**
5 * Dither the image into a smaller palette
6 * Very fast dithering
7 * Use twoRowSierra for more accuracy
15  let i = 0;
16  // pixels is an array of pixels with r, g, b values
17  // width is the width of the image in pixels
18  while (i < (pixels.length)) {
19    const newC = findClosestColor(pixels[i], palette);
52
53/**
54 * Dither the image into monochrome
55 * Uses Floyd-Steinberg matrix
56 */
58  let i = 0;
59  // pixels is an array of pixels with r, g, b values
60  // width is the width of the image in pixels
61  while (i < (pixels.length)) {
62    // We shall use "black" and "white" as our quantized palette

6import {
7  createCanvas,
8  loadImage,
9} from "https://deno.land/x/canvas@v1.4.2/mod.ts";
10import { Image } from "./structures/image.ts";
11
12export async function getPixels(path: string) {
13  const data = /https?:\/\/.+/.test(path)
14    ? await getImageFromWeb(path)
15    : await getImageFromLocal(path);
16  const image = await loadImage(data.data);
17
18  const canvas = createCanvas(image.width(), image.height());
19
20  const ctx = canvas.getContext("2d");
21
22  ctx.drawImage(image, 0, 0, canvas.width, canvas.height);
23  const d = ctx.getImageData(0, 0, canvas.width, canvas.height).data;
24  return new Image(d, canvas.width, canvas.height)
25}
26
27async function getImageFromWeb(path: string) {
28  const res = await fetch(path);
29  if (res.ok) {
34      mediaType,
35    };
36  } else throw new Error("Unable to load image.");
37}
38
39async function getImageFromLocal(path: string) {
40  try {
41    const data = await Deno.readFile(path);
48    };
49  } catch (_e) {
50    throw new Error("Unable to load image.");
51  }
52}

2import { findClosestColor } from "./closest.ts";
3
4/** Recolor the image without dithering */
5export function recolor(
6  pixels: Color[],
9  let i = 0;
10  // pixels is an array of pixels with r, g, b values
11  // width is the width of the image in pixels
12  while (i < (pixels.length)) {
13    const newC = findClosestColor(pixels[i], palette);

3
4/**
5 * Dither the image into a smaller palette
6 * Uses a quick, two-row dither.
7 * Creates a column pattern. Use Floyd-Steinberg 
16  const twoW = width << 2;
17  // pixels is an array of pixels with r, g, b values
18  // width is the width of the image in pixels
19  while (i >= 0) {
20    const newC = findClosestColor(pixels[i], palette);
75
76/**
77 * Dither the image into a smaller palette
78 * Starts from the mid point of the image
79 * I have no idea why I did this
80 */
133  }
134  // pixels is an array of pixels with r, g, b values
135  // width is the width of the image in pixels
136  while (i > 0) {
137    const newC = findClosestColor(pixels[i], palette);
184
185/**
186 * Dither the image into monochrome
187 * Uses the same matrix as above
188 */
192
193  // pixels is an array of pixels with r, g, b values
194  // width is the width of the image in pixels
195  while (i >= 0) {
196    // We shall use "black" and "white" as our quantized palette

24export type BlurType = "box";
25
26export interface ImageData {
27  data: Uint8ClampedArray;
28  width: number;
33
34/**
35 * Image with width, height, and pixel data
36 * All methods mutate the image itself
37 */
38export class Image implements ImageData {
39  pixels: Color[];
40  width: number;
41  height: number;
42  /** Canvas ImageData always returns RGBA values */
43  channels = 4;
44  /** We are only gonna work with sRGB images */
45  colorSpace: "srgb" = "srgb";
46  constructor(pixels: Uint8ClampedArray, width: number, height?: number) {
67    }
68  }
69  /** Blur the image. Currently only supports box blur. */
70  blur(method: BlurType) {
71    switch (method) {
79    }
80  }
81  /** Recolor the image with dithering */
82  dither(
83    palette: Color[],
110    }
111  }
112  /** Make the image grayscale */
113  grayscale(): void {
114    let i = 0;
118    }
119  }
120  /** Invert colors in the image */
121  invert(): void {
122    let i = 0;
126    }
127  }
128  /** Apply a function on every pixel in the image */
129  map(fn: (c: Color) => Color): void {
130    let i = 0;
134    }
135  }
136  /** Recolor the image using just black and white */
137  monochrome(
138    dither = false,
145    } else this.recolor([new Color("#000000"), new Color("#ffffff")]);
146  }
147  /** Recolor the image without dithering */
148  recolor(palette: Color[]) {
149    recolor(this.pixels, palette);
150  }
151  /** Convert to an ImageData object */
152  toImageData(): ImageData {
153    return {
154      data: this.data,
174    return data;
175  }
176  /** Get a Uint8ClampedArray of the grayscale image with RGBA values */
177  get grayscaleData(): Uint8ClampedArray {
178    const data = new Uint8ClampedArray(this.pixels.length);

1# monke
2
3An image-related module in TypeScript.
4
5Check https://deno.land/x/monke/mod.ts for documentation.
7
8Supports:
9- Recoloring an image with a different palette
10- Recoloring an image with dithering
11- Quantizing a palette
12- Image filters (blur, grayscale, invert, etc)
13
14~~Provides a class `Color` for general color-related stuff.~~

7export * from "./dither/mod.ts";
8
9export * from "./structures/image.ts";
10
11// For backwards compat. TODO: Remove soon

6    <title>React Hono Val Town Starter</title>
7    <link rel="stylesheet" href="/public/style.css">
8    <link rel="icon" href="/public/favicon.svg" sizes="any" type="image/svg+xml">
9  </head>
10  <body>

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  processFiles: (files: File[]) => void;
11}
12
13export function ImageUpload({ images, setImages, processFiles }: ImageUploadProps) {
14  const fileInputRef = useRef<HTMLInputElement>(null);
15
21  };
22
23  // Handle removing an image
24  const removeImage = (index: number) => {
25    const newImages = [...images];
26    newImages.splice(index, 1);
27    setImages(newImages);
28  };
29
30  // Check if we've reached the image limit
31  const isAtLimit = images.filter(Boolean).length >= PROMPT_IMAGE_LIMIT;
32
33  return (
34    <div className="w-full">
35      {/* Image previews */}
36      {images.length > 0 && (
37        <div className="flex flex-wrap gap-2 mb-2">
38          {images.map((image, index) => (
39            <div key={index} className="relative">
40              {image ? (
41                <div className="relative group">
42                  <img 
43                    src={image} 
44                    alt={`Uploaded ${index + 1}`} 
45                    className="h-16 w-16 object-cover rounded border border-gray-300"
47                  <button
48                    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"
49                    onClick={() => removeImage(index)}
50                    title="Remove image"
51                  >
52                    ×
68        ref={fileInputRef}
69        onChange={handleFileChange}
70        accept="image/*"
71        multiple
72        className="hidden"
80
81// Process files utility function - moved from the component to be reusable
82export const processFiles = async (files: File[], images: (string | null)[], setImages: (images: (string | null)[]) => void) => {
83  // Filter for image files only
84  const imageFiles = files.filter(file => file.type.startsWith('image/'));
85  
86  // Limit the number of images
87  const filesToProcess = imageFiles.slice(0, PROMPT_IMAGE_LIMIT - images.filter(Boolean).length);
88  
89  if (filesToProcess.length === 0) return;
90
91  // Add null placeholders for loading state
92  const newImages = [...images, ...Array(filesToProcess.length).fill(null)];
93  setImages(newImages);
94
95  // Process each file
96  const processedImages = await Promise.all(
97    filesToProcess.map(async (file) => {
98      return await readFileAsDataURL(file);
100  );
101
102  // Replace null placeholders with actual images
103  const updatedImages = [...images];
104  processedImages.forEach((dataUrl, index) => {
105    updatedImages[images.length + index] = dataUrl;
106  });
107  
108  setImages(updatedImages.slice(0, PROMPT_IMAGE_LIMIT));
109};
110
115    reader.onload = () => {
116      const result = reader.result as string;
117      console.log("Image loaded, size:", result.length, "bytes");
118      resolve(result);
119    };
123};
124
125// Component to display images in messages
126export function ImagePreview({ images }: { images: string[] }) {
127  const [expandedImage, setExpandedImage] = useState<string | null>(null);
128
129  if (!images || images.length === 0) return null;
130
131  return (
132    <div className="mt-2">
133      <div className="flex flex-wrap gap-2">
134        {images.map((image, index) => (
135          <div key={index} className="relative">
136            <img
137              src={image}
138              alt={`Image ${index + 1}`}
139              className="max-h-32 max-w-32 object-contain rounded cursor-pointer"
140              onClick={() => setExpandedImage(image)}
141            />
142          </div>
144      </div>
145
146      {/* Modal for expanded image */}
147      {expandedImage && (
148        <div 
149          className="fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center z-50"
150          onClick={() => setExpandedImage(null)}
151        >
152          <div className="max-w-[90%] max-h-[90%]">
153            <img
154              src={expandedImage}
155              alt="Expanded view"
156              className="max-w-full max-h-full object-contain"

9import { ChatInput } from "./ChatInput.tsx";
10import { ApiKeyWarning } from "./ApiKeyWarning.tsx";
11import { processFiles } from "./ImageUpload.tsx";
12
13export function Chat({
25  const [soundEnabled, setSoundEnabled] = useLocalStorage<boolean>("soundEnabled", true);
26  const [selectedFiles, setSelectedFiles] = useState<string[]>([]);
27  const [images, setImages] = useState<(string | null)[]>([]);
28  const [isDragging, setIsDragging] = useState(false);
29
59    bearerToken,
60    selectedFiles,
61    images,
62    soundEnabled,
63  });
94    
95    if (e.dataTransfer.files && !running) {
96      processFiles(Array.from(e.dataTransfer.files), images, setImages);
97    }
98  };
124      
125      if (e.dataTransfer?.files && !running) {
126        processFiles(Array.from(e.dataTransfer.files), images, setImages);
127      }
128    };
141      document.removeEventListener('drop', handleDocumentDrop);
142    };
143  }, [images, running, setImages]);
144
145  return (
184          handleSubmit={handleSubmit}
185          running={running}
186          images={images}
187          setImages={setImages}
188          isDragging={isDragging}
189        />