Val Town Code Search

valtownsemanticsearch main.tsx1 match

@janpaul123•Updated 10 months ago

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>`,

formStyles main.tsx2 matches

@iamseeley•Updated 10 months ago

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;

textToImagePlayground main.tsx13 matches

@iamseeley•Updated 10 months ago

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

realtimeFormLogic main.tsx16 matches

@iamseeley•Updated 10 months ago

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

realtimeGenerateImageHandler main.tsx13 matches

@iamseeley•Updated 10 months ago

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      }

realtimeFormLogic README.md1 match

@iamseeley•Updated 10 months ago

1Migrated from folder: image_gen/realtimeFormLogic

realtimeGenerateImageHandler README.md1 match

@iamseeley•Updated 10 months ago

1Migrated from folder: image_gen/realtimeGenerateImageHandler

generateImageHandler main.tsx7 matches

@iamseeley•Updated 10 months ago

5});
6
7export const generateImageHandler = async (req: Request): Promise<Response> => {
8  try {
9    const {
12      prompt,
13      negative_prompt = "",
14      image_size,
15      num_inference_steps,
16      guidance_scale,
17      seed,
18      num_images,
19      enable_safety_checker,
20      sync_mode,
28        prompt,
29        negative_prompt,
30        image_size,
31        num_inference_steps: parseInt(num_inference_steps),
32        guidance_scale: guidance_scale ? parseFloat(guidance_scale) : undefined,
33        seed: seed ? parseInt(seed) : undefined,
34        num_images: parseInt(num_images),
35        enable_safety_checker: enable_safety_checker !== undefined ? enable_safety_checker : true,
36        sync_mode: sync_mode !== undefined ? sync_mode : undefined,
40    });
41
42    const imageUrls = result.images.map((image: any) => image.url);
43
44    return new Response(JSON.stringify({ imageUrls }), {
45      headers: { "Content-Type": "application/json" },
46      status: 200,

calories main.tsx5 matches

@chriswmartin•Updated 10 months ago

1/** @jsxImportSource npm:hono@3/jsx */
2import { fileToDataURL } from "https://esm.town/v/stevekrouse/fileToDataURL";
3import { modifyImage } from "https://esm.town/v/stevekrouse/modifyImage";
4import { chat } from "https://esm.town/v/stevekrouse/openai";
5import { Hono } from "npm:hono@3";
50                type="file"
51                id="file"
52                accept="image/*"
53                name="file"
54              />
115      {
116        role: "user",
117        content: `What is the calorie count in this image?`,
118      },
119      {
120        role: "user",
121        content: [{
122          type: "image_url",
123          image_url: {
124            url: dataURL,
125          },

fileToDataURL README.md1 match

@chriswmartin•Updated 10 months ago

1# File to Data URL
2
3Was built for uploading base64 encoded images to GPT4v

« Previous

1...576 577 578 579 580 581 582...623

Projects

View all 97 projects

brainrot_image_gen1 file match

@dcm31•Updated 1 week ago

Generate images for Italian Brainrot characters using FAL AI

Users

View all 2 users

@Atiq1 project

Updated 3 days ago

"Focal Lens with Atig Wazir" "Welcome to my photography journey! I'm Atiq Wazir, a passionate photographer capturing life's beauty one frame at a time. Explore my gallery for stunning images, behind-the-scenes stories, and tips & tricks to enhance your own

Documentation

View all 7 documentation results

Val Town Code Search Return to Val Town

valtownsemanticsearch main.tsx1 match

formStyles main.tsx2 matches

textToImagePlayground main.tsx13 matches

realtimeFormLogic main.tsx16 matches

realtimeGenerateImageHandler main.tsx13 matches

realtimeFormLogic README.md1 match

realtimeGenerateImageHandler README.md1 match

generateImageHandler main.tsx7 matches

calories main.tsx5 matches

fileToDataURL README.md1 match

Projects

image-inpainting1 file match

brainrot_image_gen1 file match

Users

@Chrimage1 project

@Atiq1 project

Documentation

Val Town Code SearchReturn to Val Town

valtownsemanticsearchmain.tsx1 match

formStylesmain.tsx2 matches

textToImagePlaygroundmain.tsx13 matches

realtimeFormLogicmain.tsx16 matches

realtimeGenerateImageHandlermain.tsx13 matches

realtimeFormLogicREADME.md1 match

realtimeGenerateImageHandlerREADME.md1 match

generateImageHandlermain.tsx7 matches

caloriesmain.tsx5 matches

fileToDataURLREADME.md1 match

Projects

image-inpainting1 file match

brainrot_image_gen1 file match

Users

@Chrimage1 project

@Atiq1 project

Documentation

Val Town Code Search Return to Val Town

valtownsemanticsearch main.tsx1 match

formStyles main.tsx2 matches

textToImagePlayground main.tsx13 matches

realtimeFormLogic main.tsx16 matches

realtimeGenerateImageHandler main.tsx13 matches

realtimeFormLogic README.md1 match

realtimeGenerateImageHandler README.md1 match

generateImageHandler main.tsx7 matches

calories main.tsx5 matches

fileToDataURL README.md1 match