Val Town Code SearchReturn to Val Town

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 });

8  promptInput.addEventListener("input", () => {
9    clearTimeout(debounceTimeout);
10    debounceTimeout = setTimeout(generateImages, 500);
11  });
12
13  async function generateImages() {
14    resultDiv.innerHTML = ''; // Clear previous results
15
25
26    try {
27      const response = await fetch('/realtime-generate-image', {
28        method: 'POST',
29        headers: {
42      if (data.urls && Array.isArray(data.urls)) {
43        data.urls.forEach(url => {
44          appendImage(url, model);
45        });
46      } else {
51        console.log('Request aborted');
52      } else {
53        console.error('Error generating images:', error);
54        // Handle the error, display an error message, etc.
55      }
59  }
60
61  function appendImage(imageUrl, model) {
62    const imgElement = new Image();
63    imgElement.src = imageUrl;
64    imgElement.alt = "Generated Image";
65    imgElement.className = 'generated-image';
66
67    const loadingContainer = document.createElement('div');
71    loadingShimmer.className = 'loading-shimmer';
72
73    const imageFooter = document.createElement('div');
74    imageFooter.className = 'image-footer';
75
76    const modelElement = document.createElement('p');
83    removeButton.onclick = () => loadingContainer.remove();
84
85    imageFooter.appendChild(modelElement);
86    imageFooter.appendChild(removeButton);
87
88    loadingContainer.appendChild(loadingShimmer);
89    loadingContainer.appendChild(imageFooter);
90    resultDiv.appendChild(loadingContainer);
91
93      loadingShimmer.remove();
94      imgElement.style.display = 'block';
95      loadingContainer.insertBefore(imgElement, imageFooter);
96    };
97

5});
6
7export const realtimeGenerateImageHandler = async (req: Request): Promise<Response> => {
8  const { prompt, model } = await req.json();
9
18
19      try {
20        console.log("Starting real-time image generation...");
21
22        const result = await new Promise((resolve, reject) => {
27            },
28            onError: (error) => {
29              console.error("Error during real-time image generation:", error);
30              reject(error);
31            },
35          connection.send({
36            prompt,
37            num_images: 4,
38          });
39        });
41        console.log("Generation completed. Result:", result);
42
43        if (result.images && Array.isArray(result.images)) {
44          const imageUrls = result.images.map((imageObj: any) => {
45            if (imageObj && imageObj.url) {
46              return imageObj.url; // Assuming there's a 'url' property in the image object
47            } else {
48              console.warn("Invalid image object:", imageObj);
49              return null; // or handle invalid case accordingly
50            }
51          });
52
53          write(JSON.stringify({ urls: imageUrls }));
54        } else {
55          console.error("Invalid or missing 'images' property in the result. Result:", result);
56          write(JSON.stringify({ error: "Invalid response received from the server." }));
57        }
58
59        console.log("All image data sent");
60      } catch (error) {
61        console.error("Error in realtimeGenerateImageHandler:", error);
62        write(JSON.stringify({ error: error.message }));
63      }

1Migrated from folder: image_gen/realtimeFormLogic

1Migrated from folder: image_gen/realtimeGenerateImageHandler