Val Town Code Search

STARTER_PROMPTS main.tsx1 match

@rjflash•Updated 4 months ago

26    title: "Markdown Editor",
27    code:
28      "<!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>",
29    performance: {
30      tokensPerSecond: 4092.96,

cerebras_coder main.tsx1 match

@chaitanya5•Updated 4 months ago

1165        <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."">
1166        <meta property="og:type" content="website">
1167        <meta property="og:image" content="https://stevekrouse-blob_admin.web.val.run/api/public/CerebrasCoderOG.jpg">
1168        
1169

cerebras_coder main.tsx1 match

@paxien•Updated 4 months ago

1165        <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."">
1166        <meta property="og:type" content="website">
1167        <meta property="og:image" content="https://stevekrouse-blob_admin.web.val.run/api/public/CerebrasCoderOG.jpg">
1168        
1169

STARTER_PROMPTS main.tsx1 match

@beybladeog•Updated 4 months ago

26    title: "Markdown Editor",
27    code:
28      "<!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>",
29    performance: {
30      tokensPerSecond: 4092.96,

cerebras_coder main.tsx1 match

@beybladeog•Updated 4 months ago

1165        <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."">
1166        <meta property="og:type" content="website">
1167        <meta property="og:image" content="https://stevekrouse-blob_admin.web.val.run/api/public/CerebrasCoderOG.jpg">
1168        
1169

reactImageStackerApp main.tsx24 matches

@jjg•Updated 4 months ago

3import { createRoot } from "https://esm.sh/react-dom@18.2.0/client";
4
5function ImageStacker() {
6  const [images, setImages] = useState<{src: string, width: number, height: number}[]>([]);
7  const canvasRef = useRef<HTMLCanvasElement>(null);
8
17        const reader = new FileReader();
18        reader.onload = (e) => {
19          const img = new Image();
20          img.onload = () => {
21            const canvas = canvasRef.current;
23              const ctx = canvas.getContext('2d');
24              if (ctx) {
25                // Determine minimum width across all images
26                const newImageEntry = { src: img.src, width: img.width, height: img.height };
27                const updatedImages = [...images, newImageEntry];
28                const minWidth = Math.min(...updatedImages.map(i => i.width));
29                const totalHeight = updatedImages.reduce((sum, img) => sum + img.height, 0);
30
31                // Set canvas dimensions precisely
33                canvas.height = totalHeight;
34
35                // Clear canvas and redraw all images scaled to min width
36                ctx.clearRect(0, 0, canvas.width, canvas.height);
37                let currentY = 0;
38                updatedImages.forEach(imgData => {
39                  const loadedImg = new Image();
40                  loadedImg.onload = () => {
41                    // Scale image to minimum width while maintaining aspect ratio
42                    const scaleFactor = minWidth / imgData.width;
43                    const scaledHeight = imgData.height * scaleFactor;
44                    
45                    ctx.drawImage(
46                      loadedImg, 
47                      0, 
55                });
56
57                // Update images state
58                setImages(updatedImages);
59              }
60            }
65      });
66    }
67  }, [images]);
68
69  const handleDownload = () => {
71    if (canvas) {
72      const link = document.createElement('a');
73      link.download = 'stacked-images.png';
74      link.href = canvas.toDataURL();
75      link.click();
95      <input 
96        type="file" 
97        accept="image/*" 
98        multiple 
99        onChange={handleFileUpload} 
110        }}
111      />
112      {images.length > 0 && (
113        <button onClick={handleDownload}>
114          Download Stacked Image
115        </button>
116      )}
117      <p>Drag and drop images or use file input to stack images</p>
118    </div>
119  );
128      padding: '20px' 
129    }}>
130      <h1>Image Stacker 🖼️</h1>
131      <ImageStacker />
132      <a 
133        href={import.meta.url.replace("esm.town", "val.town")} 
155    <html>
156      <head>
157        <title>Image Stacker</title>
158        <meta name="viewport" content="width=device-width, initial-scale=1">
159      </head>

cerebras_coder main.tsx1 match

@saravananarch•Updated 4 months ago

1165        <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."">
1166        <meta property="og:type" content="website">
1167        <meta property="og:image" content="https://stevekrouse-blob_admin.web.val.run/api/public/CerebrasCoderOG.jpg">
1168        
1169

OpenAI README.md5 matches

@ianmenethil•Updated 4 months ago

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      },

cerebras_coder main.tsx1 match

@code01•Updated 4 months ago

1165        <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."">
1166        <meta property="og:type" content="website">
1167        <meta property="og:image" content="https://stevekrouse-blob_admin.web.val.run/api/public/CerebrasCoderOG.jpg">
1168        
1169

tldc_discord main.tsx3 matches

@hyusap•Updated 4 months ago

16};
17
18type ImageData = {
19  type: "image";
20  text: string;
21  name?: string | undefined;
48};
49
50export type Data = BooleanData | TextData | ImageData | SpeechData | WebsiteData | FileData;
51
52type DataComponentRequestBody = {

« Previous

1...511 512 513 514 515 516 517...657

Projects

View all 100 projects

thilenius-webcam1 file match

@stabbylambda•Updated 20 hours ago

Image proxy for the latest from https://gliderport.thilenius.com

Users

View all 2 users

@Atiq1 project

Updated 1 week ago

"Focal Lens with Atig Wazir" "Welcome to my photography journey! I'm Atiq Wazir, a passionate photographer capturing life's beauty one frame at a time. Explore my gallery for stunning images, behind-the-scenes stories, and tips & tricks to enhance your own

Documentation

View all 7 documentation results

Val Town Code Search Return to Val Town

STARTER_PROMPTS main.tsx1 match

cerebras_coder main.tsx1 match

cerebras_coder main.tsx1 match

STARTER_PROMPTS main.tsx1 match

cerebras_coder main.tsx1 match

reactImageStackerApp main.tsx24 matches

cerebras_coder main.tsx1 match

OpenAI README.md5 matches

cerebras_coder main.tsx1 match

tldc_discord main.tsx3 matches

Projects

thilenius-webcam1 file match

image-gen

Users

@Chrimage1 project

@Atiq1 project

Documentation

Val Town Code SearchReturn to Val Town

STARTER_PROMPTSmain.tsx1 match

cerebras_codermain.tsx1 match

cerebras_codermain.tsx1 match

STARTER_PROMPTSmain.tsx1 match

cerebras_codermain.tsx1 match

reactImageStackerAppmain.tsx24 matches

cerebras_codermain.tsx1 match

OpenAIREADME.md5 matches

cerebras_codermain.tsx1 match

tldc_discordmain.tsx3 matches

Projects

thilenius-webcam1 file match

image-gen

Users

@Chrimage1 project

@Atiq1 project

Documentation

Val Town Code Search Return to Val Town

STARTER_PROMPTS main.tsx1 match

cerebras_coder main.tsx1 match

cerebras_coder main.tsx1 match

STARTER_PROMPTS main.tsx1 match

cerebras_coder main.tsx1 match

reactImageStackerApp main.tsx24 matches

cerebras_coder main.tsx1 match

OpenAI README.md5 matches

cerebras_coder main.tsx1 match

tldc_discord main.tsx3 matches