\n Hello World!\n

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

\\n Hello World!\\n

\\n \",\n searchEnd: \" \",\n searchStart: \" \",\n }],\n ),\n \"parseSearchReplaceBlocks with line in SEARCH_END_SINGLE_LINE failed\",\n);\n\nfunction applySearchReplaceBlocks(\n code: string,\n blocks: Array<{ searchStart: string; searchEnd: string; replace: string }>,\n): string {\n const lines = code.replaceAll(\"\\r\\n\", \"\\n\").split(\"\\n\");\n let currentIndex = 0;\n\n for (const block of blocks) {\n const startIndex = lines.slice(currentIndex).findIndex(line => line === block.searchStart);\n if (startIndex === -1) {\n console.log(`WARNING: Could not find start of ${JSON.stringify(_.omit(block, \"replace\"))}`);\n continue;\n }\n\n currentIndex += startIndex;\n\n if (block.searchEnd === \"\") {\n // Replace only the start line\n lines.splice(currentIndex, 1, ...block.replace.split(\"\\n\"));\n } else {\n const endIndex = lines.slice(currentIndex + 1).findIndex(line => line === block.searchEnd);\n if (endIndex === -1) {\n console.log(`WARNING: Could not find end of ${JSON.stringify(_.omit(block, \"replace\"))}`);\n continue;\n }\n\n // Replace the block including start and end lines\n lines.splice(currentIndex, endIndex + 2, ...block.replace.split(\"\\n\"));\n }\n\n currentIndex += block.replace.split(\"\\n\").length;\n }\n\n return lines.join(\"\\n\");\n}\n\nconsole.assert(\n applySearchReplaceBlocks(\n `line1\\nline2\\nline3\\nline4\\nline5`,\n [{\n searchStart: \"line2\",\n searchEnd: \"line4\",\n replace: \"newline2\\nnewline3\\nnewline4\",\n }],\n ) === `line1\\nnewline2\\nnewline3\\nnewline4\\nline5`,\n \"Basic replacement failed\",\n);\n\nconsole.assert(\n applySearchReplaceBlocks(\n `line1\\nline2\\nline3\\nline4\\nline5`,\n [{\n searchStart: \"line2\",\n searchEnd: \"\",\n replace: \"newline2\",\n }],\n ) === `line1\\nnewline2\\nline3\\nline4\\nline5`,\n \"Single line replacement failed\",\n);\n\nconsole.assert(\n applySearchReplaceBlocks(\n `line1\\nline2\\nline3\\nline4\\nline5`,\n [\n {\n searchStart: \"line2\",\n searchEnd: \"line3\",\n replace: \"newline2and3\",\n },\n {\n searchStart: \"line5\",\n searchEnd: \"\",\n replace: \"newline5\",\n },\n ],\n ) === `line1\\nnewline2and3\\nline4\\nnewline5`,\n \"Multiple block replacement failed\",\n);\n\nconsole.assert(\n applySearchReplaceBlocks(\n `line1\\nline2\\nline3\\nline2\\nline3\\nline4`,\n [{\n searchStart: \"line2\",\n searchEnd: \"line3\",\n replace: \"newline2and3\",\n }],\n ) === `line1\\nnewline2and3\\nline2\\nline3\\nline4`,\n \"First occurrence replacement failed\",\n);\n\nconsole.assert(\n applySearchReplaceBlocks(\n ` line1\\n line2\\n line3`,\n [{\n searchStart: \" line2\",\n searchEnd: \"\",\n replace: \" newline2\",\n }],\n ) === ` line1\\n newline2\\n line3`,\n \"Whitespace-sensitive replacement failed\",\n);\n\n// console.assert(\n// applySearchReplaceBlocks(\n// `line1\\nline2\\nline3`,\n// [{\n// searchStart: \"nonexistent\",\n// searchEnd: \"\",\n// replace: \"newline\",\n// }],\n// ) === `line1\\nline2\\nline3`,\n// \"Non-existent search line handling failed\",\n// );\n\nexport default function(\n { tempValsParentFolderId, username }: { tempValsParentFolderId: string; username: string },\n) {\n const valTownToken = Deno.env.get(\"valtown\");\n const vt = new ValTown({ bearerToken: valTownToken });\n const app = new Hono();\n\n const jsxResponse = (jsx) => {\n return new Response(renderToString(jsx), { headers: { \"Content-Type\": \"text/html\" } });\n };\n\n const systemprompt = `All the above are example conversations and context you can refer to, but don't\n consider it part of the current conversation. The conversation below is your recent interaction with the user.\n Your entire response should only be TypeScript.\n Your response should start with \\`\\`\\`ts and end with \\`\\`\\`, so full code fences.\n Make an HTTP val (other vals are currently not supported to run, even though we have examples for them).\n Start your response with a comment explaining how your approach will work, what libraries or \n API calls you will use, and any tradeoffs you're making. Then write the code in a consise way, \n the simplest way to achieve the goal, though you can add some inline comments to explain your \n reasoning (not for every line, but for major groups of lines). Don't use any environment variables \n unless strictly necessary, for example use APIs that don't require a key, prefer internal function \n imports (using esm.town), and prefer putting API keys as inline variables. Use built-in Deno \n functions where possible. Unless specified, don't add error handling, \n make sure that errors bubble up to the caller.\n Avoid external images or base64 images, use emojis, unicode symtols, or icon fonts/libraries instead, unless that's\n not practical for the user's request (e.g. if they ask for a particular animated gif).\n If the user asks for something that requires persistence, use the Val Town Blob storage API, unless\n explicitly specified otherwise. Use the current val name for the storage key, which you can get\n using the \"pomdtr/extractValInfo\" val, which you can call like this:\n \\`\\`\\`ts\n import { extractValInfo } from \"https://esm.town/v/pomdtr/extractValInfo\";\n \n const {owner, name} = extractValInfo(import.meta.url);\n \\`\\`\\`\n There should be no comments like \"more content here\", it should be complete and directly runnable.\n The val should create a \"export default async function main\" which is the main function that gets\n executed on every HTTP request.\n The val should return a valid HTML website, don't make JUST a backend unless explicitly asked for.\n You can use React but you don't have to.\n `.replace(\"\\n\", \" \");\n\n // Your response should start with \\`\\`\\`ts and end with \\`\\`\\`.\n // The val should create a \"export default async function main() {\" which\n // is the main function that gets executed, without any arguments. Don't return a Response object,\n // just return a plain Javascript object, array, or string.\n\n const systemprompt2 = `Since your last response the user might have changed the code.\n The current version of the code is below. Keep your response as close to their current\n code as possible, only changing things that are strictly necessary to change.`.replace(\"\\n\", \"\");\n\n const changesMessages = function({ currentCode, userprompt }: { currentCode: string; userprompt: string }) {\n if (!currentCode) {\n currentCode = `/** @jsxImportSource https://esm.sh/react */\n\nimport React from \"npm:react\";\nimport { renderToString } from \"npm:react-dom/server\";\n\nconst Example = () => ();\n\nexport default async function main(req: Request): Promise {\n const html = renderToString();\n return new Response(html, {\n headers: { \"Content-Type\": \"text/html\" },\n });\n}`;\n }\n\n return [\n {\n role: \"system\",\n content:\n `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\n\\`\\`\\`ts\nimport { randomUUID } from \"node:crypto\";\n\\`\\`\\`\nResponses should be short and should omit any information about installing or running Deno.\nYour response should start with a regular chat response.\nMake an HTTP val (other vals are currently not supported to run, even though we have examples for them).\nAdd comments at the top of the file explaining how your approach works, what libraries or \nAPI calls you will use, and any tradeoffs you're making. Then write the code in a consise way, \nthe simplest way to achieve the goal, though you can add some inline comments to explain your \nreasoning (not for every line, but for major groups of lines). Don't use any environment variables \nunless strictly necessary, for example use APIs that don't require a key, prefer internal function \nimports (using esm.town), and prefer putting API keys as inline variables. Use built-in Deno \nfunctions where possible. Unless specified, don't add error handling, \nmake sure that errors bubble up to the caller.\nAvoid external images or base64 images, use emojis, unicode symtols, or icon fonts/libraries instead, unless that's\nnot practical for the user's request (e.g. if they ask for a particular animated gif).\nIf the user asks for something that requires persistence, use the Val Town Blob storage API, unless\nexplicitly specified otherwise. Use the current val name for the storage key, which you can get\nusing the \"pomdtr/extractValInfo\" val, which you can call like this:\n\\`\\`\\`ts\nimport { extractValInfo } from \"https://esm.town/v/pomdtr/extractValInfo\";\nconst {owner, name} = extractValInfo(import.meta.url);\n\\`\\`\\`\nThere should be no comments like \"more content here\", it should be complete and directly runnable.\nThe val should create a \"export default async function main\" which is the main function that gets\nexecuted on every HTTP request.\nThe val should return a valid HTML website, don't make JUST a backend unless explicitly asked for.\nYou can use React but you don't have to.\nTake requests for changes to the supplied code.\nIf the request is ambiguous, ask questions.\nOnce 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.\nONLY EVER RETURN CODE IN A *SEARCH_START_SINGLE_LINE/SEARCH_END_SINGLE_LINE/REPLACE BLOCK*!\nNever replace more than a single function at a time!\nInclude whitespace in the SEARCH_START_SINGLE_LINE/SEARCH_END_SINGLE_LINE/REPLACE block.\nIf you leave SEARCH_END_SINGLE_LINE empty, only SEARCH_START_SINGLE_LINE (the first match) will be replaced.\nSEARCH_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.\nKeep 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.\nDON'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.\nREMEMBER THAT YOU CAN ONLY PUT A SINGLE LINE IN SEARCH_START_SINGLE_LINE AND SEARCH_END_SINGLE_LINE!\n `.replace(\"\\n\", \" \"),\n },\n {\n role: \"system\",\n content: `For your reference, here are the contents of docs/std/blob.md:\n ---\n title: Blob Storage\n lastUpdated: 2024-05-09\n ---\n \n 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).\n \n 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.\n \n You may find [this admin viewer](https://www.val.town/v/stevekrouse/blob_admin) helpful for viewing and editing your blobs.\n \n ##### Get JSON\n \n \\`\\`\\`ts title=\"Get JSON\"\n import { blob } from \"https://esm.town/v/std/blob\";\n \n let blobDemo = await blob.getJSON(\"myKey\");\n console.log(blobDemo); // returns \\`undefined\\` if not found\n \\`\\`\\`\n \n ##### Set JSON\n \n \\`\\`\\`ts title=\"Set JSON\"\n import { blob } from \"https://esm.town/v/std/blob\";\n \n await blob.setJSON(\"myKey\", { hello: \"world\" });\n \\`\\`\\`\n \n ##### List keys\n \n \\`\\`\\`ts title=\"List Keys\"\n import { blob } from \"https://esm.town/v/std/blob\";\n \n let allKeys = await blob.list();\n console.log(allKeys);\n \n const appKeys = await blob.list(\"app_\");\n console.log(appKeys); // all keys that begin with \\`app_\\`\n \\`\\`\\`\n \n ##### Delete by key\n \n \\`\\`\\`ts title=\"Delete\"\n import { blob } from \"https://esm.town/v/std/blob\";\n \n await blob.delete(\"myKey\");\n \\`\\`\\`\n \n ### Examples\n \n - [Counter](https://www.val.town/v/std/docsBlobCounterDemo)\n - [RSS Notifications](https://www.val.town/v/stevekrouse/rssNotifyExample) (saving the last run time)\n - Picture: [Save](https://www.val.town/v/andreterron/blobSavePictureExample) & [Read](https://www.val.town/v/andreterron/blobReadPictureExample)\n \n ### Error Handling\n \n - \\`blob.get\\` can throw [\\`ValTownBlobNotFoundError\\`](https://val.town/v/std/ValTownBlobNotFoundError)\n - Any method can throw [\\`ValTownBlobError\\`](https://val.town/v/andreterron/ValTownBlobError) for unexpected errors.\n \n ### Utilities\n \n Our Blob SDK also includes some utility functions to make working with blobs easier.\n \n ##### Copy\n \n \\`\\`\\`ts title=\"Copy\"\n import { blob } from \"https://esm.town/v/std/blob\";\n \n await blob.copy(\"myKey\", \"myKeyCopy\");\n \\`\\`\\`\n \n ##### Move\n \n \\`\\`\\`ts title=\"Move\"\n import { blob } from \"https://esm.town/v/std/blob\";\n \n await blob.move(\"myKey\", \"myKeyNew\");\n \\`\\`\\`\n \n ### Lower-level API\n \n 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.\n \n - \\`async get(key: string)\\`: Retrieves a blob for a given key.\n - \\`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).\n \n ### Limitations\n \n - 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.\n - Keys for blobs can be up to 512 characters long.\n `,\n },\n {\n role: \"user\",\n content: `The current version of the val is below. Keep your response as close to the current\n code as possible, only changing things that are strictly necessary to change.\n \\`\\`\\`ts\n/** @jsxImportSource https://esm.sh/react */\n\nimport React from \"npm:react\";\nimport { renderToString } from \"npm:react-dom/server\";\n\nconst Example = () => ();\n\nexport default async function main(req: Request): Promise {\n const html = renderToString();\n return new Response(html, {\n headers: { \"Content-Type\": \"text/html\" },\n });\n}\n \\`\\`\\`\n\n User instructions: Make Hello world.\n `,\n },\n {\n role: \"assistant\",\n content: `Certainly!\n\n\\`\\`\\`ts\n[SEARCH_START_SINGLE_LINE]\nimport React from \"npm:react\";\n[/SEARCH_START_SINGLE_LINE]\n[SEARCH_END_SINGLE_LINE]\n[/SEARCH_END_SINGLE_LINE]\n[REPLACE]\n// This val creates a simple \"Hello World\" page using React.\n// We'll use React and ReactDOMServer for server-side rendering.\n// The approach is straightforward: create a React component and render it to HTML.\n\nimport React from \"npm:react\";\n[/REPLACE]\n\\`\\`\\`\n\n\\`\\`\\`ts\n[SEARCH_START_SINGLE_LINE]\nconst Example = () => ();\n[/SEARCH_START_SINGLE_LINE]\n[SEARCH_END_SINGLE_LINE]\n[/SEARCH_END_SINGLE_LINE]\n[REPLACE]\nconst HelloWorld = () => (\n \n \n Hello World\n \n \n

