CerebrasCoder

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_162":163,"_164":165},"routes/_app.x.$handle.$name",{"_95":94,"_31":43,"_103":82,"_26":104,"_13":14,"_105":-5,"_11":106,"_107":108,"_109":110,"_111":112,"_113":114,"_20":-5,"_115":116,"_117":118,"_119":24,"_120":121,"_122":55,"_123":-5,"_124":-5,"_125":126},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_41":42,"_31":43,"_36":44,"_45":-5,"_46":24,"_47":48,"_49":48,"_50":-5,"_51":-5,"_18":52,"_53":30,"_54":55,"_56":-5,"_57":-5,"_58":59,"_60":61,"_62":-5,"_63":-5,"_64":-5,"_65":-5,"_66":67,"_68":67,"_69":70,"_71":70,"_72":70,"_73":67,"_74":67,"_75":76,"_77":78,"_79":80,"_81":24},"version",1,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":-7,"_23":24,"_25":24,"_26":27,"_28":27},"file",{"_29":30,"_31":27,"_32":33,"_34":35,"_36":37,"_38":14,"_39":40,"_23":24},"previous","deleted",false,"deletedHere","path","main.tsx","latestPath","fileId","a4d6d162-275a-11f0-86ff-569c3dd06744","name","fileType","http","content","/** @jsxImportSource https://esm.sh/react */\nimport Cerebras from \"https://esm.sh/@cerebras/cerebras_cloud_sdk\";\nimport React, { useState } from \"https://esm.sh/react\";\nimport { createRoot } from \"https://esm.sh/react-dom/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\";\n\nfunction App() {\n const [prompt, setPrompt] = useState(\"hello llamapalooza\");\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 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({ prompt, currentCode: code }),\n headers: { \"Content-Type\": \"application/json\" },\n });\n\n const result = await response.json();\n setCode(result.code);\n setPerformance(result.performance);\n } catch (error) {\n console.error(\"Error:\", error);\n } finally {\n setLoading(false);\n }\n }\n\n return (\n

