Cerebras Coder

/** @jsxImportSource https://esm.sh/react@18.2.0 */ import React, { useEffect, useState } from "https://esm.sh/react@18.2.0"; import { createRoot } from "https://esm.sh/react-dom@18.2.0/client"; import Cerebras from "https://esm.sh/@cerebras/cerebras_cloud_sdk"; import { Prism as SyntaxHighlighter } from "https://esm.sh/react-syntax-highlighter"; import { STARTER_PROMPTS } from "https://esm.town/v/stevekrouse/cerebras_coder_prompts"; function extractCodeFromFence(content: string): string { const codeMatch = content.match(/```html\n([\s\S]*?)```/); return codeMatch ? codeMatch[1].trim() : content; } async function generateCode(prompt: string, currentCode: string) { const starterPrompt = STARTER_PROMPTS.find(p => p.prompt === prompt); if (starterPrompt) { return { code: starterPrompt.code, time: starterPrompt.performance.time, totalTokens: starterPrompt.performance.totalTokens, }; } else { const client = new Cerebras({ apiKey: Deno.env.get("CEREBRAS_API_KEY") }); const completion = await client.chat.completions.create({ messages: [ { role: "system", content: `You are an advanced AI coding assistant that generates websites. Include all necessary HTML, CSS, and JavaScript in a single complete HTML file. Avoid use of alert or input. Make yourself a modal if you need it. Unless otherwise specified, use a UI libray. Be sure to install it via CDN. Make the app look like a polished, pretty, full website. Before coding, write your plan in a \`\`\`thinking code fence. Wrap your code in a single \`\`\`html code fence. Do NOT explain how your code works or how to run. Keep the chatter to an absolute minimum.`, }, currentCode ? { role: "system", content: `Current code to modify:\n\`\`\`html\n${currentCode}\n\`\`\``, } : undefined, { role: "user", content: prompt, }, ].filter(Boolean), model: "llama-3.3-70b", }); return { code: extractCodeFromFence(completion.choices[0].message.content), time: completion.time_info.completion_time, totalTokens: completion.usage?.completion_tokens || 1, }; } } export default async function cerebras_coder(req: Request): Promise { // Handle API requests for code generation if (req.method === 'POST') { try { const { prompt, currentCode } = await req.json(); const result = await generateCode(prompt, currentCode); return new Response(JSON.stringify(result), { headers: { 'Content-Type': 'application/json' } }); } catch (error) { return new Response(JSON.stringify({ error: error.message }), { status: 500, headers: { 'Content-Type': 'application/json' } }); } } // Render the main application page return new Response(` Cerebras Coder

`, { headers: { 'Content-Type': 'text/html', } }); } function App() { const [prompt, setPrompt] = useState(''); const [generatedCode, setGeneratedCode] = useState(''); const [performanceInfo, setPerformanceInfo] = useState(''); const [isLoading, setIsLoading] = useState(false); const [iframeKey, setIframeKey] = useState(0); const handleSubmit = async (e: React.FormEvent) => { e.preventDefault(); setIsLoading(true); try { const response = await fetch(window.location.href, { method: 'POST', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify({ prompt, currentCode: generatedCode }), }); const result = await response.json(); setGeneratedCode(result.code); setPerformanceInfo(`Generation Time: ${result.time}s, Tokens Used: ${result.totalTokens}`); // Force iframe reload by changing its key setIframeKey(prev => prev + 1); } catch (error) { console.error('Error generating code:', error); setGeneratedCode(`Error: ${error.message}`); } finally { setIsLoading(false); } }; return (

{/* Prompt Section */}

{performanceInfo && (

{performanceInfo}

)}

{/* Content Section */}

{/* Code Column */}

Generated Code

{generatedCode ? (

              {generatedCode}

) : (

Generated code will appear here

)} View Source

{/* Preview Column */}

Live Preview

{generatedCode ? (

swethard