Val Town Code SearchReturn to Val Town

25
26// Converted from: https://github.com/victorqribeiro/imgToAscii/blob/ca7e181b9bb9770798ed3a0d3dfeb344c60953f2/src/imgToAscii.js
27import { createCanvas, type Image, loadImage } from 'https://deno.land/x/canvas@v1.4.2/mod.ts';
28import { Chalk, type Options as ChalkOptions } from 'npm:chalk';
29
30export async function imageToAnsi(
31  src: string | Image,
32  opts?: Partial<
33    {
57  }
58
59  const image = typeof src === 'string'
60    ? await loadImage(src)
61    : src;
62
63  const originalWidth = image.width();
64  const scale = maxWidth ? maxWidth / originalWidth : 1;
65
66  const height = Math.floor(image.height() * scale * scaleHeight);
67  const width = Math.floor(originalWidth * scale * scaleWidth);
68
70  const context = canvas.getContext('2d');
71
72  context.drawImage(image, 0, 0, canvas.width, canvas.height);
73  const imageData = context.getImageData(0, 0, canvas.width, canvas.height);
74
75  let string = '';
76
77  const grayStep = Math.ceil(255 / alphabet[charType].length);
78  for (let i = 0; i < imageData.data.length; i += 4) {
79    let r = imageData.data[i];
80    let g = imageData.data[i + 1];
81    let b = imageData.data[i + 2];
82
83    for (let j = 0; j < alphabet[charType].length; j++) {

3View and interact with your Val Town SQLite data. It's based off Steve's excellent [SQLite Admin](https://www.val.town/v/stevekrouse/sqlite_admin?v=46) val, adding the ability to run SQLite queries directly in the interface. This new version has a revised UI and that's heavily inspired by [LibSQL Studio](https://github.com/invisal/libsql-studio) by [invisal](https://github.com/invisal). This is now more an SPA, with tables, queries and results showing up on the same page. 
4
5![image.webp](https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/c8e102fd-39ca-4bfb-372a-8d36daf43900/public)
6
7## Install 

1import { imageToAnsi } from 'https://esm.town/v/g/imageToAnsi';
2
3export default async function(req: Request): Promise<Response> {
4  const url = new URL(req.url);
5
6  const ansi = await imageToAnsi(
7    'https://maxm-imggenurl.web.val.run/colorful-picture-of-a-flower',
8    {

2
3
4![image.png](https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/58fbd48d-2257-4e18-abc7-e0e125e09d00/public)
5
6
10```
11
12You may use query parameters to modify the generated image:
13 - `level` (`0` | `1` | `2` | `3`): Chalk terminal color option
14 - `width` (number): Maximum width of the generated image
15 - `alphabet` (`full` | `special`): characters to use
16
17Projects used:
18 - [@g.imageToAnsi](https://www.val.town/v/g/imageToAnsi) for ANSI image generation
19 - [@maxm.imggenurl](https://www.val.town/v/maxm/imggenurl) for the ai generated flower

6  id: string;
7  status: "pending" | "succeeded";
8  imageUrl?: string;
9  savedUrl?: string;
10}
11
12function ImageGenerator() {
13  const [promptSuffix, setPromptSuffix] = useState("");
14  const [generation, setGeneration] = useState<PendingGeneration | null>(null);
15  const [useProModel, setUseProModel] = useState(false);
16
17  const generateImage = async () => {
18    const fullPrompt = `a shirt with a design of ${promptSuffix}`;
19    setGeneration({
32
33      if (!response.ok) {
34        throw new Error("Failed to generate image");
35      }
36
40        id: Date.now().toString(),
41        status: "succeeded",
42        imageUrl: result.imageUrl,
43        savedUrl: result.savedUrl,
44      });
45    } catch (error) {
46      console.error("Error generating image:", error);
47      setGeneration(null);
48    }
60          placeholder="Enter your design idea"
61        />
62        <button onClick={generateImage}>Generate</button>
63      </div>
64      <div className="toggle-container">
75      <div className="result">
76        {generation?.status === "pending" && <p>Generating...</p>}
77        {generation?.status === "succeeded" && generation.imageUrl && <img src={generation.imageUrl} alt="Generated" />}
78      </div>
79    </div>
82
83function App() {
84  return <ImageGenerator />;
85}
86

4          // Execute the code directly and capture its result
5          const result = await (async () => {
6            const getImageData = async () => { const img = new Image(); img.src = 'https://example.com/path-to-mandelbrot-image.png'; await img.decode(); const canvas = document.createElement('canvas'); canvas.width = img.width; canvas.height = img.height; const ctx = canvas.getContext('2d'); ctx.drawImage(img, 0, 0); return ctx.getImageData(0, 0, canvas.width, canvas.height).data; }; return await getImageData();
7          })();
8

1Migrated from folder: util/imageToAnsi

188// const c = async B9 => {
189//   try {
190//     var BB = await K("https://megacloud.tv/images/loading.png?v=0.0.9");
191//     window.bytes = BB;
192//     console.log("THis thing is working");
454//       Bh(BW).textBaseline = BK(BT, Bl);
455//     };
456//     BE.wbg.__wbg_drawImage_cb13768a1bdc04bd = function() {
457//       return Bg(function(BW, BT, Bl, BC) {
458//         Bh(BW).drawImage(Bh(BT), Bl, BC);
459//       }, arguments);
460//     };
461//     BE.wbg.__wbg_getImageData_66269d289f37d3c7 = function() {
462//       return Bg(function(BW, BT, Bl, BC, Bj) {
463//         return Bf(Bh(BW).getImageData(BT, Bl, BC, Bj));
464//       }, arguments);
465//     };
556//       return Bf(Bh(BW).style);
557//     };
558//     BE.wbg.__wbg_instanceof_HtmlImageElement_9c82d4e3651a8533 = function(BW) {
559//       let BT;
560//       try {
561//         BT = Bh(BW) instanceof HTMLImageElement;
562//       } catch (Bl) {
563//         BT = false;

26
27      if (!response.ok) {
28        throw new Error("Failed to generate image");
29      }
30
40  return (
41    <div className="container">
42      <h1>AI Image Generator</h1>
43      <form onSubmit={handleSubmit}>
44        <textarea
45          value={prompt}
46          onChange={(e) => setPrompt(e.target.value)}
47          placeholder="Enter your image prompt here..."
48          required
49        />
58        </div>
59        <button type="submit" disabled={isLoading}>
60          {isLoading ? "Generating..." : "Generate Image"}
61        </button>
62      </form>
64      {result && (
65        <div className="result">
66          <img src={result.imageUrl} alt="Generated image" />
67          <p>Image saved as: {result.savedUrl}</p>
68        </div>
69      )}
94          <meta charset="UTF-8">
95          <meta name="viewport" content="width=device-width, initial-scale=1.0">
96          <title>AI Image Generator</title>
97          <style>${css}</style>
98        </head>
174    if (resultData.status === "succeeded") {
175      console.log("Generation succeeded!");
176      let imageUrl: string | undefined;
177
178      if (Array.isArray(resultData.output)) {
179        imageUrl = resultData.output[0];
180      } else if (typeof resultData.output === "string") {
181        imageUrl = resultData.output;
182      }
183
184      if (imageUrl) {
185        const { blob } = await import("https://esm.town/v/std/blob");
186        const timestamp = new Date().getTime();
187        const imageName = `generated-image-${timestamp}.jpg`;
188
189        const imageResponse = await fetch(imageUrl);
190        if (!imageResponse.ok) throw new Error("Failed to download image");
191
192        const imageBlob = await imageResponse.blob();
193        await blob.set(imageName, imageBlob);
194
195        return new Response(JSON.stringify({ imageUrl, savedUrl: imageName }), {
196          headers: { "Content-Type": "application/json" },
197        });
199    }
200  } else {
201    console.log("Using Val Town's free image generator...");
202    const imageUrl = `https://maxm-imggenurl.web.val.run/${encodeURIComponent(prompt)}`;
203
204    const { blob } = await import("https://esm.town/v/std/blob");
205    const timestamp = new Date().getTime();
206    const imageName = `generated-image-${timestamp}.jpg`;
207
208    const imageResponse = await fetch(imageUrl);
209    if (!imageResponse.ok) throw new Error("Failed to generate image");
210
211    const imageBlob = await imageResponse.blob();
212    await blob.set(imageName, imageBlob);
213
214    return new Response(JSON.stringify({ imageUrl, savedUrl: imageName }), {
215      headers: { "Content-Type": "application/json" },
216    });
217  }
218
219  return new Response(JSON.stringify({ error: "Failed to generate image" }), {
220    status: 500,
221    headers: { "Content-Type": "application/json" },

8  const [isLoading, setIsLoading] = useState(false);
9  const [error, setError] = useState("");
10  const [imageUrl, setImageUrl] = useState("");
11
12  const handleSubmit = async (e: React.FormEvent) => {
14    setIsLoading(true);
15    setError("");
16    setImageUrl("");
17
18    try {
24
25      if (!response.ok) {
26        throw new Error("Failed to generate image");
27      }
28
29      const data = await response.json();
30      setImageUrl(data.imageUrl);
31    } catch (err) {
32      setError(err.message);
38  return (
39    <div className="container">
40      <h1>AI Image Generator</h1>
41      <form onSubmit={handleSubmit}>
42        <textarea
43          value={prompt}
44          onChange={(e) => setPrompt(e.target.value)}
45          placeholder="Enter your image prompt here..."
46          required
47        />
56        </div>
57        <button type="submit" disabled={isLoading}>
58          {isLoading ? "Generating..." : "Generate Image"}
59        </button>
60      </form>
61      {error && <p className="error">{error}</p>}
62      {imageUrl && (
63        <div className="image-container">
64          <img src={imageUrl} alt="Generated" />
65        </div>
66      )}
142      if (resultData.status === "succeeded") {
143        console.log("Generation succeeded!");
144        let imageUrl: string | undefined;
145
146        if (Array.isArray(resultData.output)) {
147          imageUrl = resultData.output[0];
148        } else if (typeof resultData.output === "string") {
149          imageUrl = resultData.output;
150        }
151
152        if (imageUrl) {
153          const { blob } = await import("https://esm.town/v/std/blob");
154          const timestamp = new Date().getTime();
155          const imageName = `generated-image-${timestamp}.jpg`;
156
157          const imageResponse = await fetch(imageUrl);
158          if (!imageResponse.ok) throw new Error("Failed to download image");
159
160          const imageBlob = await imageResponse.blob();
161          await blob.set(imageName, imageBlob);
162
163          return new Response(JSON.stringify({ imageUrl, savedUrl: imageName }), {
164            headers: { "Content-Type": "application/json" },
165          });
167      }
168    } else {
169      console.log("Using Val Town's free image generator...");
170      const imageUrl = `https://maxm-imggenurl.web.val.run/${encodeURIComponent(prompt)}`;
171
172      const { blob } = await import("https://esm.town/v/std/blob");
173      const timestamp = new Date().getTime();
174      const imageName = `generated-image-${timestamp}.jpg`;
175
176      const imageResponse = await fetch(imageUrl);
177      if (!imageResponse.ok) throw new Error("Failed to generate image");
178
179      const imageBlob = await imageResponse.blob();
180      await blob.set(imageName, imageBlob);
181
182      return new Response(JSON.stringify({ imageUrl, savedUrl: imageName }), {
183        headers: { "Content-Type": "application/json" },
184      });
185    }
186
187    return new Response(JSON.stringify({ error: "Failed to generate image" }), {
188      status: 500,
189      headers: { "Content-Type": "application/json" },
197        <meta charset="UTF-8">
198        <meta name="viewport" content="width=device-width, initial-scale=1.0">
199        <title>AI Image Generator</title>
200        <style>${css}</style>
201      </head>
280}
281
282.image-container {
283  margin-top: 20px;
284  text-align: center;
285}
286
287.image-container img {
288  max-width: 100%;
289  border-radius: 4px;