\n \n

\n \n );\n}\n\nfunction SiteDetails({ siteInfo }) {\n if (!siteInfo) return null;\n\n const { url, title, snippet } = siteInfo;\n\n return (\n

\n {title || \"Untitled Page\"}\n

\n URL: {url}\n

\n {snippet && (\n

\n Preview: {snippet}\n

\n )}\n

\n );\n}\n\nfunction App() {\n const [siteUrl, setSiteUrl] = useState(\"\");\n const [siteInfo, setSiteInfo] = useState(null);\n const [summary, setSummary] = useState(\"\");\n const [loading, setLoading] = useState(false);\n const [error, setError] = useState(\"\");\n const [progress, setProgress] = useState(0);\n const [mounted, setMounted] = useState(false);\n\n useEffect(() => {\n console.log(\"App component mounted\");\n setMounted(true);\n }, []);\n\n const fetchAndSummarize = async () => {\n if (!siteUrl) {\n setError(\"Please enter a valid site URL\");\n return;\n }\n\n setLoading(true);\n setError(\"\");\n setSummary(\"\");\n setSiteInfo(null);\n setProgress(10);\n console.log(\"Starting fetchAndSummarize\");\n\n try {\n // 1) Fetch site data\n setProgress(30);\n console.log(\"Fetching site details\");\n const siteResponse = await fetch(`/site-data?url=${encodeURIComponent(siteUrl)}`);\n if (!siteResponse.ok) {\n throw new Error(`Failed to fetch site details: ${siteResponse.statusText}`);\n }\n const siteData = await siteResponse.json();\n setSiteInfo(siteData);\n console.log(\"Site details fetched\", siteData);\n\n // 2) Summarize site content\n setProgress(60);\n console.log(\"Sending summary request\");\n const summaryResponse = await fetch(\"/summarize\", {\n method: \"POST\",\n headers: {\n \"Content-Type\": \"application/json\",\n },\n body: JSON.stringify({ url: siteUrl, html: siteData.fullHtml }),\n });\n\n if (!summaryResponse.ok) {\n const errorText = await summaryResponse.text();\n throw new Error(`Failed to get summary: ${errorText}`);\n }\n\n setProgress(90);\n const summaryText = await summaryResponse.text();\n console.log(\"Summary received\", summaryText.substring(0, 100) + \"...\");\n setSummary(summaryText);\n\n setLoading(false);\n setProgress(100);\n console.log(\"Summarization complete\");\n } catch (err) {\n console.error(\"Fetch Error:\", err);\n setError(`Error: ${err.message}`);\n setLoading(false);\n setProgress(0);\n }\n };\n\n const handleKeyDown = (event) => {\n if (event.key === \"Enter\" && !loading) {\n fetchAndSummarize();\n }\n };\n\n if (!mounted) {\n return

Loading application...

;\n }\n\n return (\n

\n Generic Site Summarizer\n

\n\n {loading && }\n\n

\n setSiteUrl(e.target.value)}\n onKeyDown={handleKeyDown}\n placeholder=\"Enter any site URL\"\n className=\"flex-grow p-3 border rounded-l-lg dark:bg-neutral-800 dark:border-neutral-700 focus:outline-none focus:ring-2 focus:ring-orange-500\"\n />\n \n {loading ? \"Summarizing...\" : \"Summarize\"}\n \n

\n\n {error && (\n \n Error:\n {error}\n

\n )}\n\n \n\n {summary && (\n \n )}\n

\n \n \n );\n}\n\nfunction client() {\n console.log(\"Client function called\");\n const root = document.getElementById(\"root\");\n if (root) {\n try {\n console.log(\"Rendering React app\");\n createRoot(root).render();\n console.log(\"React app rendered\");\n } catch (error) {\n console.error(\"Error rendering React app:\", error);\n root.innerHTML =\n `

Error rendering the application. Please check the console for more details.

`;\n }\n } else {\n console.error(\"Root element not found\");\n }\n}\n\nif (typeof document !== \"undefined\") {\n console.log(\"Document is defined, setting up client\");\n if (document.readyState === \"loading\") {\n console.log(\"Document still loading, adding event listener\");\n document.addEventListener(\"DOMContentLoaded\", client);\n } else {\n console.log(\"Document already loaded, calling client immediately\");\n client();\n }\n}\n\nexport default async function server(request: Request): Promise {\n console.log(\"Server function called\", request.method, request.url);\n const { pathname, searchParams } = new URL(request.url);\n\n // Serve main page\n if (request.method === \"GET\" && pathname === \"/\") {\n console.log(\"Serving main page\");\n return new Response(\n `\n \n \n \n \n \n Generic Site Summarizer\n \n \n \n \n \n

\n JavaScript is required to use this application. Please enable JavaScript in your browser settings.\n

\n Loading application...\n

\n \n \n \n \n `,\n {\n headers: { \"Content-Type\": \"text/html\" },\n },\n );\n }\n\n // GET /site-data?url=...\n // Scrapes the HTML and returns minimal metadata\n if (request.method === \"GET\" && pathname === \"/site-data\") {\n console.log(\"Fetching site data\");\n const siteUrl = searchParams.get(\"url\");\n if (!siteUrl) {\n return new Response(JSON.stringify({ error: \"Missing 'url' parameter\" }), {\n status: 400,\n headers: { \"Content-Type\": \"application/json\" },\n });\n }\n\n try {\n // Fetch the HTML from the site\n const siteResponse = await fetch(siteUrl);\n if (!siteResponse.ok) {\n throw new Error(`Failed to fetch site: ${siteResponse.statusText}`);\n }\n const siteHtml = await siteResponse.text();\n\n // Super-simple extraction of and some snippet from the <body>\n // (In practice, you'd use a proper HTML parser.)\n const titleMatch = siteHtml.match(/<title>([^<]+)<\\/title>/i);\n const title = titleMatch ? titleMatch[1].trim() : \"No Title Found\";\n\n // Attempt to get a short snippet from body text\n const bodyText = siteHtml.replace(/<script[^>]*>[\\s\\S]*?<\\/script>/gi, \"\")\n .replace(/<style[^>]*>[\\s\\S]*?<\\/style>/gi, \"\")\n .replace(/<[^>]*>/g, \" \");\n const snippet = bodyText.substring(0, 300).trim();\n\n const siteData = {\n url: siteUrl,\n title,\n snippet,\n fullHtml: siteHtml,\n };\n\n return new Response(JSON.stringify(siteData), {\n headers: { \"Content-Type\": \"application/json\" },\n });\n } catch (error) {\n console.error(\"Error fetching site data:\", error);\n return new Response(JSON.stringify({ error: error.message }), {\n status: 500,\n headers: { \"Content-Type\": \"application/json\" },\n });\n }\n }\n\n // POST /summarize => Summarize the site's HTML\n if (request.method === \"POST\" && pathname === \"/summarize\") {\n console.log(\"Handling summary request\");\n\n try {\n // Retrieve API key from environment\n const GEMINI_API_KEY = Deno.env.get(\"GEMINI_API_KEY\");\n if (!GEMINI_API_KEY) {\n console.error(\"Gemini API key not configured\");\n return new Response(\n JSON.stringify({\n error: \"Gemini API key is not configured\",\n }),\n {\n status: 500,\n headers: { \"Content-Type\": \"application/json\" },\n },\n );\n }\n\n // Parse JSON body\n const { url, html } = await request.json();\n if (!url || !html) {\n return new Response(\n JSON.stringify({\n error: \"Missing 'url' or 'html' in request body\",\n }),\n {\n status: 400,\n headers: { \"Content-Type\": \"application/json\" },\n },\n );\n }\n\n // Initialize GoogleGenerativeAI client\n const genAI = new GoogleGenerativeAI(GEMINI_API_KEY);\n const model = genAI.getGenerativeModel({ model: \"gemini-2.0-flash-exp\" });\n\n // Prepare the prompt\n const prompt = `\nSummarize the following web page in a structured, user-friendly way:\nURL: ${url}\n\nHTML Content:\n${html}\n\nInstructions:\n- Identify key topics, headings, or unique points.\n- Use HTML headings (<h2>) for each major section.\n- Include short quotes or examples when relevant, in <q> tags.\n- Produce valid, readable HTML that is easy to parse.\n`;\n\n console.log(\"Generating summary with Gemini\");\n const result = await model.generateContent(prompt);\n const response = await result.response;\n let text = response.text();\n\n // Light post-processing: remove markdown fences, etc.\n text = text.replace(/```html\\n?|\\n?```/g, \"\");\n\n // You could wrap the text with some extra styling if desired\n const styledSummary = `\n <div class=\"summary-content theme-aware-summary\">\n ${text}\n <style>\n .theme-aware-summary {\n max-width: 100%;\n line-height: 1.6;\n padding: 1em;\n }\n .theme-aware-summary h2 {\n margin-top: 1em;\n font-size: 1.25rem;\n color: #d97706;\n }\n .theme-aware-summary q {\n font-style: italic;\n color: #4b5563;\n }\n @media (prefers-color-scheme: dark) {\n .theme-aware-summary h2 {\n color: #f97316;\n }\n .theme-aware-summary q {\n color: #9ca3af;\n }\n }\n </style>\n </div>\n `;\n\n return new Response(styledSummary, {\n headers: {\n \"Content-Type\": \"text/html\",\n \"Access-Control-Allow-Origin\": \"*\",\n },\n });\n } catch (error) {\n console.error(\"Server-side Error:\", error);\n return new Response(\n JSON.stringify({\n error: `Server error: ${error.message}`,\n }),\n {\n status: 500,\n headers: {\n \"Content-Type\": \"application/json\",\n \"Access-Control-Allow-Origin\": \"*\",\n },\n },\n );\n }\n }\n\n // Handle CORS preflight\n if (request.method === \"OPTIONS\") {\n return new Response(null, {\n headers: {\n \"Access-Control-Allow-Origin\": \"*\",\n \"Access-Control-Allow-Methods\": \"GET, POST, OPTIONS\",\n \"Access-Control-Allow-Headers\": \"Content-Type\",\n },\n });\n }\n\n // Catch-all 404\n console.log(\"No matching route found, returning 404\");\n return new Response(\"Not Found\", { status: 404 });\n}","deleted","label",[98],"permalink","https://www.val.town/x/arfan/website_Summarizer/code/main.tsx","extension","actionData","errors"] </article></body></html>