2 // Background
3 BACKGROUND:
4 "https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/8b501664-722e-4be8-cf71-83aab7756e00/public",
5
6 // Stevens
7 STEVENS_FRONT:
8 "https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/8b8432bb-add2-44ad-bb12-44b8ea215500/public",
9 STEVENS_BACK:
10 "https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/e28da8ab-7710-4b82-8e32-8fdf65c2ed00/public",
11 STEVENS_WALKING:
12 "https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/bd7b9997-09b2-4b35-6eb9-9975a85bb700/public",
13
14 // Mailman
15 MAILMAN_STANDING:
16 "https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/20a6493d-cc31-475e-aa83-ac97d317e400/public",
17 MAILMAN_WALKING:
18 "https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/61604576-8a83-4d85-d5e4-8e8e26641700/public",
19};
20
5import * as db from "./db.ts";
6import { embedMetadata, handleFarcasterEndpoints, name } from "./farcaster.ts";
7import { handleImageEndpoints } from "./image.tsx";
8
9const app = new Hono();
10
11handleImageEndpoints(app);
12handleFarcasterEndpoints(app);
13
44 <meta name="fc:frame" content={JSON.stringify(embedMetadata(baseUrl, path))} />
45 <link rel="icon" href={baseUrl + "/icon"} />
46 <meta property="og:image" content={baseUrl + "/image"} />
47 </head>
48 <body class="bg-white text-black dark:bg-black dark:text-white">
5import satori from "npm:satori";
6
7export function handleImageEndpoints(app: Hono) {
8 const headers = {
9 "Content-Type": "image/png",
10 "cache-control": "public, max-age=86400",
11 };
12 app.get("/image", async (c) => {
13 return c.body(await homeImage(), 200, headers);
14 });
15 app.get("/icon", async (c) => {
16 return c.body(await iconImage(), 200, headers);
17 });
18}
19
20export async function homeImage() {
21 return await ogImage(
22 <div tw="w-full h-full flex justify-start items-end text-[100px] bg-black text-white p-[50px]">
23 <div tw="flex flex-col items-start gap-[10px]">
31}
32
33export async function iconImage() {
34 return await ogImage(
35 <div tw="w-full h-full flex justify-center items-center text-[100px] bg-black text-white p-[50px]">
36 <img tw="w-[350px] h-[350px]" src={base64Icon(SquareDashed)} />
45//////////
46
47export async function ogImage(body, options = {}) {
48 const svg = await satori(
49 body,
57 if (code === "emoji") {
58 const unicode = segment.codePointAt(0).toString(16).toUpperCase();
59 return `data:image/svg+xml;base64,` + btoa(await loadEmoji(unicode));
60 }
61 return "";
94 const base64 = Buffer.from(svg).toString("base64");
95 // console.log('getIconDataUrl', name, svg, base64)
96 return `data:image/svg+xml;base64,${base64}`;
97};
5export const name = "Mini App Starter";
6// export const iconUrl = "https://imgur.com/TrJLlwp.png";
7// export const ogImageUrl = "https://imgur.com/xKVOVUE.png";
8
9export function embedMetadata(baseUrl: string, path: string = "/") {
10 return {
11 version: "next",
12 imageUrl: baseUrl + "/image",
13 button: {
14 title: name,
17 name: name,
18 url: baseUrl + path,
19 splashImageUrl: baseUrl + "/icon",
20 splashBackgroundColor: "#111111",
21 },
55 "iconUrl": baseUrl + "/icon",
56 "homeUrl": baseUrl,
57 "splashImageUrl": baseUrl + "/icon",
58 "splashBackgroundColor": "#111111",
59 "primaryCategory": "developer-tools",
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
172
173- **Redirects:** Use `return new Response(null, { status: 302, headers: { Location: "/place/to/redirect" }})` instead of `Response.redirect` which is broken
174- **Images:** Avoid external images or base64 images. Use emojis, unicode symbols, or icon fonts/libraries instead
175- **AI Image:** To inline generate an AI image use: `<img src="https://maxm-imggenurl.web.val.run/the-description-of-your-image" />`
176- **Storage:** DO NOT use the Deno KV module for storage
177- **Browser APIs:** DO NOT use the `alert()`, `prompt()`, or `confirm()` methods
782 background-color: var(--highlight);
783}
784.card-image {
785 display: flex;
786 align-items: center;
809}
810
811.image-placeholder,
812.image-thumbnail {
813 flex-shrink: 0;
814 width: 40px;
817 object-fit: cover;
818}
819.image-placeholder {
820 background-color: var(--muted);
821}
828}
829
830.image-row {
831 display: flex;
832 gap: var(--space-1);
833}
834.input-image {
835 position: relative;
836 border: 1px solid var(--muted);
837 border-radius: 6px;
838}
839.remove-image-button {
840 position: absolute;
841 top: 0;
850 opacity: 0;
851}
852.input-image:hover .remove-image-button {
853 opacity: 1;
854}
855
856.image-drop-overlay {
857 position: fixed;
858 top: 0;
867 justify-content: center;
868}
869.image-drop-inner {
870 padding: var(--space-2);
871 background-color: var(--background);
872}
873
874.transition, .input-box, .icon-button, .button, .remove-image-button {
875 transition-property: color, background-color, border-color, opacity;
876 transition-duration: 200ms;
33 }
34
35 const { messages, project, branchId, anthropicApiKey, selectedFiles, images } = await c.req.json();
36
37 // do we want to allow user-provided tokens still
63 branch_id: branchId,
64 val_id: project.id,
65 num_images: images?.length || 0,
66 model: "claude-3-7-sonnet-20250219",
67 });
73 let coreMessages = convertToCoreMessages(messages);
74
75 // If there are images, we need to add them to the last user message
76 if (images && Array.isArray(images) && images.length > 0) {
77 // Find the last user message
78 const lastUserMessageIndex = coreMessages.findIndex(
96 };
97
98 // Add each image to the content array using the correct ImagePart format
99 for (const image of images) {
100 if (image && image.url) {
101 // Extract mime type from data URL if available
102 let mimeType = undefined;
103 if (image.url.startsWith("data:")) {
104 const matches = image.url.match(/^data:([^;]+);/);
105 if (matches && matches.length > 1) {
106 mimeType = matches[1];
109
110 newUserMessage.content.push({
111 type: "image",
112 image: image.url,
113 mimeType,
114 });
