/** @jsxImportSource https://esm.sh/react */ import React, { useState, useEffect } from "https://esm.sh/react"; import { createRoot } from "https://esm.sh/react-dom/client"; import { GoogleGenerativeAI } from "https://esm.sh/@google/generative-ai"; function ProgressBar({ progress }) { return (

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

{post.title}

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

Read original post View HN discussion

); } function App() { const [postId, setPostId] = useState(""); const [postDetails, setPostDetails] = useState(null); const [summary, setSummary] = useState(""); const [loading, setLoading] = useState(false); const [error, setError] = useState(""); const [progress, setProgress] = useState(0); const [mounted, setMounted] = useState(false); useEffect(() => { console.log("App component mounted"); setMounted(true); }, []); const fetchAndSummarize = async () => { if (!postId) { setError("Please enter a valid Hacker News post ID"); return; } setLoading(true); setError(""); setSummary(""); setPostDetails(null); setProgress(10); console.log("Starting fetchAndSummarize"); try { // Fetch post details setProgress(30); console.log("Fetching HN post details"); const postResponse = await fetch(`/post-details?id=${postId}`); if (!postResponse.ok) { throw new Error(`Failed to fetch post details: ${postResponse.statusText}`); } const postData = await postResponse.json(); setPostDetails(postData); console.log("Post details fetched", postData); // Fetch comments and generate summary setProgress(60); console.log("Sending summary request"); const summaryResponse = await fetch("/summarize", { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify({ postId, postDetails: postData, }), }); if (!summaryResponse.ok) { const errorText = await summaryResponse.text(); throw new Error(`Failed to get summary: ${errorText}`); } setProgress(90); const summaryText = await summaryResponse.text(); console.log("Summary received", summaryText.substring(0, 100) + "..."); setSummary(summaryText); setLoading(false); setProgress(100); console.log("Summarization complete"); } catch (err) { console.error("Fetch Error:", err); setError(`Error: ${err.message}`); setLoading(false); setProgress(0); } }; const handleKeyDown = (event) => { if (event.key === "Enter" && !loading) { fetchAndSummarize(); } }; if (!mounted) { return

Loading application...

; } return (

Hacker News Discussion Summarizer

{loading && }

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

{error && (

Error: {error}

)} {summary && (

)}

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

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

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

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

Loading application...

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

Theme Name

Theme description with direct quotes from users.

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

')); } // Wrap the response in a styled HTML structure with robust theming const styledSummary = `

${text}

`; return new Response(styledSummary, { headers: { "Content-Type": "text/html", "Access-Control-Allow-Origin": "*", }, }); } catch (error) { console.error("Server-side Error:", error); return new Response( JSON.stringify({ error: `Server error: ${error.message}`, }), { status: 500, headers: { "Content-Type": "application/json", "Access-Control-Allow-Origin": "*", }, } ); } } // Handle CORS preflight requests if (request.method === "OPTIONS") { return new Response(null, { headers: { "Access-Control-Allow-Origin": "*", "Access-Control-Allow-Methods": "GET, POST, OPTIONS", "Access-Control-Allow-Headers": "Content-Type", }, }); } // If no routes match, return a 404 console.log("No matching route found, returning 404"); return new Response("Not Found", { status: 404 }); }

summarizeHn

Versions

v0