[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_165":166,"_167":168},"routes/_app.x.$handle.$name",{"_95":94,"_32":45,"_103":85,"_27":104,"_13":14,"_105":-5,"_11":106,"_107":108,"_109":110,"_111":112,"_113":114,"_20":-5,"_115":-5,"_116":-5,"_117":25,"_118":119,"_120":57,"_121":-5,"_122":-5,"_123":124},"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":25,"_49":50,"_51":50,"_52":-5,"_53":-5,"_18":54,"_55":31,"_56":57,"_58":57,"_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",4,"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","webpage-analyzer.ts","latestPath","fileId","72a774c6-3457-11f0-a39d-9e149126039e","name","fileType","http","content","import { OpenAI } from \"https://esm.town/v/std/openai\";\n\n/**\n * Webpage Analyzer\n * \n * This Val fetches a webpage, extracts its content, and uses OpenAI to answer\n * questions about the page based on its HTML, CSS, and JavaScript.\n */\n\n// Initialize OpenAI client\nconst openai = new OpenAI();\n\n// Helper function to extract JavaScript from HTML\nfunction extractJavaScript(html: string): string {\n const scriptRegex = /]*>([\\s\\S]*?)<\\/script>/gi;\n let match;\n let scripts = \"\";\n \n while ((match = scriptRegex.exec(html)) !== null) {\n scripts += match[1] + \"\\n\\n\";\n }\n \n return scripts;\n}\n\n// Helper function to extract CSS from HTML\nfunction extractCSS(html: string): string {\n const styleRegex = /]*>([\\s\\S]*?)<\\/style>/gi;\n const linkRegex = /]*rel=[\"']stylesheet[\"'][^>]*href=[\"']([^\"']+)[\"'][^>]*>/gi;\n \n let match;\n let styles = \"\";\n let stylesheetUrls = [];\n \n while ((match = styleRegex.exec(html)) !== null) {\n styles += match[1] + \"\\n\\n\";\n }\n \n while ((match = linkRegex.exec(html)) !== null) {\n stylesheetUrls.push(match[1]);\n }\n \n return {\n inlineStyles: styles,\n stylesheetUrls\n };\n}\n\n// Main handler function\nexport default async function(req: Request): Promise {\n // Only accept POST requests\n if (req.method !== \"POST\") {\n return new Response(\"Method not allowed. Please use POST.\", { status: 405 });\n }\n \n try {\n // Parse the request body\n const body = await req.json();\n const { url, question } = body;\n \n // Validate input\n if (!url) {\n return new Response(\"URL is required\", { status: 400 });\n }\n \n if (!question) {\n return new Response(\"Question is required\", { status: 400 });\n }\n \n // Fetch the webpage\n console.log(`Fetching webpage: ${url}`);\n const response = await fetch(url);\n \n if (!response.ok) {\n return new Response(`Failed to fetch webpage: ${response.status} ${response.statusText}`, \n { status: 400 });\n }\n \n // Get the HTML content\n const html = await response.text();\n \n // Extract JavaScript and CSS\n const javascript = extractJavaScript(html);\n const css = extractCSS(html);\n \n // Prepare content for analysis\n const pageContent = {\n html: html.length > 100000 ? html.substring(0, 100000) + \"... (truncated)\" : html,\n javascript: javascript.length > 50000 ? javascript.substring(0, 50000) + \"... (truncated)\" : javascript,\n css: JSON.stringify(css).length > 50000 ? JSON.stringify(css).substring(0, 50000) + \"... (truncated)\" : JSON.stringify(css)\n };\n \n // Use OpenAI to analyze the content and answer the question\n console.log(`Analyzing webpage and answering question: ${question}`);\n const completion = await openai.chat.completions.create({\n model: \"gpt-4o\",\n messages: [\n {\n role: \"system\",\n content: `You are a webpage analyzer. You'll be given HTML, CSS, and JavaScript from a webpage, \n along with a question about the page. Analyze the content and answer the question as accurately \n as possible based on the provided webpage content. Focus on what's visible and functional on the page.`\n },\n {\n role: \"user\",\n content: `I need information about this webpage:\n \n URL: ${url}\n \n HTML Content:\n \\`\\`\\`html\n ${pageContent.html}\n \\`\\`\\`\n \n JavaScript Content:\n \\`\\`\\`javascript\n ${pageContent.javascript}\n \\`\\`\\`\n \n CSS Information:\n \\`\\`\\`\n ${pageContent.css}\n \\`\\`\\`\n \n Question: ${question}\n \n Please analyze the webpage content and answer my question based on what you can determine from the HTML, CSS, and JavaScript.`\n }\n ],\n temperature: 0.2,\n max_tokens: 1500,\n });\n \n const answer = completion.choices[0].message.content;\n \n // Return the answer\n return new Response(JSON.stringify({\n url,\n question,\n answer\n }), {\n headers: {\n \"Content-Type\": \"application/json\"\n }\n });\n \n } catch (error) {\n console.error(\"Error processing request:\", error);\n return new Response(`Error processing request: ${error.message}`, { status: 500 });\n }\n}","import { OpenAI } from \"https://esm.town/v/std/openai\";\n\n/**\n * Webpage Analyzer\n * \n * This Val fetches a webpage, extracts its content, and uses OpenAI to answer\n * questions about the page based on its HTML, CSS, and JavaScript.\n */\n\n// Initialize OpenAI client\nconst openai = new OpenAI();\n\n// Helper function to extract JavaScript from HTML\nfunction extractJavaScript(html: string): string {\n const scriptRegex = /]*>([\\s\\S]*?)<\\/script>/gi;\n let match;\n let scripts = \"\";\n \n while ((match = scriptRegex.exec(html)) !== null) {\n scripts += match[1] + \"\\n\\n\";\n }\n \n return scripts;\n}\n\n// Helper function to extract CSS from HTML\nfunction extractCSS(html: string): string {\n const styleRegex = /]*>([\\s\\S]*?)<\\/style>/gi;\n const linkRegex = /]*rel=[\"']stylesheet[\"'][^>]*href=[\"']([^\"']+)[\"'][^>]*>/gi;\n \n let match;\n let styles = \"\";\n let stylesheetUrls = [];\n \n while ((match = styleRegex.exec(html)) !== null) {\n styles += match[1] + \"\\n\\n\";\n }\n \n while ((match = linkRegex.exec(html)) !== null) {\n stylesheetUrls.push(match[1]);\n }\n \n return {\n inlineStyles: styles,\n stylesheetUrls\n };\n}\n\n// HTML template for the UI\nfunction getHtmlTemplate(result = null) {\n return `\n\n\n \n \n Webpage Analyzer\n \n \n\n\n

Webpage Analyzer

Analyze any webpage and ask questions about its content

\n \n

\n \n ${result ? `\n

Analysis Result

URL

${result.url}

Question

${result.question}

Answer

${result.answer}

\n ` : ''}\n \n \n

\n\n \n\n`;\n}\n\n// Parse form data from request\nasync function parseFormData(request: Request) {\n const formData = await request.formData();\n return {\n url: formData.get('url')?.toString() || '',\n question: formData.get('question')?.toString() || ''\n };\n}\n\n// Main handler function\nexport default async function(req: Request): Promise {\n // Handle GET requests - return the HTML form\n if (req.method === \"GET\") {\n return new Response(getHtmlTemplate(), {\n headers: {\n \"Content-Type\": \"text/html\"\n }\n });\n }\n \n // Handle POST requests\n if (req.method === \"POST\") {\n try {\n // Check content type to determine if it's a form submission or JSON API request\n const contentType = req.headers.get('content-type') || '';\n \n let url: string;\n let question: string;\n \n // Parse input based on content type\n if (contentType.includes('application/json')) {\n // Handle JSON API request\n const body = await req.json();\n url = body.url;\n question = body.question;\n } else if (contentType.includes('multipart/form-data') || contentType.includes('application/x-www-form-urlencoded')) {\n // Handle form submission\n const formData = await parseFormData(req);\n url = formData.url;\n question = formData.question;\n } else {\n return new Response(\"Unsupported content type. Use JSON or form data.\", { status: 400 });\n }\n \n // Validate input\n if (!url) {\n return new Response(\"URL is required\", { status: 400 });\n }\n \n if (!question) {\n return new Response(\"Question is required\", { status: 400 });\n }\n \n // Fetch the webpage\n console.log(`Fetching webpage: ${url}`);\n const response = await fetch(url);\n \n if (!response.ok) {\n const errorMessage = `Failed to fetch webpage: ${response.status} ${response.statusText}`;\n \n // Return different responses based on content type\n if (contentType.includes('application/json')) {\n return new Response(JSON.stringify({ error: errorMessage }), { \n status: 400,\n headers: { \"Content-Type\": \"application/json\" }\n });\n } else {\n return new Response(getHtmlTemplate({ \n url, \n question, \n answer: `Error: ${errorMessage}` \n }), {\n headers: { \"Content-Type\": \"text/html\" }\n });\n }\n }\n \n // Get the HTML content\n const html = await response.text();\n \n // Extract JavaScript and CSS\n const javascript = extractJavaScript(html);\n const css = extractCSS(html);\n \n // Prepare content for analysis\n const pageContent = {\n html: html.length > 100000 ? html.substring(0, 100000) + \"... (truncated)\" : html,\n javascript: javascript.length > 50000 ? javascript.substring(0, 50000) + \"... (truncated)\" : javascript,\n css: JSON.stringify(css).length > 50000 ? JSON.stringify(css).substring(0, 50000) + \"... (truncated)\" : JSON.stringify(css)\n };\n \n // Use OpenAI to analyze the content and answer the question\n console.log(`Analyzing webpage and answering question: ${question}`);\n const completion = await openai.chat.completions.create({\n model: \"gpt-4o\",\n messages: [\n {\n role: \"system\",\n content: `You are a webpage analyzer. You'll be given HTML, CSS, and JavaScript from a webpage, \n along with a question about the page. Analyze the content and answer the question as accurately \n as possible based on the provided webpage content. Focus on what's visible and functional on the page.`\n },\n {\n role: \"user\",\n content: `I need information about this webpage:\n \n URL: ${url}\n \n HTML Content:\n \\`\\`\\`html\n ${pageContent.html}\n \\`\\`\\`\n \n JavaScript Content:\n \\`\\`\\`javascript\n ${pageContent.javascript}\n \\`\\`\\`\n \n CSS Information:\n \\`\\`\\`\n ${pageContent.css}\n \\`\\`\\`\n \n Question: ${question}\n \n Please analyze the webpage content and answer my question based on what you can determine from the HTML, CSS, and JavaScript.`\n }\n ],\n temperature: 0.2,\n max_tokens: 1500,\n });\n \n const answer = completion.choices[0].message.content;\n \n // Prepare result object\n const result = {\n url,\n question,\n answer\n };\n \n // Return response based on content type\n if (contentType.includes('application/json')) {\n // Return JSON for API requests\n return new Response(JSON.stringify(result), {\n headers: {\n \"Content-Type\": \"application/json\"\n }\n });\n } else {\n // Return HTML with results for form submissions\n return new Response(getHtmlTemplate(result), {\n headers: {\n \"Content-Type\": \"text/html\"\n }\n });\n }\n \n } catch (error) {\n console.error(\"Error processing request:\", error);\n \n // Check if it's a JSON request\n const contentType = req.headers.get('content-type') || '';\n if (contentType.includes('application/json')) {\n return new Response(JSON.stringify({ error: error.message }), { \n status: 500,\n headers: { \"Content-Type\": \"application/json\" }\n });\n } else {\n return new Response(getHtmlTemplate({ \n url: '', \n question: '', \n answer: `Error: ${error.message}` \n }), {\n headers: { \"Content-Type\": \"text/html\" }\n });\n }\n }\n }\n \n // Handle other HTTP methods\n return new Response(\"Method not allowed. Please use GET or POST.\", { status: 405 });\n}","createdAt",["D",1747621159303],"branchVersion","branchId","1b6822aa-3457-11f0-b96a-9e149126039e","id","1b67ef60-3457-11f0-b96a-9e149126039e","pageexplainer",["D",1747620917507],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","imageUrl","8acb974a-4b91-4d4a-b000-6f28827b7e16","pinnedFileId","pinPreview",true,"pinMigrated","screenshotVersion","likeCount",0,"orgId","b74060f0-0f1d-44f1-bee2-bdb9c9cf72e4","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_95":94,"_102":98},"org",{"_95":94,"_96":-5,"_97":98,"_18":54,"_99":100,"_101":25},"branch",{"_13":84,"_32":85,"_43":42,"_86":44,"_87":-5,"_88":-5,"_89":-5,"_90":-5,"_91":-5,"_92":45,"_93":94},"isOwned",5,"main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","neverstew","handle","displayName","avatar","https://secure.gravatar.com/avatar/109fa713caf4e083c57622b7c6dad365.jpg?s=200&d=identicon","tier","free","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_43":44,"_32":45,"_38":161,"_47":-5,"_48":25,"_49":50,"_51":50,"_52":-5,"_53":-5,"_18":54,"_55":31,"_56":57,"_58":57,"_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":162,"_79":163,"_81":164,"_83":25},"tree",[152,153],"files",[152,153],"counts",{"_141":61,"_142":143,"_144":61,"_145":146,"_147":148},"contents",[125,126],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_43":134,"_32":135,"_30":136,"_128":-5,"_41":42,"_40":137,"_129":25,"_38":138,"_13":61,"_33":20,"_35":139,"_24":25,"_132":-5,"_27":140},{"_43":127,"_32":28,"_30":31,"_128":-5,"_41":42,"_40":14,"_129":57,"_38":130,"_13":131,"_33":34,"_35":37,"_24":25,"_132":-5,"_27":133},"ab87f054-3457-11f0-a019-9e149126039e","parentId","latest",["D",1747621159303],2,"label",[28],"7c30f4d6-3457-11f0-96e1-9e149126039e","README.md","7c30f59e-3457-11f0-96e1-9e149126039e",3,["D",1747621079883],"# Webpage Analyzer\n\nThis Val allows you to analyze webpages and answer questions about them based on their HTML, CSS, and JavaScript content.\n\n## Features\n\n- Fetches the source of any webpage\n- Extracts HTML, CSS, and JavaScript content\n- Uses OpenAI to analyze the page and answer questions about it\n- Handles both inline and external stylesheets\n\n## Usage\n\nSend a POST request to this Val with the following JSON body:\n\n```json\n{\n \"url\": \"https://example.com\",\n \"question\": \"What is the main heading on this page?\"\n}\n```\n\n### Example using curl:\n\n```bash\ncurl -X POST https://api.val.town/v1/run/yourusername/webpage-analyzer \\\n -H \"Content-Type: application/json\" \\\n -d '{\"url\": \"https://example.com\", \"question\": \"What is the main heading on this page?\"}'\n```\n\n### Example using JavaScript:\n\n```javascript\nconst response = await fetch('https://api.val.town/v1/run/yourusername/webpage-analyzer', {\n method: 'POST',\n headers: {\n 'Content-Type': 'application/json',\n },\n body: JSON.stringify({\n url: 'https://example.com',\n question: 'What is the main heading on this page?'\n }),\n});\n\nconst data = await response.json();\nconsole.log(data.answer);\n```\n\n## Response Format\n\nThe Val returns a JSON response with the following structure:\n\n```json\n{\n \"url\": \"https://example.com\",\n \"question\": \"What is the main heading on this page?\",\n \"answer\": \"The main heading on the page is 'Example Domain'.\"\n}\n```\n\n## Limitations\n\n- The Val truncates very large HTML, CSS, or JavaScript content to avoid exceeding token limits\n- JavaScript evaluation is limited to static analysis (the Val cannot execute JavaScript)\n- External resources like images, videos, or dynamically loaded content may not be fully analyzed\n- The analysis depends on the capabilities of the OpenAI model being used\n\n## Requirements\n\nThis Val requires an OpenAI API key to be set as an environment variable in your Val Town account.",[135],"pulls","branches",1,"forks","envVars",{"_149":61,"_151":61},"connections",{"_149":61,"_150":61},"count","unfilledCount","emptyCount",{"_43":134,"_32":135,"_30":136,"_128":-5,"_41":42,"_40":137,"_129":25,"_38":158,"_13":61,"_33":20,"_35":139,"_24":25,"_132":-5,"_155":159,"_27":160},{"_43":127,"_32":28,"_30":31,"_128":-5,"_41":42,"_40":14,"_129":57,"_38":154,"_13":131,"_33":34,"_35":37,"_24":25,"_132":-5,"_155":156,"_27":157},["D",1747621159303],"children",[],[28],["D",1747621079883],[],[135],["D",1747620917507],{"_95":94,"_102":98},{"_95":94,"_96":-5,"_97":98,"_18":54,"_99":100,"_101":25},{"_13":84,"_32":85,"_43":42,"_86":44,"_87":-5,"_88":-5,"_89":-5,"_90":-5,"_91":-5,"_92":45,"_93":94},"ctx",{"_77":-5,"_122":198,"_199":200,"_201":202,"_203":25,"_204":25,"_205":25,"_206":57,"_207":-5,"_208":-7,"_209":-7,"_210":61,"_211":25,"_212":25,"_213":-5,"_214":25,"_215":25,"_216":25,"_217":-5},"ENV",{"_169":170,"_171":172,"_173":85,"_174":175,"_176":177,"_178":179,"_180":181,"_182":183,"_184":185,"_186":187,"_188":189,"_190":191,"_192":193,"_194":195,"_196":197},"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 · v4