Val Town Code SearchReturn to Val Town

172
173- **Redirects:** Use `return new Response(null, { status: 302, headers: { Location: "/place/to/redirect" }})` instead of `Response.redirect` which is broken
174- **Images:** Avoid external images or base64 images. Use emojis, unicode symbols, or icon fonts/libraries instead
175- **AI Image:** To inline generate an AI image use: `<img src="https://maxm-imggenurl.web.val.run/the-description-of-your-image" />`
176- **Storage:** DO NOT use the Deno KV module for storage
177- **Browser APIs:** DO NOT use the `alert()`, `prompt()`, or `confirm()` methods

782  background-color: var(--highlight);
783}
784.card-image {
785  display: flex;
786  align-items: center;
809}
810
811.image-placeholder,
812.image-thumbnail {
813  flex-shrink: 0;
814  width: 40px;
817  object-fit: cover;
818}
819.image-placeholder {
820  background-color: var(--muted);
821}
828}
829
830.image-row {
831  display: flex;
832  gap: var(--space-1);
833}
834.input-image {
835  position: relative;
836  border: 1px solid var(--muted);
837  border-radius: 6px;
838}
839.remove-image-button {
840  position: absolute;
841  top: 0;
850  opacity: 0;
851}
852.input-image:hover .remove-image-button {
853  opacity: 1;
854}
855
856.image-drop-overlay {
857  position: fixed;
858  top: 0;
867  justify-content: center;
868}
869.image-drop-inner {
870  padding: var(--space-2);
871  background-color: var(--background);
872}
873
874.transition, .input-box, .icon-button, .button, .remove-image-button {
875  transition-property: color, background-color, border-color, opacity;
876  transition-duration: 200ms;

33  }
34
35  const { messages, project, branchId, anthropicApiKey, selectedFiles, images } = await c.req.json();
36
37  // do we want to allow user-provided tokens still
63    branch_id: branchId,
64    val_id: project.id,
65    num_images: images?.length || 0,
66    model: "claude-3-7-sonnet-20250219",
67  });
73  let coreMessages = convertToCoreMessages(messages);
74
75  // If there are images, we need to add them to the last user message
76  if (images && Array.isArray(images) && images.length > 0) {
77    // Find the last user message
78    const lastUserMessageIndex = coreMessages.findIndex(
96      };
97
98      // Add each image to the content array using the correct ImagePart format
99      for (const image of images) {
100        if (image && image.url) {
101          // Extract mime type from data URL if available
102          let mimeType = undefined;
103          if (image.url.startsWith("data:")) {
104            const matches = image.url.match(/^data:([^;]+);/);
105            if (matches && matches.length > 1) {
106              mimeType = matches[1];
109
110          newUserMessage.content.push({
111            type: "image",
112            image: image.url,
113            mimeType,
114          });

18  price?: number;
19  finish_reason?: string;
20  num_images?: number;
21  our_api_token: boolean;
22}
43      price REAL,
44      finish_reason TEXT,
45      num_images INTEGER,
46      our_api_token INTEGER NOT NULL,
47      finish_timestamp INTEGER

16  price: number | null;
17  finish_reason: string | null;
18  num_images: number | null;
19  our_api_token: number;
20}
191              <th>Price</th>
192              <th>Finish</th>
193              <th>Images</th>
194              <th>Our API</th>
195            </tr>
215                <td class="price">${formatPrice(row.price)}</td>
216                <td>${row.finish_reason || '-'}</td>
217                <td>${formatNumber(row.num_images)}</td>
218                <td>${formatBoolean(row.our_api_token)}</td>
219              </tr>

111  model,
112  our_api_token,
113  num_images,
114}: {
115  bearerToken: string;
118  model: string;
119  our_api_token: boolean;
120  num_images: number;
121}) {
122  const user = await getUser(bearerToken);
130      model,
131      our_api_token,
132      num_images
133      ) VALUES (?, ?, ?, ?, ?, ?, ?, ?)
134      `,
141      model,
142      our_api_token ? 1 : 0,
143      num_images,
144    ],
145  );

43  user: {
44    username: string;
45    profileImageUrl: string | null;
46  };
47  project: any;
49  return (
50    <div className="card">
51      {project.imageUrl ? (
52        <img src={project.imageUrl} className="card-image" />
53      ) : user.profileImageUrl ? (
54        <div className="card-image">
55          <img
56            src={user.profileImageUrl}
57            width="48"
58            height="48"
61        </div>
62      ) : (
63        <div className="card-image placeholder" />
64      )}
65      <div className="card-body">

2import { useRef, useState, useEffect } from "react";
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    };

33        <button className="h6">Log out</button>
34      </form>
35      {user?.profileImageUrl && (
36        <img
37          src={user.profileImageUrl}
38          alt={user.username}
39          width="32"