Sure, I'll focus on cleaning up some repeated code, improve code readability, and add some enhancements while keeping the existing functionality intact. Here's the improved version: ts /** @jsxImportSource https://esm.sh/react */ import valleGetValsContextWindow from "https://esm.town/v/janpaul123/valleGetValsContextWindow"; import { updateValByName } from "https://esm.town/v/nbbaier/updateValByName?v=14"; import { passwordAuth } from "https://esm.town/v/pomdtr/password_auth?v=84"; import { verifyToken } from "https://esm.town/v/pomdtr/verifyToken"; import ValTown from "npm:@valtown/sdk"; import { Hono } from "npm:hono@3"; import _ from "npm:lodash@4"; import OpenAI from "npm:openai"; import { renderToString } from "npm:react-dom/server"; const vt = new ValTown({ bearerToken: Deno.env.get("valtown") }); const username = "janpaul123"; const app = new Hono(); const renderJSX = (jsx) => { return new Response(renderToString(jsx), { headers: { "Content-Type": "text/html" } }); }; const systemPrompt = `The conversation below is your recent interaction with the user. Your entire response should only be TypeScript. Your response should start with \`\`\`ts and end with \`\`\`. Make an HTTP val (other vals are currently not supported to run, even though we have examples for them). Start your response with a comment explaining how your approach will work, what libraries or API calls you will use, and any tradeoffs you're making. Then write the code in a concise way, the simplest way to achieve the goal, though you can add some inline comments to explain your reasoning (not for every line, but for major groups of lines). Don't use any environment variables unless strictly necessary, for example use APIs that don't require a key, prefer internal function imports (using esm.town), and prefer putting API keys as inline variables. Use built-in Deno functions where possible. Unless specified, don't add error handling, make sure that errors bubble up to the caller. There should be no comments like "more content here", it should be complete and directly runnable. The val should create a "export default async function main" which is the main function that gets executed on every HTTP request.`.replace("\n", " "); const additionalPrompt = `Since your last response the user might have changed the code. The current version of the code is below. Keep your response as close to their current code as possible, only changing things that are strictly necessary to change.`.replace("\n", ""); const makeBubbleHeader = (emoji: string, id?: string, spin?: boolean) => { return `

${emoji}

`; }; const makeBubbleFooter = () => `

`; const renderConversation = (messages) => { return messages.map(message => { const header = message.role === "assistant" ? makeBubbleHeader("🤖") : makeBubbleHeader("🧑‍💻"); const content = message.role === "assistant" ? `

${_.escape(message.content.replace(/ts/g, "").replace(//g, ""))}

` : _.escape(message.content); return header + content + makeBubbleFooter(); }).join(""); }; const mainHandler = async (c) => { const { readable, writable } = new TransformStream(); const writer = writable.getWriter(); const textEncoder = new TextEncoder(); function write(text) { writer.write(textEncoder.encode(text)); } write(`

`); const body = await c.req.parseBody(); const { userprompt, prevConversation: prevConversationRaw, code: currentCodeRaw, model: modelRaw } = body; const prevConversation = prevConversationRaw ? JSON.parse(prevConversationRaw) : []; const currentCode = currentCodeRaw || ""; const model = modelRaw || "gpt-3.5-turbo"; write(makeBubbleHeader("🤖")); write(`

Hi, I'm VALL-E . How can I help?

`); write(makeBubbleFooter()); write(renderConversation(prevConversation)); if (userprompt) { write(makeBubbleHeader("🧑‍💻")); write(_.escape(userprompt)); write(makeBubbleFooter()); write(makeBubbleHeader("🤖", "bubble-loading", true)); write(``); write(makeBubbleFooter()); const contextWindow = await valleGetValsContextWindow(model); const openai = new OpenAI(); const stream = await openai.chat.completions.create({ model, stream: true, messages: [ ...contextWindow.slice(0, 300), { role: "system", content: systemPrompt }, ...prevConversation, { role: "system", content: `${additionalPrompt}\n\`\`\`ts\n${currentCode}\n\`\`\`` }, { role: "user", content: userprompt }, ], }); write(``); write(makeBubbleHeader("🤖", "assistant-latest", true)); write(`

`); write(``); const tokens = []; const rawTokens = []; for await (const chunk of stream) { const text = chunk.choices[0]?.delta?.content; if (!text) continue; rawTokens.push(text); if (text === "") continue; if (tokens.length === 0 && text === "ts") continue; if (tokens.length === 0 && text === "\n") continue; write(_.escape(text)); tokens.push(text); write(``); } write(`

`); write(makeBubbleFooter()); const tempValName = `valle_tmp_${Math.random().toString().substring(2, 10)}`; const newCode = tokens.join("").replace(/ts/g, "").replace(//g, ""); await vt.vals.create({ name: tempValName, code: newCode, type: "http", privacy: "public" }); write(``); const newConversation = [ ...prevConversation, { role: "user", content: userprompt }, { role: "assistant", content: rawTokens.join("") }, ]; write(``); } write(makeBubbleHeader("🧑‍💻")); write(`

`); write(makeBubbleFooter()); writer.close(); return new Response(readable, { headers: { "Content-Type": "text/html" } }); }; app.get("/", mainHandler); app.post("/", mainHandler); export default passwordAuth(app.fetch, { verifyPassword: verifyToken });

valle_tmp_2671404837576818506367901100203444