[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_179":180,"_181":182},"routes/_app.x.$handle.$name",{"_98":97,"_32":45,"_106":85,"_27":107,"_13":14,"_108":-5,"_11":109,"_110":111,"_112":113,"_114":115,"_116":117,"_20":-5,"_118":119,"_120":121,"_122":25,"_123":124,"_125":49,"_126":-5,"_127":-5,"_128":129},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_43":44,"_32":45,"_38":46,"_47":-5,"_48":49,"_50":51,"_52":51,"_53":-5,"_54":-5,"_18":55,"_56":31,"_57":49,"_58":-5,"_59":-5,"_60":61,"_62":63,"_64":-5,"_65":-5,"_66":-5,"_67":-5,"_68":69,"_70":69,"_71":72,"_73":72,"_74":72,"_75":69,"_76":69,"_77":78,"_79":80,"_81":82,"_83":25},"version",282,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":23,"_24":25,"_26":25,"_27":28,"_29":28},"file",{"_30":31,"_32":28,"_33":34,"_35":37,"_38":39,"_40":14,"_41":42,"_24":25},"previous",{"_30":31,"_32":28,"_33":34,"_35":36},"deleted",false,"deletedHere","path","main.tsx","latestPath","fileId","832889ba-26de-11f0-a5b3-569c3dd06744","name","fileType","http","content","/** @jsxImportSource https://esm.sh/react */\nimport valleGetValsContextWindow from \"https://esm.town/v/janpaul123/valleGetValsContextWindow\";\nimport { updateValByName } from \"https://esm.town/v/nbbaier/updateValByName?v=14\";\nimport { passwordAuth } from \"https://esm.town/v/pomdtr/password_auth?v=84\";\nimport { verifyToken } from \"https://esm.town/v/pomdtr/verifyToken\";\nimport ValTown from \"npm:@valtown/sdk\";\nimport { Hono } from \"npm:hono@3\";\nimport _ from \"npm:lodash@4\";\nimport OpenAI from \"npm:openai\";\nimport { renderToString } from \"npm:react-dom/server\";\nimport archiveVal from \"https://esm.town/v/nbbaier/archiveVal?v=10\";\n\n// Set these to your own\nconst username = \"janpaul123\";\nconst parentFolderId = \"4bb7b010-4443-11ef-8642-de64eea55b61\";\n\nconst vt = new ValTown({ bearerToken: Deno.env.get(\"valtown\") });\nconst app = new Hono();\n\nconst jsxResponse = (jsx) => {\n return new Response(renderToString(jsx), { headers: { \"Content-Type\": \"text/html\" } });\n};\n\nconst systemprompt = `The conversation below is your recent interaction with the user.\nYour entire response should only be TypeScript.\nYour response should start with \\`\\`\\`ts and end with \\`\\`\\`.\nMake an HTTP val (other vals are currently not supported to run, even though we have examples for them).\nStart your response with a comment explaining how your approach will work, 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.\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.\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\nconst systemprompt2 = `Since your last response the user might have changed the code.\nThe current version of the code is below. Keep your response as close to their current\ncode as possible, only changing things that are strictly necessary to change.`.replace(\"\\n\", \"\");\n\nconst 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\nconst makeBubbleFooter = () => {\n return `\n

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

`;\n};\n\nconst 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 let valCode = \"\";\n let iframeSrc = \"\";\n // const valName: any = c.req.query(\"valName\");\n // if (valName) {\n // const val = await vt.alias.username.valName.retrieve(username, valName);\n // valCode = val.code;\n // iframeSrc = `https://${username}-${valName}.web.val.run`;\n // }\n\n // \n\n new Promise(async () => {\n write(`\n \n \n \n \n \n \n \n

\n \n \n

\n \n

${\n      _.escape(valCode)\n    }

\n \n

\n \n `);\n\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;\n let model = \"gpt-3.5-turbo\";\n if (body.model) model = body.model as any;\n\n write(makeBubbleHeader(\"🤖\"));\n write(\n `

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

