[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_162":163,"_164":165},"routes/_app.x.$handle.$name",{"_98":97,"_32":49,"_106":88,"_27":107,"_13":14,"_108":-5,"_11":109,"_110":111,"_112":113,"_114":115,"_116":117,"_21":-5,"_118":-5,"_119":-5,"_120":25,"_121":122,"_123":53,"_124":-5,"_125":-5,"_126":127},"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","24e66328-279b-11f0-9d52-569c3dd06744","name","fileType","content","Generates a streaming illustrated primer on a subject.\n\nℹ️ Open the url and add a query parameter with a subject (click on titles to \"delve\"): https://substrate-illustratedprimer.web.val.run/?prompt=modernism\n\n🪩 If you fork, you can [sign up for Substrate](https://substrate.run/signin) to get your own API key and $50 in credits ","createdAt",["D",1720635399299],"branchVersion","branchId","24e36dc6-279b-11f0-9d52-569c3dd06744",{"_30":43,"_32":42,"_33":44,"_34":45,"_36":46,"_38":14,"_39":40,"_24":25},"main.tsx","24e6584c-279b-11f0-9d52-569c3dd06744","http","import wrapper from \"https://esm.town/v/substrate/substrateBadgeMiddleware\";\nimport { ComputeJSON, ComputeText, GenerateImage, sb, Substrate } from \"npm:substrate\";\nimport { z } from \"npm:zod\";\nimport { zodToJsonSchema } from \"npm:zod-to-json-schema\";\n\nasync function handler(req: Request): Promise {\n const searchParams = new URL(req.url).searchParams;\n const { prompt = \"modernism\" } = Object.fromEntries(searchParams);\n\n // Substrate graph\n const substrate = new Substrate({ apiKey: Deno.env.get(\"SUBSTRATE_API_KEY\") });\n const Topic = z\n .object({\n concepts: z.array(z.string()).min(2).max(2).describe(\n \"List of deeper concepts or ideas. Keep them short, less than 5 words.\",\n ),\n })\n .describe(\"Deeper concepts or ideas related to a topic.\");\n\n const c1 = new ComputeJSON({\n prompt: `List deeper concepts or ideas related to: ${prompt}`,\n json_schema: zodToJsonSchema(Topic),\n });\n const prompt1 = new ComputeText({\n prompt: sb.interpolate`generate a description of an image of ${\n c1.future.json_object.get(\"concepts\").at(0)\n }. Be concise and terse. Include details on the background, angle & framing, and style.`,\n });\n const prompt2 = new ComputeText({\n prompt: sb.interpolate`generate a description of an image of ${\n c1.future.json_object.get(\"concepts\").at(1)\n }. Be concise and terse. Include details on the background, angle & framing, and style.`,\n });\n const caption1 = new ComputeText({\n prompt: sb.interpolate`write a short paragraph relating ${\n c1.future.json_object.get(\"concepts\").at(0)\n } to ${prompt}`,\n });\n const caption2 = new ComputeText({\n prompt: sb.interpolate`write a short paragraph relating ${\n c1.future.json_object.get(\"concepts\").at(1)\n } to ${prompt}. It should be meaningfully different from the following content:\n ${caption1.future.text}`,\n }, { cache_age: 800 });\n const image1 = new GenerateImage({ prompt: prompt1.future.text });\n const image2 = new GenerateImage({ prompt: prompt2.future.text });\n const c2 = new ComputeJSON({\n prompt: sb.interpolate`List deeper concepts or ideas related to: ${c1.future.json_object.get(\"concepts\").at(0)}\n The items must NOT be in this list:[${c1.future.json_object.get(\"concepts\").at(0)}, ${\n c1.future.json_object.get(\"concepts\").at(1)\n }]`,\n json_schema: zodToJsonSchema(Topic),\n });\n const prompt3 = new ComputeText({\n prompt: sb.interpolate`generate a description of an image of ${\n c2.future.json_object.get(\"concepts\").at(0)\n }. Be creative depicting abstract topics with extra detail. Include details on the background, angle & framing, and style.`,\n });\n const prompt4 = new ComputeText({\n prompt: sb.interpolate`generate a description of an image of ${\n c2.future.json_object.get(\"concepts\").at(1)\n }. Be creative depicting abstract topics with extra detail. Include details on the background, angle & framing, and style.`,\n });\n const caption3 = new ComputeText({\n prompt: sb.interpolate`write a short paragraph relating ${\n c2.future.json_object.get(\"concepts\").at(0)\n } to ${prompt}. It should be meaningfully different from the following content: \n ${caption1.future.text}\n ${caption2.future.text}`,\n });\n const caption4 = new ComputeText({\n prompt: sb.interpolate`write a short paragraph relating ${\n c2.future.json_object.get(\"concepts\").at(1)\n } to ${prompt}. It should be meaninfully different from the following content: \n ${caption1.future.text}\n ${caption2.future.text}\n ${caption3.future.text}`,\n });\n const image3 = new GenerateImage({ prompt: prompt3.future.text });\n const image4 = new GenerateImage({ prompt: prompt4.future.text });\n const nodes = [image1, caption1, image2, caption2, image3, caption3, image4, caption4];\n const stream = await substrate.stream(...nodes);\n\n // UI\n const capitalize = s => s.replace(/^\\w/, c => c.toUpperCase());\n return new Response(\n new ReadableStream({\n async start(controller) {\n const pairs = [\n { image: null, caption: null, title: null },\n { image: null, caption: null, title: null },\n { image: null, caption: null, title: null },\n { image: null, caption: null, title: null },\n ];\n\n const outputPair = (pair, index) => {\n if (pair.image && pair.caption) {\n controller.enqueue(new TextEncoder().encode(\n `

${pair.image}

\n ${capitalize(pair.title)}
${pair.caption}

`,\n ));\n pairs[index] = { image: null, caption: null, title: null }; // Reset after output\n }\n };\n\n controller.enqueue(new TextEncoder().encode(`

\n \n \n
\n

Concepts related to ${prompt}

\n \n

`));\n\n for await (const event of stream) {\n if (event.object === \"node.result\") {\n if (event.node_id === c1.id) {\n pairs[0].title = event.data.json_object.concepts[0];\n pairs[1].title = event.data.json_object.concepts[1];\n }\n else if (event.node_id === c2.id) {\n pairs[2].title = event.data.json_object.concepts[0];\n pairs[3].title = event.data.json_object.concepts[1];\n }\n else {\n const index = nodes.findIndex(node => node.id === event.node_id);\n if (index !== -1) {\n const pairIndex = Math.floor(index / 2);\n const isImage = index % 2 === 0;\n const content = event.data.image_uri\n ? `

`\n : `

${event.data.text}

`;\n\n if (isImage) {\n pairs[pairIndex].image = content;\n } else {\n pairs[pairIndex].caption = content;\n }\n\n outputPair(pairs[pairIndex], pairIndex);\n }\n }\n }\n }\n pairs.forEach((pair, index) => outputPair(pair, index));\n controller.close();\n },\n }),\n { headers: { \"Content-Type\": \"text/html\" } },\n );\n}\n\nexport default wrapper(handler, import.meta.url);",["D",1720635399299],"id","24e32fb4-279b-11f0-9d52-569c3dd06744","IllustratedPrimer",["D",1746220774075],"deletedAt","legacyEnvVars",true,"privacy","public","httpPrivacy","description","imageUrl","bcf12a04-db23-458c-857c-8ef927445d1c","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount",0,"orgId","3e729afb-58d6-4b64-8015-60411f303cff","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":59,"_102":103,"_104":25},"branch",{"_13":14,"_32":88,"_47":40,"_89":48,"_90":-5,"_91":-5,"_92":-5,"_93":-5,"_94":-5,"_95":49,"_96":97},"isOwned","main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","kousun12","handle","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18yajNlcjA4UWZwV045T0ZlOUgycm5FU1pYV2cifQ","tier","free","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_47":48,"_32":49,"_36":158,"_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":159,"_83":160,"_85":161,"_87":25},"tree",[149,150],"files",[149,150],"counts",{"_139":65,"_140":14,"_141":65,"_142":143,"_144":145},"contents",[128,129],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_47":136,"_32":28,"_30":31,"_131":-5,"_39":40,"_38":14,"_132":53,"_36":137,"_13":65,"_33":21,"_34":35,"_24":25,"_134":-5,"_27":138},{"_47":130,"_32":42,"_30":43,"_131":-5,"_39":40,"_38":14,"_132":53,"_36":133,"_13":65,"_33":44,"_34":45,"_24":25,"_134":-5,"_27":135},"24e657a2-279b-11f0-9d52-569c3dd06744","parentId","latest",["D",1720635399299],"label",[42],"24e66292-279b-11f0-9d52-569c3dd06744",["D",1720635399299],[28],"pulls","branches","forks","envVars",{"_146":65,"_148":65},"connections",{"_146":65,"_147":65},"count","unfilledCount","emptyCount",{"_47":136,"_32":28,"_30":31,"_131":-5,"_39":40,"_38":14,"_132":53,"_36":155,"_13":65,"_33":21,"_34":35,"_24":25,"_134":-5,"_152":156,"_27":157},{"_47":130,"_32":42,"_30":43,"_131":-5,"_39":40,"_38":14,"_132":53,"_36":151,"_13":65,"_33":44,"_34":45,"_24":25,"_134":-5,"_152":153,"_27":154},["D",1720635399299],"children",[],[42],["D",1720635399299],[],[28],["D",1746220774075],{"_98":97,"_105":101},{"_98":97,"_99":-5,"_100":101,"_18":59,"_102":103,"_104":25},{"_13":14,"_32":88,"_47":40,"_89":48,"_90":-5,"_91":-5,"_92":-5,"_93":-5,"_94":-5,"_95":49,"_96":97},"ctx",{"_81":-5,"_125":195,"_196":197,"_198":199,"_200":25,"_201":25,"_202":25,"_203":53,"_204":-5,"_205":-7,"_206":-7,"_207":65,"_208":25,"_209":25,"_210":-5,"_211":25,"_212":25,"_213":25,"_214":-5},"ENV",{"_166":167,"_168":169,"_170":88,"_171":172,"_173":174,"_175":176,"_177":178,"_179":180,"_181":182,"_183":184,"_185":186,"_187":188,"_189":190,"_191":192,"_193":194},"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 · v1