[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_390":391,"_392":393},"routes/_app.x.$handle.$name",{"_102":101,"_32":46,"_110":88,"_27":111,"_13":14,"_112":-5,"_11":113,"_114":115,"_116":117,"_118":119,"_120":121,"_20":-5,"_122":123,"_124":125,"_126":25,"_127":128,"_129":59,"_130":-5,"_131":-5,"_132":133},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_44":45,"_32":46,"_39":47,"_48":-5,"_49":25,"_50":51,"_52":51,"_53":-5,"_54":-5,"_18":55,"_56":57,"_58":59,"_60":-5,"_61":62,"_63":64,"_65":66,"_67":-5,"_68":-5,"_69":-5,"_70":-5,"_71":72,"_73":72,"_74":75,"_76":75,"_77":75,"_78":72,"_79":72,"_80":81,"_82":83,"_84":85,"_86":25},"version",573,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":23,"_24":25,"_26":25,"_27":28,"_29":28},"file",{"_30":31,"_32":33,"_34":35,"_36":38,"_39":40,"_41":14,"_42":43,"_24":25},"previous",{"_30":31,"_32":33,"_34":35,"_36":37},"deleted",false,"deletedHere","path","backend/ai/inputer.ts","latestPath","fileId","c2424644-42f0-11f0-ae4f-76b3cceeab13","name","inputer.ts","fileType","script","content","import { Browser } from \"npm:puppeteer-core\";\nimport { generateObject } from \"npm:ai\";\nimport { google } from \"npm:@ai-sdk/google\";\nimport { z } from \"npm:zod\";\n\nexport class Inputer {\n private elementId: string;\n private page: string;\n\n constructor(private browser: Browser, elementId: string, page: string) {\n this.elementId = elementId;\n this.page = page;\n }\n\n public static of(browser: Browser, elementId: string, page: string): Inputer {\n return new Inputer(browser, elementId, page);\n }\n\n public async generateQueryFunction() {\n const page = await this.browser.newPage();\n await page.goto(this.page);\n\n const elementInfo = await page.evaluate((elementId) => {\n const el = document.querySelector(`[data-element-id=\"${elementId}\"]`);\n\n if (!el) {\n throw new Error(\"Element not found by element ID\");\n }\n\n return {\n tagName: el.tagName,\n id: el.id,\n classes: Array.from(el.classList),\n attributes: Array.from(el.attributes).reduce((acc, attr: any) => {\n acc[attr.name] = attr.value;\n return acc;\n }, {}),\n textContent: el.textContent?.trim() || \"\",\n value: (el as HTMLInputElement).value || \"\",\n type: (el as HTMLInputElement).type || \"\",\n isDisabled: (el as HTMLInputElement).disabled || false,\n isVisible: el instanceof HTMLElement\n ? el.offsetWidth > 0 && el.offsetHeight > 0\n : true,\n };\n }, this.elementId);\n console.log(\"Element info:\", elementInfo);\n\n const { object: generatedFunction } = await generateObject({\n model: google(\"gemini-1.5-pro\"),\n schema: z.object({\n functionCode: z.string().describe(\n \"JavaScript function code that will interact with the element\",\n ),\n inputArgSchema: z.string().describe(\n \"JSON schema for the input data that the function expects\",\n ),\n }),\n prompt: `\n You are a specialized automation engineer. Your task is to create a JavaScript function that will\n interact with a specific element on a webpage.\n\n # ELEMENT INFORMATION\n Element ID: \\`${this.elementId}\\`\n Element details: ${JSON.stringify(elementInfo, null, 2)}\n\n # REQUIREMENTS\n Create an async JavaScript function that:\n 1. Takes two parameters: 'page' (a Puppeteer Page object) and 'inputData' (an object containing input values)\n 2. Uses the element's data-element-id attribute to find and interact with the element\n 3. Applies the values from inputData appropriately based on the element type\n 4. Returns any useful output (e.g., success status, validation messages, or resulting data)\n 5. Handles errors gracefully\n\n # IMPORTANT NOTES\n - The function should work with Puppeteer's Page API\n - Find the element using: page.$('[data-element-id=\"${this.elementId}\"]')\n - Use page.waitForSelector() for waiting\n - Use page.type(), page.click(), page.select() etc. for interactions\n - Do not use any external libraries beyond Puppeteer\n - Make sure to handle different element types appropriately (input, select, button, etc.)\n - Include appropriate waits and error handling\n - Return meaningful output that would be useful to the caller\n\n # EXAMPLE FORMAT (adapt based on the actual element type):\n \\`\\`\\`javascript\n async function(page, inputData) {\n try {\n // Find the element by its data attribute\n const selector = '[data-element-id=\"${this.elementId}\"]';\n \n // Wait for element to be ready\n await page.waitForSelector(selector, { timeout: 5000 });\n\n // Interact with the element based on its type\n // ...code to interact with the element...\n\n // Return useful information\n return {\n success: true,\n data: {\n // Any relevant data\n }\n };\n } catch (error) {\n return {\n success: false,\n error: error.toString()\n };\n }\n }\n \\`\\`\\`\n\n Generate ONLY the function body code that would be used between the function() { } brackets.\n Make it as specific as possible to this particular element and its behavior.\n IMPORTANT: Use the data-element-id attribute approach shown in the example with Puppeteer syntax.\n `,\n });\n\n return {\n code: generatedFunction.functionCode,\n inputSchema: generatedFunction.inputArgSchema,\n };\n }\n}\n\nexport async function generateQueryFunction(\n browser: Browser,\n selectCode: string,\n page: string,\n) {\n return await Inputer\n .of(browser, elementId, page)\n .generateQueryFunction();\n}\n","import { Browser } from \"npm:puppeteer-core\";\nimport { generateObject } from \"npm:ai\";\nimport { google } from \"npm:@ai-sdk/google\";\nimport { z } from \"npm:zod\";\n\nexport class Inputer {\n private elementId: string;\n private page: string;\n\n constructor(private browser: Browser, elementId: string, page: string) {\n this.elementId = elementId;\n this.page = page;\n }\n\n public static of(browser: Browser, elementId: string, page: string): Inputer {\n return new Inputer(browser, elementId, page);\n }\n\n public async generateQueryFunction() {\n const page = await this.browser.newPage();\n await page.goto(this.page);\n\n const elementInfo = await page.evaluate((elementId) => {\n const el = document.querySelector(`[data-element-id=\"${elementId}\"]`);\n\n if (!el) {\n throw new Error(\"Element not found by element ID\");\n }\n\n return {\n tagName: el.tagName,\n id: el.id,\n classes: Array.from(el.classList),\n attributes: Array.from(el.attributes).reduce((acc, attr: any) => {\n acc[attr.name] = attr.value;\n return acc;\n }, {}),\n textContent: el.textContent?.trim() || \"\",\n value: (el as HTMLInputElement).value || \"\",\n type: (el as HTMLInputElement).type || \"\",\n isDisabled: (el as HTMLInputElement).disabled || false,\n isVisible: el instanceof HTMLElement\n ? el.offsetWidth > 0 && el.offsetHeight > 0\n : true,\n };\n }, this.elementId);\n console.log(\"Element info:\", elementInfo);\n\n const { object: generatedFunction } = await generateObject({\n model: google(\"gemini-1.5-pro\"),\n schema: z.object({\n functionCode: z.string().describe(\n \"JavaScript function code that will interact with the element\",\n ),\n inputArgSchema: z.string().describe(\n \"JSON schema for the input data that the function expects\",\n ),\n }),\n prompt: `\n You are a specialized automation engineer. Your task is to create a JavaScript function that will\n interact with a specific element on a webpage.\n\n # ELEMENT INFORMATION\n Element ID: \\`${this.elementId}\\`\n Element details: ${JSON.stringify(elementInfo, null, 2)}\n\n # REQUIREMENTS\n Create an async JavaScript function that:\n 1. Takes two parameters: 'page' (a Puppeteer Page object) and 'inputData' (an object containing input values)\n 2. Uses the element's data-element-id attribute to find and interact with the element\n 3. Applies the values from inputData appropriately based on the element type\n 4. Returns any useful output (e.g., success status, validation messages, or resulting data)\n 5. Handles errors gracefully\n\n # IMPORTANT NOTES\n - The function should work with Puppeteer's Page API\n - Find the element using: page.$('[data-element-id=\"${this.elementId}\"]')\n - Use page.waitForSelector() for waiting\n - Use page.type(), page.click(), page.select() etc. for interactions\n - Do not use any external libraries beyond Puppeteer\n - Make sure to handle different element types appropriately (input, select, button, etc.)\n - Include appropriate waits and error handling\n - Return meaningful output that would be useful to the caller\n\n # EXAMPLE FORMAT (adapt based on the actual element type):\n \\`\\`\\`javascript\n async function(page, inputData) {\n try {\n // Find the element by its data attribute\n const selector = '[data-element-id=\"${this.elementId}\"]';\n \n // Wait for element to be ready\n await page.waitForSelector(selector, { timeout: 5000 });\n\n // Interact with the element based on its type\n // ...code to interact with the element...\n\n // Return useful information\n return {\n success: true,\n data: {\n // Any relevant data\n }\n };\n } catch (error) {\n return {\n success: false,\n error: error.toString()\n };\n }\n }\n \\`\\`\\`\n\n Generate ONLY the function body code that would be used between the function() { } brackets.\n Make it as specific as possible to this particular element and its behavior.\n IMPORTANT: Use the data-element-id attribute approach shown in the example with Puppeteer syntax.\n `,\n });\n\n return {\n code: generatedFunction.functionCode,\n inputSchema: generatedFunction.inputArgSchema,\n };\n }\n}\n\nexport async function generateQueryFunction(\n browser: Browser,\n elementId: string,\n page: string,\n) {\n return await Inputer\n .of(browser, elementId, page)\n .generateQueryFunction();\n}\n","createdAt",["D",1749235973337],"branchVersion","branchId","2e2fb5a4-08c6-11f0-95cf-569c3dd06744","id","2e2c4c02-08c6-11f0-95cf-569c3dd06744","Apiify",["D",1742830771958],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","imageUrl","4555dd0e-707e-4444-acd3-049d206eb1db","pinnedFileId","76971c3b-c94e-4b49-b895-6b9840c6b2e4","pinPreview",true,"pinMigrated","screenshotVersion",601,"likeCount",0,"orgId","bced381e-9ab2-4b55-929d-e7c5064f7f38","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_102":101,"_109":105},"org",{"_102":101,"_103":-5,"_104":105,"_18":55,"_106":107,"_108":25},"branch",{"_13":87,"_32":88,"_44":43,"_89":45,"_90":91,"_92":93,"_94":51,"_95":96,"_97":98,"_99":46,"_100":101},"isOwned",608,"main","projectId","forkedBranchId","961078ea-f528-11ef-aa68-569c3dd06744","forkedBranchVersion",38,"forkedProjectPrivacy","forkedProjectId","96102714-f528-11ef-aa68-569c3dd06744","forkedProjectOrgId","019aa807-52c2-709c-928b-2029bae9a558","projectName","userHandle","wolf","handle","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvdXBsb2FkZWQvaW1nXzJvVXpPVUZRTjZGTGd2Q2t4c0RRdFpNZWJ5UCJ9","tier","pro","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_44":45,"_32":46,"_39":386,"_48":-5,"_49":25,"_50":51,"_52":51,"_53":-5,"_54":-5,"_18":55,"_56":57,"_58":59,"_60":-5,"_61":62,"_63":64,"_65":66,"_67":-5,"_68":-5,"_69":-5,"_70":-5,"_71":72,"_73":72,"_74":75,"_76":75,"_77":75,"_78":72,"_79":72,"_80":387,"_82":388,"_84":389,"_86":25},"tree",[207,221,226,227,228,229],"files",[207,208,209,210,211,212,213,214,215,216,217,218,219,220,221,222,223,224,225,226,227,228,229],"counts",{"_195":64,"_196":197,"_198":64,"_199":200,"_201":202},"contents",[146,147,148,149,150,151],"upstreamProject",{"_44":96,"_32":141,"_53":142,"_54":143,"_50":51,"_80":144},"upstreamBranch",{"_44":91,"_39":134,"_135":136,"_32":88,"_89":96,"_13":137,"_90":-5,"_92":-5,"_138":139,"_48":-5,"_86":25,"_50":51,"_100":140,"_65":98,"_99":141},"emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},["D",1740674013689],"updatedAt",["D",1785420707976],91,"lockfileKey","1785420708123-esm.town_v_templates_react-hono-starter@91-main","templates","react-hono-starter","Starter template with client-side React & Hono server","https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/64dc00cc-94d9-47dd-81b1-dde02610d900/square512?exp=1789563599&sig=c3b06339283e4bc07165fa54c09036aa25cea7ac6108dec2f68b1acc60fad95f",{"_102":140,"_109":145},"https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/129cab32-3bd7-4c3e-f39b-f12900c76100/square512?exp=1789563599&sig=a969511699ef574c42d646a130422bcd8ffa020e1e59bd8fb5bde6db2cea72c1",{"_44":190,"_32":191,"_30":192,"_155":-5,"_42":43,"_41":167,"_157":59,"_39":193,"_13":64,"_34":188,"_36":-5,"_24":25,"_160":-5,"_27":194},{"_44":184,"_32":185,"_30":186,"_155":-5,"_42":43,"_41":167,"_157":59,"_39":187,"_13":64,"_34":188,"_36":-5,"_24":25,"_160":-5,"_27":189},{"_44":177,"_32":178,"_30":179,"_155":-5,"_42":43,"_41":180,"_157":59,"_39":181,"_13":64,"_34":20,"_36":182,"_24":25,"_160":-5,"_27":183},{"_44":170,"_32":171,"_30":172,"_155":-5,"_42":43,"_41":173,"_157":25,"_39":174,"_13":167,"_34":20,"_36":175,"_24":25,"_160":-5,"_27":176},{"_44":162,"_32":163,"_30":164,"_155":-5,"_42":43,"_41":165,"_157":59,"_39":166,"_13":167,"_34":20,"_36":168,"_24":25,"_160":-5,"_27":169},{"_44":152,"_32":153,"_30":154,"_155":-5,"_42":43,"_41":156,"_157":59,"_39":158,"_13":64,"_34":20,"_36":159,"_24":25,"_160":-5,"_27":161},"37991c82-4306-11f0-9354-76b3cceeab13","versions.md","37991d72-4306-11f0-9354-76b3cceeab13","parentId",564,"latest",["D",1749235443007],"427","label",[153],"fa979388-4303-11f0-bbab-76b3cceeab13","deno.json","6d80bfb8-42dd-11f0-828a-76b3cceeab13",531,["D",1749234481656],1,"{\n \"$schema\": \"https://raw.githubusercontent.com/denoland/deno/348900b8b79f4a434cab4c74b3bc8d4d2fa8ee74/cli/schemas/config-file.v1.json\",\n \"lock\": false,\n \"compilerOptions\": {\n \"noImplicitAny\": false,\n \"strict\": false,\n \"types\": [\n \"https://www.val.town/types/valtown.d.ts\"\n ],\n \"lib\": [\n \"dom\",\n \"dom.iterable\",\n \"dom.asynciterable\",\n \"deno.ns\",\n \"deno.unstable\"\n ]\n },\n \"lint\": {\n \"files\": {\n \"include\": [\n \"deno:/https/esm.town/**/*\"\n ]\n },\n \"rules\": {\n \"exclude\": [\n \"no-explicit-any\"\n ]\n }\n },\n \"node_modules_dir\": false,\n \"experimental\": {\n \"unstable-node-globals\": true,\n \"unstable-temporal\": true,\n \"unstable-worker-options\": true,\n \"unstable-sloppy-imports\": true\n }\n}\n",[163],"fa899a08-4303-11f0-96f2-76b3cceeab13","README.md","b955ae38-8d6a-4999-885a-f02401a5a57c",529,["D",1749234481569],"# React Hono Starter\n\nThis app is a starter template for client-side React and server-side Hono.\n\n- **Remix** this starter template on the top right to get started.\n\n- The **entrypoint** is `/backend/index.ts`. That's the backend HTTP server,\n which also serves the all the frontend assets.\n\n- The **client-side entrypoint** is `/frontend/index.html`, which in turn\n imports `/frontend/index.tsx`, which in turn imports the React app from\n `/frontend/components/App.tsx`.\n\n[React Hono Example](https://www.val.town/x/stevekrouse/reactHonoExample) is a\nfuller featured example project, with a SQLite database table, queries,\nclient-side CSS and a favicon, and some shared code that runs on both client and\nserver.\n",[171],"6d774f0a-42dd-11f0-8567-76b3cceeab13",".vtignore","6d774fbe-42dd-11f0-8567-76b3cceeab13",397,["D",1749217924014],".git\n.vscode\n.cursorrules\n.DS_Store\nnode_modules\nvendor",[178],"2e31f134-08c6-11f0-95cf-569c3dd06744","frontend","ace2be34-3b25-41f0-98a9-deaf2a37046f",["D",1742830771958],"directory",[185],"2e31d258-08c6-11f0-95cf-569c3dd06744","backend","c42583f7-b9a9-4128-8e16-b83c81558d23",["D",1742830771958],[191],"pulls","branches",2,"forks","envVars",{"_203":205,"_206":64},"connections",{"_203":64,"_204":64},"count","unfilledCount",3,"emptyCount",{"_44":190,"_32":191,"_30":192,"_155":-5,"_42":43,"_41":167,"_157":59,"_39":383,"_13":64,"_34":188,"_36":-5,"_24":25,"_160":-5,"_231":384,"_27":385},{"_44":378,"_32":345,"_30":339,"_155":192,"_42":43,"_41":379,"_157":59,"_39":380,"_13":64,"_34":188,"_36":-5,"_24":25,"_160":-5,"_231":381,"_27":382},{"_44":369,"_32":370,"_30":371,"_155":339,"_42":43,"_41":372,"_157":59,"_39":373,"_13":374,"_34":35,"_36":375,"_24":25,"_160":-5,"_231":376,"_27":377},{"_44":360,"_32":361,"_30":362,"_155":339,"_42":43,"_41":363,"_157":25,"_39":364,"_13":365,"_34":35,"_36":366,"_24":25,"_160":-5,"_231":367,"_27":368},{"_44":351,"_32":352,"_30":353,"_155":339,"_42":43,"_41":354,"_157":59,"_39":355,"_13":356,"_34":35,"_36":357,"_24":25,"_160":-5,"_231":358,"_27":359},{"_44":346,"_32":33,"_30":31,"_155":339,"_42":43,"_41":14,"_157":25,"_39":347,"_13":348,"_34":35,"_36":38,"_24":25,"_160":-5,"_231":349,"_27":350},{"_44":336,"_32":337,"_30":338,"_155":339,"_42":43,"_41":340,"_157":59,"_39":341,"_13":64,"_34":35,"_36":342,"_24":25,"_160":-5,"_231":343,"_27":344},{"_44":331,"_32":313,"_30":307,"_155":192,"_42":43,"_41":332,"_157":59,"_39":333,"_13":64,"_34":188,"_36":-5,"_24":25,"_160":-5,"_231":334,"_27":335},{"_44":322,"_32":323,"_30":324,"_155":307,"_42":43,"_41":325,"_157":59,"_39":326,"_13":327,"_34":35,"_36":328,"_24":25,"_160":-5,"_231":329,"_27":330},{"_44":314,"_32":315,"_30":316,"_155":307,"_42":43,"_41":317,"_157":25,"_39":318,"_13":282,"_34":35,"_36":319,"_24":25,"_160":-5,"_231":320,"_27":321},{"_44":304,"_32":305,"_30":306,"_155":307,"_42":43,"_41":308,"_157":59,"_39":309,"_13":64,"_34":35,"_36":310,"_24":25,"_160":-5,"_231":311,"_27":312},{"_44":296,"_32":297,"_30":298,"_155":192,"_42":43,"_41":299,"_157":59,"_39":300,"_13":64,"_34":35,"_36":301,"_24":25,"_160":-5,"_231":302,"_27":303},{"_44":286,"_32":287,"_30":57,"_155":192,"_42":43,"_41":288,"_157":25,"_39":289,"_13":290,"_34":291,"_36":292,"_24":25,"_160":293,"_231":294,"_27":295},{"_44":277,"_32":278,"_30":279,"_155":192,"_42":43,"_41":280,"_157":59,"_39":281,"_13":282,"_34":35,"_36":283,"_24":25,"_160":-5,"_231":284,"_27":285},{"_44":184,"_32":185,"_30":186,"_155":-5,"_42":43,"_41":167,"_157":59,"_39":274,"_13":64,"_34":188,"_36":-5,"_24":25,"_160":-5,"_231":275,"_27":276},{"_44":270,"_32":269,"_30":262,"_155":186,"_42":43,"_41":167,"_157":59,"_39":271,"_13":64,"_34":188,"_36":-5,"_24":25,"_160":-5,"_231":272,"_27":273},{"_44":259,"_32":260,"_30":261,"_155":262,"_42":43,"_41":263,"_157":25,"_39":264,"_13":265,"_34":35,"_36":266,"_24":25,"_160":-5,"_231":267,"_27":268},{"_44":251,"_32":252,"_30":253,"_155":186,"_42":43,"_41":254,"_157":25,"_39":255,"_13":205,"_34":20,"_36":256,"_24":25,"_160":-5,"_231":257,"_27":258},{"_44":243,"_32":244,"_30":245,"_155":186,"_42":43,"_41":246,"_157":59,"_39":247,"_13":167,"_34":35,"_36":248,"_24":25,"_160":-5,"_231":249,"_27":250},{"_44":177,"_32":178,"_30":179,"_155":-5,"_42":43,"_41":180,"_157":59,"_39":240,"_13":64,"_34":20,"_36":182,"_24":25,"_160":-5,"_231":241,"_27":242},{"_44":170,"_32":171,"_30":172,"_155":-5,"_42":43,"_41":173,"_157":25,"_39":237,"_13":167,"_34":20,"_36":175,"_24":25,"_160":-5,"_231":238,"_27":239},{"_44":162,"_32":163,"_30":164,"_155":-5,"_42":43,"_41":165,"_157":59,"_39":234,"_13":167,"_34":20,"_36":168,"_24":25,"_160":-5,"_231":235,"_27":236},{"_44":152,"_32":153,"_30":154,"_155":-5,"_42":43,"_41":156,"_157":59,"_39":230,"_13":64,"_34":20,"_36":159,"_24":25,"_160":-5,"_231":232,"_27":233},["D",1749235443007],"children",[],[153],["D",1749234481656],[],[163],["D",1749234481569],[],[171],["D",1749217924014],[],[178],"fab66ede-4303-11f0-ae89-76b3cceeab13","index.tsx","74271529-7341-46c2-918a-f4b5c09c2d30",533,["D",1749234481508],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\nimport { App } from \"./components/App.tsx\";\n\nconst root = document.getElementById(\"root\");\nif (!root) {\n throw new Error(\"No root element found\");\n}\n\ncreateRoot(root).render();\n",[],[185,244],"28b6ddc2-4305-11f0-be49-76b3cceeab13","index.html","6d659e0e-bf7f-4f2b-87cf-3df60d4105a6",555,["D",1749234988536],"\n\n \n \n \n React Hono Val Town Starter\n \n \n \n \n

