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}","deleted","label",[98],"permalink","https://www.val.town/x/neverstew/pageexplainer/code/webpage-analyzer.ts","extension","actionData","errors"]