Initial deploy

.gitignore

@@ -0,0 +1,20 @@
+# Python
+.venv/
+__pycache__/
+*.pyc
+*.pyo
+*.pyd
+*.egg-info/
+dist/
+build/
+
+# HuggingFace model cache (don't commit 2GB of weights)
+.cache/
+
+# OS
+.DS_Store
+Thumbs.db
+
+# Temp files
+*.tmp
+*.log

Dockerfile

@@ -0,0 +1,33 @@
+# ── GLM-OCR — Dockerfile (Hugging Face Spaces) ────────────────────────────
+#
+# HF Spaces builds this automatically when you push to your Space repo.
+# No local Docker needed — HF handles the build and hosting.
+# ──────────────────────────────────────────────────────────────────────────
+
+FROM pytorch/pytorch:2.2.0-cuda12.1-cudnn8-runtime
+
+# ── System deps ────────────────────────────────────────────────────────────
+RUN apt-get update && apt-get install -y --no-install-recommends \
+    libgl1-mesa-glx \
+    libglib2.0-0 \
+    curl \
+ && rm -rf /var/lib/apt/lists/*
+
+# ── Workdir ────────────────────────────────────────────────────────────────
+WORKDIR /app
+
+# ── Python deps ────────────────────────────────────────────────────────────
+COPY requirements.txt ./
+RUN pip install --no-cache-dir -r requirements.txt
+
+# ── Copy source (flat structure) ───────────────────────────────────────────
+COPY main.py ocr_engine.py ./
+COPY frontend/ ./frontend/
+
+# ── Model weights download at first startup (not baked into image) ─────────
+# HF Spaces caches ~/.cache/huggingface across restarts on paid tiers.
+# On the free tier the model (~1-2 GB) re-downloads on each cold start.
+
+# ── Expose & run (HF Spaces requires port 7860) ────────────────────────────
+EXPOSE 7860
+CMD ["uvicorn", "main:app", "--host", "0.0.0.0", "--port", "7860"]

Extension/background.js

@@ -0,0 +1,124 @@
+// background.js — Service worker
+// Handles: tab screenshot, image crop, OCR API call, result relay
+
+const OCR_ENDPOINT = "http://localhost:8000/ocr";
+const OCR_MODE     = "recognize"; // or "parse"
+
+// ── Listen for messages from content.js ─────────────────────────────────────
+
+chrome.runtime.onMessage.addListener((msg, sender, sendResponse) => {
+
+  if (msg.type === "CAPTURE_REGION") {
+    handleCapture(msg.rect, sender.tab)
+      .then(result  => sendResponse({ success: true,  ...result }))
+      .catch(error  => sendResponse({ success: false, error: error.message }));
+    return true; // keep channel open for async
+  }
+
+  if (msg.type === "PING") {
+    checkServer().then(ok => sendResponse({ ok }));
+    return true;
+  }
+
+  if (msg.type === "OPEN_SIDEBAR") {
+    // Open the sidebar as a side panel in the current tab
+    chrome.tabs.sendMessage(sender.tab.id, { type: "SHOW_SIDEBAR" });
+    return false;
+  }
+
+});
+
+// ── Capture + crop + OCR ─────────────────────────────────────────────────────
+
+async function handleCapture(rect, tab) {
+  // 1. Capture the entire visible tab as a data URL
+  const dataUrl = await chrome.tabs.captureVisibleTab(tab.windowId, {
+    format: "png",
+    quality: 100,
+  });
+
+  // 2. Crop to the selected rect using OffscreenCanvas
+  const croppedBlob = await cropImage(dataUrl, rect);
+
+  // 3. Send to GLM-OCR backend
+  const formData = new FormData();
+  formData.append("file", croppedBlob, "selection.png");
+  formData.append("mode", OCR_MODE);
+
+  const res = await fetch(OCR_ENDPOINT, {
+    method: "POST",
+    body: formData,
+  });
+
+  if (!res.ok) {
+    const err = await res.json().catch(() => ({}));
+    throw new Error(err.detail || `Server returned ${res.status}`);
+  }
+
+  const data = await res.json();
+
+  // Also store the cropped image as a data URL for display in the sidebar
+  const croppedDataUrl = await blobToDataUrl(croppedBlob);
+
+  return {
+    text:        data.text,
+    word_count:  data.word_count,
+    char_count:  data.char_count,
+    latency_ms:  data.latency_ms,
+    mode:        data.mode,
+    device:      data.device,
+    imageDataUrl: croppedDataUrl,
+    timestamp:   new Date().toISOString(),
+  };
+}
+
+// ── Image cropping using OffscreenCanvas ─────────────────────────────────────
+
+async function cropImage(dataUrl, rect) {
+  // Decode the full screenshot
+  const res  = await fetch(dataUrl);
+  const blob = await res.blob();
+  const bitmap = await createImageBitmap(blob);
+
+  // Scale rect by device pixel ratio (already baked into captureVisibleTab)
+  // captureVisibleTab captures at device pixel ratio already, so rect coords
+  // from getBoundingClientRect need to be scaled.
+  const dpr = rect.dpr || 1;
+  const sx  = Math.round(rect.x      * dpr);
+  const sy  = Math.round(rect.y      * dpr);
+  const sw  = Math.round(rect.width  * dpr);
+  const sh  = Math.round(rect.height * dpr);
+
+  // Clamp to bitmap bounds
+  const cx = Math.max(0, sx);
+  const cy = Math.max(0, sy);
+  const cw = Math.min(sw, bitmap.width  - cx);
+  const ch = Math.min(sh, bitmap.height - cy);
+
+  const canvas = new OffscreenCanvas(cw, ch);
+  const ctx    = canvas.getContext("2d");
+  ctx.drawImage(bitmap, cx, cy, cw, ch, 0, 0, cw, ch);
+
+  return canvas.convertToBlob({ type: "image/png" });
+}
+
+function blobToDataUrl(blob) {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onload  = () => resolve(reader.result);
+    reader.onerror = reject;
+    reader.readAsDataURL(blob);
+  });
+}
+
+// ── Server health check ───────────────────────────────────────────────────────
+
+async function checkServer() {
+  try {
+    const r = await fetch("http://localhost:8000/health", { signal: AbortSignal.timeout(3000) });
+    const d = await r.json();
+    return d.status === "ok";
+  } catch {
+    return false;
+  }
+}

Extension/content.css

@@ -0,0 +1,82 @@
+/* content.css — Styles injected into every page for the selection overlay */
+
+/* ── Overlay ── */
+#glmocr-overlay {
+  position: fixed !important;
+  inset: 0 !important;
+  background: rgba(0, 0, 0, 0.45) !important;
+  z-index: 2147483646 !important;
+  cursor: crosshair !important;
+  user-select: none !important;
+}
+
+/* ── Hint text ── */
+#glmocr-hint {
+  position: absolute !important;
+  top: 20px !important;
+  left: 50% !important;
+  transform: translateX(-50%) !important;
+  background: rgba(0, 0, 0, 0.8) !important;
+  color: #f5f0e8 !important;
+  font-family: 'IBM Plex Mono', monospace, monospace !important;
+  font-size: 13px !important;
+  padding: 10px 18px !important;
+  border-radius: 4px !important;
+  letter-spacing: 0.04em !important;
+  pointer-events: none !important;
+  white-space: nowrap !important;
+  border: 1px solid rgba(255,255,255,0.15) !important;
+  transition: opacity 0.2s !important;
+}
+
+/* ── Selection box ── */
+#glmocr-selbox {
+  position: fixed !important;
+  display: none !important;
+  border: 2px solid #c94a1f !important;
+  background: rgba(201, 74, 31, 0.08) !important;
+  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.35) !important;
+  pointer-events: none !important;
+  z-index: 2147483647 !important;
+}
+
+/* ── Sidebar iframe ── */
+#glmocr-sidebar {
+  position: fixed !important;
+  top: 0 !important;
+  right: 0 !important;
+  width: 380px !important;
+  height: 100vh !important;
+  border: none !important;
+  z-index: 2147483645 !important;
+  border-left: 2px solid #d4cfc3 !important;
+  box-shadow: -4px 0 24px rgba(0,0,0,0.12) !important;
+  animation: glmocr-slideIn 0.25s cubic-bezier(0.22, 1, 0.36, 1) !important;
+}
+
+@keyframes glmocr-slideIn {
+  from { transform: translateX(100%); opacity: 0; }
+  to   { transform: translateX(0);    opacity: 1; }
+}
+
+/* ── Toast ── */
+#glmocr-toast {
+  position: fixed !important;
+  bottom: 24px !important;
+  left: 50% !important;
+  transform: translateX(-50%) !important;
+  background: #0f0e0d !important;
+  color: #f5f0e8 !important;
+  font-family: 'IBM Plex Mono', monospace, monospace !important;
+  font-size: 13px !important;
+  padding: 10px 20px !important;
+  border-radius: 4px !important;
+  z-index: 2147483647 !important;
+  white-space: nowrap !important;
+  animation: glmocr-fadeUp 0.3s ease both !important;
+}
+
+@keyframes glmocr-fadeUp {
+  from { opacity: 0; transform: translateX(-50%) translateY(12px); }
+  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
+}

Extension/content.js

@@ -0,0 +1,184 @@
+// content.js — Injected into every page
+// Manages the screen selection overlay and sidebar panel
+
+let overlayActive = false;
+let sidebarFrame  = null;
+
+// ── Listen for messages from background / popup ───────────────────────────────
+
+chrome.runtime.onMessage.addListener((msg, _sender, sendResponse) => {
+
+  if (msg.type === "START_SELECTION") {
+    if (!overlayActive) startSelection();
+    sendResponse({ ok: true });
+    return false;
+  }
+
+  if (msg.type === "SHOW_SIDEBAR") {
+    showSidebar({});
+    return false;
+  }
+
+  if (msg.type === "SHOW_RESULT") {
+    showSidebar(msg.data);
+    return false;
+  }
+
+});
+
+// ── Selection overlay ─────────────────────────────────────────────────────────
+
+function startSelection() {
+  overlayActive = true;
+
+  // Dim the page
+  const overlay = document.createElement("div");
+  overlay.id = "glmocr-overlay";
+
+  // Crosshair hint
+  const hint = document.createElement("div");
+  hint.id = "glmocr-hint";
+  hint.textContent = "Drag to select text region — Press Esc to cancel";
+  overlay.appendChild(hint);
+
+  // Selection box
+  const selBox = document.createElement("div");
+  selBox.id = "glmocr-selbox";
+  overlay.appendChild(selBox);
+
+  document.body.appendChild(overlay);
+
+  let startX = 0, startY = 0, isDragging = false;
+
+  function onMouseDown(e) {
+    if (e.button !== 0) return;
+    isDragging = true;
+    startX = e.clientX;
+    startY = e.clientY;
+    selBox.style.cssText = `left:${startX}px; top:${startY}px; width:0; height:0; display:block`;
+    hint.style.opacity = "0";
+    e.preventDefault();
+  }
+
+  function onMouseMove(e) {
+    if (!isDragging) return;
+    const x = Math.min(e.clientX, startX);
+    const y = Math.min(e.clientY, startY);
+    const w = Math.abs(e.clientX - startX);
+    const h = Math.abs(e.clientY - startY);
+    selBox.style.cssText = `left:${x}px; top:${y}px; width:${w}px; height:${h}px; display:block`;
+  }
+
+  function onMouseUp(e) {
+    if (!isDragging) return;
+    isDragging = false;
+
+    const x = Math.min(e.clientX, startX);
+    const y = Math.min(e.clientY, startY);
+    const w = Math.abs(e.clientX - startX);
+    const h = Math.abs(e.clientY - startY);
+
+    cleanup();
+
+    if (w < 10 || h < 10) {
+      showToast("Selection too small — try again.");
+      return;
+    }
+
+    const dpr = window.devicePixelRatio || 1;
+    const rect = {
+      x:      x + window.scrollX,
+      y:      y + window.scrollY,
+      width:  w,
+      height: h,
+      dpr,
+    };
+
+    runOcr(rect);
+  }
+
+  function onKeyDown(e) {
+    if (e.key === "Escape") {
+      cleanup();
+      showToast("Cancelled.");
+    }
+  }
+
+  function cleanup() {
+    overlayActive = false;
+    overlay.removeEventListener("mousedown", onMouseDown);
+    overlay.removeEventListener("mousemove", onMouseMove);
+    overlay.removeEventListener("mouseup",   onMouseUp);
+    document.removeEventListener("keydown",  onKeyDown);
+    overlay.remove();
+  }
+
+  overlay.addEventListener("mousedown", onMouseDown);
+  overlay.addEventListener("mousemove", onMouseMove);
+  overlay.addEventListener("mouseup",   onMouseUp);
+  document.addEventListener("keydown",  onKeyDown);
+}
+
+// ── Send region to background for capture + OCR ───────────────────────────────
+
+function runOcr(rect) {
+  // Show a loading sidebar immediately
+  showSidebar({ loading: true });
+
+  chrome.runtime.sendMessage({ type: "CAPTURE_REGION", rect }, (response) => {
+    if (chrome.runtime.lastError) {
+      showSidebar({ error: chrome.runtime.lastError.message });
+      return;
+    }
+    if (response.success) {
+      showSidebar(response);
+    } else {
+      showSidebar({ error: response.error });
+    }
+  });
+}
+
+// ── Sidebar panel ─────────────────────────────────────────────────────────────
+
+function showSidebar(data) {
+  // Remove existing sidebar if any
+  if (sidebarFrame) sidebarFrame.remove();
+
+  const frame = document.createElement("iframe");
+  frame.id  = "glmocr-sidebar";
+  frame.src = chrome.runtime.getURL("sidebar.html");
+
+  document.body.appendChild(frame);
+  sidebarFrame = frame;
+
+  // Wait for iframe to load, then send data
+  frame.onload = () => {
+    frame.contentWindow.postMessage({ type: "SIDEBAR_DATA", data }, "*");
+  };
+
+  // Close button via message from sidebar
+  window.addEventListener("message", (e) => {
+    if (e.data?.type === "CLOSE_SIDEBAR") {
+      frame.remove();
+      sidebarFrame = null;
+    }
+    if (e.data?.type === "START_NEW_SELECTION") {
+      frame.remove();
+      sidebarFrame = null;
+      startSelection();
+    }
+  });
+}
+
+// ── Toast notification ────────────────────────────────────────────────────────
+
+function showToast(msg) {
+  const existing = document.getElementById("glmocr-toast");
+  if (existing) existing.remove();
+
+  const toast = document.createElement("div");
+  toast.id = "glmocr-toast";
+  toast.textContent = msg;
+  document.body.appendChild(toast);
+  setTimeout(() => toast?.remove(), 3000);
+}

Extension/generate_icons.py

@@ -0,0 +1,43 @@
+"""
+generate_icons.py — Run this once to create the extension icons.
+Requires Pillow: pip install Pillow
+"""
+from PIL import Image, ImageDraw, ImageFont
+import os
+
+os.makedirs("icons", exist_ok=True)
+
+def make_icon(size):
+    img = Image.new("RGBA", (size, size), (0, 0, 0, 0))
+    draw = ImageDraw.Draw(img)
+
+    # Background rounded rect
+    pad = size // 8
+    draw.rounded_rectangle(
+        [pad, pad, size - pad, size - pad],
+        radius=size // 5,
+        fill="#c94a1f"
+    )
+
+    # Letter "G" for GLM
+    font_size = int(size * 0.52)
+    try:
+        font = ImageFont.truetype("arial.ttf", font_size)
+    except:
+        font = ImageFont.load_default()
+
+    text = "G"
+    bbox = draw.textbbox((0, 0), text, font=font)
+    tw = bbox[2] - bbox[0]
+    th = bbox[3] - bbox[1]
+    tx = (size - tw) // 2 - bbox[0]
+    ty = (size - th) // 2 - bbox[1]
+    draw.text((tx, ty), text, fill="white", font=font)
+
+    img.save(f"icons/icon{size}.png")
+    print(f"Created icons/icon{size}.png")
+
+for s in [16, 48, 128]:
+    make_icon(s)
+
+print("Done. Icons created in icons/")

