\n ${currentUser.profileImageUrl ? ` $\"avatar\"$ ` : \"\"}\n ${currentUser.username || currentUser.email}\n Logout\n

\n `;\n show(\"app-content\");\n hide(\"login-prompt\");\n}\n\nfunction renderLoggedOut() {\n const authArea = $(\"auth-area\");\n authArea.innerHTML = `Sign in with Val Town`;\n hide(\"app-content\");\n show(\"login-prompt\");\n}\n\nfunction renderProviderSelector() {\n const container = $(\"model-pills\");\n container.innerHTML = PROVIDER_DISPLAY\n .map((provider) => {\n const active = provider.id === selectedProvider ? \" active\" : \"\";\n return ``;\n })\n .join(\"\");\n\n container.querySelectorAll(\".model-pill\").forEach((btn) => {\n btn.addEventListener(\"click\", () => {\n selectedProvider = btn.dataset.provider;\n container.querySelectorAll(\".model-pill\").forEach((b) => b.classList.remove(\"active\"));\n btn.classList.add(\"active\");\n });\n });\n}\n\nfunction setRunPanelOpen(open) {\n isRunPanelOpen = open;\n const panel = $(\"ocr-run-panel\");\n const grid = $(\"main-grid\");\n const button = $(\"add-run-btn\");\n if (!panel || !grid || !button) return;\n\n panel.classList.toggle(\"hidden\", !open);\n grid.classList.toggle(\"run-hidden\", !open);\n button.textContent = open ? \"Hide OCR Run\" : \"+ Add OCR Run\";\n button.setAttribute(\"aria-expanded\", String(open));\n}\n\nfunction setupRunPanelToggle() {\n const button = $(\"add-run-btn\");\n if (!button) return;\n\n setRunPanelOpen(false);\n button.addEventListener(\"click\", () => setRunPanelOpen(!isRunPanelOpen));\n}\n\nfunction setupUpload() {\n const dropZone = $(\"drop-zone\");\n const fileInput = $(\"file-input\");\n\n dropZone.addEventListener(\"click\", () => fileInput.click());\n\n dropZone.addEventListener(\"dragover\", (e) => {\n e.preventDefault();\n dropZone.classList.add(\"drag-over\");\n });\n\n dropZone.addEventListener(\"dragleave\", () => {\n dropZone.classList.remove(\"drag-over\");\n });\n\n dropZone.addEventListener(\"drop\", (e) => {\n e.preventDefault();\n dropZone.classList.remove(\"drag-over\");\n const files = e.dataTransfer?.files;\n if (files?.[0]) handleFileSelect(files[0]);\n });\n\n fileInput.addEventListener(\"change\", () => {\n if (fileInput.files?.[0]) handleFileSelect(fileInput.files[0]);\n });\n}\n\nfunction handleFileSelect(file) {\n const validTypes = [\"image/png\", \"image/jpeg\", \"image/gif\", \"image/webp\", \"application/pdf\"];\n if (!validTypes.includes(file.type)) {\n showToast(\"Please upload an image (PNG, JPEG, GIF, WebP) or PDF\", \"error\");\n return;\n }\n\n if (file.size > 20 * 1024 * 1024) {\n showToast(\"File too large. Maximum 20MB.\", \"error\");\n return;\n }\n\n selectedFile = file;\n $(\"file-name\").textContent = file.name;\n $(\"file-size\").textContent = formatFileSize(file.size);\n show(\"file-preview\");\n show(\"extract-btn\");\n\n const previewImg = $(\"preview-img\");\n if (file.type.startsWith(\"image/\")) {\n const url = URL.createObjectURL(file);\n previewImg.src = url;\n show(\"preview-img\");\n } else {\n hide(\"preview-img\");\n }\n}\n\nfunction formatFileSize(bytes) {\n if (bytes < 1024) return bytes + \" B\";\n if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + \" KB\";\n return (bytes / (1024 * 1024)).toFixed(1) + \" MB\";\n}\n\nasync function runOcr() {\n if (!selectedFile) return;\n\n const extractBtn = $(\"extract-btn\");\n extractBtn.disabled = true;\n show(\"processing\");\n hide(\"result-section\");\n\n try {\n const dataUrl = await fileToDataUrl(selectedFile);\n\n const res = await fetch(\"/api/ocr\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({\n provider: selectedProvider,\n file_data: dataUrl,\n filename: selectedFile.name,\n }),\n });\n\n if (!res.ok) {\n const err = await res.json();\n throw new Error(err.error || \"OCR failed\");\n }\n\n const data = await res.json();\n showResult(data.record);\n loadHistory();\n } catch (error) {\n showToast(error.message || \"OCR processing failed\", \"error\");\n } finally {\n extractBtn.disabled = false;\n hide(\"processing\");\n }\n}\n\nfunction fileToDataUrl(file) {\n return new Promise((resolve, reject) => {\n const reader = new FileReader();\n reader.onload = () => resolve(reader.result);\n reader.onerror = () => reject(new Error(\"Failed to read file\"));\n reader.readAsDataURL(file);\n });\n}\n\nfunction showResult(record) {\n latestResultRecord = record;\n const resultText = $(\"result-text\");\n resultText.textContent = record.extracted_text;\n $(\"result-provider\").textContent = PROVIDER_BY_ID[record.provider]?.name || record.provider;\n $(\"result-filename\").textContent = record.filename;\n renderStats(record.extracted_text);\n show(\"result-section\");\n}\n\nfunction renderStats(text) {\n const chars = text.length;\n const words = text.trim() ? text.trim().split(/\\s+/).length : 0;\n const lines = text.trim() ? text.split(/\\n/).length : 0;\n const paragraphs = text.trim() ? text.split(/\\n\\s*\\n/).filter((p) => p.trim()).length : 0;\n\n $(\"ocr-stats\").innerHTML = [\n { label: \"Characters\", value: chars.toLocaleString() },\n { label: \"Words\", value: words.toLocaleString() },\n { label: \"Lines\", value: lines.toLocaleString() },\n { label: \"Paragraphs\", value: paragraphs.toLocaleString() },\n ].map((s) => `${s.value} ${s.label}`).join(\"\");\n}\n\nasync function loadHistory() {\n try {\n const res = await fetch(\"/api/history\");\n ocrHistory = await res.json();\n renderHistory();\n } catch {\n // ignore\n }\n}\n\nfunction renderHistory() {\n const container = $(\"history-list\");\n if (ocrHistory.length === 0) {\n container.innerHTML = `

No OCR history yet. Upload an image to get started.

`;\n return;\n }\n\n container.innerHTML = ocrHistory.map(r => `\n

\n ${escapeHtml(r.filename)}\n \n

\n ${PROVIDER_BY_ID[r.provider]?.name || r.provider}\n ${new Date(r.created_at).toLocaleDateString()}\n

${escapeHtml(r.extracted_text.slice(0, 120))}${r.extracted_text.length > 120 ? \"…\" : \"\"}

\n `).join(\"\");\n\n container.querySelectorAll(\".history-item\").forEach(item => {\n item.addEventListener(\"click\", async (e) => {\n if (e.target.classList.contains(\"delete-btn\")) return;\n const id = item.dataset.id;\n await viewHistoryItem(Number(id));\n });\n });\n\n container.querySelectorAll(\".delete-btn\").forEach(btn => {\n btn.addEventListener(\"click\", async (e) => {\n e.stopPropagation();\n const id = btn.dataset.id;\n await deleteHistoryItem(Number(id));\n });\n });\n}\n\nasync function viewHistoryItem(id) {\n try {\n const res = await fetch(`/api/history/${id}`);\n if (!res.ok) throw new Error(\"Not found\");\n const record = await res.json();\n showResult(record);\n $(\"result-section\").scrollIntoView({ behavior: \"smooth\" });\n } catch {\n showToast(\"Failed to load record\", \"error\");\n }\n}\n\nasync function deleteHistoryItem(id) {\n try {\n const res = await fetch(`/api/history/${id}`, { method: \"DELETE\" });\n if (!res.ok) throw new Error(\"Delete failed\");\n showToast(\"Record deleted\", \"success\");\n loadHistory();\n } catch {\n showToast(\"Failed to delete record\", \"error\");\n }\n}\n\nfunction copyResult() {\n const markdown = getMarkdownExportText();\n if (!markdown) {\n showToast(\"No OCR result to copy\", \"error\");\n return;\n }\n\n navigator.clipboard.writeText(markdown).then(() => {\n showToast(\"Markdown copied to clipboard\", \"success\");\n }).catch(() => {\n const fallbackInput = document.createElement(\"textarea\");\n fallbackInput.value = markdown;\n document.body.appendChild(fallbackInput);\n fallbackInput.select();\n document.execCommand(\"copy\");\n fallbackInput.remove();\n showToast(\"Copied markdown\", \"success\");\n });\n}\n\nfunction downloadMarkdown() {\n const markdown = getMarkdownExportText();\n if (!markdown) {\n showToast(\"No OCR result to download\", \"error\");\n return;\n }\n\n const filename = toMarkdownFilename(latestResultRecord?.filename);\n const blob = new Blob([markdown], { type: \"text/markdown;charset=utf-8\" });\n const url = URL.createObjectURL(blob);\n const a = document.createElement(\"a\");\n a.href = url;\n a.download = filename;\n document.body.appendChild(a);\n a.click();\n a.remove();\n URL.revokeObjectURL(url);\n showToast(`Downloaded ${filename}`, \"success\");\n}\n\nfunction getMarkdownExportText() {\n if (!latestResultRecord) return \"\";\n\n const extractedText = $(\"result-text\").textContent || \"\";\n if (!extractedText.trim()) return \"\";\n\n const providerName = PROVIDER_BY_ID[latestResultRecord.provider]?.name || latestResultRecord.provider;\n const sourceName = latestResultRecord.filename || \"unknown\";\n const generatedAt = latestResultRecord.created_at || new Date().toISOString();\n\n return `# OCR Output\n\n- Source: ${sourceName}\n- Provider: ${providerName}\n- Generated: ${generatedAt}\n\n---\n\n${extractedText}\n`;\n}\n\nfunction toMarkdownFilename(filename) {\n const fallback = \"ocr-output\";\n const cleanName = (filename || fallback).replace(/[\\\\/:*?\"<>|]+/g, \"-\").trim();\n const base = cleanName.replace(/\\.[^.]+$/, \"\") || fallback;\n return `${base}.md`;\n}\n\nfunction showToast(message, type = \"success\") {\n const toast = $(\"toast\");\n toast.textContent = message;\n toast.className = `toast toast-${type} show`;\n setTimeout(() => toast.classList.remove(\"show\"), 3000);\n}\n\nfunction escapeHtml(str) {\n const div = document.createElement(\"div\");\n div.textContent = str;\n return div.innerHTML;\n}\n\ndocument.addEventListener(\"DOMContentLoaded\", () => {\n checkAuth();\n renderProviderSelector();\n setupRunPanelToggle();\n setupUpload();\n\n $(\"extract-btn\").addEventListener(\"click\", runOcr);\n $(\"copy-btn\").addEventListener(\"click\", copyResult);\n $(\"download-btn\").addEventListener(\"click\", downloadMarkdown);\n});\n","deleted","label",[184,167],"FRONTEND","permalink","https://www.val.town/x/arfan/ocr-vision/code/FRONTEND/script.ts","extension","ts","actionData","errors"]