{% extends "base.html" %}
{% block content %}
<div class="row g-3 stagger">
<div class="col-12 col-xl-6">
  <div class="card"><div class="card-body">
    <div class="drop" id="drop" tabindex="0" role="button"><i class="bi bi-cloud-arrow-up"></i>{{ _('Drop an image or PDF, click to choose, or paste from the clipboard') }} <span class="kbd">Ctrl</span> <span class="kbd">V</span></div>
    <input type="file" id="file" accept="image/*,.pdf" hidden>
    <div class="row g-2 mt-2">
      <div class="col-12 col-md-6"><label class="form-label">{{ _('Target') }}</label><select class="form-select" id="target"><option value="">{{ _('auto (default route)') }}</option><optgroup label="{{ _('Routes') }}">{% for r in routes %}<option value="route:{{ r.name }}">{{ r.name }}</option>{% endfor %}</optgroup><optgroup label="{{ _('Engines') }}">{% for e in engines %}<option value="engine:{{ e.id }}" {% if not e.available %}disabled{% endif %}>{{ e.name }}{% if not e.available %} ({{ _('unavailable') }}){% endif %}</option>{% endfor %}</optgroup></select></div>
      <div class="col-6 col-md-3"><label class="form-label">{{ _('Language') }}</label><select class="form-select" id="lang"><option value="auto">auto</option></select><div class="form-text d-none" id="lang-note"></div></div>
      <div class="col-6 col-md-3 d-none" id="variant-wrap"><label class="form-label">{{ _('Engine variant') }}</label><select class="form-select" id="variant"></select></div>
      <div class="col-6 col-md-3"><label class="form-label">{{ _('Pages (PDF)') }}</label><input class="form-control" id="pages" placeholder="1-3"></div>
      <div class="col-12 col-md-6 d-none" id="model-wrap"><label class="form-label">{{ _('Model') }}</label>
        <div class="input-group"><input class="form-control" id="model" list="model-list" autocomplete="off" placeholder="{{ _('engine default') }}"><datalist id="model-list"></datalist>
          <button class="btn btn-outline-secondary" id="model-refresh" type="button" title="{{ _('Refresh asks the provider for its current models.') }}"><i class="bi bi-arrow-repeat"></i></button></div>
        <div class="form-text d-none" id="model-note"></div></div>
      <div class="col-12 col-md-6" id="prompt-wrap"><label class="form-label">{{ _('Extra prompt (vision-language engines)') }}</label><input class="form-control" id="prompt" placeholder="{{ _('Preserve table layout…') }}"><div class="form-text">{{ _('Appended to the engine\'s built-in OCR instructions.') }}</div></div>
      <div class="col-12 col-md-6"><label class="form-label">{{ _('Options JSON') }}</label><input class="form-control" id="opts" placeholder='{"minConfidence": 60}'></div>
    </div>
    <div class="d-flex flex-wrap gap-3 align-items-center mt-3">
      <label class="check"><input type="checkbox" id="pre-up">{{ _('upscale') }}</label><label class="check"><input type="checkbox" id="pre-gray">{{ _('grayscale') }}</label><label class="check"><input type="checkbox" id="pre-rot">{{ _('auto-rotate') }}</label><label class="check"><input type="checkbox" id="nocache">{{ _('bypass cache') }}</label>
      <div class="ms-auto d-flex gap-2"><button class="btn btn-outline-secondary btn-sm" id="compare" disabled>{{ _('Compare engines…') }}</button><button class="btn btn-accent btn-sm" id="run" disabled><i class="bi bi-play-fill me-1"></i>{{ _('Run OCR') }}</button></div>
    </div>
    <div id="compare-box" hidden class="mt-3"><label class="form-label">{{ _('Engines') }}</label><select class="form-select" id="compare-sel" multiple size="5">{% for e in engines if e.available %}<option>{{ e.id }}</option>{% endfor %}</select><button class="btn btn-outline-secondary btn-sm mt-2" id="compare-run">{{ _('Compare engines…') }}</button></div>
  </div></div>
  <div class="card mt-3"><div class="card-header"><i class="bi bi-image"></i>{{ _('Input') }}<span class="ms-auto small fw-normal text-muted" id="hover"></span><div class="btn-group btn-group-sm ms-2"><button class="btn btn-outline-secondary" id="zoom-out"><i class="bi bi-zoom-out"></i></button><button class="btn btn-outline-secondary" id="zoom-in"><i class="bi bi-zoom-in"></i></button></div><label class="check ms-2 fw-normal text-lowercase"><input type="checkbox" id="show-boxes" checked>{{ _('boxes') }}</label></div>
  <div class="viewer" id="viewer"><canvas id="canvas"></canvas></div></div>