\n \n \n \n\n",[],[185,252],"37158e68-4305-11f0-9339-76b3cceeab13","App.tsx","fec0ec8e-b4f4-4da7-884a-019af796678b","5258744f-43e2-420e-83ea-1ed323ddcf10",556,["D",1749235012645],9,"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState } from \"https://esm.sh/react@18.2.0\";\n\nexport function App() {\n const [url, setUrl] = useState(\"\");\n const [websiteName, setWebsiteName] = useState(\"\");\n const [loading, setLoading] = useState(false);\n const [result, setResult] = useState<\n { success: boolean; valId?: string; error?: string } | null\n >(null);\n\n const handleSubmit = async (e: React.FormEvent) => {\n e.preventDefault();\n if (!url || !websiteName) return;\n\n setLoading(true);\n setResult(null);\n\n try {\n const response = await fetch(\"/api/generate-website\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ url, websiteName }),\n });\n\n const data = await response.json();\n setResult(data);\n } catch {\n setResult({ success: false, error: \"Failed to generate website\" });\n } finally {\n setLoading(false);\n }\n };\n\n return (\n

ApiIfy

Generate a website with API from any URL

\n\n

\n setUrl(e.target.value)}\n placeholder=\"Enter website URL\"\n className=\"w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent\"\n required\n />\n\n setWebsiteName(e.target.value)}\n placeholder=\"Website name\"\n className=\"w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent\"\n required\n />\n\n \n {loading ? \"Generating...\" : \"Generate\"}\n \n \n\n {result && (\n