`,\n );\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(\"```\", \"\")));\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 const contextWindow: any = await valleGetValsContextWindow(model);\n const openai = new OpenAI();\n const stream = await openai.chat.completions.create({\n model,\n stream: true,\n messages: [\n ...contextWindow.slice(0, 300),\n { role: \"system\", content: systemprompt },\n ...prevConversation,\n { role: \"system\", content: `${systemprompt2}\\n\\`\\`\\`ts\\n${currentCode}\\n\\`\\`\\`` },\n { role: \"user\", content: userprompt },\n ],\n });\n\n write(``);\n write(makeBubbleHeader(\"🤖\", \"assistant-latest\", true));\n write(makeAssistantMessageHeader(150));\n write(\n ``,\n );\n const tokens = [];\n const rawTokens = [];\n for await (const chunk of stream) {\n const text = chunk.choices[0]?.delta?.content;\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 write(makeBubbleFooter());\n\n const tempValName = `valle_tmp_${Math.random() * 10}${Math.random() * 10}`.replaceAll(\".\", \"\");\n const newCode = tokens.join(\"\").replaceAll(\"```ts\", \"\").replaceAll(\"```\", \"\");\n const newVal = await vt.vals.create({ name: tempValName, code: newCode, type: \"http\", privacy: \"public\" });\n archiveVal(newVal.id, parentFolderId);\n write(``);\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 write(makeBubbleFooter());\n\n writer.close();\n });\n\n return new Response(readable, { headers: { \"Content-Type\": \"text/html\" } });\n};\napp.get(\"/\", mainHandler);\napp.post(\"/\", mainHandler);\n\nexport default passwordAuth(app.fetch, { verifyPassword: verifyToken });\n\n// \n// \n// \n// \n// ","/** @jsxImportSource https://esm.sh/react */\nimport valleGetValsContextWindow from \"https://esm.town/v/janpaul123/valleGetValsContextWindow\";\nimport archiveVal from \"https://esm.town/v/nbbaier/archiveVal?v=10\";\nimport { updateValByName } from \"https://esm.town/v/nbbaier/updateValByName?v=14\";\nimport { passwordAuth } from \"https://esm.town/v/pomdtr/password_auth?v=84\";\nimport { verifyToken } from \"https://esm.town/v/pomdtr/verifyToken\";\nimport ValTown from \"npm:@valtown/sdk\";\nimport { Hono } from \"npm:hono@3\";\nimport _ from \"npm:lodash@4\";\nimport OpenAI from \"npm:openai\";\nimport { renderToString } from \"npm:react-dom/server\";\n\n// Set these to your own\nconst username = \"janpaul123\";\nconst tempValsParentFolderId = \"4bb7b010-4443-11ef-8642-de64eea55b61\";\n\nconst vt = new ValTown({ bearerToken: Deno.env.get(\"valtown\") });\nconst app = new Hono();\n\nconst jsxResponse = (jsx) => {\n return new Response(renderToString(jsx), { headers: { \"Content-Type\": \"text/html\" } });\n};\n\nconst systemprompt = `The conversation below is your recent interaction with the user.\nYour entire response should only be TypeScript.\nYour response should start with \\`\\`\\`ts and end with \\`\\`\\`.\nMake an HTTP val (other vals are currently not supported to run, even though we have examples for them).\nStart your response with a comment explaining how your approach will work, 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.\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.\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\nconst systemprompt2 = `Since your last response the user might have changed the code.\nThe current version of the code is below. Keep your response as close to their current\ncode as possible, only changing things that are strictly necessary to change.`.replace(\"\\n\", \"\");\n\nconst 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\nconst makeBubbleFooter = () => {\n return `\n

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

\n \n \n

\n \n

${\n      _.escape(valCode)\n    }

\n \n

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