Extension/manifest.json

@@ -0,0 +1,54 @@
+{
+  "manifest_version": 3,
+  "name": "GLM-OCR — Text from Screen",
+  "version": "1.0.0",
+  "description": "Select any region on screen and extract text using the self-hosted GLM-OCR model.",
+
+  "permissions": [
+    "activeTab",
+    "scripting",
+    "tabs",
+    "storage"
+  ],
+
+  "host_permissions": [
+    "http://localhost:8000/*",
+    "<all_urls>"
+  ],
+
+  "background": {
+    "service_worker": "background.js"
+  },
+
+  "action": {
+    "default_popup": "popup.html",
+    "default_icon": {
+      "16":  "icons/icon16.png",
+      "48":  "icons/icon48.png",
+      "128": "icons/icon128.png"
+    }
+  },
+
+  "content_scripts": [
+    {
+      "matches": ["<all_urls>"],
+      "js": ["content.js"],
+      "css": ["content.css"],
+      "run_at": "document_idle",
+      "all_frames": false
+    }
+  ],
+
+  "icons": {
+    "16":  "icons/icon16.png",
+    "48":  "icons/icon48.png",
+    "128": "icons/icon128.png"
+  },
+
+  "web_accessible_resources": [
+    {
+      "resources": ["sidebar.html"],
+      "matches": ["<all_urls>"]
+    }
+  ]
+}

Extension/popup.html

@@ -0,0 +1,302 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8"/>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+  <title>GLM-OCR</title>
+  <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;700&family=DM+Serif+Display:ital@0;1&family=DM+Sans:wght@400;500&display=swap" rel="stylesheet"/>
+  <style>
+    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+    :root {
+      --ink:    #0f0e0d;
+      --paper:  #f5f0e8;
+      --warm:   #ede8dc;
+      --border: #d4cfc3;
+      --muted:  #8f8880;
+      --accent: #c94a1f;
+      --green:  #1a6b4a;
+      --mono:   'IBM Plex Mono', monospace;
+      --serif:  'DM Serif Display', serif;
+      --sans:   'DM Sans', sans-serif;
+    }
+
+    body {
+      width: 300px;
+      background: var(--paper);
+      color: var(--ink);
+      font-family: var(--sans);
+    }
+
+    body::before {
+      content: '';
+      position: fixed; inset: 0;
+      background-image: radial-gradient(circle, rgba(0,0,0,0.05) 1px, transparent 1px);
+      background-size: 16px 16px;
+      pointer-events: none;
+    }
+
+    .inner { position: relative; }
+
+    /* Header */
+    .header {
+      padding: 16px 18px 14px;
+      border-bottom: 2px solid var(--ink);
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+    }
+
+    .logo {
+      font-family: var(--serif);
+      font-size: 1.1rem;
+      letter-spacing: -0.01em;
+    }
+
+    .logo em { font-style: italic; color: var(--accent); }
+
+    .server-badge {
+      display: flex;
+      align-items: center;
+      gap: 5px;
+      font-family: var(--mono);
+      font-size: 0.58rem;
+      color: var(--muted);
+      letter-spacing: 0.06em;
+    }
+
+    .dot {
+      width: 6px; height: 6px;
+      border-radius: 50%;
+      background: var(--muted);
+    }
+    .dot.ok  { background: var(--green); }
+    .dot.err { background: var(--accent); }
+    .dot.pulse { animation: blink 1.2s ease-in-out infinite; }
+    @keyframes blink { 0%,100%{opacity:1} 50%{opacity:0.3} }
+
+    /* Main CTA */
+    .cta-area {
+      padding: 20px 18px;
+      border-bottom: 1px solid var(--border);
+    }
+
+    .cta-label {
+      font-family: var(--mono);
+      font-size: 0.62rem;
+      color: var(--muted);
+      letter-spacing: 0.1em;
+      text-transform: uppercase;
+      margin-bottom: 10px;
+    }
+
+    .select-btn {
+      width: 100%;
+      padding: 14px;
+      background: var(--accent);
+      color: white;
+      border: none;
+      border-radius: 2px;
+      font-family: var(--serif);
+      font-size: 1rem;
+      cursor: pointer;
+      transition: background 0.15s;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 8px;
+    }
+
+    .select-btn:hover:not(:disabled) { background: #b53d15; }
+    .select-btn:disabled { opacity: 0.35; cursor: not-allowed; }
+
+    .select-btn .shortcut {
+      font-family: var(--mono);
+      font-size: 0.6rem;
+      opacity: 0.7;
+      margin-left: auto;
+    }
+
+    .offline-msg {
+      display: none;
+      margin-top: 10px;
+      font-family: var(--mono);
+      font-size: 0.65rem;
+      color: var(--accent);
+      line-height: 1.6;
+    }
+
+    .offline-msg.show { display: block; }
+
+    .offline-msg a {
+      color: var(--accent);
+      text-decoration: underline;
+    }
+
+    /* How it works */
+    .how {
+      padding: 16px 18px;
+      border-bottom: 1px solid var(--border);
+    }
+
+    .how-title {
+      font-family: var(--mono);
+      font-size: 0.6rem;
+      color: var(--muted);
+      letter-spacing: 0.1em;
+      text-transform: uppercase;
+      margin-bottom: 12px;
+    }
+
+    .step {
+      display: flex;
+      gap: 10px;
+      align-items: flex-start;
+      margin-bottom: 8px;
+    }
+
+    .step:last-child { margin-bottom: 0; }
+
+    .step-num {
+      font-family: var(--mono);
+      font-size: 0.6rem;
+      color: var(--accent);
+      font-weight: 700;
+      flex-shrink: 0;
+      margin-top: 2px;
+    }
+
+    .step-text {
+      font-size: 0.78rem;
+      line-height: 1.5;
+      color: var(--ink);
+    }
+
+    /* Settings */
+    .settings {
+      padding: 14px 18px;
+    }
+
+    .settings-title {
+      font-family: var(--mono);
+      font-size: 0.6rem;
+      color: var(--muted);
+      letter-spacing: 0.1em;
+      text-transform: uppercase;
+      margin-bottom: 10px;
+    }
+
+    .setting-row {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      margin-bottom: 8px;
+    }
+
+    .setting-label {
+      font-family: var(--mono);
+      font-size: 0.68rem;
+      color: var(--ink);
+    }
+
+    .mode-toggle {
+      display: flex;
+      gap: 4px;
+    }
+
+    .mode-opt {
+      font-family: var(--mono);
+      font-size: 0.58rem;
+      padding: 4px 8px;
+      border: 1px solid var(--border);
+      background: transparent;
+      color: var(--muted);
+      cursor: pointer;
+      border-radius: 2px;
+      transition: all 0.12s;
+    }
+
+    .mode-opt.active {
+      background: var(--ink);
+      border-color: var(--ink);
+      color: var(--paper);
+    }
+
+    /* Footer */
+    .footer {
+      padding: 10px 18px;
+      border-top: 1px solid var(--border);
+      font-family: var(--mono);
+      font-size: 0.58rem;
+      color: var(--muted);
+      display: flex;
+      justify-content: space-between;
+    }
+  </style>
+</head>
+<body>
+<div class="inner">
+
+  <!-- Header -->
+  <div class="header">
+    <div class="logo">GLM-<em>OCR</em></div>
+    <div class="server-badge">
+      <div class="dot pulse" id="dot"></div>
+      <span id="server-label">checking…</span>
+    </div>
+  </div>
+
+  <!-- CTA -->
+  <div class="cta-area">
+    <div class="cta-label">Select region on screen</div>
+    <button class="select-btn" id="select-btn" disabled>
+      ✂ &nbsp;Select & Extract Text
+    </button>
+    <div class="offline-msg" id="offline-msg">
+      ⚠ GLM-OCR server not running.<br>
+      Start it with <code>python main.py</code> at <a href="http://localhost:8000" target="_blank">localhost:8000</a>.
+    </div>
+  </div>
+
+  <!-- How it works -->
+  <div class="how">
+    <div class="how-title">How it works</div>
+    <div class="step">
+      <div class="step-num">01</div>
+      <div class="step-text">Click the button above — page dims</div>
+    </div>
+    <div class="step">
+      <div class="step-num">02</div>
+      <div class="step-text">Drag a box around the text you want</div>
+    </div>
+    <div class="step">
+      <div class="step-num">03</div>
+      <div class="step-text">GLM-OCR extracts text into a sidebar</div>
+    </div>
+    <div class="step">
+      <div class="step-num">04</div>
+      <div class="step-text">Copy or download the result</div>
+    </div>
+  </div>
+
+  <!-- Settings -->
+  <div class="settings">
+    <div class="settings-title">Settings</div>
+    <div class="setting-row">
+      <span class="setting-label">OCR Mode</span>
+      <div class="mode-toggle">
+        <button class="mode-opt active" data-mode="recognize">recognize</button>
+        <button class="mode-opt" data-mode="parse">parse</button>
+      </div>
+    </div>
+  </div>
+
+  <div class="footer">
+    <span>zai-org/GLM-OCR · 0.9B</span>
+    <span>self-hosted</span>
+  </div>
+
+</div>
+
+<script src="popup.js"></script>
+</body>
+</html>

Extension/popup.js

@@ -0,0 +1,73 @@
+// popup.js
+
+const selectBtn   = document.getElementById("select-btn");
+const dot         = document.getElementById("dot");
+const serverLabel = document.getElementById("server-label");
+const offlineMsg  = document.getElementById("offline-msg");
+
+let selectedMode = "recognize";
+
+// ── Check server health ───────────────────────────────────────────────────────
+async function checkServer() {
+  try {
+    const r = await fetch("http://localhost:8000/health", {
+      signal: AbortSignal.timeout(3000),
+    });
+    const d = await r.json();
+    return d.status === "ok";
+  } catch {
+    return false;
+  }
+}
+
+async function updateServerStatus() {
+  const ok = await checkServer();
+  dot.className        = `dot ${ok ? "ok" : "err"}`;
+  serverLabel.textContent = ok ? "server ready" : "offline";
+  selectBtn.disabled   = !ok;
+  offlineMsg.classList.toggle("show", !ok);
+}
+
+updateServerStatus();
+
+// ── Mode toggle ───────────────────────────────────────────────────────────────
+document.querySelectorAll(".mode-opt").forEach(btn => {
+  btn.addEventListener("click", () => {
+    document.querySelectorAll(".mode-opt").forEach(b => b.classList.remove("active"));
+    btn.classList.add("active");
+    selectedMode = btn.dataset.mode;
+    chrome.storage.local.set({ ocrMode: selectedMode });
+  });
+});
+
+// Restore saved mode
+chrome.storage.local.get(["ocrMode"], ({ ocrMode }) => {
+  if (ocrMode) {
+    selectedMode = ocrMode;
+    document.querySelectorAll(".mode-opt").forEach(btn => {
+      btn.classList.toggle("active", btn.dataset.mode === ocrMode);
+    });
+  }
+});
+
+// ── Select button ─────────────────────────────────────────────────────────────
+selectBtn.addEventListener("click", async () => {
+  // Save current mode to storage so background can read it
+  await chrome.storage.local.set({ ocrMode: selectedMode });
+
+  // Get current tab and inject the selection
+  const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
+
+  await chrome.scripting.executeScript({
+    target: { tabId: tab.id },
+    func: () => {
+      window.postMessage({ type: "GLMOCR_START" }, "*");
+    },
+  });
+
+  // Tell content script to start selection mode
+  chrome.tabs.sendMessage(tab.id, { type: "START_SELECTION" });
+
+  // Close popup so it doesn't obscure the page
+  window.close();
+});

Extension/sidebar.html

@@ -0,0 +1,391 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8"/>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+  <title>GLM-OCR Result</title>
+  <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;700&family=DM+Serif+Display:ital@0;1&family=DM+Sans:wght@400;500&display=swap" rel="stylesheet"/>
+  <style>
+    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+    :root {
+      --ink:    #0f0e0d;
+      --paper:  #f5f0e8;
+      --warm:   #ede8dc;
+      --border: #d4cfc3;
+      --muted:  #8f8880;
+      --accent: #c94a1f;
+      --green:  #1a6b4a;
+      --mono:   'IBM Plex Mono', monospace;
+      --serif:  'DM Serif Display', serif;
+      --sans:   'DM Sans', sans-serif;
+    }
+
+    html, body {
+      height: 100%;
+      background: var(--paper);
+      color: var(--ink);
+      font-family: var(--sans);
+      overflow: hidden;
+    }
+
+    body::before {
+      content: '';
+      position: fixed; inset: 0;
+      background-image: radial-gradient(circle, rgba(0,0,0,0.05) 1px, transparent 1px);
+      background-size: 16px 16px;
+      pointer-events: none;
+    }
+
+    .sidebar {
+      position: relative;
+      height: 100vh;
+      display: flex;
+      flex-direction: column;
+    }
+
+    /* ── Header ── */
+    .sb-header {
+      padding: 14px 16px;
+      border-bottom: 2px solid var(--ink);
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      flex-shrink: 0;
+    }
+
+    .sb-title {
+      font-family: var(--serif);
+      font-size: 1rem;
+      letter-spacing: -0.01em;
+    }
+
+    .sb-title em { font-style: italic; color: var(--accent); }
+
+    .sb-close {
+      font-family: var(--mono);
+      font-size: 0.6rem;
+      padding: 5px 10px;
+      border: 1px solid var(--border);
+      background: transparent;
+      cursor: pointer;
+      border-radius: 2px;
+      color: var(--muted);
+      transition: all 0.12s;
+    }
+
+    .sb-close:hover { border-color: var(--ink); color: var(--ink); }
+
+    /* ── Scrollable body ── */
+    .sb-body {
+      flex: 1;
+      overflow-y: auto;
+      display: flex;
+      flex-direction: column;
+    }
+
+    /* ── Loading ── */
+    .sb-loading {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      gap: 16px;
+      padding: 24px;
+    }
+
+    .scan-bar-wrap { width: 140px; height: 3px; background: var(--border); border-radius: 2px; overflow: hidden; }
+    .scan-bar { height: 100%; background: var(--accent); border-radius: 2px; animation: scan 1.4s ease-in-out infinite; }
+    @keyframes scan { 0%{transform:translateX(-100%)} 50%{transform:translateX(0)} 100%{transform:translateX(100%)} }
+
+    .loading-label {
+      font-family: var(--mono);
+      font-size: 0.68rem;
+      color: var(--muted);
+      animation: blink 1.4s ease-in-out infinite;
+    }
+
+    @keyframes blink { 0%,100%{opacity:1} 50%{opacity:0.3} }
+
+    /* ── Error ── */
+    .sb-error {
+      margin: 16px;
+      background: #fff0f0;
+      border: 1px solid rgba(201,74,31,0.3);
+      border-radius: 2px;
+      padding: 14px;
+      font-family: var(--mono);
+      font-size: 0.72rem;
+      color: var(--accent);
+      line-height: 1.7;
+    }
+
+    /* ── Image preview ── */
+    .sb-image-wrap {
+      padding: 14px 16px 0;
+      flex-shrink: 0;
+    }
+
+    .sb-image-label {
+      font-family: var(--mono);
+      font-size: 0.58rem;
+      color: var(--muted);
+      letter-spacing: 0.1em;
+      text-transform: uppercase;
+      margin-bottom: 8px;
+    }
+
+    .sb-image {
+      width: 100%;
+      max-height: 160px;
+      object-fit: contain;
+      border: 1px solid var(--border);
+      border-radius: 2px;
+      background: var(--warm);
+    }
+
+    /* ── Meta chips ── */
+    .sb-meta {
+      padding: 10px 16px;
+      display: flex;
+      gap: 10px;
+      flex-wrap: wrap;
+      border-bottom: 1px solid var(--border);
+      flex-shrink: 0;
+    }
+
+    .chip {
+      font-family: var(--mono);
+      font-size: 0.6rem;
+      color: var(--muted);
+    }
+
+    .chip strong { color: var(--green); }
+
+    /* ── Extracted text ── */
+    .sb-text-section {
+      padding: 14px 16px;
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+      flex: 1;
+      min-height: 0;
+    }
+
+    .sb-text-label {
+      font-family: var(--mono);
+      font-size: 0.58rem;
+      color: var(--muted);
+      letter-spacing: 0.1em;
+      text-transform: uppercase;
+      flex-shrink: 0;
+    }
+
+    .sb-text {
+      background: var(--warm);
+      border: 1px solid var(--border);
+      border-radius: 2px;
+      padding: 14px;
+      font-family: var(--mono);
+      font-size: 0.78rem;
+      line-height: 1.85;
+      white-space: pre-wrap;
+      word-break: break-word;
+      overflow-y: auto;
+      flex: 1;
+      min-height: 120px;
+    }
+
+    /* ── Actions ── */
+    .sb-actions {
+      padding: 12px 16px;
+      border-top: 1px solid var(--border);
+      display: flex;
+      gap: 8px;
+      flex-shrink: 0;
+    }
+
+    .action-btn {
+      font-family: var(--mono);
+      font-size: 0.62rem;
+      letter-spacing: 0.04em;
+      padding: 9px 12px;
+      border: 1px solid var(--border);
+      background: transparent;
+      color: var(--ink);
+      cursor: pointer;
+      border-radius: 2px;
+      transition: all 0.12s;
+      flex: 1;
+    }
+
+    .action-btn:hover { border-color: var(--ink); }
+
+    .action-btn.primary {
+      background: var(--accent);
+      border-color: var(--accent);
+      color: white;
+    }
+
+    .action-btn.primary:hover { background: #b53d15; }
+
+    /* ── Toast ── */
+    .toast {
+      position: fixed;
+      bottom: 16px;
+      left: 50%;
+      transform: translateX(-50%) translateY(40px);
+      opacity: 0;
+      background: var(--ink);
+      color: var(--paper);
+      font-family: var(--mono);
+      font-size: 0.65rem;
+      padding: 8px 16px;
+      border-radius: 2px;
+      white-space: nowrap;
+      transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
+      z-index: 999;
+    }
+
+    .toast.show {
+      transform: translateX(-50%) translateY(0);
+      opacity: 1;
+    }
+  </style>
+</head>
+<body>
+<div class="sidebar">
+
+  <!-- Header -->
+  <div class="sb-header">
+    <div class="sb-title">GLM-<em>OCR</em> Result</div>
+    <button class="sb-close" id="close-btn">✕ Close</button>
+  </div>
+
+  <!-- Body -->
+  <div class="sb-body" id="sb-body">
+
+    <!-- Loading state (default) -->
+    <div class="sb-loading" id="state-loading">
+      <div class="scan-bar-wrap"><div class="scan-bar"></div></div>
+      <div class="loading-label">Running GLM-OCR…</div>
+    </div>
+
+  </div>
+
+  <!-- Actions (shown after result) -->
+  <div class="sb-actions" id="sb-actions" style="display:none">
+    <button class="action-btn primary" id="new-btn">✂ New Selection</button>
+    <button class="action-btn" id="copy-btn">Copy</button>
+    <button class="action-btn" id="dl-btn">↓ .txt</button>
+  </div>
+
+</div>
+
+<div class="toast" id="toast"></div>
+
+<script>
+  let extractedText = "";
+
+  // ── Receive data from content.js ──────────────────────────────────────────
+  window.addEventListener("message", (e) => {
+    if (e.data?.type !== "SIDEBAR_DATA") return;
+    const data = e.data.data;
+
+    if (data.loading) return; // already showing loading state
+
+    renderResult(data);
+  });
+
+  function renderResult(data) {
+    const body    = document.getElementById("sb-body");
+    const actions = document.getElementById("sb-actions");
+
+    if (data.error) {
+      body.innerHTML = `<div class="sb-error">⚠ ${data.error}<br><br>Make sure the GLM-OCR server is running at localhost:8000.</div>`;
+      actions.style.display = "flex";
+      return;
+    }
+
+    extractedText = data.text || "";
+
+    const latency = data.latency_ms ? `${(data.latency_ms / 1000).toFixed(2)}s` : "—";
+
+    body.innerHTML = `
+      <div class="sb-image-wrap">
+        <div class="sb-image-label">Selected Region</div>
+        <img class="sb-image" src="${data.imageDataUrl || ''}" alt="Selection"/>
+      </div>
+
+      <div class="sb-meta">
+        <span class="chip">words: <strong>${data.word_count || 0}</strong></span>
+        <span class="chip">chars: <strong>${data.char_count || 0}</strong></span>
+        <span class="chip">latency: <strong>${latency}</strong></span>
+        <span class="chip">device: <strong>${data.device || '—'}</strong></span>
+      </div>
+
+      <div class="sb-text-section">
+        <div class="sb-text-label">Extracted Text</div>
+        <div class="sb-text" id="result-text">${data.text ? escapeHtml(data.text) : '<span style="color:var(--muted);">[No text detected]</span>'}</div>
+      </div>
+    `;
+
+    actions.style.display = "flex";
+  }
+
+  function escapeHtml(str) {
+    return str
+      .replace(/&/g, "&amp;")
+      .replace(/</g, "&lt;")
+      .replace(/>/g, "&gt;");
+  }
+
+  // ── Close ─────────────────────────────────────────────────────────────────
+  document.getElementById("close-btn").addEventListener("click", () => {
+    window.parent.postMessage({ type: "CLOSE_SIDEBAR" }, "*");
+  });
+
+  // ── New selection ─────────────────────────────────────────────────────────
+  document.getElementById("new-btn").addEventListener("click", () => {
+    window.parent.postMessage({ type: "START_NEW_SELECTION" }, "*");
+  });
+
+  // ── Copy ───────────────────────────────────────────────────────────��──────
+  document.getElementById("copy-btn").addEventListener("click", async () => {
+    try {
+      await navigator.clipboard.writeText(extractedText);
+      toast("Copied!");
+    } catch {
+      // fallback: select all text in the result box
+      const el = document.getElementById("result-text");
+      if (el) {
+        const range = document.createRange();
+        range.selectNodeContents(el);
+        const sel = window.getSelection();
+        sel.removeAllRanges();
+        sel.addRange(range);
+      }
+      toast("Select text above and copy manually.");
+    }
+  });
+
+  // ── Download ──────────────────────────────────────────────────────────────
+  document.getElementById("dl-btn").addEventListener("click", () => {
+    const blob = new Blob([extractedText], { type: "text/plain" });
+    const a    = document.createElement("a");
+    a.href     = URL.createObjectURL(blob);
+    a.download = `glm-ocr-${Date.now()}.txt`;
+    a.click();
+    URL.revokeObjectURL(a.href);
+  });
+
+  // ── Toast ─────────────────────────────────────────────────────────────────
+  function toast(msg) {
+    const t = document.getElementById("toast");
+    t.textContent = msg;
+    t.classList.add("show");
+    setTimeout(() => t.classList.remove("show"), 2000);
+  }
+</script>
+</body>
+</html>

README.md

@@ -0,0 +1,277 @@
+---
+title: GLM OCR
+emoji: 📄
+colorFrom: indigo
+colorTo: purple
+sdk: docker
+app_port: 7860
+pinned: false
+---
+
+# GOT-OCR 2.0 — Self-Hosted OCR Engine
+
+> A full-stack portfolio project: self-hosted OCR backend powered by **General OCR Theory (GOT-OCR 2.0)**, a 580M-param vision-language model trained end-to-end for document understanding.
+
+---
+
+## What is GOT-OCR 2.0?
+
+GOT-OCR 2.0 is a state-of-the-art open-source OCR model from the paper  
+**"General OCR Theory: Towards OCR-2.0 via a Unified End-to-end Model"** (arXiv:2409.01704).
+
+Unlike traditional OCR (Tesseract, etc.) it uses a **vision encoder + language model** architecture:
+
+```
+Image → [CLIP-style Vision Encoder] → [Qwen2 LM Backbone] → Text
+```
+
+It handles:
+- Plain text from documents, screenshots, photos
+- **Tables** (preserved structure)
+- **Mathematical equations** (LaTeX output)
+- **Code blocks** (syntax preserved)
+- **Multilingual** text
+- **Handwriting**
+
+---
+
+## Project Structure
+
+```
+got-ocr-project/
+├── backend/
+│   ├── main.py          # FastAPI server — routes, CORS, request handling
+│   ├── ocr_engine.py    # Model loading, inference, OcrResult dataclass
+│   └── requirements.txt
+├── frontend/
+│   └── index.html       # Single-file frontend (served by FastAPI)
+├── Dockerfile           # CUDA + CPU build
+├── docker-compose.yml   # One-command deployment
+└── README.md
+```
+
+---
+
+## Quickstart
+
+### Option 1 — Docker (recommended)
+
+```bash
+git clone https://github.com/YOUR_USERNAME/got-ocr-project
+cd got-ocr-project
+
+# CPU-only (comment out the `deploy` block in docker-compose.yml first)
+docker compose up --build
+
+# With GPU
+docker compose up --build
+
+# App is live at http://localhost:8000
+```
+
+The first build downloads ~2GB of model weights — cached in a Docker volume afterward.
+
+---
+
+### Option 2 — Local Python (no Docker)
+
+```bash
+# 1. Clone
+git clone https://github.com/YOUR_USERNAME/got-ocr-project
+cd got-ocr-project
+
+# 2. Create virtualenv
+python -m venv .venv
+source .venv/bin/activate          # Windows: .venv\Scripts\activate
+
+# 3. Install dependencies
+pip install -r backend/requirements.txt
+
+# 4. Run
+cd backend
+python main.py
+
+# App is live at http://localhost:8000
+```
+
+Model weights (~2 GB) download automatically from HuggingFace on first startup.
+
+---
+
+## API Reference
+
+### `POST /ocr`
+
+Run OCR on an uploaded image.
+
+**Request** — `multipart/form-data`
+
+| Field  | Type   | Required | Description |
+|--------|--------|----------|-------------|
+| `file` | file   | ✅       | Image file (PNG, JPG, WEBP, GIF, BMP, TIFF, max 20 MB) |
+| `mode` | string | ✗        | `ocr` (default) for plain text · `format` for structured (Markdown/LaTeX) |
+
+**Response** — `application/json`
+
+```json
+{
+  "success":    true,
+  "text":       "Extracted text here...",
+  "word_count": 142,
+  "char_count": 863,
+  "latency_ms": 1240.5,
+  "mode":       "ocr",
+  "model_id":   "stepfun-ai/GOT-OCR2_0",
+  "device":     "cuda"
+}
+```
+
+**Example — curl**
+```bash
+curl -X POST http://localhost:8000/ocr \
+  -F "file=@document.png" \
+  -F "mode=ocr"
+```
+
+**Example — Python**
+```python
+import requests
+
+with open("document.png", "rb") as f:
+    r = requests.post(
+        "http://localhost:8000/ocr",
+        files={"file": ("document.png", f, "image/png")},
+        data={"mode": "ocr"},
+    )
+
+data = r.json()
+print(data["text"])
+```
+
+**Example — JavaScript fetch**
+```js
+const formData = new FormData();
+formData.append("file", imageFile);
+formData.append("mode", "ocr");
+
+const res  = await fetch("http://localhost:8000/ocr", { method: "POST", body: formData });
+const data = await res.json();
+console.log(data.text);
+```
+
+---
+
+### `GET /health`
+
+```json
+{
+  "status": "ok",
+  "model": {
+    "model_id": "stepfun-ai/GOT-OCR2_0",
+    "device": "cuda",
+    "loaded": true,
+    "gpu_name": "NVIDIA RTX 3090",
+    "gpu_memory_gb": 24.0
+  }
+}
+```
+
+### `GET /metrics`
+
+Session-level stats (resets on server restart).
+
+```json
+{
+  "total_requests": 14,
+  "total_words_extracted": 3821,
+  "avg_latency_ms": 980.4,
+  "error_count": 0,
+  "uptime_seconds": 3620.1
+}
+```
+
+---
+
+## Hardware Requirements
+
+| Setup | VRAM / RAM | Latency |
+|-------|------------|---------|
+| NVIDIA GPU (8 GB+ VRAM) | ~4 GB VRAM | ~0.5 – 1.5 s/image |
+| CPU (16 GB RAM) | ~3 GB RAM | ~8 – 20 s/image |
+| Apple Silicon (MPS) | ~4 GB | ~3 – 6 s/image |
+
+---
+
+## Deployment to Cloud
+
+### Fly.io (GPU, pay-as-you-go)
+
+```bash
+fly launch --name got-ocr
+fly scale vm a100-40gb
+fly deploy
+```
+
+### Render / Railway (CPU only)
+
+Push to GitHub → connect repo → set start command:
+```
+cd backend && uvicorn main:app --host 0.0.0.0 --port $PORT
+```
+
+### Vast.ai / RunPod (cheapest GPU)
+
+Rent an RTX 3090 node, SSH in, clone repo, run `docker compose up`.
+
+---
+
+## Architecture Diagram
+
+```
+Browser
+  │
+  │  POST /ocr (multipart image + mode)
+  ▼
+┌─────────────────────────────────────┐
+│  FastAPI  (main.py)                 │
+│  ─ CORS middleware                  │
+│  ─ file validation (type, size)     │
+│  ─ session metrics                  │
+└──────────────┬──────────────────────┘
+               │  image_bytes, mode
+               ▼
+┌─────────────────────────────────────┐
+│  GotOcrEngine  (ocr_engine.py)      │
+│  ─ PIL validation & RGB conversion  │
+│  ─ writes temp PNG to disk          │
+│  ─ model.chat(tokenizer, path, …)   │
+│  ─ returns OcrResult dataclass      │
+└──────────────┬──────────────────────┘
+               │  (torch.inference_mode)
+               ▼
+┌─────────────────────────────────────┐
+│  GOT-OCR 2.0 Model                  │
+│  stepfun-ai/GOT-OCR2_0             │
+│  ─ Vision encoder (SigLIP)         │
+│  ─ LM backbone (Qwen2-0.5B)        │
+│  ─ Runs on CUDA / CPU / MPS        │
+└─────────────────────────────────────┘
+```
+
+---
+
+## What makes this a good portfolio project?
+
+- **Self-hosted ML inference** — no API dependency, model runs on your server
+- **End-to-end system** — frontend + REST API + ML pipeline + Docker
+- **Production patterns** — lifespan events, CORS, input validation, error handling, metrics endpoint, health check
+- **Real ML engineering** — model loading, device management, temp file handling, `torch.inference_mode()`
+- **Clean code** — dataclasses, logging, type hints, docstrings
+
+---
+
+## References
+
+- Paper: [GOT-OCR 2.0](https://arxiv.org/abs/2409.01704)
+- Model: [stepfun-ai/GOT-OCR2_0](https://huggingface.co/stepfun-ai/GOT-OCR2_0)
+- Code: [GOT-OCR2.0 GitHub](https://github.com/Ucas-HaoranWei/GOT-OCR2.0)

background.js

@@ -0,0 +1,124 @@
+// background.js — Service worker
+// Handles: tab screenshot, image crop, OCR API call, result relay
+
+const OCR_ENDPOINT = "http://localhost:8000/ocr";
+const OCR_MODE     = "recognize"; // or "parse"
+
+// ── Listen for messages from content.js ─────────────────────────────────────
+
+chrome.runtime.onMessage.addListener((msg, sender, sendResponse) => {
+
+  if (msg.type === "CAPTURE_REGION") {
+    handleCapture(msg.rect, sender.tab)
+      .then(result  => sendResponse({ success: true,  ...result }))
+      .catch(error  => sendResponse({ success: false, error: error.message }));
+    return true; // keep channel open for async
+  }
+
+  if (msg.type === "PING") {
+    checkServer().then(ok => sendResponse({ ok }));
+    return true;
+  }
+
+  if (msg.type === "OPEN_SIDEBAR") {
+    // Open the sidebar as a side panel in the current tab
+    chrome.tabs.sendMessage(sender.tab.id, { type: "SHOW_SIDEBAR" });
+    return false;
+  }
+
+});
+
+// ── Capture + crop + OCR ─────────────────────────────────────────────────────
+
+async function handleCapture(rect, tab) {
+  // 1. Capture the entire visible tab as a data URL
+  const dataUrl = await chrome.tabs.captureVisibleTab(tab.windowId, {
+    format: "png",
+    quality: 100,
+  });
+
+  // 2. Crop to the selected rect using OffscreenCanvas
+  const croppedBlob = await cropImage(dataUrl, rect);
+
+  // 3. Send to GLM-OCR backend
+  const formData = new FormData();
+  formData.append("file", croppedBlob, "selection.png");
+  formData.append("mode", OCR_MODE);
+
+  const res = await fetch(OCR_ENDPOINT, {
+    method: "POST",
+    body: formData,
+  });
+
+  if (!res.ok) {
+    const err = await res.json().catch(() => ({}));
+    throw new Error(err.detail || `Server returned ${res.status}`);
+  }
+
+  const data = await res.json();
+
+  // Also store the cropped image as a data URL for display in the sidebar
+  const croppedDataUrl = await blobToDataUrl(croppedBlob);
+
+  return {
+    text:        data.text,
+    word_count:  data.word_count,
+    char_count:  data.char_count,
+    latency_ms:  data.latency_ms,
+    mode:        data.mode,
+    device:      data.device,
+    imageDataUrl: croppedDataUrl,
+    timestamp:   new Date().toISOString(),
+  };
+}
+
+// ── Image cropping using OffscreenCanvas ─────────────────────────────────────
+
+async function cropImage(dataUrl, rect) {
+  // Decode the full screenshot
+  const res  = await fetch(dataUrl);
+  const blob = await res.blob();
+  const bitmap = await createImageBitmap(blob);
+
+  // Scale rect by device pixel ratio (already baked into captureVisibleTab)
+  // captureVisibleTab captures at device pixel ratio already, so rect coords
+  // from getBoundingClientRect need to be scaled.
+  const dpr = rect.dpr || 1;
+  const sx  = Math.round(rect.x      * dpr);
+  const sy  = Math.round(rect.y      * dpr);
+  const sw  = Math.round(rect.width  * dpr);
+  const sh  = Math.round(rect.height * dpr);
+
+  // Clamp to bitmap bounds
+  const cx = Math.max(0, sx);
+  const cy = Math.max(0, sy);
+  const cw = Math.min(sw, bitmap.width  - cx);
+  const ch = Math.min(sh, bitmap.height - cy);
+
+  const canvas = new OffscreenCanvas(cw, ch);
+  const ctx    = canvas.getContext("2d");
+  ctx.drawImage(bitmap, cx, cy, cw, ch, 0, 0, cw, ch);
+
+  return canvas.convertToBlob({ type: "image/png" });
+}
+
+function blobToDataUrl(blob) {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onload  = () => resolve(reader.result);
+    reader.onerror = reject;
+    reader.readAsDataURL(blob);
+  });
+}
+
+// ── Server health check ───────────────────────────────────────────────────────
+
+async function checkServer() {
+  try {
+    const r = await fetch("http://localhost:8000/health", { signal: AbortSignal.timeout(3000) });
+    const d = await r.json();
+    return d.status === "ok";
+  } catch {
+    return false;
+  }
+}

content.css

@@ -0,0 +1,82 @@
+/* content.css — Styles injected into every page for the selection overlay */
+
+/* ── Overlay ── */
+#glmocr-overlay {
+  position: fixed !important;
+  inset: 0 !important;
+  background: rgba(0, 0, 0, 0.45) !important;
+  z-index: 2147483646 !important;
+  cursor: crosshair !important;
+  user-select: none !important;
+}
+
+/* ── Hint text ── */
+#glmocr-hint {
+  position: absolute !important;
+  top: 20px !important;
+  left: 50% !important;
+  transform: translateX(-50%) !important;
+  background: rgba(0, 0, 0, 0.8) !important;
+  color: #f5f0e8 !important;
+  font-family: 'IBM Plex Mono', monospace, monospace !important;
+  font-size: 13px !important;
+  padding: 10px 18px !important;
+  border-radius: 4px !important;
+  letter-spacing: 0.04em !important;
+  pointer-events: none !important;
+  white-space: nowrap !important;
+  border: 1px solid rgba(255,255,255,0.15) !important;
+  transition: opacity 0.2s !important;
+}
+
+/* ── Selection box ── */
+#glmocr-selbox {
+  position: fixed !important;
+  display: none !important;
+  border: 2px solid #c94a1f !important;
+  background: rgba(201, 74, 31, 0.08) !important;
+  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.35) !important;
+  pointer-events: none !important;
+  z-index: 2147483647 !important;
+}
+
+/* ── Sidebar iframe ── */
+#glmocr-sidebar {
+  position: fixed !important;
+  top: 0 !important;
+  right: 0 !important;
+  width: 380px !important;
+  height: 100vh !important;
+  border: none !important;
+  z-index: 2147483645 !important;
+  border-left: 2px solid #d4cfc3 !important;
+  box-shadow: -4px 0 24px rgba(0,0,0,0.12) !important;
+  animation: glmocr-slideIn 0.25s cubic-bezier(0.22, 1, 0.36, 1) !important;
+}
+
+@keyframes glmocr-slideIn {
+  from { transform: translateX(100%); opacity: 0; }
+  to   { transform: translateX(0);    opacity: 1; }
+}
+
+/* ── Toast ── */
+#glmocr-toast {
+  position: fixed !important;
+  bottom: 24px !important;
+  left: 50% !important;
+  transform: translateX(-50%) !important;
+  background: #0f0e0d !important;
+  color: #f5f0e8 !important;
+  font-family: 'IBM Plex Mono', monospace, monospace !important;
+  font-size: 13px !important;
+  padding: 10px 20px !important;
+  border-radius: 4px !important;
+  z-index: 2147483647 !important;
+  white-space: nowrap !important;
+  animation: glmocr-fadeUp 0.3s ease both !important;
+}
+
+@keyframes glmocr-fadeUp {
+  from { opacity: 0; transform: translateX(-50%) translateY(12px); }
+  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
+}

content.js

@@ -0,0 +1,184 @@
+// content.js — Injected into every page
+// Manages the screen selection overlay and sidebar panel
+
+let overlayActive = false;
+let sidebarFrame  = null;
+
+// ── Listen for messages from background / popup ───────────────────────────────
+
+chrome.runtime.onMessage.addListener((msg, _sender, sendResponse) => {
+
+  if (msg.type === "START_SELECTION") {
+    if (!overlayActive) startSelection();
+    sendResponse({ ok: true });
+    return false;
+  }
+
+  if (msg.type === "SHOW_SIDEBAR") {
+    showSidebar({});
+    return false;
+  }
+
+  if (msg.type === "SHOW_RESULT") {
+    showSidebar(msg.data);
+    return false;
+  }
+
+});
+
+// ── Selection overlay ─────────────────────────────────────────────────────────
+
+function startSelection() {
+  overlayActive = true;
+
+  // Dim the page
+  const overlay = document.createElement("div");
+  overlay.id = "glmocr-overlay";
+
+  // Crosshair hint
+  const hint = document.createElement("div");
+  hint.id = "glmocr-hint";
+  hint.textContent = "Drag to select text region — Press Esc to cancel";
+  overlay.appendChild(hint);
+
+  // Selection box
+  const selBox = document.createElement("div");
+  selBox.id = "glmocr-selbox";
+  overlay.appendChild(selBox);
+
+  document.body.appendChild(overlay);
+
+  let startX = 0, startY = 0, isDragging = false;
+
+  function onMouseDown(e) {
+    if (e.button !== 0) return;
+    isDragging = true;
+    startX = e.clientX;
+    startY = e.clientY;
+    selBox.style.cssText = `left:${startX}px; top:${startY}px; width:0; height:0; display:block`;
+    hint.style.opacity = "0";
+    e.preventDefault();
+  }
+
+  function onMouseMove(e) {
+    if (!isDragging) return;
+    const x = Math.min(e.clientX, startX);
+    const y = Math.min(e.clientY, startY);
+    const w = Math.abs(e.clientX - startX);
+    const h = Math.abs(e.clientY - startY);
+    selBox.style.cssText = `left:${x}px; top:${y}px; width:${w}px; height:${h}px; display:block`;
+  }
+
+  function onMouseUp(e) {
+    if (!isDragging) return;
+    isDragging = false;
+
+    const x = Math.min(e.clientX, startX);
+    const y = Math.min(e.clientY, startY);
+    const w = Math.abs(e.clientX - startX);
+    const h = Math.abs(e.clientY - startY);
+
+    cleanup();
+
+    if (w < 10 || h < 10) {
+      showToast("Selection too small — try again.");
+      return;
+    }
+
+    const dpr = window.devicePixelRatio || 1;
+    const rect = {
+      x:      x + window.scrollX,
+      y:      y + window.scrollY,
+      width:  w,
+      height: h,
+      dpr,
+    };
+
+    runOcr(rect);
+  }
+
+  function onKeyDown(e) {
+    if (e.key === "Escape") {
+      cleanup();
+      showToast("Cancelled.");
+    }
+  }
+
+  function cleanup() {
+    overlayActive = false;
+    overlay.removeEventListener("mousedown", onMouseDown);
+    overlay.removeEventListener("mousemove", onMouseMove);
+    overlay.removeEventListener("mouseup",   onMouseUp);
+    document.removeEventListener("keydown",  onKeyDown);
+    overlay.remove();
+  }
+
+  overlay.addEventListener("mousedown", onMouseDown);
+  overlay.addEventListener("mousemove", onMouseMove);
+  overlay.addEventListener("mouseup",   onMouseUp);
+  document.addEventListener("keydown",  onKeyDown);
+}
+
+// ── Send region to background for capture + OCR ───────────────────────────────
+
+function runOcr(rect) {
+  // Show a loading sidebar immediately
+  showSidebar({ loading: true });
+
+  chrome.runtime.sendMessage({ type: "CAPTURE_REGION", rect }, (response) => {
+    if (chrome.runtime.lastError) {
+      showSidebar({ error: chrome.runtime.lastError.message });
+      return;
+    }
+    if (response.success) {
+      showSidebar(response);
+    } else {
+      showSidebar({ error: response.error });
+    }
+  });
+}
+
+// ── Sidebar panel ─────────────────────────────────────────────────────────────
+
+function showSidebar(data) {
+  // Remove existing sidebar if any
+  if (sidebarFrame) sidebarFrame.remove();
+
+  const frame = document.createElement("iframe");
+  frame.id  = "glmocr-sidebar";
+  frame.src = chrome.runtime.getURL("sidebar.html");
+
+  document.body.appendChild(frame);
+  sidebarFrame = frame;
+
+  // Wait for iframe to load, then send data
+  frame.onload = () => {
+    frame.contentWindow.postMessage({ type: "SIDEBAR_DATA", data }, "*");
+  };
+
+  // Close button via message from sidebar
+  window.addEventListener("message", (e) => {
+    if (e.data?.type === "CLOSE_SIDEBAR") {
+      frame.remove();
+      sidebarFrame = null;
+    }
+    if (e.data?.type === "START_NEW_SELECTION") {
+      frame.remove();
+      sidebarFrame = null;
+      startSelection();
+    }
+  });
+}
+
+// ── Toast notification ────────────────────────────────────────────────────────
+
+function showToast(msg) {
+  const existing = document.getElementById("glmocr-toast");
+  if (existing) existing.remove();
+
+  const toast = document.createElement("div");
+  toast.id = "glmocr-toast";
+  toast.textContent = msg;
+  document.body.appendChild(toast);
+  setTimeout(() => toast?.remove(), 3000);
+}

docker-compose.yml

@@ -0,0 +1,36 @@
+version: "3.9"
+
+services:
+  got-ocr:
+    build: .
+    image: got-ocr:latest
+    container_name: got-ocr-backend
+    ports:
+      - "8000:8000"
+    environment:
+      - PYTHONUNBUFFERED=1
+    restart: unless-stopped
+
+    # ── GPU support (comment out for CPU-only) ───────────────────────────
+    deploy:
+      resources:
+        reservations:
+          devices:
+            - driver: nvidia
+              count: 1
+              capabilities: [gpu]
+
+    # ── Health check ─────────────────────────────────────────────────────
+    healthcheck:
+      test: ["CMD", "curl", "-f", "http://localhost:8000/health"]
+      interval: 30s
+      timeout: 10s
+      retries: 5
+      start_period: 60s   # give model time to load
+
+    # ── Optional: persist HuggingFace model cache across rebuilds ────────
+    volumes:
+      - hf_cache:/root/.cache/huggingface
+
+volumes:
+  hf_cache:

frontend/index.html

