[{"_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",{"_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":25,"_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":-5,"_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",9,"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","088ddb08-26cd-11f0-9439-569c3dd06744","name","fileType","script","content","import { PuppeteerDeno } from \"https://deno.land/x/puppeteer@16.2.0/src/deno/Puppeteer.ts\";\nimport { blob } from \"https://esm.town/v/std/blob\";\nimport Steel from \"npm:steel-sdk\";\n\nconst puppeteer = new PuppeteerDeno({\n productName: \"chrome\",\n});\n\nconst STEEL_API_KEY = Deno.env.get(\"STEEL_API_KEY\");\n// Initialize Steel client with the API key from environment variables\nconst client = new Steel({\n steelAPIKey: STEEL_API_KEY,\n});\n\nfunction calculateChecksum(buffer: ArrayBuffer): string {\n const data = new Uint8Array(buffer);\n let hash = 0;\n for (let i = 0; i < data.length; i++) {\n const byte = data[i];\n hash = ((hash << 5) - hash) + byte;\n hash = hash & hash; // Convert to 32-bit integer\n }\n return hash.toString(16);\n}\n\nfunction generateImageUrl(filename: string): string {\n const valUrl = import.meta.url.replace(\"esm.town\", \"val.town\");\n return `${valUrl}/blob/${filename}`;\n}\n\nasync function main() {\n let session;\n let browser;\n const uploadedImages: string[] = [];\n\n try {\n console.log(\"Creating Steel session...\");\n\n session = await client.sessions.create({});\n\n console.log(`Session created successfully with Session ID: ${session.id}.\nYou can view the session live at ${session.sessionViewerUrl}\n `);\n\n browser = await puppeteer.connect({\n browserWSEndpoint: `wss://connect.steel.dev?apiKey=${STEEL_API_KEY}&sessionId=${session.id}`,\n });\n\n console.log(\"Connected to browser via Puppeteer\");\n\n const page = await browser.newPage();\n\n console.log(\"Navigating to DocSend...\");\n await page.goto(\"https://docsend.com/view/x2s52bcbd2ksadvz\", {\n waitUntil: \"networkidle0\",\n });\n\n let slideNumber = 1;\n let previousChecksum = \"\";\n\n while (true) {\n // Wait for the slide to load\n await page.waitForTimeout(2000);\n\n // Take a screenshot\n const screenshot = await page.screenshot({ fullPage: true });\n\n // Calculate checksum\n const checksum = calculateChecksum(screenshot);\n\n // If the checksum is the same as the previous one, we've reached the end\n if (checksum === previousChecksum) {\n console.log(\"Reached the end of the slides\");\n break;\n }\n\n // Upload screenshot to blob storage\n const filename = `slide_${slideNumber}.png`;\n await blob.set(filename, screenshot);\n console.log(`Uploaded ${filename} to blob storage`);\n\n // Add image URL to the list\n uploadedImages.push(generateImageUrl(filename));\n\n // Move to the next slide\n await page.keyboard.press(\"ArrowRight\");\n\n slideNumber++;\n previousChecksum = checksum;\n }\n\n console.log(`Captured and uploaded ${slideNumber - 1} slides`);\n } catch (error) {\n console.error(\"An error occurred:\", error);\n } finally {\n if (browser) {\n await browser.close();\n console.log(\"Browser closed\");\n }\n\n if (session) {\n console.log(\"Releasing session...\");\n await client.sessions.release(session.id);\n console.log(\"Session released\");\n }\n\n console.log(\"Done!\");\n\n // Generate response with all uploaded image URLs\n const imageLinks = uploadedImages.map((url, index) => `

`).join(\"\");\n const response = `\n \n \n Uploaded Slides\n \n \n

Uploaded Slides

\n ${imageLinks}\n \n \n \n `;\n\n return new Response(response, {\n headers: { \"Content-Type\": \"text/html\" },\n });\n }\n}\n\n// Run the script\nexport default main;","import { PuppeteerDeno } from \"https://deno.land/x/puppeteer@16.2.0/src/deno/Puppeteer.ts\";\nimport { blob } from \"https://esm.town/v/std/blob\";\nimport Steel from \"npm:steel-sdk\";\n\nconst puppeteer = new PuppeteerDeno({\n productName: \"chrome\",\n});\n\nconst STEEL_API_KEY = Deno.env.get(\"STEEL_API_KEY\");\n// Initialize Steel client with the API key from environment variables\nconst client = new Steel({\n steelAPIKey: STEEL_API_KEY,\n});\n\nfunction calculateChecksum(buffer: ArrayBuffer): string {\n const data = new Uint8Array(buffer);\n let hash = 0;\n for (let i = 0; i < data.length; i++) {\n const byte = data[i];\n hash = ((hash << 5) - hash) + byte;\n hash = hash & hash; // Convert to 32-bit integer\n }\n return hash.toString(16);\n}\n\nfunction generateImageUrl(filename: string): string {\n const valUrl = import.meta.url.replace(\"esm.town\", \"val.town\");\n return `${valUrl}/blob/${filename}`;\n}\n\nasync function main() {\n let session;\n let browser;\n const uploadedImages: string[] = [];\n\n try {\n console.log(\"Creating Steel session...\");\n\n session = await client.sessions.create({});\n\n console.log(`Session created successfully with Session ID: ${session.id}.\nYou can view the session live at ${session.sessionViewerUrl}\n `);\n\n browser = await puppeteer.connect({\n browserWSEndpoint: `wss://connect.steel.dev?apiKey=${STEEL_API_KEY}&sessionId=${session.id}`,\n });\n\n console.log(\"Connected to browser via Puppeteer\");\n\n const page = await browser.newPage();\n\n console.log(\"Navigating to DocSend...\");\n await page.goto(\"https://docsend.com/view/x2s52bcbd2ksadvz\", {\n waitUntil: \"networkidle0\",\n });\n\n let slideNumber = 1;\n let previousChecksum = \"\";\n\n while (true) {\n // Wait for the slide to load\n await page.waitForTimeout(2000);\n\n // Take a screenshot\n const screenshot = await page.screenshot({ fullPage: true });\n\n // Calculate checksum\n const checksum = calculateChecksum(screenshot);\n\n // If the checksum is the same as the previous one, we've reached the end\n if (checksum === previousChecksum) {\n console.log(\"Reached the end of the slides\");\n break;\n }\n\n // Upload screenshot to blob storage\n const filename = `slide_${slideNumber}.png`;\n await blob.set(filename, screenshot);\n console.log(`Uploaded ${filename} to blob storage`);\n\n // Add image URL to the list\n uploadedImages.push(generateImageUrl(filename));\n\n // Move to the next slide\n await page.keyboard.press(\"ArrowRight\");\n\n slideNumber++;\n previousChecksum = checksum;\n }\n\n console.log(`Captured and uploaded ${slideNumber - 1} slides`);\n } catch (error) {\n console.error(\"An error occurred:\", error);\n } finally {\n if (browser) {\n await browser.close();\n console.log(\"Browser closed\");\n }\n\n if (session) {\n console.log(\"Releasing session...\");\n await client.sessions.release(session.id);\n console.log(\"Session released\");\n }\n\n console.log(\"Done!\");\n\n // Generate response with all uploaded image URLs\n const imageLinks = uploadedImages.map((url, index) =>\n `

Slide ${index + 1}

`\n ).join(\"\");\n const response = `\n \n \n Uploaded Slides\n \n \n

Uploaded Slides

\n ${imageLinks}\n \n \n \n `;\n\n return new Response(response, {\n headers: { \"Content-Type\": \"text/html\" },\n });\n }\n}\n\n// Run the script\nexport default main;","createdAt",["D",1744911641325],"branchVersion","branchId","088b33c6-26cd-11f0-9439-569c3dd06744","id","088ad638-26cd-11f0-9439-569c3dd06744","steel_puppeteer_starter",["D",1746132250193],"deletedAt","legacyEnvVars",true,"privacy","public","httpPrivacy","description","imageUrl","1167e096-63d9-481f-b740-997fcea83426","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount",0,"orgId","8433e007-847e-4c91-8408-c94f14e035f8","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":61,"_90":51,"_91":92,"_93":94,"_95":45,"_96":97},"isOwned",14,"main","projectId","forkedBranchId","cc5faa20-27a9-11f0-9edc-569c3dd06744","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","cc5f2cee-27a9-11f0-9edc-569c3dd06744","forkedProjectOrgId","c9f2d855-f640-43aa-84ce-56e4a8b92c7b","projectName","userHandle","dthyresson","handle","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18yY2VObmZYclBVbjhpdnlQQkROeEIycWViSTYifQ","tier","pro","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_43":44,"_32":45,"_38":173,"_47":-5,"_48":49,"_50":51,"_52":51,"_53":-5,"_54":-5,"_18":55,"_56":-5,"_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":174,"_79":175,"_81":176,"_83":25},"tree",[164,165],"files",[164,165],"counts",{"_154":61,"_155":150,"_156":61,"_157":158,"_159":160},"contents",[138,139],"upstreamProject",{"_43":92,"_32":45,"_53":-5,"_54":-5,"_50":51,"_77":136},"upstreamBranch",{"_43":88,"_38":130,"_131":132,"_32":85,"_86":92,"_13":133,"_87":-5,"_89":-5,"_134":-5,"_47":-5,"_83":25,"_50":51,"_96":135,"_62":94,"_95":45},"emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},["D",1746227068021],"updatedAt",["D",1741365651680],2,"lockfileKey","steel",{"_98":135,"_105":137},"https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/164b1f7b-1d9a-46a5-a593-19671badba00/square512?exp=1789671803&sig=3fb0f7b016b73f6f429a89051b1ada363b5c4ea63eebf97205cc319d44398373",{"_43":147,"_32":148,"_30":149,"_141":-5,"_41":42,"_40":150,"_142":49,"_38":151,"_13":61,"_33":20,"_35":152,"_24":25,"_145":-5,"_27":153},{"_43":140,"_32":28,"_30":31,"_141":-5,"_41":42,"_40":14,"_142":25,"_38":143,"_13":144,"_33":34,"_35":37,"_24":25,"_145":-5,"_27":146},"08d77ad8-26cd-11f0-9439-569c3dd06744","parentId","latest",["D",1744911641325],8,"label",[28],"088de1e8-26cd-11f0-9439-569c3dd06744","README.md","088de260-26cd-11f0-9439-569c3dd06744",1,["D",1744910983069],"# Steel + Puppeteer Starter\n\nThis template shows you how to use Steel with Puppeteer\nto run browser automations in the cloud on Val Town.\nIt includes session management, error handling, \nand a basic example you can customize. This starter\ntemplated was ported from \n[this one on Github](https://github.com/steel-dev/steel-cookbook/blob/ccc97a574b0181a10b813a882c38378cc832ed2d/examples/steel-puppeteer-starter/README.md).\n\n## Quick start\n\nThe script shows you how to:\n\n1. Create and manage a Steel browser session\n2. Connect Puppeteer to the session\n3. Navigate to a website (Hacker News in this example)\n4. Extract data from the page (top 5 stories)\n5. Handle errors and cleanup properly\n6. View your live session in Steel's session viewer\n\nTo run it:\n\n1. Get your free Steel API key at https://app.steel.dev/settings/api-keys\n2. Add it to your [Val Town Environment Variables](https://www.val.town/settings/environment-variables) as `STEEL_API_KEY`\n3. Click `Fork` on this val\n4. Click `Run` on this val\n\n## Writing your automation\n\nFind this section in the script:\n\n```ts\n// ============================================================\n// Your Automations Go Here!\n// ============================================================\n\n// Example automation (you can delete this)\nawait page.goto('https://news.ycombinator.com');\n// ... rest of example code\n```\n\nYou can replace the code here with whatever automation scripts you want to run.\n\n## Configuration\n\nThe template includes common Steel configurations you can enable:\n\n```ts\nconst session = await client.sessions.create({\n useProxy: true, // Use Steel's proxy network\n solveCaptcha: true, // Enable CAPTCHA solving\n sessionTimeout: 1800000, // 30 minute timeout (default: 15 mins)\n userAgent: 'custom-ua', // Custom User-Agent\n});\n```\n\n## Error handling\n\nThe template includes error handling and cleanup:\n\n```typescript\ntry {\n // Your automation code\n} finally {\n // Cleanup runs even if there's an error\n if (browser) await browser.close();\n if (session) await client.sessions.release(session.id);\n}\n```\n\n## Support\n\n- [Steel Documentation](https://docs.steel.dev)\n- [API Reference](https://docs.steel.dev/api-reference)\n- [Discord Community](https://discord.gg/gPpvhNvc5R)",[148],"pulls","branches","forks","envVars",{"_161":61,"_163":61},"connections",{"_161":61,"_162":61},"count","unfilledCount","emptyCount",{"_43":147,"_32":148,"_30":149,"_141":-5,"_41":42,"_40":150,"_142":49,"_38":170,"_13":61,"_33":20,"_35":152,"_24":25,"_145":-5,"_167":171,"_27":172},{"_43":140,"_32":28,"_30":31,"_141":-5,"_41":42,"_40":14,"_142":25,"_38":166,"_13":144,"_33":34,"_35":37,"_24":25,"_145":-5,"_167":168,"_27":169},["D",1744911641325],"children",[],[28],["D",1744910983069],[],[148],["D",1746132250193],{"_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":61,"_90":51,"_91":92,"_93":94,"_95":45,"_96":97},"ctx",{"_77":-5,"_127":210,"_211":212,"_213":214,"_215":25,"_216":25,"_217":25,"_218":49,"_219":-5,"_220":-7,"_221":-7,"_222":61,"_223":25,"_224":25,"_225":-5,"_226":25,"_227":25,"_228":25,"_229":-5},"ENV",{"_181":182,"_183":184,"_185":85,"_186":187,"_188":189,"_190":191,"_192":193,"_194":195,"_196":197,"_198":199,"_200":201,"_202":203,"_204":205,"_206":207,"_208":209},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","a3e067d4463eea85f6334f8e583e8516ae58c4f6","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 · v9