[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_181":182,"_183":184},"routes/_app.x.$handle.$name",{"_99":98,"_32":45,"_107":85,"_27":108,"_13":14,"_109":-5,"_11":110,"_111":112,"_113":114,"_115":116,"_117":118,"_20":-5,"_119":120,"_121":122,"_123":25,"_124":125,"_126":49,"_127":-5,"_128":-5,"_129":130},"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",21,"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","d74fbc24-2784-11f0-b46e-569c3dd06744","name","fileType","http","content","import OpenAI from \"npm:openai\";\n\nconst openai = new OpenAI();\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\n let pingInterval = setInterval(() => writer.write(textEncoder.encode(\"\\n\")), 1000);\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 promptURLHost = new URL(promptURL).hostname;\n let pageDescriptionInstructions = \"\";\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.\n Use \n

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

Diff · v21