\n {result.success ? (\n

Success! Website created: {result.valId}

\n \n View Website\n \n

\n ) : (\n

Error: {result.error}

\n )}\n

\n );\n}\n",[],[185,269,260],"components","2e31d64a-08c6-11f0-95cf-569c3dd06744",["D",1742830771958],[223],[185,269],["D",1742830771958],[222,224,225],[185],"3d1a37fc-4303-11f0-a4f6-76b3cceeab13","types.ts","e475d958-4302-11f0-9eda-76b3cceeab13",514,["D",1749234163748],4,"export type ValItemType =\n | \"script\"\n | \"http\"\n | \"email\"\n | \"interval\"\n | \"file\"\n | \"directory\";\n\nexport type ValFileType = Exclude;\n",[],[191,278],"ce34cd08-4306-11f0-8b8f-76b3cceeab13","index.ts",569,["D",1749235695682],40,"http","import { serveFile } from \"https://esm.town/v/std/utils@64-main/index.ts\";\nimport { Hono } from \"npm:hono\";\nimport puppeteer from \"npm:puppeteer-core\";\nimport { generateWebsite } from \"./ai/generator.ts\";\n\nconst app = new Hono();\n\napp.get(\"/\", (_c) => {\n return serveFile(\"/frontend/index.html\", import.meta.url);\n})\n .get(\"/frontend/**/*\", (c) => serveFile(c.req.path, import.meta.url))\n .post(\"/api/generate-website\", async (c) => {\n try {\n const { url, websiteName } = await c.req.json();\n\n if (!url || !websiteName) {\n return c.json(\n { success: false, error: \"URL and website name are required\" },\n 400,\n );\n }\n\n const browser = await puppeteer.connect({\n browserWSEndpoint: `wss://connect.steel.dev?apiKey=${Deno.env.get(\"STEEL_API_KEY\")}`,\n });\n\n try {\n const valId = await generateWebsite(browser, url, websiteName);\n return c.json({ success: true, valId });\n } finally {\n await browser.close();\n }\n } catch (error) {\n console.error(\"Website generation error:\", error);\n return c.json({ success: false, error: error.message }, 500);\n }\n })\n .onError((err, _c) => {\n throw err;\n });\n\nexport default app.fetch;\n","apiify",[],[191,287],"6d7babae-42dd-11f0-93ea-76b3cceeab13","env.ts","6d7bac76-42dd-11f0-93ea-76b3cceeab13",398,["D",1749217924020],"import { envsafe, str } from \"npm:envsafe\";\n\nexport const env = envsafe({\n STEEL_API_KEY: str({}),\n});\n",[],[191,297],"6aec3818-4300-11f0-b8ae-76b3cceeab13","utils.ts","6aec38d6-4300-11f0-b8ae-76b3cceeab13","69f3ef5a-4300-11f0-b5f6-76b3cceeab13",495,["D",1749232952135],"import ValTown from \"jsr:@valtown/sdk\";\nimport { vt } from \"./sdk.ts\";\n\n/**\n * Lists all branches for a given project and finds the ID of the specified branch name.\n *\n * @param {string} projectId - The ID of the project to search branches within.\n * @param {string} branchName - The name of the branch to find.\n * @returns {Promise} - The ID of the specified branch.\n * @throws {Deno.errors.NotFound} If the branch with the specified name is not found.\n */\nexport async function branchIdToBranch(\n projectId: string,\n branchName: string,\n): Promise {\n for await (\n const branch of vt.projects.branches.list(projectId, {\n limit: 100,\n offset: 0,\n })\n ) if (branch.name === branchName) return branch;\n throw new Deno.errors.NotFound(`Branch '${branchName}' not found`);\n}\n\n/**\n * Forks a new branch from a specified source branch within a project.\n *\n * @param {string} projectId - The ID of the project where the branch will be created.\n * @param {string} newBranchName - The name of the new branch to create.\n * @param {string} sourceBranchId - The ID of the branch to fork from.\n * @returns {Promise

Diff · v573