[{"_1":2,"_353":-5,"_354":-5},"loaderData",{"_3":4,"_91":92,"_340":341,"_352":-5},"root",{"_5":6,"_32":33,"_58":59,"_89":90},"ctx",{"_7":8,"_18":19,"_20":-5,"_21":22,"_23":24,"_25":26,"_27":26,"_28":29,"_30":31},"auth",{"_9":-5,"_10":-5,"_11":-5,"_12":-5,"_13":-5,"_14":-5,"_15":-5,"_16":-5,"_17":-5},"sessionClaims","sessionId","userId","actor","orgId","orgRole","orgSlug","orgPermissions","factorVerificationAge","environmentVariableKeys",[],"user","preferences_keybindings","default","preferences_theme","light","preferences_fixers",false,"preferences_copilot","preferences_model","claude-3-5-haiku-20241022","notification_count",0,"ENV",{"_34":35,"_36":37,"_38":39,"_40":41,"_42":43,"_44":45,"_46":47,"_48":49,"_50":51,"_52":53,"_54":55,"_56":57},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","VAL_RUNTIME_NAME","prod","RENDER_GIT_COMMIT","7daf6d4956eee4bd7f81f6b87f5c83f91772a96e","RENDER_GIT_BRANCH","main","CLERK_PUBLISHABLE_KEY","pk_live_Y2xlcmsudmFsLnRvd24k","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","API_URL","https://api.val.town","WORKER_FINGERPRINT","d0746fd0512e0614e3f717607f0da4cd","clerkState",{"_60":61},"__internal_clerk_state",{"_62":63,"_64":43,"_65":66,"_67":66,"_68":26,"_69":66,"_70":66,"_71":66,"_72":66,"_73":66,"_74":66,"_75":66,"_76":66,"_77":78,"_87":26,"_88":26},"__clerk_ssr_state",{"_9":-5,"_10":-5,"_11":-5,"_12":-5,"_13":-5,"_14":-5,"_15":-5,"_16":-5,"_17":-5},"__publishableKey","__proxyUrl","","__domain","__isSatellite","__signInUrl","__signUpUrl","__afterSignInUrl","__afterSignUpUrl","__signInForceRedirectUrl","__signUpForceRedirectUrl","__signInFallbackRedirectUrl","__signUpFallbackRedirectUrl","__clerk_debug",{"_79":26,"_80":66,"_81":82,"_83":66,"_84":43,"_85":26,"_86":66},"isSignedIn","proxyUrl","reason","session-token-and-uat-missing","message","publishableKey","isSatellite","domain","__telemetryDisabled","__telemetryDebug","remixVersion",2,"routes/_app.v.$handle.$name",{"_93":94,"_95":96,"_94":97,"_335":-5,"_336":-5,"_337":338,"_131":132,"_139":140,"_100":101,"_98":99,"_119":-7,"_50":51,"_339":26},"type","val","author","1591349e-125d-4fb7-930d-cf293627961f",{"_98":99,"_95":96,"_100":101,"_102":103,"_104":-5,"_105":106,"_107":108,"_109":110,"_111":112,"_113":26,"_114":112,"_115":116,"_117":118,"_119":120,"_121":26,"_122":123,"_124":31,"_125":31,"_126":31,"_127":31,"_128":31,"_129":-5,"_20":130,"_135":-5,"_136":-7,"_137":138,"_139":140,"_141":142},"name","summarizeHn","valNameId","b22b8326-a56e-11ef-864d-e6cdfca9ef9f","parentFolderId","f629a570-b852-11ef-a6a4-e6cdfca9ef9f","isOwned","privacy","public","readme","A simple utility to summarize Hacker News articles, using Gemini Models. Inspired from [Simon Willison's TIL](https://til.simonwillison.net/llms/claude-hacker-news-themes), [Prompt Inspiration](https://simonwillison.net/2024/Jun/21/search-based-rag/#annotated-final-script)","valType","http","currentVersion","df7da8ac-bc72-11ef-92e5-e6cdfca9ef9f","legacyPrivate","id","code","/** @jsxImportSource https://esm.sh/react */\nimport React, { useState, useEffect } from \"https://esm.sh/react\";\nimport { createRoot } from \"https://esm.sh/react-dom/client\";\nimport { GoogleGenerativeAI } from \"https://esm.sh/@google/generative-ai\";\n\nfunction ProgressBar({ progress }) {\n return (\n

\n \n

\n \n );\n}\n\nfunction PostDetails({ post }) {\n if (!post) return null;\n const hnDiscussionUrl = `https://news.ycombinator.com/item?id=${post.id}`;\n const formattedDate = new Date(post.time * 1000).toLocaleString();\n\n return (\n

\n \n {post.title}\n \n

\n \n \n {post.by}\n \n \n \n {formattedDate}\n \n \n \n {post.score} points\n \n \n \n {post.descendants || 0} comments\n \n

\n \n Read original post\n \n \n View HN discussion\n \n

\n );\n}\n\nfunction App() {\n const [postId, setPostId] = useState(\"\");\n const [postDetails, setPostDetails] = 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 (!postId) {\n setError(\"Please enter a valid Hacker News post ID\");\n return;\n }\n\n setLoading(true);\n setError(\"\");\n setSummary(\"\");\n setPostDetails(null);\n setProgress(10);\n console.log(\"Starting fetchAndSummarize\");\n\n try {\n // Fetch post details\n setProgress(30);\n console.log(\"Fetching HN post details\");\n const postResponse = await fetch(`/post-details?id=${postId}`);\n if (!postResponse.ok) {\n throw new Error(`Failed to fetch post details: ${postResponse.statusText}`);\n }\n const postData = await postResponse.json();\n setPostDetails(postData);\n console.log(\"Post details fetched\", postData);\n\n // Fetch comments and generate summary\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({\n postId,\n postDetails: postData,\n }),\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 Hacker News Discussion Summarizer\n

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

\n setPostId(e.target.value)}\n onKeyDown={handleKeyDown}\n placeholder=\"Enter Hacker News Post ID\"\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 = `

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\n // Handle root GET request\n if (request.method === \"GET\" && new URL(request.url).pathname === \"/\") {\n console.log(\"Serving main page\");\n return new Response(\n `\n \n \n \n \n \n HN Discussion 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 // Handle post details fetch\n if (request.method === \"GET\" && new URL(request.url).pathname === \"/post-details\") {\n const url = new URL(request.url);\n const postId = url.searchParams.get(\"id\");\n if (!postId) {\n return new Response(JSON.stringify({ error: \"Post ID is required\" }), {\n status: 400,\n headers: { \"Content-Type\": \"application/json\" },\n });\n }\n\n try {\n const response = await fetch(`https://hacker-news.firebaseio.com/v0/item/${postId}.json`);\n if (!response.ok) {\n throw new Error(`Failed to fetch post details: ${response.statusText}`);\n }\n const postData = await response.json();\n return new Response(JSON.stringify(postData), {\n headers: { \"Content-Type\": \"application/json\" },\n });\n } catch (error) {\n console.error(\"Error fetching post details:\", error);\n return new Response(JSON.stringify({ error: \"Failed to fetch post details\" }), {\n status: 500,\n headers: { \"Content-Type\": \"application/json\" },\n });\n }\n }\n\n // Handle summary generation endpoint\n if (request.method === \"POST\" && new URL(request.url).pathname === \"/summarize\") {\n console.log(\"Handling summary request\");\n try {\n // Retrieve API key from Val Town environment\n const GEMINI_API_KEY = Deno.env.get(\"GEMINI_API_KEY\");\n\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 const genAI = new GoogleGenerativeAI(GEMINI_API_KEY);\n const requestBody = await request.json();\n const { postId, postDetails } = requestBody;\n\n // Fetch comments\n const commentsResponse = await fetch(`https://hn.algolia.com/api/v1/items/${postId}`);\n const commentsData = await commentsResponse.json();\n\n // Recursively extract all comments\n const extractComments = (item) => {\n let comments = [];\n if (item.children) {\n item.children.forEach(child => {\n comments.push(`${child.author}: ${child.text}`);\n comments = comments.concat(extractComments(child));\n });\n }\n return comments;\n };\n\n const allComments = extractComments(commentsData);\n const commentsText = allComments.join(\"\\n\");\n\n const system = `Summarize the themes of the opinions expressed in the comments of this Hacker News post.\nFor each theme, use a proper H2 html header.\nInclude direct \"quotations\" with author attribution and make it easy to read.\nYou MUST quote directly from users when crediting them, with double quotes.\nReturn a full, well-formatted HTML document with proper styling.\nUse semantic HTML and add classes for styling.\nExample structure:\n

Theme Name

Theme description with direct quotes from users.

\nEnsure the HTML is clean, readable, and visually appealing. Go Long`;\n\n console.log(\"Generating summary with Gemini\");\n const model = genAI.getGenerativeModel({ model: \"gemini-2.0-flash-exp\", systemInstruction: system });\n\n const prompt = `\nPost Title: ${postDetails.title}\nPost URL: ${postDetails.url}\nPost Author: ${postDetails.by}\nPost Score: ${postDetails.score}\nNumber of Comments: ${postDetails.descendants || 0}\n\nComments:\n${commentsText}\n\nSummarize the main themes and opinions expressed in the comments of this Hacker News post.\n`;\n\n const response = await model.generateContent(prompt);\n let text = response.response.text();\n console.log(\"Summary generated\", text.substring(0, 100) + \"...\");\n\n // Remove backticks and HTML tags if present\n text = text.replace(/```html\\n?|\\n?```/g, '');\n if (text.startsWith('')) {\n text = text.slice(text.indexOf('>') + 1, text.lastIndexOf(''));\n }\n\n // Wrap the response in a styled HTML structure with robust theming\n const styledSummary = `\n

\n ${text}\n \n

\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 requests\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 // If no routes match, return a 404\n console.log(\"No matching route found, returning 404\");\n return new Response(\"Not Found\", { status: 404 });\n}","createdAt",["D",1734438703353],"version",48,"currentUserHasLiked","likeCount",1,"forkCount","referenceCount","dependencyCount","commentCount","prCount","mergedPr",{"_131":132,"_133":134},"handle","prashamtrivedi","profileImageUrl","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18yaUF5OXE3VlcwNVRwRU9wSTRmcE1DZ0FSM1UifQ","forkedVal","interval","slug","prashamtrivedi/summarizeHn","description","A simple utility to summarize Hacker News articles, using Gemini Models. Inspired from Simon Willison's TIL , Prompt Inspiration","versions",[143,146,150,154,158,162,166,170,174,178,182,186,190,194,198,202,206,210,214,218,222,226,230,234,238,242,246,250,254,258,262,266,270,274,278,282,286,290,294,298,302,306,310,314,318,322,326,329,332],{"_119":120,"_144":-5,"_117":145,"_114":112},"prId",["D",1734438703353],{"_119":147,"_144":-5,"_117":148,"_114":149},47,["D",1734438579083],"956c0394-bc72-11ef-8fbb-e6cdfca9ef9f",{"_119":151,"_144":-5,"_117":152,"_114":153},46,["D",1734438366446],"16ae6f42-bc72-11ef-8412-e6cdfca9ef9f",{"_119":155,"_144":-5,"_117":156,"_114":157},45,["D",1734438199189],"b2fda5c6-bc71-11ef-a252-e6cdfca9ef9f",{"_119":159,"_144":-5,"_117":160,"_114":161},44,["D",1734437999888],"3c32749e-bc71-11ef-9172-e6cdfca9ef9f",{"_119":163,"_144":-5,"_117":164,"_114":165},43,["D",1732032978723],"9bdf0f24-a691-11ef-9cb3-e6cdfca9ef9f",{"_119":167,"_144":-5,"_117":168,"_114":169},42,["D",1732032886544],"64ed8e50-a691-11ef-a76f-e6cdfca9ef9f",{"_119":171,"_144":-5,"_117":172,"_114":173},41,["D",1732032732213],"08f0a182-a691-11ef-a76f-e6cdfca9ef9f",{"_119":175,"_144":-5,"_117":176,"_114":177},40,["D",1732032494203],"7b132d94-a690-11ef-9fb9-e6cdfca9ef9f",{"_119":179,"_144":-5,"_117":180,"_114":181},39,["D",1731937708481],"ca61a6d8-a5b3-11ef-8117-e6cdfca9ef9f",{"_119":183,"_144":-5,"_117":184,"_114":185},38,["D",1731914227766],"1ec8b432-a57d-11ef-85be-e6cdfca9ef9f",{"_119":187,"_144":-5,"_117":188,"_114":189},37,["D",1731914201549],"0f284f7e-a57d-11ef-85be-e6cdfca9ef9f",{"_119":191,"_144":-5,"_117":192,"_114":193},36,["D",1731914197327],"0ca44212-a57d-11ef-a4b0-e6cdfca9ef9f",{"_119":195,"_144":-5,"_117":196,"_114":197},35,["D",1731914190317],"0877d550-a57d-11ef-984f-e6cdfca9ef9f",{"_119":199,"_144":-5,"_117":200,"_114":201},34,["D",1731913988586],"90394042-a57c-11ef-9cf1-e6cdfca9ef9f",{"_119":203,"_144":-5,"_117":204,"_114":205},33,["D",1731913923252],"6947d0b6-a57c-11ef-b75b-e6cdfca9ef9f",{"_119":207,"_144":-5,"_117":208,"_114":209},32,["D",1731913608683],"adc83aec-a57b-11ef-9bb4-e6cdfca9ef9f",{"_119":211,"_144":-5,"_117":212,"_114":213},31,["D",1731913390219],"2b910bd0-a57b-11ef-9173-e6cdfca9ef9f",{"_119":215,"_144":-5,"_117":216,"_114":217},30,["D",1731913362194],"1add5d66-a57b-11ef-ab99-e6cdfca9ef9f",{"_119":219,"_144":-5,"_117":220,"_114":221},29,["D",1731913266829],"e2058e96-a57a-11ef-9173-e6cdfca9ef9f",{"_119":223,"_144":-5,"_117":224,"_114":225},28,["D",1731913105009],"819567de-a57a-11ef-8525-e6cdfca9ef9f",{"_119":227,"_144":-5,"_117":228,"_114":229},27,["D",1731912877783],"fa21ff1a-a579-11ef-b639-e6cdfca9ef9f",{"_119":231,"_144":-5,"_117":232,"_114":233},26,["D",1731912616508],"5e697242-a579-11ef-8ca7-e6cdfca9ef9f",{"_119":235,"_144":-5,"_117":236,"_114":237},25,["D",1731911704999],"3f195684-a577-11ef-9674-e6cdfca9ef9f",{"_119":239,"_144":-5,"_117":240,"_114":241},24,["D",1731911343704],"67bfde2e-a576-11ef-bca9-e6cdfca9ef9f",{"_119":243,"_144":-5,"_117":244,"_114":245},23,["D",1731911304279],"50408794-a576-11ef-9bff-e6cdfca9ef9f",{"_119":247,"_144":-5,"_117":248,"_114":249},22,["D",1731911181052],"06cd2784-a576-11ef-8a34-e6cdfca9ef9f",{"_119":251,"_144":-5,"_117":252,"_114":253},21,["D",1731911180640],"068e20d4-a576-11ef-b09e-e6cdfca9ef9f",{"_119":255,"_144":-5,"_117":256,"_114":257},20,["D",1731910869133],"4ce223f6-a575-11ef-a694-e6cdfca9ef9f",{"_119":259,"_144":-5,"_117":260,"_114":261},19,["D",1731910512060],"780d7ab8-a574-11ef-a3ac-e6cdfca9ef9f",{"_119":263,"_144":-5,"_117":264,"_114":265},18,["D",1731910460912],"5991a488-a574-11ef-b5c4-e6cdfca9ef9f",{"_119":267,"_144":-5,"_117":268,"_114":269},17,["D",1731910392709],"30e9a972-a574-11ef-b88f-e6cdfca9ef9f",{"_119":271,"_144":-5,"_117":272,"_114":273},16,["D",1731910266670],"e5c9b612-a573-11ef-bed3-e6cdfca9ef9f",{"_119":275,"_144":-5,"_117":276,"_114":277},15,["D",1731910110387],"88a2642a-a573-11ef-9929-e6cdfca9ef9f",{"_119":279,"_144":-5,"_117":280,"_114":281},14,["D",1731910099450],"821dc2de-a573-11ef-ad71-e6cdfca9ef9f",{"_119":283,"_144":-5,"_117":284,"_114":285},13,["D",1731909974681],"37bf70f2-a573-11ef-9929-e6cdfca9ef9f",{"_119":287,"_144":-5,"_117":288,"_114":289},12,["D",1731909939382],"22b57094-a573-11ef-9535-e6cdfca9ef9f",{"_119":291,"_144":-5,"_117":292,"_114":293},11,["D",1731909731641],"a6e2db3c-a572-11ef-a0c2-e6cdfca9ef9f",{"_119":295,"_144":-5,"_117":296,"_114":297},10,["D",1731909720797],"a06c155c-a572-11ef-b87a-e6cdfca9ef9f",{"_119":299,"_144":-5,"_117":300,"_114":301},9,["D",1731909522727],"2a5d231a-a572-11ef-ba3c-e6cdfca9ef9f",{"_119":303,"_144":-5,"_117":304,"_114":305},8,["D",1731909101005],"2eff0b0a-a571-11ef-aae8-e6cdfca9ef9f",{"_119":307,"_144":-5,"_117":308,"_114":309},7,["D",1731908943760],"d1456b80-a570-11ef-a0f0-e6cdfca9ef9f",{"_119":311,"_144":-5,"_117":312,"_114":313},6,["D",1731908812279],"82e71e8e-a570-11ef-8d58-e6cdfca9ef9f",{"_119":315,"_144":-5,"_117":316,"_114":317},5,["D",1731908685462],"37503a0a-a570-11ef-8afc-e6cdfca9ef9f",{"_119":319,"_144":-5,"_117":320,"_114":321},4,["D",1731908520951],"d542157c-a56f-11ef-9c8e-e6cdfca9ef9f",{"_119":323,"_144":-5,"_117":324,"_114":325},3,["D",1731908321238],"5e3817e2-a56f-11ef-b096-e6cdfca9ef9f",{"_119":90,"_144":-5,"_117":327,"_114":328},["D",1731908292723],"4d38f6c8-a56f-11ef-ab07-e6cdfca9ef9f",{"_119":123,"_144":-5,"_117":330,"_114":331},["D",1731908247466],"323f69e2-a56f-11ef-b18d-e6cdfca9ef9f",{"_119":31,"_144":-5,"_117":333,"_114":334},["D",1731908032579],"b22d3112-a56e-11ef-864d-e6cdfca9ef9f","recentThread","breadcrumbs","comments",[],"isOwner","routes/_app.v.$handle.$name.versions.$(version)",{"_93":342,"_343":344,"_94":345},"single","redirect","/v/prashamtrivedi/summarizeHn/versions",{"_114":225,"_115":346,"_119":223,"_117":347,"_348":99,"_100":101,"_109":110,"_131":132,"_11":96,"_349":-5,"_350":-5,"_351":-5,"_339":26,"_137":138},"/** @jsxImportSource https://esm.sh/react */\nimport React, { useState } from \"https://esm.sh/react\";\nimport { createRoot } from \"https://esm.sh/react-dom/client\";\nimport ReactMarkdown from \"https://esm.sh/react-markdown\";\nimport remarkGfm from \"https://esm.sh/remark-gfm\";\nimport rehypeRaw from \"https://esm.sh/rehype-raw\";\n\nfunction ProgressBar({ progress }) {\n return (\n

\n );\n}\n\nfunction App() {\n const [postId, setPostId] = useState(\"\");\n const [summary, setSummary] = useState(\"\");\n const [loading, setLoading] = useState(false);\n const [error, setError] = useState(\"\");\n const [progress, setProgress] = useState(0);\n\n const fetchAndSummarize = async () => {\n if (!postId) {\n setError(\"Please enter a valid Hacker News post ID\");\n return;\n }\n\n setLoading(true);\n setError(\"\");\n setSummary(\"\");\n setProgress(10); // Initial progress\n\n try {\n // HN API Fetch\n setProgress(30);\n const hnResponse = await fetch(`https://hn.algolia.com/api/v1/items/${postId}`);\n const data = await hnResponse.json();\n\n // Recursively extract all comments\n const extractComments = (item) => {\n let comments = [];\n if (item.children) {\n item.children.forEach(child => {\n comments.push(`${child.author}: ${child.text}`);\n comments = comments.concat(extractComments(child));\n });\n }\n return comments;\n };\n\n const allComments = extractComments(data);\n const commentsText = allComments.join(\"\\n\");\n\n // Gemini Summary Request\n setProgress(60);\n const summaryResponse = await fetch(\"/summarize\", {\n method: \"POST\",\n headers: {\n \"Content-Type\": \"application/json\",\n },\n body: JSON.stringify({\n postId,\n comments: commentsText,\n }),\n });\n\n if (!summaryResponse.ok) {\n const errorText = await summaryResponse.text();\n throw new Error(`Failed to get summary: ${errorText}`);\n }\n\n // Final Progress\n setProgress(90);\n const summaryText = await summaryResponse.text();\n setSummary(summaryText);\n \n // Complete\n setLoading(false);\n setProgress(100);\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 return (\n

\n Hacker News Discussion Summarizer\n

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

\n setPostId(e.target.value)}\n onKeyDown={handleKeyDown}\n placeholder=\"Enter Hacker News Post ID\"\n className=\"flex-grow p-2 border rounded-l-lg dark:bg-neutral-800 dark:border-neutral-700\"\n />\n \n {loading ? \"Summarizing...\" : \"Summarize\"}\n \n

\n \n {error && (\n

\n {error}\n

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

,\n h2: ({node, ...props}) =>

,\n h3: ({node, ...props}) =>

,\n blockquote: ({node, ...props}) =>
,\n }}\n >\n {summary}\n \n

\n )}\n

