\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}","deleted","label",[98],"permalink","https://www.val.town/x/prashamtrivedi/summarizeHn/code/main.tsx","extension","actionData","errors"]