</div>
<div class="col-12 col-xl-6">
  <div class="card"><div class="card-body"><div class="tabs" role="tablist"><button class="active" data-tab="text">{{ _('Text') }}</button><button data-tab="lines">{{ _('Lines') }}</button><button data-tab="json">JSON</button><button data-tab="routing">{{ _('Routing') }}</button><button data-tab="code">{{ _('Code') }}</button></div>
    <div id="meta" class="small text-muted mb-2">{{ _('No run yet.') }}</div>
    <div data-pane="text"><textarea class="form-control font-monospace" id="out-text" readonly style="min-height:320px" dir="auto"></textarea><div class="d-flex flex-wrap gap-2 mt-2"><button class="btn btn-outline-secondary btn-sm" id="copy"><i class="bi bi-clipboard me-1"></i>{{ _('Copy text') }}</button><span id="exports" class="d-flex flex-wrap gap-1"></span></div></div>
    <div data-pane="lines" hidden class="table-responsive"><table class="table table-sm"><thead><tr><th>#</th><th>{{ _('pages') }}</th><th>{{ _('Text') }}</th><th class="text-end">x</th><th class="text-end">y</th><th class="text-end">w</th><th class="text-end">h</th></tr></thead><tbody id="lines-body"></tbody></table></div>
    <div data-pane="json" hidden><pre id="out-json"></pre></div>
    <div data-pane="routing" hidden><pre id="out-routing"></pre></div>
    <div data-pane="code" hidden><div class="tabs"><button class="active" data-code="curl">cURL</button><button data-code="py">Python</button><button data-code="qt">PyQt5</button></div><pre id="out-code"></pre></div>
  </div></div>
  <div class="card mt-3" id="compare-out" hidden><div class="card-header"><i class="bi bi-columns-gap"></i>{{ _('Compare engines…') }}</div><div class="table-responsive"><table class="table mb-0"><thead><tr><th>{{ _('engine') }}</th><th>{{ _('status') }}</th><th class="text-end">ms</th><th class="text-end">{{ _('chars') }}</th><th>{{ _('Text') }}</th></tr></thead><tbody id="compare-body"></tbody></table></div></div>
