Val Town Code SearchReturn to Val Town

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"/>

7* Type text prompts, select it, press "Q". Select a previous generation with a new text prompt to keep iterating. Selecting shapes doesn't work yet. Have fun!
8
9<a href="https://x.com/JanPaul123/status/1815502582015754657"><img width=500 src="https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/5893dfbf-c2de-4be0-049e-d8fdd1970a00/public"/></a>
10

4
5function Popup({ isOpen, onClose, content }) {
6  const [convertedImages, setConvertedImages] = useState({});
7  const [converting, setConverting] = useState({});
8
12      const response = await fetch(url);
13      const blob = await response.blob();
14      const img = await createImageBitmap(blob);
15      
16      const canvas = document.createElement('canvas');
18      canvas.height = img.height;
19      const ctx = canvas.getContext('2d');
20      ctx.drawImage(img, 0, 0);
21      
22      const webpBlob = await new Promise(resolve => canvas.toBlob(resolve, 'image/webp'));
23      const webpUrl = URL.createObjectURL(webpBlob);
24      
25      setConvertedImages(prev => ({ ...prev, [index]: { url: webpUrl, size: webpBlob.size } }));
26    } catch (error) {
27      console.error("Error converting image:", error);
28    }
29    setConverting(prev => ({ ...prev, [index]: false }));
45        <button className="close-btn" onClick={onClose}>×</button>
46        <div className="popup-content">
47          {content.type === 'images' && (
48            <>
49              <h3>Images</h3>
50              <ul>
51                {content.items.map((item, index) => (
53                    {item.url.split('/').pop()} - {formatSize(item.transferSize)}
54                    <a href={item.url} download className="download-btn">Download</a>
55                    {!convertedImages[index] && (
56                      <button 
57                        onClick={() => convertToWebP(item.url, index)}
62                      </button>
63                    )}
64                    {convertedImages[index] && (
65                      <div>
66                        <p>WebP Size: {formatSize(convertedImages[index].size)}</p>
67                        <a href={convertedImages[index].url} download="converted.webp" className="download-btn">Download WebP</a>
68                      </div>
69                    )}
170
171    const resourceSummary = audits['resource-summary']?.details?.items || [];
172    const images = resourceSummary.find(item => item.resourceType === 'image') || { requestCount: 0, transferSize: 0 };
173    const videos = resourceSummary.find(item => item.resourceType === 'media') || { requestCount: 0, transferSize: 0 };
174    const totalBytes = resourceSummary.reduce((sum, item) => sum + (item.transferSize || 0), 0);
175
176    const networkRequests = audits['network-requests']?.details?.items || [];
177    const imageItems = networkRequests.filter(item => item.resourceType === 'Image' || item.resourceType === 'image');
178    const videoItems = networkRequests.filter(item => item.resourceType === 'Media' || item.resourceType === 'media');
179
202      cls: audits['cumulative-layout-shift']?.displayValue || 'N/A',
203      performance: categories.performance ? `${Math.round(categories.performance.score * 100)}%` : 'N/A',
204      images: {
205        count: images.requestCount || 0,
206        size: ((images.transferSize || 0) / 1024 / 1024).toFixed(2),
207        items: imageItems
208      },
209      videos: {
276                <li>Cumulative Layout Shift (CLS): {performanceMetrics.cls}</li>
277                <li>Performance Score: {performanceMetrics.performance}</li>
278                <li>Images: <span className="clickable" onClick={() => handleResourceClick('images')}>{performanceMetrics.images.count}</span> ({performanceMetrics.images.size} MB)</li>
279                <li>Videos: <span className="clickable" onClick={() => handleResourceClick('videos')}>{performanceMetrics.videos.count}</span> ({performanceMetrics.videos.size} MB)</li>
280                <li>Total Estimated Size: {performanceMetrics.totalSize}</li>

4
5function App() {
6  const [imageUrl, setImageUrl] = useState(null);
7  const [webpUrl, setWebpUrl] = useState(null);
8  const [originalSize, setOriginalSize] = useState(null);
15      const reader = new FileReader();
16      reader.onload = (e) => {
17        setImageUrl(e.target.result);
18        setOriginalSize(formatSize(file.size));
19      };
23
24  const convertToWebP = () => {
25    if (!imageUrl) return;
26
27    const img = new Image();
28    img.onload = () => {
29      const canvas = document.createElement('canvas');
31      canvas.height = img.height;
32      const ctx = canvas.getContext('2d');
33      ctx.drawImage(img, 0, 0);
34      
35      canvas.toBlob((blob) => {
37        setWebpUrl(url);
38        setWebpSize(formatSize(blob.size));
39      }, 'image/webp');
40    };
41    img.src = imageUrl;
42  };
43
44  const deleteImages = () => {
45    setImageUrl(null);
46    setWebpUrl(null);
47    setOriginalSize(null);
62  return (
63    <div className="container">
64      <h1>Image to WebP Converter</h1>
65      <input 
66        type="file" 
67        accept="image/*" 
68        onChange={handleFileChange} 
69        ref={fileInputRef}
70      />
71      {imageUrl && (
72        <div>
73          <img src={imageUrl} alt="Original" className="preview" />
74          <p>Original Size: {originalSize}</p>
75          <button onClick={convertToWebP}>Convert to WebP</button>
83        </div>
84      )}
85      {(imageUrl || webpUrl) && (
86        <button onClick={deleteImages} className="delete-btn">Delete Images</button>
87      )}
88      <p className="footer">
106        <meta charset="UTF-8">
107        <meta name="viewport" content="width=device-width, initial-scale=1.0">
108        <title>Image to WebP Converter</title>
109        <style>${css}</style>
110      </head>

335  background-color: #F5F5DC;
336  color: #4A4A4A;
337  background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23d2b48c' fill-opacity='0.1'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
338  transition: background-color 0.5s, color 0.5s;
339}
388  padding: 20px;
389  position: relative;
390  border-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='75' height='75'%3E%3Cg fill='none' stroke='%23B88846' stroke-width='2'%3E%3Cpath d='M1 1h73v73H1z'/%3E%3Cpath d='M8 8h59v59H8z'/%3E%3Cpath d='M8 8l59 59m0-59L8 67'/%3E%3C/g%3E%3C/svg%3E") 30;
391  border-width: 30px;
392  border-style: solid;
406  fill: #E8D0A9;
407  transition: fill 0.3s ease;
408  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='%23FF0000' d='M7 2l12 11.2-5.8 0.5 3.8 7.3-2 1-3.8-7.4-4.2 4.4z'/%3E%3C/svg%3E"), auto;
409}
410

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 

1/**
2 * This app creates a webcam-based image processing application with spooky effects.
3 * It requests webcam permissions, displays the video feed, and applies visual and audio effects.
4 * We use React for the UI, the browser's MediaDevices API for webcam access,
175      canvas.width = 64;
176      canvas.height = 64;
177      ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
178
179      const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
180      const data = imageData.data;
181
182      // Add spooky aura overlay
251      }
252
253      ctx.putImageData(imageData, 0, 0);
254
255      displayCanvas.width = video.videoWidth;
256      displayCanvas.height = video.videoHeight;
257      displayCtx.imageSmoothingEnabled = false;
258      displayCtx.drawImage(canvas, 0, 0, displayCanvas.width, displayCanvas.height);
259
260      animationFrameId = requestAnimationFrame(drawToCanvas);

11        <button className="close-btn" onClick={onClose}>×</button>
12        <div className="popup-content">
13          {content.type === 'images' && (
14            <>
15              <h3>Images</h3>
16              <ul>
17                {content.items.map((item, index) => (
121
122    const resourceSummary = audits['resource-summary']?.details?.items || [];
123    const images = resourceSummary.find(item => item.resourceType === 'image') || { requestCount: 0, transferSize: 0 };
124    const videos = resourceSummary.find(item => item.resourceType === 'media') || { requestCount: 0, transferSize: 0 };
125    const totalBytes = resourceSummary.reduce((sum, item) => sum + (item.transferSize || 0), 0);
126
127    const networkRequests = audits['network-requests']?.details?.items || [];
128    const imageItems = networkRequests.filter(item => item.resourceType === 'Image' || item.resourceType === 'image');
129    const videoItems = networkRequests.filter(item => item.resourceType === 'Media' || item.resourceType === 'media');
130
153      cls: audits['cumulative-layout-shift']?.displayValue || 'N/A',
154      performance: categories.performance ? `${Math.round(categories.performance.score * 100)}%` : 'N/A',
155      images: {
156        count: images.requestCount || 0,
157        size: ((images.transferSize || 0) / 1024 / 1024).toFixed(2),
158        items: imageItems
159      },
160      videos: {
227                <li>Cumulative Layout Shift (CLS): {performanceMetrics.cls}</li>
228                <li>Performance Score: {performanceMetrics.performance}</li>
229                <li>Images: <span className="clickable" onClick={() => handleResourceClick('images')}>{performanceMetrics.images.count}</span> ({performanceMetrics.images.size} MB)</li>
230                <li>Videos: <span className="clickable" onClick={() => handleResourceClick('videos')}>{performanceMetrics.videos.count}</span> ({performanceMetrics.videos.size} MB)</li>
231                <li>Total Estimated Size: {performanceMetrics.totalSize}</li>

7  const [result, setResult] = useState(null);
8  const [loading, setLoading] = useState(false);
9  const [showImageList, setShowImageList] = useState(false);
10  const [showVideoList, setShowVideoList] = useState(false);
11  const [showFullHtml, setShowFullHtml] = useState(false);
34  };
35
36  const toggleImageList = () => {
37    setShowImageList(!showImageList);
38    setShowVideoList(false);
39  };
41  const toggleVideoList = () => {
42    setShowVideoList(!showVideoList);
43    setShowImageList(false);
44  };
45
48  };
49
50  const downloadImage = async (imageUrl) => {
51    try {
52      const response = await fetch(imageUrl);
53      const blob = await response.blob();
54      const url = window.URL.createObjectURL(blob);
56      a.style.display = 'none';
57      a.href = url;
58      a.download = imageUrl.split('/').pop();
59      document.body.appendChild(a);
60      a.click();
61      window.URL.revokeObjectURL(url);
62    } catch (error) {
63      console.error("Error downloading image:", error);
64    }
65  };
123  };
124
125  const ImageListPopup = ({ imageList }) => (
126    <div className="popup image-list-popup">
127      <h3>Image List</h3>
128      <ul>
129        {imageList.map((img, index) => (
130          <li key={index}>
131            <span className="clickable" onClick={() => downloadImage(img.url)}>{img.url}</span>
132            <br />
133            Size: {img.size} KB
178              </div>
179            </div>
180            <p>Images: <span className="clickable" onClick={toggleImageList}>{result.imageCount}</span> (Estimated size: {result.estimatedImageSize.toFixed(2)} GB)</p>
181            <p>Videos: <span className="clickable" onClick={toggleVideoList}>{result.videoCount}</span> (Estimated size: {result.estimatedVideoSize.toFixed(2)} GB)</p>
182            <p>Total Estimated Size: {result.totalEstimatedSize.toFixed(2)} GB</p>
187            <p>Availability: {result.availability}</p>
188          </div>
189          {showImageList && <ImageListPopup imageList={result.imageList} />}
190          {showVideoList && <VideoListPopup videoList={result.videoList} />}
191          <div className="html-preview">
229      const pageContent = await response.text();
230      
231      // Image detection
232      const imageRegex = /<img[^>]+src\s*=\s*['"]([^'"]+)['"][^>]*>|background-image:\s*url\(['"]?([^'"]+)['"]?\)/gi;
233      const imageMatches = [...pageContent.matchAll(imageRegex)];
234      const imageList = await Promise.all(imageMatches.map(async match => {
235        const imgUrl = new URL(match[1] || match[2], url).href;
236        try {
239          return { url: imgUrl, size: size.toFixed(2) };
240        } catch (error) {
241          console.error(`Failed to fetch image: ${imgUrl}`, error);
242          return { url: imgUrl, size: '0.00' };
243        }
244      }));
245      const imageCount = imageList.length;
246
247      // Improved video detection and size estimation
265      const videoCount = videoList.length;
266      
267      const estimatedImageSize = imageList.reduce((total, img) => total + parseFloat(img.size), 0) / 1024; // Convert KB to GB
268      const estimatedVideoSize = videoList.reduce((total, video) => total + video.size, 0);
269      const totalEstimatedSize = estimatedImageSize + estimatedVideoSize;
270
271      // Extract page title
306
307      // Estimate FCP based on page size and content (very rough estimation)
308      const estimatedFCP = Math.min(1000, Math.max(100, totalEstimatedSize * 1000 + imageCount * 10 + videoCount * 50));
309
310      // Simple availability check
317        url,
318        pageTitle,
319        imageCount,
320        imageList,
321        videoCount,
322        videoList,
323        estimatedImageSize,
324        estimatedVideoSize,
325        totalEstimatedSize,
510    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
511  }
512  .image-list-popup {
513    background-color: #ffcccb;
514    border-color: #ff0000;

115to avoid the nasty look shown in the "Text Indentation" section.
116
117## Images ##
118
119![Mandelbrot Figure](https://www.rozek.de/Bangle.js/Mandelbrot_240x240.png)