Val Town Code Search

excessPlumFrog README.md1 match

@trantion•Updated 8 months ago

10* Create a [Val Town API token](https://www.val.town/settings/api), open the browser preview of this val, and use the API token as the password to log in.
11
12<img width=500 src="https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/7077d1b5-1fa7-4a9b-4b93-f8d01d3e4f00/public"/>

largeAmaranthCat README.md1 match

@trantion•Updated 8 months ago

10* Create a [Val Town API token](https://www.val.town/settings/api), open the browser preview of this val, and use the API token as the password to log in.
11
12<img width=500 src="https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/7077d1b5-1fa7-4a9b-4b93-f8d01d3e4f00/public"/>

VALLE README.md1 match

@trantion•Updated 8 months ago

10* Create a [Val Town API token](https://www.val.town/settings/api), open the browser preview of this val, and use the API token as the password to log in.
11
12<img width=500 src="https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/7077d1b5-1fa7-4a9b-4b93-f8d01d3e4f00/public"/>

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

« Previous

1...514 515 516 517 518 519 520...583

Projects

View all 96 projects

brainrot_image_gen1 file match

@dcm31•Updated 5 days ago

Generate images for Italian Brainrot characters using FAL AI

modifyImage2 file matches

@stevekrouse•Updated 6 days ago

Users

View all 1 users

@Atiq1 project

Updated 22 hours 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

excessPlumFrogREADME.md1 match

largeAmaranthCatREADME.md1 match

VALLEREADME.md1 match

sharedMagentaChameleonmain.tsx4 matches

dataUriGenAppmain.tsx2 matches

webdavServerREADME.md1 match

placeholderKittenImagesmain.tsx28 matches

resizeImageErrormain.tsx29 matches

placeholderImagesmain.tsx27 matches

SocialMediaDashboardV1main.tsx15 matches

Projects

brainrot_image_gen1 file match

modifyImage2 file matches

Users

@Atiq1 project

Documentation

Val Town Code Search Return to Val Town

excessPlumFrog README.md1 match

largeAmaranthCat README.md1 match

VALLE README.md1 match

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