Val Town Code SearchReturn to Val Town

39        <div class="container">
40          <div class="file-group" id="original">
41            <input type="file" id="fileInput" multiple accept="image/*">
42            <button id="addButton">+</button>
43          </div>
56                group.className = 'file-group';
57                
58                // Create image preview if it's an image file
59                if (file.type.startsWith('image/')) {
60                  const preview = document.createElement('img');
61                  preview.className = 'preview';

26    
27    const file = e.dataTransfer.files[0];
28    if (!file || !file.type.startsWith('image/png')) {
29      setError("Please drop a PNG image file");
30      setLoading(false);
31      return;
33
34    if (file.size > 5 * 1024 * 1024) { // 5MB limit
35      setError("Image is too large. Please use an image under 5MB.");
36      setLoading(false);
37      return;
48      // Get metadata from server
49      const formData = new FormData();
50      formData.append('image', file);
51      
52      const response = await fetch('?process=true', {
84        <div className="dropzone-content">
85          <span className="icon">📄</span>
86          <p>{loading ? 'Processing...' : 'Drag and drop a PNG image here'}</p>
87          <small>Maximum file size: 5MB</small>
88        </div>
131
132export default async function server(req: Request): Promise<Response> {
133  // Handle image processing
134  if (req.method === 'POST' && new URL(req.url).searchParams.get('process')) {
135    try {
136      const formData = await req.formData();
137      const imageFile = formData.get('image') as File;
138      
139      if (!imageFile) {
140        return new Response('No image provided', { status: 400 });
141      }
142
143      if (!imageFile.type.startsWith('image/png')) {
144        return new Response('Only PNG images are supported', { status: 400 });
145      }
146
147      const arrayBuffer = await imageFile.arrayBuffer();
148      const bytes = new Uint8Array(arrayBuffer);
149
162        height,
163        fileSize: bytes.length,
164        type: imageFile.type,
165        name: imageFile.name
166      }), {
167        headers: {
171
172    } catch (error) {
173      return new Response(`Failed to process image: ${error.message}`, { status: 500 });
174    }
175  }

480  <meta charset="UTF-8">
481  <meta name="viewport" content="width=device-width, initial-scale=1.0">
482  <link rel="icon" type="image/png" href="https://labspace.ai/ls2-circle.png" />
483  <title>Squishy Form Demo</title>
484  <meta property="og:title" content="Squishy Form Experiment" />
485  <meta property="og:description" content="A form that can parse free-form text, JSON, and table inputs" />
486  <meta property="og:image" content="https://yawnxyz-og.web.val.run/img?link=https://yawnxyz-squishyform.web.val.run&title=Squishy+Form+Demo&subtitle=A+form+that+can+parse+free-form+text,+JSON,+and+table+inputs" />
487  <meta property="og:url" content="https://yawnxyz-squishyform.web.val.run/" />
488  <meta property="og:type" content="website" />
489  <meta name="twitter:card" content="summary_large_image" />
490  <meta name="twitter:title" content="Squishy Form Experiment" />
491  <meta name="twitter:description" content="A form that can parse free-form text, JSON, and table inputs" />
492  <meta name="twitter:image" content="https://yawnxyz-og.web.val.run/img?link=https://yawnxyz-squishyform.web.val.run&title=Squishy+Form+Demo&subtitle=A+form+that+can+parse+free-form+text,+JSON,+and+table+inputs" />
493  <script src="https://cdn.tailwindcss.com"></script>
494  <script src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.30.1/min/vs/loader.js"></script>

165    return new Response(svg, {
166      headers: {
167        "Content-Type": "image/svg+xml",
168      },
169    });

38    <meta property="og:description" content="A tool to help delete bacteria before sepsis deletes us. Part of the ms2 project collecting data on bacteria and mobile genetic elements over time.">
39    <meta name="twitter:description" content="A tool to help delete bacteria before sepsis deletes us. Part of the ms2 project collecting data on bacteria and mobile genetic elements over time.">
40    <link rel="icon" href="https://f2.phage.directory/blogalog/phageray.png" type="image/png">
41    <meta property="og:image" content="https://f2.phage.directory/blogalog/sepsis.png">
42    <meta name="twitter:image" content="https://f2.phage.directory/blogalog/sepsis.png">
43    <script src="https://cdn.tailwindcss.com" > </script>
44    <script src="https://cdnjs.cloudflare.com/ajax/libs/processing.js/1.6.0/processing.min.js"></script>

5let logs: any[] = [];
6php.addEventListener("output", (event: any) => logs.push(...event.detail));
7const script = "<?php header('Content-Type: image/jpeg'); echo \"Hello, world!\"; ";
8const exitCode = await php.run(script);
9console.log({ script, exitCode, logs, foo });

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![b7321ca2cd80899250589b9aa08bc3cae9c7cea276282561194e7fc537259b46.png](https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/311a81bb-18d8-4583-b7e3-64bac326f700/public)
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