Val Town Code SearchReturn to Val Town

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)

3Move circles around. State is synced with the server. Open a window in another tab and watch the circles update as you move them .
4
5![image.png](https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/e2a6db10-906d-4398-6e13-32475a0b6500/public)
6

1import { createCanvas, loadImage } from "https://deno.land/x/canvas/mod.ts";
2import { blob } from "https://esm.town/v/std/blob";
3import { BLOB_PREFIX, POST_PREFIX, Slam } from "https://esm.town/v/dupontgu/findSlamArticles";
4import { Counter } from "https://esm.town/v/dupontgu/persistentCounter"
5import { blueskyPostWithImage } from "https://esm.town/v/dupontgu/heavenlyOrangeMarmoset"
6
7// Replace with your actual access token and Mastodon instance URL
9const MASTODON_URL = "https://mastodon.social";
10
11interface Image {
12  url: string
13  // text locations within image, Vec3: [x, y, rotation]
14  slammer_txt_loc: number[]
15  slammed_txt_loc: number[],
17  alt_txt: string
18}
19const images: Image[] = [
20  {
21    url:"https://bloximages.newyork1.vip.townnews.com/gazette.com/content/tncms/assets/v3/editorial/d/ea/dea0914b-9915-553c-bc42-81313201d4ac/5b32bb43c0f7e.image.jpg",
22    slammer_txt_loc: [140, 190, -0.4],
23    slammed_txt_loc: [90, 280, -0.0],
40  },
41  {
42    url:"https://media.licdn.com/dms/image/v2/C4E12AQGcr20PW6r-Sw/article-cover_image-shrink_423_752/article-cover_image-shrink_423_752/0/1520115254001?e=1733356800&v=beta&t=OVWwDx4QhdF1IaMjSOOMpLRGRCnSVGp7Il_mERmKBGc",
43    slammer_txt_loc: [180, 120, -0.0],
44    slammed_txt_loc: [280, 330, -0.0],
61  },
62  {
63    url:"https://i.dailymail.co.uk/1s/2024/03/19/04/82623845-13212905-image-a-89_1710821176313.jpg",
64    slammer_txt_loc: [310, 440, -0.0],
65    slammed_txt_loc: [170, 790, -0.0],
82  },
83  {
84    url:"https://static.wikia.nocookie.net/international-pokedex/images/6/6a/Body_Slam_%28Ash%27s_Snorlax%29.png",
85    slammer_txt_loc: [280, 100, -0.0],
86    slammed_txt_loc: [240, 430, -0.0],
96  },
97  {
98    url:"https://static.wikia.nocookie.net/baki/images/2/22/Tackle.png/revision/latest?cb=20170117232328",
99    slammer_txt_loc: [150, 100, -0.0],
100    slammed_txt_loc: [510, 350, -0.0],
110  },
111  {
112    url:"https://static.wikia.nocookie.net/dragonball/images/2/2b/Gigantic_Spike.png/revision/latest/scale-to-width-down/1000?cb=20180515222853",
113    slammer_txt_loc: [270, 100, -0.0],
114    slammed_txt_loc: [340, 500, -0.0],
125]
126
127async function uploadImage(imageBuffer: any, altText: string): Promise<string> {
128  const formData = new FormData();
129  formData.append("file", new Blob([imageBuffer], { type: "image/png" }));
130  formData.append("description", altText);
131
139
140  if (!uploadResponse.ok) {
141    throw new Error("Failed to upload image");
142  }
143
146}
147
148async function postStatusWithImage(statusText: string, imageBuffer: any, altText: string) {
149  const mediaId = await uploadImage(imageBuffer, altText);
150
151  const postResponse = await fetch(`${MASTODON_URL}/api/v1/statuses`, {
157    body: JSON.stringify({
158      status: statusText,
159      media_ids: [mediaId], // Attach the uploaded image by its media ID
160    }),
161  });
170}
171
172async function overlayTextOnImage(slammer_text: string, slammed_text: string, imageDef: Image): Promise<Uint8Array> {
173  const image = await loadImage(imageDef.url);
174  let fontFile = await fetch(
175    "https://github.com/sophilabs/macgifer/raw/master/static/font/impact.ttf",
177  const fontBlob = await fontFile.blob();
178  let fontBytes = new Uint8Array(await fontBlob.arrayBuffer());
179  const canvas = createCanvas(image.width(), image.height());
180  canvas.loadFont(fontBytes, { family: "Impact" });
181  const ctx = canvas.getContext('2d');
182
183  ctx.drawImage(image, 0, 0, image.width(), image.height());
184  ctx.fillStyle = 'white';
185  ctx.strokeStyle = 'black';
189
190  const baseTextSize = 46;
191  const slammer_size = (baseTextSize * imageDef.text_scale) - (slammer_text.length * imageDef.text_scale * 0.84)
192  ctx.font = `${slammer_size}px Impact`;
193  ctx.rotate(imageDef.slammer_txt_loc[2])
194  let xAdjust = (slammer_text.length / 2) * 6
195  ctx.strokeText(slammer_text, imageDef.slammer_txt_loc[0] - xAdjust, imageDef.slammer_txt_loc[1]);
196  ctx.fillText(slammer_text, imageDef.slammer_txt_loc[0] - xAdjust, imageDef.slammer_txt_loc[1]);
197
198  // reset rotation
199  ctx.rotate(-imageDef.slammer_txt_loc[2])
200  const slammed_size = (baseTextSize * imageDef.text_scale) - (slammed_text.length * imageDef.text_scale * 0.84)
201  ctx.font = `${slammed_size}px Impact`;
202  ctx.rotate(imageDef.slammed_txt_loc[2])
203  xAdjust = (slammed_text.length / 2) * 6
204  ctx.strokeText(slammed_text, imageDef.slammed_txt_loc[0] - xAdjust, imageDef.slammed_txt_loc[1]);
205  ctx.fillText(slammed_text, imageDef.slammed_txt_loc[0] - xAdjust, imageDef.slammed_txt_loc[1]);
206
207  return canvas.toBuffer('image/png');
208}
209
216  const postCounter = new Counter("SLAM_post_counter");
217  const count = await postCounter.get()
218  const image = images[count % images.length]
219  // const image = images[images.length - 1]
220  const modifiedImageBuffer = await overlayTextOnImage(slam.slammer, slam.slammed, image);
221  const adjustedHeadline = slam.txt.replace('slams', 'SLAMS').replace('Slams', 'SLAMS')
222  const statusText = `${adjustedHeadline}\n\n via \n${slam.url}`
223  const altText = `${image.alt_txt}\n The slammer is labeled with ${slam.slammer} and the person or thing being slammed is labeled ${slam.slammed}.\n\n image source: ${image.url}`
224  const mastoUrl = await postStatusWithImage(statusText, modifiedImageBuffer, altText)
225  await blob.delete(inputs[0].key)
226  await blob.setJSON(POST_PREFIX + slam.url, {url:mastoUrl})
227  await postCounter.increment()
228  await blueskyPostWithImage(statusText, modifiedImageBuffer, altText)
229  return new Response(modifiedImageBuffer, {
230      headers: {
231        'Content-Type': 'image/png',
232      },
233    });

1import { BskyAgent, BlobRef, RichText } from 'npm:@atproto/api';
2
3export async function blueskyPostWithImage(statusText: string, imageBuffer: any, altText: string) {
4  const BSKY_EMAIL = Deno.env.get("BSKY_EMAIL");
5  const BSKY_PWD = Deno.env.get("BSKY_PWD");
8  const rt = new RichText({ text: statusText })
9  await rt.detectFacets(agent)
10  const { data } = await agent.uploadBlob(imageBuffer, { encoding: "png" })
11  const postReuslt = await agent.post({
12    text: rt.text,
13    facets: rt.facets,
14    embed: {
15      $type: 'app.bsky.embed.images',
16      images: [
17        {
18          image: data.blob,
19          alt: altText
20        }