lovingApricotPossummain.tsx1 match
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
26title: "Markdown Editor",
27code:
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\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>",
29performance: {
30tokensPerSecond: 4092.96,
umbrellaReminderREADME.md1 match
1# ☔️ Umbrella reminder if there's rain today
23
45## Setup
cerebras_codermain.tsx1 match
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
falDemoAppmain.tsx23 matches
7function App() {
8const [prompt, setPrompt] = useState("");
9const [imageUrl, setImageUrl] = useState("");
10const [loading, setLoading] = useState(false);
11const [imageSize, setImageSize] = useState("1152x2048");
1213const imageSizeOptions = [
14{ value: "1536x1024", label: "Landscape 4:3" },
15{ value: "1024x1024", label: "Square 1:1" },
17];
1819const generateImage = async (e?: React.FormEvent) => {
20e?.preventDefault();
21setLoading(true);
25});
2627const [width, height] = imageSize.split('x').map(Number);
2829const result = await fal.run("fal-ai/flux/schnell", {
33height,
34num_inference_steps: 4,
35num_images: 1,
36enable_safety_checker: true,
37sync_mode: true,
39});
40
41if (result.data && result.data.images && result.data.images.length > 0) {
42setImageUrl(result.data.images[0].url);
43} else {
44console.error("No images returned", result);
45alert("No image could be generated. Please try again.");
46}
47} catch (error) {
48console.error("Error generating image:", error);
49alert(`Image generation failed: ${error.message}`);
50} finally {
51setLoading(false);
56<div className="min-h-screen bg-black text-white py-12 px-4 sm:px-6 lg:px-8">
57<div className="max-w-3xl mx-auto">
58<h1 className="text-4xl font-bold text-center mb-8">Fal AI Image Generator</h1>
59<div className="bg-gray-900 rounded-lg p-6 mb-8 shadow-lg">
60<form className="flex flex-col sm:flex-row gap-4" onSubmit={generateImage}>
61<input
62type="text"
63value={prompt}
64onChange={(e) => setPrompt(e.target.value)}
65placeholder="Enter your image prompt"
66className="flex-grow px-4 py-2 bg-gray-800 border border-gray-700 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-transparent"
67/>
68<select
69value={imageSize}
70onChange={(e) => setImageSize(e.target.value)}
71className="px-4 py-2 bg-gray-800 border border-gray-700 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-transparent"
72>
73{imageSizeOptions.map((option) => (
74<option key={option.value} value={option.value}>
75{option.label}
78</select>
79<button
80onClick={generateImage}
81disabled={loading || !prompt}
82className={`px-6 py-2 rounded-md text-white font-medium transition-colors duration-200 ${
108)
109: (
110"Generate Image"
111)}
112</button>
113</form>
114</div>
115{imageUrl && (
116<div className="bg-gray-900 rounded-lg overflow-hidden shadow-lg">
117<img src={imageUrl} alt="Generated image" className="w-full h-auto" />
118</div>
119)}
146<meta charset="UTF-8">
147<meta name="viewport" content="width=device-width, initial-scale=1.0">
148<title>Fal AI Image Generator</title>
149<script src="https://cdn.tailwindcss.com"></script>
150<style>
swiftEmeraldAphidmain.tsx1 match
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
sqliteExplorerAppREADME.md1 match
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.
45
67## Install
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
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
password_authREADME.md1 match
3Protect your vals behind a password. Use session cookies to persist authentication.
45
67## Usage