Val Town Code SearchReturn to Val Town

688  background-color: var(--highlight);
689}
690.card-image {
691  display: flex;
692  align-items: center;
720}
721
722.image-placeholder,
723.image-thumbnail {
724  flex-shrink: 0;
725  width: 40px;
728  object-fit: cover;
729}
730.image-placeholder {
731  background-color: var(--muted);
732}
739}
740
741.image-row {
742  display: flex;
743  gap: var(--space-1);
744}
745.input-image {
746  position: relative;
747  border: 1px solid var(--muted);
748  border-radius: 6px;
749}
750.remove-image-button {
751  position: absolute;
752  top: 0;
761  opacity: 0;
762}
763.input-image:hover .remove-image-button {
764  opacity: 1;
765}
766
767.image-drop-overlay {
768  position: fixed;
769  top: 0;
778  justify-content: center;
779}
780.image-drop-inner {
781  padding: var(--space-2);
782  background-color: var(--background);
858}
859
860.transition, .input-box, .icon-button, .button, .remove-image-button {
861  transition-property: color, background-color, border-color, opacity;
862  transition-duration: 200ms;

29  }
30
31  const { messages, project, branchId, anthropicApiKey, selectedFiles, images } = await c.req.json();
32
33  // do we want to allow user-provided tokens still
55    branch_id: branchId,
56    val_id: project.id,
57    num_images: images?.length || 0,
58    model,
59  });
87        townie_usage_id: rowid,
88        townie_our_api_token: our_api_token,
89        townie_num_images: images?.length || 0,
90        townie_selected_files_count: selectedFiles?.length || 0,
91      },
105  let coreMessages = convertToCoreMessages(messages);
106
107  // If there are images, we need to add them to the last user message
108  if (images && Array.isArray(images) && images.length > 0) {
109    // Find the last user message
110    const lastUserMessageIndex = coreMessages.findIndex(
128      };
129
130      // Add each image to the content array using the correct ImagePart format
131      for (const image of images) {
132        if (image && image.url) {
133          // Extract mime type from data URL if available
134          let mimeType = undefined;
135          if (image.url.startsWith("data:")) {
136            const matches = image.url.match(/^data:([^;]+);/);
137            if (matches && matches.length > 1) {
138              mimeType = matches[1];
141
142          newUserMessage.content.push({
143            type: "image",
144            image: image.url,
145            mimeType,
146          });

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

16  price: number | null;
17  finish_reason: string | null;
18  num_images: number | null;
19  our_api_token: number;
20}
68              <th>Price</th>
69              <th>Finish</th>
70              <th>Images</th>
71              <th>Our API</th>
72            </tr>
87                <td class="price">${formatPrice(row.price)}</td>
88                <td>${row.finish_reason || '-'}</td>
89                <td>${formatNumber(row.num_images)}</td>
90                <td>${formatBoolean(row.our_api_token)}</td>
91              </tr>

141  model,
142  our_api_token,
143  num_images,
144  tablePrefix = "",
145}: {
149  model: string;
150  our_api_token: boolean;
151  num_images: number;
152  tablePrefix: string;
153}) {
162      model,
163      our_api_token,
164      num_images
165      ) VALUES (?, ?, ?, ?, ?, ?, ?, ?)
166      `,
173      model,
174      our_api_token ? 1 : 0,
175      num_images,
176    ],
177  );

29      model,
30      our_api_token,
31      num_images
32      ) VALUES (?, ?, ?, ?, ?, ?, ?, ?)
33      `,

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

3import { Link } from "react-router";
4import { PlusIcon, ArrowUpIcon, Square, XIcon } from "./icons.tsx";
5import { processFiles } from "../utils/images.ts";
6
7export function InputBox ({
12  running,
13  error,
14  images,
15  setImages,
16} : {
17  value: string;
21  running: boolean;
22  error: any;
23  images: (string|null)[];
24  setImages: (images: (string|null)[]) => void;
25}) {
26  const form = useRef(null);
62          />
63        </div>
64        <ImageRow images={images} setImages={setImages} />
65        <div className="toolbar">
66          <UploadButton
67            disabled={running}
68            images={images}
69            setImages={setImages}
70          />
71          <div className="spacer" />
94}
95
96export function ImageDropContainer ({
97  images,
98  setImages,
99  running,
100  children,
101}: {
102  images: (string|null)[];
103  setImages: (images: (string|null)[]) => void;
104  running: boolean;
105  children: React.ReactNode;
106}) {
107  const dragging = useImageDrop({ images, setImages, running });
108
109  return (
111      {children}
112      {dragging && (
113        <div className="image-drop-overlay">
114          <div className="image-drop-inner">
115            Drop images here to upload
116          </div>
117        </div>
121}
122
123export function useImageDrop ({ images, setImages, running }: {
124  images: (string|null)[];
125  setImages(images: (string|null)[]) => void;
126  running: boolean;
127}) {
149    setDragging(false);
150    if (e.dataTransfer?.files && !running) {
151      processFiles(Array.from(e.dataTransfer.files), images, setImages);
152    }
153  }
165      document.removeEventListener("drop", onDrop);
166    }
167  }, [images, setImages, running]);
168
169  return dragging;
170}
171
172function ImageRow ({ images, setImages }: {
173  images: (string|null)[];
174  setImages: (images: (string|null)[]) => void;
175}) {
176  return (
177    <div className="image-row">
178      {images.map((image, i) => (
179        <Thumbnail
180          key={i}
181          image={image}
182          onRemove={() => {
183            setImages([
184              ...images.slice(0, i),
185              ...images.slice(i + 1),
186            ]);
187          }}
192}
193
194function Thumbnail ({ image, onRemove }: {
195  image: string|null;
196  onRemove: () => void;
197}) {
198  if (!image) return null;
199
200  return (
201    <div className="input-image">
202      <img
203        src={image}
204        alt="User uploaded image"
205        className="image-thumbnail"
206      />
207      <button
208        type="button"
209        title="Remove image"
210        className="remove-image-button"
211        onClick={onRemove}
212      >
218
219function UploadButton ({
220  images,
221  setImages,
222  disabled,
223}: {
224  images: (string|null)[];
225  setImages: (images: (string|null)[]) => void;
226  disabled: boolean;
227}) {
232      <button
233        type="button"
234        title="Upload image"
235        disabled={disabled}
236        onClick={e => {
240        <PlusIcon />
241        <div className="sr-only">
242          Upload image
243        </div>
244      </button>
249        onChange={e => {
250          if (e.target.files) {
251            processFiles(Array.from(e.target.files), images, setImages);
252          }
253        }}

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    };

73
74function Avatar ({ user }) {
75  if (!user?.profileImageUrl) {
76    return (
77      <div className="avatar" />
81  return (
82    <img
83      src={user.profileImageUrl}
84      alt={user.username}
85      width="32"