OCR Team
53 lines
3.1 KiB
HTML
53 lines
3.1 KiB
HTML
<!doctype html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>Fahrzeugschein · lokaler OCR-Vergleich</title>
|
|
<link rel="stylesheet" href="/style.css">
|
|
<script src="/app.js" defer></script>
|
|
</head>
|
|
<body>
|
|
<header class="top"><div class="wrap">
|
|
<p class="eyebrow">Lokaler Dokumenttest</p>
|
|
<h1>Fahrzeugschein-OCR im Vergleich</h1>
|
|
<p>Ein Bild, zwei unabhängige Verfahren. Werte erst anhand des Bildbelegs bestätigen.</p>
|
|
</div></header>
|
|
<main class="wrap">
|
|
<section class="panel input-panel" aria-labelledby="input-title">
|
|
<div class="section-head"><div><p class="eyebrow">01 / Eingabe</p><h2 id="input-title">Bild vorbereiten</h2></div>
|
|
<span class="privacy">Lokale Verarbeitung; Vision optional auf eigener Hardware</span></div>
|
|
<label class="upload-label" for="image-file">Fahrzeugschein auswählen</label>
|
|
<input id="image-file" type="file" accept="image/jpeg,image/png,.jpg,.jpeg,.png">
|
|
<p id="file-name" class="muted">JPEG oder PNG, maximal 16 MiB. Die Originaldatei wird nicht verändert.</p>
|
|
<div id="original-wrap" class="image-wrap" hidden>
|
|
<img id="original" alt="Ausgewähltes Originalbild mit veränderbaren Ecken">
|
|
<canvas id="corners" aria-label="Vier Dokumentecken"></canvas>
|
|
</div>
|
|
<div class="toolbar">
|
|
<button id="reset-corners" type="button" disabled>Ganzes Bild</button>
|
|
<label for="rotation">Leserichtung</label>
|
|
<select id="rotation"><option value="0">0°</option><option value="90">90° rechts</option>
|
|
<option value="180">180°</option><option value="270">90° links</option></select>
|
|
<label class="toggle" for="fine-print"><input id="fine-print" type="checkbox"> A: Feintext (2048 px, langsamer)</label>
|
|
<button id="run" class="primary" type="button" disabled>Beide Verfahren vergleichen</button>
|
|
</div>
|
|
<p class="muted">Die vier blauen Punkte lassen sich mit Maus oder Finger an die äußeren Dokumentecken ziehen. Ohne Änderung läuft das ganze Bild. Beide Verfahren erhalten exakt dieselben aufbereiteten Pixel.</p>
|
|
<p id="status" class="status" role="status" aria-live="polite"></p>
|
|
</section>
|
|
|
|
<section id="comparison" class="panel" hidden aria-labelledby="compare-title">
|
|
<div class="section-head"><div><p class="eyebrow">02 / Belege</p><h2 id="compare-title">Ergebnis am Bild prüfen</h2></div>
|
|
<label class="toggle"><input id="all-boxes" type="checkbox"> Alle Textbereiche zeigen</label></div>
|
|
<div class="processed-wrap"><img id="processed" alt="Aufbereitetes Bild für beide OCR-Verfahren">
|
|
<canvas id="evidence" aria-label="Markierte Bildbelege"></canvas></div>
|
|
<p id="image-size" class="muted"></p>
|
|
<div class="results">
|
|
<article id="classic-card" class="method" aria-labelledby="classic-title"><h3 id="classic-title">A · Klassische OCR</h3></article>
|
|
<article id="vision-card" class="method" aria-labelledby="vision-title"><h3 id="vision-title">B · Vision-Dokumentmodell</h3></article>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
</body>
|
|
</html>
|