/** @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 { sleep } from "https://esm.town/v/stevekrouse/sleep?v=1"; 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"; function parseSearchReplaceBlocks(content: string): Array<{ searchStart: string; searchEnd: string; replace: string }> { content = content.replaceAll("\r\n", "\n"); const regex = /\[SEARCH_START_SINGLE_LINE\]\n([\s\S]*?)\n\[\/SEARCH_START_SINGLE_LINE\]\s*\[SEARCH_END_SINGLE_LINE\]\n([\s\S]*?)\n?\[\/SEARCH_END_SINGLE_LINE\]\s*\[REPLACE\]\n([\s\S]*?)\n\[\/REPLACE\]/g; const blocks = []; let match; while ((match = regex.exec(content)) !== null) { blocks.push({ searchStart: match[1], searchEnd: match[2], replace: match[3], }); } return blocks; } console.assert( _.isEqual( parseSearchReplaceBlocks(`[SEARCH_START_SINGLE_LINE] [/SEARCH_START_SINGLE_LINE] [SEARCH_END_SINGLE_LINE] [/SEARCH_END_SINGLE_LINE] [REPLACE] Prefix [/REPLACE]`), [{ replace: " \n Prefix", searchEnd: "", searchStart: " ", }], ), "parseSearchReplaceBlocks with empty SEARCH_END_SINGLE_LINE failed", ); console.assert( _.isEqual( parseSearchReplaceBlocks(`[SEARCH_START_SINGLE_LINE] [/SEARCH_START_SINGLE_LINE] [SEARCH_END_SINGLE_LINE] [/SEARCH_END_SINGLE_LINE] [REPLACE]

Hello World!

[/REPLACE]`), [{ replace: " \n

\n Hello World!\n

\n ", searchEnd: " ", searchStart: " ", }], ), "parseSearchReplaceBlocks with line in SEARCH_END_SINGLE_LINE failed", ); function applySearchReplaceBlocks( code: string, blocks: Array<{ searchStart: string; searchEnd: string; replace: string }>, ): string { const lines = code.replaceAll("\r\n", "\n").split("\n"); let currentIndex = 0; for (const block of blocks) { const startIndex = lines.slice(currentIndex).findIndex(line => line === block.searchStart); if (startIndex === -1) { console.log(`WARNING: Could not find start of ${JSON.stringify(_.omit(block, "replace"))}`); continue; } currentIndex += startIndex; if (block.searchEnd === "") { // Replace only the start line lines.splice(currentIndex, 1, ...block.replace.split("\n")); } else { const endIndex = lines.slice(currentIndex + 1).findIndex(line => line === block.searchEnd); if (endIndex === -1) { console.log(`WARNING: Could not find end of ${JSON.stringify(_.omit(block, "replace"))}`); continue; } // Replace the block including start and end lines lines.splice(currentIndex, endIndex + 2, ...block.replace.split("\n")); } currentIndex += block.replace.split("\n").length; } return lines.join("\n"); } console.assert( applySearchReplaceBlocks( `line1\nline2\nline3\nline4\nline5`, [{ searchStart: "line2", searchEnd: "line4", replace: "newline2\nnewline3\nnewline4", }], ) === `line1\nnewline2\nnewline3\nnewline4\nline5`, "Basic replacement failed", ); console.assert( applySearchReplaceBlocks( `line1\nline2\nline3\nline4\nline5`, [{ searchStart: "line2", searchEnd: "", replace: "newline2", }], ) === `line1\nnewline2\nline3\nline4\nline5`, "Single line replacement failed", ); console.assert( applySearchReplaceBlocks( `line1\nline2\nline3\nline4\nline5`, [ { searchStart: "line2", searchEnd: "line3", replace: "newline2and3", }, { searchStart: "line5", searchEnd: "", replace: "newline5", }, ], ) === `line1\nnewline2and3\nline4\nnewline5`, "Multiple block replacement failed", ); console.assert( applySearchReplaceBlocks( `line1\nline2\nline3\nline2\nline3\nline4`, [{ searchStart: "line2", searchEnd: "line3", replace: "newline2and3", }], ) === `line1\nnewline2and3\nline2\nline3\nline4`, "First occurrence replacement failed", ); console.assert( applySearchReplaceBlocks( ` line1\n line2\n line3`, [{ searchStart: " line2", searchEnd: "", replace: " newline2", }], ) === ` line1\n newline2\n line3`, "Whitespace-sensitive replacement failed", ); // console.assert( // applySearchReplaceBlocks( // `line1\nline2\nline3`, // [{ // searchStart: "nonexistent", // searchEnd: "", // replace: "newline", // }], // ) === `line1\nline2\nline3`, // "Non-existent search line handling failed", // ); export default function( { tempValsParentFolderId, username }: { tempValsParentFolderId: string; username: 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 import { extractValInfo } from "https://esm.town/v/pomdtr/extractValInfo"; 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. The val should return a valid HTML website, don't make JUST a backend unless explicitly asked for. You can use React but you don't have to. `.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 changesMessages = function({ currentCode, userprompt }: { currentCode: string; userprompt: string }) { if (!currentCode) { currentCode = `/** @jsxImportSource https://esm.sh/react */ import React from "npm:react"; import { renderToString } from "npm:react-dom/server"; const Example = () => (); export default async function main(req: Request): Promise { const html = renderToString(); return new Response(html, { headers: { "Content-Type": "text/html" }, }); }`; } return [ { role: "system", content: `Answer requests for vals with TypeScript programs that are written for Deno's runtime environment. References to NPM modules need to use ESM imports prefixed with "npm:". Node modules must be imported with a "node:" prefix, like \`\`\`ts import { randomUUID } from "node:crypto"; \`\`\` Responses should be short and should omit any information about installing or running Deno. Your response should start with a regular chat response. Make an HTTP val (other vals are currently not supported to run, even though we have examples for them). Add comments at the top of the file explaining how your approach works, 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 import { extractValInfo } from "https://esm.town/v/pomdtr/extractValInfo"; 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. The val should return a valid HTML website, don't make JUST a backend unless explicitly asked for. You can use React but you don't have to. Take requests for changes to the supplied code. If the request is ambiguous, ask questions. Once you understand the request you MUST describe each change with a *SEARCH_START_SINGLE_LINE/SEARCH_END_SINGLE_LINE/REPLACE block* per the examples below. ONLY EVER RETURN CODE IN A *SEARCH_START_SINGLE_LINE/SEARCH_END_SINGLE_LINE/REPLACE BLOCK*! Never replace more than a single function at a time! Include whitespace in the SEARCH_START_SINGLE_LINE/SEARCH_END_SINGLE_LINE/REPLACE block. If you leave SEARCH_END_SINGLE_LINE empty, only SEARCH_START_SINGLE_LINE (the first match) will be replaced. SEARCH_START_SINGLE_LINE and SEARCH_END_SINGLE_LINE may only contain ONE line. The first line matching SEARCH_END_SINGLE_LINE will be used for the replacement. If this causes any ambiguity, use multiple SEARCH_START_SINGLE_LINE/SEARCH_END_SINGLE_LINE/REPLACE blocks. Keep in mind that both SEARCH_START_SINGLE_LINE and SEARCH_END_SINGLE_LINE themselves will get replaced, so include them in your replacement if you want to keep them. DON'T respond with a preamble (aside from saying "Certainly", "Of course", "Let's do it", or something similar) or further explanation, unless the user EXPLICITLY asks for it. REMEMBER THAT YOU CAN ONLY PUT A SINGLE LINE IN SEARCH_START_SINGLE_LINE AND SEARCH_END_SINGLE_LINE! `.replace("\n", " "), }, { role: "system", content: `For your reference, here are the contents of docs/std/blob.md: --- title: Blob Storage lastUpdated: 2024-05-09 --- Val Town comes with blob storage built-in. It allows for storing any data: text, JSON, images. You can access it via [\`std/blob\`](https://www.val.town/v/std/blob). Blob storage is scoped globally to your account. If you set a blob in one val, you can retrieve it by the same key in another val. It's backed by Cloudflare R2. You may find [this admin viewer](https://www.val.town/v/stevekrouse/blob_admin) helpful for viewing and editing your blobs. ##### Get JSON \`\`\`ts title="Get JSON" import { blob } from "https://esm.town/v/std/blob"; let blobDemo = await blob.getJSON("myKey"); console.log(blobDemo); // returns \`undefined\` if not found \`\`\` ##### Set JSON \`\`\`ts title="Set JSON" import { blob } from "https://esm.town/v/std/blob"; await blob.setJSON("myKey", { hello: "world" }); \`\`\` ##### List keys \`\`\`ts title="List Keys" import { blob } from "https://esm.town/v/std/blob"; let allKeys = await blob.list(); console.log(allKeys); const appKeys = await blob.list("app_"); console.log(appKeys); // all keys that begin with \`app_\` \`\`\` ##### Delete by key \`\`\`ts title="Delete" import { blob } from "https://esm.town/v/std/blob"; await blob.delete("myKey"); \`\`\` ### Examples - [Counter](https://www.val.town/v/std/docsBlobCounterDemo) - [RSS Notifications](https://www.val.town/v/stevekrouse/rssNotifyExample) (saving the last run time) - Picture: [Save](https://www.val.town/v/andreterron/blobSavePictureExample) & [Read](https://www.val.town/v/andreterron/blobReadPictureExample) ### Error Handling - \`blob.get\` can throw [\`ValTownBlobNotFoundError\`](https://val.town/v/std/ValTownBlobNotFoundError) - Any method can throw [\`ValTownBlobError\`](https://val.town/v/andreterron/ValTownBlobError) for unexpected errors. ### Utilities Our Blob SDK also includes some utility functions to make working with blobs easier. ##### Copy \`\`\`ts title="Copy" import { blob } from "https://esm.town/v/std/blob"; await blob.copy("myKey", "myKeyCopy"); \`\`\` ##### Move \`\`\`ts title="Move" import { blob } from "https://esm.town/v/std/blob"; await blob.move("myKey", "myKeyNew"); \`\`\` ### Lower-level API We do provide access to the lower-level getter and setters, which are useful if you are storing non-JSON or binary data, need to stream in your response or request data, or do anything else lower-level. - \`async get(key: string)\`: Retrieves a blob for a given key. - \`async set(key: string, value: string | BodyInit)\`: Sets the blob value for a given key. See [BodyInit](https://deno.land/api@v1.38.1?s=BodyInit). ### Limitations - Blob-stored data counts towards your total Val Town storage – 10mb on the free plan and 1gb on pro. Check our [pricing page](https://val.town/pricing) to learn more. - Keys for blobs can be up to 512 characters long. `, }, { role: "user", content: `The current version of the val is below. Keep your response as close to the current code as possible, only changing things that are strictly necessary to change. \`\`\`ts /** @jsxImportSource https://esm.sh/react */ import React from "npm:react"; import { renderToString } from "npm:react-dom/server"; const Example = () => (); export default async function main(req: Request): Promise { const html = renderToString(); return new Response(html, { headers: { "Content-Type": "text/html" }, }); } \`\`\` User instructions: Make Hello world. `, }, { role: "assistant", content: `Certainly! \`\`\`ts [SEARCH_START_SINGLE_LINE] import React from "npm:react"; [/SEARCH_START_SINGLE_LINE] [SEARCH_END_SINGLE_LINE] [/SEARCH_END_SINGLE_LINE] [REPLACE] // This val creates a simple "Hello World" page using React. // We'll use React and ReactDOMServer for server-side rendering. // The approach is straightforward: create a React component and render it to HTML. import React from "npm:react"; [/REPLACE] \`\`\` \`\`\`ts [SEARCH_START_SINGLE_LINE] const Example = () => (); [/SEARCH_START_SINGLE_LINE] [SEARCH_END_SINGLE_LINE] [/SEARCH_END_SINGLE_LINE] [REPLACE] const HelloWorld = () => ( Hello World

Hello World!

); [/REPLACE] \`\`\` \`\`\`ts [SEARCH_START_SINGLE_LINE] const html = renderToString(); [/SEARCH_START_SINGLE_LINE] [SEARCH_END_SINGLE_LINE] [/SEARCH_END_SINGLE_LINE] [REPLACE]const html = renderToString();[/REPLACE] \`\`\` `, }, { role: "user", content: `The current version of the val is below. Keep your response as close to the current code as possible, only changing things that are strictly necessary to change. \`\`\`ts /** @jsxImportSource https://esm.sh/react */ // This val creates a simple "Hello World" page using React. // We'll use React and ReactDOMServer for server-side rendering. // The approach is straightforward: create a React component and render it to HTML. import React from "npm:react"; import { renderToString } from "npm:react-dom/server"; const HelloWorld = () => ( Hello World

Hello World!

); export default async function main(req: Request): Promise { const html = renderToString(); return new Response(html, { headers: { "Content-Type": "text/html" }, }); } \`\`\` User instructions: Can you style it with tailwind?. `, }, { role: "assistant", content: `Of course! \`\`\`ts [SEARCH_START_SINGLE_LINE] // The approach is straightforward: create a React component and render it to HTML. [/SEARCH_START_SINGLE_LINE] [SEARCH_END_SINGLE_LINE] [/SEARCH_END_SINGLE_LINE] [REPLACE] // The approach is straightforward: create a React component and render it to HTML. // We import Tailwind CSS and apply classes to our React elements to style the page. [/REPLACE] \`\`\` \`\`\`ts [SEARCH_START_SINGLE_LINE] Hello World [/SEARCH_START_SINGLE_LINE] [SEARCH_END_SINGLE_LINE] [/SEARCH_END_SINGLE_LINE] [REPLACE] Hello World [/REPLACE] \`\`\` \`\`\`ts [SEARCH_START_SINGLE_LINE] [/SEARCH_START_SINGLE_LINE] [SEARCH_END_SINGLE_LINE] [/SEARCH_END_SINGLE_LINE] [REPLACE]

Hello World!

[/REPLACE] \`\`\` `, }, { role: "user", content: `The current version of the val is below. Keep your response as close to the current code as possible, only changing things that are strictly necessary to change. \`\`\`ts /** @jsxImportSource https://esm.sh/react */ // This val creates a simple Hacker News clone using React, Tailwind CSS, and blob storage. // We'll use React and ReactDOMServer for server-side rendering, Tailwind for styling, // and blob storage to persist and retrieve posts. import { extractValInfo } from "https://esm.town/v/pomdtr/extractValInfo"; import { blob } from "https://esm.town/v/std/blob"; import React from "npm:react"; import { renderToString } from "npm:react-dom/server"; const { name } = extractValInfo(import.meta.url); interface Post { id: number; title: string; url: string; score: number; } const HackerNewsClone = ({ posts = [] }: { posts?: Post[] }) => ( Hacker News Clone

Hacker News Clone

{post.title}
{post.score} points
No posts available.

); async function getPosts(): Promise { const posts = await blob.getJSON(\`${name}_posts\`) as Post[] | undefined; if (posts) { return posts; } else { const initialPosts: Post[] = [ { id: 1, title: "Deno 1.0 Released", url: "https://deno.land/", score: 100 }, { id: 2, title: "React 18 Announced", url: "https://reactjs.org/", score: 80 }, { id: 3, title: "Tailwind CSS v3.0", url: "https://tailwindcss.com/", score: 60 }, ]; await blob.setJSON(\`${name}_posts\`, initialPosts); return initialPosts; } } export default async function main(req: Request): Promise { const posts = await getPosts(); const html = renderToString(); return new Response(html, { headers: { "Content-Type": "text/html" }, }); } \`\`\` User instructions: Make it better. `, }, { role: "assistant", content: `Certainly! Let's improve the Hacker News clone by adding a form to submit new posts and implementing upvoting functionality. Here are the changes: \`\`\`ts [SEARCH_START_SINGLE_LINE] score: number; [/SEARCH_START_SINGLE_LINE] [SEARCH_END_SINGLE_LINE] } [/SEARCH_END_SINGLE_LINE] [REPLACE] score: number; createdAt: string; } [/REPLACE] \`\`\` \`\`\`ts [SEARCH_START_SINGLE_LINE]

[/SEARCH_START_SINGLE_LINE] [SEARCH_END_SINGLE_LINE]

[/SEARCH_END_SINGLE_LINE] [REPLACE]

Hacker News Clone

{post.title}

{post.score} points {new Date(post.createdAt).toLocaleString()}
No posts available.

[/REPLACE] \`\`\` \`\`\`ts [SEARCH_START_SINGLE_LINE] async function getPosts(): Promise { [/SEARCH_START_SINGLE_LINE] [SEARCH_END_SINGLE_LINE] } [/SEARCH_END_SINGLE_LINE] [REPLACE] async function getPosts(): Promise { const posts = await blob.getJSON(\`${name}_posts\`) as Post[] | undefined; return posts || []; } async function savePosts(posts: Post[]): Promise { await blob.setJSON(\`${name}_posts\`, posts); } async function addPost(title: string, url: string): Promise { const posts = await getPosts(); const newPost: Post = { id: posts.length + 1, title, url, score: 1, createdAt: new Date().toISOString(), }; posts.unshift(newPost); await savePosts(posts); } async function upvotePost(id: number): Promise { const posts = await getPosts(); const post = posts.find(p => p.id === id); if (post) { post.score++; await savePosts(posts); } } [/REPLACE] \`\`\` \`\`\`ts [SEARCH_START_SINGLE_LINE] export default async function main(req: Request): Promise { [/SEARCH_START_SINGLE_LINE] [SEARCH_END_SINGLE_LINE] } [/SEARCH_END_SINGLE_LINE] [REPLACE] export default async function main(req: Request): Promise { const url = new URL(req.url); if (req.method === 'POST') { const formData = await req.formData(); if (url.pathname === '/submit') { const title = formData.get('title') as string; const postUrl = formData.get('url') as string; await addPost(title, postUrl); } else if (url.pathname === '/upvote') { const id = parseInt(formData.get('id') as string); await upvotePost(id); } return new Response('', { status: 302, headers: { 'Location': '/' } }); } const posts = await getPosts(); const html = renderToString(); return new Response(html, { headers: { "Content-Type": "text/html" }, }); } [/REPLACE] \`\`\` `, }, { role: "user", content: `For all requests below, use React and Tailwind for the frontend, and blob storage for the backend, unless otherwise specified.`, }, { role: "user", content: `The current version of the val is below. Keep your response as close to the current code as possible, only changing things that are strictly necessary to change. \`\`\`ts ${currentCode} \`\`\` User instructions: ${userprompt} ONLY EVER RETURN CODE IN A *SEARCH_START_SINGLE_LINE/SEARCH_END_SINGLE_LINE/REPLACE BLOCK*! Never replace more than a single function at a time! If you leave SEARCH_END_SINGLE_LINE empty, only SEARCH_START_SINGLE_LINE (the first match) will be replaced. Include whitespace in the SEARCH_START_SINGLE_LINE/SEARCH_END_SINGLE_LINE/REPLACE block. SEARCH_START_SINGLE_LINE and SEARCH_END_SINGLE_LINE may only contain ONE line. The first line matching SEARCH_END_SINGLE_LINE will be used for the replacement. If this causes any ambiguity, use multiple SEARCH_START_SINGLE_LINE/SEARCH_END_SINGLE_LINE/REPLACE blocks. Keep in mind that both SEARCH_START_SINGLE_LINE and SEARCH_END_SINGLE_LINE themselves will get replaced, so include them in your replacement if you want to keep them. DON'T respond with a preamble (aside from saying "Certainly", "Of course", "Let's do it", or something similar) or further explanation, unless the user EXPLICITLY asks for it. REMEMBER THAT YOU CAN ONLY PUT A SINGLE LINE IN SEARCH_START_SINGLE_LINE AND SEARCH_END_SINGLE_LINE!`, }, ]; }; 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).replaceAll("\r\n", "\n"); 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).replaceAll("\r\n", "\n"); let model = "gpt-4o-mini"; // let model = "claude-3-5-sonnet-20240620"; if (body.model) model = body.model as any; let loadValName = ""; if (c.req.query("loadValName")) loadValName = c.req.query("loadValName") as any; let fullscreen = ""; if (c.req.query("fullscreen")) fullscreen = c.req.query("fullscreen") as any; let questionType = "regenerate"; if (body.questionType) questionType = body.questionType as any; let contextWindowSize = 10; if (body.contextWindowSize) contextWindowSize = parseInt(body.contextWindowSize) 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.replaceAll("\r\n", "\n"); } write(`

