[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_177":178,"_179":180},"routes/_app.x.$handle.$name",{"_101":100,"_32":49,"_109":88,"_27":110,"_13":14,"_111":-5,"_11":112,"_113":114,"_115":116,"_117":118,"_119":120,"_21":-5,"_121":122,"_123":124,"_125":25,"_126":127,"_128":53,"_129":-5,"_130":-5,"_131":132},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_47":48,"_32":49,"_36":50,"_51":-5,"_52":53,"_54":55,"_56":55,"_57":-5,"_58":-5,"_18":59,"_60":43,"_61":53,"_62":-5,"_63":-5,"_64":65,"_66":67,"_68":-5,"_69":-5,"_70":-5,"_71":-5,"_72":73,"_74":73,"_75":76,"_77":76,"_78":76,"_79":73,"_80":73,"_81":82,"_83":84,"_85":86,"_87":25},"version",1,"changes",[19,20],"aiChatInfo","userId",{"_21":41,"_23":-7,"_24":25,"_26":25,"_27":42,"_29":42},{"_21":22,"_23":-7,"_24":25,"_26":25,"_27":28,"_29":28},"file",{"_30":31,"_32":28,"_33":21,"_34":35,"_36":37,"_38":14,"_39":40,"_24":25},"previous","deleted",false,"deletedHere","path","README.md","latestPath","fileId","010554d0-2793-11f0-9d52-569c3dd06744","name","fileType","content","To-dos:\n- Spruce up styles a bit\n- Write this README\n- ~Add a cache!~\n- ~Try moving style tag to the bottom by prompting so content appears immediately and then becomes styled~ didn't work b/c CSS parsing isn't progressive\n- Need more prompting to get the model not to generate placeholder-y content\n- Better root URL page / index page with links to some good sample generations\n\nMigrated from folder: ExamplesAndForks/webgen","createdAt",["D",1717704859211],"branchVersion","branchId","01026978-2793-11f0-9d52-569c3dd06744",{"_30":43,"_32":42,"_33":44,"_34":45,"_36":46,"_38":14,"_39":40,"_24":25},"main.tsx","010547f6-2793-11f0-9d52-569c3dd06744","http","import { blob } from \"https://esm.town/v/std/blob?v=12\";\nimport OpenAI from \"npm:openai\";\n\nconst openai = new OpenAI();\n\nconst getCacheKey = (url: string): string => {\n return `webgen-url-cache-v2:${url}`;\n};\n\nexport default async (req) => {\n let { readable, writable } = new TransformStream();\n let writer = writable.getWriter();\n const textEncoder = new TextEncoder();\n\n const loadingSpinnerHTMLStart = `\n \n

\n  Loading...\n  `;\n  const loadingSpinnerHTMLEnd = `

`;\n const loadingSpinnerHide = ``;\n const linkFixerScript = `\n \n `;\n\n // 1. get the pathname of the URL and use it as the \"fake URL \" to generate from\n const promptURL = new URL(req.url).pathname.slice(1);\n const cachedResult = await blob.getJSON(getCacheKey(promptURL));\n if (cachedResult) {\n return new Response(cachedResult, {\n headers: {\n \"Content-Type\": \"text/html\",\n },\n });\n }\n\n let pingInterval = setInterval(() => writer.write(textEncoder.encode(\"\\n\")), 1000);\n\n if (promptURL.trim() === \"\") {\n return new Response(\n `Please provide a URL!\\nFor example, go to \"https://thesephist-webgen.web.val.run/https://thesephist.com/\".`,\n {\n headers: {\n \"Content-Type\": \"text/plain\",\n },\n status: 400,\n },\n );\n }\n const promptURLHost = new URL(promptURL).hostname;\n let pageDescriptionInstructions = \"\";\n let pageResult = \"\";\n\n // // 2. Do one OpenAI inference to expand that URL to a longer page description\n const pageDescriptionStream = await openai.chat.completions.create({\n model: \"gpt-4o\",\n messages: [{\n role: \"system\",\n content: `\n You will be given a URL of an archived page whose contents have gone missing from our library.\n Please, to the best of your ability, write a detailed instruction about the likely contents of this page such that a competent web developer should be able to fully reconstruct its likely contents.\n\n Your description should include:\n - What content is on the page\n - Other elements like sidebars, links, images that may be in the page\n - The author and origin of the page\n - The stylistic aesthetic of the page\n\n Your description should be no longer than 300 words.\n Only respond with the description; do not add any introduction or additional commentary.\n `,\n }, {\n role: \"user\",\n content: promptURL.trim(),\n }],\n max_tokens: 1024,\n stream: true,\n });\n\n new Promise(async () => {\n // Stream back loading spinner and description\n writer.write(textEncoder.encode(loadingSpinnerHTMLStart));\n for await (const part of pageDescriptionStream) {\n const text = part.choices[0]?.delta?.content || \"\";\n writer.write(textEncoder.encode(text));\n pageDescriptionInstructions += text;\n }\n writer.write(textEncoder.encode(loadingSpinnerHTMLEnd));\n\n // 3. Generate the page\n const stream = await openai.chat.completions.create({\n model: \"gpt-4o\",\n messages: [{\n role: \"system\",\n content: `\n You are an expert programmer contracted to design and code beautiful simple webpages.\n\n Only respond with complete HTML pages, beginning with \"\". Do not include any other commentary. Do not use Markdown code fences.\n Use

Diff · v1