Val Town Code SearchReturn to Val Town

1## MOVED TO: [https://www.val.town/x/michaelwschultz/frame](https://www.val.town/x/michaelwschultz/frame)
2
3### Gathers information and returns an image of this val
4
5### Why
14actually draw things to a screen like all the e-ink display libraries.
15
16Migrated from folder: Archive/generateframeImage

11  let html = `<h1>${valTownInspo.title}</h1>
12  <p>${valTownInspo.description}</p>
13  <a href="https://val.town/${valTownInspo.val}"><img src="${valTownInspo.image}" style="max-width:576px"/></a>
14  <p><a href="https://www.val.town/settings/intervals">Unsubscribe here</a></p>`;
15

221        left: `${petState.x}px`,
222        top: `${petState.y}px`,
223        backgroundImage:
224          `url('https://ipfs.io/ipfs/bafybeib5iedrzr7unbp4zq6rkrab3caik7nw7rfzlcfvu4xqs6bfk7dgje/${spriteNum}.png')`,
225        backgroundPosition: `-${petState.frameIndex * SPRITE_SIZE}px -${ROW_INDEX[petState.animation] * SPRITE_SIZE}px`,
288    height: calc(var(--scale) * 32px);
289    background-size: calc(var(--scale) * 512px) calc(var(--scale) * 256px);
290    image-rendering: pixelated;
291  }
292

