3This is a lightweight Blob Admin interface to view and debug your Blob data.
4
5
6
7## Installation
3This is a lightweight Blob Admin interface to view and debug your Blob data.
4
5
6
7## Installation
1import { generateImageSummary } from "https://esm.town/v/jackd/generateImageSummary";
2import { email } from "https://esm.town/v/std/email";
3
6
7 if (e.attachments.length === 0) {
8 await sendReply(e.from, "No attachment found", "Please send an email with a food image attachment.");
9 return;
10 }
11
12 const attachment = e.attachments[0];
13 if (!attachment.type.startsWith("image/")) {
14 await sendReply(e.from, "Invalid attachment", "Please send a food image as an attachment.");
15 return;
16 }
17
18 try {
19 const observations = await generateImageSummary(attachment);
20 const htmlContent = formatEmailContent(observations);
21 await sendReply(e.from, "Screenshot Analysis", htmlContent);
24 let errorMessage = "An error occurred while processing your screenshot. ";
25 if (error instanceof RangeError) {
26 errorMessage += "The image file might be too large. Please try with a smaller image.";
27 } else {
28 errorMessage += "Please try again later.";
39 return `
40<div style="font-family: Arial, sans-serif; color: rgb(51,51,51); line-height: 1.5; padding: 12px;">
41 <h2 style="color: rgb(51,51,51); margin-bottom: 12px;">Analysis of Your Image</h2>
42 <ul style="margin: 0; padding-left: 24px;">
43 ${listItems}
2import { fileToDataURL } from "https://esm.town/v/stevekrouse/fileToDataURL";
3
4export async function generateImageSummary(image: File): Promise<string[]> {
5 const openai = new OpenAI();
6 const dataURL = await fileToDataURL(image);
7 const response = await openai.chat.completions.create({
8 model: "gpt-4-vision-preview",
11 role: "system",
12 content: `
13You are an assistant that analyzes images and returns exactly 3 key observations.
14Return your response as a JSON array of exactly 3 strings.
15Each string should be a clear, concise observation about the most important or notable elements in the image.
16Do not include bullet points, numbers, or any formatting - just the plain text observations.
17
28 role: "user",
29 content: [{
30 type: "image_url",
31 image_url: {
32 url: dataURL,
33 },
41 const content = response.choices[0].message.content;
42 if (!content) {
43 throw new Error("Unable to generate image analysis.");
44 }
45
55 } catch (error) {
56 console.error("Error parsing AI response:", error);
57 throw new Error("Failed to parse image analysis response");
58 }
59}
25 transparent: true,
26 sizeAttenuation: true,
27 map: new THREE.TextureLoader().load('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9oMCRUiMrIBQVkAAACdSURBVBjTXY69DcJAEESD2YrgcB9HdEAHJHSAaIBWXAsuXOLshPTwJ0GIAhB/HRABCZjZkW5XelrpVeMhIh5TSt854x0/MDXe8Zt/4GeMcV6W5XNd131K6Qg0xnj0fT+XUm4ppTPQMzAQ0fO+BZrn+QHshRA+bdseqpI+wLcs3/e+9JMRUK21G5nXOb/jpa7rZwixfudSisGHrgPvTlKI/AKLe0YbZiEBRQAAAABJRU5ErkJggg==')
28 });
29
51 blending: THREE.AdditiveBlending,
52 sizeAttenuation: true,
53 map: new THREE.TextureLoader().load('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9oMCRUiMrIBQVkAAACdSURBVBjTXY69DcJAEESD2YrgcB9HdEAHJHSAaIBWXAsuXOLshPTwJ0GIAhB/HRABCZjZkW5XelrpVeMhIh5TSt854x0/MDXe8Zt/4GeMcV6W5XNd131K6Qg0xnj0fT+XUm4ppTPQMzAQ0fO+BZrn+QHshRA+bdseqpI+wLcs3/e+9JMRUK21G5nXOb/jpa7rZwixfudSisGHrgPvTlKI/AKLe0YbZiEBRQAAAABJRU5ErkJggg==')
54 });
55
83 blending: THREE.AdditiveBlending,
84 sizeAttenuation: true,
85 map: new THREE.TextureLoader().load('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9oMCRUiMrIBQVkAAACdSURBVBjTXY69DcJAEESD2YrgcB9HdEAHJHSAaIBWXAsuXOLshPTwJ0GIAhB/HRABCZjZkW5XelrpVeMhIh5TSt854x0/MDXe8Zt/4GeMcV6W5XNd131K6Qg0xnj0fT+XUm4ppTPQMzAQ0fO+BZrn+QHshRA+bdseqpI+wLcs3/e+9JMRUK21G5nXOb/jpa7rZwixfudSisGHrgPvTlKI/AKLe0YbZiEBRQAAAABJRU5ErkJggg==')
86 });
87
115 <button className="animate-hero glow-effect">Get Started</button>
116 </div>
117 <div className="hero-image animate-hero">
118 <div className={`background-gradient ${isHovered ? 'pulse' : ''}`}>
119 <div className="sparkles"></div>
371 }
372
373 .hero-image {
374 flex: 1;
375 display: flex;
411 height: 100%;
412 pointer-events: none;
413 background-image: radial-gradient(circle, #fff 1px, transparent 1px);
414 background-size: 15px 15px;
415 opacity: 0.5;
3This is a lightweight Blob Admin interface to view and debug your Blob data.
4
5
6
7## Installation
4
5<div align="center">
6<img src="https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/67a1d35e-c37c-41a4-0e5a-03a9ba585d00/public" width="700px"/>
7</div>
10
11<div align="center">
12<img src="https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/67a1d35e-c37c-41a4-0e5a-03a9ba585d00/public" width="500px"/>
13</div>
5// Sample product data
6const products = [
7 { id: 1, name: "VR Headset", price: 299.99, image: "https://maxm-imggenurl.web.val.run/futuristic-vr-headset-neon-purple-glow" },
8 { id: 2, name: "Haptic Gloves", price: 159.99, image: "https://maxm-imggenurl.web.val.run/futuristic-haptic-gloves-neon-purple" },
9 { id: 3, name: "Neural Interface", price: 499.99, image: "https://maxm-imggenurl.web.val.run/futuristic-neural-interface-neon-purple" },
10 { id: 4, name: "Holographic Display", price: 799.99, image: "https://maxm-imggenurl.web.val.run/futuristic-holographic-display-neon-purple" },
11];
12
55 >
56 <img
57 src={product.image}
58 alt={product.name}
59 style={{ width: "100%", borderRadius: "0.375rem", marginBottom: "1rem" }}
342 width: 100%;
343 height: 120%;
344 background-image: url('https://maxm-imggenurl.web.val.run/futuristic-vr-gaming-room-neon-purple-glow');
345 background-size: cover;
346 background-position: center;
