zulassung-ocr-compare/ocr_compare/index.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>