Upload 3 files

.gitattributes

@@ -33,3 +33,4 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
 *.zip filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text
+assets/artemis.webp filter=lfs diff=lfs merge=lfs -text

data.txt

@@ -0,0 +1,47 @@
+# Artemis II
+
+Artemis II is a planned lunar flyby mission under the Artemis program, scheduled to launch on April 1, 2026 from the Kennedy Space Center in Cape Canaveral, Florida. The ten-day mission will carry NASA astronauts Reid Wiseman, Victor Glover, and Christina Koch, along with Canadian Space Agency astronaut Jeremy Hansen, on a free-return trajectory around the Moon and back to Earth. It will be the second flight of the Space Launch System (SLS), the first crewed mission of the Orion spacecraft, and the first crewed mission beyond low Earth orbit since Apollo 17 in 1972.
+
+The mission is expected to set several human spaceflight records. Glover would become the first person of color, Koch the first woman, and Hansen the first non-U.S. citizen to travel beyond low Earth orbit. At a distance of approximately 4,700 miles (7,600 km) beyond the Moon and an atmospheric reentry speed of about 25,000 miles per hour (40,000 km/h), the mission would exceed previous crewed flight distance and reentry speed.
+
+Artemis II is a flight test supporting subsequent Artemis missions, which are planned to return humans to the Moon in 2028 for the first time since the Apollo program. Its planned free-return trajectory closely resembles that flown by Apollo 13.
+
+## History
+
+### Hardware development and integration
+
+RS-25 engines were installed on the core stage in New Orleans by September 2023. The fully outfitted core stage was delivered to KSC in July 2024. Rocket stacking began on November 20, 2024, and was completed on October 20, 2025. On January 18, 2026, the integrated SLS rocket, Orion capsule, and launch tower were rolled out to Launch Complex 39B.
+
+### Launch date
+
+The launch date was repeatedly delayed from initial estimates of 2019–2021. In December 2024, the launch was delayed to April 2026 due to engineering investigations into issues with the life support system and heat shield. The earliest launch window was set for early February 2026, but a liquid hydrogen leak during a wet dress rehearsal and a subsequent helium flow issue caused further delays. After a Flight Readiness Review on March 12, seven launch windows were announced for April 1–6 and April 30, with the first at 6:24 pm EDT, April 1.
+
+### Heat shield concerns
+
+Following the uncrewed Artemis I mission in November 2022, NASA identified unexpected erosion of Orion's ablative heat shield after atmospheric reentry. Post-flight inspections found areas of char loss in the AVCOAT material that eroded more extensively than predicted. NASA engineers determined the char loss was caused by trapped gases leading to cracking during reentry. Rather than replacing the heat shield, NASA elected to modify the reentry trajectory by increasing the descent angle, reducing time in the thermal environment. Additional testing showed the capsule would remain intact under conditions exceeding those expected during mission reentry. Design changes addressing AVCOAT permeability are planned for Artemis III.
+
+## Crew
+
+Artemis II will be crewed by four astronauts: commander Reid Wiseman (NASA), pilot Victor Glover (NASA), mission specialist Christina Koch (NASA), along with mission specialist Jeremy Hansen (Canadian Space Agency). Glover would become the first person of color, Koch the first woman, and Hansen the first non-American to travel around the Moon. This mission will break the record for the most people in deep space at once, set at three during Apollo 8 in 1968.
+
+## Mission
+
+The mission plan sends four astronauts in the first crewed Orion spacecraft on a lunar flyby using the Block 1 variant of the Space Launch System. The profile includes multiple departure burns and a free-return trajectory from the Moon. Orion will first enter a high Earth orbit, where the crew will perform spacecraft checkouts and proximity operations with the spent ICPS. It will then perform a translunar injection burn, fly around the Moon at approximately 4,047 miles (6,513 km) from the far-side surface, and return to Earth.
+
+Orion will re-enter Earth's atmosphere at approximately 25,000 miles per hour (40,000 km/h), the fastest reentry ever attempted. Due to heat shield concerns from Artemis I, mission managers replaced the planned skip reentry with a steeper entry profile. Splashdown is planned in the Pacific Ocean off San Diego.
+
+### Optical communications
+
+Artemis II will test optical communications using the Orion Artemis II Optical Communications System (O2O), sending data to Earth at up to 260 megabits per second via ground stations in California and New Mexico.
+
+### Science payloads
+
+NASA will fly AVATAR (A Virtual Astronaut Tissue Analog Response), which mimics individual astronaut organs, marking its first test outside the ISS and Van Allen Belt. The ARCHAR payload will monitor crew movement and sleep patterns, and test immune biomarkers through saliva samples to study the effects of radiation and isolation during deep space flight.
+
+## CubeSat secondary payloads
+
+Five CubeSats from international Artemis Accords signatories will fly aboard the mission: Germany's TACHELES (testing electrical components for lunar vehicles), Argentina's ATENEA (radiation shielding and communication testing), Korea's K-RadCube (space radiation effects on human tissue analogues), Saudi Arabia's Space Weather CubeSat-1 (space weather measurements), and an Avionics Unit.
+
+## Similar missions
+
+Artemis II's objectives are comparable to Apollo 8, the first crewed lunar mission in 1968. Unlike Apollo 8 and Apollo 10, which orbited the Moon, Artemis II will fly a free-return trajectory like Apollo 13. While Apollo 13 came within 158 miles (254 km) of the lunar surface, Artemis II's closest approach will be ~4,700 miles (7,600 km).

