24);
25
26function Hero({
27 prompt,
28 setPrompt,
45
46 <p className="text-[#bababa] text-center max-w-[25ch] mx-auto my-4 font-dm-sans">
47 Turn your ideas into fully functional apps in{" "}
48 <span className="relative w-fit text-fuchsia-400 z-10 italic font-semibold rounded-full">
49 less than a second
116}
117
118function App() {
119 const previewRef = React.useRef<HTMLDivElement>(null);
120 const [prompt, setPrompt] = useState("");
170 });
171
172 function handleStarterPromptClick(promptItem: typeof prompts[number]) {
173 setLoading(true);
174 setTimeout(() => handleSubmit(promptItem.prompt), 0);
175 }
176
177 async function handleSubmit(e: React.FormEvent | string) {
178 if (typeof e !== "string") {
179 e.preventDefault();
226 }
227
228 function handleVersionChange(direction: "back" | "forward") {
229 const { currentVersionIndex, versions } = versionHistory;
230 if (direction === "back" && currentVersionIndex > 0) {
974);
975
976function client() {
977 const path = window.location.pathname;
978 const root = createRoot(document.getElementById("root")!);
1010}
1011
1012function extractCodeFromFence(text: string): string {
1013 const htmlMatch = text.match(/```html\n([\s\S]*?)\n```/);
1014 return htmlMatch ? htmlMatch[1].trim() : text;
1015}
1016
1017async function generateCode(prompt: string, currentCode: string) {
1018 const starterPrompt = STARTER_PROMPTS.find(p => p.prompt === prompt);
1019 if (starterPrompt) {
1060}
1061
1062export default async function cerebras_coder(req: Request): Promise<Response> {
1063 // Dynamic import for SQLite to avoid client-side import
1064 const { sqlite } = await import("https://esm.town/v/stevekrouse/sqlite");
1163 <meta property="og:site_name" content="Cerebras Coder">
1164 <meta property="og:url" content="https://cerebrascoder.com"/>
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">
4 title: "Todo App",
5 code:
6 "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>Task Master</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-gray-100\">\n <div class=\"max-w-md mx-auto mt-12 p-6 rounded-lg shadow-md bg-white\">\n <div class=\"flex justify-between items-center mb-6\">\n <h2 class=\"text-2xl font-bold\">Task Master</h2>\n <span class=\"text-gray-600\">Manage your tasks efficiently</span>\n </div>\n <ul class=\"todo-list\" id=\"todo-list\"></ul>\n <div class=\"add-todo mt-6 flex justify-between items-center\">\n <input type=\"text\" id=\"todo-input\" placeholder=\"Add new task\" class=\"w-full py-2 pl-10 text-sm text-gray-800 border border-gray-400 rounded-lg focus:outline-none focus:ring-2 focus:ring-gray-600 bg-gray-50\">\n <button type=\"button\" id=\"add-todo-btn\" class=\"ml-4 px-4 py-2 bg-green-500 text-white font-medium text-xs leading-tight uppercase rounded shadow-md hover:bg-green-700 hover:shadow-lg focus:bg-green-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-green-800 active:shadow-lg transition duration-150 ease-in-out\">Add Task</button>\n </div>\n <div class=\"mt-6 text-center text-gray-600\">\n Built on <a href=\"https://cerebrascoder.com\" target=\"_blank\" class=\"text-gray-900 underline\">Cerebras Coder</a>\n </div>\n </div>\n\n <script>\n // Get the todo list and add todo button elements\n const todoList = document.getElementById('todo-list');\n const addTodoBtn = document.getElementById('add-todo-btn');\n const todoInput = document.getElementById('todo-input');\n\n // Load todos from local storage\n let todos = JSON.parse(localStorage.getItem('todos')) || [];\n\n // Function to render the todo list\n function renderTodoList() {\n todoList.innerHTML = '';\n todos.forEach((todo, index) => {\n const todoItem = document.createElement('li');\n todoItem.innerHTML = `\n <div class=\"flex justify-between items-center py-4 border-b border-gray-300\">\n <div class=\"flex items-center\">\n <input type=\"checkbox\" id=\"todo-${index}\" class=\"mr-4\" ${todo.completed ? 'checked' : ''}>\n <span class=\"todo-text ${todo.completed ? 'text-gray-400 line-through' : 'text-gray-600'}\">${todo.text}</span>\n </div>\n <button type=\"button\" class=\"px-4 py-2 bg-red-500 text-white font-medium text-xs leading-tight uppercase rounded shadow-md hover:bg-red-700 hover:shadow-lg focus:bg-red-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-red-800 active:shadow-lg transition duration-150 ease-in-out delete-todo\" data-index=\"${index}\">Delete</button>\n </div>\n `;\n todoList.appendChild(todoItem);\n });\n }\n\n // Render the initial todo list\n renderTodoList();\n\n // Add event listener to the add todo button\n addTodoBtn.addEventListener('click', () => {\n const todoText = todoInput.value.trim();\n if (todoText) {\n todos.push({ text: todoText, completed: false });\n localStorage.setItem('todos', JSON.stringify(todos));\n todoInput.value = '';\n renderTodoList();\n }\n });\n\n // Add event listener to the todo list\n todoList.addEventListener('change', (e) => {\n if (e.target.type === 'checkbox') {\n const index = parseInt(e.target.id.split('-')[1]);\n todos[index].completed = e.target.checked;\n localStorage.setItem('todos', JSON.stringify(todos));\n renderTodoList();\n }\n });\n\n // Add event listener to the delete todo buttons\n todoList.addEventListener('click', (e) => {\n if (e.target.classList.contains('delete-todo')) {\n const index = parseInt(e.target.dataset.index);\n todos.splice(index, 1);\n localStorage.setItem('todos', JSON.stringify(todos));\n renderTodoList();\n }\n });\n </script>\n</body>\n</html>",
7 performance: {
8 tokensPerSecond: 2298.56,
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\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,
1import { OpenAI } from "https://esm.town/v/std/openai";
2
3function extractCode(str: string): string {
4 const regex = /```[a-z]+\n([\s\S]*?)\n```/;
5 const match = str.match(regex);
11}
12
13export async function generateFunction(
14 functionName: string,
15 parameters: string,
16): Promise<string> {
17 if (!functionName) {
18 return "Please provide a function name";
19 }
20
21 const openai = new OpenAI();
22 const prompt =
23 `Generate a TypeScript function named "${functionName}" with the following parameters: ${parameters}. ONLY RETURN VALID JAVASCRIPT DO NOT INCLUDE ANY CONTEXT.`;
24 const completion = await openai.chat.completions.create({
25 messages: [
27 role: "system",
28 content:
29 "You are a helpful assistant that generates JAVASCRIPT functions. Be fuzzy with typing since you do not know what the types of the function inputs will be, but assum the number of arguments is reasonable (e.g. addTwoNumbers will take two numbers).",
30 },
31 { role: "user", content: prompt },
218`;
219
220function AnimatedHeadline() {
221 const [animationStarted, setAnimationStarted] = useState(false);
222 const contentRef = useRef(null);
421`;
422
423function FeatureCarousel() {
424 const features = [
425 { icon: "âš¡", title: "Speed", description: "Draft in minutes, not hours" },
445}
446
447function App() {
448 const [isNavOpen, setIsNavOpen] = React.useState(false);
449
505}
506
507function client() {
508 const root = document.getElementById("root");
509 if (root) {
527}
528
529export default async function server(request: Request): Promise<Response> {
530 return new Response(`
531 <!DOCTYPE html>
3import { createRoot } from "https://esm.sh/react-dom/client";
4
5function LoadingSpinner() {
6 return (
7 <div className="loading-spinner">
12}
13
14function cleanText(text: string) {
15 return text
16 .replace(/\*+/g, '')
19}
20
21function App() {
22 const [storyParts, setStoryParts] = useState({
23 title: null,
133}
134
135function client() {
136 createRoot(document.getElementById("root")).render(<App />);
137}
138if (typeof document !== "undefined") { client(); }
139
140// Utility function to implement timeout
141async function withTimeout<T>(promise: Promise<T>, timeoutMs: number): Promise<T> {
142 let timeoutHandle: number;
143 const timeoutPromise = new Promise<never>((_, reject) => {
152}
153
154export default async function server(request: Request): Promise<Response> {
155 if (request.method === 'POST' && new URL(request.url).pathname === '/generate-story') {
156 const formData = await request.formData();
3import React, { useEffect, useState } from "https://esm.sh/react@18.2.0";
4
5function TransactionParser() {
6 const [inputLog, setInputLog] = useState("");
7 const [transactions, setTransactions] = useState([]);
264};
265
266function App() {
267 return <TransactionParser />;
268}
269
270function client() {
271 createRoot(document.getElementById("root")).render(<App />);
272}
273if (typeof document !== "undefined") { client(); }
274
275export default async function server(request: Request): Promise<Response> {
276 return new Response(
277 `
3import { createRoot } from "https://esm.sh/react-dom/client";
4
5function LoadingSpinner() {
6 return (
7 <div className="loading-spinner">
12}
13
14function cleanText(text: string) {
15 return text
16 .replace(/\*+/g, '')
19}
20
21function App() {
22 const [storyParts, setStoryParts] = useState({
23 title: null,
133}
134
135function client() {
136 createRoot(document.getElementById("root")).render(<App />);
137}
138if (typeof document !== "undefined") { client(); }
139
140// Utility function to implement timeout
141async function withTimeout<T>(promise: Promise<T>, timeoutMs: number): Promise<T> {
142 let timeoutHandle: number;
143 const timeoutPromise = new Promise<never>((_, reject) => {
152}
153
154export default async function server(request: Request): Promise<Response> {
155 if (request.method === 'POST' && new URL(request.url).pathname === '/generate-story') {
156 const formData = await request.formData();
8};
9
10function App() {
11 const [isPending, startTransition] = useTransition();
12 const [likes, setLikes] = useState(0);
43}
44
45export default async function server(request: Request): Promise<Response> {
46 const { sqlite } = await import("https://esm.town/v/stevekrouse/sqlite");
47 const KEY = "app";
24);
25
26function Hero({
27 prompt,
28 setPrompt,
45
46 <p className="text-[#bababa] text-center max-w-[25ch] mx-auto my-4 font-dm-sans">
47 Turn your ideas into fully functional apps in{" "}
48 <span className="relative w-fit text-fuchsia-400 z-10 italic font-semibold rounded-full">
49 less than a second
116}
117
118function App() {
119 const previewRef = React.useRef<HTMLDivElement>(null);
120 const [prompt, setPrompt] = useState("");
170 });
171
172 function handleStarterPromptClick(promptItem: typeof prompts[number]) {
173 setLoading(true);
174 setTimeout(() => handleSubmit(promptItem.prompt), 0);
175 }
176
177 async function handleSubmit(e: React.FormEvent | string) {
178 if (typeof e !== "string") {
179 e.preventDefault();
226 }
227
228 function handleVersionChange(direction: "back" | "forward") {
229 const { currentVersionIndex, versions } = versionHistory;
230 if (direction === "back" && currentVersionIndex > 0) {
974);
975
976function client() {
977 const path = window.location.pathname;
978 const root = createRoot(document.getElementById("root")!);
1010}
1011
1012function extractCodeFromFence(text: string): string {
1013 const htmlMatch = text.match(/```html\n([\s\S]*?)\n```/);
1014 return htmlMatch ? htmlMatch[1].trim() : text;
1015}
1016
1017async function generateCode(prompt: string, currentCode: string) {
1018 const starterPrompt = STARTER_PROMPTS.find(p => p.prompt === prompt);
1019 if (starterPrompt) {
1060}
1061
1062export default async function cerebras_coder(req: Request): Promise<Response> {
1063 // Dynamic import for SQLite to avoid client-side import
1064 const { sqlite } = await import("https://esm.town/v/stevekrouse/sqlite");
1163 <meta property="og:site_name" content="Cerebras Coder">
1164 <meta property="og:url" content="https://cerebrascoder.com"/>
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">
3import React, { useEffect, useState } from "https://esm.sh/react@18.2.0";
4
5function TransactionParser() {
6 const [inputLog, setInputLog] = useState("");
7 const [transactions, setTransactions] = useState([]);
264};
265
266function App() {
267 return <TransactionParser />;
268}
269
270function client() {
271 createRoot(document.getElementById("root")).render(<App />);
272}
273if (typeof document !== "undefined") { client(); }
274
275export default async function server(request: Request): Promise<Response> {
276 return new Response(
277 `
