/** @jsxImportSource https://esm.sh/react */ import React, { useEffect, useState } from "https://esm.sh/react"; import { createRoot } from "https://esm.sh/react-dom/client"; function App() { const [url, setUrl] = useState(""); const [summary, setSummary] = useState(""); const [isLoading, setIsLoading] = 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; }); // 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"); } }; // 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 you would like to summarize to continue

{!summary && (

Example URLs:

https://arxiv.org/abs/2411.07279

https://www.anthropic.com/news/github-copilot

https://huggingface.co/papers/2403.09629

)} {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 500 words):\n\n${webpageText}`, }, ], model: "gpt-4o-mini", max_tokens: 500, }); 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" }, }, ); }

insightfulSalmonRabbit