@@ -0,0 +1,759 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8"/>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+  <title>GLM-OCR — Self-Hosted Document OCR</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com"/>
+  <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;700&family=DM+Serif+Display:ital@0;1&family=DM+Sans:wght@300;400;500&display=swap" rel="stylesheet"/>
+  <style>
+    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+
+    :root {
+      --ink:    #0f0e0d;
+      --paper:  #f5f0e8;
+      --warm:   #ede8dc;
+      --border: #d4cfc3;
+      --muted:  #8f8880;
+      --accent: #c94a1f;
+      --green:  #1a6b4a;
+      --mono:   'IBM Plex Mono', monospace;
+      --serif:  'DM Serif Display', serif;
+      --sans:   'DM Sans', sans-serif;
+    }
+
+    html { scroll-behavior: smooth; }
+
+    body {
+      background: var(--paper);
+      color: var(--ink);
+      font-family: var(--sans);
+      min-height: 100vh;
+    }
+
+    body::before {
+      content: '';
+      position: fixed;
+      inset: 0;
+      background-image: radial-gradient(circle, rgba(0,0,0,0.055) 1px, transparent 1px);
+      background-size: 18px 18px;
+      pointer-events: none;
+      z-index: 0;
+    }
+
+    .page { position: relative; z-index: 1; }
+
+    /* ── MASTHEAD ── */
+    .masthead {
+      border-bottom: 3px solid var(--ink);
+      padding: 0 48px;
+      display: grid;
+      grid-template-columns: 1fr auto 1fr;
+      align-items: center;
+      min-height: 68px;
+      gap: 16px;
+    }
+
+    .masthead-left {
+      font-family: var(--mono);
+      font-size: 0.62rem;
+      color: var(--muted);
+      letter-spacing: 0.08em;
+      text-transform: uppercase;
+    }
+
+    .masthead-center {
+      font-family: var(--serif);
+      font-size: 1.3rem;
+      white-space: nowrap;
+    }
+
+    .masthead-right {
+      display: flex;
+      justify-content: flex-end;
+      gap: 6px;
+    }
+
+    .pill {
+      font-family: var(--mono);
+      font-size: 0.6rem;
+      letter-spacing: 0.08em;
+      text-transform: uppercase;
+      padding: 4px 9px;
+      border-radius: 2px;
+      border: 1px solid var(--border);
+      color: var(--muted);
+      display: flex;
+      align-items: center;
+      gap: 5px;
+    }
+
+    .pill.live { border-color: var(--green); color: var(--green); }
+
+    .status-dot {
+      width: 6px; height: 6px;
+      border-radius: 50%;
+      background: var(--muted);
+      flex-shrink: 0;
+    }
+    .status-dot.ok  { background: var(--green); }
+    .status-dot.err { background: var(--accent); }
+    .status-dot.pulse {
+      animation: blink 1.2s ease-in-out infinite;
+    }
+
+    @keyframes blink { 0%,100%{opacity:1} 50%{opacity:0.3} }
+
+    /* ── HERO ── */
+    .hero {
+      padding: 64px 48px 48px;
+      border-bottom: 1px solid var(--border);
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: 48px;
+      align-items: end;
+    }
+
+    .hero-headline {
+      font-family: var(--serif);
+      font-size: clamp(2.8rem, 5.5vw, 5rem);
+      line-height: 1.02;
+      letter-spacing: -0.02em;
+    }
+
+    .hero-headline em { font-style: italic; color: var(--accent); }
+
+    .hero-right { display: flex; flex-direction: column; gap: 20px; }
+
+    .hero-desc {
+      font-size: 0.88rem;
+      color: var(--muted);
+      line-height: 1.75;
+    }
+
+    .hero-stats {
+      display: flex;
+      gap: 24px;
+      flex-wrap: wrap;
+    }
+
+    .stat { display: flex; flex-direction: column; gap: 2px; }
+
+    .stat strong {
+      font-family: var(--serif);
+      font-size: 1.5rem;
+      color: var(--accent);
+    }
+
+    .stat span {
+      font-family: var(--mono);
+      font-size: 0.58rem;
+      color: var(--muted);
+      letter-spacing: 0.1em;
+      text-transform: uppercase;
+    }
+
+    /* ── MAIN ── */
+    .main {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      border-bottom: 1px solid var(--border);
+    }
+
+    .col { padding: 36px 48px; }
+    .col + .col { border-left: 1px solid var(--border); }
+
+    .col-label {
+      font-family: var(--mono);
+      font-size: 0.62rem;
+      color: var(--muted);
+      letter-spacing: 0.12em;
+      text-transform: uppercase;
+      margin-bottom: 20px;
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    }
+
+    .col-label::after { content: ''; flex: 1; height: 1px; background: var(--border); }
+
+    /* ── DROPZONE ── */
+    #dropzone {
+      border: 2px dashed var(--border);
+      border-radius: 4px;
+      min-height: 240px;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      gap: 14px;
+      cursor: pointer;
+      transition: all 0.2s;
+      position: relative;
+      overflow: hidden;
+    }
+
+    #dropzone:hover, #dropzone.over {
+      border-color: var(--accent);
+      background: rgba(201,74,31,0.04);
+    }
+
+    #dropzone.over::after {
+      content: 'Drop!';
+      position: absolute; inset: 0;
+      background: rgba(201,74,31,0.08);
+      display: grid; place-items: center;
+      font-family: var(--serif);
+      font-size: 2rem;
+      color: var(--accent);
+    }
+
+    .dz-icon { font-size: 2.2rem; }
+
+    .dz-label strong { display: block; font-weight: 500; font-size: 0.88rem; margin-bottom: 5px; text-align:center; }
+    .dz-label span { font-family: var(--mono); font-size: 0.64rem; color: var(--muted); }
+
+    #file-input { display: none; }
+
+    /* Preview */
+    #preview-wrap { display: none; }
+    #preview-wrap.active { display: block; }
+
+    #preview-img {
+      width: 100%; max-height: 240px;
+      object-fit: contain;
+      border: 1px solid var(--border);
+      border-radius: 2px;
+      background: var(--warm);
+    }
+
+    .file-meta {
+      margin-top: 8px;
+      font-family: var(--mono);
+      font-size: 0.65rem;
+      color: var(--muted);
+      display: flex;
+      justify-content: space-between;
+    }
+
+    /* ── MODE ── */
+    .mode-row {
+      margin: 18px 0 14px;
+      display: flex;
+      gap: 8px;
+    }
+
+    .mode-btn {
+      font-family: var(--mono);
+      font-size: 0.67rem;
+      letter-spacing: 0.04em;
+      padding: 9px 14px;
+      border: 1px solid var(--border);
+      background: transparent;
+      color: var(--muted);
+      cursor: pointer;
+      border-radius: 2px;
+      transition: all 0.15s;
+      display: flex;
+      flex-direction: column;
+      gap: 2px;
+      flex: 1;
+      text-align: left;
+    }
+
+    .mode-btn .mode-name { font-weight: 700; color: var(--ink); }
+    .mode-btn .mode-desc { font-size: 0.58rem; }
+
+    .mode-btn.selected {
+      background: var(--ink);
+      border-color: var(--ink);
+      color: var(--paper);
+    }
+
+    .mode-btn.selected .mode-name { color: var(--paper); }
+
+    /* ── RUN BTN ── */
+    .run-btn {
+      width: 100%;
+      padding: 14px;
+      background: var(--accent);
+      color: white;
+      border: none;
+      border-radius: 2px;
+      font-family: var(--serif);
+      font-size: 1.05rem;
+      cursor: pointer;
+      transition: background 0.15s;
+    }
+
+    .run-btn:hover:not(:disabled) { background: #b53d15; }
+    .run-btn:disabled { opacity: 0.35; cursor: not-allowed; }
+
+    .clear-link {
+      font-family: var(--mono);
+      font-size: 0.64rem;
+      color: var(--muted);
+      text-decoration: underline;
+      cursor: pointer;
+      display: none;
+      margin-top: 10px;
+      text-align: center;
+    }
+
+    /* ── OUTPUT ── */
+    .output-area {
+      min-height: 300px;
+      display: flex;
+      flex-direction: column;
+    }
+
+    #out-placeholder {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      gap: 10px;
+      border: 1px dashed var(--border);
+      border-radius: 2px;
+    }
+
+    #out-placeholder .ph { font-size: 2rem; opacity: 0.3; }
+    #out-placeholder p { font-family: var(--mono); font-size: 0.68rem; color: var(--muted); text-align: center; line-height: 1.9; }
+
+    /* Loading */
+    #out-loading { display: none; flex: 1; flex-direction: column; align-items: center; justify-content: center; gap: 16px; }
+    #out-loading.active { display: flex; }
+
+    .scan-bar-wrap { width: 160px; height: 3px; background: var(--border); border-radius: 2px; overflow: hidden; }
+    .scan-bar { height: 100%; background: var(--accent); border-radius: 2px; animation: scan 1.4s ease-in-out infinite; }
+    @keyframes scan { 0%{transform:translateX(-100%)} 50%{transform:translateX(0)} 100%{transform:translateX(100%)} }
+
+    .scan-label { font-family: var(--mono); font-size: 0.68rem; color: var(--muted); animation: blink 1.4s ease-in-out infinite; }
+
+    /* Error */
+    #out-error { display: none; background: #fff0f0; border: 1px solid rgba(201,74,31,0.3); border-radius: 2px; padding: 16px; font-family: var(--mono); font-size: 0.72rem; color: var(--accent); line-height: 1.7; }
+    #out-error.active { display: block; }
+
+    /* Result */
+    #out-result { display: none; flex-direction: column; gap: 10px; }
+    #out-result.active { display: flex; }
+
+    #result-meta { display: flex; gap: 14px; flex-wrap: wrap; }
+
+    .chip { font-family: var(--mono); font-size: 0.62rem; color: var(--muted); }
+    .chip strong { color: var(--green); }
+
+    #result-content {
+      background: var(--warm);
+      border: 1px solid var(--border);
+      border-radius: 2px;
+      padding: 18px;
+      font-family: var(--mono);
+      font-size: 0.78rem;
+      line-height: 1.9;
+      white-space: pre-wrap;
+      word-break: break-word;
+      max-height: 340px;
+      overflow-y: auto;
+      flex: 1;
+    }
+
+    .result-actions { display: flex; gap: 8px; }
+
+    .action-btn {
+      font-family: var(--mono);
+      font-size: 0.65rem;
+      letter-spacing: 0.05em;
+      padding: 9px 14px;
+      border: 1px solid var(--border);
+      background: transparent;
+      color: var(--ink);
+      cursor: pointer;
+      border-radius: 2px;
+      transition: border-color 0.15s;
+      flex: 1;
+    }
+
+    .action-btn:hover { border-color: var(--ink); }
+
+    /* ── STATUS BAR ── */
+    .statusbar {
+      border-top: 3px double var(--border);
+      padding: 14px 48px;
+      display: flex;
+      gap: 32px;
+      flex-wrap: wrap;
+      font-family: var(--mono);
+      font-size: 0.64rem;
+      color: var(--muted);
+    }
+
+    .statusbar strong { color: var(--green); }
+
+    footer {
+      border-top: 1px solid var(--border);
+      padding: 18px 48px;
+      display: flex;
+      justify-content: space-between;
+      font-family: var(--mono);
+      font-size: 0.62rem;
+      color: var(--muted);
+    }
+
+    footer a { color: var(--ink); text-decoration: underline; }
+
+    /* ── TOAST ── */
+    .toast {
+      position: fixed;
+      bottom: 24px; right: 24px;
+      background: var(--ink);
+      color: var(--paper);
+      font-family: var(--mono);
+      font-size: 0.7rem;
+      padding: 11px 18px;
+      border-radius: 2px;
+      transform: translateY(60px);
+      opacity: 0;
+      transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
+      z-index: 999;
+    }
+
+    .toast.show { transform: translateY(0); opacity: 1; }
+
+    @keyframes fadeUp { from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:translateY(0)} }
+    .masthead { animation: fadeUp 0.5s ease both; }
+    .hero     { animation: fadeUp 0.5s 0.08s ease both; }
+    .main     { animation: fadeUp 0.5s 0.16s ease both; }
+
+    @media (max-width: 820px) {
+      .masthead, .hero, .col, .statusbar, footer { padding-left: 24px; padding-right: 24px; }
+      .hero, .main { grid-template-columns: 1fr; }
+      .col + .col { border-left: none; border-top: 1px solid var(--border); }
+    }
+  </style>
+</head>
+<body>
+<div class="page">
+
+  <!-- MASTHEAD -->
+  <div class="masthead">
+    <div class="masthead-left">zai-org/GLM-OCR · 0.9B params</div>
+    <div class="masthead-center">GLM-OCR Engine</div>
+    <div class="masthead-right">
+      <div class="pill" id="server-pill">
+        <div class="status-dot pulse" id="status-dot"></div>
+        <span id="status-label">connecting…</span>
+      </div>
+      <div class="pill live">self-hosted</div>
+    </div>
+  </div>
+
+  <!-- HERO -->
+  <section class="hero">
+    <div>
+      <h1 class="hero-headline">GLM<br><em>Vision</em><br>OCR</h1>
+    </div>
+    <div class="hero-right">
+      <p class="hero-desc">
+        Self-hosted OCR powered by <strong>zai-org/GLM-OCR</strong> — a 0.9B vision-language model
+        ranking #1 on OmniDocBench V1.5. Handles plain text, tables, math formulas,
+        and structured document parsing.
+      </p>
+      <div class="hero-stats">
+        <div class="stat"><strong id="stat-count">0</strong><span>Processed</span></div>
+        <div class="stat"><strong id="stat-words">0</strong><span>Words</span></div>
+        <div class="stat"><strong id="stat-lat">—</strong><span>Avg Latency</span></div>
+      </div>
+    </div>
+  </section>
+
+  <!-- MAIN -->
+  <div class="main">
+
+    <!-- LEFT -->
+    <div class="col">
+      <div class="col-label">01 &nbsp; Upload Image</div>
+
+      <div id="dropzone">
+        <div class="dz-icon">🖼</div>
+        <div class="dz-label">
+          <strong>Drag & drop an image</strong>
+          <span>PNG · JPG · WEBP · BMP · TIFF · Max 20 MB</span>
+        </div>
+        <input type="file" id="file-input" accept="image/*"/>
+      </div>
+
+      <div id="preview-wrap">
+        <img id="preview-img" src="" alt="Preview"/>
+        <div class="file-meta">
+          <span id="file-name"></span>
+          <span id="file-size"></span>
+        </div>
+      </div>
+
+      <!-- Mode selector -->
+      <div class="mode-row">
+        <button class="mode-btn selected" data-mode="recognize">
+          <span class="mode-name">recognize</span>
+          <span class="mode-desc">Plain text · preserves layout</span>
+        </button>
+        <button class="mode-btn" data-mode="parse">
+          <span class="mode-name">parse</span>
+          <span class="mode-desc">Structured markdown output</span>
+        </button>
+      </div>
+
+      <button class="run-btn" id="run-btn" disabled>⟡ &nbsp;Run GLM-OCR</button>
+      <div class="clear-link" id="clear-link">Clear image</div>
+    </div>
+
+    <!-- RIGHT -->
+    <div class="col">
+      <div class="col-label">02 &nbsp; Extracted Text</div>
+
+      <div class="output-area">
+        <div id="out-placeholder">
+          <div class="ph">📄</div>
+          <p>Upload an image and click<br>"Run GLM-OCR" to begin.</p>
+        </div>
+
+        <div id="out-loading">
+          <div class="scan-bar-wrap"><div class="scan-bar"></div></div>
+          <div class="scan-label" id="loading-label">Initialising…</div>
+        </div>
+
+        <div id="out-error"></div>
+
+        <div id="out-result">
+          <div id="result-meta"></div>
+          <div id="result-content"></div>
+          <div class="result-actions">
+            <button class="action-btn" id="copy-btn">Copy text</button>
+            <button class="action-btn" id="dl-btn">Download .txt</button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- STATUS BAR -->
+  <div class="statusbar">
+    <span>Model: <strong id="sb-model">—</strong></span>
+    <span>Device: <strong id="sb-device">—</strong></span>
+    <span>Uptime: <strong id="sb-uptime">—</strong></span>
+    <span>Errors: <strong id="sb-errors">—</strong></span>
+  </div>
+
+  <footer>
+    <span>GLM-OCR · <a href="https://arxiv.org/abs/2603.10910" target="_blank">Paper ↗</a> · <a href="https://huggingface.co/zai-org/GLM-OCR" target="_blank">HuggingFace ↗</a></span>
+    <span>Self-hosted · No data leaves your server · CS Portfolio Project</span>
+  </footer>
+</div>
+
+<div class="toast" id="toast"></div>
+
+<script>
+  const API = '';
+  let selectedMode = 'recognize';
+  let imageFile    = null;
+
+  // Elements
+  const dropzone   = document.getElementById('dropzone');
+  const fileInput  = document.getElementById('file-input');
+  const previewWrap= document.getElementById('preview-wrap');
+  const previewImg = document.getElementById('preview-img');
+  const runBtn     = document.getElementById('run-btn');
+  const clearLink  = document.getElementById('clear-link');
+
+  const outPlaceholder = document.getElementById('out-placeholder');
+  const outLoading     = document.getElementById('out-loading');
+  const outError       = document.getElementById('out-error');
+  const outResult      = document.getElementById('out-result');
+  const loadingLabel   = document.getElementById('loading-label');
+  const resultMeta     = document.getElementById('result-meta');
+  const resultContent  = document.getElementById('result-content');
+
+  // ── Health ──────────────────────────────────────────────────────────────
+  async function pollHealth() {
+    try {
+      const r    = await fetch(`${API}/health`);
+      const data = await r.json();
+      const dot  = document.getElementById('status-dot');
+      const lbl  = document.getElementById('status-label');
+
+      if (data.status === 'ok') {
+        dot.className = 'status-dot ok';
+        lbl.textContent = 'model ready';
+        document.getElementById('sb-model').textContent  = data.model.model_id?.split('/')[1] || '—';
+        document.getElementById('sb-device').textContent = data.model.device || '—';
+      } else {
+        dot.className = 'status-dot pulse';
+        lbl.textContent = 'loading model…';
+        setTimeout(pollHealth, 3000);
+      }
+    } catch {
+      document.getElementById('status-dot').className = 'status-dot err';
+      document.getElementById('status-label').textContent = 'server offline';
+    }
+  }
+
+  async function pollMetrics() {
+    try {
+      const r    = await fetch(`${API}/metrics`);
+      const data = await r.json();
+      document.getElementById('stat-count').textContent = data.total_requests;
+      document.getElementById('stat-words').textContent = data.total_words_extracted.toLocaleString();
+      document.getElementById('stat-lat').textContent   = data.avg_latency_ms
+        ? `${(data.avg_latency_ms / 1000).toFixed(1)}s` : '—';
+      document.getElementById('sb-uptime').textContent  =
+        `${Math.floor(data.uptime_seconds / 60)}m ${(data.uptime_seconds % 60) | 0}s`;
+      document.getElementById('sb-errors').textContent  = data.error_count;
+    } catch {}
+  }
+
+  pollHealth();
+  pollMetrics();
+  setInterval(pollMetrics, 5000);
+
+  // ── Mode ────────────────────────────────────────────────────────────────
+  document.querySelectorAll('.mode-btn').forEach(btn => {
+    btn.addEventListener('click', () => {
+      document.querySelectorAll('.mode-btn').forEach(b => b.classList.remove('selected'));
+      btn.classList.add('selected');
+      selectedMode = btn.dataset.mode;
+    });
+  });
+
+  // ── File ────────────────────────────────────────────────────────────────
+  function loadFile(file) {
+    if (!file || !file.type.startsWith('image/')) return;
+    imageFile = file;
+    const reader = new FileReader();
+    reader.onload = e => {
+      previewImg.src = e.target.result;
+      document.getElementById('file-name').textContent = file.name;
+      document.getElementById('file-size').textContent = `${(file.size/1024).toFixed(1)} KB`;
+      dropzone.style.display = 'none';
+      previewWrap.classList.add('active');
+      clearLink.style.display = 'block';
+      runBtn.disabled = false;
+      resetOutput();
+    };
+    reader.readAsDataURL(file);
+  }
+
+  dropzone.addEventListener('click',     () => fileInput.click());
+  fileInput.addEventListener('change',   e  => loadFile(e.target.files[0]));
+  dropzone.addEventListener('dragover',  e  => { e.preventDefault(); dropzone.classList.add('over'); });
+  dropzone.addEventListener('dragleave', ()  => dropzone.classList.remove('over'));
+  dropzone.addEventListener('drop',      e  => {
+    e.preventDefault(); dropzone.classList.remove('over'); loadFile(e.dataTransfer.files[0]);
+  });
+
+  clearLink.addEventListener('click', () => {
+    imageFile = null; fileInput.value = '';
+    previewWrap.classList.remove('active');
+    dropzone.style.display = '';
+    clearLink.style.display = 'none';
+    runBtn.disabled = true;
+    resetOutput();
+  });
+
+  // ── Output state ─────────────────────────────────────────────────────────
+  function resetOutput() {
+    outPlaceholder.style.display = '';
+    outLoading.classList.remove('active');
+    outError.classList.remove('active');
+    outResult.classList.remove('active');
+  }
+
+  function showLoading(msg) {
+    outPlaceholder.style.display = 'none';
+    loadingLabel.textContent = msg || 'Running GLM-OCR…';
+    outLoading.classList.add('active');
+    outError.classList.remove('active');
+    outResult.classList.remove('active');
+  }
+
+  function showError(msg) {
+    outLoading.classList.remove('active');
+    outError.classList.add('active');
+    outError.textContent = `⚠ ${msg}`;
+  }
+
+  function showResult(data) {
+    outLoading.classList.remove('active');
+    outResult.classList.add('active');
+    resultMeta.innerHTML = [
+      `<span class="chip">words: <strong>${data.word_count}</strong></span>`,
+      `<span class="chip">chars: <strong>${data.char_count}</strong></span>`,
+      `<span class="chip">latency: <strong>${(data.latency_ms/1000).toFixed(2)}s</strong></span>`,
+      `<span class="chip">device: <strong>${data.device}</strong></span>`,
+      `<span class="chip">mode: <strong>${data.mode}</strong></span>`,
+    ].join('');
+    resultContent.textContent = data.text || '[No text detected]';
+    pollMetrics();
+  }
+
+  // ── Loading messages ──────────────────────────────────────────────────────
+  const msgs = ['Running GLM-OCR…', 'Encoding image…', 'Decoding tokens…', 'Assembling output…'];
+  let msgTimer = null;
+
+  function startLoadingAnim() {
+    let i = 0;
+    showLoading(msgs[0]);
+    msgTimer = setInterval(() => { i = (i+1) % msgs.length; loadingLabel.textContent = msgs[i]; }, 2000);
+  }
+
+  function stopLoadingAnim() { clearInterval(msgTimer); }
+
+  // ── Run ──────────────────────────────────────────────────────────────────
+  runBtn.addEventListener('click', async () => {
+    if (!imageFile) return;
+    runBtn.disabled = true;
+    startLoadingAnim();
+
+    const form = new FormData();
+    form.append('file', imageFile);
+    form.append('mode', selectedMode);
+
+    try {
+      const r = await fetch(`${API}/ocr`, { method: 'POST', body: form });
+      const data = await r.json();
+      if (!r.ok) throw new Error(data.detail || `Error ${r.status}`);
+      showResult(data);
+    } catch (err) {
+      showError(err.message);
+    } finally {
+      stopLoadingAnim();
+      runBtn.disabled = false;
+    }
+  });
+
+  // ── Copy ─────────────────────────────────────────────────────────────────
+  document.getElementById('copy-btn').addEventListener('click', async () => {
+    try { await navigator.clipboard.writeText(resultContent.textContent); toast('Copied!'); }
+    catch { toast('Select text manually.'); }
+  });
+
+  // ── Download ─────────────────────────────────────────────────────────────
+  document.getElementById('dl-btn').addEventListener('click', () => {
+    const blob = new Blob([resultContent.textContent], { type: 'text/plain' });
+    const a = document.createElement('a');
+    a.href = URL.createObjectURL(blob);
+    a.download = `glm-ocr-${Date.now()}.txt`;
+    a.click();
+    URL.revokeObjectURL(a.href);
+  });
+
+  // ── Toast ─────────────────────────────────────────────────────────────────
+  function toast(msg) {
+    const t = document.getElementById('toast');
+    t.textContent = msg;
+    t.classList.add('show');
+    setTimeout(() => t.classList.remove('show'), 2200);
+  }
+</script>
+</body>
+</html>