save val open next diff

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

Hi, I'm VALL-E Context window size: `, ); 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; // } else if (model === "ft:gpt-4o-mini-2024-07-18:val-town::9oyLBIYw") { // modelForContextWindow = "gpt-4o"; // } // modelForContextWindow = "gpt-3.5-turbo"; // console.log("model", model); // console.log("modelForContextWindow", modelForContextWindow); let contextWindow: any = await valleGetValsContextWindow(modelForContextWindow); if (contextWindowSize) { contextWindow = contextWindow.slice(0, contextWindowSize); } else if (model.includes("gpt")) { contextWindow = contextWindow.slice(0, 300); } else { contextWindow = contextWindow.slice(0, 50); } let vercelModel; if (model.includes("gpt")) { vercelModel = openai(model); } else { vercelModel = anthropic(model); } // Anthropic doesn't support system messages not at the very start. const systemRole = model.includes("gpt") ? "system" : "user"; const extraStreamFields = model.includes("gpt") ? {} : { maxTokens: 8192, headers: { "anthropic-beta": "max-tokens-3-5-sonnet-2024-07-15" }, }; let messages = [ ...contextWindow, { role: systemRole, content: systemprompt }, ...prevConversation, { role: systemRole, content: `${systemprompt2}\n\`\`\`ts\n${currentCode}\n\`\`\`` }, { role: "user", content: userprompt }, ]; messages = messages.map((message) => ({ ...message, // content: message.content.replaceAll("std/blob", "janpaul123/blob").replace(/\?v=\d+/g, ""), // Remove any pinning for now. content: message.content.replace(/\?v=\d+/g, ""), })); if (questionType.startsWith("changes")) { messages = changesMessages({ currentCode, userprompt }); } const stream = await streamText({ model: vercelModel, ...extraStreamFields, messages, temperature: 0.5, seed: Number(String(Math.random()).replace("0.", "")), onFinish: (onFinishEvent) => { console.log("onFinishEvent", onFinishEvent); }, }); const tokens = []; const rawTokens = []; let newCode = ""; write(``); write(makeBubbleHeader("🤖", "assistant-latest", true)); if (questionType.startsWith("changes")) { write(`

`); let fullResponse = ""; for await (const text of stream.textStream) { if (!text) { continue; } rawTokens.push(text); write(_.escape(text)); tokens.push(text); fullResponse += text; } write(`

`); const blocks = parseSearchReplaceBlocks(fullResponse); console.log("changes - blocks", blocks); newCode = applySearchReplaceBlocks(currentCode, blocks); console.log("changes - newCode", newCode); if (newCode === currentCode) { write(`

No changes were made to the code.

`); } } else { write(makeAssistantMessageHeader(150)); write( ``, ); 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(`

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

VALLE