\n \n

\n );\n}\n\nfunction client() {\n createRoot(document.getElementById(\"root\")).render();\n}\nif (typeof document !== \"undefined\") { client(); }\n\nexport default async function server(request: Request): Promise {\n // Handle summary generation endpoint\n if (request.method === \"POST\" && new URL(request.url).pathname === \"/summarize\") {\n try {\n const { GoogleGenerativeAI } = await import(\"https://esm.sh/@google/generative-ai\");\n\n // Retrieve API key from Val Town environment\n const GEMINI_API_KEY = Deno.env.get(\"GEMINI_API_KEY\");\n\n if (!GEMINI_API_KEY) {\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 const genAI = new GoogleGenerativeAI(GEMINI_API_KEY);\n const requestBody = await request.json();\n const comments = requestBody.comments;\n\n const system = `Summarize the themes of the opinions expressed here.\n For each theme, output a markdown header.\n Include direct \"quotations\" with author attribution.and easy to read.\n You MUST quote directly from users when crediting them, with double quotes.\n Make the markdown pretty and content interesting to read. \n Use proper markdown syntax and paragraphs for showing relvant quotes, along with usernames. \n Fix HTML entities. Output markdown. Go long.`;\n const model = genAI.getGenerativeModel({ model: \"gemini-1.5-pro\", systemInstruction: system });\n\n const response = await model.generateContent(comments);\n const text = response.response.text();\n\n return new Response(text, {\n headers: {\n \"Content-Type\": \"text/plain\",\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 requests\n if (request.method === \"OPTIONS\") {\n return new Response(null, {\n headers: {\n \"Access-Control-Allow-Origin\": \"*\",\n \"Access-Control-Allow-Methods\": \"POST, OPTIONS\",\n \"Access-Control-Allow-Headers\": \"Content-Type\",\n },\n });\n }\n\n // Main page response\n return new Response(\n `\n \n \n \n \n \n HN Discussion Summarizer\n \n \n \n \n \n

\n \n \n \n `,\n {\n headers: { \"Content-Type\": \"text/html\" },\n },\n );\n}",["D",1731913105009],"valName","deletedAt","messageId","threadId","routes/_app","actionData","errors"]

\n \n {post.title}\n \n

\n Hacker News Discussion Summarizer\n

Theme Name

\n Hacker News Discussion Summarizer\n

,\n h2: ({node, ...props}) =>

,\n h3: ({node, ...props}) =>

,\n blockquote: ({node, ...props}) => ,\n }}\n >\n {summary}\n \n

,\n blockquote: ({node, ...props}) =>
,\n }}\n >\n {summary}\n \n

summarizeHn

Version 28