picarones/report/templates/view_document.html

<!-- ════ Vue 3 : Document ══════════════════════════════════════════ -->
<div id="view-document" class="view">
  <div class="doc-layout">
    <!-- Sidebar -->
    <aside class="doc-sidebar">
      <div class="doc-sidebar-header" data-i18n="doc_sidebar_header">Documents</div>
      <div id="doc-list"></div>
    </aside>

    <!-- Contenu principal -->
    <div>
      <div class="card" id="doc-detail-header">
        <div style="display:flex; align-items:baseline; justify-content:space-between; flex-wrap:wrap; gap:.5rem">
          <h2 id="doc-detail-title" data-i18n="doc_title_default">Sélectionner un document</h2>
          <div class="stat-row" id="doc-detail-metrics"></div>
        </div>
      </div>

      <!-- Image zoomable -->
      <div class="card">
        <h3 data-i18n="h_image">Image originale</h3>
        <div class="doc-image-wrap" id="doc-image-wrap"
          onwheel="handleZoom(event)"
          onmousedown="startDrag(event)"
          onmousemove="doDrag(event)"
          onmouseup="endDrag()"
          onmouseleave="endDrag()">
          <div class="doc-image-placeholder" id="doc-image-placeholder">
            <span style="font-size:2rem">🖼</span>
            <span>Sélectionnez un document</span>
          </div>
          <img id="doc-image" src="" alt="Image du document" style="display:none">
          <div class="zoom-controls">
            <button class="zoom-btn" onclick="zoom(1.25)" title="Zoom +">+</button>
            <button class="zoom-btn" onclick="zoom(0.8)"  title="Zoom −">−</button>
            <button class="zoom-btn" onclick="resetZoom()" title="Réinitialiser">↺</button>
          </div>
        </div>
      </div>

      <!-- Diff côte à côte GT / OCR -->
      <div class="card" id="doc-sidebyside-card">
        <div class="sbs-header">
          <h3 data-i18n="h_diff">Comparaison GT / OCR</h3>
          <div class="sbs-engine-select" id="sbs-engine-select" style="display:none">
            <label data-i18n="sbs_engine_label">Concurrent :</label>
            <select id="sbs-engine-dropdown" onchange="renderSideBySide(currentDocId)"></select>
          </div>
        </div>
        <div class="sbs-columns" id="sbs-columns">
          <div class="sbs-col sbs-col-gt">
            <div class="sbs-col-header sbs-gt-header">
              <span>✓ Vérité terrain (GT)</span>
            </div>
            <div class="sbs-col-body" id="sbs-gt-body">—</div>
          </div>
          <div class="sbs-col sbs-col-ocr">
            <div class="sbs-col-header sbs-ocr-header" id="sbs-ocr-header">
              <span id="sbs-ocr-engine-name">OCR</span>
              <span class="cer-badge" id="sbs-ocr-cer" style="display:none"></span>
            </div>
            <div class="sbs-col-body" id="sbs-ocr-body">—</div>
          </div>
        </div>
        <!-- Pipeline triple-diff (affiché en dessous si applicable) -->
        <div id="sbs-triple-diff" style="display:none"></div>
      </div>

      <!-- Sprint 10 — Distribution CER par ligne -->
      <div class="card" id="doc-line-metrics-card" style="display:none">
        <h3 data-i18n="h_line_metrics">Distribution des erreurs par ligne</h3>
        <div id="doc-line-metrics-content"></div>
      </div>

      <!-- Sprint 10 — Hallucinations détectées -->
      <div class="card" id="doc-hallucination-card" style="display:none">
        <h3 data-i18n="h_hallucination">Analyse des hallucinations</h3>
        <div id="doc-hallucination-content"></div>
      </div>
    </div>
  </div>
</div>