Val Town Code Search

vttThumbMaker main.tsx23 matches

@g•Updated 6 months ago

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

altairClient README.md1 match

@flesch•Updated 6 months ago

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

getProfileProfilePage main.tsx7 matches

@elliotbraem•Updated 6 months ago

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"

blob_admin README.md1 match

@pkf•Updated 6 months ago

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

falDemoApp main.tsx14 matches

@spigooli•Updated 6 months ago

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>

elegantJadeParrotfish main.tsx4 matches

@temptemp•Updated 6 months ago

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

falDemoApp main.tsx14 matches

@ascarden•Updated 6 months ago

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>

FedifyOnValTown main.tsx3 matches

@minhee•Updated 6 months ago

7  Follow,
8  generateCryptoKeyPair,
9  Image,
10  importJwk,
11  LanguageString,
55      assertionMethods: keyPairs.map(pair => pair.multikey),
56      url: new URL("/", ctx.url),
57      icon: new Image({
58        mediaType: "image/png",
59        url: new URL("https://fedify.dev/logo.png"),
60      }),

blob_admin README.md1 match

@car•Updated 6 months ago

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

crossmintSolanaTxGenerator main.tsx3 matches

@alfongj•Updated 6 months ago

47      <div className="header">
48        <h1>Solana Transaction Code Generator</h1>
49        <img src="https://i.postimg.cc/SQV1FgkV/manlet.jpg" alt="Solana Meme" className="meme-image" />
50      </div>
51      <form onSubmit={handleSubmit}>
190  padding: 0;
191  background-color: var(--solana-black);
192  background-image: linear-gradient(45deg, #14F195 25%, #9945FF 25%, #9945FF 50%, #14F195 50%, #14F195 75%, #9945FF 75%, #9945FF 100%);
193  background-size: 56.57px 56.57px;
194  min-height: 100vh;
218}
219
220.meme-image {
221  width: 100px;
222  height: 100px;

« Previous

1...546 547 548 549 550 551 552...640

Projects

View all 98 projects

gpt-image-test1 file match

@CaptainJack•Updated 17 hours ago

测试 gpt image 的不同 api 能否满足图片生成要求

Users

View all 2 users

@Atiq1 project

Updated 6 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

vttThumbMaker main.tsx23 matches

altairClient README.md1 match

getProfileProfilePage main.tsx7 matches

blob_admin README.md1 match

falDemoApp main.tsx14 matches

elegantJadeParrotfish main.tsx4 matches

falDemoApp main.tsx14 matches

FedifyOnValTown main.tsx3 matches

blob_admin README.md1 match

crossmintSolanaTxGenerator main.tsx3 matches

Projects

gpt-image-test1 file match

image-inpainting1 file match

Users

@Chrimage1 project

@Atiq1 project

Documentation

Val Town Code SearchReturn to Val Town

vttThumbMakermain.tsx23 matches

altairClientREADME.md1 match

getProfileProfilePagemain.tsx7 matches

blob_adminREADME.md1 match

falDemoAppmain.tsx14 matches

elegantJadeParrotfishmain.tsx4 matches

falDemoAppmain.tsx14 matches

FedifyOnValTownmain.tsx3 matches

blob_adminREADME.md1 match

crossmintSolanaTxGeneratormain.tsx3 matches

Projects

gpt-image-test1 file match

image-inpainting1 file match

Users

@Chrimage1 project

@Atiq1 project

Documentation

Val Town Code Search Return to Val Town

vttThumbMaker main.tsx23 matches

altairClient README.md1 match

getProfileProfilePage main.tsx7 matches

blob_admin README.md1 match

falDemoApp main.tsx14 matches

elegantJadeParrotfish main.tsx4 matches

falDemoApp main.tsx14 matches

FedifyOnValTown main.tsx3 matches

blob_admin README.md1 match

crossmintSolanaTxGenerator main.tsx3 matches