106 description: z.string().max(64).optional()
107 .describe("Description for the MCP server (optional, max 64 characters)"),
108 imageUrl: z.string().url().optional().describe("URL to an image for the MCP server (optional)"),
109 },
110 async ({ name, privacy, description, imageUrl }: {
111 name: string;
112 privacy: "public" | "unlisted" | "private";
113 description?: string;
114 imageUrl?: string;
115 }) => {
116 try {
120 privacy,
121 ...(description !== undefined ? { description } : {}),
122 ...(imageUrl !== undefined ? { imageUrl } : {}),
123 };
124
23 ".jsx": "application/javascript",
24 ".json": "application/json",
25 ".svg": "image/svg+xml",
26};
27
406 id: 'q4',
407 question: 'How do you prefer to communicate?',
408 options: ['Written (text, email)', 'Visual (images, diagrams)', 'Verbal (speaking, presenting)', 'Demonstrative (showing by doing)']
409 },
410 {
84 bio: string;
85 expertise: string[];
86 imageUrl?: string;
87}
88
21});
22
23// API endpoint to analyze food image
24app.post("/api/analyze-food", async (c) => {
25 try {
27
28 const formData = await c.req.formData();
29 const imageFile = formData.get("image") as File;
30
31 if (!imageFile) {
32 console.error("No image provided in request");
33 return c.json({ error: "No image provided" }, 400);
34 }
35
36 console.log("Image received:", imageFile.name, imageFile.type, imageFile.size);
37
38 // Convert image to base64
39 const arrayBuffer = await imageFile.arrayBuffer();
40 const base64Image = btoa(
41 new Uint8Array(arrayBuffer).reduce((data, byte) => data + String.fromCharCode(byte), '')
42 );
43
44 console.log("Image converted to base64, length:", base64Image.length);
45
46 // Call OpenAI to analyze the image
47 console.log("Calling OpenAI API...");
48 const openai = new OpenAI();
52 {
53 role: "system",
54 content: "You are a nutritionist specializing in identifying food items and their calorie content from images. For each food item visible in the image, provide the name and estimated calories in the following JSON format with an 'items' array: {\"items\": [{\"food\": \"name\", \"calories\": number}, ...]}. Be specific about portion sizes when estimating calories. If you can't identify something clearly, make your best guess."
55 },
56 {
57 role: "user",
58 content: [
59 { type: "text", text: "What food items are in this image? Provide the name and estimated calories for each item." },
60 { type: "image_url", image_url: { url: `data:image/jpeg;base64,${base64Image}` } }
61 ]
62 }
97 console.error("Error analyzing food:", error);
98 return c.json({
99 error: "Failed to analyze image",
100 details: String(error),
101 items: []
44 Fotoğraf Yükle
45 </button>
46 <input type="file" id="file-input" accept="image/*">
47 </div>
48 </div>
168 console.log('File selected:', file.name, file.type);
169
170 if (!file.type.startsWith('image/')) {
171 alert('Lütfen bir resim dosyası seçin.');
172 return;
196 canvas.height = video.videoHeight;
197 const ctx = canvas.getContext('2d');
198 ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
199
200 previewImg.src = canvas.toDataURL('image/jpeg');
201
202 // Stop camera stream
221 // Create form data
222 const formData = new FormData();
223 formData.append('image', blob, 'food.jpg');
224
225 console.log('Sending image for analysis...');
226
227 // Send to API
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/`
73});
74
75// --- Blob Image Serving Routes ---
76
77// GET /api/images/:filename - Serve images from blob storage
78app.get("/api/images/:filename", async (c) => {
79 const filename = c.req.param("filename");
80
81 try {
82 // Get image data from blob storage
83 const imageData = await blob.get(filename);
84
85 if (!imageData) {
86 return c.json({ error: "Image not found" }, 404);
87 }
88
90 let contentType = "application/octet-stream"; // Default
91 if (filename.endsWith(".jpg") || filename.endsWith(".jpeg")) {
92 contentType = "image/jpeg";
93 } else if (filename.endsWith(".png")) {
94 contentType = "image/png";
95 } else if (filename.endsWith(".gif")) {
96 contentType = "image/gif";
97 } else if (filename.endsWith(".svg")) {
98 contentType = "image/svg+xml";
99 }
100
101 // Return the image with appropriate headers
102 return new Response(imageData, {
103 headers: {
104 "Content-Type": contentType,
107 });
108 } catch (error) {
109 console.error(`Error serving image ${filename}:`, error);
110 return c.json(
111 { error: "Failed to load image", details: error.message },
112 500,
113 );
10 href="/public/favicon.svg"
11 sizes="any"
12 type="image/svg+xml"
13 />
14 <link rel="preconnect" href="https://fonts.googleapis.com" />
36 height: 100%;
37 font-family: "Pixelify Sans", sans-serif;
38 image-rendering: pixelated;
39 }
40 body::before {
50 /* For pixel art aesthetic */
51 * {
52 image-rendering: pixelated;
53 }
54 </style>
