Val Town Code SearchReturn to Val Town

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        }

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

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: