{% extends "base.html" %}
{% block content %}
<div class="row g-3 stagger">
<div class="col-12 col-xl-5"><div class="card"><div class="card-header"><i class="bi bi-collection"></i>{{ _('New job') }}</div><div class="card-body d-grid gap-2">
<div class="drop" id="drop" tabindex="0" role="button"><i class="bi bi-files"></i>{{ _('Add files…') }}</div><input type="file" id="files" multiple hidden accept="image/*,.pdf">
<div id="picked" class="small text-muted"></div>
<div><label class="form-label">{{ _('…or paste URLs (one per line)') }}</label><textarea class="form-control font-monospace" id="urls" rows="3" placeholder="https://example.com/scan1.png"></textarea></div>
<div class="row g-2"><div class="col-12 col-sm-6"><label class="form-label">{{ _('Label') }}</label><input class="form-control" id="name" placeholder="September invoices"></div><div class="col-6 col-sm-3"><label class="form-label">{{ _('route') }}</label><select class="form-select" id="route"><option value="">auto</option>{% for r in routes %}<option>{{ r.name }}</option>{% endfor %}</select></div><div class="col-6 col-sm-3"><label class="form-label">{{ _('Language') }}</label><select class="form-select" id="lang"><option value="auto">auto</option></select></div></div>
<div class="row g-2"><div class="col-12 col-sm-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"><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-sm-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></div>
<div class="row g-2"><div class="col-12 col-sm-6"><label class="form-label">{{ _('Export') }}</label><select class="form-select" id="outputs" multiple size="4">{% for k in export_kinds %}<option {% if k in ['json','text'] %}selected{% endif %}>{{ k }}</option>{% endfor %}</select></div><div class="col-12 col-sm-6"><label class="form-label">{{ _('Webhook URL') }}</label><input class="form-control" id="webhook" placeholder="https://…"></div></div>
<button class="btn btn-primary" id="start"><i class="bi bi-play-fill me-1"></i>{{ _('Start job') }}</button></div></div></div>
<div class="col-12 col-xl-7"><div class="card"><div class="card-header"><i class="bi bi-list-check"></i>{{ _('Jobs') }}</div><div class="table-responsive"><table class="table table-hover mb-0 align-middle"><thead><tr><th>{{ _('time') }}</th><th>{{ _('Label') }}</th><th>{{ _('status') }}</th><th>{{ _('progress') }}</th><th></th></tr></thead><tbody id="jobs">
{% for j in jobs %}<tr data-id="{{ j.id }}"><td class="num small" title="{{ j.created_at }}">{{ rel(j.created_at) }}</td><td>{{ j.name }}<div class="small text-muted">{{ j.options.route or j.options.engine or 'auto' }}</div></td><td><span class="status {{ j.status }}">{{ _(j.status) }}</span></td><td class="num small"><span class="done">{{ j.done }}</span> ok · <span class="failed">{{ j.failed }}</span> failed / {{ j.total }}<div class="progress mt-1" style="height:4px"><div class="progress-bar bg-success" style="width:{{ (100 * j.done / j.total)|round if j.total else 0 }}%"></div></div></td><td class="text-end text-nowrap"><div class="btn-group btn-group-sm"><button class="btn btn-outline-secondary details" data-id="{{ j.id }}">{{ _('Items') }}</button>{% if j.status in ('queued','running') %}<button class="btn btn-outline-secondary cancel" data-id="{{ j.id }}">{{ _('Cancel') }}</button>{% endif %}{% if j.failed %}<button class="btn btn-outline-secondary retry" data-id="{{ j.id }}">{{ _('Retry failed') }}</button>{% endif %}</div></td></tr>
{% else %}<tr><td colspan="5"><div class="empty py-4"><i class="bi bi-collection"></i>{{ _('No jobs yet.') }}</div></td></tr>{% endfor %}</tbody></table></div></div></div>
</div>
<dialog id="items-dlg"><h2>{{ _('Items') }}</h2><div class="table-responsive"><table class="table table-sm"><thead><tr><th>{{ _('source') }}</th><th>{{ _('status') }}</th><th>{{ _('run') }}</th><th>{{ _('error') }}</th></tr></thead><tbody id="items-body"></tbody></table></div><form method="dialog" class="mt-2"><button class="btn btn-outline-secondary">{{ _('Done') }}</button></form></dialog>
{% endblock %}
{% block scripts %}<script>
document.addEventListener("DOMContentLoaded", () => { const {api, toast, $} = OcrRoute; let files = [];
const drop = $("#drop"), inp = $("#files"); drop.onclick = () => inp.click(); inp.onchange = () => { files = Array.from(inp.files); $("#picked").textContent = files.length + " file(s) selected"; };
drop.ondragover = e => { e.preventDefault(); drop.classList.add("over"); }; drop.ondragleave = () => drop.classList.remove("over"); drop.ondrop = e => { e.preventDefault(); drop.classList.remove("over"); files = Array.from(e.dataTransfer.files); $("#picked").textContent = files.length + " file(s) selected"; };
$("#start").onclick = async () => { const spec = {name: $("#name").value, sources: $("#urls").value.split("\n").map(s => s.trim()).filter(Boolean), route: $("#route").value, language: batchPicker.languages(), prompt: $("#prompt").value || undefined, options: batchModel.value() ? {model: batchModel.value()} : undefined, output: Array.from($("#outputs").selectedOptions).map(o => o.value), webhook_url: $("#webhook").value}; if (!files.length && !spec.sources.length) return toast("Add files or URLs", true); const fd = new FormData(); fd.append("body", JSON.stringify(spec)); files.forEach(f => fd.append("files", f, f.name)); try { await api("POST", "/v1/batch", fd); location.reload(); } catch (e) { toast(e.message, true); } };
document.querySelectorAll(".cancel").forEach(b => b.onclick = async () => { try { await api("POST", `/v1/jobs/${b.dataset.id}/cancel`); toast("Cancelling…"); } catch (e) { toast(e.message, true); } });
document.querySelectorAll(".details").forEach(b => b.onclick = async () => { const j = await api("GET", `/v1/jobs/${b.dataset.id}`); $("#items-body").innerHTML = j.items.map(i => `<tr><td class="small">${i.source}</td><td><span class="status ${i.status}">${i.status}</span></td><td>${i.run_id ? `<a href="/panel/runs/${i.run_id}" class="num">${i.run_id.slice(-8)}</a>` : ""}</td><td class="small">${i.error_message || ""}</td></tr>`).join(""); $("#items-dlg").showModal(); });
document.querySelectorAll(".retry").forEach(b => b.onclick = async () => { const j = await api("GET", `/v1/jobs/${b.dataset.id}`); const failed = j.items.filter(i => i.status === "failed" && !i.source.startsWith("upload:")).map(i => i.source); if (!failed.length) return toast("Failed items were uploads; re-upload them to retry", true); try { await api("POST", "/v1/batch/json", {name: j.name + " (retry)", sources: failed, route: j.options.route || "", engine: j.options.engine || "", language: j.options.language, output: j.options.output}); location.reload(); } catch (e) { toast(e.message, true); } });
// live progress for active jobs
document.querySelectorAll("#jobs tr[data-id]").forEach(tr => { if (!/queued|running/.test(tr.querySelector(".status").textContent)) return; const es = new EventSource(`/v1/jobs/${tr.dataset.id}/events`); es.onmessage = e => { const p = JSON.parse(e.data); tr.querySelector(".done").textContent = p.done; tr.querySelector(".failed").textContent = p.failed; if (!p.item) { tr.querySelector(".status").textContent = p.status; tr.querySelector(".status").className = "status " + p.status; es.close(); } }; }); window.batchPicker = OcrRoute.languagePicker({target: $("#route"), lang: $("#lang")});
window.batchModel = OcrRoute.modelPicker({target: $("#route"), input: $("#model"), list: $("#model-list"), refresh: $("#model-refresh"), wrap: $("#model-wrap"), note: $("#model-note"), providerId: ""});
});

</script>{% endblock %}