Val Town Code SearchReturn to Val Town

19      "name": "Thomas Davis",
20      "label": "Web Developer",
21      "image": "https://avatars0.githubusercontent.com/u/416209?s=460&u=38f220a2c9c658141804f881c334c594eb1642ac&v=4",
22      "summary":
23        "I'm a full stack web developer who can build apps from the ground up. I've worked mostly at startups so I am used to wearing many hats. I am a very product focused developer who prioritizes user feedback first and foremost. I'm generally very flexible when investigating new roles. ",

1import { ImageMagick, initializeImageMagick, MagickGeometry } from "https://deno.land/x/imagemagick_deno@0.0.14/mod.ts";
2
3export async function modifyImage(
4  input: Uint8Array | "logo:",
5) {
6  return new Promise<File>((resolve) => {
7    ImageMagick.read(input, (image) => {
8      image.trim();
9      image.repage();
10      image.write((data) => resolve(new File([data], "logo.png", { type: "image/png" })));
11    });
12  });

1Code from https://deno.com/blog/build-image-resizing-api
2
3Useful for compressing an image before sending to chatgpt4v, for example

1import {
2  ImageMagick,
3  initializeImageMagick,
4  Magick,
5  MagickFormat,
6  Quantum,
7} from "https://esm.sh/@imagemagick/magick-wasm";
8
9const resp = await fetch("https://esm.sh/@imagemagick/magick-wasm@0.0.29/dist/magick.wasm");
10const wasmBytes = await resp.arrayBuffer();
11
12initializeImageMagick(wasmBytes).then(() => {
13  console.log(Magick.imageMagickVersion);
14  console.log("Delegates:", Magick.delegates);
15  console.log("Features:", Magick.features);
17
18  console.log("");
19  ImageMagick.read("logo:", image => {
20    image.resize(100, 100);
21    image.blur(1, 5);
22    console.log(image.toString());
23
24    image.write(MagickFormat.Jpeg, data => {
25      console.log(data.length);
26    });

23      "<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" version=\"1.1\" ",
24    ),
25    { headers: { "Content-Type": "image/svg+xml" } },
26  );
27}

14};
15
16const promptKey = 'imagePromptValue';
17
18export function updateForm() {
45
46    const model = document.getElementById('model').value;
47    const imageSize = document.getElementById('image_size')?.value;
48    const prompt = document.getElementById('prompt').value;
49
59    loadingShimmer.className = 'loading-shimmer';
60
61    const imageFooter = document.createElement('div');
62    imageFooter.className = 'image-footer';
63
64    const modelElement = document.createElement('p');
71    removeButton.onclick = () => loadingContainer.remove();
72
73    imageFooter.appendChild(modelElement);
74    imageFooter.appendChild(removeButton);
75
76    loadingContainer.appendChild(loadingShimmer);
77    loadingContainer.appendChild(imageFooter);
78    resultDiv.prepend(loadingContainer);
79
87        'landscape_16_9': 16 / 9
88    };
89    const aspectRatio = aspectRatios[imageSize] || 1; // Default to 1 if imageSize is not found
90    const containerWidth = loadingContainer.offsetWidth;
91    loadingShimmer.style.height = `${containerWidth / aspectRatio}px`;
97    const guidanceScale = document.getElementById('guidance_scale')?.value;
98    const seed = document.getElementById('seed')?.value;
99    const numImages = document.getElementById('num_images')?.value;
100    const enableSafetyChecker = document.getElementById('enable_safety_checker')?.checked;
101    const syncMode = document.getElementById('sync_mode')?.checked;
108        prompt,
109        negative_prompt: negativePrompt || undefined,
110        image_size: imageSize,
111        num_inference_steps: numInferenceSteps ? parseInt(numInferenceSteps) : undefined,
112        guidance_scale: guidanceScale ? parseFloat(guidanceScale) : undefined,
113        seed: seed ? parseInt(seed) : undefined,
114        num_images: numImages ? parseInt(numImages) : undefined,
115        enable_safety_checker: enableSafetyChecker !== undefined ? enableSafetyChecker : undefined,
116        sync_mode: syncMode !== undefined ? syncMode : undefined,
119    };
120
121    const response = await fetch('/generate-image', {
122        method: 'POST',
123        headers: {
128
129    const data = await response.json();
130    handleImageResponse(data, imageSize, model);
131}
132
133function handleImageResponse(data, imageSize, model) {
134    const resultDiv = document.getElementById('result');
135
136    if (data.imageUrls) {
137        data.imageUrls.forEach((imageUrl, index) => {
138            const imgElement = new Image();
139            imgElement.src = imageUrl;
140            imgElement.alt = `Generated Image ${index + 1}`;
141            imgElement.style.display = 'none';
142
147                loadingShimmer.remove();
148                imgElement.style.display = 'block';
149                loadingContainer.insertBefore(imgElement, loadingContainer.querySelector('.image-footer'));
150            };
151
173    updateForm();
174    const modelElement = document.getElementById('model');
175    const formElement = document.getElementById('imageForm');
176    const resetButton = document.getElementById('resetButton');
177

3Outputs:
4```text
5ImageMagick 7.1.1-30 Q8 x86_64 dd459b01f:20240407 https://imagemagick.org
6Delegates: freetype heic jng jp2 jpeg jxl lcms lqr openexr png raw tiff webp xml zlib
7Features: Cipher

19  <Url type="text/html" method="get" template="https://janpaul123-valtownsemanticsearch.web.val.run/search?q={searchTerms}"/>
20  <Url type="application/opensearchdescription+xml" template="https://janpaul123-valtownsemanticsearch.web.val.run/opensearch.xml"/>
21  <Image height="16" width="16" type="image/png">https://pomdtr-favicons.web.val.run/val-town</Image>
22  <moz:SearchForm>https://janpaul123-valtownsemanticsearch.web.val.run/search</moz:SearchForm>
23</OpenSearchDescription>`,

112    }
113
114    .image-container {
115        display: flex;
116        flex-direction: column;
120    }
121
122    .image-footer {
123        display: flex;
124        justify-content: space-between;

1import { generateImageHandler } from 'https://esm.town/v/iamseeley/generateImageHandler';
2import { realtimeGenerateImageHandler } from 'https://esm.town/v/iamseeley/realtimeGenerateImageHandler';
3import { formStyles } from "https://esm.town/v/iamseeley/formStyles";
4
9    <meta charset="UTF-8">
10    <meta name="viewport" content="width=device-width, initial-scale=1.0">
11    <title>Image Generator</title>
12    <style>
13    ${formStyles}
16<body>
17    <header>
18      <h2>Text to Image Playground</h2>
19      <a target="blank" href="https://fal.ai">fal.ai</a>
20    </header>
25    </select> -->
26    
27    <form id="imageForm">
28        <label for="model">Model:</label>
29        <select id="model" name="model">
40        </div>
41        <div class="buttons">
42            <button type="submit">Generate Image</button>
43            <button type="button" id="resetButton">Reset</button>
44        </div>
63            const type = this.value;
64            if (type === 'regular') {
65                document.getElementById('imageForm').style.display = 'block';
66                document.getElementById('realtimeForm').style.display = 'none';
67            } else {
68                document.getElementById('imageForm').style.display = 'none';
69                document.getElementById('realtimeForm').style.display = 'block';
70            }
74        window.addEventListener('DOMContentLoaded', (event) => {
75            document.getElementById('generationType').value = 'regular';
76            document.getElementById('imageForm').style.display = 'block';
77            document.getElementById('realtimeForm').style.display = 'none';
78        });
90      status: 200,
91    });
92  } else if (req.method === 'POST' && url.pathname === '/generate-image') {
93    return generateImageHandler(req);
94  // } else if (req.method === 'POST' && url.pathname === '/realtime-generate-image') {
95  //   return realtimeGenerateImageHandler(req);
96  } else {
97    return new Response('Not Found', { status: 404 });