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
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/`
155- **TypeScript required** with strict interfaces
156- **Functional programming** preferred over classes
157- **No external images** - use emojis, Unicode symbols, or icon fonts
158- **Error handling**: Let errors bubble up with context rather than catching/logging
159- **Never include secrets** in code - always use environment variables
2302. **Shared Code**: Code in `shared/` must work in both frontend and backend (no `Deno` keyword)
2313. **File Handling**: Only text files supported, use `readFile` helpers for project files
2324. **Images**: Use AI image generation: `<img src="https://maxm-imggenurl.web.val.run/description" />`
2335. **Default Styling**: Use TailwindCSS via `<script src="https://cdn.twind.style" crossorigin></script>`
50 anthropicApiKey,
51 selectedFiles,
52 images,
53 } = await c.req.json();
54
77 branch_id: branchId,
78 val_id: project.id,
79 num_images: images?.length || 0,
80 model,
81 });
109 townie_usage_id: rowid,
110 townie_our_api_token: our_api_token,
111 townie_num_images: images?.length || 0,
112 townie_selected_files_count: selectedFiles?.length || 0,
113 },
127 let coreMessages = convertToCoreMessages(messages);
128
129 // If there are images, we need to add them to the last user message
130 if (images && Array.isArray(images) && images.length > 0) {
131 // Find the last user message
132 const lastUserMessageIndex = coreMessages.findIndex(
150 };
151
152 // Add each image to the content array using the correct ImagePart format
153 for (const image of images) {
154 if (image && image.url) {
155 // Extract mime type from data URL if available
156 let mimeType = undefined;
157 if (image.url.startsWith("data:")) {
158 const matches = image.url.match(/^data:([^;]+);/);
159 if (matches && matches.length > 1) {
160 mimeType = matches[1];
163
164 newUserMessage.content.push({
165 type: "image",
166 image: image.url,
167 mimeType,
168 });
16 SUM(cache_write_tokens) as total_cache_write_tokens,
17 SUM(price) as total_price,
18 SUM(num_images) as total_images
19 FROM ${USAGE_TABLE}
20 WHERE val_id = ? AND our_api_token = 1
54 total_cache_write_tokens: 0,
55 total_price: 0,
56 total_images: 0
57 };
58
85 // Always include inference price for comparison
86 inference_price: inferenceSummary.inference_price || 0,
87 total_images: usageSummary.total_images,
88 // Add flag to indicate inference data usage
89 used_inference_data: !!inferenceSummary.inference_price,
17 price?: number;
18 finish_reason?: string;
19 num_images?: number;
20 our_api_token: boolean;
21}
31 inference_price: number;
32 original_price?: number;
33 total_images: number;
34 used_inference_data?: boolean;
35 inference_price_primary?: boolean;
66 <th>Cache Write</th>
67 <th>Total Price</th>
68 <th>Images</th>
69 </tr>
70 </thead>
76 <td>${formatNumber(summary.total_cache_write_tokens)}</td>
77 <td class="price">${formatPrice(summary.total_price)}</td>
78 <td>${formatNumber(summary.total_images)}</td>
79 </tr>
80 </tbody>
97 <th>Price</th>
98 <th>Finish</th>
99 <th>Images</th>
100 </tr>
101 </thead>
114 <td class="price">${formatPrice(row.price)}</td>
115 <td>${row.finish_reason || '-'}</td>
116 <td>${formatNumber(row.num_images)}</td>
117 </tr>
118 `).join("")}
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
151 total_price: userData.price,
152 inference_price: inferencePriceByUser.get(userId) || 0,
153 total_images: 0,
154 used_inference_data: true
155 });
13 total_price: number;
14 inference_price: number;
15 total_images: number;
16 used_inference_data?: boolean;
17}
32 price?: number;
33 finish_reason?: string;
34 num_images?: number;
35 our_api_token: boolean;
36}
48 total_price: 0,
49 inference_price: 0,
50 total_images: 0
51 };
52
77 <th>Total Price</th>
78 <th>Inference Price</th>
79 <th>Images</th>
80 </tr>
81 </thead>
88 <td class="price">${formatPrice(userData.total_price)} ${userData.used_inference_data ? '<span class="badge badge-info" title="Using inference data">I</span>' : ''}</td>
89 <td class="price">${formatPrice(userData.inference_price || 0)}</td>
90 <td>${formatNumber(userData.total_images)}</td>
91 </tr>
92 </tbody>
135 <th>Price</th>
136 <th>Finish</th>
137 <th>Images</th>
138 </tr>
139 </thead>
152 <td class="price">${formatPrice(row.price)}</td>
153 <td>${row.finish_reason || '-'}</td>
154 <td>${formatNumber(row.num_images)}</td>
155 </tr>
156 `).join("")}
7 branchId: string | undefined;
8 selectedFiles: string[];
9 images: (string | null)[];
10 soundEnabled: boolean;
11}
20 // bearerToken,
21 selectedFiles,
22 images,
23 soundEnabled,
24}: UseChatLogicProps) {
44 branchId,
45 selectedFiles,
46 images: images
47 .filter((img): img is string => {
48 const isValid = typeof img === "string" && img.startsWith("data:");
49 if (!isValid && img !== null) {
50 console.warn(
51 "Invalid image format:",
52 img?.substring(0, 50) + "..."
53 );
17 price?: number;
18 finish_reason?: string;
19 num_images?: number;
20 our_api_token: boolean;
21}
126 </div>
127 <div class="card-item">
128 <strong>Images:</strong> ${formatNumber(usage.num_images)}
129 </div>
130 <div class="card-item">