Hello World!

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

Hello World!

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

\n Hello World!\n

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

Hacker News Clone

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

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

\n[/SEARCH_START_SINGLE_LINE]\n[SEARCH_END_SINGLE_LINE]\n

\n[/SEARCH_END_SINGLE_LINE]\n[REPLACE]\n

Hacker News Clone

\n \n

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

\n[/REPLACE]\n\\`\\`\\`\n\n\\`\\`\\`ts\n[SEARCH_START_SINGLE_LINE]\nasync function getPosts(): Promise {\n[/SEARCH_START_SINGLE_LINE]\n[SEARCH_END_SINGLE_LINE]\n}\n[/SEARCH_END_SINGLE_LINE]\n[REPLACE]\nasync function getPosts(): Promise {\n const posts = await blob.getJSON(\\`${name}_posts\\`) as Post[] | undefined;\n return posts || [];\n}\n\nasync function savePosts(posts: Post[]): Promise {\n await blob.setJSON(\\`${name}_posts\\`, posts);\n}\n\nasync function addPost(title: string, url: string): Promise {\n const posts = await getPosts();\n const newPost: Post = {\n id: posts.length + 1,\n title,\n url,\n score: 1,\n createdAt: new Date().toISOString(),\n };\n posts.unshift(newPost);\n await savePosts(posts);\n}\n\nasync function upvotePost(id: number): Promise {\n const posts = await getPosts();\n const post = posts.find(p => p.id === id);\n if (post) {\n post.score++;\n await savePosts(posts);\n }\n}\n[/REPLACE]\n\\`\\`\\`\n\n\\`\\`\\`ts\n[SEARCH_START_SINGLE_LINE]\nexport default async function main(req: Request): Promise {\n[/SEARCH_START_SINGLE_LINE]\n[SEARCH_END_SINGLE_LINE]\n}\n[/SEARCH_END_SINGLE_LINE]\n[REPLACE]\nexport default async function main(req: Request): Promise {\n const url = new URL(req.url);\n \n if (req.method === 'POST') {\n const formData = await req.formData();\n if (url.pathname === '/submit') {\n const title = formData.get('title') as string;\n const postUrl = formData.get('url') as string;\n await addPost(title, postUrl);\n } else if (url.pathname === '/upvote') {\n const id = parseInt(formData.get('id') as string);\n await upvotePost(id);\n }\n return new Response('', { status: 302, headers: { 'Location': '/' } });\n }\n\n const posts = await getPosts();\n const html = renderToString();\n return new Response(html, {\n headers: { \"Content-Type\": \"text/html\" },\n });\n}\n[/REPLACE]\n\\`\\`\\`\n `,\n },\n {\n role: \"user\",\n content:\n `For all requests below, use React and Tailwind for the frontend, and blob storage for the backend, unless otherwise specified.`,\n },\n {\n role: \"user\",\n content: `The current version of the val is below. Keep your response as close to the current\n code as possible, only changing things that are strictly necessary to change.\n \\`\\`\\`ts\n${currentCode}\n \\`\\`\\`\n\n User instructions: ${userprompt}\nONLY EVER RETURN CODE IN A *SEARCH_START_SINGLE_LINE/SEARCH_END_SINGLE_LINE/REPLACE BLOCK*!\nNever replace more than a single function at a time!\nIf you leave SEARCH_END_SINGLE_LINE empty, only SEARCH_START_SINGLE_LINE (the first match) will be replaced.\nInclude whitespace in the SEARCH_START_SINGLE_LINE/SEARCH_END_SINGLE_LINE/REPLACE block.\nSEARCH_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.\nKeep 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.\nDON'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.\nREMEMBER THAT YOU CAN ONLY PUT A SINGLE LINE IN SEARCH_START_SINGLE_LINE AND SEARCH_END_SINGLE_LINE!`,\n },\n ];\n };\n\n const makeBubbleHeader = (emoji: string, id?: string, spin?: boolean) => {\n const idStr = id ? ` id=\"${id}\"` : \"\";\n const spinStr = spin ? \" animate-spin\" : \"\";\n return `\n

${emoji}

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

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

`;\n };\n\n app.post(\"/save\", async (c) => {\n const body = await c.req.parseBody();\n // console.log(body);\n const valName = body.valName as any;\n const code = (body.code as any).replaceAll(\"\\r\\n\", \"\\n\");\n await updateValByName({ token: valTownToken, code, name: valName });\n return new Response();\n });\n\n const mainHandler = async (c) => {\n const { readable, writable } = new TransformStream();\n const writer = writable.getWriter();\n const textEncoder = new TextEncoder();\n function write(text) {\n writer.write(textEncoder.encode(text));\n }\n\n new Promise(async () => {\n const body = await c.req.parseBody();\n const userprompt: any = body.userprompt;\n let prevConversation = [];\n if (body.prevConversation) prevConversation = JSON.parse(body.prevConversation as any) as any;\n let currentCode = \"\";\n if (body.code) currentCode = (body.code as any).replaceAll(\"\\r\\n\", \"\\n\");\n let model = \"gpt-4o-mini\";\n // let model = \"claude-3-5-sonnet-20240620\";\n if (body.model) model = body.model as any;\n let loadValName = \"\";\n if (c.req.query(\"loadValName\")) loadValName = c.req.query(\"loadValName\") as any;\n let fullscreen = \"\";\n if (c.req.query(\"fullscreen\")) fullscreen = c.req.query(\"fullscreen\") as any;\n let questionType = \"regenerate\";\n if (body.questionType) questionType = body.questionType as any;\n let contextWindowSize = 10;\n if (body.contextWindowSize) contextWindowSize = parseInt(body.contextWindowSize) as any;\n\n let formAction = \"/\";\n if (loadValName) {\n formAction += `?loadValName=${loadValName}`;\n }\n\n if (prevConversation.length === 0 && loadValName) {\n const val = await vt.alias.username.valName.retrieve(username, loadValName);\n currentCode = val.code.replaceAll(\"\\r\\n\", \"\\n\");\n }\n\n write(`\n \n \n \n \n \n \n \n \n \n \n

\n \n \n \n save\n val\n open\n next diff\n 💾\n

\n \n

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

Hi, I'm VALL-E Context window size: `,\n );\n if (loadValName) {\n write(\n `

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

`,\n );\n } else {\n write(\n `

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

`,\n );\n }\n write(`

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

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

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

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

No changes were made to the code.

`);\n }\n } else {\n write(makeAssistantMessageHeader(150));\n write(\n ``,\n );\n for await (const text of stream.textStream) {\n if (!text) { continue; }\n rawTokens.push(text);\n\n if (text == \"```\") { continue; }\n if (tokens.length === 0 && text == \"ts\") { continue; }\n if (tokens.length === 0 && text == \"\\n\") { continue; }\n // console.log(text);\n write(_.escape(text));\n tokens.push(text);\n write(``);\n }\n write(`

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

\n \n

\n \n \n

\n `);\n write(makeBubbleFooter());\n\n writer.close();\n });\n\n return new Response(readable, { headers: { \"Content-Type\": \"text/html\" } });\n };\n app.get(\"/\", mainHandler);\n app.post(\"/\", mainHandler);\n\n return passwordAuth(app.fetch, { verifyPassword: verifyToken });\n}","deleted","label",[98],"permalink","https://www.val.town/x/ubyk/VALLErun/code/main.tsx","extension","actionData","errors"]