generate_icons.py

@@ -0,0 +1,43 @@
+"""
+generate_icons.py — Run this once to create the extension icons.
+Requires Pillow: pip install Pillow
+"""
+from PIL import Image, ImageDraw, ImageFont
+import os
+
+os.makedirs("icons", exist_ok=True)
+
+def make_icon(size):
+    img = Image.new("RGBA", (size, size), (0, 0, 0, 0))
+    draw = ImageDraw.Draw(img)
+
+    # Background rounded rect
+    pad = size // 8
+    draw.rounded_rectangle(
+        [pad, pad, size - pad, size - pad],
+        radius=size // 5,
+        fill="#c94a1f"
+    )
+
+    # Letter "G" for GLM
+    font_size = int(size * 0.52)
+    try:
+        font = ImageFont.truetype("arial.ttf", font_size)
+    except:
+        font = ImageFont.load_default()
+
+    text = "G"
+    bbox = draw.textbbox((0, 0), text, font=font)
+    tw = bbox[2] - bbox[0]
+    th = bbox[3] - bbox[1]
+    tx = (size - tw) // 2 - bbox[0]
+    ty = (size - th) // 2 - bbox[1]
+    draw.text((tx, ty), text, fill="white", font=font)
+
+    img.save(f"icons/icon{size}.png")
+    print(f"Created icons/icon{size}.png")
+
+for s in [16, 48, 128]:
+    make_icon(s)
+
+print("Done. Icons created in icons/")

main.py

@@ -0,0 +1,182 @@
+"""
+main.py — FastAPI server for zai-org/GLM-OCR
+
+Endpoints:
+  GET  /         → Serves the frontend HTML
+  GET  /health   → Liveness probe + model info
+  POST /ocr      → Run OCR on uploaded image
+  GET  /metrics  → Session-level stats
+"""
+
+import logging
+import time
+from contextlib import asynccontextmanager
+from pathlib import Path
+
+import uvicorn
+from fastapi import FastAPI, File, Form, HTTPException, UploadFile, Request
+from fastapi.middleware.cors import CORSMiddleware
+from fastapi.responses import FileResponse, JSONResponse
+from pydantic import BaseModel
+from typing import Annotated
+
+from ocr_engine import engine, OcrResult, OcrMode
+
+# ── Logging ─────────────────────────────────────────────────────────────────
+
+logging.basicConfig(
+    level=logging.INFO,
+    format="%(asctime)s | %(levelname)-8s | %(name)s — %(message)s",
+    datefmt="%H:%M:%S",
+)
+logger = logging.getLogger(__name__)
+
+# ── Session metrics ─────────────────────────────────────────────────────────
+
+class SessionMetrics:
+    def __init__(self):
+        self.total_requests = 0
+        self.total_words    = 0
+        self.total_chars    = 0
+        self.total_ms       = 0.0
+        self.errors         = 0
+        self.started_at     = time.time()
+
+    def record(self, result: OcrResult):
+        self.total_requests += 1
+        self.total_words    += result.word_count
+        self.total_chars    += result.char_count
+        self.total_ms       += result.latency_ms
+
+    def to_dict(self) -> dict:
+        avg = self.total_ms / self.total_requests if self.total_requests else 0
+        return {
+            "total_requests":        self.total_requests,
+            "total_words_extracted": self.total_words,
+            "total_chars_extracted": self.total_chars,
+            "avg_latency_ms":        round(avg, 1),
+            "error_count":           self.errors,
+            "uptime_seconds":        round(time.time() - self.started_at, 1),
+        }
+
+metrics = SessionMetrics()
+
+# ── Lifespan ─────────────────────────────────────────────────────────────────
+
+@asynccontextmanager
+async def lifespan(app: FastAPI):
+    logger.info("🚀 Starting up — loading GLM-OCR model …")
+    engine.load()
+    logger.info("✅ Model ready.")
+    yield
+    logger.info("🛑 Shutting down …")
+    engine.unload()
+
+# ── App ──────────────────────────────────────────────────────────────────────
+
+app = FastAPI(
+    title="GLM-OCR API",
+    description="Self-hosted OCR backend powered by zai-org/GLM-OCR",
+    version="1.0.0",
+    lifespan=lifespan,
+)
+
+app.add_middleware(
+    CORSMiddleware,
+    allow_origins=["*"],
+    allow_methods=["GET", "POST"],
+    allow_headers=["*"],
+)
+
+# ── Schemas ───────────────────────────────────────────────────────────────────
+
+class OcrResponse(BaseModel):
+    success:    bool
+    text:       str
+    word_count: int
+    char_count: int
+    latency_ms: float
+    mode:       str
+    model_id:   str
+    device:     str
+
+# ── Routes ────────────────────────────────────────────────────────────────────
+
+@app.get("/", include_in_schema=False)
+async def serve_frontend():
+    frontend = Path(__file__).parent / "frontend" / "index.html"
+    if not frontend.exists():
+        return JSONResponse({"message": "Frontend not found."}, 404)
+    return FileResponse(str(frontend))
+
+
+@app.get("/health")
+async def health():
+    return {
+        "status": "ok" if engine.loaded else "loading",
+        "model":  engine.info,
+    }
+
+
+@app.post("/ocr", response_model=OcrResponse)
+async def run_ocr(
+    file: Annotated[UploadFile, File(description="Image file (PNG, JPG, WEBP, BMP, TIFF)")],
+    mode: Annotated[OcrMode,    Form(description="'recognize' for plain text · 'parse' for structured markdown")] = "recognize",
+):
+    """
+    Run GLM-OCR on an uploaded image.
+
+    **mode options:**
+    - `recognize` — extracts raw text, preserves layout (default)
+    - `parse` — returns structured markdown (headers, tables, lists)
+    """
+    allowed = {"image/png", "image/jpeg", "image/webp", "image/gif", "image/bmp", "image/tiff"}
+    if file.content_type and file.content_type not in allowed:
+        raise HTTPException(status_code=415, detail=f"Unsupported file type: {file.content_type}")
+
+    image_bytes = await file.read()
+    if not image_bytes:
+        raise HTTPException(status_code=400, detail="Empty file.")
+    if len(image_bytes) > 20 * 1024 * 1024:
+        raise HTTPException(status_code=413, detail="File too large. Max 20 MB.")
+
+    logger.info(f"OCR | file={file.filename} size={len(image_bytes)/1024:.1f}KB mode={mode}")
+
+    try:
+        result = engine.run(image_bytes, mode=mode)
+    except ValueError as e:
+        metrics.errors += 1
+        raise HTTPException(status_code=422, detail=str(e))
+    except Exception as e:
+        metrics.errors += 1
+        logger.exception("Inference error")
+        raise HTTPException(status_code=500, detail=f"Inference failed: {e}")
+
+    metrics.record(result)
+    logger.info(f"Done | {result.word_count} words | {result.latency_ms:.0f}ms")
+
+    return OcrResponse(
+        success    = True,
+        text       = result.text,
+        word_count = result.word_count,
+        char_count = result.char_count,
+        latency_ms = result.latency_ms,
+        mode       = result.mode,
+        model_id   = result.model_id,
+        device     = result.device,
+    )
+
+
+@app.get("/metrics")
+async def get_metrics():
+    return metrics.to_dict()
+
+
+@app.exception_handler(Exception)
+async def global_handler(request: Request, exc: Exception):
+    logger.exception(f"Unhandled: {request.url}")
+    return JSONResponse(status_code=500, content={"detail": "Internal server error"})
+
+
+if __name__ == "__main__":
+    uvicorn.run("main:app", host="0.0.0.0", port=8000, reload=False)

manifest.json

