GIF Story | Substrate

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_166":167,"_168":169},"routes/_app.x.$handle.$name",{"_11":12,"_13":14,"_15":16,"_18":19,"_17":-7,"_125":-5,"_20":126,"_22":127,"_128":129,"_130":131,"_25":132,"_24":-5,"_133":-5,"_134":-5,"_135":54,"_136":137,"_138":45,"_139":-5,"_140":-5,"_141":142},"routes/_app.x.$handle.$name.branch.$branch.code.$",{"_11":12,"_13":14,"_15":16,"_17":-7,"_18":19,"_20":21,"_22":23,"_24":-7,"_25":26,"_27":-5,"_28":-5,"_29":-5,"_30":-5,"_31":-5},"handle","pa","name","gifStory","branchName","main","version","path","","project",{"_34":72,"_13":14,"_46":73,"_74":-5,"_75":54,"_76":77,"_78":77,"_79":-5,"_80":-5,"_81":82,"_83":38,"_84":45,"_85":-5,"_86":-5,"_87":48,"_88":89,"_90":-5,"_91":-5,"_92":-5,"_93":-5,"_94":95,"_96":95,"_97":98,"_99":98,"_100":98,"_101":95,"_102":95,"_103":104,"_105":106,"_107":108,"_109":54},"tree",[63,64],"file","contents",[32,33],"upstream","pull","ahead","behind","envVars",{"_34":57,"_13":58,"_37":59,"_39":-5,"_40":41,"_42":43,"_44":45,"_46":60,"_17":48,"_49":24,"_51":61,"_53":54,"_55":-5,"_18":62},{"_34":35,"_13":36,"_37":38,"_39":-5,"_40":41,"_42":43,"_44":45,"_46":47,"_17":48,"_49":50,"_51":52,"_53":54,"_55":-5,"_18":56},"id","8eefff60-27b2-11f0-aecd-569c3dd06744","main.tsx","fileId","8eefffec-27b2-11f0-aecd-569c3dd06744","parentId","branchId","8eed82e4-27b2-11f0-aecd-569c3dd06744","branchVersion",1,"latest",true,"createdAt",["D",1722443707656],0,"fileType","http","content","import { extractValInfo } from \"https://esm.town/v/pomdtr/extractValInfo\";\nimport { ComputeJSON, ComputeText, GenerateImage, sb, StableVideoDiffusion, Substrate } from \"npm:substrate\";\nimport { z } from \"npm:zod\";\nimport { zodToJsonSchema } from \"npm:zod-to-json-schema\";\n\nconst substrate = new Substrate({ apiKey: Deno.env.get(\"SUBSTRATE_API_KEY\") });\n\nconst topic = \"a traveler lost in a rainforest\";\nconst story = new ComputeText({\n prompt: `tell me a story about ${topic}`,\n});\nstory.cache_age = 60 * 60 * 24 * 7;\nconst sentencesSchema = z.object({\n sentences: z.array(z.string()).length(5).describe(\"5 short sentences condensing the story\"),\n imageDescriptions: z\n .array(z.string())\n .length(5)\n .describe(\n \"5 descriptions of images to accompany each sentence. Describe simple images that depict the setting of each scene. Do not include characters, just the background. Return just the description, no prefix or explanation.\",\n ),\n});\nconst sentences = new ComputeJSON({\n prompt: sb\n .interpolate`We're making a storyboard. Generate 5 short sentences condensing the story about ${topic}, along with descriptions of images to accompany each sentence.`,\n json_schema: zodToJsonSchema(sentencesSchema),\n});\nsentences.cache_age = 60 * 60 * 24 * 7;\nlet videoNodes = [];\nfor (let i = 0; i < 5; i++) {\n const image = new GenerateImage({\n prompt: sentences.future.json_object.get(\"imageDescriptions\").at(i),\n store: \"hosted\",\n });\n image.cache_age = 60 * 60 * 24 * 7;\n const video = new StableVideoDiffusion({\n image_uri: image.future.image_uri,\n store: \"hosted\",\n motion_bucket_id: 20,\n fps: 10,\n });\n video.cache_age = 60 * 60 * 24 * 7;\n videoNodes.push(video);\n}\n\nexport default async function(req: Request): Promise {\n let { readable, writable } = new TransformStream();\n let writer = writable.getWriter();\n const textEncoder = new TextEncoder();\n\n new Promise(async () => {\n writer.write(textEncoder.encode(`\n

