300and execute modified versions of a covered work in that User Product from
301a modified version of its Corresponding Source. The information must
302suffice to ensure that the continued functioning of the modified object
303code is in no case prevented or interfered with solely because
304modification has been made.
3import React, { useState } from "https://esm.sh/react@18.2.0";
4
5function App() {
6 const [celebrated, setCelebrated] = useState(false);
7
85}
86
87function client() {
88 createRoot(document.getElementById("root")).render(<App />);
89}
90if (typeof document !== "undefined") { client(); }
91
92export default async function server(request: Request): Promise<Response> {
93 return new Response(
94 `
3 "prompt": "todo list app persisted in local storage, pretty",
4 "title": "Todo App",
5 "code": "<!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>",
6 "performance": {
7 "tokensPerSecond": 2298.56,
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\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,
2import { ITERATIONS_TABLE, KEY, PROJECTS_TABLE, SCHEMA_VERSION } from "./migrations";
3
4export async function createProject(prompt: string) {
5 const projectResult = await sqlite.execute(
6 `INSERT INTO ${PROJECTS_TABLE} (initial_prompt) VALUES (?)`,
11}
12
13export async function getNextVersionNumber(projectId: number) {
14 const data = await sqlite.execute(
15 `SELECT version_number FROM ${ITERATIONS_TABLE}
21}
22
23export async function insertVersion(projectId: number, versionNumber: number, prompt: string, code: string) {
24 await sqlite.execute(
25 `INSERT INTO ${ITERATIONS_TABLE}
29}
30
31export async function getCodeInner(table: string, project: string, version?: string) {
32 let data;
33 if (version === undefined) {
50}
51
52export async function getCode(project: string, version?: string) {
53 // try to get code in the new table partition first
54 const code = await getCodeInner(ITERATIONS_TABLE, project, version);
19 <meta property="og:site_name" content="Cerebras Coder">
20 <meta property="og:url" content="https://cerebrascoder.com"/>
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">
