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
6
7## Install
357 title: location,
358 icon: {
359 url: 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 24 24" fill="%23FF453A"><path d="M12 2c-5.33 4 0 10 0 10s5.33-6 0-10z"/></svg>',
360 scaledSize: new window.google.maps.Size(40, 40)
361 }
369 title: vet.name,
370 icon: {
371 url: 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 24 24" fill="%2300E461"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg>',
372 scaledSize: new window.google.maps.Size(30, 30)
373 }
553 backgroundColor: theme.colors.background,
554 minHeight: '100vh',
555 backgroundImage: 'linear-gradient(to bottom, rgba(13,19,33,0.8), rgba(13,19,33,1))'
556 }}
557 >
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
6
7## Install
2
3
4
5
6Inspired from a RedwoodJS demo I mde last year, this adds generative art powered by Fal to the bedtime story maker.
21for a "fantastical story about a green whale who rides the bus" or the "spooky story about the tomato fox who explores a cave".
22
23Then using the summary, OpenAI geenrates another prompt to describe the instructions to geneate a childrens story book image.
24
25That's sent to Fal to generate an image.
26
27Stories get saved to `bedtime_stories` in SQLite for viewing, searching and maybe sharing.
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 };
6const { useState, useRef, useEffect } = React;
7
8function compressImage(file, maxWidth = 800, maxHeight = 800, quality = 0.7) {
9 return new Promise((resolve, reject) => {
10 const reader = new FileReader();
11 reader.readAsDataURL(file);
12 reader.onload = (event) => {
13 const img = new Image();
14 img.src = event.target.result as string;
15 img.onload = () => {
35
36 const ctx = canvas.getContext('2d');
37 ctx.drawImage(img, 0, 0, width, height);
38
39 // Convert to base64 with compression
40 const compressedImage = canvas.toDataURL('image/jpeg', quality);
41 resolve(compressedImage);
42 };
43 img.onerror = reject;
54 if (file) {
55 try {
56 const compressedImage = await compressImage(file);
57 onPhotoUpload(compressedImage);
58 } catch (error) {
59 console.error("Photo upload failed", error);
68 ref={fileInputRef}
69 onChange={handleFileChange}
70 accept="image/*"
71 style={{ display: 'none' }}
72 />
24 const price = $(el).find('.woocommerce-Price-amount').text().trim();
25 const link = $(el).find('h4 a').attr('href');
26 const images = $(el).find('img').map((i, img) => $(img).attr('src')).get();
27
28 return {
30 price,
31 link,
32 images: images.slice(0, 2), // Capture first two images (visible and hidden)
33 categories: $(el).attr('class')
34 .split(' ')
60🔗 Link: ${product.link}
61📁 Categories: ${product.categories.join(', ')}
62🖼️ Images: ${product.images.length} found
63${stockEmoji} Stock Status: ${product.inStock ? 'Available' : 'Out of Stock'}
64---`.trim();
24 const price = $(el).find('.woocommerce-Price-amount').text().trim();
25 const link = $(el).find('h4 a').attr('href');
26 const images = $(el).find('img').map((i, img) => $(img).attr('src')).get();
27
28 return {
30 price,
31 link,
32 images: images.slice(0, 2), // Capture first two images (visible and hidden)
33 categories: $(el).attr('class')
34 .split(' ')
60🔗 Link: ${product.link}
61📁 Categories: ${product.categories.join(', ')}
62🖼️ Images: ${product.images.length} found
63${stockEmoji} Stock Status: ${product.inStock ? 'Available' : 'Out of Stock'}
64---`.trim();
3This is a lightweight Blob Admin interface to view and debug your Blob data.
4
5
6
7## Installation
498 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
499 <meta name="description" content="Expoline 2025 Participant Registration Form">
500 <link rel="icon" type="image/png" href="https://maxm-imggenurl.web.val.run/Expoline-favicon">
501 <style>${css}</style>
502 </head>