@@ -0,0 +1,54 @@
+{
+  "manifest_version": 3,
+  "name": "GLM-OCR — Text from Screen",
+  "version": "1.0.0",
+  "description": "Select any region on screen and extract text using the self-hosted GLM-OCR model.",
+
+  "permissions": [
+    "activeTab",
+    "scripting",
+    "tabs",
+    "storage"
+  ],
+
+  "host_permissions": [
+    "http://localhost:8000/*",
+    "<all_urls>"
+  ],
+
+  "background": {
+    "service_worker": "background.js"
+  },
+
+  "action": {
+    "default_popup": "popup.html",
+    "default_icon": {
+      "16":  "icons/icon16.png",
+      "48":  "icons/icon48.png",
+      "128": "icons/icon128.png"
+    }
+  },
+
+  "content_scripts": [
+    {
+      "matches": ["<all_urls>"],
+      "js": ["content.js"],
+      "css": ["content.css"],
+      "run_at": "document_idle",
+      "all_frames": false
+    }
+  ],
+
+  "icons": {
+    "16":  "icons/icon16.png",
+    "48":  "icons/icon48.png",
+    "128": "icons/icon128.png"
+  },
+
+  "web_accessible_resources": [
+    {
+      "resources": ["sidebar.html"],
+      "matches": ["<all_urls>"]
+    }
+  ]
+}

ocr_engine.py

@@ -0,0 +1,242 @@
+"""
+ocr_engine.py — zai-org/GLM-OCR inference module
+
+GLM-OCR is a 0.9B multimodal OCR model built on the GLM-V encoder-decoder
+architecture. It uses a CogViT visual encoder + GLM-0.5B language decoder,
+trained with Multi-Token Prediction loss for high-quality document OCR.
+
+Model:  https://huggingface.co/zai-org/GLM-OCR
+Paper:  https://arxiv.org/abs/2603.10910
+"""
+
+import io
+import time
+import logging
+import tempfile
+from dataclasses import dataclass
+from pathlib import Path
+from typing import Literal
+
+import torch
+import torch.nn.functional as F
+from PIL import Image
+from transformers import AutoProcessor, AutoModelForImageTextToText
+
+logger = logging.getLogger(__name__)
+
+# ── Config ─────────────────────────────────────────────────────────────────
+
+MODEL_ID = "zai-org/GLM-OCR"
+DEVICE   = "cuda" if torch.cuda.is_available() else "cpu"
+
+# Two prompt modes supported by GLM-OCR:
+#   "recognize" → "Text Recognition:"   (extract raw text, preserves structure)
+#   "parse"     → "Document Parsing:"   (structured markdown output)
+OcrMode = Literal["recognize", "parse"]
+
+PROMPTS = {
+    "recognize": "Text Recognition:",
+    "parse":     "Document Parsing:",
+}
+
+# ── Result dataclass ────────────────────────────────────────────────────────
+
+@dataclass
+class OcrResult:
+    text:        str
+    mode:        str
+    word_count:  int
+    char_count:  int
+    latency_ms:  float
+    device:      str
+    model_id:    str
+
+# ── Engine ──────────────────────────────────────────────────────────────────
+
+class GlmOcrEngine:
+    """
+    Wraps zai-org/GLM-OCR. Call .load() once at startup,
+    then .run(image_bytes, mode) per request.
+    """
+
+    def __init__(self):
+        self.model     = None
+        self.processor = None
+        self.loaded    = False
+
+    # ── Lifecycle ───────────────────────────────────────────────────────────
+
+    def load(self) -> None:
+        if self.loaded:
+            return
+
+        logger.info(f"Loading {MODEL_ID} on {DEVICE} …")
+        t0 = time.time()
+
+        self.processor = AutoProcessor.from_pretrained(
+            MODEL_ID,
+            trust_remote_code=True,
+        )
+
+        self.model = AutoModelForImageTextToText.from_pretrained(
+            MODEL_ID,
+            torch_dtype="auto",       # fp16 on CUDA, fp32 on CPU
+            device_map="auto",        # spreads across available devices
+            trust_remote_code=True,
+        )
+
+        # ── CPU patch: replace the slow Conv3d patch_embed with matmul ──────
+        # The default Conv3d produces ~22k individual 1x1x1 kernels on CPU
+        # which is catastrophically slow. This replaces it with a single F.linear
+        # call, bringing CPU inference from ~30min to ~30s per image.
+        # See: https://huggingface.co/zai-org/GLM-OCR/discussions/36
+        if DEVICE == "cpu":
+            self._apply_cpu_patch()
+
+        self.model.eval()
+        self.loaded = True
+        logger.info(f"Model loaded in {time.time() - t0:.1f}s")
+
+    def _apply_cpu_patch(self):
+        """Replace Conv3d patch_embed with matmul for fast CPU inference."""
+        try:
+            base_model  = self.model.model if hasattr(self.model, 'model') else self.model
+            patch_embed = base_model.visual.patch_embed
+            proj        = patch_embed.proj
+
+            in_features = (
+                patch_embed.in_channels *
+                patch_embed.temporal_patch_size *
+                patch_embed.patch_size ** 2
+            )
+            embed_dim = patch_embed.embed_dim
+            weight    = proj.weight
+            bias      = proj.bias
+
+            def _fast_forward(hidden_states: torch.Tensor) -> torch.Tensor:
+                target_dtype = weight.dtype
+                hidden_states = hidden_states.reshape(-1, in_features).to(dtype=target_dtype)
+                return F.linear(hidden_states, weight.reshape(embed_dim, -1), bias)
+
+            patch_embed.forward = _fast_forward
+            logger.info("CPU matmul patch applied to patch_embed.")
+        except Exception as e:
+            logger.warning(f"Could not apply CPU patch (will still work, just slower): {e}")
+
+    def unload(self) -> None:
+        if self.model:
+            del self.model
+            del self.processor
+            self.model     = None
+            self.processor = None
+            self.loaded    = False
+            if torch.cuda.is_available():
+                torch.cuda.empty_cache()
+            logger.info("Model unloaded.")
+
+    # ── Inference ───────────────────────────────────────────────────────────
+
+    def run(self, image_bytes: bytes, mode: OcrMode = "recognize") -> OcrResult:
+        """
+        Run GLM-OCR on raw image bytes.
+
+        Args:
+            image_bytes: Raw bytes of the uploaded image.
+            mode:
+                'recognize' → plain text extraction ("Text Recognition:")
+                'parse'     → structured markdown output ("Document Parsing:")
+
+        Returns:
+            OcrResult with extracted text and metadata.
+        """
+        if not self.loaded:
+            raise RuntimeError("Engine not loaded. Call .load() first.")
+
+        # Validate image
+        img = self._validate_image(image_bytes)
+
+        # Save to temp file — processor loads from path/URL
+        tmp = tempfile.NamedTemporaryFile(suffix=".png", delete=False)
+        img.save(tmp.name, format="PNG")
+        tmp.close()
+
+        prompt_text = PROMPTS[mode]
+
+        messages = [
+            {
+                "role": "user",
+                "content": [
+                    {"type": "image", "url": tmp.name},
+                    {"type": "text",  "text": prompt_text},
+                ],
+            }
+        ]
+
+        t0 = time.time()
+        try:
+            inputs = self.processor.apply_chat_template(
+                messages,
+                tokenize=True,
+                add_generation_prompt=True,
+                return_dict=True,
+                return_tensors="pt",
+            ).to(self.model.device)
+
+            # token_type_ids not used by this model
+            inputs.pop("token_type_ids", None)
+
+            with torch.inference_mode():
+                generated_ids = self.model.generate(
+                    **inputs,
+                    max_new_tokens=8192,
+                )
+
+            # Decode only the newly generated tokens
+            output_text = self.processor.decode(
+                generated_ids[0][inputs["input_ids"].shape[1]:],
+                skip_special_tokens=False,
+            )
+        finally:
+            Path(tmp.name).unlink(missing_ok=True)
+
+        latency_ms  = (time.time() - t0) * 1000
+        text        = output_text.strip() if output_text else ""
+
+        return OcrResult(
+            text       = text,
+            mode       = mode,
+            word_count = len(text.split()) if text else 0,
+            char_count = len(text),
+            latency_ms = round(latency_ms, 1),
+            device     = str(next(self.model.parameters()).device),
+            model_id   = MODEL_ID,
+        )
+
+    # ── Helpers ─────────────────────────────────────────────────────────────
+
+    @staticmethod
+    def _validate_image(image_bytes: bytes) -> Image.Image:
+        try:
+            img = Image.open(io.BytesIO(image_bytes))
+            img.verify()
+            img = Image.open(io.BytesIO(image_bytes))
+            return img.convert("RGB")
+        except Exception as e:
+            raise ValueError(f"Invalid image: {e}") from e
+
+    @property
+    def info(self) -> dict:
+        return {
+            "model_id":        MODEL_ID,
+            "device":          DEVICE,
+            "loaded":          self.loaded,
+            "cuda_available":  torch.cuda.is_available(),
+            "gpu_name":        torch.cuda.get_device_name(0) if torch.cuda.is_available() else None,
+            "gpu_memory_gb":   round(
+                torch.cuda.get_device_properties(0).total_memory / 1e9, 1
+            ) if torch.cuda.is_available() else None,
+        }
+
+
+# ── Singleton ───────────────────────────────────────────────────────────────
+engine = GlmOcrEngine()

popup.html

