Val Town Code SearchReturn to Val Town

23```
24
25## Images
26
27To send an image to ChatGPT, the easiest way is by converting it to a
28data URL, which is easiest to do with [@stevekrouse/fileToDataURL](https://www.val.town/v/stevekrouse/fileToDataURL).
29
30```ts title="Image Example" val
31import { fileToDataURL } from "https://esm.town/v/stevekrouse/fileToDataURL";
32
44    role: "user",
45    content: [{
46      type: "image_url",
47      image_url: {
48        url: dataURL,
49      },

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:

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:

3Every weekday at 9am EDT send a message to our team's #engineering Discord channel to start a thread to remind us to do our standup.
4
5![Screenshot 2024-03-14 at 09.27.26.png](https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/c5309028-4983-4a27-1aab-0e2bb0fc1800/public)
6
7Slack version: @mikker/dailySlackRoundup

4
5<div align="center">
6<img src="https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/67a1d35e-c37c-41a4-0e5a-03a9ba585d00/public" width="700px"/>
7</div>

8
9<div align="center">
10<img src="https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/67a1d35e-c37c-41a4-0e5a-03a9ba585d00/public" width="500px"/>
11</div>

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>