Val Town Code SearchReturn to Val Town

682  background-color: var(--highlight);
683}
684.card-image {
685  display: flex;
686  align-items: center;
704}
705
706.image-placeholder,
707.image-thumbnail {
708  width: 40px;
709  height: 40px;
711  object-fit: cover;
712}
713.image-placeholder {
714  background-color: var(--muted);
715}
722}
723
724.image-row {
725  display: flex;
726  gap: var(--space-1);
727}
728.input-image {
729  position: relative;
730  border: 1px solid var(--muted);
731  border-radius: 6px;
732}
733.remove-image-button {
734  position: absolute;
735  top: 0;
744  opacity: 0;
745}
746.input-image:hover .remove-image-button {
747  opacity: 1;
748}
749
750.image-drop-overlay {
751  position: fixed;
752  top: 0;
761  justify-content: center;
762}
763.image-drop-inner {
764  padding: var(--space-2);
765  background-color: var(--background);
766}
767
768.transition, .input-box, .icon-button, .button, .remove-image-button {
769  transition-property: color, background-color, border-color, opacity;
770  transition-duration: 200ms;

20  }
21
22  const { messages, project, branchId, anthropicApiKey, selectedFiles, images } = await c.req.json();
23  // console.log("Original messages:", JSON.stringify(messages, null, 2));
24  // console.log("Images received:", JSON.stringify(images, null, 2));
25
26  const apiKey = anthropicApiKey || Deno.env.get("ANTHROPIC_API_KEY");
39  let coreMessages = convertToCoreMessages(messages);
40
41  // If there are images, we need to add them to the last user message
42  if (images && Array.isArray(images) && images.length > 0) {
43    // Find the last user message
44    const lastUserMessageIndex = coreMessages.findIndex(
62      };
63
64      // Add each image to the content array using the correct ImagePart format
65      for (const image of images) {
66        if (image && image.url) {
67          // Extract mime type from data URL if available
68          let mimeType = undefined;
69          if (image.url.startsWith("data:")) {
70            const matches = image.url.match(/^data:([^;]+);/);
71            if (matches && matches.length > 1) {
72              mimeType = matches[1];
75
76          newUserMessage.content.push({
77            type: "image",
78            image: image.url,
79            mimeType,
80          });
163        branch_id: branchId,
164        val_id: project.id,
165        num_images: images?.length || 0,
166        model,
167        finish_reason: result.finishReason,

16  price: number;
17  finish_reason: string;
18  num_images: number;
19  our_api_token: boolean;
20}
36      price REAL,
37      finish_reason TEXT,
38      num_images INTEGER,
39      our_api_token INTEGER NOT NULL
40    )

54  model,
55  finish_reason,
56  num_images,
57  our_api_token,
58}: {
66  model: string;
67  finish_reason: string;
68  num_images: number;
69  our_api_token: boolean;
70}) {
90      price,
91      finish_reason,
92      num_images,
93      our_api_token
94      ) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)
107      price,
108      finish_reason,
109      num_images,
110      our_api_token ? 1 : 0,
111    ],

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}

3Feel free to mess around with this val and make it your own :). Just click on "Fork" in the top right.
4
5You can change the phrases that show up as you click no, you can change the firstImg and secondImg, maybe even add more images. And you can also change the colors and any of the text on the screen!
6
7Have fun with it and hopefully your crush says yes hehe.