[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_177":178,"_179":180},"routes/_app.x.$handle.$name",{"_101":100,"_32":49,"_109":88,"_27":110,"_13":14,"_111":-5,"_11":112,"_113":114,"_115":116,"_117":118,"_119":120,"_21":-5,"_121":122,"_123":124,"_125":25,"_126":127,"_128":53,"_129":-5,"_130":-5,"_131":132},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_47":48,"_32":49,"_36":50,"_51":-5,"_52":53,"_54":55,"_56":55,"_57":-5,"_58":-5,"_18":59,"_60":43,"_61":53,"_62":-5,"_63":-5,"_64":65,"_66":67,"_68":-5,"_69":-5,"_70":-5,"_71":-5,"_72":73,"_74":73,"_75":76,"_77":76,"_78":76,"_79":73,"_80":73,"_81":82,"_83":84,"_85":86,"_87":25},"version",1,"changes",[19,20],"aiChatInfo","userId",{"_21":41,"_23":-7,"_24":25,"_26":25,"_27":42,"_29":42},{"_21":22,"_23":-7,"_24":25,"_26":25,"_27":28,"_29":28},"file",{"_30":31,"_32":28,"_33":21,"_34":35,"_36":37,"_38":14,"_39":40,"_24":25},"previous","deleted",false,"deletedHere","path","README.md","latestPath","fileId","c4ebd090-27b1-11f0-aecd-569c3dd06744","name","fileType","content","This is an AI code assistant powered by [Cerebras](https://cerebras.ai/inference), running llama3.3-70b.\n\n# Setup\n\n1. Sign up for [Cerebras](https://cloud.cerebras.ai/)\n2. Get a Cerebras API Key\n3. Save it in a [Val Town environment variable](https://www.val.town/settings/environment-variables) called `CEREBRAS_API_KEY`\n\n# Todos\n\nI'm looking for collaborators to help. Fork & send me PRs!\n\n- [ ] Experiment with [two prompt chain](https://x.com/nutlope/status/1866856980033479020)\n- [ ] Let users share & host their creations (ie store in sqlite)\n- [ ] Buy & set up domain name\n- [ ] Link to llama 3.3b and Cerebras\n- [ ] Add a CerebrasCoder logo\n- [ ] Instead of \"view source\", make it \"Fork me on Val Town\" with the [Val Town logo](https://www.val.town/brand)","createdAt",["D",1734087832639],"branchVersion","branchId","c4e78da0-27b1-11f0-aecd-569c3dd06744",{"_30":43,"_32":42,"_33":44,"_34":45,"_36":46,"_38":14,"_39":40,"_24":25},"main.tsx","c4ebb682-27b1-11f0-aecd-569c3dd06744","http","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport Cerebras from \"https://esm.sh/@cerebras/cerebras_cloud_sdk\";\nimport Chart from \"https://esm.sh/chart.js/auto\";\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\nimport { Prism as SyntaxHighlighter } from \"https://esm.sh/react-syntax-highlighter\";\nimport { tomorrow } from \"https://esm.sh/react-syntax-highlighter/dist/esm/styles/prism\";\nimport React, { useEffect, useState } from \"https://esm.sh/react@18.2.0\";\n\nconst STARTER_PROMPTS = [\n \"todo list app persisted in local storage\",\n \"weather app using open-meteo API\",\n \"interactive markdown editor with live preview\",\n \"pomodoro timer with sound notifications\",\n \"simple drawing canvas with color picker\",\n \"recipe ingredient converter and scaler\",\n \"morse code translator with audio output\",\n \"random quote generator with tweet functionality\",\n \"personal finance tracker with basic charts\",\n \"multiplayer rock-paper-scissors game\",\n];\n\nfunction Dashboard() {\n const [stats, setStats] = useState<{\n totalGenerations: number;\n totalVersions: number;\n totalProjects: number;\n popularPrompts: { prompt: string; count: number }[];\n dailyGenerations: { date: string; count: number }[];\n }>({\n totalGenerations: 0,\n totalVersions: 0,\n totalProjects: 0,\n popularPrompts: [],\n dailyGenerations: [],\n });\n\n useEffect(() => {\n async function fetchStats() {\n const response = await fetch(\"/dashboard-stats\");\n const data = await response.json();\n setStats(data);\n }\n fetchStats();\n }, []);\n\n useEffect(() => {\n if (stats.dailyGenerations.length > 0) {\n const ctx = document.getElementById(\"dailyChart\") as HTMLCanvasElement;\n new Chart(ctx, {\n type: \"line\",\n data: {\n labels: stats.dailyGenerations.map(d => d.date),\n datasets: [{\n label: \"Daily Generations\",\n data: stats.dailyGenerations.map(d => d.count),\n borderColor: \"rgb(59, 130, 246)\",\n tension: 0.1,\n }],\n },\n options: {\n responsive: true,\n plugins: {\n legend: {\n labels: {\n color: \"white\",\n },\n },\n },\n scales: {\n x: {\n ticks: { color: \"white\" },\n },\n y: {\n ticks: { color: \"white\" },\n },\n },\n },\n });\n }\n }, [stats.dailyGenerations]);\n\n return (\n

