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);
84 branchId,
85 selectedFiles,
86 images,
87 soundEnabled: audio,
88 });
108
109 return (
110 <ImageDropContainer
111 running={running}
112 images={images}
113 setImages={setImages}>
114 <div className="single-column-container">
115 <div className="single-sticky-header">
119 rel="norefferer"
120 className="block-link text-link lockup">
121 {project.imageUrl ? (
122 <img src={project.imageUrl} className="image-thumbnail" />
123 ) : user?.profileImageUrl ? (
124 <img
125 src={user.profileImageUrl}
126 className="avatar"
127 alt={user.username}
130 />
131 ) : (
132 <div className="image-placeholder" />
133 )}
134 <div>{project.name}</div>
153 onSubmit={e => {
154 handleSubmit(e);
155 setImages([]);
156 }}
157 onCancel={handleStop}
158 running={running}
159 error={error}
160 images={images}
161 setImages={setImages}
162 />
163 <Footer />
164 </div>
165 </div>
166 </ImageDropContainer>
167 );
168}
13
14 <!-- Favicon -->
15 <link rel="icon" href="/frontend/favicon.svg" type="image/svg+xml">
16
17 <!-- Custom styles -->
18 SUM(cache_write_tokens) as total_cache_write_tokens,
19 SUM(price) as total_price,
20 SUM(num_images) as total_images
21 FROM ${USAGE_TABLE}
22 WHERE our_api_token = 1
101 total_cache_write_tokens: userData.cache_write_tokens,
102 total_price: userData.price,
103 total_images: 0,
104 used_inference_data: true
105 });
7 branchId: string | undefined;
8 selectedFiles: string[];
9 images: (string | null)[];
10 soundEnabled: boolean;
11}
17 // bearerToken,
18 selectedFiles,
19 images,
20 soundEnabled,
21}: UseChatLogicProps) {
40 branchId,
41 selectedFiles,
42 images: images
43 .filter((img): img is string => {
44 const isValid = typeof img === "string" && img.startsWith("data:");
45 if (!isValid && img !== null) {
46 console.warn(
47 "Invalid image format:",
48 img?.substring(0, 50) + "..."
49 );
29 - [x] File write as a code embed
30 - [x] str_replace as a diff view
31- [x] make image drop area invisible and bigger
32- [x] Give it all the code (except maybe .txt files) as initial context (like cursor sonnet max)
33- [x] I seem to have lost the delete file tool and instructions, try to find them back in history or re-create?
55- [x] Create branch
56- [x] URL input + pathname
57- [x] Image upload controls
58- [x] Preview refresh button
59- [x] Audio controls
