/** @jsxImportSource https://esm.sh/react@18.2.0 */ import { ClipboardDocumentCheckIcon } from "https://esm.sh/@heroicons/react/24/outline"; import { ClipboardIcon, MoonIcon, SunIcon, XMarkIcon } from "https://esm.sh/@heroicons/react/24/solid"; import { createRoot } from "https://esm.sh/react-dom@18.2.0/client"; import React, { useEffect, useState } from "https://esm.sh/react@18.2.0"; function App() { const [url, setUrl] = useState(() => { // Initialize URL from localStorage on first load return localStorage.getItem("lastUsedUrl") || ""; }); const [summary, setSummary] = useState(""); const [isLoading, setIsLoading] = useState(false); const [isCopied, setIsCopied] = useState(false); const [isDarkMode, setIsDarkMode] = useState(() => { // Check localStorage for theme preference or default to system preference const savedTheme = localStorage.getItem("theme"); if (savedTheme) return savedTheme === "dark"; return window.matchMedia("(prefers-color-scheme: dark)").matches; }); // Example URLs const exampleUrls = [ "https://arxiv.org/abs/2411.07279", "https://www.anthropic.com/news/github-copilot", "https://huggingface.co/papers/2403.09629", "https://arxiv.org/abs/2305.20050", ]; // Update localStorage whenever URL changes useEffect(() => { if (url) { localStorage.setItem("lastUsedUrl", url); } }, [url]); // Toggle theme and save to localStorage const toggleTheme = () => { const newTheme = !isDarkMode; setIsDarkMode(newTheme); localStorage.setItem("theme", newTheme ? "dark" : "light"); // Directly manipulate the dark class on the html element const htmlElement = document.documentElement; if (newTheme) { htmlElement.classList.add("dark"); } else { htmlElement.classList.remove("dark"); } }; // Clear URL input const clearUrl = () => { setUrl(""); setSummary(""); }; // Copy summary to clipboard const copyToClipboard = async () => { try { await navigator.clipboard.writeText(summary); setIsCopied(true); // Reset copied state after 2 seconds setTimeout(() => { setIsCopied(false); }, 2000); } catch (err) { console.error("Failed to copy text: ", err); } }; // Apply dark mode class to html element on initial render and when isDarkMode changes useEffect(() => { const htmlElement = document.documentElement; if (isDarkMode) { htmlElement.classList.add("dark"); } else { htmlElement.classList.remove("dark"); } }, [isDarkMode]); const handleSubmit = async (e: React.FormEvent) => { e.preventDefault(); setIsLoading(true); setSummary(""); try { const response = await fetch("/summarize", { method: "POST", body: JSON.stringify({ url }), headers: { "Content-Type": "application/json", }, }); if (!response.ok) { throw new Error("Summarization failed"); } const data = await response.json(); setSummary(data.summary); } catch (error) { setSummary(`Error: ${error instanceof Error ? error.message : "Unknown error"}`); } finally { setIsLoading(false); } }; return (

Web Page Summarizer

Enter a URL for a webpage to summarize to continue

{!summary && (

Example URLs:

{exampleUrls.map((exampleUrl, index) => ( ))}

)} {summary && (

Summary:

{summary}

)}

View Source

); } function client() { createRoot(document.getElementById("root")).render(); } if (typeof document !== "undefined") { client(); } export default async function server(request: Request): Promise { if (request.method === "POST" && new URL(request.url).pathname === "/summarize") { try { const { url } = await request.json(); // Fetch webpage content const webpageResponse = await fetch(url); const webpageText = await webpageResponse.text(); // Use OpenAI as Claude proxy const { OpenAI } = await import("https://esm.town/v/std/openai"); const openai = new OpenAI(); const completion = await openai.chat.completions.create({ messages: [ { role: "system", content: "You are a helpful assistant that summarizes web page content concisely.", }, { role: "user", content: `Please provide a concise summary of the following webpage content (limit to 300 words):\n\n${webpageText}`, }, ], model: "gpt-4o-mini", max_tokens: 300, }); const summary = completion.choices[0].message.content || "Unable to generate summary."; return new Response(JSON.stringify({ summary }), { headers: { "Content-Type": "application/json" }, }); } catch (error) { return new Response( JSON.stringify({ summary: `Error summarizing webpage: ${error instanceof Error ? error.message : "Unknown error"}`, }), { status: 500, headers: { "Content-Type": "application/json" }, }, ); } } return new Response( ` Web Page Summarizer

`, { headers: { "Content-Type": "text/html" }, }, ); }

webpage_summarizer

Versions

v0