`);\n write(makeBubbleFooter());\n\n const tempValName = `valle_tmp_${Math.random() * 10}${Math.random() * 10}`.replaceAll(\".\", \"\");\n const newCode = tokens.join(\"\").replaceAll(\"```ts\", \"\").replaceAll(\"```\", \"\");\n const newVal = await vt.vals.create({ name: tempValName, code: newCode, type: \"http\", privacy: \"public\" });\n archiveVal(newVal.id, tempValsParentFolderId);\n write(``);\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 write(makeBubbleFooter());\n\n writer.close();\n });\n\n return new Response(readable, { headers: { \"Content-Type\": \"text/html\" } });\n};\napp.get(\"/\", mainHandler);\napp.post(\"/\", mainHandler);\n\nexport default passwordAuth(app.fetch, { verifyPassword: verifyToken });\n\n// \n// \n// \n// \n// ","createdAt",["D",1721224215557],"branchVersion","branchId","8323158e-26de-11f0-a5b3-569c3dd06744","id","8322c37c-26de-11f0-a5b3-569c3dd06744","VALLE",["D",1746139757315],"deletedAt","legacyEnvVars",true,"privacy","public","httpPrivacy","description","imageUrl","2ce21bab-39d2-4fd1-881a-02dc5ce8a4af","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount",15,"orgId","f9c69a1c-4300-4bec-b4cf-7c54a6c90f97","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_98":97,"_105":101},"org",{"_98":97,"_99":-5,"_100":101,"_18":55,"_102":103,"_104":25},"branch",{"_13":84,"_32":85,"_43":42,"_86":44,"_87":88,"_89":90,"_91":51,"_92":93,"_94":63,"_95":45,"_96":97},"isOwned",295,"main","projectId","forkedBranchId","59c34c86-26de-11f0-a5b3-569c3dd06744","forkedBranchVersion",0,"forkedProjectPrivacy","forkedProjectId","59c2fbf0-26de-11f0-a5b3-569c3dd06744","forkedProjectOrgId","projectName","userHandle","janpaul123","handle","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvdXBsb2FkZWQvaW1nXzJncEQ0elVic1BxOU15TkFMV0JCUkdRQndWMCJ9","tier","free","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_43":44,"_32":45,"_38":175,"_47":-5,"_48":49,"_50":51,"_52":51,"_53":-5,"_54":-5,"_18":55,"_56":31,"_57":49,"_58":-5,"_59":-5,"_60":61,"_62":63,"_64":-5,"_65":-5,"_66":-5,"_67":-5,"_68":69,"_70":69,"_71":72,"_73":72,"_74":72,"_75":69,"_76":69,"_77":176,"_79":177,"_81":178,"_83":25},"tree",[166,167],"files",[166,167],"counts",{"_155":90,"_156":151,"_157":158,"_159":160,"_161":162},"contents",[139,140],"upstreamProject",{"_43":93,"_32":137,"_53":-5,"_54":-5,"_50":51,"_77":138},"upstreamBranch",{"_43":88,"_38":130,"_131":132,"_32":85,"_86":93,"_13":133,"_87":134,"_89":90,"_135":136,"_47":-5,"_83":25,"_50":51,"_96":97,"_62":63,"_95":137},"emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},["D",1746139687901],"updatedAt",["D",1721052366927],76,"3ab53ee4-26de-11f0-a5b3-569c3dd06744","lockfileKey","1746157612837-esm.town_v_janpaul123_valTownChatGPT2@76-main","valTownChatGPT2",{"_98":97,"_105":101},{"_43":148,"_32":149,"_30":150,"_142":-5,"_41":42,"_40":151,"_143":49,"_38":152,"_13":90,"_33":20,"_35":153,"_24":25,"_146":-5,"_27":154},{"_43":141,"_32":28,"_30":31,"_142":-5,"_41":42,"_40":14,"_143":25,"_38":144,"_13":145,"_33":34,"_35":37,"_24":25,"_146":-5,"_27":147},"8957e844-26de-11f0-a5b3-569c3dd06744","parentId","latest",["D",1721224215557],281,"label",[28],"83289716-26de-11f0-a5b3-569c3dd06744","README.md","83289874-26de-11f0-a5b3-569c3dd06744",1,["D",1721053535025],"# VALL-E\n\nLLM code generation for vals! Make apps with a frontend, backend, and database.\n\nIt's a bit of work to get this running, but it's worth it.\n* Fork this val to your own profile.\n* Make a folder for the temporary vals that get generated, take the ID from the URL, and put it in `tempValsParentFolderId`.\n* If you want to use OpenAI models you need to set the `OPENAI_API_KEY` [env var](https://www.val.town/settings/environment-variables).\n* If you want to use Anthropic models you need to set the `ANTHROPIC_API_KEY` [env var](https://www.val.town/settings/environment-variables).\n* Create a [Val Town API token](https://www.val.town/settings/api), open the browser preview of this val, and use the API token as the password to log in.\n\n

\n\nMigrated from folder: VAL_E/VALLE",[149],"pulls","branches","forks",26,"envVars",{"_163":90,"_165":90},"connections",{"_163":90,"_164":90},"count","unfilledCount","emptyCount",{"_43":148,"_32":149,"_30":150,"_142":-5,"_41":42,"_40":151,"_143":49,"_38":172,"_13":90,"_33":20,"_35":153,"_24":25,"_146":-5,"_169":173,"_27":174},{"_43":141,"_32":28,"_30":31,"_142":-5,"_41":42,"_40":14,"_143":25,"_38":168,"_13":145,"_33":34,"_35":37,"_24":25,"_146":-5,"_169":170,"_27":171},["D",1721224215557],"children",[],[28],["D",1721053535025],[],[149],["D",1746139757315],{"_98":97,"_105":101},{"_98":97,"_99":-5,"_100":101,"_18":55,"_102":103,"_104":25},{"_13":84,"_32":85,"_43":42,"_86":44,"_87":88,"_89":90,"_91":51,"_92":93,"_94":63,"_95":45,"_96":97},"ctx",{"_77":-5,"_127":212,"_213":214,"_215":216,"_217":25,"_218":25,"_219":25,"_220":49,"_221":-5,"_222":-7,"_223":-7,"_224":90,"_225":25,"_226":25,"_227":-5,"_228":25,"_229":25,"_230":25,"_231":-5},"ENV",{"_183":184,"_185":186,"_187":85,"_188":189,"_190":191,"_192":193,"_194":195,"_196":197,"_198":199,"_200":201,"_202":203,"_204":205,"_206":207,"_208":209,"_210":211},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e87eb04e707cf64e7e532c8e8ec395f209e17f15","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

Diff · v282