index.html

@@ -1,19 +1,762 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>LFM2.5 Summarizer | WebGPU</title>
+    <style>
+        :root {
+            --bg: #0f1117;
+            --surface: #1a1d27;
+            --surface-hover: #222632;
+            --border: #2a2e3b;
+            --text: #e4e4e7;
+            --text-muted: #8b8fa3;
+            --accent: #6366f1;
+            --accent-glow: rgba(99, 102, 241, 0.25);
+            --accent-light: #818cf8;
+            --radius: 12px;
+        }
+
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        body {
+            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
+            background: var(--bg);
+            color: var(--text);
+            min-height: 100vh;
+            line-height: 1.7;
+        }
+
+        /* Layout */
+        main {
+            max-width: 1100px;
+            margin: 0 auto;
+            padding: 2.5rem 2rem 6rem;
+        }
+
+        .article-layout {
+            display: grid;
+            grid-template-columns: 1fr 280px;
+            gap: 2.5rem;
+            align-items: start;
+        }
+
+        .article-aside {
+            position: sticky;
+            top: 2.5rem;
+        }
+
+        .article-figure {
+            border-radius: var(--radius);
+            overflow: hidden;
+            border: 1px solid var(--border);
+            background: var(--surface);
+        }
+
+        .article-figure img {
+            width: 100%;
+            display: block;
+        }
+
+        .article-figure figcaption {
+            padding: 10px 14px;
+            font-size: 0.78rem;
+            line-height: 1.5;
+            color: var(--text-muted);
+        }
+
+        @media (max-width: 768px) {
+            .article-layout {
+                grid-template-columns: 1fr;
+            }
+
+            .article-aside {
+                position: static;
+                order: -1;
+            }
+
+            .article-figure {
+                max-width: 320px;
+            }
+        }
+
+        /* Article typography */
+        .article-content h1 {
+            font-size: 2.2rem;
+            font-weight: 800;
+            letter-spacing: -0.03em;
+            margin-bottom: 1.5rem;
+            line-height: 1.2;
+            background: linear-gradient(135deg, var(--text), var(--text-muted));
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+        }
+
+        .article-content h2 {
+            font-size: 1.5rem;
+            font-weight: 700;
+            letter-spacing: -0.02em;
+            margin-top: 2.5rem;
+            margin-bottom: 1rem;
+            padding-top: 1.5rem;
+            border-top: 1px solid var(--border);
+        }
+
+        .article-content h3 {
+            font-size: 1.15rem;
+            font-weight: 600;
+            margin-top: 2rem;
+            margin-bottom: 0.75rem;
+            color: var(--text-muted);
+        }
+
+        .article-content h4 {
+            font-size: 1.02rem;
+            font-weight: 600;
+            margin-top: 1.5rem;
+            margin-bottom: 0.5rem;
+            color: var(--text-muted);
+        }
+
+        .article-content p {
+            margin-bottom: 1.25rem;
+            font-size: 1.02rem;
+            position: relative;
+        }
+
+        /* Hoverable paragraphs with summarize button */
+        .article-content p.hoverable {
+            padding: 10px 14px;
+            border-radius: 8px;
+            transition: background 0.2s;
+        }
+
+        .article-content p.hoverable:hover {
+            background: var(--surface);
+        }
+
+        .summarize-btn {
+            position: absolute;
+            top: 8px;
+            right: 8px;
+            display: flex;
+            align-items: center;
+            gap: 5px;
+            padding: 5px 12px;
+            border: 1px solid var(--border);
+            border-radius: 7px;
+            background: var(--surface);
+            color: var(--accent-light);
+            font-size: 0.75rem;
+            font-weight: 600;
+            cursor: pointer;
+            opacity: 0;
+            pointer-events: none;
+            transition: all 0.15s;
+            white-space: nowrap;
+        }
+
+        .summarize-btn svg {
+            flex-shrink: 0;
+        }
+
+        .article-content p.hoverable:hover .summarize-btn {
+            opacity: 1;
+            pointer-events: auto;
+        }
+
+        .summarize-btn:hover {
+            background: var(--surface-hover);
+            border-color: var(--accent);
+            box-shadow: 0 0 12px var(--accent-glow);
+        }
+
+        /* Summary result block */
+        .summary-block {
+            background: rgba(99, 102, 241, 0.06);
+            border-radius: 8px;
+            padding: 14px 16px;
+            margin: 1.25rem 0;
+        }
+
+        .summary-block .label {
+            display: inline-flex;
+            align-items: center;
+            gap: 5px;
+            font-size: 0.68rem;
+            font-weight: 700;
+            text-transform: uppercase;
+            letter-spacing: 0.08em;
+            color: var(--accent-light);
+            margin-bottom: 4px;
+        }
+
+        .summary-block .output {
+            margin: 0;
+            font-size: 1.02rem;
+            line-height: 1.7;
+        }
+
+        .summary-block .stats {
+            display: inline-flex;
+            align-items: center;
+            gap: 6px;
+            font-size: 0.72rem;
+            color: var(--text-muted);
+            margin-top: 8px;
+            padding-top: 8px;
+            border-top: 1px solid var(--border);
+        }
+
+        .summary-block .stats span {
+            color: var(--accent-light);
+            font-weight: 600;
+        }
+
+        /* Spinner */
+        @keyframes spin {
+            to { transform: rotate(360deg); }
+        }
+
+        .spinner {
+            display: inline-block;
+            width: 10px;
+            height: 10px;
+            border: 1.5px solid var(--accent-glow);
+            border-top-color: var(--accent-light);
+            border-radius: 50%;
+            animation: spin 0.6s linear infinite;
+        }
+
+        /* Chat widget */
+        .chat-widget {
+            position: fixed;
+            bottom: 24px;
+            right: 24px;
+            z-index: 150;
+            display: flex;
+            flex-direction: column;
+            align-items: flex-end;
+            gap: 10px;
+            width: 400px;
+            max-width: calc(100vw - 48px);
+        }
+
+        /* Response bubble */
+        .chat-response {
+            width: 100%;
+            background: var(--surface);
+            border: 1px solid var(--border);
+            border-radius: 14px;
+            padding: 16px;
+            box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
+            display: none;
+            animation: bubbleIn 0.2s ease-out;
+            max-height: 50vh;
+            overflow-y: auto;
+        }
+
+        @keyframes bubbleIn {
+            from { opacity: 0; transform: translateY(8px) scale(0.97); }
+            to { opacity: 1; transform: translateY(0) scale(1); }
+        }
+
+        .chat-response.visible {
+            display: block;
+        }
+
+        .chat-response-header {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            margin-bottom: 8px;
+        }
+
+        .chat-response .chat-label {
+            display: inline-flex;
+            align-items: center;
+            gap: 5px;
+            font-size: 0.65rem;
+            font-weight: 700;
+            text-transform: uppercase;
+            letter-spacing: 0.08em;
+            color: var(--accent-light);
+        }
+
+        .chat-close {
+            width: 24px;
+            height: 24px;
+            border: none;
+            border-radius: 6px;
+            background: transparent;
+            color: var(--text-muted);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            transition: all 0.15s;
+            flex-shrink: 0;
+        }
+
+        .chat-close:hover {
+            background: var(--surface-hover);
+            color: var(--text);
+        }
+
+        .chat-response .chat-question {
+            font-size: 0.8rem;
+            color: var(--text-muted);
+            margin-bottom: 8px;
+            padding-bottom: 8px;
+            border-bottom: 1px solid var(--border);
+            font-style: italic;
+        }
+
+        .chat-response .chat-text {
+            margin: 0;
+            font-size: 0.9rem;
+            line-height: 1.6;
+        }
+
+        .chat-response .chat-stats {
+            font-size: 0.7rem;
+            color: var(--text-muted);
+            margin-top: 8px;
+            padding-top: 8px;
+            border-top: 1px solid var(--border);
+        }
+
+        .chat-response .chat-stats span {
+            color: var(--accent-light);
+            font-weight: 600;
+        }
+
+        /* Input row */
+        .chat-input-row {
+            display: flex;
+            gap: 8px;
+            align-items: center;
+            width: 100%;
+            background: var(--surface);
+            border: 1px solid var(--border);
+            border-radius: 12px;
+            padding: 6px 6px 6px 16px;
+            box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
+            transition: border-color 0.15s;
+        }
+
+        .chat-input-row:focus-within {
+            border-color: var(--accent);
+        }
+
+        .chat-input {
+            flex: 1;
+            padding: 6px 0;
+            border: none;
+            background: transparent;
+            color: var(--text);
+            font-size: 0.9rem;
+            font-family: inherit;
+            outline: none;
+        }
+
+        .chat-input::placeholder {
+            color: var(--text-muted);
+        }
+
+        .chat-input:disabled {
+            opacity: 0.5;
+        }
+
+        .chat-send {
+            width: 34px;
+            height: 34px;
+            border: none;
+            border-radius: 8px;
+            background: var(--accent);
+            color: white;
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            flex-shrink: 0;
+            transition: all 0.15s;
+        }
+
+        .chat-send:hover:not(:disabled) {
+            background: var(--accent-light);
+            box-shadow: 0 0 16px var(--accent-glow);
+        }
+
+        .chat-send:disabled {
+            opacity: 0.4;
+            cursor: not-allowed;
+        }
+
+        /* Loading overlay */
+        .loading-overlay {
+            position: fixed;
+            inset: 0;
+            background: rgba(15, 17, 23, 0.6);
+            backdrop-filter: blur(4px);
+            z-index: 200;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            transition: opacity 0.4s;
+        }
+
+        .loading-overlay.hidden {
+            opacity: 0;
+            pointer-events: none;
+        }
+
+        .loading-card {
+            background: var(--surface);
+            border: 1px solid var(--border);
+            border-radius: 20px;
+            padding: 3rem 3rem 2.5rem;
+            text-align: center;
+            max-width: 420px;
+            width: 100%;
+            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
+        }
+
+        .loading-card h2 {
+            font-size: 1.2rem;
+            font-weight: 700;
+            margin-bottom: 6px;
+        }
+
+        .loading-card p {
+            font-size: 0.85rem;
+            color: var(--text-muted);
+            margin-bottom: 28px;
+        }
+
+        .loading-progress {
+            height: 6px;
+            background: var(--bg);
+            border-radius: 3px;
+            overflow: hidden;
+        }
+
+        .loading-progress-fill {
+            height: 100%;
+            background: linear-gradient(90deg, var(--accent), #a78bfa);
+            border-radius: 3px;
+            transition: width 0.3s;
+            width: 0%;
+        }
+
+        .loading-detail {
+            font-size: 0.78rem;
+            color: var(--text-muted);
+            margin-top: 14px;
+        }
+    </style>
+</head>
+
+<body>
+    <main>
+        <div class="article-layout">
+            <div class="article-content" id="article"></div>
+            <aside class="article-aside">
+                <figure class="article-figure">
+                    <img src="./assets/artemis.webp" alt="SLS rocket for Artemis II at Launch Complex 39B" />
+                    <figcaption>The Space Launch System (SLS) rocket for Artemis II
+                        at Launch Complex 39B in March 2026</figcaption>
+                </figure>
+            </aside>
+        </div>
+    </main>
+
+    <div class="chat-widget">
+        <div class="chat-response" id="chat-response">
+            <div class="chat-response-header">
+                <div class="chat-label" id="chat-label"><span class="spinner"></span> Thinking</div>
+                <button class="chat-close" id="chat-close">
+                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+                        stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
+                        <path d="M18 6L6 18M6 6l12 12" />
+                    </svg>
+                </button>
+            </div>
+            <div class="chat-question" id="chat-question"></div>
+            <p class="chat-text" id="chat-text"></p>
+            <div class="chat-stats" id="chat-stats"></div>
+        </div>
+        <div class="chat-input-row">
+            <input type="text" class="chat-input" id="chat-input"
+                placeholder="Ask about this article..." autocomplete="off" disabled />
+            <button class="chat-send" id="chat-send" disabled>
+                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"
+                    stroke-linecap="round" stroke-linejoin="round">
+                    <path d="M5 12h14M12 5l7 7-7 7" />
+                </svg>
+            </button>
+        </div>
+    </div>
+
+    <div class="loading-overlay" id="loading-overlay">
+        <div class="loading-card">
+            <h2>Loading LFM2.5-350M</h2>
+            <p>Downloading model and compiling WebGPU shaders</p>
+            <div class="loading-progress">
+                <div class="loading-progress-fill" id="loading-progress-fill"></div>
+            </div>
+            <div class="loading-detail" id="loading-detail">Starting...</div>
+        </div>
+    </div>
+
+    <script type="module">
+        import { pipeline, TextStreamer } from "https://cdn.jsdelivr.net/npm/@huggingface/transformers@4.0.0";
+
+        const SUMMARIZE_SVG = `<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 6h16M4 12h10M4 18h14"/></svg>`;
+
+        // ── State ──
+        let generator = null;
+        let isGenerating = false;
+        let articleSource = "";
+
+        // ── DOM refs ──
+        const article = document.getElementById("article");
+        const loadingOverlay = document.getElementById("loading-overlay");
+        const loadingProgressFill = document.getElementById("loading-progress-fill");
+        const loadingDetail = document.getElementById("loading-detail");
+        const chatInput = document.getElementById("chat-input");
+        const chatSend = document.getElementById("chat-send");
+        const chatResponse = document.getElementById("chat-response");
+        const chatLabel = document.getElementById("chat-label");
+        const chatQuestion = document.getElementById("chat-question");
+        const chatText = document.getElementById("chat-text");
+        const chatStats = document.getElementById("chat-stats");
+        const chatClose = document.getElementById("chat-close");
+
+        // ── Markdown → HTML ──
+        function markdownToHTML(md) {
+            const HEADINGS = [
+                { prefix: "#### ", tag: "h4" },
+                { prefix: "### ", tag: "h3" },
+                { prefix: "## ", tag: "h2" },
+                { prefix: "# ", tag: "h1" },
+            ];
+
+            const lines = md.split("\n");
+            let html = "";
+            let buffer = "";
+
+            const flushBuffer = () => {
+                if (buffer) {
+                    html += `<p>${buffer.trim()}</p>`;
+                    buffer = "";
+                }
+            };
+
+            for (const line of lines) {
+                const heading = HEADINGS.find((h) => line.startsWith(h.prefix));
+                if (heading) {
+                    flushBuffer();
+                    html += `<${heading.tag}>${line.slice(heading.prefix.length)}</${heading.tag}>`;
+                } else if (line.trim() === "") {
+                    flushBuffer();
+                } else {
+                    buffer += (buffer ? " " : "") + line.replace(/\[\d+\]/g, "");
+                }
+            }
+            flushBuffer();
+            return html;
+        }
+
+        // ── Attach summarize buttons to all <p> in the article ──
+        function attachSummarizeButtons() {
+            for (const p of article.querySelectorAll("p")) {
+                if (p.classList.contains("hoverable")) continue;
+                p.classList.add("hoverable");
+
+                const btn = document.createElement("button");
+                btn.className = "summarize-btn";
+                btn.innerHTML = `${SUMMARIZE_SVG} Summarize`;
+                btn.onclick = (e) => {
+                    e.stopPropagation();
+                    summarizeParagraph(p);
+                };
+                p.appendChild(btn);
+            }
+        }
+
+        // ── Load article + model ──
+        async function loadArticle() {
+            const res = await fetch("data.txt");
+            articleSource = await res.text();
+            article.innerHTML = markdownToHTML(articleSource);
+        }
+
+        async function loadModel() {
+            loadingDetail.textContent = "Downloading model...";
+
+            generator = await pipeline(
+                "text-generation",
+                "onnx-community/LFM2.5-350M-ONNX",
+                {
+                    dtype: "q4",
+                    device: "webgpu",
+                    progress_callback: (progress) => {
+                        if (progress.status === "progress_total") {
+                            loadingProgressFill.style.width = `${progress.progress ?? 0}%`;
+                        }
+                    },
+                },
+            );
+
+            loadingOverlay.classList.add("hidden");
+            chatInput.disabled = false;
+            chatSend.disabled = false;
+            chatInput.focus();
+        }
+
+        // ── Summarize a paragraph ──
+        async function summarizeParagraph(p) {
+            if (!generator || isGenerating) return;
+            isGenerating = true;
+
+            const originalText = p.textContent.trim();
+            const originalWordCount = originalText.split(/\s+/).length;
+
+            const block = document.createElement("div");
+            block.className = "summary-block";
+
+            const label = document.createElement("div");
+            label.className = "label";
+            label.innerHTML = `<span class="spinner"></span> Summarizing`;
+            block.appendChild(label);
+
+            const output = document.createElement("p");
+            output.className = "output";
+            block.appendChild(output);
+
+            p.replaceWith(block);
+
+            const t0 = performance.now();
+            let tFirstToken = null;
+            let tokenCount = 0;
+
+            const streamer = new TextStreamer(generator.tokenizer, {
+                skip_prompt: true,
+                skip_special_tokens: true,
+                callback_function: (text) => {
+                    tFirstToken ??= performance.now();
+                    tokenCount++;
+                    output.textContent += text;
+                },
+            });
+
+            try {
+                await generator(
+                    [
+                        // { role: "system", content: "You are a concise summarizer. Summarize the given text in a brief paragraph, preserving key facts. Output only the summary, nothing else." },
+                        { role: "user", content: `Summarize this:\n\n${originalText}` },
+                    ],
+                    { max_new_tokens: 512, do_sample: false, streamer },
+                );
+            } catch (err) {
+                output.textContent = "Error: " + err.message;
+            }
+
+            const elapsed = ((performance.now() - t0) / 1000).toFixed(1);
+            const decodeTime = (performance.now() - (tFirstToken ?? t0)) / 1000;
+            const tokPerSec = tokenCount > 1 ? ((tokenCount - 1) / decodeTime).toFixed(1) : "\u2014";
+            const summaryWordCount = output.textContent.split(/\s+/).length;
+
+            label.textContent = "Summary";
+
+            const stats = document.createElement("div");
+            stats.className = "stats";
+            stats.innerHTML = `<span>${originalWordCount}</span> words &rarr; <span>${summaryWordCount}</span> words &middot; ${elapsed}s &middot; <span>${tokPerSec}</span> tok/s`;
+            block.appendChild(stats);
+
+            isGenerating = false;
+        }
+
+        // ── Chat: ask a question about the article ──
+        async function askQuestion() {
+            const question = chatInput.value.trim();
+            if (!question || !generator || isGenerating) return;
+
+            isGenerating = true;
+            chatInput.disabled = true;
+            chatSend.disabled = true;
+
+            // Reset response area
+            chatQuestion.textContent = question;
+            chatText.textContent = "";
+            chatStats.textContent = "";
+            chatLabel.innerHTML = `<span class="spinner"></span> Thinking`;
+            chatResponse.classList.add("visible");
+            chatInput.value = "";
+
+            const t0 = performance.now();
+            let tFirstToken = null;
+            let tokenCount = 0;
+
+            const streamer = new TextStreamer(generator.tokenizer, {
+                skip_prompt: true,
+                skip_special_tokens: true,
+                callback_function: (text) => {
+                    tFirstToken ??= performance.now();
+                    tokenCount++;
+                    chatText.textContent += text;
+                },
+            });
+
+            try {
+                await generator(
+                    [
+                        { role: "system", content: `You are a helpful assistant. Answer the user's question based on the following article. Be concise and accurate. If the answer is not in the article, say so.\n\n${articleSource}` },
+                        { role: "user", content: question },
+                    ],
+                    { max_new_tokens: 512, do_sample: false, streamer },
+                );
+            } catch (err) {
+                chatText.textContent = "Error: " + err.message;
+            }
+
+            const elapsed = ((performance.now() - t0) / 1000).toFixed(1);
+            const decodeTime = (performance.now() - (tFirstToken ?? t0)) / 1000;
+            const tokPerSec = tokenCount > 1 ? ((tokenCount - 1) / decodeTime).toFixed(1) : "\u2014";
+
+            chatLabel.textContent = "Answer";
+            chatStats.innerHTML = `${elapsed}s &middot; <span>${tokPerSec}</span> tok/s`;
+
+            isGenerating = false;
+            chatInput.disabled = false;
+            chatSend.disabled = false;
+            chatInput.focus();
+        }
+
+        chatSend.onclick = askQuestion;
+        chatInput.addEventListener("keydown", (e) => {
+            if (e.key === "Enter" && !e.shiftKey) {
+                e.preventDefault();
+                askQuestion();
+            }
+        });
+        chatClose.onclick = () => {
+            if (!isGenerating) chatResponse.classList.remove("visible");
+        };
+
+        // ── Init ──
+        await loadArticle();
+        attachSummarizeButtons();
+        loadModel();
+    </script>
+</body>
+
 </html>