5 let logs: any[] = [];
6 php.addEventListener("output", (event: any) => logs.push(...event.detail));
7 const script = "<?php echo \"Hello, world!\"; header('Content-Type: image/jpeg');";
8 const exitCode = await php.run(script);
9 return Response.json({ script, exitCode, logs });
3This is a lightweight Blob Admin interface to view and debug your Blob data.
4
5
6
7## Installation
6 const [prompt, setPrompt] = useState("");
7 const [isLoading, setIsLoading] = useState(false);
8 const [imageUrl, setImageUrl] = useState("");
9 const [error, setError] = useState("");
10
11 async function generateImage() {
12 setIsLoading(true);
13 setError("");
15 const encodedPrompt = encodeURIComponent(prompt);
16 const url = `https://maxm-imggenurl.web.val.run/${encodedPrompt}`;
17 setImageUrl(url);
18 } catch (err) {
19 setError("Failed to generate image. Please try again.");
20 } finally {
21 setIsLoading(false);
25 return (
26 <div className="container">
27 <h1>π¨ AI Image Generator</h1>
28 <div className="input-group">
29 <input
31 value={prompt}
32 onChange={(e) => setPrompt(e.target.value)}
33 placeholder="Describe the image you want to see..."
34 disabled={isLoading}
35 />
36 <button onClick={generateImage} disabled={isLoading || !prompt}>
37 {isLoading ? "Generating..." : "Generate Image"}
38 </button>
39 </div>
40 {error && <div className="error">{error}</div>}
41 {imageUrl && (
42 <div className="image-container">
43 <img src={imageUrl} alt={prompt} />
44 </div>
45 )}
64 <html>
65 <head>
66 <title>AI Image Generator</title>
67 <meta name="viewport" content="width=device-width, initial-scale=1">
68 <style>${css}</style>
121 }
122
123 .image-container {
124 margin: 2rem 0;
125 }
126
127 .image-container img {
128 max-width: 100%;
129 height: auto;
1Code from https://deno.com/blog/build-image-resizing-api
2
3Useful for compressing an image before sending to chatgpt4v, for example
1import { ImageMagick, initializeImageMagick, MagickGeometry } from "https://deno.land/x/imagemagick_deno@0.0.14/mod.ts";
2
3export async function modifyImage(
4 file: File,
5 params: { width: number; height: number },
6) {
7 const imageBuffer = new Uint8Array(await file.arrayBuffer());
8 const sizingData = new MagickGeometry(
9 params.width,
12 sizingData.ignoreAspectRatio = params.height > 0 && params.width > 0;
13 return new Promise<File>((resolve) => {
14 ImageMagick.read(imageBuffer, (image) => {
15 image.resize(sizingData);
16 image.write((data) => resolve(new File([data], file.name, { type: file.type })));
17 });
18 });
1Code from https://deno.com/blog/build-image-resizing-api
2
3Useful for compressing an image before sending to chatgpt4v, for example
1import { ImageMagick, initializeImageMagick, MagickGeometry } from "https://deno.land/x/imagemagick_deno@0.0.14/mod.ts";
2
3export async function modifyImage(
4 file: File,
5 params: { width: number; height: number },
6) {
7 const imageBuffer = new Uint8Array(await file.arrayBuffer());
8 const sizingData = new MagickGeometry(
9 params.width,
12 sizingData.ignoreAspectRatio = params.height > 0 && params.width > 0;
13 return new Promise<File>((resolve) => {
14 ImageMagick.read(imageBuffer, (image) => {
15 image.resize(sizingData);
16 image.write((data) => resolve(new File([data], file.name, { type: file.type })));
17 });
18 });
1Ever wonder how GitHub generates their images when you share a repo on social media?
2
3In this example we're using satori and a Deno-friendly SVG WASM creating an OpenGraph image dynamically. E.g. this image can be used when sharing a website, and it'll show up in iMessage or Twitter / other socials.
4
5Generated images are cached in Valtown's Blob system.
6
7To check metatags, you can use https://metatags.io/?url=https://yawnxyz-og.web.val.run
114 "src": "https://maxm-imggenurl.web.val.run/ios-app-icon-192x192",
115 "sizes": "192x192",
116 "type": "image/png"
117 },
118 {
119 "src": "https://maxm-imggenurl.web.val.run/ios-app-icon-512x512",
120 "sizes": "512x512",
121 "type": "image/png"
122 }
123 ]
11 </div>
12 <div className="card-body">
13 {content.cover_image && (
14 <img src={content.cover_image} alt={content.title} className="cover-image" />
15 )}
16 <p className="id"><strong>ID:</strong> {content.id}</p>
247}
248
249.cover-image {
250 width: 100%;
251 height: 200px;