Takes about 1 minute

Generating... (0.0s)

\n \n `));\n // Don't run the graph, we'll display the cached result\n // const res = await substrate.run(...videoNodes);\n // const texts = res.get(sentences).json_object.sentences;\n // let gifUrls = [];\n // for (let i = 0; i < 5; i++) {\n // gifUrls.push(res.get(videoNodes[i]).video_uri);\n // }\n // console.log(JSON.stringify(res.get(sentences).json_object, null, 2));\n // console.log(JSON.stringify(gifUrls, null, 2));\n // Display cached result\n const sentencesResult = {\n \"sentences\": [\n \"A traveler sets out on a journey through the dense rainforest.\",\n \"The air is thick with humidity and the canopy overhead blocks out most of the sunlight.\",\n \"The sound of rushing water grows louder as the traveler follows the winding path.\",\n \"A massive waterfall comes into view, cascading down a rocky slope.\",\n \"The roar of the falls subsides as the traveler rounds a bend in the path.\",\n ],\n \"imageDescriptions\": [\n \"A dense jungle with towering trees and vines\",\n \"A misty forest with ferns and moss-covered tree trunks\",\n \"A narrow path leading to a fast-moving river\",\n \"A massive waterfall crashing over a rocky cliff\",\n \"A serene river flowing through a tranquil valley\",\n ],\n };\n const texts = sentencesResult.sentences;\n let gifUrls = [\n \"https://cdn.substrate.run/u/TdI00FeAB8nzr0Su/d73078011783f5ac37980e47df9d0ee7985fd2d476eed501_1722427247.gif\",\n \"https://cdn.substrate.run/u/TdI00FeAB8nzr0Su/69c79387d16391d3f8c246ccbd694bed55f39d3a60a66fde_1722427247.gif\",\n \"https://cdn.substrate.run/u/TdI00FeAB8nzr0Su/75db479fdc66d185edbf24f7b037257adb98ec7bfe7b10db_1722427248.gif\",\n \"https://cdn.substrate.run/u/TdI00FeAB8nzr0Su/bd26d54a083b540210ac23bc9fd296fc13db9a9edff6718b_1722427271.gif\",\n \"https://cdn.substrate.run/u/TdI00FeAB8nzr0Su/b14849ad8bb9af9c60567d85d37de79c1d634748ed6ad9d4_1722427265.gif\",\n ];\n // Render page\n writer.write(textEncoder.encode(\"\"));\n\n const { htmlUrl } = extractValInfo(import.meta.url);\n let html = `\n\n\n\n \n \n GIF Story | Substrate\n \n\n\n

\n $\"GIF$ \n

\n made with Substrate\n view source on val.town\n

