Val Town Code Search

sharedMagentaChameleon main.tsx4 matches

@jeffreyyoung•Updated 8 months ago

36    <meta charset="UTF-8">
37    <meta name="viewport" content="width=device-width, initial-scale=1.0">
38    <title>Image Generation Form</title>
39    <style>
40        body {
72<body>
73    <div class="form-container">
74        <input id="description" type="text" placeholder="Image description">
75        <input id="exclude" type="text" placeholder="Things to exclude in the image">
76        <select id="aspect-ratio">
77            <option value="1:1">1:1</option>
85            <option value="5:12">5:12</option>
86        </select>
87        <button onclick="submitForm()">Generate Image</button>
88    </div>
89    <script>

dataUriGenApp main.tsx2 matches

@g•Updated 8 months ago

3 * - File upload through input and drag-and-drop
4 * - Automatic MIME type detection
5 * - Preview of the uploaded file (image, video, audio, or text)
6 * - Copy button to easily copy the generated data URI
7 * 
144    
145    preview.innerHTML = '';
146    if (file.type.startsWith('image/')) {
147      const img = document.createElement('img');
148      img.src = dataUri;

webdavServer README.md1 match

@pomdtr•Updated 8 months ago

3Manage your vals from a webdav client (ex: https://cyberduck.io/)
4
5![image.png](https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/18b895c5-f38b-42ad-321f-47e3c67c2f00/public)
6
7> ⚠️ some webdav operations are not supported, so support can vary between clients.

placeholderKittenImages main.tsx28 matches

@shawnbasquiat•Updated 8 months ago

1// This val creates a publicly accessible kitten image generator using the Val Town image generation API.
2// It supports generating square images with a single dimension parameter or rectangular images with two dimension parameters.
3
4export default async function server(request: Request): Promise<Response> {
13        <meta charset="UTF-8">
14        <meta name="viewport" content="width=device-width, initial-scale=1.0">
15        <title>Kitten Image Generator</title>
16        <style>
17          body {
31            margin-bottom: 20px;
32          }
33          .example-image {
34            display: block;
35            max-width: 100%;
75      </head>
76      <body>
77        <h1>Welcome to the Kitten Image Generator!</h1>
78        <div class="instructions">
79          <p>Use this service to generate cute kitten images of various sizes:</p>
80          <p>For square images: <code>/width</code> (e.g., <code>/400</code> for a 400x400 image)</p>
81          <p>For rectangular images: <code>/width/height</code> (e.g., <code>/400/300</code> for a 400x300 image)</p>
82        </div>
83        <div class="form-container">
84          <h2>Generate a Kitten Image</h2>
85          <form id="kittenForm">
86            <label for="width">Width (64-1024):</label>
91          </form>
92        </div>
93        <p>Here's an example of a generated 400x400 kitten image:</p>
94        <img src="/400" alt="Example 400x400 kitten" class="example-image">
95        <p>Start generating your own kitten images by using the form above or modifying the URL!</p>
96        <script>
97          document.getElementById('kittenForm').addEventListener('submit', function(e) {
111
112  if (parts.length === 1) {
113    // Square image
114    width = height = parseInt(parts[0]);
115  } else if (parts.length === 2) {
116    // Rectangular image
117    width = parseInt(parts[0]);
118    height = parseInt(parts[1]);
119  } else {
120    return new Response('Invalid URL format. Use /width for square images or /width/height for rectangular images.', 
121      { status: 400, headers: { 'Content-Type': 'text/plain' } });
122  }
132
133  const prompt = `A cute kitten, high quality, detailed`;
134  const imageGenerationUrl = `https://maxm-imggenurl.web.val.run/${encodeURIComponent(prompt)}?width=${width}&height=${height}`;
135
136  try {
137    console.log(`Generating image with dimensions: ${width}x${height}`);
138    const imageResponse = await fetch(imageGenerationUrl);
139    console.log(`Response status: ${imageResponse.status}`);
140
141    if (!imageResponse.ok) {
142      throw new Error(`Failed to generate image: ${imageResponse.status} ${imageResponse.statusText}`);
143    }
144
145    const imageBlob = await imageResponse.blob();
146    console.log(`Successfully generated image, size: ${imageBlob.size} bytes`);
147
148    // Return the image as-is, without any processing
149    return new Response(imageBlob, {
150      headers: {
151        'Content-Type': 'image/png',
152        'Cache-Control': 'public, max-age=86400',
153      },
154    });
155  } catch (error) {
156    console.error('Error generating image:', error.message);
157    return new Response(`Failed to generate image: ${error.message}`, { status: 500, headers: { 'Content-Type': 'text/plain' } });
158  }
159}

resizeImageError main.tsx29 matches

@shawnbasquiat•Updated 8 months ago

1// This val creates an image resizing service using the Cloudinary API.
2// It provides a form for users to input the image URL and size, and displays the resized image.
3
4/** @jsxImportSource https://esm.sh/react */
7
8function App() {
9  const [imageUrl, setImageUrl] = useState("");
10  const [size, setSize] = useState("");
11  const [resizedImageUrl, setResizedImageUrl] = useState("");
12
13  const handleSubmit = async (e: React.FormEvent) => {
14    e.preventDefault();
15    const response = await fetch(`?link=${encodeURIComponent(imageUrl)}&size=${size}`);
16    try {
17      if (response.ok) {
18        const blob = await response.blob();
19        setResizedImageUrl(URL.createObjectURL(blob));
20      } else {
21        const errorText = await response.text();
23      }
24    } catch (error) {
25      alert(`Error resizing image: ${error.message}`);
26      console.error("Error details:", error);
27    }
30  return (
31    <div className="container">
32      <h1>Image Resizer</h1>
33      <form onSubmit={handleSubmit}>
34        <div className="form-group">
35          <label htmlFor="imageUrl">Image URL:</label>
36          <input
37            type="url"
38            id="imageUrl"
39            value={imageUrl}
40            onChange={(e) => setImageUrl(e.target.value)}
41            required
42          />
53          />
54        </div>
55        <button type="submit">Resize Image</button>
56      </form>
57      {resizedImageUrl && (
58        <div className="result">
59          <h2>Resized Image:</h2>
60          <img src={resizedImageUrl} alt="Resized" />
61        </div>
62      )}
73
74async function testEndpoint() {
75  const testImageUrl = "https://upload.wikimedia.org/wikipedia/commons/thumb/4/47/PNG_transparency_demonstration_1.png/280px-PNG_transparency_demonstration_1.png";
76  const testSize = "100x100";
77  const cloudinaryUrl = `https://res.cloudinary.com/demo/image/fetch/c_fill,w_100,h_100/${encodeURIComponent(testImageUrl)}`;
78  
79  try {
83      return "Test successful";
84    } else {
85      throw new Error(`Failed to fetch image: ${response.status} ${response.statusText}`);
86    }
87  } catch (error) {
104      <html>
105        <head>
106          <title>Image Resizer</title>
107          <style>${css}</style>
108        </head>
123  }
124
125  const cloudinaryUrl = `https://res.cloudinary.com/demo/image/fetch/c_fill,w_${width},h_${height}/${encodeURIComponent(link)}`;
126
127  try {
128    const imageResponse = await fetch(cloudinaryUrl);
129    
130    if (!imageResponse.ok) {
131      throw new Error(`Failed to fetch image: ${imageResponse.status} ${imageResponse.statusText}`);
132    }
133
134    const contentType = imageResponse.headers.get("content-type");
135    return new Response(imageResponse.body, {
136      headers: {
137        "Content-Type": contentType || "image/jpeg",
138        "Cache-Control": "public, max-age=31536000",
139      },
140    });
141  } catch (error) {
142    console.error("Error fetching or processing image:", error.message, error.stack);
143    return new Response(`Error processing image: ${error.message}. Please ensure the image URL is correct and publicly accessible.`, { status: 500 });
144  }
145}

placeholderImages main.tsx27 matches

@shawnbasquiat•Updated 8 months ago

1// This val creates a kitten image generator using the Val Town image generation API.
2// It supports generating square images with a single dimension parameter or rectangular images with two dimension parameters.
3
4export default async function server(request: Request): Promise<Response> {
13        <meta charset="UTF-8">
14        <meta name="viewport" content="width=device-width, initial-scale=1.0">
15        <title>Kitten Image Generator</title>
16        <style>
17          body {
31            margin-bottom: 20px;
32          }
33          .example-image {
34            display: block;
35            max-width: 100%;
54      </head>
55      <body>
56        <h1>Welcome to the Kitten Image Generator!</h1>
57        <div class="instructions">
58          <p>Use this service to generate cute kitten images of various sizes:</p>
59          <p>For square images: <code>/width</code> (e.g., <code>/400</code> for a 400x400 image)</p>
60          <p>For rectangular images: <code>/width/height</code> (e.g., <code>/400/300</code> for a 400x300 image)</p>
61        </div>
62        <p>Here's an example of a generated 400x400 kitten image:</p>
63        <img src="/400" alt="Example 400x400 kitten" class="example-image">
64        <p>Start generating your own kitten images by modifying the URL!</p>
65      </body>
66      </html>
72
73  if (parts.length === 1) {
74    // Square image
75    width = height = parseInt(parts[0]);
76  } else if (parts.length === 2) {
77    // Rectangular image
78    width = parseInt(parts[0]);
79    height = parseInt(parts[1]);
80  } else {
81    return new Response('Invalid URL format. Use /width for square images or /width/height for rectangular images.', 
82      { status: 400, headers: { 'Content-Type': 'text/plain' } });
83  }
93
94  const prompt = `A cute kitten, high quality, detailed`;
95  const imageGenerationUrl = `https://maxm-imggenurl.web.val.run/${encodeURIComponent(prompt)}?width=${width}&height=${height}`;
96
97  try {
98    console.log(`Generating image with dimensions: ${width}x${height}`);
99    const imageResponse = await fetch(imageGenerationUrl);
100    console.log(`Response status: ${imageResponse.status}`);
101
102    if (!imageResponse.ok) {
103      throw new Error(`Failed to generate image: ${imageResponse.status} ${imageResponse.statusText}`);
104    }
105
106    const imageBlob = await imageResponse.blob();
107    console.log(`Successfully generated image, size: ${imageBlob.size} bytes`);
108
109    // Return the image as-is, without any processing
110    return new Response(imageBlob, {
111      headers: {
112        'Content-Type': 'image/png',
113        'Cache-Control': 'public, max-age=86400',
114      },
115    });
116  } catch (error) {
117    console.error('Error generating image:', error.message);
118    return new Response(`Failed to generate image: ${error.message}`, { status: 500, headers: { 'Content-Type': 'text/plain' } });
119  }
120}

SocialMediaDashboardV1 main.tsx15 matches

@shawnbasquiat•Updated 8 months ago

11  const [profiles, setProfiles] = useState([]);
12  const [currentIndex, setCurrentIndex] = useState(0);
13  const [newProfile, setNewProfile] = useState({ username: '', image_url: '', link: '', followers: '' });
14  const [message, setMessage] = useState('');
15
52    if (response.ok) {
53      setMessage('New profile added');
54      setNewProfile({ username: '', image_url: '', link: '', followers: '' });
55      fetchProfiles();
56    } else {
97            <div className="profile-card-content">
98              <img 
99                src={currentProfile.image_url} 
100                alt={currentProfile.username} 
101                onError={(e) => { 
126          />
127          <input
128            type="url" name="image_url" placeholder="Image URL"
129            value={newProfile.image_url} onChange={handleInputChange} required
130          />
131          <input
160    CREATE TABLE IF NOT EXISTS ${KEY}_profiles_${SCHEMA_VERSION} (
161      id INTEGER PRIMARY KEY AUTOINCREMENT,
162      image_url TEXT NOT NULL,
163      username TEXT NOT NULL,
164      link TEXT NOT NULL,
192  if (url.pathname === '/add-sample-profiles' && request.method === 'POST') {
193    const sampleProfiles = [
194      { image_url: 'http://placehold.co/250', username: 'user1', link: 'https://example.com/user1', followers: 1000 },
195      { image_url: 'http://placehold.co/250', username: 'user2', link: 'https://example.com/user2', followers: 2000 },
196      { image_url: 'http://placehold.co/250', username: 'user3', link: 'https://example.com/user3', followers: 3000 },
197    ];
198
199    for (const profile of sampleProfiles) {
200      await sqlite.execute(
201        `INSERT INTO ${KEY}_profiles_${SCHEMA_VERSION} (image_url, username, link, followers) VALUES (?, ?, ?, ?)`,
202        [profile.image_url, profile.username, profile.link, profile.followers]
203      );
204    }
213
214  if (url.pathname === '/add-profile' && request.method === 'POST') {
215    const { username, image_url, link, followers } = await request.json();
216    if (!username || !image_url || !link || !followers) {
217      return new Response('Missing required fields', { status: 400 });
218    }
219    try {
220      await sqlite.execute(
221        `INSERT INTO ${KEY}_profiles_${SCHEMA_VERSION} (image_url, username, link, followers) VALUES (?, ?, ?, ?)`,
222        [image_url, username, link, parseInt(followers)]
223      );
224      return new Response('Profile added successfully');

iangac_validator main.tsx5 matches

@pfeffunit•Updated 8 months ago

5
6function analyzeJSON(jsonData) {
7  const images = jsonData.images;
8  const allIds = new Set(images.map(img => img.id));
9  const referencedIds = new Set();
10  const errors = [];
12
13  // Check all references and track referenced IDs
14  images.forEach(image => {
15    image.related.forEach(ref => {
16      if (!allIds.has(ref)) {
17        errors.push(`Error: '${ref}' in '${image.id}' related list doesn't have a matching ID`);
18      }
19      referencedIds.add(ref);

genimage main.tsx54 matches

@motyar•Updated 8 months ago

1// This program creates an image generation service using the maxm-imggenurl API.
2// It provides a simple HTML interface for users to enter a prompt and generate an image.
3// The generated images are displayed in a grid, and clicking on an image shows a popup with the image and prompt.
4
5/** @jsxImportSource https://esm.sh/react */
7import { createRoot } from "https://esm.sh/react-dom/client";
8
9// Define a type for our generated images
10type GeneratedImage = { imageUrl: string; prompt: string };
11
12function App() {
13  const [prompt, setPrompt] = useState("");
14  const [imageUrl, setImageUrl] = useState("");
15  const [loading, setLoading] = useState(false);
16
17  const generateImage = async () => {
18    setLoading(true);
19    try {
20      const response = await fetch(`/generate?prompt=${encodeURIComponent(prompt)}`, { method: 'POST' });
21      const data = await response.json();
22      setImageUrl(data.imageUrl);
23      // After generating, fetch the updated list of images
24      fetchImages();
25    } catch (error) {
26      console.error("Error generating image:", error);
27    }
28    setPrompt(""); // Clear the prompt after generating
30  };
31
32  const [images, setImages] = useState<GeneratedImage[]>([]);
33  const [selectedImage, setSelectedImage] = useState<GeneratedImage | null>(null);
34
35  const fetchImages = async () => {
36    try {
37      const response = await fetch('/images');
38      const data = await response.json();
39      setImages(data);
40    } catch (error) {
41      console.error("Error fetching images:", error);
42    }
43  };
44
45  React.useEffect(() => {
46    fetchImages();
47  }, []);
48
49  const openPopup = (image: GeneratedImage) => {
50    setSelectedImage(image);
51  };
52
53  const closePopup = () => {
54    setSelectedImage(null);
55  };
56
57  return (
58    <div className="container">
59      <h1>AI Image Generator</h1>
60      <div className="input-container">
61        <input
63          value={prompt}
64          onChange={(e) => setPrompt(e.target.value)}
65          placeholder="Enter your image prompt"
66        />
67        <button onClick={generateImage} disabled={loading || !prompt}>
68          {loading ? "Generating..." : "Generate Image"}
69        </button>
70      </div>
71      <div className="image-grid">
72        {images.map((image, index) => (
73          <div key={index} className="image-item" onClick={() => openPopup(image)}>
74            <img src={image.imageUrl} alt={image.prompt} />
75          </div>
76        ))}
77      </div>
78      {selectedImage && (
79        <div className="popup-overlay" onClick={closePopup}>
80          <div className="popup-content" onClick={(e) => e.stopPropagation()}>
81            <img src={selectedImage.imageUrl} alt={selectedImage.prompt} />
82            <p>{selectedImage.prompt}</p>
83            <button onClick={closePopup}>Close</button>
84          </div>
103  const { sqlite } = await import("https://esm.town/v/stevekrouse/sqlite");
104  const url = new URL(request.url);
105  const KEY = "genimage";
106
107  // Create table if it doesn't exist
108  await sqlite.execute(`
109    CREATE TABLE IF NOT EXISTS ${KEY}_images (
110      id INTEGER PRIMARY KEY AUTOINCREMENT,
111      imageUrl TEXT NOT NULL,
112      prompt TEXT NOT NULL
113    )
123    }
124    
125    const imageUrl = `https://maxm-imggenurl.web.val.run/${encodeURIComponent(prompt)}`;
126    
127    // Store the generated image in the database
128    await sqlite.execute(`
129      INSERT INTO ${KEY}_images (imageUrl, prompt) VALUES (?, ?)
130    `, [imageUrl, prompt]);
131
132    return new Response(JSON.stringify({ imageUrl }), {
133      headers: { "Content-Type": "application/json" },
134    });
135  }
136
137  if (url.pathname === "/images") {
138    const result = await sqlite.execute(`SELECT * FROM ${KEY}_images ORDER BY id DESC`);
139    return new Response(JSON.stringify(result.rows), {
140      headers: { "Content-Type": "application/json" },
148        <meta charset="UTF-8">
149        <meta name="viewport" content="width=device-width, initial-scale=1.0">
150        <title>AI Image Generator</title>
151        <style>${css}</style>
152      </head>
204    cursor: not-allowed;
205  }
206  .image-grid {
207    display: grid;
208    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
210    margin-top: 20px;
211  }
212  .image-item {
213    cursor: pointer;
214    transition: transform 0.3s ease;
215  }
216  .image-item:hover {
217    transform: scale(1.05);
218  }
219  .image-item img {
220    width: 100%;
221    height: 150px;
261  return (
262    <div className="container">
263      <h1>AI Image Generator</h1>
264      <div className="input-container">
265        <input
267          value={prompt}
268          onChange={(e) => setPrompt(e.target.value)}
269          placeholder="Enter your image prompt"
270        />
271        <button onClick={generateImage} disabled={loading || !prompt}>
272          {loading ? "Generating..." : "Generate Image"}
273        </button>
274      </div>
275      <div className="image-grid">
276        {images.map((image, index) => (
277    padding: 20px;
278    background-color: #fff;
307    cursor: not-allowed;
308  }
309  .image-container {
310    text-align: center;
311  }

VALLEDRAW README.md1 match

@t4t8dd_val_town•Updated 8 months ago

7* Type text prompts, select it, press "Q". Select a previous generation with a new text prompt to keep iterating. Selecting shapes doesn't work yet. Have fun!
8
9<a href="https://x.com/JanPaul123/status/1815502582015754657"><img width=500 src="https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/5893dfbf-c2de-4be0-049e-d8fdd1970a00/public"/></a>
10

« Previous

1...523 524 525 526 527 528 529...592

Projects

View all 96 projects

brainrot_image_gen1 file match

@dcm31•Updated 6 days ago

Generate images for Italian Brainrot characters using FAL AI

modifyImage2 file matches

@stevekrouse•Updated 1 week ago

Users

View all 1 users

@Atiq1 project

Updated 1 day 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 SearchReturn to Val Town

sharedMagentaChameleonmain.tsx4 matches

dataUriGenAppmain.tsx2 matches

webdavServerREADME.md1 match

placeholderKittenImagesmain.tsx28 matches

resizeImageErrormain.tsx29 matches

placeholderImagesmain.tsx27 matches

SocialMediaDashboardV1main.tsx15 matches

iangac_validatormain.tsx5 matches

genimagemain.tsx54 matches

VALLEDRAWREADME.md1 match

Projects

brainrot_image_gen1 file match

modifyImage2 file matches

Users

@Atiq1 project

Documentation

Val Town Code Search Return to Val Town

sharedMagentaChameleon main.tsx4 matches

dataUriGenApp main.tsx2 matches

webdavServer README.md1 match

placeholderKittenImages main.tsx28 matches

resizeImageError main.tsx29 matches

placeholderImages main.tsx27 matches

SocialMediaDashboardV1 main.tsx15 matches

iangac_validator main.tsx5 matches

genimage main.tsx54 matches

VALLEDRAW README.md1 match