Spaces:
Sleeping
Sleeping
| <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> | |
| <!-- Google Analytics --> | |
| <script async src="https://www.googletagmanager.com/gtag/js?id=G-B840VLLZWQ"></script> | |
| <script> | |
| window.dataLayer = window.dataLayer || []; | |
| function gtag(){dataLayer.push(arguments);} | |
| gtag('js', new Date()); | |
| gtag('config', 'G-B840VLLZWQ'); | |
| </script> | |
| </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 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>⟡ Run GLM-OCR</button> | |
| <div class="clear-link" id="clear-link">Clear image</div> | |
| </div> | |
| <!-- RIGHT --> | |
| <div class="col"> | |
| <div class="col-label">02 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> |