Val Town Code Search

hackerNewsDigest README.md1 match

@jeffreyyoung•Updated 8 months ago

4
5
6<img width="400px" src="https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/2661d748-d7a7-4d1e-85a4-f60fae262000/public" />
7

zottify main.tsx3 matches

@rapfl•Updated 8 months ago

34
35    // Run generative model
36    const generatedImage = await replicate.run(
37      "rapfl/sdxl-zottify:caf6f0e13ef741de9353b0a06146797a4a55fbff3f5f4013e7fe755756a346e1",
38      {
47    );
48
49    const result = generatedImage[0];
50    // Sending a card with the image in it
51    return new Response(
52      render(

imagesToPDF main.tsx17 matches

@g•Updated 8 months ago

1/**
2 * This application creates a client-side interface for uploading multiple image files
3 * and generating a PDF containing those images. It uses the following approach:
4 *
5 * 1. Create a simple HTML form for file input
6 * 2. Use JavaScript to handle file selection and PDF generation
7 * 3. Utilize the jsPDF library for PDF creation
8 * 4. Use the FileReader API to read image files
9 *
10 * The application will not modify or convert the images, and each PDF page
11 * will be sized according to the corresponding image dimensions.
12 */
13
22  <meta charset="UTF-8">
23  <meta name="viewport" content="width=device-width, initial-scale=1.0">
24  <title>Image to PDF Converter</title>
25  <link rel="stylesheet" href="/styles.css">
26  <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
29<body>
30  <div class="container">
31    <h1>Image to PDF Converter</h1>
32    <input type="file" id="imageInput" accept="image/*" multiple>
33    <button id="convertBtn">Convert to PDF</button>
34  </div>
86const { jsPDF } = window.jspdf;
87
88const imageInput = document.getElementById('imageInput');
89const convertBtn = document.getElementById('convertBtn');
90
92
93async function convertToPDF() {
94  const files = imageInput.files;
95  if (files.length === 0) {
96    alert('Please select at least one image file.');
97    return;
98  }
99
100  const [file0] = files;
101  const img0 = await loadImage(file0);
102
103  const pdf = new jsPDF({
112  for (let i = 0; i < files.length; i++) {
113    const file = files[i];
114    const img = await loadImage(file);
115
116    if (i) pdf.addPage([img.width, img.height]);
117    pdf.addImage(img, 'AVIF', 0, 0, img.width, img.height);
118  }
119
120  pdf.save('images.pdf');
121}
122
130}
131
132function loadImage(blob) {
133  return new Promise((resolve, reject) => {
134    const src = URL.createObjectURL(blob);
135    const img = new Image();
136    img.onload = () => resolve(img);
137    img.onerror = (e) => reject(e);

bedtimeStoryMaker main.tsx8 matches

@dthyresson•Updated 8 months ago

124        role: "system",
125        content:
126          `Describe an image that depicts the ${adjective} children's story about a ${color} colored ${animal}: ${summary}.
127        The description should be descriptive, but three short sentences.
128        Just give me the instructions, don't make an image.`,
129      },
130    ],
143  // fast-lightning-sdxl
144  const options = {
145    "image_size": "square",
146    "num_images": 1,
147    "num_inference_steps": 6,
148    "enable_safety_checker": true,
149  };
150  // {"num_images": 1,
151  // "guidance_scale": 9.5,
152  // "num_inference_steps": 20,
153  // "expand_prompt": true }
154  const result: any = await fal.run(`fal-ai/${falModel}`, { input: { prompt }, options });
155  const url = result.images[0].url;
156
157  return url;
162    title: ogData?.title || "Bedtime Story Maker",
163    description: ogData?.description || "",
164    image: ogData?.image || "",
165    url: ogData?.url || `https://dthyresson-bedtimestorymaker.web.val.run/bedtime_stories}`,
166  };
480      title,
481      description: summary,
482      image: pictureUrl,
483      url: `https://dthyresson-bedtimestorymaker.web.val.run/bedtime_stories/read/${id}`,
484    };

generativeFill main.tsx6 matches

@jeffreyyoung•Updated 8 months ago

10    const lastMsg = req.query.at(-1);
11    if (lastMsg && lastMsg.attachments.length !== 2) {
12      yield events.replace("No image recieved");
13      yield html;
14      yield events.done();
15      return;
16    }
17    yield events.replace("Generating image");
18    let success = null;
19    let error = null;
20    const input = {
21      image: lastMsg.attachments.at(0).url,
22      mask: lastMsg.attachments.at(1).url,
23      prompt: lastMsg.content.trim() || "cute kitty",
36    let i = 0;
37    while (!success && !error) {
38      yield events.replace("Generating image (" + (i++) + ")");
39      await sleep(1000);
40    }
43    if (success && Array.isArray(success)) {
44      for (const url of success) {
45        // yield markdown image
46        yield `![image](${url})\n`;
47      }
48    }

bikeInventory main.tsx19 matches

@all•Updated 8 months ago

12  const [year, setYear] = useState(bike?.year || "");
13  const [lastMaintenance, setLastMaintenance] = useState(bike?.lastMaintenance || "");
14  const [imageUrl, setImageUrl] = useState(bike?.imageUrl || "");
15
16  const handleSubmit = (e) => {
23      year: parseInt(year), 
24      lastMaintenance,
25      imageUrl
26    });
27  };
94          </div>
95          <div className="field-row-stacked" style={{width: '200px'}}>
96            <label htmlFor="edit-image">Image URL</label>
97            <input
98              id="edit-image"
99              type="url"
100              value={imageUrl}
101              onChange={(e) => setImageUrl(e.target.value)}
102            />
103          </div>
198    if (db && bikes.length === 0) {
199      const initialBikes = [
200        { brand: "Trek", model: "Domane", type: "Road", year: 2022, imageUrl: "https://maxm-imggenurl.web.val.run/trek-domane-road-bike" },
201        { brand: "Specialized", model: "Stumpjumper", type: "Mountain", year: 2021, imageUrl: "https://maxm-imggenurl.web.val.run/specialized-stumpjumper-mountain-bike" },
202        { brand: "Cannondale", model: "CAAD13", type: "Road", year: 2023, imageUrl: "https://maxm-imggenurl.web.val.run/cannondale-caad13-road-bike" },
203        { brand: "Giant", model: "Trance", type: "Mountain", year: 2022, imageUrl: "https://maxm-imggenurl.web.val.run/giant-trance-mountain-bike" },
204        { brand: "Bianchi", model: "Oltre", type: "Road", year: 2023, imageUrl: "https://maxm-imggenurl.web.val.run/bianchi-oltre-road-bike" },
205        { brand: "Santa Cruz", model: "Hightower", type: "Mountain", year: 2021, imageUrl: "https://maxm-imggenurl.web.val.run/santa-cruz-hightower-mountain-bike" },
206        { brand: "Cervélo", model: "S5", type: "Road", year: 2022, imageUrl: "https://maxm-imggenurl.web.val.run/cervelo-s5-road-bike" },
207        { brand: "Yeti", model: "SB150", type: "Mountain", year: 2023, imageUrl: "https://maxm-imggenurl.web.val.run/yeti-sb150-mountain-bike" },
208        { brand: "Pinarello", model: "Dogma F", type: "Road", year: 2023, imageUrl: "https://maxm-imggenurl.web.val.run/pinarello-dogma-f-road-bike" },
209        { brand: "BMC", model: "Fourstroke", type: "Mountain", year: 2022, imageUrl: "https://maxm-imggenurl.web.val.run/bmc-fourstroke-mountain-bike" }
210      ];
211
262          <thead>
263            <tr>
264              <th>Image</th>
265              <th>Brand</th>
266              <th>Model</th>
275              <tr key={bike.id}>
276                <td>
277                  {bike.imageUrl && (
278                    <img src={bike.imageUrl} alt={`${bike.brand} ${bike.model}`} style={{ width: '50px', height: '50px', objectFit: 'cover' }} />
279                  )}
280                </td>

sqliteExplorerApp README.md1 match

@flymaster•Updated 8 months ago

3View and interact with your Val Town SQLite data. It's based off Steve's excellent [SQLite Admin](https://www.val.town/v/stevekrouse/sqlite_admin?v=46) val, adding the ability to run SQLite queries directly in the interface. This new version has a revised UI and that's heavily inspired by [LibSQL Studio](https://github.com/invisal/libsql-studio) by [invisal](https://github.com/invisal). This is now more an SPA, with tables, queries and results showing up on the same page. 
4
5![image.webp](https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/c8e102fd-39ca-4bfb-372a-8d36daf43900/public)
6
7## Install

lastlogin_demo README.md1 match

@steve_townie•Updated 8 months ago

1
2![Screenshot 2024-08-08 at 08.48.41.gif](https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/7442086d-36b2-454d-bd5f-3c28615e9000/public)
3

design32x32bitmap main.tsx56 matches

@chekos•Updated 8 months ago

4import { adjectives, animals, colors, Config, uniqueNamesGenerator } from "https://esm.sh/unique-names-generator";
5
6const DEFAULT_IMAGE_NAME = "untitled-<d><d>-<word>";
7const DEFAULT_SIZE = { width: 32, height: 32 };
8const SIZES = [
69  setSize,
70  clearCanvas,
71  saveImage,
72  imageName,
73  setImageName,
74  downloadImage,
75  savedImages,
76  loadImage,
77  deleteImage,
78  setShowSettings,
79  brushSize,
101    <div className="control-group">
102      <button onClick={clearCanvas}>Clear</button>
103      <button onClick={saveImage}>Save</button>
104    </div>
105    <div className="control-group">
106      <input
107        type="text"
108        value={imageName}
109        onChange={(e) => setImageName(e.target.value)}
110        placeholder="Image name"
111      />
112      <button onClick={() => downloadImage(imageName)} className="download-btn">
113        <span className="download-icon">⬇️</span>
114      </button>
118        onChange={(e) => {
119          if (e.target.value) {
120            loadImage(e.target.value);
121            e.target.value = "";
122          }
123        }}
124      >
125        <option value="">Load image</option>
126        {savedImages.map((name) => (
127          <option key={name} value={name}>
128            {name}
133        onChange={(e) => {
134          if (e.target.value) {
135            deleteImage(e.target.value);
136            e.target.value = "";
137          }
138        }}
139      >
140        <option value="">Delete image</option>
141        {savedImages.map((name) => (
142          <option key={name} value={name}>
143            {name}
158        <h2>Settings</h2>
159        <label>
160          Default Image Name:
161          <input
162            type="text"
196  const [isDrawing, setIsDrawing] = useState(false);
197  const [isPainting, setIsPainting] = useState(false);
198  const [imageName, setImageName] = useState(DEFAULT_IMAGE_NAME);
199  const [savedImages, setSavedImages] = useState<string[]>([]);
200  const [showSettings, setShowSettings] = useState(false);
201  const [settings, setSettings] = useState({
202    defaultName: DEFAULT_IMAGE_NAME,
203    colorScheme: "pitaya",
204  });
207
208  useEffect(() => {
209    const saved = localStorage.getItem("savedImagesList");
210    if (saved) {
211      setSavedImages(JSON.parse(saved));
212    }
213    const savedSettings = localStorage.getItem("settings");
228
229  useEffect(() => {
230    setImageName(generateName(settings.defaultName));
231  }, [settings.defaultName]);
232
308  }, [size]);
309
310  const saveImage = useCallback(() => {
311    const imageData = JSON.stringify({ name: imageName, size, pixels });
312    localStorage.setItem(`image_${imageName}`, imageData);
313    setSavedImages(prev => {
314      const newSavedImages = [...new Set([...prev, imageName])];
315      localStorage.setItem("savedImagesList", JSON.stringify(newSavedImages));
316      return newSavedImages;
317    });
318    setImageName(generateName(settings.defaultName));
319  }, [imageName, size, pixels, settings.defaultName]);
320
321  const loadImage = useCallback((name: string) => {
322    if (confirm(`Are you sure you want to load "${name}"? This will overwrite your current work.`)) {
323      const imageData = localStorage.getItem(`image_${name}`);
324      if (imageData) {
325        const { size: loadedSize, pixels: loadedPixels } = JSON.parse(imageData);
326        setSize(loadedSize);
327        setPixels(loadedPixels);
328        setImageName(name);
329      }
330    }
331  }, []);
332
333  const deleteImage = useCallback((name: string) => {
334    if (confirm(`Are you sure you want to delete "${name}"? This action cannot be undone.`)) {
335      localStorage.removeItem(`image_${name}`);
336      setSavedImages(prev => {
337        const newSavedImages = prev.filter(img => img !== name);
338        localStorage.setItem("savedImagesList", JSON.stringify(newSavedImages));
339        return newSavedImages;
340      });
341    }
342  }, []);
343
344  const downloadImage = useCallback((customName: string) => {
345    const canvas = document.createElement("canvas");
346    canvas.width = size.width;
364    const fileName = `${customName || generateName(settings.defaultName)}-1bit-${size.width}x${size.height}.bmp`;
365    link.download = fileName;
366    link.href = canvas.toDataURL("image/bmp");
367    link.click();
368  }, [pixels, size, settings.defaultName]);
401          setSize={setSize}
402          clearCanvas={clearCanvas}
403          saveImage={saveImage}
404          imageName={imageName}
405          setImageName={setImageName}
406          downloadImage={downloadImage}
407          savedImages={savedImages}
408          loadImage={loadImage}
409          deleteImage={deleteImage}
410          setShowSettings={setShowSettings}
411          brushSize={brushSize}
589  appearance: none;
590  padding-right: 30px;
591  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3E%3Cpath fill='%230f0' d='M0 0l4 4 4-4z'/%3E%3C/svg%3E");
592  background-repeat: no-repeat;
593  background-position: right 10px center;

blob_admin README.md1 match

@ianvph•Updated 8 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
7Use this button to install the val:

« Previous

1...848 849 850 851 852 853 854...926

Projects

View all 105 vals

placeholdji2 file matches

@jjg•Updated 1 week ago

Placeholder image service with emojis 🖼️

Users

View all 2 users

"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

hackerNewsDigest README.md1 match

zottify main.tsx3 matches

imagesToPDF main.tsx17 matches

bedtimeStoryMaker main.tsx8 matches

generativeFill main.tsx6 matches

bikeInventory main.tsx19 matches

sqliteExplorerApp README.md1 match

lastlogin_demo README.md1 match

design32x32bitmap main.tsx56 matches

blob_admin README.md1 match

Projects

image_generator1 file match

placeholdji2 file matches

Users

@Chrimage1 val

@Atiq1 val

Documentation

Val Town Code SearchReturn to Val Town

hackerNewsDigestREADME.md1 match

zottifymain.tsx3 matches

imagesToPDFmain.tsx17 matches

bedtimeStoryMakermain.tsx8 matches

generativeFillmain.tsx6 matches

bikeInventorymain.tsx19 matches

sqliteExplorerAppREADME.md1 match

lastlogin_demoREADME.md1 match

design32x32bitmapmain.tsx56 matches

blob_adminREADME.md1 match

Projects

image_generator1 file match

placeholdji2 file matches

Users

@Chrimage1 val

@Atiq1 val

Documentation

Val Town Code Search Return to Val Town

hackerNewsDigest README.md1 match

zottify main.tsx3 matches

imagesToPDF main.tsx17 matches

bedtimeStoryMaker main.tsx8 matches

generativeFill main.tsx6 matches

bikeInventory main.tsx19 matches

sqliteExplorerApp README.md1 match

lastlogin_demo README.md1 match

design32x32bitmap main.tsx56 matches

blob_admin README.md1 match