Val Town Code SearchReturn to Val Town

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"

10  return new Response(svg, {
11    headers: {
12      "Content-Type": "image/svg+xml",
13    },
14  });

11  total_cache_write_tokens: number;
12  total_price: number;
13  total_images: number;
14  used_inference_data?: boolean;
15}
40              <th>Cache Write</th>
41              <th>Total Price</th>
42              <th>Images</th>
43            </tr>
44          </thead>
54                <td>${formatNumber(row.total_cache_write_tokens)} ${row.used_inference_data ? '<span class="badge badge-info" title="Using inference data">I</span>' : ''}</td>
55                <td class="price">${formatPrice(row.total_price)} ${row.used_inference_data ? '<span class="badge badge-info" title="Using inference data">I</span>' : ''}</td>
56                <td>${formatNumber(row.total_images)}</td>
57              </tr>
58            `).join("")}

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

9import { useUsageStats } from "../hooks/useUsageStats.ts";
10import { Messages } from "./Messages.tsx";
11import { InputBox, ImageDropContainer } from "./InputBox.tsx";
12import { PreviewFrame } from "./PreviewFrame.tsx";
13import { BranchSelect } from "./BranchSelect.tsx";
66  refetch: () => void;
67}) {
68  const [images, setImages] = useState<(string|null)[]>([]);
69  const [selectedFiles, setSelectedFiles] = useState<string[]>([]);
70  const { audio, user } = useContext(AppContext);
85    branchId,
86    selectedFiles,
87    images,
88    soundEnabled: audio,
89  });
109
110  return (
111    <ImageDropContainer
112      running={running}
113      images={images}
114      setImages={setImages}>
115      <div className="single-column-container">
116        <div className="single-sticky-header">
120            rel="norefferer"
121            className="block-link text-link lockup">
122            {project.imageUrl ? (
123              <img src={project.imageUrl} className="image-thumbnail" />
124            ) : user?.profileImageUrl ? (
125              <img
126                src={user.profileImageUrl}
127                className="avatar"
128                alt={user.username}
131              />
132            ) : (
133              <div className="image-placeholder" />
134            )}
135            <div>{project.name}</div>
178              onSubmit={e => {
179                handleSubmit(e);
180                setImages([]);
181              }}
182              onCancel={handleStop}
183              running={running}
184              error={error}
185              images={images}
186              setImages={setImages}
187            />
188          )}
190        </div>
191      </div>
192    </ImageDropContainer>
193  );
194}

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/`