\n );\n}\n\nfunction client() {\n createRoot(document.getElementById(\"root\")!).render();\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 if (req.method === \"POST\") {\n const client = new Cerebras();\n const { prompt, currentCode } = 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: \"llama3.1-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 return new Response(\n JSON.stringify({\n code,\n performance: {\n tokensPerSecond: totalTokens / timeInSeconds,\n totalTokens,\n time: timeInSeconds,\n },\n }),\n {\n headers: { \"Content-Type\": \"application/json\" },\n },\n );\n }\n\n return new Response(\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}\n\nconst css = `\n body {\n margin: 0;\n padding: 20px;\n font-family: system-ui, sans-serif;\n background: #1a1a1a;\n color: #fff;\n }\n \n .container {\n display: flex;\n flex-direction: column;\n height: 100vh;\n gap: 20px;\n }\n \n .prompt-form {\n display: flex;\n gap: 10px;\n align-items: center;\n }\n \n .title {\n margin: 0;\n font-size: 1.2rem;\n font-weight: 900;\n white-space: nowrap;\n }\n \n .prompt-input {\n flex: 1;\n padding: 10px;\n border: 1px solid #333;\n border-radius: 4px;\n background: #2a2a2a;\n color: #fff;\n }\n \n button {\n padding: 10px 20px;\n border: none;\n border-radius: 4px;\n background: #4a4a4a;\n color: #fff;\n cursor: pointer;\n }\n \n button:disabled {\n opacity: 0.7;\n cursor: not-allowed;\n }\n \n .performance {\n display: flex;\n gap: 20px;\n justify-content: center;\n font-family: monospace;\n background: #2a2a2a;\n padding: 10px;\n border-radius: 4px;\n }\n \n .content {\n display: flex;\n gap: 20px;\n flex: 1;\n min-height: 0;\n }\n \n .code-section {\n flex: 1;\n overflow: auto;\n background: #2a2a2a;\n border-radius: 4px;\n }\n \n .preview-section {\n flex: 1;\n background: #2a2a2a;\n border-radius: 4px;\n overflow: hidden;\n }\n \n .preview-iframe {\n width: 100%;\n height: 100%;\n border: none;\n background: white;\n }\n`;","createdAt",["D",1734519849592],"branchVersion","branchId","a4d3916e-275a-11f0-86ff-569c3dd06744","id","a4d344b6-275a-11f0-86ff-569c3dd06744","cerebras_coder",["D",1746193071430],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","imageUrl","3c500473-3bf3-4c38-8edf-c849b1cfd93d","pinnedFileId","pinPreview",true,"pinMigrated","screenshotVersion","likeCount",0,"orgId","9f26add5-ed93-462f-936d-a6f6254d6cbf","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_95":94,"_102":98},"org",{"_95":94,"_96":-5,"_97":98,"_18":52,"_99":100,"_101":24},"branch",{"_13":14,"_31":82,"_41":40,"_83":42,"_84":85,"_86":59,"_87":48,"_88":89,"_90":91,"_92":43,"_93":94},"isOwned","main","projectId","forkedBranchId","3fb0bde2-26ca-11f0-9439-569c3dd06744","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","3fb05f82-26ca-11f0-9439-569c3dd06744","forkedProjectOrgId","56de91e6-7302-4f9f-bde6-448380f41494","projectName","userHandle","feraia77","handle","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18yb3ZWZG1wdldyMzlUNkNLdU91M0FPOUdUV1AifQ","tier","free","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_41":42,"_31":43,"_36":158,"_45":-5,"_46":24,"_47":48,"_49":48,"_50":-5,"_51":-5,"_18":52,"_53":30,"_54":55,"_56":-5,"_57":-5,"_58":59,"_60":61,"_62":-5,"_63":-5,"_64":-5,"_65":-5,"_66":67,"_68":67,"_69":70,"_71":70,"_72":70,"_73":67,"_74":67,"_75":159,"_77":160,"_79":161,"_81":24},"tree",[153],"files",[153],"counts",{"_143":59,"_144":14,"_145":59,"_146":147,"_148":149},"contents",[136],"upstreamProject",{"_41":89,"_31":43,"_50":-5,"_51":-5,"_47":48,"_75":134},"upstreamBranch",{"_41":85,"_36":127,"_128":129,"_31":82,"_83":89,"_13":14,"_84":130,"_86":59,"_131":132,"_45":-5,"_81":24,"_47":48,"_93":133,"_60":91,"_92":43},"emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},["D",1746131054223],"updatedAt",["D",1730389767958],"5ff74ffe-1adf-11f0-8160-569c3dd06744","lockfileKey","1769205881730-esm.town_v_kate_cerebras_coder@1-main","kate",{"_95":133,"_102":135},"https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18ybklHazdzYzE0NkxIazNFMTYzbzAzS2pnTmQifQ",{"_41":137,"_31":27,"_29":30,"_138":-5,"_39":40,"_38":14,"_139":55,"_36":140,"_13":59,"_32":33,"_34":35,"_23":24,"_141":-5,"_26":142},"a4d6d0c2-275a-11f0-86ff-569c3dd06744","parentId","latest",["D",1734519849592],"label",[27],"pulls","branches","forks","envVars",{"_150":59,"_152":59},"connections",{"_150":59,"_151":59},"count","unfilledCount","emptyCount",{"_41":137,"_31":27,"_29":30,"_138":-5,"_39":40,"_38":14,"_139":55,"_36":154,"_13":59,"_32":33,"_34":35,"_23":24,"_141":-5,"_155":156,"_26":157},["D",1734519849592],"children",[],[27],["D",1746193071430],{"_95":94,"_102":98},{"_95":94,"_96":-5,"_97":98,"_18":52,"_99":100,"_101":24},{"_13":14,"_31":82,"_41":40,"_83":42,"_84":85,"_86":59,"_87":48,"_88":89,"_90":91,"_92":43,"_93":94},"ctx",{"_75":-5,"_124":195,"_196":197,"_198":199,"_200":24,"_201":24,"_202":24,"_203":55,"_204":-5,"_205":-7,"_206":-7,"_207":59,"_208":24,"_209":24,"_210":-5,"_211":24,"_212":24,"_213":24,"_214":-5},"ENV",{"_166":167,"_168":169,"_170":82,"_171":172,"_173":174,"_175":176,"_177":178,"_179":180,"_181":182,"_183":184,"_185":186,"_187":188,"_189":190,"_191":192,"_193":194},"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"]

Cerebras Coder

Diff · v1