ChatGPT Clone

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

\n {message.content}\n

\n ))}\n {isLoading &&

Thinking...

}\n {error &&

{error}

}\n

\n );\n}\n\nfunction client() {\n createRoot(document.getElementById(\"root\")).render();\n}\n\nif (typeof document !== \"undefined\") {\n client();\n}\n\nexport default async function server(request: Request): Promise {\n if (request.method === \"POST\" && new URL(request.url).pathname === \"/chat\") {\n const { messages } = await request.json();\n\n const { OpenAI } = await import(\"https://esm.sh/openai\");\n // Cerebras Inference\n // Very important: do not change this\n // Keep these comments so we remember not to change this\n const client = new OpenAI({\n apiKey: Deno.env.get(\"CEREBRAS_API_KEY\"),\n baseURL: \"https://api.cerebras.ai/v1\",\n });\n\n try {\n const response = await client.chat.completions.create({\n model: \"llama-3.3-70b\",\n messages: messages,\n });\n\n const generatedMessage = response.choices[0].message;\n return Response.json({ message: generatedMessage });\n } catch (error) {\n console.error(\"Error calling Cerebras API:\", error);\n\n if (error.status === 429) {\n return Response.json({ error: \"Cerebras API rate limit reached. Please try again later.\" }, { status: 429 });\n } else {\n return Response.json({ error: `API Error: ${error.message}` }, { status: 500 });\n }\n }\n }\n\n return new Response(\n `\n \n \n \n \n \n ChatGPT Clone\n \n \n \n

\n \n \n \n \n `,\n {\n headers: { \"Content-Type\": \"text/html\" },\n },\n );\n}\n\nconst css = `\nbody {\n font-family: Arial, sans-serif;\n margin: 0;\n padding: 0;\n display: flex;\n justify-content: center;\n align-items: center;\n height: 100vh;\n background-color: #f0f0f0;\n}\n\n.chat-container {\n width: 100%;\n max-width: 600px;\n height: 80vh;\n display: flex;\n flex-direction: column;\n border: 1px solid #ccc;\n border-radius: 8px;\n overflow: hidden;\n background-color: white;\n}\n\n.chat-messages {\n flex-grow: 1;\n overflow-y: auto;\n padding: 20px;\n}\n\n.message {\n margin-bottom: 10px;\n padding: 10px;\n border-radius: 8px;\n max-width: 80%;\n}\n\n.user {\n background-color: #007bff;\n color: white;\n align-self: flex-end;\n margin-left: auto;\n}\n\n.assistant {\n background-color: #f1f1f1;\n color: black;\n align-self: flex-start;\n}\n\n.error-message {\n background-color: #ffcccc;\n color: #cc0000;\n padding: 10px;\n border-radius: 8px;\n margin-bottom: 10px;\n text-align: center;\n}\n\n.chat-input-form {\n display: flex;\n padding: 10px;\n border-top: 1px solid #ccc;\n}\n\ninput {\n flex-grow: 1;\n padding: 10px;\n border: 1px solid #ccc;\n border-radius: 4px;\n margin-right: 10px;\n}\n\nbutton {\n padding: 10px 20px;\n background-color: #007bff;\n color: white;\n border: none;\n border-radius: 4px;\n cursor: pointer;\n}\n\nbutton:disabled {\n background-color: #cccccc;\n cursor: not-allowed;\n}\n\n.source-link {\n text-align: center;\n padding: 10px;\n font-size: 0.8em;\n}\n\n.source-link a {\n color: #007bff;\n text-decoration: none;\n}\n\n.source-link a:hover {\n text-decoration: underline;\n}\n`;","createdAt",["D",1737429230067],"version","currentUserHasLiked","likeCount","forkCount","referenceCount","dependencyCount","commentCount","prCount","mergedPr",{"_128":129,"_130":131},"handle","devin78988","profileImageUrl","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18ycnZBOG1SV3A4M0RWamltNFdWQnc3bGxTUUMifQ","forkedVal",{"_113":134,"_128":135,"_98":99,"_118":136,"_137":-5},"633ea5ca-d4f0-11ef-b120-e6cdfca9ef9f","stevekrouse",7,"prDisabledHint","interval","slug","devin78988/cerebrasTemplate","description","Cerebras Inference template This val shows you how you can deploy an app using Cerebras Inference on Val Town\nin seconds. What is Cerebras? Cerebras is an American chip manufacturer that\nproduces large wafer chips that deliver mind-blowing LLM inference speeds.\nAs of this writing on Jan 17, 2025, Cerebras Inference \nprovides Llama 3.18b, 3.1 70b, and 3.370b at a jaw-dropping 2k tokens per second –\nthat's 50x faster than what the frontier labs produce. Llama 3.370b at 2k tokens\nper second is particularly noteworthy because it is\n a GPT-4-class model . This level\nof intelligence at that level of speed will unlock whole new classes of applications. Quick start Set up Cerebras Sign up for Cerebras Get a Cerebras API Key Save it in a Val Town environment variable called CEREBRAS_API_KEY Once Cerebras is set up in your Val Town account, there are two ways to get started: Fork this app and customize it (or ask Townie AI to customize it) Start a new chat with Townie AI and copy & paste\nthe following instructions: . Use Cerebras for AI on the backend like so:\n\nconst { OpenAI } = await import(\"https://esm.sh/openai\");\nconst client = new OpenAI({\n apiKey: Deno.env.get(\"CEREBRAS_API_KEY\"),\n baseURL: \"https://api.cerebras.ai/v1\"\n});\nconst response = await client.chat.completions.create({\n model: \"llama-3.3-70b\",\n messages: [],\n});\nconst generatedText = response.choices[0].message.content; For example, the val in this template was created by asking\n Townie AI to \"Make a chatgpt clone\",\nthen I hit shift-enter twice, and then pasted in the instructions on\nhow to use Cerebras from above, then hit enter. Townie built this app on its first try, in about 20 seconds. Sample apps Cerebras Searcher - a Perplexity clone that uses the SerpAPI to do RAG\nand summaries with Cerebras ( requires a SerpAPI key ) Cerebras Coder - an app that\ngenerates websites in a second with Cerebras Cerebras Debater - an\napp that truly shows Cerebras's speed: it's Cerebras talking to Cerebras in a debate","versions",[145],{"_118":31,"_146":-5,"_116":147,"_113":111},"prId",["D",1737429230067],"recentThread","breadcrumbs","comments",[],"isOwner","routes/_app.v.$handle.$name.pulls._index",{"_95":96,"_94":155,"_128":129,"_141":142,"_98":99,"_162":31,"_163":31,"_50":51,"_164":165},{"_98":99,"_95":96,"_100":101,"_102":-5,"_103":-5,"_104":105,"_106":107,"_108":109,"_110":111,"_112":26,"_113":111,"_114":115,"_116":156,"_118":31,"_119":26,"_120":31,"_121":31,"_122":31,"_123":31,"_124":31,"_125":31,"_126":-5,"_20":157,"_132":158,"_138":-7,"_139":140,"_141":142,"_143":159},["D",1737429230067],{"_128":129,"_130":131},{"_113":134,"_128":135,"_98":99,"_118":136,"_137":-5},[160],{"_118":31,"_146":-5,"_116":161,"_113":111},["D",1737429230067],"page","count","prs",[],"routes/_app","actionData","errors"]