Val Town Code Search

cerebras_coder starter-prompts.js1 match

@brevmana•Updated 2 months ago

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,

cerebras_coder index.html1 match

@brevmana•Updated 2 months ago

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

hardballcity util1 match

@flymaster•Updated 2 months ago

7        <meta name="viewport" content="width=device-width">
8        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@latest/dist/tabler-icons.min.css"/>
9        <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>⚾</text></svg>"/>
10      </head>
11      <body>

fluxReduxPro main.tsx34 matches

@AIWB•Updated 2 months ago

1// This app uses the fal.ai API to generate images based on user prompts.
2// It features a clean UI with an input field for the prompt and a button to generate the image.
3// The generated image is displayed below the input field.
4// React is used for the UI and the fal.ai serverless client for image generation.
5// The app measures and displays the latency for each image generation.
6// The background features randomly placed pixelart lightning bolts in neon yellow.
7
18const DEFAULT_IMG_PROMPT = "https://placehold.jp/1024x1536.png";
19const DEFAULT_PROMPT = "4 equal sized photos in a 2x2 grid";
20const PLACEHOLDER_IMAGE = "https://placehold.jp/1024x1536.png";
21const RATE_LIMIT = 15; // requests per hour
22const RATE_LIMIT_WINDOW = 5 * 60 * 1000; // 5 minutes in milliseconds
74  const [imgPrompt, setImgPrompt] = useState(DEFAULT_IMG_PROMPT);
75  const [prompt, setPrompt] = useState(DEFAULT_PROMPT);
76  const [imageUrl, setImageUrl] = useState(PLACEHOLDER_IMAGE);
77  const [latency, setLatency] = useState<number | null>(null);
78  const [loading, setLoading] = useState(false);
79  const [error, setError] = useState("");
80
81  const generateImage = async () => {
82    setLoading(true);
83    setError("");
89      });
90      const data = await response.json();
91      if (!response.ok) throw new Error(data.error || "Failed to generate image");
92      setLatency(data.latency);
93      setImageUrl(data.imageUrl);
94      setError(""); // Clear any previous errors
95    } catch (err) {
105      <Background />
106      <div className="container">
107        <h1 className="title">AI Image Generator</h1>
108        <div className="input-container">
109          <input
122          />
123        </div>
124        <button onClick={generateImage} disabled={loading || !prompt} className="generate-btn">
125          {loading ? "Generating..." : "Generate Image"}
126        </button>
127        {error && <p className="error">{error}</p>}
128        <div className="image-container">
129          {latency !== null && (
130            <p className="latency">Inference time (doesn't include network): {latency.toFixed(2)} ms</p>
131          )}
132          <div className="image-wrapper">
133            <div className="image-box">
134              <h3>Original Image</h3>
135              <img src={imgPrompt} alt="Original image" className="original-image" />
136            </div>
137            <div className="image-box">
138              <h3>Generated Image</h3>
139              {loading ? <LoadingSpinner /> : <img src={imageUrl} alt="Generated image" className="generated-image" />}
140            </div>
141          </div>
208      const result = await fal.run("fal-ai/flux-pro/v1/redux", {
209        input: {
210          image_url: imgPrompt,
211          prompt: prompt,
212          image_size: {
213            width: 1024,
214            height: 1536,
215          },
216          num_inference_steps: 30,
217          num_images: 1,
218          guidance_scale: 3.5,
219          enable_safety_checker: false,
222      });
223      return new Response(
224        JSON.stringify({ imageUrl: result.images[0].url, latency: result.timings.inference * 1000 }),
225        {
226          headers: { "Content-Type": "application/json" },
228      );
229    } catch (error) {
230      return new Response(JSON.stringify({ error: "Failed to generate image" }), {
231        status: 500,
232        headers: { "Content-Type": "application/json" },
242        <meta charset="UTF-8">
243        <meta name="viewport" content="width=device-width, initial-scale=1.0">
244        <title>AI Image Generator</title>
245        <style>${css}</style>
246      </head>
336    text-align: center;
337  }
338  .image-container {
339    margin-top: 20px;
340    text-align: center;
343    border-radius: 10px;
344  }
345  .image-wrapper {
346    display: flex;
347    justify-content: space-between;
348    gap: 20px;
349  }
350  .image-box {
351    flex: 1;
352    display: flex;
354    align-items: center;
355  }
356  .image-box h3 {
357    margin-bottom: 10px;
358  }
359  .original-image,
360  .generated-image {
361    max-width: 100%;
362    height: auto;
426      font-size: 0.9em;
427    }
428    .image-wrapper {
429      flex-direction: column;
430    }

coffee starter-prompts.js1 match

@ts2004•Updated 2 months ago

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,

coffee index.html1 match

@ts2004•Updated 2 months ago

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

twitterNewFollowingAlert README.md1 match

@socialdata•Updated 2 months ago

6## Example
7
8![Example image](https://docs.socialdata.tools/monitors-example-following.png)
9
10## Prerequisites

thrillingMagentaParakeet main.tsx4 matches

@zoozz•Updated 2 months ago

11
12  const cats = [
13    { name: 'Whiskers', odds: 2.5, image: '🐈' },
14    { name: 'Mittens', odds: 3.0, image: '😺' },
15    { name: 'Socks', odds: 1.8, image: '🐱' }
16  ];
17
97            }}
98          >
99            {cat.image} {cat.name} (Odds: {cat.odds})
100          </button>
101        ))}

cerebras_coder starter-prompts.js1 match

@asifahmedayaan•Updated 2 months ago

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,

cerebras_coder index.html1 match

@asifahmedayaan•Updated 2 months ago

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

« Previous

1...392 393 394 395 396 397 398...692

Projects

View all 100 projects

thilenius-webcam1 file match

@stabbylambda•Updated 4 days ago

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

Users

View all 2 users

@Atiq1 project

Updated 2 weeks 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

cerebras_coder starter-prompts.js1 match

cerebras_coder index.html1 match

hardballcity util1 match

fluxReduxPro main.tsx34 matches

coffee starter-prompts.js1 match

coffee index.html1 match

twitterNewFollowingAlert README.md1 match

thrillingMagentaParakeet main.tsx4 matches

cerebras_coder starter-prompts.js1 match

cerebras_coder index.html1 match

Projects

thilenius-webcam1 file match

image-gen

Users

@Chrimage1 project

@Atiq1 project

Documentation

Val Town Code SearchReturn to Val Town

cerebras_coderstarter-prompts.js1 match

cerebras_coderindex.html1 match

hardballcityutil1 match

fluxReduxPromain.tsx34 matches

coffeestarter-prompts.js1 match

coffeeindex.html1 match

twitterNewFollowingAlertREADME.md1 match

thrillingMagentaParakeetmain.tsx4 matches

cerebras_coderstarter-prompts.js1 match

cerebras_coderindex.html1 match

Projects

thilenius-webcam1 file match

image-gen

Users

@Chrimage1 project

@Atiq1 project

Documentation

Val Town Code Search Return to Val Town

cerebras_coder starter-prompts.js1 match

cerebras_coder index.html1 match

hardballcity util1 match

fluxReduxPro main.tsx34 matches

coffee starter-prompts.js1 match

coffee index.html1 match

twitterNewFollowingAlert README.md1 match

thrillingMagentaParakeet main.tsx4 matches

cerebras_coder starter-prompts.js1 match

cerebras_coder index.html1 match