\n \n\n\n`;\n writer.write(textEncoder.encode(html));\n writer.close();\n });\n\n return new Response(readable, {\n headers: {\n \"Content-Type\": \"text/html\",\n },\n });\n}","deleted",false,"label",[36],"8ef01b4e-27b2-11f0-aecd-569c3dd06744","README.md","8ef01bd0-27b2-11f0-aecd-569c3dd06744",["D",1722443707656],"Generates a story and then a storyboard with 5 animated frames.\n\n**Note**: You'll need to fork this example (and un-comment some code) to run it with new input. \n\nCurrently it renders cached output, for demo purposes (running takes 30-60s).\n\n🪩 To fork, [sign up for Substrate](https://substrate.run/signin) to get your own API key and $50 free credits",[58],{"_34":57,"_13":58,"_37":59,"_39":-5,"_40":41,"_42":43,"_44":45,"_46":69,"_17":48,"_49":24,"_51":61,"_53":54,"_55":-5,"_66":70,"_18":71},{"_34":35,"_13":36,"_37":38,"_39":-5,"_40":41,"_42":43,"_44":45,"_46":65,"_17":48,"_49":50,"_51":52,"_53":54,"_55":-5,"_66":67,"_18":68},["D",1722443707656],"children",[],[36],["D",1722443707656],[],[58],"8eed3686-27b2-11f0-aecd-569c3dd06744",["D",1746230830404],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","imageUrl","userId","eac69282-b4bd-4ece-a183-8f0da2549a57","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount","orgId","dabd4b03-0749-4384-93c8-18ef4f1df6ef","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_11":12,"_124":120},"org",{"_11":12,"_118":-5,"_119":120,"_81":82,"_121":122,"_123":54},"branch",{"_17":43,"_13":16,"_34":41,"_110":72,"_111":-5,"_112":-5,"_113":-5,"_114":-5,"_115":-5,"_116":14,"_117":12},"isOwned","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","displayName","avatar","https://images.clerk.dev/oauth_github/img_2OIOCeem3T4M3jAJyzdQ0FnG5PW.png","tier","free","canRestrictVals","profileImageUrl","adoptOrgId",{"_34":72,"_13":14,"_46":162,"_74":-5,"_75":54,"_76":77,"_78":77,"_79":-5,"_80":-5,"_81":82,"_83":38,"_84":45,"_85":-5,"_86":-5,"_87":48,"_88":89,"_90":-5,"_91":-5,"_92":-5,"_93":-5,"_94":95,"_96":95,"_97":98,"_99":98,"_100":98,"_101":95,"_102":95,"_103":163,"_105":164,"_107":165,"_109":54},[156,157],"files",[156,157],"counts",{"_147":48,"_148":43,"_149":48,"_31":150,"_151":152},[143,144],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_34":57,"_13":58,"_37":59,"_39":-5,"_40":41,"_42":43,"_44":45,"_46":60,"_17":48,"_49":24,"_51":61,"_53":54,"_55":-5,"_18":146},{"_34":35,"_13":36,"_37":38,"_39":-5,"_40":41,"_42":43,"_44":45,"_46":47,"_17":48,"_49":50,"_51":52,"_53":54,"_55":-5,"_18":145},[36],[58],"pulls","branches","forks",{"_153":48,"_155":48},"connections",{"_153":48,"_154":48},"count","unfilledCount","emptyCount",{"_34":57,"_13":58,"_37":59,"_39":-5,"_40":41,"_42":43,"_44":45,"_46":69,"_17":48,"_49":24,"_51":61,"_53":54,"_55":-5,"_66":160,"_18":161},{"_34":35,"_13":36,"_37":38,"_39":-5,"_40":41,"_42":43,"_44":45,"_46":65,"_17":48,"_49":50,"_51":52,"_53":54,"_55":-5,"_66":158,"_18":159},[],[36],[],[58],["D",1746230830404],{"_11":12,"_124":120},{"_11":12,"_118":-5,"_119":120,"_81":82,"_121":122,"_123":54},{"_17":43,"_13":16,"_34":41,"_110":72,"_111":-5,"_112":-5,"_113":-5,"_114":-5,"_115":-5,"_116":14,"_117":12},"ctx",{"_103":-5,"_140":199,"_200":201,"_202":203,"_204":54,"_205":54,"_206":54,"_207":45,"_208":-5,"_209":-7,"_210":-7,"_211":48,"_212":54,"_213":54,"_214":-5,"_215":54,"_216":54,"_217":54,"_218":-5},"ENV",{"_170":171,"_172":173,"_174":16,"_175":176,"_177":178,"_179":180,"_181":182,"_183":184,"_185":186,"_187":188,"_189":190,"_191":192,"_193":194,"_195":196,"_197":198},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","71c1b20804b3232a7e513be260cfffc1932a9e97","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"]

Code