CerebrasCoder Analytics

Total Generations

{stats.totalGenerations}

Total Versions

{stats.totalVersions}

Total Projects

{stats.totalProjects}

Popular Prompts

\n {prompt.prompt} ({prompt.count})\n

\n ← Back to Generator\n

\n );\n}\n\nfunction App() {\n const [prompt, setPrompt] = useState(\n STARTER_PROMPTS[Math.floor(Math.random() * STARTER_PROMPTS.length)],\n );\n const [code, setCode] = useState(\"\");\n const [loading, setLoading] = useState(false);\n const [performance, setPerformance] = useState<\n {\n tokensPerSecond: number;\n totalTokens: number;\n time: number;\n } | null\n >(null);\n\n const [versionHistory, setVersionHistory] = useState<{\n currentVersionIndex: number;\n versions: {\n code: string;\n prompt: string;\n timestamp: number;\n }[];\n }>({\n currentVersionIndex: -1,\n versions: [],\n });\n\n async function handleSubmit(e: React.FormEvent) {\n e.preventDefault();\n setLoading(true);\n\n try {\n const response = await fetch(\"/\", {\n method: \"POST\",\n body: JSON.stringify({\n prompt,\n currentCode: code,\n versionHistory,\n }),\n headers: { \"Content-Type\": \"application/json\" },\n });\n\n const result = await response.json();\n\n // Update version history\n const newVersionHistory = {\n currentVersionIndex: result.versionHistory.currentVersionIndex,\n versions: result.versionHistory.versions,\n };\n\n setCode(result.code);\n setPerformance(result.performance);\n setVersionHistory(newVersionHistory);\n } catch (error) {\n console.error(\"Error:\", error);\n } finally {\n setLoading(false);\n }\n }\n\n function handleVersionChange(direction: \"back\" | \"forward\") {\n const { currentVersionIndex, versions } = versionHistory;\n\n if (direction === \"back\" && currentVersionIndex > 0) {\n const newIndex = currentVersionIndex - 1;\n setCode(versions[newIndex].code);\n setPrompt(versions[newIndex].prompt);\n setVersionHistory(prev => ({\n ...prev,\n currentVersionIndex: newIndex,\n }));\n } else if (direction === \"forward\" && currentVersionIndex < versions.length - 1) {\n const newIndex = currentVersionIndex + 1;\n setCode(versions[newIndex].code);\n setPrompt(versions[newIndex].prompt);\n setVersionHistory(prev => ({\n ...prev,\n currentVersionIndex: newIndex,\n }));\n }\n }\n\n return (\n

\n Powered by Llama 3.3 70b on Cerebras\n

Cerebras Coder

\n Turn your idea into an app in a literal second. Cerebras Coder generates full html pages at 2k tokens / s with\n a GPT-4 class LLM.\n

\n \n\n {performance && (\n

\n 🚀 {performance.tokensPerSecond.toFixed(2)} tokens/s\n 📊 {performance.totalTokens} tokens\n ⏱️ {performance.time.toFixed(2)}s\n

\n )}\n\n

Generated Code

\n \n {code}\n \n

\n\n

Preview

\n handleVersionChange(\"back\")}\n disabled={versionHistory.currentVersionIndex <= 0}\n className=\"px-2 py-1 text-sm bg-gray-700 text-gray-300 rounded hover:bg-gray-600 disabled:opacity-50 disabled:cursor-not-allowed\"\n >\n ← Prev\n \n handleVersionChange(\"forward\")}\n disabled={versionHistory.currentVersionIndex >= versionHistory.versions.length - 1}\n className=\"px-2 py-1 text-sm bg-gray-700 text-gray-300 rounded hover:bg-gray-600 disabled:opacity-50 disabled:cursor-not-allowed\"\n >\n Next →\n \n

\n {code\n ? (\n <>\n

\n Version: {versionHistory.currentVersionIndex + 1} / {versionHistory.versions.length}\n

\n\n \n \n )\n :

No preview available. Generate code to see the preview.

}\n

\n \n View Source\n \n

\n );\n}\n\nfunction client() {\n const path = window.location.pathname;\n const root = createRoot(document.getElementById(\"root\")!);\n\n if (path === \"/dashboard\") {\n root.render();\n } else {\n root.render();\n }\n}\n\nif (typeof document !== \"undefined\") {\n client();\n}\n\nfunction extractCodeFromFence(text: string): string {\n const htmlMatch = text.match(/```html\\n([\\s\\S]*?)\\n```/);\n return htmlMatch ? htmlMatch[1].trim() : text;\n}\n\nexport default async function server(req: Request): Promise {\n // Dynamic import for SQLite to avoid client-side import\n const { sqlite } = await import(\"https://esm.town/v/stevekrouse/sqlite\");\n const KEY = \"cerebras_coder\";\n const SCHEMA_VERSION = 5;\n\n // Create tables for tracking generations\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS ${KEY}_projects_${SCHEMA_VERSION} (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n initial_prompt TEXT NOT NULL,\n created_at DATETIME DEFAULT CURRENT_TIMESTAMP\n )\n `);\n\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS ${KEY}_iterations_${SCHEMA_VERSION} (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n project_id INTEGER NOT NULL,\n version_number INTEGER NOT NULL,\n prompt TEXT NOT NULL,\n code TEXT NOT NULL,\n created_at DATETIME DEFAULT CURRENT_TIMESTAMP,\n FOREIGN KEY(project_id) REFERENCES ${KEY}_projects_${SCHEMA_VERSION}(id)\n )\n `);\n\n if (req.method === \"GET\") {\n const url = new URL(req.url);\n\n if (url.pathname === \"/dashboard-stats\") {\n const totalGenerationsResult = await sqlite.execute(`\n SELECT COUNT(*) as total FROM ${KEY}_iterations_${SCHEMA_VERSION}\n `);\n\n const totalVersionsResult = await sqlite.execute(`\n SELECT COUNT(*) as total FROM ${KEY}_iterations_${SCHEMA_VERSION}\n `);\n\n const totalProjectsResult = await sqlite.execute(`\n SELECT COUNT(*) as total FROM ${KEY}_projects_${SCHEMA_VERSION}\n `);\n\n const popularPromptsResult = await sqlite.execute(`\n SELECT initial_prompt as prompt, COUNT(*) as count \n FROM ${KEY}_projects_${SCHEMA_VERSION} \n GROUP BY initial_prompt \n ORDER BY count DESC \n LIMIT 5\n `);\n\n const dailyGenerationsResult = await sqlite.execute(`\n SELECT \n date(created_at) as date, \n COUNT(*) as count \n FROM ${KEY}_iterations_${SCHEMA_VERSION} \n GROUP BY date \n ORDER BY date \n LIMIT 30\n `);\n\n const totalGenerations = totalGenerationsResult.rows[0]?.total || 0;\n const totalVersions = totalVersionsResult.rows[0]?.total || 0;\n const totalProjects = totalProjectsResult.rows[0]?.total || 0;\n const popularPrompts = popularPromptsResult.rows || [];\n const dailyGenerations = dailyGenerationsResult.rows || [];\n\n return new Response(\n JSON.stringify({\n totalGenerations,\n totalVersions,\n totalProjects,\n popularPrompts,\n dailyGenerations,\n }),\n { headers: { \"Content-Type\": \"application/json\" } },\n );\n }\n }\n\n if (req.method === \"POST\") {\n const client = new Cerebras();\n const { prompt, currentCode, versionHistory } = await req.json();\n\n const completion = await client.chat.completions.create({\n messages: [\n {\n role: \"system\",\n content:\n \"You are a helpful assistant that generates HTML, CSS and JavaScript code. Always wrap your response in ```html code fences. Include all necessary HTML, CSS, and JavaScript in a single complete HTML file.\",\n },\n {\n role: \"system\",\n content: currentCode\n ? `Current code to modify:\\n\\`\\`\\`html\\n${currentCode}\\n\\`\\`\\``\n : \"No existing code to modify.\",\n },\n {\n role: \"user\",\n content: prompt,\n },\n ],\n model: \"llama-3.3-70b\",\n });\n\n const timeInSeconds = completion.time_info.completion_time;\n const totalTokens = completion.usage?.completion_tokens || 0;\n\n const code = extractCodeFromFence(completion.choices[0].message.content);\n\n // Manage version history and update SQLite\n let projectId: number;\n let newVersionHistory = { ...versionHistory };\n\n // If no version history exists, create a new project\n if (versionHistory.currentVersionIndex === -1) {\n const projectResult = await sqlite.execute(\n `INSERT INTO ${KEY}_projects_${SCHEMA_VERSION} (initial_prompt) VALUES (?)`,\n [prompt],\n );\n projectId = projectResult.lastInsertRowid as number;\n\n newVersionHistory = {\n currentVersionIndex: 0,\n versions: [{\n code,\n prompt,\n timestamp: Date.now(),\n }],\n };\n\n // Insert first iteration\n await sqlite.execute(\n `INSERT INTO ${KEY}_iterations_${SCHEMA_VERSION} \n (project_id, version_number, prompt, code) VALUES (?, ?, ?, ?)`,\n [projectId, 0, prompt, code],\n );\n } else {\n // Use existing project, add new iteration\n const lastProjectResult = await sqlite.execute(\n `SELECT id FROM ${KEY}_projects_${SCHEMA_VERSION} \n ORDER BY created_at DESC LIMIT 1`,\n );\n projectId = lastProjectResult.rows[0]?.id;\n\n const newVersionIndex = versionHistory.currentVersionIndex + 1;\n\n newVersionHistory = {\n currentVersionIndex: newVersionIndex,\n versions: [\n ...versionHistory.versions.slice(0, newVersionIndex),\n { code, prompt, timestamp: Date.now() },\n ],\n };\n\n // Insert new iteration\n await sqlite.execute(\n `INSERT INTO ${KEY}_iterations_${SCHEMA_VERSION} \n (project_id, version_number, prompt, code) VALUES (?, ?, ?, ?)`,\n [projectId, newVersionIndex, prompt, code],\n );\n }\n\n return new Response(\n JSON.stringify({\n code,\n performance: {\n tokensPerSecond: totalTokens / timeInSeconds,\n totalTokens,\n time: timeInSeconds,\n },\n versionHistory: newVersionHistory,\n }),\n {\n headers: { \"Content-Type\": \"application/json\" },\n },\n );\n }\n\n return new Response(\n `\n \n \n \n \n \n CerebrasCoder\n \n \n \n

\n \n \n \n \n `,\n {\n headers: { \"Content-Type\": \"text/html\" },\n },\n );\n}",["D",1734087832639],"id","c4e750d8-27b1-11f0-aecd-569c3dd06744","cerebras_coder",["D",1746230491465],"deletedAt","legacyEnvVars",true,"privacy","public","httpPrivacy","description","imageUrl","e8480d06-7d75-497a-8721-e752da1e8d57","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount",0,"orgId","66d8b853-33ca-41d9-9aa6-8b0cae45ac52","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_101":100,"_108":104},"org",{"_101":100,"_102":-5,"_103":104,"_18":59,"_105":106,"_107":25},"branch",{"_13":14,"_32":88,"_47":40,"_89":48,"_90":91,"_92":65,"_93":55,"_94":95,"_96":97,"_98":49,"_99":100},"isOwned","main","projectId","forkedBranchId","5ff74ffe-1adf-11f0-8160-569c3dd06744","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","5ff6edf2-1adf-11f0-8160-569c3dd06744","forkedProjectOrgId","e81e7335-6d4c-4764-a902-d0962bbfa9f7","projectName","userHandle","nn6n","handle","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18yb3ZZUHlOTTZFQU96S3JLZnRVQTU5cWVta04ifQ","tier","free","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_47":48,"_32":49,"_36":173,"_51":-5,"_52":53,"_54":55,"_56":55,"_57":-5,"_58":-5,"_18":59,"_60":43,"_61":53,"_62":-5,"_63":-5,"_64":65,"_66":67,"_68":-5,"_69":-5,"_70":-5,"_71":-5,"_72":73,"_74":73,"_75":76,"_77":76,"_78":76,"_79":73,"_80":73,"_81":174,"_83":175,"_85":176,"_87":25},"tree",[164,165],"files",[164,165],"counts",{"_154":65,"_155":14,"_156":65,"_157":158,"_159":160},"contents",[143,144],"upstreamProject",{"_47":95,"_32":49,"_57":140,"_58":-5,"_54":55,"_81":141},"upstreamBranch",{"_47":91,"_36":133,"_134":135,"_32":88,"_89":95,"_13":136,"_90":-5,"_92":-5,"_137":138,"_51":-5,"_87":25,"_54":55,"_99":139,"_66":97,"_98":49},"emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},["D",1744820713851],"updatedAt",["D",1754089495761],278,"lockfileKey","1763743012986-esm.town_v_stevekrouse_cerebras_coder@278-main","stevekrouse","An AI code assistant powered by Cerebras inference",{"_101":139,"_108":142},"https://images.clerk.dev/uploaded/img_2PqHa2Gsy93xQrjh2w78Xu0cChW.jpeg",{"_47":151,"_32":28,"_30":31,"_146":-5,"_39":40,"_38":14,"_147":53,"_36":152,"_13":65,"_33":21,"_34":35,"_24":25,"_149":-5,"_27":153},{"_47":145,"_32":42,"_30":43,"_146":-5,"_39":40,"_38":14,"_147":53,"_36":148,"_13":65,"_33":44,"_34":45,"_24":25,"_149":-5,"_27":150},"c4ebb5a6-27b1-11f0-aecd-569c3dd06744","parentId","latest",["D",1734087832639],"label",[42],"c4ebcfe6-27b1-11f0-aecd-569c3dd06744",["D",1734087832639],[28],"pulls","branches","forks","envVars",{"_161":65,"_163":65},"connections",{"_161":65,"_162":65},"count","unfilledCount","emptyCount",{"_47":151,"_32":28,"_30":31,"_146":-5,"_39":40,"_38":14,"_147":53,"_36":170,"_13":65,"_33":21,"_34":35,"_24":25,"_149":-5,"_167":171,"_27":172},{"_47":145,"_32":42,"_30":43,"_146":-5,"_39":40,"_38":14,"_147":53,"_36":166,"_13":65,"_33":44,"_34":45,"_24":25,"_149":-5,"_167":168,"_27":169},["D",1734087832639],"children",[],[42],["D",1734087832639],[],[28],["D",1746230491465],{"_101":100,"_108":104},{"_101":100,"_102":-5,"_103":104,"_18":59,"_105":106,"_107":25},{"_13":14,"_32":88,"_47":40,"_89":48,"_90":91,"_92":65,"_93":55,"_94":95,"_96":97,"_98":49,"_99":100},"ctx",{"_81":-5,"_130":210,"_211":212,"_213":214,"_215":25,"_216":25,"_217":25,"_218":53,"_219":-5,"_220":-7,"_221":-7,"_222":65,"_223":25,"_224":25,"_225":-5,"_226":25,"_227":25,"_228":25,"_229":-5},"ENV",{"_181":182,"_183":184,"_185":88,"_186":187,"_188":189,"_190":191,"_192":193,"_194":195,"_196":197,"_198":199,"_200":201,"_202":203,"_204":205,"_206":207,"_208":209},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","71c1b20804b3232a7e513be260cfffc1932a9e97","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

Diff · v1