HTML Editor with Llama 70B

\n \n

\n\n

\n {messages.map((msg, index) => (\n

Instruction {index + 1}:

{msg}

\n ))}\n

\n\n

\n \n\n {tokensPerSecond && (\n

\n Generation Speed: {tokensPerSecond} tokens/second\n

\n )}\n\n

\n \n View Source\n \n

\n\n

Generated HTML Output

\n \n

\n\n

\n              {generatedHtml}\n

\n );\n}\n\nfunction client() {\n createRoot(document.getElementById(\"root\")).render();\n}\n\nif (typeof document !== \"undefined\") { client(); }\n\nexport default async function server(request: Request): Promise {\n return new Response(\n `\n \n \n Chat with Llama\n \n \n \n

\n \n \n \n `,\n {\n headers: {\n \"content-type\": \"text/html\",\n },\n },\n );\n}",[],[169],"files",[147,167],"counts",{"_180":33,"_181":155,"_182":33,"_183":33},"pulls","branches","forks","envVars","contents",[186,189],{"_106":148,"_99":149,"_150":151,"_152":-5,"_153":138,"_154":155,"_156":112,"_108":187,"_103":33,"_158":159,"_160":161,"_162":27,"_163":-5,"_102":188},["D",1729795994380],[149],{"_106":168,"_99":169,"_150":119,"_152":-5,"_153":138,"_154":137,"_156":112,"_108":190,"_103":171,"_158":172,"_160":173,"_162":27,"_163":-5,"_102":191},["D",1729862112787],[169],"upstream",{"_106":194,"_99":195,"_115":-5,"_116":-5,"_113":114,"_21":196},"2282b52a-2541-11f0-a4ea-569c3dd06744","chatWithCerebras",{"_97":98,"_133":134},"screenshots","emptyEnvVars","routes/_app.x.$handle.$name.branch.$branch.history",{"_97":98,"_99":100,"_101":43,"_104":201,"_205":206,"_307":33,"_308":27},{"_106":107,"_99":100,"_108":202,"_110":-5,"_111":112,"_113":114,"_115":-5,"_116":-5,"_12":117,"_118":119,"_120":112,"_121":-5,"_122":33,"_123":124,"_125":124,"_126":127,"_128":127,"_129":127,"_130":124,"_131":27,"_21":203,"_135":204},["D",1745962000861],{"_97":98,"_133":134},{"_103":137,"_99":43,"_106":138,"_139":107,"_140":141,"_142":33,"_143":114,"_144":117},"history",[207,212,220,228,236,244,252,260,268,275,283,290,297],{"_150":119,"_103":137,"_108":208,"_153":138,"_176":209},["D",1729862112787],[210],{"_106":168,"_153":138,"_150":119,"_99":169,"_160":173,"_158":172,"_103":171,"_152":-5,"_108":208,"_154":137,"_163":-5,"_156":112,"_162":27,"_102":211},[169],{"_150":119,"_103":171,"_108":213,"_153":138,"_176":214},["D",1729806218623],[215],{"_106":216,"_153":138,"_150":119,"_99":169,"_160":217,"_158":172,"_103":218,"_152":-5,"_108":213,"_154":171,"_163":-5,"_156":27,"_162":27,"_102":219},"a446002c-2540-11f0-a4ea-569c3dd06744","/** @jsxImportSource https://esm.sh/react */\nimport Cerebras from \"https://esm.sh/@cerebras/cerebras_cloud_sdk\";\nimport React, { useEffect, useState } from \"https://esm.sh/react\";\nimport { createRoot } from \"https://esm.sh/react-dom/client\";\n\nfunction App() {\n const [messages, setMessages] = useState([]);\n const [apiKey, setApiKey] = useState(\"\");\n const [generatedHtml, setGeneratedHtml] = useState(\"\");\n const [isLoading, setIsLoading] = useState(false);\n const [tokensPerSecond, setTokensPerSecond] = useState(null);\n\n useEffect(() => {\n const savedApiKey = localStorage.getItem(\"cerebras_api_key\");\n if (savedApiKey) {\n setApiKey(savedApiKey);\n }\n }, []);\n\n const handleApiKeyChange = (e) => {\n const newApiKey = e.target.value;\n setApiKey(newApiKey);\n if (newApiKey) {\n localStorage.setItem(\"cerebras_api_key\", newApiKey);\n } else {\n localStorage.removeItem(\"cerebras_api_key\");\n }\n };\n\n async function handleSubmit(e) {\n e.preventDefault();\n const newMessage = e.target.message.value;\n if (!newMessage) return;\n e.target.message.value = \"\";\n\n setIsLoading(true);\n setTokensPerSecond(null);\n const newMessages = [...messages, newMessage];\n setMessages(newMessages);\n\n const startTime = Date.now();\n try {\n const client = new Cerebras({ apiKey });\n const completionCreateResponse = await client.chat.completions.create({\n messages: [\n {\n role: \"system\",\n content:\n \"You are a helpful assistant. Respond only with HTML code wrapped in ```html ``` code fences. The HTML should be a complete, valid document including , , , and tags.\",\n },\n ...newMessages.map(msg => ({ role: \"user\", content: msg })),\n ],\n temperature: 0.7,\n model: \"llama3.1-70b\",\n max_tokens: 8192,\n });\n\n const endTime = Date.now();\n const content = completionCreateResponse.choices[0].message.content;\n const htmlMatch = content.match(/```html\\s*([\\s\\S]*?)\\s*```/);\n const generatedHtml = htmlMatch ? htmlMatch[1] : \"No HTML generated\";\n setGeneratedHtml(generatedHtml);\n setMessages([...newMessages, `Assistant: ${content}`]);\n\n // Calculate tokens per second\n const totalTokens = completionCreateResponse.usage.completion_tokens;\n const timeInSeconds = (endTime - startTime) / 1000;\n setTokensPerSecond(Math.round((totalTokens / timeInSeconds) * 100) / 100);\n } catch (error) {\n console.error(error);\n alert(\"Error: \" + error.message);\n } finally {\n setIsLoading(false);\n }\n }\n\n return (\n

HTML Editor with Llama 70B

\n \n

\n\n

\n {messages.map((msg, index) => (\n

Instruction {index + 1}:

{msg}

\n ))}\n

\n\n

\n \n\n {tokensPerSecond && (\n

\n Generation Speed: {tokensPerSecond} tokens/second\n

\n )}\n\n

\n \n View Source\n \n

\n\n

Generated HTML Output

\n \n

\n\n

\n              {generatedHtml}\n

\n \n \n \n `,\n {\n headers: {\n \"content-type\": \"text/html\",\n },\n },\n );\n}",11,[169],{"_150":119,"_103":218,"_108":221,"_153":138,"_176":222},["D",1729806154046],[223],{"_106":224,"_153":138,"_150":119,"_99":169,"_160":225,"_158":172,"_103":226,"_152":-5,"_108":221,"_154":218,"_163":-5,"_156":27,"_162":27,"_102":227},"a4408458-2540-11f0-a4ea-569c3dd06744","/** @jsxImportSource https://esm.sh/react */\nimport Cerebras from \"https://esm.sh/@cerebras/cerebras_cloud_sdk\";\nimport React, { useEffect, useState } from \"https://esm.sh/react\";\nimport { createRoot } from \"https://esm.sh/react-dom/client\";\n\nfunction App() {\n const [messages, setMessages] = useState([]);\n const [apiKey, setApiKey] = useState(\"\");\n const [generatedHtml, setGeneratedHtml] = useState(\"\");\n const [isLoading, setIsLoading] = useState(false);\n const [tokensPerSecond, setTokensPerSecond] = useState(null);\n\n useEffect(() => {\n const savedApiKey = localStorage.getItem(\"cerebras_api_key\");\n if (savedApiKey) {\n setApiKey(savedApiKey);\n }\n }, []);\n\n const handleApiKeyChange = (e) => {\n const newApiKey = e.target.value;\n setApiKey(newApiKey);\n if (newApiKey) {\n localStorage.setItem(\"cerebras_api_key\", newApiKey);\n } else {\n localStorage.removeItem(\"cerebras_api_key\");\n }\n };\n\n async function handleSubmit(e) {\n e.preventDefault();\n const newMessage = e.target.message.value;\n if (!newMessage) return;\n\n setIsLoading(true);\n setTokensPerSecond(null);\n const newMessages = [...messages, newMessage];\n setMessages(newMessages);\n\n const startTime = Date.now();\n try {\n const client = new Cerebras({ apiKey });\n const completionCreateResponse = await client.chat.completions.create({\n messages: [\n {\n role: \"system\",\n content:\n \"You are a helpful assistant. Respond only with HTML code wrapped in ```html ``` code fences. The HTML should be a complete, valid document including , , , and tags.\",\n },\n ...newMessages.map(msg => ({ role: \"user\", content: msg })),\n ],\n model: \"llama3.1-70b\",\n max_tokens: 8192,\n });\n\n const endTime = Date.now();\n const content = completionCreateResponse.choices[0].message.content;\n const htmlMatch = content.match(/```html\\s*([\\s\\S]*?)\\s*```/);\n setGeneratedHtml(htmlMatch ? htmlMatch[1] : \"No HTML generated\");\n\n // Calculate tokens per second\n const totalTokens = completionCreateResponse.usage.completion_tokens;\n const timeInSeconds = (endTime - startTime) / 1000;\n setTokensPerSecond(Math.round((totalTokens / timeInSeconds) * 100) / 100);\n } catch (error) {\n console.error(error);\n alert(\"Error: \" + error.message);\n } finally {\n setIsLoading(false);\n }\n }\n\n return (\n

HTML Editor with Llama 70B

\n \n

\n\n

\n {messages.map((msg, index) => (\n

Instruction {index + 1}:

{msg}

\n ))}\n

\n\n

\n \n\n {tokensPerSecond && (\n

\n Generation Speed: {tokensPerSecond} tokens/second\n

\n )}\n\n

\n \n View Source\n \n

\n\n

Generated HTML Output

\n \n

\n\n

\n              {generatedHtml}\n

\n \n \n \n `,\n {\n headers: {\n \"content-type\": \"text/html\",\n },\n },\n );\n}",10,[169],{"_150":119,"_103":226,"_108":229,"_153":138,"_176":230},["D",1729806094947],[231],{"_106":232,"_153":138,"_150":119,"_99":169,"_160":233,"_158":172,"_103":234,"_152":-5,"_108":229,"_154":226,"_163":-5,"_156":27,"_162":27,"_102":235},"a43b0a6e-2540-11f0-a4ea-569c3dd06744","/** @jsxImportSource https://esm.sh/react */\nimport React, { useState, useEffect } from \"https://esm.sh/react\";\nimport { createRoot } from \"https://esm.sh/react-dom/client\";\nimport Cerebras from \"https://esm.sh/@cerebras/cerebras_cloud_sdk\";\n\nfunction App() {\n const [messages, setMessages] = useState([]);\n const [apiKey, setApiKey] = useState(\"\");\n const [generatedHtml, setGeneratedHtml] = useState(\"\");\n const [isLoading, setIsLoading] = useState(false);\n const [tokensPerSecond, setTokensPerSecond] = useState(null);\n\n useEffect(() => {\n const savedApiKey = localStorage.getItem(\"cerebras_api_key\");\n if (savedApiKey) {\n setApiKey(savedApiKey);\n }\n }, []);\n\n const handleApiKeyChange = (e) => {\n const newApiKey = e.target.value;\n setApiKey(newApiKey);\n if (newApiKey) {\n localStorage.setItem(\"cerebras_api_key\", newApiKey);\n } else {\n localStorage.removeItem(\"cerebras_api_key\");\n }\n };\n\n async function handleSubmit(e) {\n e.preventDefault();\n const newMessage = e.target.message.value;\n if (!newMessage) return;\n\n setIsLoading(true);\n setTokensPerSecond(null);\n const newMessages = [...messages, newMessage];\n setMessages(newMessages);\n e.target.message.value = \"\";\n\n const startTime = Date.now();\n try {\n const client = new Cerebras({ apiKey });\n const completionCreateResponse = await client.chat.completions.create({\n messages: [\n {\n role: \"system\",\n content:\n \"You are a helpful assistant. Respond only with HTML code wrapped in ```html ``` code fences. The HTML should be a complete, valid document including , , , and tags.\",\n },\n ...newMessages.map(msg => ({ role: \"user\", content: msg })),\n ],\n model: \"llama3.1-70b\",\n max_tokens: 8192\n });\n\n const endTime = Date.now();\n const content = completionCreateResponse.choices[0].message.content;\n const htmlMatch = content.match(/```html\\s*([\\s\\S]*?)\\s*```/);\n setGeneratedHtml(htmlMatch ? htmlMatch[1] : \"No HTML generated\");\n \n // Calculate tokens per second\n const totalTokens = completionCreateResponse.usage.completion_tokens;\n const timeInSeconds = (endTime - startTime) / 1000;\n setTokensPerSecond(Math.round((totalTokens / timeInSeconds) * 100) / 100);\n } catch (error) {\n console.error(error);\n alert(\"Error: \" + error.message);\n } finally {\n setIsLoading(false);\n }\n }\n\n return (\n

HTML Editor with Llama 70B

\n \n

\n\n

\n {messages.map((msg, index) => (\n

Instruction {index + 1}:

{msg}

\n ))}\n

\n\n

\n \n\n {tokensPerSecond && (\n

\n Generation Speed: {tokensPerSecond} tokens/second\n

\n )}\n\n

\n \n View Source\n \n

\n\n

Generated HTML Output

\n \n

\n${generatedHtml.replace(/&/g, '&')\n                               .replace(//g, '>')\n                               .replace(/\"/g, '"')}\n

\n \n \n `,\n {\n headers: {\n \"content-type\": \"text/html\",\n },\n },\n );\n}",["D",1729795994380],[169],"page","hasNext","routes/_app","actionData","errors"]

History