35    <h1>Thumbnail Maker</h1>
36    <div id="dropZone">
37      <p>📷 Drag & drop images here or click to select</p>
38      <input type="file" id="fileInput" multiple accept="image/*">
39    </div>
40    <div id="thumbnailOptions">
59        Output Format:
60        <select id="outputFormat">
61          <option value="image/png">PNG</option>
62          <option value="image/jpeg">JPEG</option>
63          <option value="image/webp">WebP</option>
64        </select>
65      </label><br>
76      <button id="downloadMetadataBtn">Download Metadata</button>
77    </div>
78    <div id="imagePreview"></div>
79  </div>
80</body>
140select {
141  appearance: none;
142  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M10.293 3.293L6 7.586 1.707 3.293A1 1 0 00.293 4.707l5 5a1 1 0 001.414 0l5-5a1 1 0 10-1.414-1.414z' fill='%23333'/%3E%3C/svg%3E");
143  background-repeat: no-repeat;
144  background-position: right 10px center;
206}
207
208#imagePreview {
209  margin-top: 20px;
210  text-align: center;
211}
212
213#imagePreview img {
214  max-width: 100%;
215  height: auto;
233const keepAspectRatio = document.getElementById('keepAspectRatio');
234const thumbWidth = document.getElementById('thumbWidth');
235const imagePreview = document.getElementById('imagePreview');
236const thumbnailOptions = document.getElementById('thumbnailOptions');
237const renderOptions = document.getElementById('renderOptions');
251  renderOptions.style.display = 'none';
252  downloadSection.style.display = 'none';
253  imagePreview.innerHTML = '';
254  thumbnailCanvas = null;
255  thumbnailMetadata = null;
276  event.preventDefault();
277  dropZone.classList.remove('drag-over');
278  files = Array.from(event.dataTransfer.files).filter(file => file.type.startsWith('image/'));
279  resetToStep1();
280});
291  progressBar.value = 0;
292
293  const image0 = await getImage(files[0]);
294  const cols = Math.ceil(Math.sqrt(files.length));
295  const rows = Math.ceil(files.length / cols);
296  const tHeight = parseInt(thumbHeight.value);
297  let tWidth = keepAspectRatio.checked
298    ? Math.floor(tHeight / image0.height * image0.width)
299    : parseInt(thumbWidth.value);
300
302  const canvasHeight = rows * tHeight;
303
304  image0.revoke();
305
306  thumbnailCanvas = new OffscreenCanvas(canvasWidth, canvasHeight);
312    const row = Math.floor(i / cols);
313
314    const img = await getImage(file);
315    ctx.drawImage(img, col * tWidth, row * tHeight, tWidth, tHeight);
316    img.revoke();
317
345  const blob = await thumbnailCanvas.convertToBlob({
346    type: outputFormat.value,
347    quality: outputFormat.value !== 'image/png' ? parseFloat(outputQuality.value) : undefined
348  });
349
353  downloadSection.style.display = 'flex';
354
355  // Display the generated image
356  const img = document.createElement('img');
357  img.src = url;
358  imagePreview.innerHTML = '';
359  imagePreview.appendChild(img);
360
361  progressBar.style.display = 'none';
377});
378
379function getImage(file) {
380  return new Promise((resolve) => {
381    const url = URL.createObjectURL(file);
382    const img = new Image();
383    img.revoke = () => URL.revokeObjectURL(url);
384    img.onload = () => resolve(img);

2
3<div align="center">
4  <img src="https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/b1963886-2c4e-4aac-34ec-4c0a50539a00/public" />
5</div>
6

9  name: string;
10  description: string;
11  image: {
12    url: string;
13    ipfs_cid: string;
14  };
15  backgroundImage: {
16    url: string;
17    ipfs_cid: string;
22const fallbackUrl = "https://ipfs.near.social/ipfs/bafkreibmiy4ozblcgv3fm3gc6q62s55em33vconbavfd2ekkuliznaq3zm";
23
24const getImageUrl = (image?: { url?: string; ipfs_cid?: string }) => {
25  if (image?.url) return image.url;
26  if (image?.ipfs_cid) return `https://ipfs.near.social/ipfs/${image.ipfs_cid}`;
27  return fallbackUrl;
28};
122    <div
123      className="min-h-screen w-full bg-cover bg-center flex flex-col justify-center items-center py-16 margin-auto relative"
124      style={{ backgroundImage: loading ? "none" : `url(${getImageUrl(profile?.backgroundImage) || ""})` }}
125    >
126      <div className="bg-white bg-opacity-95 p-8 rounded-xl shadow-2xl text-center max-w-2xl w-full lg:max-w-[1024px] w-full z-10 backdrop-blur-sm">
129            {showBirthdayBanner && <BirthdayBanner name={profile?.name ?? accountId} />}
130            <img
131              src={getImageUrl(profile?.image)}
132              alt={profile?.name}
133              className="w-32 h-32 rounded-full object-cover mx-auto mb-4 shadow-lg"

3This is a lightweight Blob Admin interface to view and debug your Blob data.
4
5![b7321ca2cd80899250589b9aa08bc3cae9c7cea276282561194e7fc537259b46.png](https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/311a81bb-18d8-4583-b7e3-64bac326f700/public)
6
7## Installation

7function App() {
8  const [prompt, setPrompt] = useState("");
9  const [imageUrl, setImageUrl] = useState("");
10  const [loading, setLoading] = useState(false);
11
12  const generateImage = async (e?: React.FormEvent) => {
13    e?.preventDefault();
14    setLoading(true);
21        input: {
22          prompt,
23          image_size: "landscape_4_3",
24          num_inference_steps: 4,
25          num_images: 1,
26          enable_safety_checker: true,
27          sync_mode: true,
28        },
29      });
30      setImageUrl(result.data.images[0].url);
31    } catch (error) {
32      console.error("Error generating image:", error);
33    } finally {
34      setLoading(false);
39    <div className="min-h-screen bg-black text-white py-12 px-4 sm:px-6 lg:px-8">
40      <div className="max-w-3xl mx-auto">
41        <h1 className="text-4xl font-bold text-center mb-8">Fal AI Image Generator</h1>
42        <div className="bg-gray-900 rounded-lg p-6 mb-8 shadow-lg">
43          <form className="flex flex-col sm:flex-row gap-4" onSubmit={generateImage}>
44            <input
45              type="text"
46              value={prompt}
47              onChange={(e) => setPrompt(e.target.value)}
48              placeholder="Enter your image prompt"
49              className="flex-grow px-4 py-2 bg-gray-800 border border-gray-700 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-transparent"
50            />
51            <button
52              onClick={generateImage}
53              disabled={loading || !prompt}
54              className={`px-6 py-2 rounded-md text-white font-medium transition-colors duration-200 ${
80                )
81                : (
82                  "Generate Image"
83                )}
84            </button>
85          </form>
86        </div>
87        {imageUrl && (
88          <div className="bg-gray-900 rounded-lg overflow-hidden shadow-lg">
89            <img src={imageUrl} alt="Generated image" className="w-full h-auto" />
90          </div>
91        )}
118          <meta charset="UTF-8">
119          <meta name="viewport" content="width=device-width, initial-scale=1.0">
120          <title>Fal AI Image Generator</title>
121          <script src="https://cdn.tailwindcss.com"></script>
122          <style>

18  const questions = $("[class*='question_content_']");
19  const htmlContent = questions.html();
20  const images = questions.find("img");
21
22  for (const image of images.toArray()) {
23    const src = $(image).attr("src"); // Use Cheerio to get the src attribute
24
25    // Check if src contains any of the specified strings
29
30    // Update the src attribute
31    $(image).attr("src", `https://archive.cool.com/images/${encodeURIComponent(src)}`);
32  }
33

7function App() {
8  const [prompt, setPrompt] = useState("");
9  const [imageUrl, setImageUrl] = useState("");
10  const [loading, setLoading] = useState(false);
11
12  const generateImage = async (e?: React.FormEvent) => {
13    e?.preventDefault();
14    setLoading(true);
21        input: {
22          prompt,
23          image_size: "landscape_4_3",
24          num_inference_steps: 4,
25          num_images: 1,
26          enable_safety_checker: true,
27          sync_mode: true,
28        },
29      });
30      setImageUrl(result.data.images[0].url);
31    } catch (error) {
32      console.error("Error generating image:", error);
33    } finally {
34      setLoading(false);
39    <div className="min-h-screen bg-black text-white py-12 px-4 sm:px-6 lg:px-8">
40      <div className="max-w-3xl mx-auto">
41        <h1 className="text-4xl font-bold text-center mb-8">Fal AI Image Generator</h1>
42        <div className="bg-gray-900 rounded-lg p-6 mb-8 shadow-lg">
43          <form className="flex flex-col sm:flex-row gap-4" onSubmit={generateImage}>
44            <input
45              type="text"
46              value={prompt}
47              onChange={(e) => setPrompt(e.target.value)}
48              placeholder="Enter your image prompt"
49              className="flex-grow px-4 py-2 bg-gray-800 border border-gray-700 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-transparent"
50            />
51            <button
52              onClick={generateImage}
53              disabled={loading || !prompt}
54              className={`px-6 py-2 rounded-md text-white font-medium transition-colors duration-200 ${
80                )
81                : (
82                  "Generate Image"
83                )}
84            </button>
85          </form>
86        </div>
87        {imageUrl && (
88          <div className="bg-gray-900 rounded-lg overflow-hidden shadow-lg">
89            <img src={imageUrl} alt="Generated image" className="w-full h-auto" />
90          </div>
91        )}
118          <meta charset="UTF-8">
119          <meta name="viewport" content="width=device-width, initial-scale=1.0">
120          <title>Fal AI Image Generator</title>
121          <script src="https://cdn.tailwindcss.com"></script>
122          <style>