Val Town Code SearchReturn to Val Town

8  service_version: string;
9  title: string;
10  url: string; // image to display
11};
12

638        // Updated selector to check within .card-back-content
639        if ($card.hasClass('flipped') && $(e.target).closest('.card-back-content a, .card-back-content img').length) {
640          // Allow default link/image behavior on the back
641          return; 
642        }
649        }
650
651        // Optional: Prevent flip back if clicking image on the back (already covered above)
652        // if ($card.hasClass('flipped') && $(e.target).closest('.card-back img').length) {
653        //   return; 

34body {
35	font-family: 'Lato', Calibri, Arial, sans-serif;
36	background: #fff url(../images/bg.jpg);
37	font-weight: 300;
38	font-size: 14px; 

119}
120
121/* Make images on the back interactive */
122.card-back img {
123  cursor: pointer !important;

61    }
62    
63    /* Prevent image dragging */
64    img {
65      -webkit-user-drag: none;
105        "id": "1c152ddf-0e6b-80bc-8cd4-d81a96a67fbe",
106        "format": {
107          "social_media_image_preview_url": "attachment:f160f0cc-c1a5-4ec2-9db6-d900ac7458b7:SocialMediaPreviewImage.png"
108        },
109        "Front": [
110          {
111            "name": "ComfyUI_00087_.png",
112            "url": "https://www.notion.so/image/attachment:9219f59c-a5d9-4fff-a97f-62ca98f70842:ComfyUI_00087_.png?table=block&id=1c152ddf-0e6b-80bc-8cd4-d81a96a67fbe&cache=v2",
113            "rawUrl": "attachment:9219f59c-a5d9-4fff-a97f-62ca98f70842:ComfyUI_00087_.png"
114          }
121          {
122            "name": "ComfyUI_00029_.png",
123            "url": "https://www.notion.so/image/attachment:6ec555d3-e384-452d-9f9a-2a300ce507da:ComfyUI_00029_.png?table=block&id=1c152ddf-0e6b-80bc-8cd4-d81a96a67fbe&cache=v2",
124            "rawUrl": "attachment:6ec555d3-e384-452d-9f9a-2a300ce507da:ComfyUI_00029_.png"
125          }
136        "id": "1c152ddf-0e6b-8040-bf5e-ebe6d2b95a9a",
137        "format": {
138          "social_media_image_preview_url": "attachment:dfdbbc19-0d16-4ea6-9b97-32d94e8ff05b:SocialMediaPreviewImage.png"
139        },
140        "Multi-select": [
144          {
145            "name": "ComfyUI_00221_.png",
146            "url": "https://www.notion.so/image/attachment:843800e9-4042-4779-b7d4-33f1f11ca9b1:ComfyUI_00221_.png?table=block&id=1c152ddf-0e6b-8040-bf5e-ebe6d2b95a9a&cache=v2",
147            "rawUrl": "attachment:843800e9-4042-4779-b7d4-33f1f11ca9b1:ComfyUI_00221_.png"
148          }
152          {
153            "name": "ComfyUI_00091_.png",
154            "url": "https://www.notion.so/image/attachment:56331b22-bbf1-47b1-978d-a698a57b2dee:ComfyUI_00091_.png?table=block&id=1c152ddf-0e6b-8040-bf5e-ebe6d2b95a9a&cache=v2",
155            "rawUrl": "attachment:56331b22-bbf1-47b1-978d-a698a57b2dee:ComfyUI_00091_.png"
156          }
167        "id": "1c152ddf-0e6b-8098-ac53-c79f8d006934",
168        "format": {
169          "social_media_image_preview_url": "attachment:d282b4ba-2c75-4fae-915c-d89f403d37d5:SocialMediaPreviewImage.png"
170        },
171        "Front": [
172          {
173            "name": "ComfyUI_00141_.png",
174            "url": "https://www.notion.so/image/attachment:e68245dc-43e3-4a18-8295-4091ed83ff67:ComfyUI_00141_.png?table=block&id=1c152ddf-0e6b-8098-ac53-c79f8d006934&cache=v2",
175            "rawUrl": "attachment:e68245dc-43e3-4a18-8295-4091ed83ff67:ComfyUI_00141_.png"
176          }
180          {
181            "name": "quoter_TITLE-Upscale279.png",
182            "url": "https://www.notion.so/image/attachment:6c61278a-0ec4-45c2-807c-34c4ba1b33a8:quoter_TITLE-Upscale279.png?table=block&id=1c152ddf-0e6b-8098-ac53-c79f8d006934&cache=v2",
183            "rawUrl": "attachment:6c61278a-0ec4-45c2-807c-34c4ba1b33a8:quoter_TITLE-Upscale279.png"
184          }
197          {
198            "name": "ComfyUI_00162_.png",
199            "url": "https://www.notion.so/image/attachment:d0a90f7c-07fc-4d43-990b-dee7ec4c1fa2:ComfyUI_00162_.png?table=block&id=1c152ddf-0e6b-8056-96db-e2dc895a0a82&cache=v2",
200            "rawUrl": "attachment:d0a90f7c-07fc-4d43-990b-dee7ec4c1fa2:ComfyUI_00162_.png"
201          }
205          {
206            "name": "quoter_title_287.png",
207            "url": "https://www.notion.so/image/attachment:f2a2944c-5084-48b4-8d6c-2e9d1d2bb443:quoter_title_287.png?table=block&id=1c152ddf-0e6b-8056-96db-e2dc895a0a82&cache=v2",
208            "rawUrl": "attachment:f2a2944c-5084-48b4-8d6c-2e9d1d2bb443:quoter_title_287.png"
209          }
221          {
222            "name": "ComfyUI_00169_.png",
223            "url": "https://www.notion.so/image/attachment:42f03df5-868e-47d0-83b5-b6c23af439df:ComfyUI_00169_.png?table=block&id=1c152ddf-0e6b-80d2-a651-e35c5fb03dae&cache=v2",
224            "rawUrl": "attachment:42f03df5-868e-47d0-83b5-b6c23af439df:ComfyUI_00169_.png"
225          }
229          {
230            "name": "ComfyUI_00088_.png",
231            "url": "https://www.notion.so/image/attachment:3dd8e277-dbd0-4c03-b830-7194da259d68:ComfyUI_00088_.png?table=block&id=1c152ddf-0e6b-80d2-a651-e35c5fb03dae&cache=v2",
232            "rawUrl": "attachment:3dd8e277-dbd0-4c03-b830-7194da259d68:ComfyUI_00088_.png"
233          }
243        "id": "1c152ddf-0e6b-81f8-ba51-e7f17fcb763c",
244        "format": {
245          "social_media_image_preview_url": "attachment:49618c5d-8e29-4977-8c6f-e53a87502fa9:SocialMediaPreviewImage.png"
246        },
247        "Front": [
248          {
249            "name": "2.png",
250            "url": "https://www.notion.so/image/attachment:882f4448-2b55-404c-9cf1-246a12816ac2:2.png?table=block&id=1c152ddf-0e6b-81f8-ba51-e7f17fcb763c&cache=v2",
251            "rawUrl": "attachment:882f4448-2b55-404c-9cf1-246a12816ac2:2.png"
252          }
262          {
263            "name": "quoter_title_70.png",
264            "url": "https://www.notion.so/image/attachment:1abfa6f8-289d-466e-8a72-c183a07145ac:quoter_title_70.png?table=block&id=1c152ddf-0e6b-81f8-ba51-e7f17fcb763c&cache=v2",
265            "rawUrl": "attachment:1abfa6f8-289d-466e-8a72-c183a07145ac:quoter_title_70.png"
266          }
284          {
285            "name": "ComfyUI_00225_.png",
286            "url": "https://www.notion.so/image/attachment:d3a71d0d-328c-4a55-ac1c-9b479934bfff:ComfyUI_00225_.png?table=block&id=1c152ddf-0e6b-8073-a210-d51e6109f4f9&cache=v2",
287            "rawUrl": "attachment:d3a71d0d-328c-4a55-ac1c-9b479934bfff:ComfyUI_00225_.png"
288          }
302          {
303            "name": "ComfyUI_00109_.png",
304            "url": "https://www.notion.so/image/attachment:597bc5b2-8d2b-46ec-9ca8-f857651fc25e:ComfyUI_00109_.png?table=block&id=1c152ddf-0e6b-8073-a210-d51e6109f4f9&cache=v2",
305            "rawUrl": "attachment:597bc5b2-8d2b-46ec-9ca8-f857651fc25e:ComfyUI_00109_.png"
306          }
324          {
325            "name": "ComfyUI_00068_.png",
326            "url": "https://www.notion.so/image/attachment:b3b11edf-94dd-4e94-b0be-208598e0ac6c:ComfyUI_00068_.png?table=block&id=1c152ddf-0e6b-80db-87e3-d2e27d45f84f&cache=v2",
327            "rawUrl": "attachment:b3b11edf-94dd-4e94-b0be-208598e0ac6c:ComfyUI_00068_.png"
328          }
342          {
343            "name": "ComfyUI_00123_.png",
344            "url": "https://www.notion.so/image/attachment:86049fd9-7002-4ba9-a22b-f5052d2f2da2:ComfyUI_00123_.png?table=block&id=1c152ddf-0e6b-80db-87e3-d2e27d45f84f&cache=v2",
345            "rawUrl": "attachment:86049fd9-7002-4ba9-a22b-f5052d2f2da2:ComfyUI_00123_.png"
346          }
364          {
365            "name": "ComfyUI_00042_.png",
366            "url": "https://www.notion.so/image/attachment:95edde1d-d144-4649-afeb-a62ac8c2afdc:ComfyUI_00042_.png?table=block&id=1c152ddf-0e6b-810c-9eed-e943f4bdc302&cache=v2",
367            "rawUrl": "attachment:95edde1d-d144-4649-afeb-a62ac8c2afdc:ComfyUI_00042_.png"
368          }
382          {
383            "name": "ComfyUI_temp_ccvjl_00023_.png",
384            "url": "https://www.notion.so/image/attachment:3b045c41-5d5f-4dfe-b923-dd00c5a08c17:ComfyUI_temp_ccvjl_00023_.png?table=block&id=1c152ddf-0e6b-810c-9eed-e943f4bdc302&cache=v2",
385            "rawUrl": "attachment:3b045c41-5d5f-4dfe-b923-dd00c5a08c17:ComfyUI_temp_ccvjl_00023_.png"
386          }
404          {
405            "name": "ComfyUI_00039_.png",
406            "url": "https://www.notion.so/image/attachment:1e9bf355-4583-45c7-83d5-cd6ea116ed5d:ComfyUI_00039_.png?table=block&id=1c152ddf-0e6b-817a-8e0a-de56d1dcc911&cache=v2",
407            "rawUrl": "attachment:1e9bf355-4583-45c7-83d5-cd6ea116ed5d:ComfyUI_00039_.png"
408          }
422          {
423            "name": "ComfyUI_temp_ccvjl_00009_.png",
424            "url": "https://www.notion.so/image/attachment:b3449985-2ac9-403e-9758-a557a5ace9c4:ComfyUI_temp_ccvjl_00009_.png?table=block&id=1c152ddf-0e6b-817a-8e0a-de56d1dcc911&cache=v2",
425            "rawUrl": "attachment:b3449985-2ac9-403e-9758-a557a5ace9c4:ComfyUI_temp_ccvjl_00009_.png"
426          }
456        frontDiv.className = 'card-front';
457        
458        // Front image
459        if (item.Front && item.Front.length > 0) {
460          const img = document.createElement('img');
461          img.src = item.Front[0].url;
462          img.alt = item.Title || 'Card Image';
463          img.draggable = false;
464          img.style.pointerEvents = 'none';
489        backContent.className = 'card-back-content';
490        
491        // Add back image if available
492        if (item.Back && item.Back.length > 0) {
493          const backImg = document.createElement('img');

89  .voice-select {
90    @apply appearance-none border border-gray-300 rounded-md shadow-sm pl-3 pr-10 py-2 text-base focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm;
91    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
92    background-position: right 0.5rem center;
93    background-repeat: no-repeat;

23    "prompt": "two column interactive markdown editor with live preview and default text to explain markdown features",
24    "title": "Markdown Editor",
25    "code": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>Markdown Editor</title>\n    <link href=\"https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css\" rel=\"stylesheet\">\n</head>\n<body class=\"bg-white\">\n    <div class=\"max-w-full mx-auto p-4 pt-6 md:p-6 lg:p-8\">\n        <h1 class=\"text-3xl text-center mb-4\">Markdown Editor</h1>\n        <div class=\"flex flex-row\">\n            <div class=\"editor p-4 rounded-lg border border-gray-200 w-full md:w-1/2\">\n                <textarea id=\"editor\" class=\"w-full h-screen p-2 border border-gray-200 rounded-lg\" placeholder=\"Type your Markdown here...\"></textarea>\n            </div>\n            <div class=\"preview p-4 rounded-lg border border-gray-200 w-full md:w-1/2 ml-2 md:ml-4 lg:ml-8\">\n                <div id=\"preview\"></div>\n            </div>\n        </div>\n        <p class=\"text-center mt-4\">Built on <a href=\"https://cerebrascoder.com\">Cerebras Coder</a></p>\n    </div>\n\n    <script>\n        const editor = document.getElementById('editor');\n        const preview = document.getElementById('preview');\n\n        // Initialize textarea with default markdown\n        const defaultMarkdown = `\n# Introduction to Markdown\nMarkdown is a lightweight markup language that is easy to read and write. It is often used for formatting text in plain text editors, chat applications, and even web pages.\n\n## Headers\nHeaders are denoted by the # symbol followed by a space. The number of # symbols determines the level of the header:\n# Heading 1\n## Heading 2\n### Heading 3\n\n## Emphasis\nYou can use emphasis to make your text **bold** or *italic*:\n*Italics*\n**Bold**\n\n## Lists\nYou can use lists to organize your text:\n* Item 1\n* Item 2\n* Item 3\nOr\n1. Item 1\n2. Item 2\n3. Item 3\n\n## Links\nYou can use links to reference external resources:\n[Google](https://www.google.com)\n\n## Images\nYou can use images to add visual content:\n![Markdown Logo](https://upload.wikimedia.org/wikipedia/commons/thumb/4/48/Markdown-mark.svg/208px-Markdown-mark.svg.png)\n`;\n        editor.value = defaultMarkdown;\n\n        // Update preview on input\n        editor.addEventListener('input', () => {\n            const markdown = editor.value;\n            const html = markdownToHtml(markdown);\n            preview.innerHTML = html;\n        });\n\n        // Initialize preview with default markdown\n        const defaultHtml = markdownToHtml(defaultMarkdown);\n        preview.innerHTML = defaultHtml;\n\n        // Function to convert Markdown to HTML\n        function markdownToHtml(markdown) {\n            // Bold\n            markdown = markdown.replace(/\\*\\*(.*?)\\*\\*/g, '<b>$1</b>');\n\n            // Italic\n            markdown = markdown.replace(/\\*(.*?)\\*/g, '<i>$1</i>');\n\n            // Links\n            markdown = markdown.replace(/\\[(.*?)\\]\\((.*?)\\)/g, '<a href=\"$2\">$1</a>');\n\n            // Images\n            markdown = markdown.replace(/!\\[(.*?)\\]\\((.*?)\\)/g, '<img src=\"$2\" alt=\"$1\">');\n\n            // Headings\n            markdown = markdown.replace(/(^#{1,6} )(.*)/gm, (match, level, text) => {\n                return `<h${level.length}>${text}</h${level.length}>`;\n            });\n\n            // Lists\n            markdown = markdown.replace(/^(\\*|\\d+\\.) (.*)/gm, (match, marker, text) => {\n                if (marker.startsWith('*')) {\n                    return `<li>${text}</li>`;\n                } else {\n                    return `<li>${text}</li>`;\n                }\n            });\n\n            // Line breaks\n            markdown = markdown.replace(/\\n/g, '<br>');\n\n            // Fix for nested lists\n            markdown = markdown.replace(/<li><li>/g, '<li>');\n            markdown = markdown.replace(/<\\/li><\\/li>/g, '</li>');\n\n            // Wrap lists in ul\n            markdown = markdown.replace(/(<li>.*<\\/li>)/g, '<ul>$1</ul>');\n\n            return markdown;\n        }\n    </script>\n</body>\n</html>",
26    "performance": {
27      "tokensPerSecond": 4092.96,

21      <meta property="og:description" content="Turn your ideas into fully functional apps in less than a second – powered by Llama3.3-70b on Cerebras's super-fast wafer chips. Code is 100% open-source, hosted on Val Town."">
22      <meta property="og:type" content="website">
23      <meta property="og:image" content="https://stevekrouse-blob_admin.web.val.run/api/public/CerebrasCoderOG.jpg">
24      
25          

1# PNG Dithering
2
3A tool that applies dithering effects to PNG images using the [Monke library](https://www.val.town/x/maxm/monke) (fixed and hosted on Val Town)

1import { createCanvas, loadImage } from "https://deno.land/x/canvas/mod.ts";
2import { Color, getPixels, Image, quantizeByMedianCut } from "https://esm.town/v/maxm/monke/mod.ts";
3
4const methods = [
10];
11
12async function getImage(url: string) {
13  const data = await fetch(url).then((e) => e.arrayBuffer()).then((e) => new Uint8Array(e));
14  const image = await loadImage(data);
15
16  const canvas = createCanvas(image.width(), image.height());
17
18  const ctx = canvas.getContext("2d");
19
20  ctx.drawImage(image, 0, 0, canvas.width, canvas.height);
21  const d = ctx.getImageData(0, 0, canvas.width, canvas.height).data;
22  return new Image(d, canvas.width, canvas.height);
23}
24
38    // ctx.fillStyle = "red";
39    // ctx.fillRect(10, 10, 200 - 20, 200 - 20);
40    // const d = ctx.getImageData(0, 0, canvas.width, canvas.height).data;
41    const image = await getImage(
42      imgUrl,
43    );
44    image.dither(["#000000", "#ffffff"].map((e) => new Color(e)), {
45      method: methods.find((e) => e === url.searchParams.get("method")) || methods[0],
46    });
47    const i = createCanvas(image.width, image.height);
48
49    const ctx2 = i.getContext("2d");
50
51    const data = image.toImageData();
52
53    ctx2.putImageData(data, 0, 0);
54    return new Response(i.toBuffer("image/png"), {
55      headers: {
56        "Content-Type": "image/png",
57      },
58    });