/** @jsxImportSource https://esm.sh/react */ import valleGetValsContextWindow from "https://esm.town/v/janpaul123/valleGetValsContextWindow"; import archiveVal from "https://esm.town/v/nbbaier/archiveVal?v=10"; import { updateValByName } from "https://esm.town/v/nbbaier/updateValByName?v=14"; import { createVal } from "https://esm.town/v/neverstew/createVal?v=6"; import { passwordAuth } from "https://esm.town/v/pomdtr/password_auth?v=84"; import { verifyToken } from "https://esm.town/v/pomdtr/verifyToken"; import { anthropic } from "npm:@ai-sdk/anthropic"; import { openai } from "npm:@ai-sdk/openai"; import ValTown from "npm:@valtown/sdk"; import { StreamingTextResponse, streamText } from "npm:ai"; import { Hono } from "npm:hono@3"; import _ from "npm:lodash@4"; import { renderToString } from "npm:react-dom/server"; // Set these to your own const username = "janpaul123"; const tempValsParentFolderId = "4bb7b010-4443-11ef-8642-de64eea55b61"; export default function( { username, tempValsParentFolderId }: { username: string; tempValsParentFolderId: string }, ) { const valTownToken = Deno.env.get("valtown"); const vt = new ValTown({ bearerToken: valTownToken }); const app = new Hono(); const jsxResponse = (jsx) => { return new Response(renderToString(jsx), { headers: { "Content-Type": "text/html" } }); }; const systemprompt = `All the above are example conversations and context you can refer to, but don't consider it part of the current conversation. 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 \`\`\`, so full code fences. 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 consise 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. Avoid external images or base64 images, use emojis, unicode symtols, or icon fonts/libraries instead, unless that's not practical for the user's request (e.g. if they ask for a particular animated gif). If the user asks for something that requires persistence, use the Val Town Blob storage API, unless explicitly specified otherwise. Use the current val name for the storage key, which you can get using the "pomdtr/extractValInfo" val, which you can call like this: \`\`\`ts const {owner, name} = extractValInfo(import.meta.url); \`\`\` 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", " "); // Your response should start with \`\`\`ts and end with \`\`\`. // The val should create a "export default async function main() {" which // is the main function that gets executed, without any arguments. Don't return a Response object, // just return a plain Javascript object, array, or string. const systemprompt2 = `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) => { const idStr = id ? ` id="${id}"` : ""; const spinStr = spin ? " animate-spin" : ""; return `

${emoji}

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

`; }; const makeAssistantMessageHeader = (maxHeight: number) => { return `I wrote some new code for your Val:

`; }; app.post("/save", async (c) => { const body = await c.req.parseBody(); console.log(body); const valName = body.valName as any; const code = body.code as any; await updateValByName({ token: valTownToken, code, name: valName }); return new Response(); }); 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)); } new Promise(async () => { const body = await c.req.parseBody(); const userprompt: any = body.userprompt; let prevConversation = []; if (body.prevConversation) prevConversation = JSON.parse(body.prevConversation as any) as any; let currentCode = ""; if (body.code) currentCode = body.code as any; let model = "gpt-4o-mini"; if (body.model) model = body.model as any; let loadValName = ""; if (c.req.query("loadValName")) loadValName = c.req.query("loadValName") as any; let questionType = "regenerate"; if (body.questionType) questionType = body.questionType as any; let formAction = "/"; if (loadValName) { formAction += `?loadValName=${loadValName}`; } if (prevConversation.length === 0 && loadValName) { const val = await vt.alias.username.valName.retrieve(username, loadValName); currentCode = val.code; } write(`

save val open

`); write(makeBubbleHeader("🤖")); write( `

Hi, I'm VALL-E `, ); if (loadValName) { write( `

Let’s use ${loadValName} as a starting point.

`, ); } else { write( `

Say what you’d like to make, or load an existing Val:

`, ); } write(`

`); write(makeBubbleFooter()); for (const message of prevConversation) { if (message.role === "assistant") { write(makeBubbleHeader("🤖")); write(makeAssistantMessageHeader(80)); write(_.escape(message.content.replaceAll("```ts", "").replaceAll("```", "").replace(/^ts\n/, ""))); write(`

`); write(makeBubbleFooter()); } else { write(makeBubbleHeader("🧑‍💻")); write(_.escape(message.content)); write(makeBubbleFooter()); } } if (userprompt) { write(makeBubbleHeader("🧑‍💻")); write(_.escape(userprompt)); write(makeBubbleFooter()); write(makeBubbleHeader("🤖", "bubble-loading", true)); write( ``, ); write(makeBubbleFooter()); let modelForContextWindow = "gpt-4o"; // Not all models are supported by valleGetValsContextWindow. if (model === "gpt-3.5-turbo") { modelForContextWindow = model; } // modelForContextWindow = "gpt-3.5-turbo"; let contextWindow: any = await valleGetValsContextWindow(modelForContextWindow); if (model.startsWith("gpt")) { contextWindow = contextWindow.slice(0, 300); } else { contextWindow = contextWindow.slice(0, 50); } let vercelModel; if (model.startsWith("gpt")) { vercelModel = openai(model); } else { vercelModel = anthropic(model); } // Anthropic doesn't support system messages not at the very start. const systemRole = model.startsWith("gpt") ? "system" : "user"; const extraStreamFields = model.startsWith("gpt") ? {} : { maxTokens: 8192, headers: { "anthropic-beta": "max-tokens-3-5-sonnet-2024-07-15" }, }; const stream = await streamText({ model: vercelModel, ...extraStreamFields, messages: [ ...contextWindow, { role: systemRole, content: systemprompt }, ...prevConversation, { role: systemRole, content: `${systemprompt2}\n\`\`\`ts\n${currentCode}\n\`\`\`` }, { role: "user", content: userprompt }, ], }); write(``); write(makeBubbleHeader("🤖", "assistant-latest", true)); write(makeAssistantMessageHeader(150)); write( ``, ); const tokens = []; const rawTokens = []; for await (const text of stream.textStream) { if (!text) { continue; } rawTokens.push(text); if (text == "```") { continue; } if (tokens.length === 0 && text == "ts") { continue; } if (tokens.length === 0 && text == "\n") { continue; } // console.log(text); write(_.escape(text)); tokens.push(text); write(``); } write(`

`); write(makeBubbleFooter()); const tempValName = `valle_tmp_${Math.random() * 10}${Math.random() * 10}`.replaceAll(".", ""); const newCode = tokens.join("").replaceAll("```ts", "").replaceAll("```", "").replace(/^ts\n/, ""); // Errors in running the val bubble up through this API, so ignore them. await vt.vals.create({ name: tempValName, code: newCode, type: "http", privacy: "unlisted" }).catch(() => Promise.resolve() ); const newVal = await vt.alias.username.valName.retrieve(username, tempValName); archiveVal(newVal.id, tempValsParentFolderId); write(``); if (questionType == "regenerate") { write(``); } else if (questionType == "regenerate-diffs") { 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); return passwordAuth(app.fetch, { verifyPassword: verifyToken }); }

blueOwl