Val Town Code SearchReturn to Val Town

48  user: {
49    username: string;
50    profileImageUrl: string|null;
51  };
52  project: any;
55    <div className="card">
56
57    {project.imageUrl ? (
58      <img src={project.imageUrl} className="card-image" />
59    ) : user.profileImageUrl ? (
60      <div className="card-image">
61        <img
62          src={user.profileImageUrl}
63          width="48"
64          height="48"
67      </div>
68    ) : (
69      <div className="card-image placeholder" />
70    )}
71      <div className="card-body">

2import { useRef, useState, useEffect } from "https://esm.sh/react@18.2.0?dev";
3import { PlusIcon, ArrowUpIcon, Square, XIcon } from "./icons.tsx";
4import { processFiles } from "../utils/images.ts";
5
6export function InputBox ({
11  running,
12  error,
13  images,
14  setImages,
15} : {
16  value: string;
20  running: boolean;
21  error: any;
22  images: (string|null)[];
23  setImages: (images: (string|null)[]) => void;
24}) {
25  const form = useRef(null);
57          autoFocus={true}
58        />
59        <ImageRow images={images} setImages={setImages} />
60        <div className="toolbar">
61          <UploadButton
62            disabled={running}
63            images={images}
64            setImages={setImages}
65          />
66          <div className="spacer" />
88}
89
90export function ImageDropContainer ({
91  images,
92  setImages,
93  running,
94  children,
95}: {
96  images: (string|null)[];
97  setImages: (images: (string|null)[]) => void;
98  running: boolean;
99  children: React.ReactNode;
100}) {
101  const dragging = useImageDrop({ images, setImages, running });
102
103  return (
105      {children}
106      {dragging && (
107        <div className="image-drop-overlay">
108          <div className="image-drop-inner">
109            Drop images here to upload
110          </div>
111        </div>
115}
116
117export function useImageDrop ({ images, setImages, running }: {
118  images: (string|null)[];
119  setImages(images: (string|null)[]) => void;
120  running: boolean;
121}) {
143    setDragging(false);
144    if (e.dataTransfer?.files && !running) {
145      processFiles(Array.from(e.dataTransfer.files), images, setImages);
146    }
147  }
164}
165
166function ImageRow ({ images, setImages }: {
167  images: (string|null)[];
168  setImages: (images: (string|null)[]) => void;
169}) {
170  return (
171    <div className="image-row">
172      {images.map((image, i) => (
173        <Thumbnail
174          key={i}
175          image={image}
176          onRemove={() => {
177            setImages([
178              ...images.slice(0, i),
179              ...images.slice(i + 1),
180            ]);
181          }}
186}
187
188function Thumbnail ({ image, onRemove }: {
189  image: string|null;
190  onRemove: () => void;
191}) {
192  if (!image) return null;
193
194  return (
195    <div className="input-image">
196      <img
197        src={image}
198        alt="User uploaded image"
199        className="image-thumbnail"
200      />
201      <button
202        type="button"
203        title="Remove image"
204        className="remove-image-button"
205        onClick={onRemove}
206      >
212
213function UploadButton ({
214  images,
215  setImages,
216  disabled,
217}: {
218  images: (string|null)[];
219  setImages: (images: (string|null)[]) => void;
220  disabled: boolean;
221}) {
226      <button
227        type="button"
228        title="Upload image"
229        disabled={disabled}
230        onClick={e => {
234        <PlusIcon />
235        <div className="sr-only">
236          Upload image
237        </div>
238      </button>
243        onChange={e => {
244          if (e.target.files) {
245            processFiles(Array.from(e.target.files), images, setImages);
246          }
247        }}

1
2export const PROMPT_IMAGE_LIMIT = 5;
3
4export const processFiles = async (files: File[], images: (string | null)[], setImages: (images: (string | null)[]) => void) => {
5  const imageFiles = files.filter(file => file.type.startsWith('image/'));
6  const filesToProcess = imageFiles.slice(0, PROMPT_IMAGE_LIMIT - images.filter(Boolean).length);
7
8  if (filesToProcess.length === 0) return;
9
10  const newImages = [...images, ...Array(filesToProcess.length).fill(null)];
11  setImages(newImages);
12
13  const processedImages = await Promise.all(
14    filesToProcess.map(async (file) => {
15      return await readFileAsDataURL(file);
17  );
18
19  const updatedImages = [...images];
20  processedImages.forEach((dataUrl, index) => {
21    updatedImages[images.length + index] = dataUrl;
22  });
23
24  setImages(updatedImages.slice(0, PROMPT_IMAGE_LIMIT));
25};
26
30    reader.onload = () => {
31      const result = reader.result as string;
32      console.log("Image loaded, size:", result.length, "bytes");
33      resolve(result);
34    };

13  return new Response(svg, {
14    headers: {
15      "Content-Type": "image/svg+xml",
16    },
17  });

10import { useUsageStats } from "../hooks/useUsageStats.ts";
11import { Messages } from "./Messages.tsx";
12import { InputBox, ImageDropContainer } from "./InputBox.tsx";
13import { PreviewFrame } from "./PreviewFrame.tsx";
14import { BranchSelect } from "./BranchSelect.tsx";
64}) {
65  const { token, anthropicApiKey } = useAuth();
66  const [images, setImages] = useState<(string|null)[]>([]);
67  const [selectedFiles, setSelectedFiles] = useState<string[]>([]);
68  const { audio } = useContext(AppContext);
84    bearerToken: token,
85    selectedFiles,
86    images,
87    soundEnabled: audio,
88  });
108
109  return (
110    <ImageDropContainer
111      running={running}
112      images={images}
113      setImages={setImages}>
114      <div
115        className="chat-container container">
131              onSubmit={e => {
132                handleSubmit(e);
133                setImages([]);
134              }}
135              onCancel={handleStop}
136              running={running}
137              error={error}
138              images={images}
139              setImages={setImages}
140            />
141          </div>
149                rel="norefferer"
150                className="block-link text-link lockup">
151                {project.imageUrl ? (
152                  <img src={project.imageUrl} className="image-thumbnail" />
153                ) : (
154                  <div className="image-placeholder" />
155                )}
156                <div>
173      </div>
174      <pre hidden>{JSON.stringify(messages, null, 2)}</pre>
175    </ImageDropContainer>
176  );
177}

69```
70
71## Images
72
73```markdown
74![Alt text](image-url.jpg)
75![Alt text](image-url.jpg "Image title")
76```
77

13## Example
14This val tracks mentions of "Val Town" and related terms on Reddit, filtering results from the last 7 days and sending alerts to a Discord webhook. 
15![Screenshot 2025-01-10 at 5.13.16 PM.png](https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/beecb766-824e-4672-8393-3abd2edb1c00/public)
16
17---
21### 1. Fork this Val
22To start using this template, fork this val by clicking the fork button at the top-right corner of the page.
23![Screenshot 2025-01-10 at 1.22.10 PM.png](https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/c4ae349d-7e28-4378-8646-21c8958e1f00/public)
24
25---
26### 2. View Source Code
27<em>The `CODE` box shows you the the full source code of this val, you may need to scroll down to see it.</em>
28![image.png](https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/6a4dabb4-3b27-4cea-fce3-95a1a1c3cd00/public)
29
30---

4
5export default function App() {
6  const [imageSrc, setImageSrc] = useState<string | null>(null);
7  const [ready, setReady] = useState(false);
8
9  // Canvas refs
10  const baseCanvas = useRef<HTMLCanvasElement>(null); // shows uploaded image
11  const drawCanvas = useRef<HTMLCanvasElement>(null); // red overlay for drawing
12  const maskCanvas = useRef<HTMLCanvasElement>(null); // hidden, true mask (white bg, transparent strokes)
20    const reader = new FileReader();
21    reader.onload = () => {
22      setImageSrc(reader.result as string);
23      setReady(false); // will flip true once image is loaded
24    };
25    reader.readAsDataURL(file);
26  };
27
28  /** Once imageSrc changes, draw it onto baseCanvas and size all canvases */
29  useEffect(() => {
30    if (!imageSrc) return;
31    const img = new Image();
32    img.src = imageSrc;
33    img.onload = () => {
34      const { width, height } = img;
39      });
40
41      // Draw uploaded image
42      baseCanvas.current!.getContext("2d")!.drawImage(img, 0, 0);
43
44      // Prepare mask canvas: opaque white everywhere to start
50      setReady(true);
51    };
52  }, [imageSrc]);
53
54  /* Helper: convert pointer to canvas coords */
126    const link = document.createElement("a");
127    link.download = "mask.png";
128    link.href = maskCanvas.current!.toDataURL("image/png");
129    link.click();
130  };
144      <h1>OpenAI In-painting Mask Editor</h1>
145
146      <input type="file" accept="image/*" onChange={onFileChange} />
147
148      {imageSrc && (
149        <div
150          style={{
168      )}
169
170      {imageSrc && (
171        <div style={{ marginTop: 12 }}>
172          <button onClick={clearMask}>Clear Mask</button>
184        correspond to your strokes – exactly what{" "}
185        <a
186          href="https://platform.openai.com/docs/guides/image-generation#mask-requirements"
187          target="_blank"
188          rel="noopener noreferrer"

9  // - data (string)
10  // - type (string)
11  // - image (data url string)
12
13  // sanity checks:
15  // - data, hmm this needs to be long i guess.. maybe some crazy upper limit sanity check though
16  // - type, not too long
17  // - image, not toooo large a file size
18  let body;
19  try {
26  const data = body.data;
27  const type = body.type;
28  const image = body.image;
29
30  // Sanity checks
38  }
39
40  if (image.length > 20 * 1024 * 1024) {
41    return Response.json({ ok: false, error: "Thumbnail too large" });
42  }
58  );
59
60  await blob.set("pondiverse_image" + id.lastInsertRowid, image);
61  return Response.json({ ok: true });
62}

9      data TEXT,
10      type TEXT,
11      image TEXT,
12      time DATETIME NOT NULL,
13      hidden BOOLEAN