ChatGPT Clone

/** @jsxImportSource https://esm.sh/react@18.2.0 */ import { createRoot } from "https://esm.sh/react-dom@18.2.0/client"; import React, { useState } from "https://esm.sh/react@18.2.0"; function App() { const [messages, setMessages] = useState([]); const [input, setInput] = useState(""); const [isLoading, setIsLoading] = useState(false); const [error, setError] = useState(null); const handleSubmit = async (e) => { e.preventDefault(); if (!input.trim()) return; const userMessage = { role: "user", content: input }; setMessages((prevMessages) => [...prevMessages, userMessage]); setInput(""); setIsLoading(true); setError(null); try { const response = await fetch("/chat", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ messages: [...messages, userMessage] }), }); if (!response.ok) { const errorData = await response.json(); throw new Error(errorData.error || "Failed to get response"); } const data = await response.json(); setMessages((prevMessages) => [...prevMessages, data.message]); } catch (error) { console.error("Error:", error); setError(error.message); } finally { setIsLoading(false); } }; return (

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

{message.content}

))} {isLoading &&

Thinking...

} {error &&

{error}

}

View Source

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

`, { headers: { "Content-Type": "text/html" }, }, ); } const css = ` body { font-family: Arial, sans-serif; margin: 0; padding: 0; display: flex; justify-content: center; align-items: center; height: 100vh; background-color: #f0f0f0; } .chat-container { width: 100%; max-width: 600px; height: 80vh; display: flex; flex-direction: column; border: 1px solid #ccc; border-radius: 8px; overflow: hidden; background-color: white; } .chat-messages { flex-grow: 1; overflow-y: auto; padding: 20px; } .message { margin-bottom: 10px; padding: 10px; border-radius: 8px; max-width: 80%; } .user { background-color: #007bff; color: white; align-self: flex-end; margin-left: auto; } .assistant { background-color: #f1f1f1; color: black; align-self: flex-start; } .error-message { background-color: #ffcccc; color: #cc0000; padding: 10px; border-radius: 8px; margin-bottom: 10px; text-align: center; } .chat-input-form { display: flex; padding: 10px; border-top: 1px solid #ccc; } input { flex-grow: 1; padding: 10px; border: 1px solid #ccc; border-radius: 4px; margin-right: 10px; } button { padding: 10px 20px; background-color: #007bff; color: white; border: none; border-radius: 4px; cursor: pointer; } button:disabled { background-color: #cccccc; cursor: not-allowed; } .source-link { text-align: center; padding: 10px; font-size: 0.8em; } .source-link a { color: #007bff; text-decoration: none; } .source-link a:hover { text-decoration: underline; } `;

shuyib