@@ -0,0 +1,302 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8"/>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+  <title>GLM-OCR</title>
+  <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;700&family=DM+Serif+Display:ital@0;1&family=DM+Sans:wght@400;500&display=swap" rel="stylesheet"/>
+  <style>
+    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+    :root {
+      --ink:    #0f0e0d;
+      --paper:  #f5f0e8;
+      --warm:   #ede8dc;
+      --border: #d4cfc3;
+      --muted:  #8f8880;
+      --accent: #c94a1f;
+      --green:  #1a6b4a;
+      --mono:   'IBM Plex Mono', monospace;
+      --serif:  'DM Serif Display', serif;
+      --sans:   'DM Sans', sans-serif;
+    }
+
+    body {
+      width: 300px;
+      background: var(--paper);
+      color: var(--ink);
+      font-family: var(--sans);
+    }
+
+    body::before {
+      content: '';
+      position: fixed; inset: 0;
+      background-image: radial-gradient(circle, rgba(0,0,0,0.05) 1px, transparent 1px);
+      background-size: 16px 16px;
+      pointer-events: none;
+    }
+
+    .inner { position: relative; }
+
+    /* Header */
+    .header {
+      padding: 16px 18px 14px;
+      border-bottom: 2px solid var(--ink);
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+    }
+
+    .logo {
+      font-family: var(--serif);
+      font-size: 1.1rem;
+      letter-spacing: -0.01em;
+    }
+
+    .logo em { font-style: italic; color: var(--accent); }
+
+    .server-badge {
+      display: flex;
+      align-items: center;
+      gap: 5px;
+      font-family: var(--mono);
+      font-size: 0.58rem;
+      color: var(--muted);
+      letter-spacing: 0.06em;
+    }
+
+    .dot {
+      width: 6px; height: 6px;
+      border-radius: 50%;
+      background: var(--muted);
+    }
+    .dot.ok  { background: var(--green); }
+    .dot.err { background: var(--accent); }
+    .dot.pulse { animation: blink 1.2s ease-in-out infinite; }
+    @keyframes blink { 0%,100%{opacity:1} 50%{opacity:0.3} }
+
+    /* Main CTA */
+    .cta-area {
+      padding: 20px 18px;
+      border-bottom: 1px solid var(--border);
+    }
+
+    .cta-label {
+      font-family: var(--mono);
+      font-size: 0.62rem;
+      color: var(--muted);
+      letter-spacing: 0.1em;
+      text-transform: uppercase;
+      margin-bottom: 10px;
+    }
+
+    .select-btn {
+      width: 100%;
+      padding: 14px;
+      background: var(--accent);
+      color: white;
+      border: none;
+      border-radius: 2px;
+      font-family: var(--serif);
+      font-size: 1rem;
+      cursor: pointer;
+      transition: background 0.15s;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 8px;
+    }
+
+    .select-btn:hover:not(:disabled) { background: #b53d15; }
+    .select-btn:disabled { opacity: 0.35; cursor: not-allowed; }
+
+    .select-btn .shortcut {
+      font-family: var(--mono);
+      font-size: 0.6rem;
+      opacity: 0.7;
+      margin-left: auto;
+    }
+
+    .offline-msg {
+      display: none;
+      margin-top: 10px;
+      font-family: var(--mono);
+      font-size: 0.65rem;
+      color: var(--accent);
+      line-height: 1.6;
+    }
+
+    .offline-msg.show { display: block; }
+
+    .offline-msg a {
+      color: var(--accent);
+      text-decoration: underline;
+    }
+
+    /* How it works */
+    .how {
+      padding: 16px 18px;
+      border-bottom: 1px solid var(--border);
+    }
+
+    .how-title {
+      font-family: var(--mono);
+      font-size: 0.6rem;
+      color: var(--muted);
+      letter-spacing: 0.1em;
+      text-transform: uppercase;
+      margin-bottom: 12px;
+    }
+
+    .step {
+      display: flex;
+      gap: 10px;
+      align-items: flex-start;
+      margin-bottom: 8px;
+    }
+
+    .step:last-child { margin-bottom: 0; }
+
+    .step-num {
+      font-family: var(--mono);
+      font-size: 0.6rem;
+      color: var(--accent);
+      font-weight: 700;
+      flex-shrink: 0;
+      margin-top: 2px;
+    }
+
+    .step-text {
+      font-size: 0.78rem;
+      line-height: 1.5;
+      color: var(--ink);
+    }
+
+    /* Settings */
+    .settings {
+      padding: 14px 18px;
+    }
+
+    .settings-title {
+      font-family: var(--mono);
+      font-size: 0.6rem;
+      color: var(--muted);
+      letter-spacing: 0.1em;
+      text-transform: uppercase;
+      margin-bottom: 10px;
+    }
+
+    .setting-row {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      margin-bottom: 8px;
+    }
+
+    .setting-label {
+      font-family: var(--mono);
+      font-size: 0.68rem;
+      color: var(--ink);
+    }
+
+    .mode-toggle {
+      display: flex;
+      gap: 4px;
+    }
+
+    .mode-opt {
+      font-family: var(--mono);
+      font-size: 0.58rem;
+      padding: 4px 8px;
+      border: 1px solid var(--border);
+      background: transparent;
+      color: var(--muted);
+      cursor: pointer;
+      border-radius: 2px;
+      transition: all 0.12s;
+    }
+
+    .mode-opt.active {
+      background: var(--ink);
+      border-color: var(--ink);
+      color: var(--paper);
+    }
+
+    /* Footer */
+    .footer {
+      padding: 10px 18px;
+      border-top: 1px solid var(--border);
+      font-family: var(--mono);
+      font-size: 0.58rem;
+      color: var(--muted);
+      display: flex;
+      justify-content: space-between;
+    }
+  </style>
+</head>
+<body>
+<div class="inner">
+
+  <!-- Header -->
+  <div class="header">
+    <div class="logo">GLM-<em>OCR</em></div>
+    <div class="server-badge">
+      <div class="dot pulse" id="dot"></div>
+      <span id="server-label">checking…</span>
+    </div>
+  </div>
+
+  <!-- CTA -->
+  <div class="cta-area">
+    <div class="cta-label">Select region on screen</div>
+    <button class="select-btn" id="select-btn" disabled>
+      ✂ &nbsp;Select & Extract Text
+    </button>
+    <div class="offline-msg" id="offline-msg">
+      ⚠ GLM-OCR server not running.<br>
+      Start it with <code>python main.py</code> at <a href="http://localhost:8000" target="_blank">localhost:8000</a>.
+    </div>
+  </div>
+
+  <!-- How it works -->
+  <div class="how">
+    <div class="how-title">How it works</div>
+    <div class="step">
+      <div class="step-num">01</div>
+      <div class="step-text">Click the button above — page dims</div>
+    </div>
+    <div class="step">
+      <div class="step-num">02</div>
+      <div class="step-text">Drag a box around the text you want</div>
+    </div>
+    <div class="step">
+      <div class="step-num">03</div>
+      <div class="step-text">GLM-OCR extracts text into a sidebar</div>
+    </div>
+    <div class="step">
+      <div class="step-num">04</div>
+      <div class="step-text">Copy or download the result</div>
+    </div>
+  </div>
+
+  <!-- Settings -->
+  <div class="settings">
+    <div class="settings-title">Settings</div>
+    <div class="setting-row">
+      <span class="setting-label">OCR Mode</span>
+      <div class="mode-toggle">
+        <button class="mode-opt active" data-mode="recognize">recognize</button>
+        <button class="mode-opt" data-mode="parse">parse</button>
+      </div>
+    </div>
+  </div>
+
+  <div class="footer">
+    <span>zai-org/GLM-OCR · 0.9B</span>
+    <span>self-hosted</span>
+  </div>
+
+</div>
+
+<script src="popup.js"></script>
+</body>
+</html>

popup.js

@@ -0,0 +1,73 @@
+// popup.js
+
+const selectBtn   = document.getElementById("select-btn");
+const dot         = document.getElementById("dot");
+const serverLabel = document.getElementById("server-label");
+const offlineMsg  = document.getElementById("offline-msg");
+
+let selectedMode = "recognize";
+
+// ── Check server health ───────────────────────────────────────────────────────
+async function checkServer() {
+  try {
+    const r = await fetch("http://localhost:8000/health", {
+      signal: AbortSignal.timeout(3000),
+    });
+    const d = await r.json();
+    return d.status === "ok";
+  } catch {
+    return false;
+  }
+}
+
+async function updateServerStatus() {
+  const ok = await checkServer();
+  dot.className        = `dot ${ok ? "ok" : "err"}`;
+  serverLabel.textContent = ok ? "server ready" : "offline";
+  selectBtn.disabled   = !ok;
+  offlineMsg.classList.toggle("show", !ok);
+}
+
+updateServerStatus();
+
+// ── Mode toggle ───────────────────────────────────────────────────────────────
+document.querySelectorAll(".mode-opt").forEach(btn => {
+  btn.addEventListener("click", () => {
+    document.querySelectorAll(".mode-opt").forEach(b => b.classList.remove("active"));
+    btn.classList.add("active");
+    selectedMode = btn.dataset.mode;
+    chrome.storage.local.set({ ocrMode: selectedMode });
+  });
+});
+
+// Restore saved mode
+chrome.storage.local.get(["ocrMode"], ({ ocrMode }) => {
+  if (ocrMode) {
+    selectedMode = ocrMode;
+    document.querySelectorAll(".mode-opt").forEach(btn => {
+      btn.classList.toggle("active", btn.dataset.mode === ocrMode);
+    });
+  }
+});
+
+// ── Select button ─────────────────────────────────────────────────────────────
+selectBtn.addEventListener("click", async () => {
+  // Save current mode to storage so background can read it
+  await chrome.storage.local.set({ ocrMode: selectedMode });
+
+  // Get current tab and inject the selection
+  const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
+
+  await chrome.scripting.executeScript({
+    target: { tabId: tab.id },
+    func: () => {
+      window.postMessage({ type: "GLMOCR_START" }, "*");
+    },
+  });
+
+  // Tell content script to start selection mode
+  chrome.tabs.sendMessage(tab.id, { type: "START_SELECTION" });
+
+  // Close popup so it doesn't obscure the page
+  window.close();
+});

requirements.txt

@@ -0,0 +1,27 @@
+# GLM-OCR Backend — Python dependencies
+# Install: pip install -r requirements.txt
+
+# Web framework
+fastapi==0.115.5
+uvicorn[standard]==0.32.1
+python-multipart>=0.0.12
+
+# GLM-OCR requires transformers >= 5.3.0
+# Install latest directly from GitHub to be safe:
+# pip install git+https://github.com/huggingface/transformers.git
+transformers>=5.3.0
+
+# ML
+torch>=2.2.0
+torchvision>=0.17.0
+accelerate>=1.1.0
+
+# Image
+Pillow>=10.4.0
+
+# Misc
+pydantic>=2.9.0
+safetensors>=0.4.5
+einops>=0.8.0
+sentencepiece>=0.2.0
+tiktoken>=0.7.0

sidebar.html

@@ -0,0 +1,391 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8"/>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+  <title>GLM-OCR Result</title>
+  <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;700&family=DM+Serif+Display:ital@0;1&family=DM+Sans:wght@400;500&display=swap" rel="stylesheet"/>
+  <style>
+    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+    :root {
+      --ink:    #0f0e0d;
+      --paper:  #f5f0e8;
+      --warm:   #ede8dc;
+      --border: #d4cfc3;
+      --muted:  #8f8880;
+      --accent: #c94a1f;
+      --green:  #1a6b4a;
+      --mono:   'IBM Plex Mono', monospace;
+      --serif:  'DM Serif Display', serif;
+      --sans:   'DM Sans', sans-serif;
+    }
+
+    html, body {
+      height: 100%;
+      background: var(--paper);
+      color: var(--ink);
+      font-family: var(--sans);
+      overflow: hidden;
+    }
+
+    body::before {
+      content: '';
+      position: fixed; inset: 0;
+      background-image: radial-gradient(circle, rgba(0,0,0,0.05) 1px, transparent 1px);
+      background-size: 16px 16px;
+      pointer-events: none;
+    }
+
+    .sidebar {
+      position: relative;
+      height: 100vh;
+      display: flex;
+      flex-direction: column;
+    }
+
+    /* ── Header ── */
+    .sb-header {
+      padding: 14px 16px;
+      border-bottom: 2px solid var(--ink);
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      flex-shrink: 0;
+    }
+
+    .sb-title {
+      font-family: var(--serif);
+      font-size: 1rem;
+      letter-spacing: -0.01em;
+    }
+
+    .sb-title em { font-style: italic; color: var(--accent); }
+
+    .sb-close {
+      font-family: var(--mono);
+      font-size: 0.6rem;
+      padding: 5px 10px;
+      border: 1px solid var(--border);
+      background: transparent;
+      cursor: pointer;
+      border-radius: 2px;
+      color: var(--muted);
+      transition: all 0.12s;
+    }
+
+    .sb-close:hover { border-color: var(--ink); color: var(--ink); }
+
+    /* ── Scrollable body ── */
+    .sb-body {
+      flex: 1;
+      overflow-y: auto;
+      display: flex;
+      flex-direction: column;
+    }
+
+    /* ── Loading ── */
+    .sb-loading {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      gap: 16px;
+      padding: 24px;
+    }
+
+    .scan-bar-wrap { width: 140px; height: 3px; background: var(--border); border-radius: 2px; overflow: hidden; }
+    .scan-bar { height: 100%; background: var(--accent); border-radius: 2px; animation: scan 1.4s ease-in-out infinite; }
+    @keyframes scan { 0%{transform:translateX(-100%)} 50%{transform:translateX(0)} 100%{transform:translateX(100%)} }
+
+    .loading-label {
+      font-family: var(--mono);
+      font-size: 0.68rem;
+      color: var(--muted);
+      animation: blink 1.4s ease-in-out infinite;
+    }
+
+    @keyframes blink { 0%,100%{opacity:1} 50%{opacity:0.3} }
+
+    /* ── Error ── */
+    .sb-error {
+      margin: 16px;
+      background: #fff0f0;
+      border: 1px solid rgba(201,74,31,0.3);
+      border-radius: 2px;
+      padding: 14px;
+      font-family: var(--mono);
+      font-size: 0.72rem;
+      color: var(--accent);
+      line-height: 1.7;
+    }
+
+    /* ── Image preview ── */
+    .sb-image-wrap {
+      padding: 14px 16px 0;
+      flex-shrink: 0;
+    }
+
+    .sb-image-label {
+      font-family: var(--mono);
+      font-size: 0.58rem;
+      color: var(--muted);
+      letter-spacing: 0.1em;
+      text-transform: uppercase;
+      margin-bottom: 8px;
+    }
+
+    .sb-image {
+      width: 100%;
+      max-height: 160px;
+      object-fit: contain;
+      border: 1px solid var(--border);
+      border-radius: 2px;
+      background: var(--warm);
+    }
+
+    /* ── Meta chips ── */
+    .sb-meta {
+      padding: 10px 16px;
+      display: flex;
+      gap: 10px;
+      flex-wrap: wrap;
+      border-bottom: 1px solid var(--border);
+      flex-shrink: 0;
+    }
+
+    .chip {
+      font-family: var(--mono);
+      font-size: 0.6rem;
+      color: var(--muted);
+    }
+
+    .chip strong { color: var(--green); }
+
+    /* ── Extracted text ── */
+    .sb-text-section {
+      padding: 14px 16px;
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+      flex: 1;
+      min-height: 0;
+    }
+
+    .sb-text-label {
+      font-family: var(--mono);
+      font-size: 0.58rem;
+      color: var(--muted);
+      letter-spacing: 0.1em;
+      text-transform: uppercase;
+      flex-shrink: 0;
+    }
+
+    .sb-text {
+      background: var(--warm);
+      border: 1px solid var(--border);
+      border-radius: 2px;
+      padding: 14px;
+      font-family: var(--mono);
+      font-size: 0.78rem;
+      line-height: 1.85;
+      white-space: pre-wrap;
+      word-break: break-word;
+      overflow-y: auto;
+      flex: 1;
+      min-height: 120px;
+    }
+
+    /* ── Actions ── */
+    .sb-actions {
+      padding: 12px 16px;
+      border-top: 1px solid var(--border);
+      display: flex;
+      gap: 8px;
+      flex-shrink: 0;
+    }
+
+    .action-btn {
+      font-family: var(--mono);
+      font-size: 0.62rem;
+      letter-spacing: 0.04em;
+      padding: 9px 12px;
+      border: 1px solid var(--border);
+      background: transparent;
+      color: var(--ink);
+      cursor: pointer;
+      border-radius: 2px;
+      transition: all 0.12s;
+      flex: 1;
+    }
+
+    .action-btn:hover { border-color: var(--ink); }
+
+    .action-btn.primary {
+      background: var(--accent);
+      border-color: var(--accent);
+      color: white;
+    }
+
+    .action-btn.primary:hover { background: #b53d15; }
+
+    /* ── Toast ── */
+    .toast {
+      position: fixed;
+      bottom: 16px;
+      left: 50%;
+      transform: translateX(-50%) translateY(40px);
+      opacity: 0;
+      background: var(--ink);
+      color: var(--paper);
+      font-family: var(--mono);
+      font-size: 0.65rem;
+      padding: 8px 16px;
+      border-radius: 2px;
+      white-space: nowrap;
+      transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
+      z-index: 999;
+    }
+
+    .toast.show {
+      transform: translateX(-50%) translateY(0);
+      opacity: 1;
+    }
+  </style>
+</head>
+<body>
+<div class="sidebar">
+
+  <!-- Header -->
+  <div class="sb-header">
+    <div class="sb-title">GLM-<em>OCR</em> Result</div>
+    <button class="sb-close" id="close-btn">✕ Close</button>
+  </div>
+
+  <!-- Body -->
+  <div class="sb-body" id="sb-body">
+
+    <!-- Loading state (default) -->
+    <div class="sb-loading" id="state-loading">
+      <div class="scan-bar-wrap"><div class="scan-bar"></div></div>
+      <div class="loading-label">Running GLM-OCR…</div>
+    </div>
+
+  </div>
+
+  <!-- Actions (shown after result) -->
+  <div class="sb-actions" id="sb-actions" style="display:none">
+    <button class="action-btn primary" id="new-btn">✂ New Selection</button>
+    <button class="action-btn" id="copy-btn">Copy</button>
+    <button class="action-btn" id="dl-btn">↓ .txt</button>
+  </div>
+
+</div>
+
+<div class="toast" id="toast"></div>
+
+<script>
+  let extractedText = "";
+
+  // ── Receive data from content.js ──────────────────────────────────────────
+  window.addEventListener("message", (e) => {
+    if (e.data?.type !== "SIDEBAR_DATA") return;
+    const data = e.data.data;
+
+    if (data.loading) return; // already showing loading state
+
+    renderResult(data);
+  });
+
+  function renderResult(data) {
+    const body    = document.getElementById("sb-body");
+    const actions = document.getElementById("sb-actions");
+
+    if (data.error) {
+      body.innerHTML = `<div class="sb-error">⚠ ${data.error}<br><br>Make sure the GLM-OCR server is running at localhost:8000.</div>`;
+      actions.style.display = "flex";
+      return;
+    }
+
+    extractedText = data.text || "";
+
+    const latency = data.latency_ms ? `${(data.latency_ms / 1000).toFixed(2)}s` : "—";
+
+    body.innerHTML = `
+      <div class="sb-image-wrap">
+        <div class="sb-image-label">Selected Region</div>
+        <img class="sb-image" src="${data.imageDataUrl || ''}" alt="Selection"/>
+      </div>
+
+      <div class="sb-meta">
+        <span class="chip">words: <strong>${data.word_count || 0}</strong></span>
+        <span class="chip">chars: <strong>${data.char_count || 0}</strong></span>
+        <span class="chip">latency: <strong>${latency}</strong></span>
+        <span class="chip">device: <strong>${data.device || '—'}</strong></span>
+      </div>
+
+      <div class="sb-text-section">
+        <div class="sb-text-label">Extracted Text</div>
+        <div class="sb-text" id="result-text">${data.text ? escapeHtml(data.text) : '<span style="color:var(--muted);">[No text detected]</span>'}</div>
+      </div>
+    `;
+
+    actions.style.display = "flex";
+  }
+
+  function escapeHtml(str) {
+    return str
+      .replace(/&/g, "&amp;")
+      .replace(/</g, "&lt;")
+      .replace(/>/g, "&gt;");
+  }
+
+  // ── Close ─────────────────────────────────────────────────────────────────
+  document.getElementById("close-btn").addEventListener("click", () => {
+    window.parent.postMessage({ type: "CLOSE_SIDEBAR" }, "*");
+  });
+
+  // ── New selection ─────────────────────────────────────────────────────────
+  document.getElementById("new-btn").addEventListener("click", () => {
+    window.parent.postMessage({ type: "START_NEW_SELECTION" }, "*");
+  });
+
+  // ── Copy ───────────────────────────────────────────────────────────��──────
+  document.getElementById("copy-btn").addEventListener("click", async () => {
+    try {
+      await navigator.clipboard.writeText(extractedText);
+      toast("Copied!");
+    } catch {
+      // fallback: select all text in the result box
+      const el = document.getElementById("result-text");
+      if (el) {
+        const range = document.createRange();
+        range.selectNodeContents(el);
+        const sel = window.getSelection();
+        sel.removeAllRanges();
+        sel.addRange(range);
+      }
+      toast("Select text above and copy manually.");
+    }
+  });
+
+  // ── Download ──────────────────────────────────────────────────────────────
+  document.getElementById("dl-btn").addEventListener("click", () => {
+    const blob = new Blob([extractedText], { type: "text/plain" });
+    const a    = document.createElement("a");
+    a.href     = URL.createObjectURL(blob);
+    a.download = `glm-ocr-${Date.now()}.txt`;
+    a.click();
+    URL.revokeObjectURL(a.href);
+  });
+
+  // ── Toast ─────────────────────────────────────────────────────────────────
+  function toast(msg) {
+    const t = document.getElementById("toast");
+    t.textContent = msg;
+    t.classList.add("show");
+    setTimeout(() => t.classList.remove("show"), 2000);
+  }
+</script>
+</body>
+</html>