</div>
</div>
{% endblock %}
{% block scripts %}<script>
document.addEventListener("DOMContentLoaded", () => {
  const {api, toast, $, fmtMs} = OcrRoute;
  let file = null, img = null, result = null, scale = 1, lastRunId = null;
  const canvas = $("#canvas"), ctx2 = canvas.getContext("2d"), drop = $("#drop"), fileInput = $("#file");
  function setFile(f) { file = f; drop.textContent = `${f.name || "clipboard image"} · ${(f.size/1024).toFixed(1)} KB`; $("#run").disabled = false; $("#compare").disabled = false; if (f.type.startsWith("image/")) { const url = URL.createObjectURL(f); img = new Image(); img.onload = () => { fit(); draw(); }; img.src = url; } else { img = null; draw(); } }
  drop.onclick = () => fileInput.click(); drop.onkeydown = e => { if (e.key === "Enter" || e.key === " ") fileInput.click(); };
  fileInput.onchange = () => fileInput.files[0] && setFile(fileInput.files[0]);
  drop.ondragover = e => { e.preventDefault(); drop.classList.add("over"); }; drop.ondragleave = () => drop.classList.remove("over");
  drop.ondrop = e => { e.preventDefault(); drop.classList.remove("over"); if (e.dataTransfer.files[0]) setFile(e.dataTransfer.files[0]); };
  document.addEventListener("paste", e => { for (const it of e.clipboardData.items) if (it.type.startsWith("image/")) { setFile(it.getAsFile()); break; } });
  function fit() { if (!img) return; scale = Math.min(1, ($("#viewer").clientWidth - 2) / img.width); }
  function draw() { if (!img) { canvas.width = canvas.height = 0; return; } canvas.width = img.width * scale; canvas.height = img.height * scale; ctx2.drawImage(img, 0, 0, canvas.width, canvas.height); if (!result || !$("#show-boxes").checked) return; for (const ln of result.TextOverlay.Lines) { if ((ln.Page || 1) !== 1) continue; for (const w of ln.Words) { ctx2.fillStyle = "rgba(245,180,0,.28)"; ctx2.strokeStyle = "rgba(245,180,0,.95)"; ctx2.lineWidth = 1; ctx2.fillRect(w.Left*scale, w.Top*scale, w.Width*scale, w.Height*scale); ctx2.strokeRect(w.Left*scale, w.Top*scale, w.Width*scale, w.Height*scale); } } }
  $("#zoom-in").onclick = () => { scale *= 1.25; draw(); }; $("#zoom-out").onclick = () => { scale /= 1.25; draw(); }; $("#show-boxes").onchange = draw;
  canvas.onmousemove = e => { if (!result) return; const r = canvas.getBoundingClientRect(), x = (e.clientX - r.left)/scale, y = (e.clientY - r.top)/scale; let hit = null; for (const ln of result.TextOverlay.Lines) for (const w of ln.Words) if (x >= w.Left && x <= w.Left + w.Width && y >= w.Top && y <= w.Top + w.Height) hit = w; $("#hover").textContent = hit ? `"${hit.WordText}"${hit.Confidence != null ? " · " + hit.Confidence : ""} @ ${Math.round(hit.Left)},${Math.round(hit.Top)}` : ""; };
  document.querySelectorAll(".tabs [data-tab]").forEach(b => b.onclick = () => { b.parentElement.querySelectorAll("button").forEach(x => x.classList.toggle("active", x === b)); document.querySelectorAll("[data-pane]").forEach(p => p.hidden = p.dataset.pane !== b.dataset.tab); });
  let providerCache = null;
  async function firstProviderId() {  // the live model list needs a credential: the first enabled provider of the engine
    const t = $("#target").value || ""; if (!t.startsWith("engine:")) return "";
    if (!providerCache) { try { providerCache = (await OcrRoute.api("GET", "/v1/providers")).items || []; } catch (e) { providerCache = []; } }
    const p = providerCache.find((x) => x.engine_id === t.slice(7) && x.enabled !== false); return p ? p.id : "";
  }
  const modelPicker = OcrRoute.modelPicker({target: $("#target"), input: $("#model"), list: $("#model-list"), refresh: $("#model-refresh"), wrap: $("#model-wrap"), note: $("#model-note"), providerId: () => providerCache ? (() => { const t = $("#target").value || ""; const p = (providerCache || []).find((x) => t.startsWith("engine:") && x.engine_id === t.slice(7) && x.enabled !== false); return p ? p.id : ""; })() : ""});
  firstProviderId();
  $("#target").addEventListener("change", async () => {  // the extra prompt only matters for vision-language engines (or a route that may pick one)
    const t = $("#target").value || "";
    if (!t.startsWith("engine:")) { $("#prompt-wrap").classList.remove("d-none"); return; }
    try { const d = await OcrRoute.api("GET", "/v1/engines/" + encodeURIComponent(t.slice(7)) + "/languages"); $("#prompt-wrap").classList.toggle("d-none", !d.hint); } catch (e) { /* keep */ }
  });
  const picker = OcrRoute.languagePicker({target: $("#target"), lang: $("#lang"), variant: $("#variant"), variantWrap: $("#variant-wrap"), note: $("#lang-note")});
  function payload() { const t = $("#target").value; const p = {language: picker.languages(), pages: $("#pages").value, prompt: $("#prompt").value, output: ["json","text","hocr","alto","md","csv","xlsx","docx","pdf","overlay_png"], cache: !$("#nocache").checked, preprocess: {upscale: $("#pre-up").checked, grayscale: $("#pre-gray").checked, auto_rotate: $("#pre-rot").checked}, metadata: {origin: "playground"}}; if (t.startsWith("route:")) p.route = t.slice(6); if (t.startsWith("engine:")) p.engine = t.slice(7); if ($("#opts").value) { try { p.options = JSON.parse($("#opts").value); } catch { toast("Options must be JSON", true); } } const v = picker.variantValue(); if (v) { p.options = Object.assign({}, p.options || {}, {engine: /^\d+$/.test(v) ? parseInt(v, 10) : v}); } const mv = modelPicker.value(); if (mv) { p.options = Object.assign({}, p.options || {}, {model: mv}); } return p; }
  async function runOnce(p, f) { const fd = new FormData(); fd.append("file", f, f.name || "clipboard.png"); fd.append("json", JSON.stringify(p)); return api("POST", "/v1/ocr", fd, {raw: true}); }
  $("#run").onclick = async () => { const btn = $("#run"); btn.disabled = true; btn.textContent = "Running…"; try { const r = await runOnce(payload(), file); result = r.result; lastRunId = r.run_id; $("#meta").innerHTML = `<span class="status ${r.status}">${r.status}</span> ${r.routing.winning_engine || ""} ${r.routing.winning_provider ? "/ " + r.routing.winning_provider : ""} · ${fmtMs(r.usage.duration_ms)} · ${r.usage.chars} chars · ${r.usage.lines} lines · ~$${(r.usage.cost_cents/100).toFixed(4)}${r.cached ? " · cached" : ""} · <a href="/panel/runs/${r.run_id}">{{ _('run') }}</a>${r.error_code ? ` · <span class="status failed">${r.error_code}</span> ${r.error_message || ""}` : ""}`; $("#out-text").value = (result.ParsedText || "").replace(/\r\n/g, "\n"); $("#out-json").textContent = JSON.stringify(result, null, 2); $("#out-routing").textContent = JSON.stringify(r.routing, null, 2); $("#lines-body").innerHTML = result.TextOverlay.Lines.map((ln, i) => { const x = Math.min(...ln.Words.map(w => w.Left)), y = ln.MinTop, w = Math.max(...ln.Words.map(w => w.Left + w.Width)) - x; return `<tr><td class="num">${i+1}</td><td class="num">${ln.Page || 1}</td><td dir="auto">${ln.LineText}</td><td class="right num">${Math.round(x)}</td><td class="right num">${Math.round(y)}</td><td class="right num">${Math.round(w)}</td><td class="right num">${Math.round(ln.MaxHeight)}</td></tr>`; }).join(""); $("#exports").innerHTML = (r.artifacts || []).map(a => `<a class="btn sm" href="${a.url}" style="margin-left:4px">${a.kind}</a>`).join(""); code(); draw(); } catch (e) { toast(e.message, true); } finally { btn.disabled = false; btn.textContent = "Run OCR"; } };
  $("#copy").onclick = () => navigator.clipboard.writeText($("#out-text").value).then(() => toast("Copied"));
  $("#compare").onclick = () => { $("#compare-box").hidden = !$("#compare-box").hidden; };
  $("#compare-run").onclick = async () => { const engines = Array.from($("#compare-sel").selectedOptions).map(o => o.value); if (!engines.length) return toast("Select engines", true); $("#compare-out").hidden = false; $("#compare-body").innerHTML = engines.map(e => `<tr id="cmp-${e}"><td>${e}</td><td colspan="4" class="muted">running…</td></tr>`).join(""); await Promise.all(engines.map(async e => { const p = payload(); delete p.route; p.engine = e; p.cache = false; p.output = ["text"]; try { const r = await runOnce(p, file); $(`#cmp-${e}`).innerHTML = `<td>${e}</td><td><span class="status ${r.status}">${r.status}</span> ${r.error_code || ""}</td><td class="right num">${r.usage.duration_ms}</td><td class="right num">${r.usage.chars}</td><td class="small" dir="auto">${(r.result.ParsedText || r.error_message || "").split(/\r?\n/)[0].slice(0, 90)}</td>`; } catch (err) { $(`#cmp-${e}`).innerHTML = `<td>${e}</td><td colspan="4" class="status failed">${err.message}</td>`; } })); };
  function code(kind = "curl") { const p = payload(); const tgt = p.engine ? `"engine": "${p.engine}"` : p.route ? `"route": "${p.route}"` : `"route": null`; const map = {
    curl: `curl -X POST ${location.origin}/v1/ocr \\\n  -H "Authorization: Bearer $OCRROUTE_KEY" \\\n  -F file=@input.png \\\n  -F 'json={${tgt}, "language": "${p.language}", "output": ["json","text"]}'`,
    py: `import requests\n\nr = requests.post("${location.origin}/v1/ocr",\n    headers={"Authorization": "Bearer " + OCRROUTE_KEY},\n    files={"file": open("input.png", "rb")},\n    data={"json": '{${tgt.replace(/"/g, '\\"')}, \\"language\\": \\"${p.language}\\"}'},\n    timeout=120)\nenvelope = r.json()\nprint(envelope["result"]["ParsedText"])`,
    qt: `# In the OcrRoute desktop app the same call is one line on the shared client:\nfrom ocrroute.desktop.client import OcrRouteClient\n\nclient = OcrRouteClient("${location.origin}", api_key=OCRROUTE_KEY)\nenvelope = client.ocr_file("input.png", ${p.engine ? `engine="${p.engine}"` : p.route ? `route="${p.route}"` : ""}${p.engine || p.route ? ", " : ""}language="${p.language}")\nprint(envelope["result"]["ParsedText"])`}; $("#out-code").textContent = map[kind]; }
  document.querySelectorAll("[data-code]").forEach(b => b.onclick = () => { b.parentElement.querySelectorAll("button").forEach(x => x.classList.toggle("active", x === b)); code(b.dataset.code); });
  code();
});
</script>{% endblock %}