26
27 <!-- Favicon -->
28 <link rel="icon" type="image/png" href="${config.iconUrl}">
29
30 <!-- Open Graph metadata -->
33 <meta property="og:title" content="${pageTitle}">
34 <meta property="og:description" content="${pageDesc}">
35 <meta property="og:image" content="${config.iconUrl}">
36
37 <!-- Twitter metadata -->
38 <meta property="twitter:card" content="summary_large_image">
39 <meta property="twitter:url" content="${url}">
40 <meta property="twitter:title" content="${pageTitle}">
41 <meta property="twitter:description" content="${pageDesc}">
42 <meta property="twitter:image" content="${config.iconUrl}">
43
44 <!-- Stylesheets -->
3This is a lightweight Blob Admin interface to view and debug your Blob data.
4
5
6
7To use this, fork it to your account.
61 const { ValTown } = await import("npm:@valtown/sdk");
62 const vt = new ValTown();
63 const { email: authorEmail, profileImageUrl, username } = await vt.me.profile.retrieve();
64 // const authorEmail = me.email;
65
129
130 c.set("email", email);
131 c.set("profile", { profileImageUrl, username });
132 await next();
133};
437 {profile && (
438 <div className="flex items-center space-x-4">
439 <img src={profile.profileImageUrl} alt="Profile" className="w-8 h-8 rounded-full" />
440 <span>{profile.username}</span>
441 <a href="/auth/logout" className="text-blue-400 hover:text-blue-300">Logout</a>
580 alt="Blob content"
581 className="max-w-full h-auto"
582 onError={() => console.error("Error loading image")}
583 />
584 </div>
630 <li>Create public shareable links for blobs</li>
631 <li>View and manage public folder</li>
632 <li>Preview images directly in the interface</li>
633 </ul>
634 </div>
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 );
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/`
81});
82
83// --- Blob Image Serving Routes ---
84
85// GET /api/images/:filename - Serve images from blob storage
86app.get("/api/images/:filename", async (c) => {
87 const filename = c.req.param("filename");
88
89 try {
90 // Get image data from blob storage
91 const imageData = await blob.get(filename);
92
93 if (!imageData) {
94 return c.json({ error: "Image not found" }, 404);
95 }
96
98 let contentType = "application/octet-stream"; // Default
99 if (filename.endsWith(".jpg") || filename.endsWith(".jpeg")) {
100 contentType = "image/jpeg";
101 } else if (filename.endsWith(".png")) {
102 contentType = "image/png";
103 } else if (filename.endsWith(".gif")) {
104 contentType = "image/gif";
105 } else if (filename.endsWith(".svg")) {
106 contentType = "image/svg+xml";
107 }
108
109 // Return the image with appropriate headers
110 return new Response(imageData, {
111 headers: {
112 "Content-Type": contentType,
115 });
116 } catch (error) {
117 console.error(`Error serving image ${filename}:`, error);
118 return c.json(
119 { error: "Failed to load image", details: error.message },
120 500
121 );
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>
12}
13
14type ImageSummary = {
15 sender: string;
16 recipient: (typeof RECIPIENTS)[number] | "both" | "other";
22 anthropic: Anthropic,
23 htmlContent: string,
24 imageSummaries: ImageSummary[]
25) {
26 try {
36 text: `Analyze the following content from an email and provide a response as a JSON blob (only JSON, no other text) with two parts.
37
38 The email is from the USPS showing mail I'm receiving. Metadata about packages is stored directly in the email. Info about mail pieces is in images, so I've included summaries of those as well.
39
40 Your response should include:
66 And here is info about the mail pieces:
67
68 ${JSON.stringify(imageSummaries)}`,
69 },
70 ],
95 const anthropic = new Anthropic({ apiKey });
96
97 // Process each image attachment serially
98 const summaries = [];
99 for (const [index, attachment] of e.attachments.entries()) {
100 try {
101 const imageData = await attachment.arrayBuffer();
102 const base64Image = btoa(
103 String.fromCharCode(...new Uint8Array(imageData))
104 );
105
112 content: [
113 {
114 type: "image",
115 source: {
116 type: "base64",
117 media_type: attachment.type,
118 data: base64Image,
119 },
120 },
148 summaries.push(parsedResponse);
149 } catch (error) {
150 console.error(`Image analysis error:`, error);
151 summaries.push({
152 sender: "Error",
153 recipient: "Error",
154 type: "error",
155 notes: `Image ${index + 1} Analysis Failed: ${error.message}`,
156 });
157 }
