Val Town Code SearchReturn to Val Town

50    return new Response(svgResponse, {
51      headers: {
52        'Content-Type': 'image/svg+xml',
53        'Access-Control-Allow-Origin': '*'
54      }

1import { Image } from "https://deno.land/x/imagescript@1.2.15/mod.ts";
2
3function encodeURL(url: string): string {
10
11  const {
12    w,              // Width of the output image
13    h,              // Height of the output image
14    fit,            // Fit mode for resizing: 'cover' or 'contain'
15    background,     // Background color for 'contain' mode or transparent areas
16    withoutEnlargement, // Whether to prevent enlarging the image
17    format = 'base64'  // URL format: 'base64' or 'plain'
18  } = Object.fromEntries(params);
22
23  if (!inputUrl) {
24    const exampleUrl = "https://example.com/image.jpg";
25    const encodedExampleUrl = encodeURL(exampleUrl);
26    const baseUrl = `${url.protocol}//${url.host}/`;
27    const exampleBase64 = `${baseUrl}${encodedExampleUrl}?format=base64`;
28    const examplePlain = `${baseUrl}${exampleUrl}?format=plain`;
29    return new Response(`Error: No image URL provided. Please include a URL in the path and specify the format using the 'format' parameter.
30
31Example usage:
442. w (integer, optional):
45   - Values: Any positive integer
46   - Specifies the desired width of the output image in pixels
47   - If omitted, the original image width is used
48   - Example: w=300
49
503. h (integer, optional):
51   - Values: Any positive integer
52   - Specifies the desired height of the output image in pixels
53   - If omitted, the original image height is used
54   - Example: h=200
55
564. fit (string, optional):
57   - Values: 'cover' (default) or 'contain'
58   - Determines how the image should be resized to fit the specified dimensions
59   - 'cover': The image will fill the specified dimensions while maintaining its aspect ratio, potentially cropping the image
60   - 'contain': The image will be resized to fit within the specified dimensions while maintaining its aspect ratio, potentially adding letterboxing
61   - Example: fit=contain
62
696. withoutEnlargement (string, optional):
70   - Values: 'true' or 'false' (default)
71   - When set to 'true', prevents the image from being enlarged if the requested dimensions are larger than the original image
72   - Example: withoutEnlargement=true
73
74Usage notes:
75- The image URL should be provided in the path of the request URL
76- At least one of 'w' or 'h' should be provided to resize the image
77- If only one of 'w' or 'h' is provided, the other dimension will be calculated to maintain the aspect ratio
78- The 'background' parameter is only used when 'fit' is set to 'contain' or when the image has transparent areas
79- All parameters are optional. If not provided, default values or original image properties will be used`, 
80    { status: 400 });
81  }
82
83  let imageUrl;
84  try {
85    if (format === 'base64') {
86      imageUrl = decodeURIComponent(atob(inputUrl));
87    } else if (format === 'plain') {
88      imageUrl = decodeURIComponent(inputUrl);
89    } else {
90      throw new Error('Invalid format specified. Use "base64" or "plain".');
91    }
92    console.log('Processed URL:', imageUrl);
93  } catch (error) {
94    return new Response(`Error processing URL: ${error.message}. Please ensure the URL is correctly formatted and the format is specified correctly.`, { status: 400 });
96
97  try {
98    console.log('Fetching image from:', imageUrl);
99    const response = await fetch(imageUrl);
100    if (!response.ok) {
101      throw new Error(`HTTP error! status: ${response.status}`);
103    const arrayBuffer = await response.arrayBuffer();
104
105    let image = await Image.decode(new Uint8Array(arrayBuffer));
106
107    const targetWidth = w ? parseInt(w) : image.width;
108    const targetHeight = h ? parseInt(h) : image.height;
109
110    if (withoutEnlargement === "true" && (targetWidth > image.width || targetHeight > image.height)) {
111      // Don't enlarge the image
112    } else {
113      if (fit === "contain") {
114        image = image.contain(targetWidth, targetHeight);
115      } else {
116        // Default to 'cover'
117        image = image.cover(targetWidth, targetHeight);
118      }
119    }
121    if (background) {
122      try {
123        const bgColor = Image.rgbaToColor(...JSON.parse(background));
124        const bgImage = new Image(image.width, image.height);
125        bgImage.fill(bgColor);
126        image = bgImage.composite(image);
127      } catch (error) {
128        console.error('Error applying background:', error);
131    }
132
133    const encodedImage = await image.encode();
134
135    return new Response(encodedImage, {
136      status: 200,
137      headers: {
138        "Content-Type": "image/png",
139        "Cache-Control": "max-age=86400"
140      }
141    });
142  } catch (error) {
143    console.error('Error processing image:', error);
144    let errorMessage = `Error processing image: ${error.message}. `;
145    if (error.message.includes('HTTP error')) {
146      errorMessage += 'The image could not be fetched from the provided URL. Please check if the URL is correct and accessible.';
147    } else if (error.message.includes('decode')) {
148      errorMessage += 'The image could not be decoded. Please ensure the URL points to a valid image file.';
149    } else if (error.message.includes('client error (Connect)')) {
150      errorMessage += 'There was a network error while trying to fetch the image. This might be due to network restrictions or the image server being unreachable.';
151    } else {
152      errorMessage += 'An unexpected error occurred while processing the image. Please try again or contact support if the issue persists.';
153    }
154    return new Response(errorMessage, { status: 500 });

4
5function BackgroundRemover() {
6  const [image, setImage] = useState<string | null>(null);
7  const [processedImage, setProcessedImage] = useState<string | null>(null);
8  const canvasRef = useRef<HTMLCanvasElement>(null);
9
10  const handleImageUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
11    const file = e.target.files?.[0];
12    if (file) {
13      const reader = new FileReader();
14      reader.onload = (event) => {
15        setImage(event.target?.result as string);
16      };
17      reader.readAsDataURL(file);
20
21  const removeBackground = () => {
22    if (!canvasRef.current || !image) return;
23
24    const canvas = canvasRef.current;
25    const ctx = canvas.getContext('2d');
26    const img = new Image();
27    img.onload = () => {
28      canvas.width = img.width;
29      canvas.height = img.height;
30      ctx?.drawImage(img, 0, 0);
31
32      const imageData = ctx?.getImageData(0, 0, canvas.width, canvas.height);
33      if (imageData) {
34        for (let i = 0; i < imageData.data.length; i += 4) {
35          // Simple background removal: make white/near-white pixels transparent
36          const r = imageData.data[i];
37          const g = imageData.data[i + 1];
38          const b = imageData.data[i + 2];
39          
40          // If pixel is very close to white, make it transparent
41          if (r > 240 && g > 240 && b > 240) {
42            imageData.data[i + 3] = 0;
43          }
44        }
45        ctx?.putImageData(imageData, 0, 0);
46        setProcessedImage(canvas.toDataURL());
47      }
48    };
49    img.src = image;
50  };
51
60      <input 
61        type="file" 
62        accept="image/*" 
63        onChange={handleImageUpload} 
64        style={{ marginBottom: '10px' }}
65      />
66      {image && (
67        <div>
68          <h2>Original Image</h2>
69          <img 
70            src={image} 
71            alt="Original" 
72            style={{ maxWidth: '100%', maxHeight: '300px' }} 
86        </div>
87      )}
88      {processedImage && (
89        <div>
90          <h2>Processed Image</h2>
91          <img 
92            src={processedImage} 
93            alt="Background Removed" 
94            style={{ maxWidth: '100%', maxHeight: '300px' }} 
95          />
96          <a 
97            href={processedImage} 
98            download="background-removed.png"
99            style={{ 

367
368      // Extract icon
369      const iconUrlMatch = html.match(/<meta property="og:image" content="([^"]+)"/i);
370      let iconUrl = iconUrlMatch ? iconUrlMatch[1] : null;
371

1191        <meta property="og:description" content="Turn your ideas into fully functional apps in less than a second – powered by Llama3.3-70b on Cerebras's super-fast wafer chips. Code is 100% open-source, hosted on Val Town."">
1192        <meta property="og:type" content="website">
1193        <meta property="og:image" content="https://stevekrouse-blob_admin.web.val.run/api/public/CerebrasCoderOG.jpg">
1194        
1195            

3This is a lightweight Blob Admin interface to view and debug your Blob data.
4
5![Screenshot 2024-11-22 at 15.43.43@2x.png](https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/d075a4ee-93ec-4cdd-4823-7c8aee593f00/public)
6
7Versions 0-17 of this val were done with Hono and server-rendering. 

440          {profile && (
441            <div className="flex items-center space-x-4">
442              <img src={profile.profileImageUrl} alt="Profile" className="w-8 h-8 rounded-full" />
443              <span>{profile.username}</span>
444              <a href="/auth/logout" className="text-blue-400 hover:text-blue-300">Logout</a>
583                            alt="Blob content"
584                            className="max-w-full h-auto"
585                            onError={() => console.error("Error loading image")}
586                          />
587                        </div>
635                  <li>Create public shareable links for blobs</li>
636                  <li>View and manage public folder</li>
637                  <li>Preview images directly in the interface</li>
638                </ul>
639              </div>
694  const { ValTown } = await import("npm:@valtown/sdk");
695  const vt = new ValTown();
696  const { email: authorEmail, profileImageUrl, username } = await vt.me.profile.retrieve();
697  // const authorEmail = me.email;
698
762
763  c.set("email", email);
764  c.set("profile", { profileImageUrl, username });
765  await next();
766};

11- Parse and analyze various types of content:
12  - PDF attachments
13  - Image attachments (using GPT-4 Vision)
14  - Website content from links in your email
15- Get detailed, context-aware responses directly to your inbox
294. Compose your email:
30   - Write your query or request in the email body
31   - Attach any relevant PDFs or images
32   - Include links to websites you want analyzed
33   - Send it to the Val email address
45
46- PDFs: Text content will be extracted and analyzed
47- Images: Will be analyzed using GPT-4 Vision API
48- Websites: Content will be extracted and converted to markdown for analysis
49- Other file types are not currently supported and will be ignored
79
80  // Step 3: Process different types of content
81  const { pdfTexts, imageAnalysis } = await processAttachments(attachments, openaiKey, transformedPrompt);
82  const websiteMarkdown = await extractWebsiteMarkdown(links, mdApiKey);
83
86    transformedPrompt,
87    pdfTexts,
88    imageAnalysis,
89    websiteMarkdown,
90    receivedEmail,
176}
177
178// Process image attachments with GPT-4V
179async function analyzeImage(imageAttachment, apiKey, transformedPrompt) {
180  try {
181    const response = await fetch("https://api.openai.com/v1/chat/completions", {
191            role: "system",
192            content:
193              `You are an AI assistant tasked with analyzing images in the context of a specific query. Use the following transformed prompt to guide your analysis and provide relevant context:\n\n${transformedPrompt}\n\nFocus your analysis on aspects that are most relevant to this prompt.`,
194          },
195          {
198              {
199                type: "text",
200                text: "Analyze this image and provide relevant context based on the given prompt:${transformedPrompt}",
201              },
202              {
203                type: "image_url",
204                image_url: {
205                  url: `data:${imageAttachment.type};base64,${imageAttachment.content}`,
206                },
207              },
215    return data.choices[0]?.message?.content || "No analysis available";
216  } catch (error) {
217    console.error("Error analyzing image:", error);
218    return "Error analyzing image";
219  }
220}
310}
311
312// Process all attachments (PDFs and Images)
313async function processAttachments(attachments, apiKey, transformedPrompt) {
314  const pdfTexts = [];
315  const imageAnalysis = [];
316
317  for (const attachment of attachments) {
319      const pdfText = await extractPdfText([attachment]);
320      pdfTexts.push(...pdfText);
321    } else if (attachment.type.startsWith("image/")) {
322      const analysis = await analyzeImage(attachment, apiKey, transformedPrompt);
323      imageAnalysis.push({
324        filename: attachment.filename,
325        analysis,
328  }
329
330  return { pdfTexts, imageAnalysis };
331}
332
365
366// Generate the final prompt with all context
367function generateFinalPrompt(transformedPrompt, pdfTexts, imageAnalysis, websiteMarkdown, email) {
368  let contextDump = [];
369
373  }
374
375  // Add image analysis
376  if (imageAnalysis.length > 0) {
377    contextDump.push("Image Analysis:", ...imageAnalysis.map(img => `${img.filename}: ${img.analysis}`));
378  }
379
401        role: "system",
402        content:
403          `You are a helpful AI that replies to emails. Address the sender by their first name if provided, and sign off as 'AI Assistant' in a friendly and professional tone. Be concise and thorough in your analysis. As you're replying via email, use email syntax and not markdown. Analyze all provided content, including PDFs, images, and website content, in the context of the email request. Follow the structured format provided in the transformed prompt to organize your response. Here's the transformed prompt to guide your response:\n\n${transformedPrompt}`,
404      },
405      {

3This is a lightweight Blob Admin interface to view and debug your Blob data.
4
5![Screenshot 2024-11-22 at 15.43.43@2x.png](https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/d075a4ee-93ec-4cdd-4823-7c8aee593f00/public)
6
7Versions 0-17 of this val were done with Hono and server-rendering. 

440          {profile && (
441            <div className="flex items-center space-x-4">
442              <img src={profile.profileImageUrl} alt="Profile" className="w-8 h-8 rounded-full" />
443              <span>{profile.username}</span>
444              <a href="/auth/logout" className="text-blue-400 hover:text-blue-300">Logout</a>
583                            alt="Blob content"
584                            className="max-w-full h-auto"
585                            onError={() => console.error("Error loading image")}
586                          />
587                        </div>
635                  <li>Create public shareable links for blobs</li>
636                  <li>View and manage public folder</li>
637                  <li>Preview images directly in the interface</li>
638                </ul>
639              </div>
694  const { ValTown } = await import("npm:@valtown/sdk");
695  const vt = new ValTown();
696  const { email: authorEmail, profileImageUrl, username } = await vt.me.profile.retrieve();
697  // const authorEmail = me.email;
698
762
763  c.set("email", email);
764  c.set("profile", { profileImageUrl, username });
765  await next();
766};