feat(sprint-2): rapport HTML interactif auto-contenu

Nouveau module picarones/report/ :

Générateur HTML (report/generator.py) :
- Fichier HTML unique auto-contenu (~84 ko avec 12 docs et images PNG base64)
- Données embarquées en JSON inline (const DATA = {...})
- Chart.js 4.4.1 + diff2html 3.4.47 chargés depuis cdnjs

4 vues navigables :
1. Classement — tableau triable au clic sur chaque colonne (CER, WER, MER, WIL)
avec barres proportionnelles, badges couleur (vert→rouge), version moteur
2. Galerie — grille d'images avec badges CER par moteur, filtres CER/moteur,
tri par identifiant / CER moyen / meilleur moteur
3. Document — sidebar avec liste + CER badge, image zoomable (molette, drag),
vérité terrain + panneau diff coloré par moteur
(insertions vert, suppressions rouge, substitutions orange)
4. Analyses — 4 graphiques : histogramme CER par plage, radar multi-métriques
inversé, courbe CER par document, durée d'exécution moyenne

Diff mot-à-mot (report/diff_utils.py) :
- compute_word_diff() via difflib.SequenceMatcher → ops JSON sérialisables
- compute_char_diff() pour tokens courts
- diff_stats() pour comptage des opérations

Données de test (fixtures.py) :
- generate_sample_benchmark() : 12 textes GT médiévaux réalistes
- 3 moteurs simulés : pero_ocr (2.3% CER), tesseract (0% CER), ancien_moteur (18.9%)
- Images PNG placeholder générées en pur Python (sans Pillow)
- Reproductible via paramètre seed

CLI (cli.py) :
- picarones report --results results.json --output rapport.html
- picarones demo [--docs N] [--json-output results.json]

Tests : 50 nouveaux tests (108 au total, 100% passants en 2.95s)
- test_diff_utils.py : 16 tests (word diff, char diff, stats)
- test_report.py : 34 tests (fixtures, _build_report_data, generator, couleurs)
dont : validation JSON embarqué parseable, round-trip JSON→HTML,
présence Chart.js et diff2html, structure HTML valide

https://claude.ai/code/session_017gXea9mxBQqDTAsSQd7aAq

picarones/cli.py

@@ -3,6 +3,8 @@
 Commandes disponibles
 ---------------------
 picarones run      — Lance un benchmark complet
+picarones report   — Génère le rapport HTML depuis un JSON de résultats
+picarones demo     — Génère un rapport de démonstration avec données fictives
 picarones metrics  — Calcule CER/WER entre deux fichiers texte
 picarones engines  — Liste les moteurs disponibles
 picarones info     — Informations de version
@@ -291,5 +293,93 @@ def info_cmd() -> None:
         click.echo(f"  {name:<15} {status}")
 
 
+# ---------------------------------------------------------------------------
+# picarones report
+# ---------------------------------------------------------------------------
+
+@cli.command("report")
+@click.option(
+    "--results", "-r",
+    required=True,
+    type=click.Path(exists=True, dir_okay=False, resolve_path=True),
+    help="Fichier JSON de résultats produit par 'picarones run'",
+)
+@click.option(
+    "--output", "-o",
+    default="rapport.html",
+    show_default=True,
+    type=click.Path(resolve_path=True),
+    help="Fichier HTML de sortie",
+)
+@click.option("--verbose", "-v", is_flag=True, default=False, help="Mode verbeux")
+def report_cmd(results: str, output: str, verbose: bool) -> None:
+    """Génère le rapport HTML interactif depuis un fichier JSON de résultats.
+
+    Le rapport est un fichier HTML auto-contenu, lisible hors-ligne,
+    avec tableau de classement, galerie, vue document et graphiques.
+    """
+    _setup_logging(verbose)
+
+    from picarones.report.generator import ReportGenerator
+
+    click.echo(f"Chargement des résultats : {results}")
+    try:
+        gen = ReportGenerator.from_json(results)
+    except Exception as exc:
+        click.echo(f"Erreur lors du chargement : {exc}", err=True)
+        sys.exit(1)
+
+    click.echo(f"Génération du rapport HTML…")
+    path = gen.generate(output)
+    click.echo(f"Rapport généré : {path}")
+    click.echo(f"Ouvrez-le dans un navigateur : file://{path}")
+
+
+# ---------------------------------------------------------------------------
+# picarones demo
+# ---------------------------------------------------------------------------
+
+@cli.command("demo")
+@click.option(
+    "--output", "-o",
+    default="rapport_demo.html",
+    show_default=True,
+    type=click.Path(resolve_path=True),
+    help="Fichier HTML de sortie",
+)
+@click.option(
+    "--docs", "-n",
+    default=12,
+    show_default=True,
+    type=click.IntRange(1, 12),
+    help="Nombre de documents fictifs (1–12)",
+)
+@click.option(
+    "--json-output", "-j",
+    default=None,
+    type=click.Path(resolve_path=True),
+    help="Exporte aussi les résultats JSON",
+)
+def demo_cmd(output: str, docs: int, json_output: str | None) -> None:
+    """Génère un rapport de démonstration avec des données fictives réalistes.
+
+    Utile pour tester le rendu HTML sans installer Tesseract ni Pero OCR.
+    """
+    from picarones.fixtures import generate_sample_benchmark
+    from picarones.report.generator import ReportGenerator
+
+    click.echo(f"Génération des données fictives ({docs} documents, 3 moteurs)…")
+    benchmark = generate_sample_benchmark(n_docs=docs)
+
+    if json_output:
+        bm_path = benchmark.to_json(json_output)
+        click.echo(f"Résultats JSON : {bm_path}")
+
+    gen = ReportGenerator(benchmark)
+    path = gen.generate(output)
+    click.echo(f"Rapport de démonstration : {path}")
+    click.echo(f"Ouvrez-le dans un navigateur : file://{path}")
+
+
 if __name__ == "__main__":
     cli()

picarones/fixtures.py

@@ -0,0 +1,247 @@
+"""Données de test réalistes pour valider le rapport HTML sans moteurs OCR installés.
+
+Usage :
+    from picarones.fixtures import generate_sample_benchmark
+    bm = generate_sample_benchmark()
+    bm.to_json("sample_results.json")
+"""
+
+from __future__ import annotations
+
+import base64
+import random
+import struct
+import zlib
+from pathlib import Path
+from typing import Optional
+
+from picarones.core.metrics import MetricsResult, aggregate_metrics
+from picarones.core.results import BenchmarkResult, DocumentResult, EngineReport
+
+# ---------------------------------------------------------------------------
+# Textes GT réalistes (documents patrimoniaux BnF)
+# ---------------------------------------------------------------------------
+
+_GT_TEXTS = [
+    "Icy commence le prologue de maistre Jehan Froissart sus les croniques de France & d'Angleterre.",
+    "En l'an de grace mil trois cens soixante, regnoit en France le noble roy Jehan, filz du roy Phelippe de Valois.",
+    "Item ledit jour furent menez en ladicte ville de Paris plusieurs prisonniers sarasins & mahommetans.",
+    "Le chancellier du roy manda à tous les baillifs & seneschaulx que on feist crier & publier par tous les carrefours.",
+    "Cy après sensuyt la copie des lettres patentes données par nostre seigneur le roy à ses très chiers & feaulx.",
+    "Nous Charles, par la grace de Dieu roy de France, à tous ceulx qui ces presentes lettres verront, salut.",
+    "Savoir faisons que pour considéracion des bons & aggreables services que nostre amé & feal conseillier.",
+    "Donné à Paris, le vingt & deuxième jour du mois de juillet, l'an de grace mil quatre cens & troys.",
+    "Les dessus ditz ambassadeurs respondirent que leur seigneur & maistre estoit très joyeulx de ceste aliance.",
+    "Après lesquelles choses ainsi faictes & passées, le dit traictié fut ratiffié & confirmé de toutes parties.",
+    "Item, en ladicte année, fut faicte grant assemblée de gens d'armes tant à cheval que à pied.",
+    "Et pour ce que la chose est notoire & manifeste, nous avons fait mettre nostre scel à ces presentes.",
+]
+
+# ---------------------------------------------------------------------------
+# Erreurs OCR typiques par moteur (transformations appliquées au GT)
+# ---------------------------------------------------------------------------
+
+def _tesseract_errors(text: str, rng: random.Random) -> str:
+    """Simule les erreurs typiques de Tesseract sur documents médiévaux."""
+    replacements = [
+        ("ſ", "f"), ("œ", "oe"), ("æ", "ae"),
+        ("&", "8"), ("é", "e"), ("è", "e"),
+        ("nostre", "noltre"), ("maistre", "inaistre"),
+        ("faictes", "faictcs"), ("ledit", "Ledit"),
+        ("regnoit", "regnoit"), ("Froissart", "Froiflart"),
+        ("conseillie", "conlcillier"), ("consideracion", "confideration"),
+        ("ny", "uy"), ("lx", "le"),
+    ]
+    for src, tgt in rng.sample(replacements, k=min(rng.randint(2, 5), len(replacements))):
+        text = text.replace(src, tgt, 1)
+    if rng.random() < 0.3:
+        words = text.split()
+        if len(words) > 5:
+            idx = rng.randint(1, len(words) - 2)
+            words.pop(idx)
+            text = " ".join(words)
+    return text
+
+
+def _pero_errors(text: str, rng: random.Random) -> str:
+    """Pero OCR : moins d'erreurs, mais confusions diacritiques persistantes."""
+    replacements = [
+        ("é", "é"), ("è", "e"), ("ê", "e"),
+        ("œ", "oe"), ("&", "&"),
+        ("uy", "ny"), ("rr", "ri"),
+        ("nostre", "noſtre"), ("maistre", "maistre"),
+    ]
+    for src, tgt in rng.sample(replacements, k=rng.randint(0, 3)):
+        text = text.replace(src, tgt, 1)
+    return text
+
+
+def _bad_engine_errors(text: str, rng: random.Random) -> str:
+    """Moteur de mauvaise qualité : nombreuses erreurs."""
+    words = text.split()
+    result = []
+    for word in words:
+        r = rng.random()
+        if r < 0.15:
+            pass  # mot supprimé
+        elif r < 0.30:
+            # substitution partielle
+            chars = list(word)
+            if len(chars) > 2:
+                i = rng.randint(0, len(chars) - 1)
+                chars[i] = rng.choice("abcdefghijklmnopqrstuvwxyz")
+            result.append("".join(chars))
+        else:
+            result.append(word)
+    if rng.random() < 0.2:
+        result.insert(rng.randint(0, len(result)), rng.choice(["|||", "---", "###"]))
+    return " ".join(result)
+
+
+# ---------------------------------------------------------------------------
+# Génération d'une image PNG placeholder (pur Python, sans Pillow)
+# ---------------------------------------------------------------------------
+
+def _make_placeholder_png(width: int = 300, height: int = 200, text_hint: str = "") -> bytes:
+    """Génère un PNG minimal représentant une page de document (gris clair).
+
+    Le PNG est valide et affichable dans tous les navigateurs.
+    On dessine une zone blanche avec une bordure et quelques lignes simulant du texte.
+    """
+    # Créer les données de pixels RGB
+    pixels = []
+    for y in range(height):
+        row = []
+        for x in range(width):
+            # Fond légèrement crème (#f5f0e8)
+            if x < 3 or x >= width - 3 or y < 3 or y >= height - 3:
+                row.extend([180, 160, 140])  # bordure grise
+            elif 20 < y < 24 or 35 < y < 39:
+                # Lignes de titre simulées
+                if 30 < x < width - 30:
+                    row.extend([80, 80, 80])  # texte gris foncé
+                else:
+                    row.extend([245, 240, 232])
+            elif y > 50 and (y - 50) % 18 < 2 and 20 < x < width - 20:
+                row.extend([120, 120, 120])  # lignes de texte simulées
+            else:
+                row.extend([245, 240, 232])
+        pixels.append(bytes(row))
+
+    def make_png(w: int, h: int, rows: list[bytes]) -> bytes:
+        def png_chunk(chunk_type: bytes, data: bytes) -> bytes:
+            c = chunk_type + data
+            return struct.pack(">I", len(data)) + c + struct.pack(">I", zlib.crc32(c) & 0xFFFFFFFF)
+
+        sig = b"\x89PNG\r\n\x1a\n"
+        ihdr = png_chunk(b"IHDR", struct.pack(">IIBBBBB", w, h, 8, 2, 0, 0, 0))
+        raw = b"".join(b"\x00" + row for row in rows)
+        idat = png_chunk(b"IDAT", zlib.compress(raw))
+        iend = png_chunk(b"IEND", b"")
+        return sig + ihdr + idat + iend
+
+    return make_png(width, height, pixels)
+
+
+def _png_to_data_uri(png_bytes: bytes) -> str:
+    b64 = base64.b64encode(png_bytes).decode("ascii")
+    return f"data:image/png;base64,{b64}"
+
+
+# ---------------------------------------------------------------------------
+# Génération du benchmark de test
+# ---------------------------------------------------------------------------
+
+def _make_metrics(reference: str, hypothesis: str) -> MetricsResult:
+    from picarones.core.metrics import compute_metrics
+    return compute_metrics(reference, hypothesis)
+
+
+def generate_sample_benchmark(
+    n_docs: int = 12,
+    seed: int = 42,
+    include_images: bool = True,
+) -> BenchmarkResult:
+    """Génère un BenchmarkResult fictif mais réaliste.
+
+    Parameters
+    ----------
+    n_docs:
+        Nombre de documents dans le corpus de test (max = len(_GT_TEXTS)).
+    seed:
+        Graine aléatoire pour la reproductibilité.
+    include_images:
+        Si True, génère des images PNG placeholder encodées en base64.
+
+    Returns
+    -------
+    BenchmarkResult
+        Prêt pour le rapport HTML ou l'export JSON.
+    """
+    rng = random.Random(seed)
+    n_docs = min(n_docs, len(_GT_TEXTS))
+    gt_texts = _GT_TEXTS[:n_docs]
+
+    engines_config = [
+        ("pero_ocr", "0.7.2", {"config": "/models/pero_printed.ini"}, _pero_errors),
+        ("tesseract", "5.3.3", {"lang": "fra", "psm": 6}, _tesseract_errors),
+        ("ancien_moteur", "2.1.0", {"lang": "fra"}, _bad_engine_errors),
+    ]
+
+    engine_reports: list[EngineReport] = []
+    image_b64_cache: dict[str, str] = {}
+
+    for engine_name, engine_version, engine_cfg, error_fn in engines_config:
+        doc_results: list[DocumentResult] = []
+
+        for i, gt in enumerate(gt_texts):
+            doc_id = f"folio_{i+1:03d}"
+            image_path = f"/corpus/images/{doc_id}.jpg"
+
+            # Générer l'image placeholder une fois
+            if include_images and doc_id not in image_b64_cache:
+                png = _make_placeholder_png(320, 220, gt[:20])
+                image_b64_cache[doc_id] = _png_to_data_uri(png)
+
+            # Générer la sortie OCR avec erreurs
+            hypothesis = error_fn(gt, rng)
+
+            metrics = _make_metrics(gt, hypothesis)
+
+            doc_results.append(
+                DocumentResult(
+                    doc_id=doc_id,
+                    image_path=image_path,
+                    ground_truth=gt,
+                    hypothesis=hypothesis,
+                    metrics=metrics,
+                    duration_seconds=round(rng.uniform(0.3, 4.5), 3),
+                )
+            )
+
+        report = EngineReport(
+            engine_name=engine_name,
+            engine_version=engine_version,
+            engine_config=engine_cfg,
+            document_results=doc_results,
+        )
+        engine_reports.append(report)
+
+    bm = BenchmarkResult(
+        corpus_name="Corpus de test — Chroniques médiévales BnF",
+        corpus_source="/corpus/chroniques/",
+        document_count=n_docs,
+        engine_reports=engine_reports,
+        metadata={
+            "description": "Données de démonstration générées par picarones.fixtures",
+            "script": "gothique textura",
+            "langue": "Français médiéval (XIVe-XVe siècle)",
+            "institution": "BnF — Département des manuscrits",
+        },
+    )
+
+    # Attacher les images base64 au benchmark (hors du schéma standard,
+    # le générateur HTML les récupérera depuis ce champ supplémentaire)
+    bm.metadata["_images_b64"] = image_b64_cache  # type: ignore[assignment]
+
+    return bm

picarones/report/__init__.py

@@ -0,0 +1,5 @@
+"""Module de génération du rapport HTML interactif."""
+
+from picarones.report.generator import ReportGenerator
+
+__all__ = ["ReportGenerator"]

picarones/report/diff_utils.py

@@ -0,0 +1,89 @@
+"""Calcul du diff mot-à-mot entre vérité terrain et sortie OCR.
+
+Produit une liste d'opérations sérialisables en JSON, consommée
+par le rendu JS dans le rapport HTML.
+
+Opérations possibles
+--------------------
+{"op": "equal",   "text": "mot"}
+{"op": "insert",  "text": "mot"}    -- présent dans l'OCR mais pas dans la GT
+{"op": "delete",  "text": "mot"}    -- présent dans la GT mais pas dans l'OCR
+{"op": "replace", "old": "…", "new": "…"}  -- substitution (orange)
+"""
+
+from __future__ import annotations
+
+import difflib
+import re
+from typing import Any
+
+
+def _tokenize(text: str) -> list[str]:
+    """Découpe le texte en tokens (mots + ponctuation + espaces)."""
+    # Conserver les espaces comme tokens pour un rendu fidèle
+    return re.split(r"(\s+)", text)
+
+
+def compute_word_diff(reference: str, hypothesis: str) -> list[dict[str, Any]]:
+    """Calcule un diff mot-à-mot entre deux textes.
+
+    Parameters
+    ----------
+    reference:
+        Texte de vérité terrain.
+    hypothesis:
+        Texte produit par le moteur OCR.
+
+    Returns
+    -------
+    list of dict
+        Séquence d'opérations : equal, insert, delete, replace.
+    """
+    ref_tokens = reference.split()
+    hyp_tokens = hypothesis.split()
+
+    matcher = difflib.SequenceMatcher(None, ref_tokens, hyp_tokens, autojunk=False)
+    ops: list[dict[str, Any]] = []
+
+    for tag, i1, i2, j1, j2 in matcher.get_opcodes():
+        ref_chunk = " ".join(ref_tokens[i1:i2])
+        hyp_chunk = " ".join(hyp_tokens[j1:j2])
+
+        if tag == "equal":
+            ops.append({"op": "equal", "text": ref_chunk})
+        elif tag == "insert":
+            ops.append({"op": "insert", "text": hyp_chunk})
+        elif tag == "delete":
+            ops.append({"op": "delete", "text": ref_chunk})
+        elif tag == "replace":
+            ops.append({"op": "replace", "old": ref_chunk, "new": hyp_chunk})
+
+    return ops
+
+
+def compute_char_diff(reference: str, hypothesis: str) -> list[dict[str, Any]]:
+    """Diff caractère par caractère — utile pour les tokens courts."""
+    matcher = difflib.SequenceMatcher(None, list(reference), list(hypothesis), autojunk=False)
+    ops: list[dict[str, Any]] = []
+
+    for tag, i1, i2, j1, j2 in matcher.get_opcodes():
+        ref_chunk = reference[i1:i2]
+        hyp_chunk = hypothesis[j1:j2]
+        if tag == "equal":
+            ops.append({"op": "equal", "text": ref_chunk})
+        elif tag == "insert":
+            ops.append({"op": "insert", "text": hyp_chunk})
+        elif tag == "delete":
+            ops.append({"op": "delete", "text": ref_chunk})
+        elif tag == "replace":
+            ops.append({"op": "replace", "old": ref_chunk, "new": hyp_chunk})
+
+    return ops
+
+
+def diff_stats(ops: list[dict[str, Any]]) -> dict[str, int]:
+    """Compte le nombre d'insertions, suppressions et substitutions."""
+    stats = {"equal": 0, "insert": 0, "delete": 0, "replace": 0}
+    for op in ops:
+        stats[op["op"]] += 1
+    return stats

picarones/report/generator.py

@@ -0,0 +1,1358 @@
+"""Générateur du rapport HTML interactif auto-contenu.
+
+Le rapport produit est un fichier HTML unique embarquant :
+- Toutes les données (JSON inline)
+- Chart.js et diff2html (depuis cdnjs)
+- CSS et JavaScript de l'application
+
+Vues disponibles
+----------------
+1. Classement  — tableau triable par colonne (CER, WER, MER, WIL)
+2. Galerie     — grille d'images avec badge CER coloré
+3. Document    — image zoomable + diff coloré GT / OCR par moteur
+4. Analyses    — histogramme CER + graphique radar
+"""
+
+from __future__ import annotations
+
+import json
+import math
+from pathlib import Path
+from typing import Optional
+
+from picarones.core.results import BenchmarkResult
+from picarones.report.diff_utils import compute_word_diff
+
+
+# ---------------------------------------------------------------------------
+# Helpers
+# ---------------------------------------------------------------------------
+
+def _cer_color(cer: float) -> str:
+    """Retourne une couleur CSS pour un score CER donné (0→vert, 1→rouge)."""
+    if cer < 0.05:
+        return "#16a34a"   # vert
+    if cer < 0.15:
+        return "#ca8a04"   # jaune-orangé
+    if cer < 0.30:
+        return "#ea580c"   # orange
+    return "#dc2626"       # rouge
+
+
+def _cer_bg(cer: float) -> str:
+    if cer < 0.05:
+        return "#dcfce7"
+    if cer < 0.15:
+        return "#fef9c3"
+    if cer < 0.30:
+        return "#ffedd5"
+    return "#fee2e2"
+
+
+def _pct(v: Optional[float], decimals: int = 2) -> str:
+    if v is None:
+        return "—"
+    return f"{v * 100:.{decimals}f} %"
+
+
+def _safe(v: Optional[float], decimals: int = 4) -> float:
+    return round(v or 0.0, decimals)
+
+
+# ---------------------------------------------------------------------------
+# Préparation des données
+# ---------------------------------------------------------------------------
+
+def _build_report_data(benchmark: BenchmarkResult, images_b64: dict[str, str]) -> dict:
+    """Transforme un BenchmarkResult en dict JSON pour le rapport HTML."""
+
+    engines_summary = []
+    for report in benchmark.engine_reports:
+        agg = report.aggregated_metrics
+        engines_summary.append({
+            "name": report.engine_name,
+            "version": report.engine_version,
+            "cer":  _safe(agg.get("cer", {}).get("mean")),
+            "wer":  _safe(agg.get("wer", {}).get("mean")),
+            "mer":  _safe(agg.get("mer", {}).get("mean")),
+            "wil":  _safe(agg.get("wil", {}).get("mean")),
+            "cer_median": _safe(agg.get("cer", {}).get("median")),
+            "cer_min":    _safe(agg.get("cer", {}).get("min")),
+            "cer_max":    _safe(agg.get("cer", {}).get("max")),
+            "doc_count":  agg.get("document_count", 0),
+            "failed":     agg.get("failed_count", 0),
+            # Distribution pour l'histogramme : liste des CER individuels
+            "cer_values": [
+                _safe(dr.metrics.cer)
+                for dr in report.document_results
+                if dr.metrics.error is None
+            ],
+        })
+
+    # Documents (vue galerie + vue détail)
+    # On collecte tous les doc_ids depuis le premier moteur
+    doc_ids_ordered = []
+    if benchmark.engine_reports:
+        doc_ids_ordered = [dr.doc_id for dr in benchmark.engine_reports[0].document_results]
+
+    # Index croisé : doc_id → {engine_name → DocumentResult}
+    doc_engine_map: dict[str, dict] = {did: {} for did in doc_ids_ordered}
+    for report in benchmark.engine_reports:
+        for dr in report.document_results:
+            doc_engine_map[dr.doc_id][report.engine_name] = dr
+
+    documents = []
+    for doc_id in doc_ids_ordered:
+        engine_results = []
+        gt = ""
+        image_path = ""
+        for engine_name in [r.engine_name for r in benchmark.engine_reports]:
+            dr = doc_engine_map[doc_id].get(engine_name)
+            if dr is None:
+                continue
+            gt = dr.ground_truth
+            image_path = dr.image_path
+            diff_ops = compute_word_diff(dr.ground_truth, dr.hypothesis)
+            engine_results.append({
+                "engine": engine_name,
+                "hypothesis": dr.hypothesis,
+                "cer": _safe(dr.metrics.cer),
+                "wer": _safe(dr.metrics.wer),
+                "duration": dr.duration_seconds,
+                "error": dr.engine_error,
+                "diff": diff_ops,
+            })
+
+        # CER moyen sur ce document (pour le badge galerie)
+        cer_values = [er["cer"] for er in engine_results if er["error"] is None]
+        mean_cer = sum(cer_values) / len(cer_values) if cer_values else 1.0
+        best_engine = min(engine_results, key=lambda x: x["cer"], default=None)
+
+        documents.append({
+            "doc_id": doc_id,
+            "image_path": image_path,
+            "image_b64": images_b64.get(doc_id, ""),
+            "ground_truth": gt,
+            "mean_cer": _safe(mean_cer),
+            "best_engine": best_engine["engine"] if best_engine else "",
+            "engine_results": engine_results,
+        })
+
+    return {
+        "meta": {
+            "corpus_name": benchmark.corpus_name,
+            "corpus_source": benchmark.corpus_source,
+            "document_count": benchmark.document_count,
+            "run_date": benchmark.run_date,
+            "picarones_version": benchmark.picarones_version,
+            "metadata": benchmark.metadata,
+        },
+        "ranking": benchmark.ranking(),
+        "engines": engines_summary,
+        "documents": documents,
+    }
+
+
+# ---------------------------------------------------------------------------
+# Template HTML
+# ---------------------------------------------------------------------------
+
+_HTML_TEMPLATE = """\
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Picarones — {corpus_name}</title>
+
+<!-- Chart.js -->
+<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.1/chart.umd.min.js"
+  integrity="sha512-CQBWl4fJHWbryGE+Pc3UJWW1h3Q8IkkvNnPTozals+S49OTEQPoQj/m1LZRM28Wr/7bJCMlpYS3/Zp4hHuWQ=="
+  crossorigin="anonymous"></script>
+
+<!-- diff2html -->
+<link rel="stylesheet"
+  href="https://cdnjs.cloudflare.com/ajax/libs/diff2html/3.4.47/diff2html.min.css"
+  crossorigin="anonymous">
+<script src="https://cdnjs.cloudflare.com/ajax/libs/diff2html/3.4.47/diff2html.min.js"
+  crossorigin="anonymous"></script>
+
+<style>
+/* ── Reset & base ─────────────────────────────────────────────────── */
+*, *::before, *::after {{ box-sizing: border-box; margin: 0; padding: 0; }}
+:root {{
+  --bg:         #f1f5f9;
+  --surface:    #ffffff;
+  --border:     #e2e8f0;
+  --primary:    #1e40af;
+  --primary-lt: #dbeafe;
+  --text:       #1e293b;
+  --text-muted: #64748b;
+  --ins:        #16a34a;
+  --ins-bg:     #dcfce7;
+  --del:        #dc2626;
+  --del-bg:     #fee2e2;
+  --rep:        #c2410c;
+  --rep-bg:     #ffedd5;
+  --radius:     8px;
+  --shadow:     0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.05);
+  --nav-h:      56px;
+}}
+html {{ font-size: 14px; scroll-behavior: smooth; }}
+body {{
+  font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
+  background: var(--bg);
+  color: var(--text);
+  min-height: 100vh;
+}}
+
+/* ── Navigation ───────────────────────────────────────────────────── */
+nav {{
+  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
+  height: var(--nav-h);
+  background: var(--primary);
+  display: flex; align-items: center;
+  padding: 0 1.5rem;
+  gap: 2rem;
+  box-shadow: 0 2px 8px rgba(0,0,0,.25);
+}}
+nav .brand {{
+  color: #fff; font-weight: 700; font-size: 1.1rem;
+  letter-spacing: -.3px; white-space: nowrap;
+  display: flex; align-items: center; gap: .4rem;
+}}
+nav .brand span {{ opacity: .7; font-weight: 400; font-size: .85rem; }}
+nav .tabs {{
+  display: flex; gap: .25rem; flex: 1;
+}}
+.tab-btn {{
+  background: transparent; border: none; cursor: pointer;
+  color: rgba(255,255,255,.7);
+  padding: .4rem .9rem; border-radius: 6px;
+  font-size: .9rem; font-weight: 500;
+  transition: background .15s, color .15s;
+}}
+.tab-btn:hover  {{ background: rgba(255,255,255,.12); color: #fff; }}
+.tab-btn.active {{ background: rgba(255,255,255,.18); color: #fff; }}
+nav .meta {{
+  color: rgba(255,255,255,.6); font-size: .78rem;
+  white-space: nowrap; margin-left: auto;
+}}
+
+/* ── Layout ───────────────────────────────────────────────────────── */
+main {{
+  margin-top: var(--nav-h);
+  padding: 1.5rem;
+  max-width: 1400px;
+  margin-left: auto; margin-right: auto;
+}}
+.view {{ display: none; }}
+.view.active {{ display: block; }}
+.card {{
+  background: var(--surface);
+  border-radius: var(--radius);
+  border: 1px solid var(--border);
+  box-shadow: var(--shadow);
+  padding: 1.25rem;
+  margin-bottom: 1.25rem;
+}}
+h2 {{
+  font-size: 1rem; font-weight: 700;
+  color: var(--text); margin-bottom: .75rem;
+  border-bottom: 2px solid var(--primary-lt);
+  padding-bottom: .4rem;
+}}
+h3 {{ font-size: .9rem; font-weight: 600; margin-bottom: .5rem; }}
+
+/* ── Ranking table ────────────────────────────────────────────────── */
+.table-wrap {{ overflow-x: auto; }}
+table {{
+  width: 100%; border-collapse: collapse;
+  font-size: .88rem;
+}}
+thead tr {{ background: var(--bg); }}
+th {{
+  text-align: left; padding: .6rem .75rem;
+  border-bottom: 2px solid var(--border);
+  cursor: pointer; white-space: nowrap;
+  color: var(--text-muted); font-weight: 600; font-size: .8rem;
+  text-transform: uppercase; letter-spacing: .04em;
+  user-select: none;
+}}
+th.sortable:hover {{ color: var(--primary); }}
+th .sort-icon {{ opacity: .4; margin-left: .25rem; font-style: normal; }}
+th.sorted .sort-icon {{ opacity: 1; color: var(--primary); }}
+td {{
+  padding: .55rem .75rem;
+  border-bottom: 1px solid var(--border);
+  vertical-align: middle;
+}}
+tr:last-child td {{ border-bottom: none; }}
+tbody tr:hover {{ background: #f8fafc; }}
+.rank-badge {{
+  display: inline-flex; align-items: center; justify-content: center;
+  width: 1.6rem; height: 1.6rem; border-radius: 50%;
+  font-weight: 700; font-size: .75rem;
+  background: var(--primary-lt); color: var(--primary);
+}}
+.rank-badge.rank-1 {{ background: #fef3c7; color: #92400e; }}
+.engine-name {{ font-weight: 600; }}
+.engine-version {{ color: var(--text-muted); font-size: .78rem; margin-left: .3rem; }}
+.cer-badge {{
+  display: inline-block;
+  padding: .15rem .5rem; border-radius: 4px;
+  font-weight: 600; font-size: .82rem;
+}}
+.bar {{
+  display: inline-block; height: 8px; border-radius: 4px;
+  vertical-align: middle; margin-right: .4rem;
+}}
+
+/* ── Gallery ──────────────────────────────────────────────────────── */
+.gallery-controls {{
+  display: flex; align-items: center; gap: .75rem;
+  margin-bottom: 1rem; flex-wrap: wrap;
+}}
+.gallery-controls label {{ font-size: .82rem; color: var(--text-muted); }}
+.gallery-controls input[type=range] {{ width: 120px; }}
+.gallery-grid {{
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+  gap: 1rem;
+}}
+.gallery-card {{
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  overflow: hidden;
+  cursor: pointer;
+  transition: transform .15s, box-shadow .15s;
+}}
+.gallery-card:hover {{
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(0,0,0,.12);
+  border-color: var(--primary);
+}}
+.gallery-card img, .gallery-card .img-placeholder {{
+  width: 100%; aspect-ratio: 4/3; object-fit: cover;
+  display: block; background: #e8e0d4;
+}}
+.img-placeholder {{
+  display: flex; align-items: center; justify-content: center;
+  font-size: 2rem; color: #94a3b8;
+}}
+.gallery-card-body {{
+  padding: .6rem .75rem;
+}}
+.gallery-card-title {{
+  font-size: .8rem; font-weight: 600; margin-bottom: .35rem;
+  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+}}
+.gallery-card-badges {{
+  display: flex; gap: .3rem; flex-wrap: wrap;
+}}
+.engine-cer-badge {{
+  font-size: .7rem; font-weight: 700;
+  padding: .1rem .35rem; border-radius: 3px;
+}}
+
+/* ── Document detail ──────────────────────────────────────────────── */
+.doc-layout {{
+  display: grid;
+  grid-template-columns: 220px 1fr;
+  gap: 1rem;
+  align-items: start;
+}}
+@media (max-width: 768px) {{
+  .doc-layout {{ grid-template-columns: 1fr; }}
+}}
+.doc-sidebar {{
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  max-height: calc(100vh - var(--nav-h) - 3rem);
+  overflow-y: auto;
+  position: sticky;
+  top: calc(var(--nav-h) + 1.5rem);
+}}
+.doc-sidebar-header {{
+  padding: .6rem .75rem;
+  font-size: .8rem; font-weight: 700; color: var(--text-muted);
+  text-transform: uppercase; letter-spacing: .05em;
+  border-bottom: 1px solid var(--border);
+  position: sticky; top: 0; background: var(--surface);
+}}
+.doc-list-item {{
+  padding: .5rem .75rem;
+  cursor: pointer;
+  border-bottom: 1px solid var(--border);
+  display: flex; align-items: center; justify-content: space-between;
+  gap: .5rem;
+  transition: background .1s;
+}}
+.doc-list-item:last-child {{ border-bottom: none; }}
+.doc-list-item:hover {{ background: var(--bg); }}
+.doc-list-item.active {{ background: var(--primary-lt); }}
+.doc-list-label {{ font-size: .82rem; font-weight: 500; }}
+.doc-list-cer {{
+  font-size: .72rem; font-weight: 700;
+  padding: .1rem .3rem; border-radius: 3px;
+  flex-shrink: 0;
+}}
+
+/* Image zone */
+.doc-image-wrap {{
+  position: relative; overflow: hidden;
+  border: 1px solid var(--border); border-radius: var(--radius);
+  background: #e8e0d4; cursor: zoom-in;
+  aspect-ratio: 4/3;
+}}
+.doc-image-wrap img {{
+  width: 100%; height: 100%; object-fit: contain;
+  transform-origin: center center;
+  transition: transform .2s;
+  user-select: none;
+}}
+.doc-image-placeholder {{
+  width: 100%; height: 100%;
+  display: flex; align-items: center; justify-content: center;
+  flex-direction: column; gap: .5rem; color: #94a3b8;
+  font-size: .9rem;
+}}
+.zoom-controls {{
+  position: absolute; bottom: .5rem; right: .5rem;
+  display: flex; gap: .3rem;
+}}
+.zoom-btn {{
+  background: rgba(0,0,0,.5); color: #fff;
+  border: none; border-radius: 4px; cursor: pointer;
+  width: 28px; height: 28px; font-size: .9rem;
+  display: flex; align-items: center; justify-content: center;
+  transition: background .1s;
+}}
+.zoom-btn:hover {{ background: rgba(0,0,0,.75); }}
+
+/* Diff panels */
+.diff-panels {{
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+  gap: .75rem;
+  margin-top: .75rem;
+}}
+.diff-panel {{
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  overflow: hidden;
+}}
+.diff-panel-header {{
+  padding: .5rem .75rem;
+  background: var(--bg);
+  border-bottom: 1px solid var(--border);
+  display: flex; align-items: center; justify-content: space-between;
+}}
+.diff-panel-title {{ font-size: .83rem; font-weight: 700; }}
+.diff-panel-metrics {{
+  display: flex; gap: .4rem;
+  font-size: .72rem;
+}}
+.diff-panel-body {{
+  padding: .75rem; font-size: .82rem; line-height: 1.7;
+  font-family: 'Georgia', serif;
+  max-height: 260px; overflow-y: auto;
+}}
+/* Diff spans */
+.d-eq {{ color: var(--text); }}
+.d-ins {{ color: var(--ins); background: var(--ins-bg); border-radius: 2px; padding: 0 1px; }}
+.d-del {{ color: var(--del); background: var(--del-bg); border-radius: 2px; padding: 0 1px; text-decoration: line-through; }}
+.d-rep-old {{ color: var(--del); background: var(--del-bg); border-radius: 2px 0 0 2px; padding: 0 1px; text-decoration: line-through; }}
+.d-rep-new {{ color: var(--rep); background: var(--rep-bg); border-radius: 0 2px 2px 0; padding: 0 1px; }}
+
+/* GT panel */
+.gt-panel {{
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  overflow: hidden;
+}}
+.gt-panel-header {{
+  padding: .5rem .75rem;
+  background: #f0fdf4;
+  border-bottom: 1px solid #bbf7d0;
+  font-size: .83rem; font-weight: 700; color: #15803d;
+}}
+.gt-panel-body {{
+  padding: .75rem; font-size: .82rem; line-height: 1.7;
+  font-family: 'Georgia', serif;
+  max-height: 260px; overflow-y: auto;
+  color: var(--text);
+}}
+
+/* ── Analyses ─────────────────────────────────────────────────────── */
+.charts-grid {{
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
+  gap: 1rem;
+}}
+.chart-card {{
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 1rem;
+}}
+.chart-canvas-wrap {{ position: relative; height: 280px; }}
+
+/* ── Misc ─────────────────────────────────────────────────────────── */
+.badge {{
+  display: inline-block; padding: .15rem .45rem;
+  border-radius: 4px; font-size: .72rem; font-weight: 700;
+}}
+.pill {{
+  display: inline-block; padding: .1rem .4rem;
+  border-radius: 12px; font-size: .72rem;
+  background: var(--primary-lt); color: var(--primary);
+}}
+.empty-state {{
+  text-align: center; padding: 3rem 1rem;
+  color: var(--text-muted); font-size: .9rem;
+}}
+.legend-dot {{
+  display: inline-block; width: 8px; height: 8px;
+  border-radius: 50%; margin-right: .3rem;
+}}
+.legend-row {{
+  display: flex; align-items: center; gap: .4rem;
+  font-size: .78rem; color: var(--text-muted);
+}}
+footer {{
+  text-align: center; padding: 1.5rem;
+  color: var(--text-muted); font-size: .75rem;
+  border-top: 1px solid var(--border); margin-top: 2rem;
+}}
+.stat-row {{
+  display: flex; gap: 1.5rem; flex-wrap: wrap; margin-bottom: .75rem;
+}}
+.stat {{
+  background: var(--bg); border-radius: 6px; padding: .4rem .75rem;
+  font-size: .8rem;
+}}
+.stat b {{ color: var(--primary); }}
+</style>
+</head>
+
+<body>
+
+<!-- ── Navigation ─────────────────────────────────────────────────── -->
+<nav>
+  <div class="brand">
+    Picarones
+    <span>| rapport OCR</span>
+  </div>
+  <div class="tabs">
+    <button class="tab-btn active" onclick="showView('ranking')">Classement</button>
+    <button class="tab-btn" onclick="showView('gallery')">Galerie</button>
+    <button class="tab-btn" onclick="showView('document')">Document</button>
+    <button class="tab-btn" onclick="showView('analyses')">Analyses</button>
+  </div>
+  <div class="meta" id="nav-meta">—</div>
+</nav>
+
+<!-- ── Main ───────────────────────────────────────────────────────── -->
+<main>
+
+<!-- ════ Vue 1 : Classement ════════════════════════════════════════ -->
+<div id="view-ranking" class="view active">
+  <div class="card">
+    <h2>Classement des moteurs</h2>
+    <div class="stat-row" id="ranking-stats"></div>
+    <div class="table-wrap">
+      <table id="ranking-table">
+        <thead>
+          <tr>
+            <th data-col="rank" class="sortable sorted" data-dir="asc">#<i class="sort-icon">↑</i></th>
+            <th data-col="name" class="sortable">Moteur<i class="sort-icon">↕</i></th>
+            <th data-col="cer"  class="sortable">CER<i class="sort-icon">↕</i></th>
+            <th data-col="wer"  class="sortable">WER<i class="sort-icon">↕</i></th>
+            <th data-col="mer"  class="sortable">MER<i class="sort-icon">↕</i></th>
+            <th data-col="wil"  class="sortable">WIL<i class="sort-icon">↕</i></th>
+            <th>CER médian</th>
+            <th>CER min</th>
+            <th>CER max</th>
+            <th>Docs</th>
+          </tr>
+        </thead>
+        <tbody id="ranking-tbody"></tbody>
+      </table>
+    </div>
+    <div class="stat-row" style="margin-top:.75rem">
+      <div class="legend-row">
+        <span class="legend-dot" style="background:#16a34a"></span>CER &lt; 5 %
+      </div>
+      <div class="legend-row">
+        <span class="legend-dot" style="background:#ca8a04"></span>5–15 %
+      </div>
+      <div class="legend-row">
+        <span class="legend-dot" style="background:#ea580c"></span>15–30 %
+      </div>
+      <div class="legend-row">
+        <span class="legend-dot" style="background:#dc2626"></span>&gt; 30 %
+      </div>
+    </div>
+  </div>
+</div>
+
+<!-- ════ Vue 2 : Galerie ═══════════════════════════════════════════ -->
+<div id="view-gallery" class="view">
+  <div class="card">
+    <h2>Galerie des documents</h2>
+    <div class="gallery-controls">
+      <label>Trier par :
+        <select id="gallery-sort" onchange="renderGallery()">
+          <option value="doc_id">Identifiant</option>
+          <option value="mean_cer">CER moyen</option>
+          <option value="best_engine">Meilleur moteur</option>
+        </select>
+      </label>
+      <label>Filtrer CER &gt;
+        <input type="number" id="gallery-filter-cer" min="0" max="100" value="0" step="1"
+          style="width:60px" onchange="renderGallery()"> %
+      </label>
+      <label>Moteur :
+        <select id="gallery-engine-select" onchange="renderGallery()">
+          <option value="">Tous</option>
+        </select>
+      </label>
+    </div>
+    <div id="gallery-grid" class="gallery-grid"></div>
+    <div id="gallery-empty" class="empty-state" style="display:none">
+      Aucun document ne correspond aux filtres.
+    </div>
+  </div>
+</div>
+
+<!-- ════ Vue 3 : Document ══════════════════════════════════════════ -->
+<div id="view-document" class="view">
+  <div class="doc-layout">
+    <!-- Sidebar -->
+    <aside class="doc-sidebar">
+      <div class="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">Sélectionner un document</h2>
+          <div class="stat-row" id="doc-detail-metrics"></div>
+        </div>
+      </div>
+
+      <!-- Image zoomable -->
+      <div class="card">
+        <h3>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>
+
+      <!-- Vérité terrain -->
+      <div class="card">
+        <h3>Vérité terrain (GT)</h3>
+        <div class="gt-panel">
+          <div class="gt-panel-header">✓ Ground Truth</div>
+          <div class="gt-panel-body" id="doc-gt-text">—</div>
+        </div>
+      </div>
+
+      <!-- Diffs par moteur -->
+      <div class="card">
+        <h3>Sorties OCR — diff par moteur</h3>
+        <div class="diff-panels" id="doc-diff-panels"></div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<!-- ════ Vue 4 : Analyses ══════════════════════════════════════════ -->
+<div id="view-analyses" class="view">
+  <div class="charts-grid">
+
+    <div class="chart-card">
+      <h3>Distribution du CER par moteur</h3>
+      <div class="chart-canvas-wrap">
+        <canvas id="chart-cer-hist"></canvas>
+      </div>
+    </div>
+
+    <div class="chart-card">
+      <h3>Profil des moteurs (radar)</h3>
+      <div class="chart-canvas-wrap">
+        <canvas id="chart-radar"></canvas>
+      </div>
+      <div style="font-size:.72rem;color:var(--text-muted);margin-top:.5rem">
+        Axe radar : CER, WER, MER, WIL — valeurs inversées (plus c'est haut, meilleur est le moteur).
+      </div>
+    </div>
+
+    <div class="chart-card">
+      <h3>CER par document (tous moteurs)</h3>
+      <div class="chart-canvas-wrap">
+        <canvas id="chart-cer-doc"></canvas>
+      </div>
+    </div>
+
+    <div class="chart-card">
+      <h3>Temps d'exécution moyen (secondes/document)</h3>
+      <div class="chart-canvas-wrap">
+        <canvas id="chart-duration"></canvas>
+      </div>
+    </div>
+
+  </div>
+</div>
+
+</main>
+
+<footer>
+  Généré par <strong>Picarones</strong> v{picarones_version}
+  — BnF, Département numérique
+  — <span id="footer-date"></span>
+</footer>
+
+<!-- ── Données embarquées ──────────────────────────────────────────── -->
+<script>
+const DATA = {report_data_json};
+</script>
+
+<!-- ── Application ────────────────────────────────────────────────── -->
+<script>
+'use strict';
+
+// ── Palette couleurs par moteur ──────────────────────────────────
+const PALETTE = [
+  '#2563eb','#dc2626','#16a34a','#ca8a04','#7c3aed',
+  '#0891b2','#c2410c','#0f766e','#9333ea','#b45309',
+];
+function engineColor(idx) {{ return PALETTE[idx % PALETTE.length]; }}
+
+// ── Navigation ──────────────────────────────────────────────────
+let currentView = 'ranking';
+function showView(name) {{
+  document.querySelectorAll('.view').forEach(v => v.classList.remove('active'));
+  document.querySelectorAll('.tab-btn').forEach(b => b.classList.remove('active'));
+  document.getElementById('view-' + name).classList.add('active');
+  document.querySelectorAll('.tab-btn').forEach(b => {{
+    if (b.textContent.toLowerCase().startsWith(
+        {{ranking:'c',gallery:'g',document:'d',analyses:'a'}}[name]
+    )) b.classList.add('active');
+  }});
+  currentView = name;
+  if (name === 'analyses' && !chartsBuilt) buildCharts();
+}}
+
+// ── Formatage ───────────────────────────────────────────────────
+function pct(v, d=2) {{
+  if (v === null || v === undefined) return '—';
+  return (v * 100).toFixed(d) + ' %';
+}}
+function cerColor(v) {{
+  if (v < 0.05) return '#16a34a';
+  if (v < 0.15) return '#ca8a04';
+  if (v < 0.30) return '#ea580c';
+  return '#dc2626';
+}}
+function cerBg(v) {{
+  if (v < 0.05) return '#dcfce7';
+  if (v < 0.15) return '#fef9c3';
+  if (v < 0.30) return '#ffedd5';
+  return '#fee2e2';
+}}
+function esc(s) {{
+  return String(s)
+    .replace(/&/g,'&amp;').replace(/</g,'&lt;')
+    .replace(/>/g,'&gt;').replace(/"/g,'&quot;');
+}}
+
+// ── Diff renderer ──────────────────────────────────────────────
+function renderDiff(ops) {{
+  if (!ops || !ops.length) return '<em style="color:var(--text-muted)">— aucune sortie —</em>';
+  return ops.map(op => {{
+    if (op.op === 'equal')
+      return '<span class="d-eq">' + esc(op.text) + '</span>';
+    if (op.op === 'insert')
+      return '<span class="d-ins" title="Insertion OCR">' + esc(op.text) + '</span>';
+    if (op.op === 'delete')
+      return '<span class="d-del" title="Suppression (présent GT)">' + esc(op.text) + '</span>';
+    if (op.op === 'replace')
+      return '<span class="d-rep-old" title="Remplacement">' + esc(op.old) + '</span>'
+           + '<span class="d-rep-new">' + esc(op.new) + '</span>';
+    return '';
+  }}).join(' ');
+}}
+
+// ── Vue Classement ──────────────────────────────────────────────
+let rankingSort = {{ col: 'cer', dir: 'asc' }};
+
+function renderRanking() {{
+  const engines = [...DATA.engines];
+  // Trier
+  engines.sort((a, b) => {{
+    let va = a[rankingSort.col], vb = b[rankingSort.col];
+    if (typeof va === 'string') va = va.toLowerCase();
+    if (typeof vb === 'string') vb = vb.toLowerCase();
+    if (va === null) va = Infinity;
+    if (vb === null) vb = Infinity;
+    return rankingSort.dir === 'asc' ? (va > vb ? 1 : -1) : (va < vb ? 1 : -1);
+  }});
+
+  const tbody = document.getElementById('ranking-tbody');
+  tbody.innerHTML = engines.map((e, i) => {{
+    const rank = i + 1;
+    const badgeClass = rank === 1 ? 'rank-badge rank-1' : 'rank-badge';
+    const cerC = cerColor(e.cer); const cerB = cerBg(e.cer);
+    const barW = Math.min(100, e.cer * 100 * 3);
+    return `<tr>
+      <td><span class="${{badgeClass}}">${{rank}}</span></td>
+      <td>
+        <span class="engine-name">${{esc(e.name)}}</span>
+        <span class="engine-version">v${{esc(e.version)}}</span>
+      </td>
+      <td>
+        <span class="bar" style="width:${{barW}}px;background:${{cerC}}"></span>
+        <span class="cer-badge" style="color:${{cerC}};background:${{cerB}}">${{pct(e.cer)}}</span>
+      </td>
+      <td>${{pct(e.wer)}}</td>
+      <td>${{pct(e.mer)}}</td>
+      <td>${{pct(e.wil)}}</td>
+      <td style="color:var(--text-muted)">${{pct(e.cer_median)}}</td>
+      <td style="color:var(--text-muted)">${{pct(e.cer_min)}}</td>
+      <td style="color:var(--text-muted)">${{pct(e.cer_max)}}</td>
+      <td><span class="pill">${{e.doc_count}}</span></td>
+    </tr>`;
+  }}).join('');
+
+  // Stats globales
+  const stats = document.getElementById('ranking-stats');
+  stats.innerHTML = `
+    <div class="stat">Corpus <b>${{esc(DATA.meta.corpus_name)}}</b></div>
+    <div class="stat">Documents <b>${{DATA.meta.document_count}}</b></div>
+    <div class="stat">Moteurs <b>${{DATA.engines.length}}</b></div>
+  `;
+}}
+
+// Tri au clic sur en-tête
+document.querySelectorAll('#ranking-table th.sortable').forEach(th => {{
+  th.addEventListener('click', () => {{
+    const col = th.dataset.col;
+    if (rankingSort.col === col) {{
+      rankingSort.dir = rankingSort.dir === 'asc' ? 'desc' : 'asc';
+    }} else {{
+      rankingSort.col = col;
+      rankingSort.dir = 'asc';
+    }}
+    document.querySelectorAll('#ranking-table th').forEach(t => {{
+      t.classList.remove('sorted');
+      const icon = t.querySelector('.sort-icon');
+      if (icon) icon.textContent = '↕';
+    }});
+    th.classList.add('sorted');
+    const icon = th.querySelector('.sort-icon');
+    if (icon) icon.textContent = rankingSort.dir === 'asc' ? '↑' : '↓';
+    renderRanking();
+  }});
+}});
+
+// ── Vue Galerie ─────────────────────────────────────────────────
+function renderGallery() {{
+  const sortKey  = document.getElementById('gallery-sort').value;
+  const filterCer = parseFloat(document.getElementById('gallery-filter-cer').value) / 100 || 0;
+  const filterEngine = document.getElementById('gallery-engine-select').value;
+
+  let docs = [...DATA.documents];
+
+  // Filtre CER
+  if (filterCer > 0) {{
+    docs = docs.filter(d => {{
+      if (filterEngine) {{
+        const er = d.engine_results.find(r => r.engine === filterEngine);
+        return er && er.cer >= filterCer;
+      }}
+      return d.mean_cer >= filterCer;
+    }});
+  }}
+
+  // Tri
+  docs.sort((a, b) => {{
+    if (sortKey === 'mean_cer') return a.mean_cer - b.mean_cer;
+    if (sortKey === 'best_engine') return a.best_engine.localeCompare(b.best_engine);
+    return a.doc_id.localeCompare(b.doc_id);
+  }});
+
+  const grid = document.getElementById('gallery-grid');
+  const empty = document.getElementById('gallery-empty');
+
+  if (!docs.length) {{
+    grid.innerHTML = '';
+    empty.style.display = '';
+    return;
+  }}
+  empty.style.display = 'none';
+
+  grid.innerHTML = docs.map(doc => {{
+    const imgTag = doc.image_b64
+      ? `<img src="${{doc.image_b64}}" alt="${{esc(doc.doc_id)}}" loading="lazy">`
+      : `<div class="img-placeholder">🖹</div>`;
+
+    const badges = doc.engine_results.map(er => {{
+      const c = cerColor(er.cer); const bg = cerBg(er.cer);
+      return `<span class="engine-cer-badge" style="color:${{c}};background:${{bg}}"
+        title="${{esc(er.engine)}}">${{esc(er.engine.slice(0,6))}} ${{pct(er.cer,1)}}</span>`;
+    }}).join('');
+
+    return `<div class="gallery-card" onclick="openDocument('${{esc(doc.doc_id)}}')">
+      ${{imgTag}}
+      <div class="gallery-card-body">
+        <div class="gallery-card-title">${{esc(doc.doc_id)}}</div>
+        <div class="gallery-card-badges">${{badges}}</div>
+      </div>
+    </div>`;
+  }}).join('');
+}}
+
+// ── Vue Document ────────────────────────────────────────────────
+let currentDocId = null;
+let zoomLevel = 1;
+let dragStart = null;
+let imgOffset = {{ x: 0, y: 0 }};
+
+function openDocument(docId) {{
+  showView('document');
+  loadDocument(docId);
+}}
+
+function loadDocument(docId) {{
+  const doc = DATA.documents.find(d => d.doc_id === docId);
+  if (!doc) return;
+  currentDocId = docId;
+
+  // Sidebar : highlight
+  document.querySelectorAll('.doc-list-item').forEach(el => {{
+    el.classList.toggle('active', el.dataset.docId === docId);
+  }});
+
+  // Titre
+  document.getElementById('doc-detail-title').textContent = doc.doc_id;
+
+  // Métriques
+  const metricsDiv = document.getElementById('doc-detail-metrics');
+  const cer = doc.mean_cer;
+  metricsDiv.innerHTML = `<div class="stat">CER moyen <b style="color:${{cerColor(cer)}}">${{pct(cer)}}</b></div>
+    <div class="stat">Meilleur moteur <b>${{esc(doc.best_engine)}}</b></div>`;
+
+  // Image
+  resetZoom();
+  const img = document.getElementById('doc-image');
+  const placeholder = document.getElementById('doc-image-placeholder');
+  if (doc.image_b64) {{
+    img.src = doc.image_b64;
+    img.style.display = '';
+    placeholder.style.display = 'none';
+  }} else {{
+    img.style.display = 'none';
+    placeholder.style.display = '';
+    placeholder.innerHTML = `<span style="font-size:2rem">🖹</span><span>${{esc(doc.image_path)}}</span>`;
+  }}
+
+  // GT
+  document.getElementById('doc-gt-text').textContent = doc.ground_truth;
+
+  // Diffs
+  const panels = document.getElementById('doc-diff-panels');
+  panels.innerHTML = doc.engine_results.map((er, i) => {{
+    const c = cerColor(er.cer); const bg = cerBg(er.cer);
+    const diffHtml = renderDiff(er.diff);
+    const errBadge = er.error ? `<span class="badge" style="background:#fee2e2;color:#dc2626">Erreur</span>` : '';
+    return `<div class="diff-panel">
+      <div class="diff-panel-header">
+        <span class="diff-panel-title">${{esc(er.engine)}}</span>
+        <span class="diff-panel-metrics">
+          <span class="cer-badge" style="color:${{c}};background:${{bg}}">${{pct(er.cer)}}</span>
+          <span class="badge" style="background:#f1f5f9">WER ${{pct(er.wer)}}</span>
+          ${{errBadge}}
+        </span>
+      </div>
+      <div class="diff-panel-body">${{diffHtml || '<em style="color:var(--text-muted)">Aucune sortie</em>'}}</div>
+    </div>`;
+  }}).join('');
+}}
+
+function buildDocList() {{
+  const list = document.getElementById('doc-list');
+  list.innerHTML = DATA.documents.map(doc => {{
+    const c = cerColor(doc.mean_cer); const bg = cerBg(doc.mean_cer);
+    return `<div class="doc-list-item" data-doc-id="${{esc(doc.doc_id)}}"
+        onclick="loadDocument('${{esc(doc.doc_id)}}')">
+      <span class="doc-list-label">${{esc(doc.doc_id)}}</span>
+      <span class="doc-list-cer" style="color:${{c}};background:${{bg}}">${{pct(doc.mean_cer,1)}}</span>
+    </div>`;
+  }}).join('');
+  if (DATA.documents.length) loadDocument(DATA.documents[0].doc_id);
+}}
+
+// Zoom
+function handleZoom(e) {{
+  e.preventDefault();
+  zoom(e.deltaY < 0 ? 1.15 : 0.87);
+}}
+function zoom(factor) {{
+  zoomLevel = Math.max(0.5, Math.min(5, zoomLevel * factor));
+  applyZoom();
+}}
+function resetZoom() {{
+  zoomLevel = 1; imgOffset = {{ x: 0, y: 0 }};
+  applyZoom();
+}}
+function applyZoom() {{
+  const img = document.getElementById('doc-image');
+  img.style.transform = `scale(${{zoomLevel}}) translate(${{imgOffset.x}}px, ${{imgOffset.y}}px)`;
+}}
+function startDrag(e) {{
+  if (zoomLevel <= 1) return;
+  dragStart = {{ x: e.clientX - imgOffset.x * zoomLevel, y: e.clientY - imgOffset.y * zoomLevel }};
+  document.getElementById('doc-image-wrap').style.cursor = 'grabbing';
+}}
+function doDrag(e) {{
+  if (!dragStart) return;
+  imgOffset.x = (e.clientX - dragStart.x) / zoomLevel;
+  imgOffset.y = (e.clientY - dragStart.y) / zoomLevel;
+  applyZoom();
+}}
+function endDrag() {{
+  dragStart = null;
+  document.getElementById('doc-image-wrap').style.cursor = zoomLevel > 1 ? 'grab' : 'zoom-in';
+}}
+
+// ── Graphiques ──────────────────────────────────────────────────
+let chartsBuilt = false;
+let chartInstances = {{}};
+
+function destroyChart(id) {{
+  if (chartInstances[id]) {{ chartInstances[id].destroy(); delete chartInstances[id]; }}
+}}
+
+function buildCharts() {{
+  if (chartsBuilt) return;
+  chartsBuilt = true;
+  buildCerHistogram();
+  buildRadar();
+  buildCerPerDoc();
+  buildDurationChart();
+}}
+
+function buildCerHistogram() {{
+  destroyChart('cer-hist');
+  const ctx = document.getElementById('chart-cer-hist').getContext('2d');
+  // Construire histogramme à bins fixes [0-5, 5-10, 10-20, 20-30, 30-50, 50+]
+  const bins    = [0, 0.05, 0.10, 0.20, 0.30, 0.50, 1.01];
+  const labels  = ['0–5%', '5–10%', '10–20%', '20–30%', '30–50%', '>50%'];
+  const colors  = ['#16a34a','#65a30d','#ca8a04','#ea580c','#dc2626','#9f1239'];
+
+  const datasets = DATA.engines.map((e, ei) => {{
+    const counts = new Array(labels.length).fill(0);
+    e.cer_values.forEach(v => {{
+      for (let i = 0; i < bins.length - 1; i++) {{
+        if (v >= bins[i] && v < bins[i+1]) {{ counts[i]++; break; }}
+      }}
+    }});
+    return {{
+      label: e.name, data: counts,
+      backgroundColor: engineColor(ei) + 'aa',
+      borderColor: engineColor(ei),
+      borderWidth: 1,
+    }};
+  }});
+
+  chartInstances['cer-hist'] = new Chart(ctx, {{
+    type: 'bar',
+    data: {{ labels, datasets }},
+    options: {{
+      responsive: true, maintainAspectRatio: false,
+      plugins: {{ legend: {{ position: 'top', labels: {{ font: {{ size: 11 }} }} }} }},
+      scales: {{
+        x: {{ title: {{ display: true, text: 'Plage CER', font: {{ size: 11 }} }} }},
+        y: {{ title: {{ display: true, text: 'Nombre de documents', font: {{ size: 11 }} }},
+               ticks: {{ stepSize: 1 }} }},
+      }},
+    }},
+  }});
+}}
+
+function buildRadar() {{
+  destroyChart('radar');
+  const ctx = document.getElementById('chart-radar').getContext('2d');
+  // Axes : CER, WER, MER, WIL inversés (1 - valeur → plus c'est élevé, mieux c'est)
+  const metrics = ['CER', 'WER', 'MER', 'WIL'];
+  const keys    = ['cer', 'wer', 'mer', 'wil'];
+  const datasets = DATA.engines.map((e, i) => {{
+    const data = keys.map(k => Math.max(0, (1 - (e[k] || 0)) * 100));
+    return {{
+      label: e.name, data,
+      backgroundColor: engineColor(i) + '33',
+      borderColor: engineColor(i),
+      borderWidth: 2,
+      pointRadius: 4,
+      pointHoverRadius: 6,
+    }};
+  }});
+
+  chartInstances['radar'] = new Chart(ctx, {{
+    type: 'radar',
+    data: {{ labels: metrics, datasets }},
+    options: {{
+      responsive: true, maintainAspectRatio: false,
+      plugins: {{ legend: {{ position: 'top', labels: {{ font: {{ size: 11 }} }} }} }},
+      scales: {{
+        r: {{
+          min: 0, max: 100,
+          ticks: {{ stepSize: 20, font: {{ size: 10 }} }},
+          pointLabels: {{ font: {{ size: 12, weight: 'bold' }} }},
+        }},
+      }},
+    }},
+  }});
+}}
+
+function buildCerPerDoc() {{
+  destroyChart('cer-doc');
+  const ctx = document.getElementById('chart-cer-doc').getContext('2d');
+  const labels = DATA.documents.map(d => d.doc_id);
+  const datasets = DATA.engines.map((e, ei) => {{
+    const data = DATA.documents.map(doc => {{
+      const er = doc.engine_results.find(r => r.engine === e.name);
+      return er ? er.cer * 100 : null;
+    }});
+    return {{
+      label: e.name, data,
+      borderColor: engineColor(ei),
+      backgroundColor: engineColor(ei) + '22',
+      tension: 0.3, fill: false,
+      pointRadius: 3, pointHoverRadius: 5,
+    }};
+  }});
+
+  chartInstances['cer-doc'] = new Chart(ctx, {{
+    type: 'line',
+    data: {{ labels, datasets }},
+    options: {{
+      responsive: true, maintainAspectRatio: false,
+      plugins: {{ legend: {{ position: 'top', labels: {{ font: {{ size: 11 }} }} }} }},
+      scales: {{
+        x: {{ ticks: {{ maxRotation: 45, font: {{ size: 10 }} }} }},
+        y: {{ title: {{ display: true, text: 'CER (%)', font: {{ size: 11 }} }}, min: 0 }},
+      }},
+    }},
+  }});
+}}
+
+function buildDurationChart() {{
+  destroyChart('duration');
+  const ctx = document.getElementById('chart-duration').getContext('2d');
+
+  const labels = DATA.engines.map(e => e.name);
+  const data   = DATA.engines.map(e => {{
+    const docs = DATA.documents;
+    const durs = docs.flatMap(d => d.engine_results
+      .filter(r => r.engine === e.name)
+      .map(r => r.duration));
+    const mean = durs.length ? durs.reduce((a,b) => a+b, 0) / durs.length : 0;
+    return parseFloat(mean.toFixed(3));
+  }});
+
+  chartInstances['duration'] = new Chart(ctx, {{
+    type: 'bar',
+    data: {{
+      labels,
+      datasets: [{{
+        label: 'Durée moy. (s)',
+        data,
+        backgroundColor: DATA.engines.map((_, i) => engineColor(i) + 'aa'),
+        borderColor:     DATA.engines.map((_, i) => engineColor(i)),
+        borderWidth: 1,
+      }}],
+    }},
+    options: {{
+      responsive: true, maintainAspectRatio: false,
+      plugins: {{ legend: {{ display: false }} }},
+      scales: {{
+        y: {{ title: {{ display: true, text: 'Secondes', font: {{ size: 11 }} }}, min: 0 }},
+      }},
+    }},
+  }});
+}}
+
+// ── Init ────────────────────────────────────────────────────────
+function init() {{
+  // Méta nav
+  const d = new Date(DATA.meta.run_date);
+  const fmt = d.toLocaleDateString('fr-FR', {{ year:'numeric', month:'short', day:'numeric' }});
+  document.getElementById('nav-meta').textContent =
+    DATA.meta.corpus_name + ' · ' + fmt;
+  document.getElementById('footer-date').textContent =
+    'Rapport généré le ' + fmt;
+
+  // Sélecteur moteur galerie
+  const sel = document.getElementById('gallery-engine-select');
+  DATA.engines.forEach(e => {{
+    const opt = document.createElement('option');
+    opt.value = e.name; opt.textContent = e.name;
+    sel.appendChild(opt);
+  }});
+
+  renderRanking();
+  renderGallery();
+  buildDocList();
+}}
+
+document.addEventListener('DOMContentLoaded', init);
+</script>
+</body>
+</html>
+"""
+
+
+# ---------------------------------------------------------------------------
+# Classe principale
+# ---------------------------------------------------------------------------
+
+class ReportGenerator:
+    """Génère un rapport HTML interactif depuis un BenchmarkResult.
+
+    Usage
+    -----
+    >>> from picarones.report import ReportGenerator
+    >>> gen = ReportGenerator(benchmark_result)
+    >>> path = gen.generate("rapport.html")
+    """
+
+    def __init__(
+        self,
+        benchmark: BenchmarkResult,
+        images_b64: Optional[dict[str, str]] = None,
+    ) -> None:
+        """
+        Parameters
+        ----------
+        benchmark:
+            Résultat de benchmark à visualiser.
+        images_b64:
+            Dictionnaire {doc_id: data-URI base64} des images.
+            Si None, le générateur cherche dans ``benchmark.metadata["_images_b64"]``.
+        """
+        self.benchmark = benchmark
+        self.images_b64: dict[str, str] = images_b64 or {}
+
+        # Récupérer les images embarquées dans les metadata (fixtures)
+        if not self.images_b64:
+            self.images_b64 = benchmark.metadata.get("_images_b64", {})  # type: ignore[assignment]
+
+    def generate(self, output_path: str | Path) -> Path:
+        """Génère le fichier HTML et le sauvegarde sur disque.
+
+        Parameters
+        ----------
+        output_path:
+            Chemin du fichier HTML à écrire.
+
+        Returns
+        -------
+        Path
+            Chemin absolu du fichier généré.
+        """
+        output_path = Path(output_path)
+        output_path.parent.mkdir(parents=True, exist_ok=True)
+
+        report_data = _build_report_data(self.benchmark, self.images_b64)
+        report_json = json.dumps(report_data, ensure_ascii=False, separators=(",", ":"))
+
+        html = _HTML_TEMPLATE.format(
+            corpus_name=self.benchmark.corpus_name,
+            picarones_version=self.benchmark.picarones_version,
+            report_data_json=report_json,
+        )
+
+        output_path.write_text(html, encoding="utf-8")
+        return output_path.resolve()
+
+    @classmethod
+    def from_json(cls, json_path: str | Path, **kwargs) -> "ReportGenerator":
+        """Crée un générateur depuis un fichier JSON de résultats.
+
+        Compatible avec les fichiers produits par ``BenchmarkResult.to_json()``.
+        Les images base64 doivent être passées via ``kwargs["images_b64"]``
+        si elles ne sont pas dans le JSON.
+        """
+        import json as _json
+
+        data = _json.loads(Path(json_path).read_text(encoding="utf-8"))
+
+        # Reconstruction minimale d'un BenchmarkResult depuis le dict
+        from picarones.core.metrics import MetricsResult
+        from picarones.core.results import DocumentResult, EngineReport
+
+        engine_reports = []
+        for er_data in data.get("engine_reports", []):
+            doc_results = []
+            for dr_data in er_data.get("document_results", []):
+                m = dr_data["metrics"]
+                metrics = MetricsResult(
+                    cer=m["cer"], cer_nfc=m["cer_nfc"], cer_caseless=m["cer_caseless"],
+                    wer=m["wer"], wer_normalized=m["wer_normalized"],
+                    mer=m["mer"], wil=m["wil"],
+                    reference_length=m["reference_length"],
+                    hypothesis_length=m["hypothesis_length"],
+                    error=m.get("error"),
+                )
+                doc_results.append(DocumentResult(
+                    doc_id=dr_data["doc_id"],
+                    image_path=dr_data["image_path"],
+                    ground_truth=dr_data["ground_truth"],
+                    hypothesis=dr_data["hypothesis"],
+                    metrics=metrics,
+                    duration_seconds=dr_data.get("duration_seconds", 0.0),
+                    engine_error=dr_data.get("engine_error"),
+                ))
+            engine_reports.append(EngineReport(
+                engine_name=er_data["engine_name"],
+                engine_version=er_data.get("engine_version", "unknown"),
+                engine_config=er_data.get("engine_config", {}),
+                document_results=doc_results,
+            ))
+
+        corpus_info = data.get("corpus", {})
+        bm = BenchmarkResult(
+            corpus_name=corpus_info.get("name", "Corpus"),
+            corpus_source=corpus_info.get("source"),
+            document_count=corpus_info.get("document_count", 0),
+            engine_reports=engine_reports,
+            run_date=data.get("run_date", ""),
+            picarones_version=data.get("picarones_version", ""),
+            metadata=data.get("metadata", {}),
+        )
+
+        images_b64 = kwargs.pop("images_b64", {})
+        return cls(bm, images_b64=images_b64, **kwargs)

tests/test_diff_utils.py

@@ -0,0 +1,97 @@
+"""Tests pour picarones.report.diff_utils."""
+
+import pytest
+from picarones.report.diff_utils import compute_word_diff, compute_char_diff, diff_stats
+
+
+class TestComputeWordDiff:
+    def test_equal_texts(self):
+        ops = compute_word_diff("bonjour monde", "bonjour monde")
+        assert len(ops) == 1
+        assert ops[0]["op"] == "equal"
+        assert ops[0]["text"] == "bonjour monde"
+
+    def test_empty_reference(self):
+        ops = compute_word_diff("", "bonjour")
+        assert any(o["op"] == "insert" for o in ops)
+
+    def test_empty_hypothesis(self):
+        ops = compute_word_diff("bonjour", "")
+        assert any(o["op"] == "delete" for o in ops)
+
+    def test_both_empty(self):
+        ops = compute_word_diff("", "")
+        assert ops == []
+
+    def test_insertion(self):
+        ops = compute_word_diff("le chat", "le grand chat")
+        assert any(o["op"] == "insert" and "grand" in o["text"] for o in ops)
+
+    def test_deletion(self):
+        ops = compute_word_diff("le grand chat", "le chat")
+        assert any(o["op"] == "delete" and "grand" in o["text"] for o in ops)
+
+    def test_replacement(self):
+        ops = compute_word_diff("le chat dort", "le chien dort")
+        assert any(o["op"] == "replace" and "chat" in o["old"] and "chien" in o["new"] for o in ops)
+
+    def test_ops_cover_all_words(self):
+        ref = "Bonjour monde médiéval"
+        hyp = "Bonjour univers médiéval"
+        ops = compute_word_diff(ref, hyp)
+        # Reconstruction de la référence depuis les ops equal+delete+replace.old
+        ref_reconstructed = []
+        for op in ops:
+            if op["op"] in ("equal", "delete"):
+                ref_reconstructed.extend(op["text"].split())
+            elif op["op"] == "replace":
+                ref_reconstructed.extend(op["old"].split())
+        assert ref_reconstructed == ref.split()
+
+    def test_result_is_list_of_dicts(self):
+        ops = compute_word_diff("texte", "text")
+        assert isinstance(ops, list)
+        assert all(isinstance(o, dict) for o in ops)
+
+    def test_all_ops_have_op_key(self):
+        ops = compute_word_diff("abc def ghi", "abc xyz ghi")
+        assert all("op" in o for o in ops)
+
+    def test_valid_op_types(self):
+        valid_ops = {"equal", "insert", "delete", "replace"}
+        ops = compute_word_diff("un deux trois", "un trois quatre")
+        assert all(o["op"] in valid_ops for o in ops)
+
+
+class TestComputeCharDiff:
+    def test_equal(self):
+        ops = compute_char_diff("abc", "abc")
+        assert len(ops) == 1
+        assert ops[0]["op"] == "equal"
+
+    def test_single_char_replace(self):
+        ops = compute_char_diff("abc", "axc")
+        assert any(o["op"] == "replace" and o["old"] == "b" and o["new"] == "x" for o in ops)
+
+    def test_empty_strings(self):
+        assert compute_char_diff("", "") == []
+
+
+class TestDiffStats:
+    def test_empty(self):
+        stats = diff_stats([])
+        assert stats == {"equal": 0, "insert": 0, "delete": 0, "replace": 0}
+
+    def test_counts(self):
+        ops = [
+            {"op": "equal", "text": "a"},
+            {"op": "insert", "text": "b"},
+            {"op": "delete", "text": "c"},
+            {"op": "replace", "old": "d", "new": "e"},
+            {"op": "equal", "text": "f"},
+        ]
+        stats = diff_stats(ops)
+        assert stats["equal"] == 2
+        assert stats["insert"] == 1
+        assert stats["delete"] == 1
+        assert stats["replace"] == 1

tests/test_report.py

@@ -0,0 +1,244 @@
+"""Tests pour picarones.report (generator + fixtures)."""
+
+import json
+import pytest
+from pathlib import Path
+
+from picarones.fixtures import generate_sample_benchmark
+from picarones.report.generator import ReportGenerator, _build_report_data, _cer_color, _cer_bg
+
+
+# ---------------------------------------------------------------------------
+# Fixtures Python (données de test)
+# ---------------------------------------------------------------------------
+
+@pytest.fixture
+def sample_benchmark():
+    return generate_sample_benchmark(n_docs=3, seed=0, include_images=True)
+
+
+@pytest.fixture
+def sample_generator(sample_benchmark):
+    return ReportGenerator(sample_benchmark)
+
+
+# ---------------------------------------------------------------------------
+# Tests generate_sample_benchmark
+# ---------------------------------------------------------------------------
+
+class TestGenerateSampleBenchmark:
+    def test_returns_benchmark_result(self, sample_benchmark):
+        from picarones.core.results import BenchmarkResult
+        assert isinstance(sample_benchmark, BenchmarkResult)
+
+    def test_correct_engine_count(self, sample_benchmark):
+        assert len(sample_benchmark.engine_reports) == 3
+
+    def test_correct_doc_count(self, sample_benchmark):
+        assert sample_benchmark.document_count == 3
+        for report in sample_benchmark.engine_reports:
+            assert len(report.document_results) == 3
+
+    def test_engine_names(self, sample_benchmark):
+        names = {r.engine_name for r in sample_benchmark.engine_reports}
+        assert "tesseract" in names
+        assert "pero_ocr" in names
+
+    def test_images_in_metadata(self, sample_benchmark):
+        images = sample_benchmark.metadata.get("_images_b64", {})
+        assert len(images) == 3
+        for v in images.values():
+            assert v.startswith("data:image/png;base64,")
+
+    def test_reproducible_with_seed(self):
+        bm1 = generate_sample_benchmark(n_docs=3, seed=42)
+        bm2 = generate_sample_benchmark(n_docs=3, seed=42)
+        # Même CER pour le même seed
+        cer1 = bm1.engine_reports[0].document_results[0].metrics.cer
+        cer2 = bm2.engine_reports[0].document_results[0].metrics.cer
+        assert cer1 == pytest.approx(cer2)
+
+    def test_without_images(self):
+        bm = generate_sample_benchmark(n_docs=2, include_images=False)
+        assert bm.metadata.get("_images_b64", {}) == {}
+
+    def test_metrics_computed(self, sample_benchmark):
+        for report in sample_benchmark.engine_reports:
+            for dr in report.document_results:
+                assert dr.metrics.cer >= 0.0
+                assert dr.metrics.wer >= 0.0
+
+    def test_aggregated_metrics(self, sample_benchmark):
+        for report in sample_benchmark.engine_reports:
+            assert "cer" in report.aggregated_metrics
+            assert "mean" in report.aggregated_metrics["cer"]
+
+
+# ---------------------------------------------------------------------------
+# Tests _build_report_data
+# ---------------------------------------------------------------------------
+
+class TestBuildReportData:
+    def test_structure(self, sample_benchmark):
+        data = _build_report_data(sample_benchmark, {})
+        assert "meta" in data
+        assert "ranking" in data
+        assert "engines" in data
+        assert "documents" in data
+
+    def test_engines_count(self, sample_benchmark):
+        data = _build_report_data(sample_benchmark, {})
+        assert len(data["engines"]) == 3
+
+    def test_engine_fields(self, sample_benchmark):
+        data = _build_report_data(sample_benchmark, {})
+        for e in data["engines"]:
+            for field in ["name", "version", "cer", "wer", "mer", "wil", "cer_values"]:
+                assert field in e
+
+    def test_documents_count(self, sample_benchmark):
+        data = _build_report_data(sample_benchmark, {})
+        assert len(data["documents"]) == 3
+
+    def test_document_fields(self, sample_benchmark):
+        data = _build_report_data(sample_benchmark, {})
+        for doc in data["documents"]:
+            for field in ["doc_id", "image_path", "ground_truth", "mean_cer",
+                          "best_engine", "engine_results"]:
+                assert field in doc
+
+    def test_diff_computed(self, sample_benchmark):
+        data = _build_report_data(sample_benchmark, {})
+        for doc in data["documents"]:
+            for er in doc["engine_results"]:
+                assert "diff" in er
+                assert isinstance(er["diff"], list)
+
+    def test_images_attached(self, sample_benchmark):
+        images = sample_benchmark.metadata.get("_images_b64", {})
+        data = _build_report_data(sample_benchmark, images)
+        # Au moins un document doit avoir une image b64
+        has_image = any(doc["image_b64"] for doc in data["documents"])
+        assert has_image
+
+    def test_cer_values_list(self, sample_benchmark):
+        data = _build_report_data(sample_benchmark, {})
+        for engine in data["engines"]:
+            assert len(engine["cer_values"]) == 3
+            assert all(isinstance(v, float) for v in engine["cer_values"])
+
+
+# ---------------------------------------------------------------------------
+# Tests ReportGenerator.generate
+# ---------------------------------------------------------------------------
+
+class TestReportGenerator:
+    def test_generates_file(self, sample_generator, tmp_path):
+        out = tmp_path / "rapport.html"
+        path = sample_generator.generate(out)
+        assert path.exists()
+        assert path.suffix == ".html"
+
+    def test_file_not_empty(self, sample_generator, tmp_path):
+        out = tmp_path / "rapport.html"
+        sample_generator.generate(out)
+        content = out.read_text(encoding="utf-8")
+        assert len(content) > 5000  # fichier substantiel
+
+    def test_html_structure(self, sample_generator, tmp_path):
+        out = tmp_path / "rapport.html"
+        sample_generator.generate(out)
+        html = out.read_text(encoding="utf-8")
+        assert "<!DOCTYPE html>" in html
+        assert "<html" in html
+        assert "</html>" in html
+
+    def test_contains_chart_js(self, sample_generator, tmp_path):
+        out = tmp_path / "rapport.html"
+        sample_generator.generate(out)
+        html = out.read_text(encoding="utf-8")
+        assert "chart.js" in html.lower() or "Chart.js" in html
+
+    def test_contains_diff2html(self, sample_generator, tmp_path):
+        out = tmp_path / "rapport.html"
+        sample_generator.generate(out)
+        html = out.read_text(encoding="utf-8")
+        assert "diff2html" in html.lower()
+
+    def test_data_embedded(self, sample_generator, tmp_path):
+        out = tmp_path / "rapport.html"
+        sample_generator.generate(out)
+        html = out.read_text(encoding="utf-8")
+        assert "const DATA" in html
+
+    def test_engine_names_in_html(self, sample_generator, tmp_path):
+        out = tmp_path / "rapport.html"
+        sample_generator.generate(out)
+        html = out.read_text(encoding="utf-8")
+        assert "tesseract" in html
+        assert "pero_ocr" in html
+
+    def test_corpus_name_in_html(self, sample_generator, tmp_path):
+        out = tmp_path / "rapport.html"
+        sample_generator.generate(out)
+        html = out.read_text(encoding="utf-8")
+        assert "chroniques" in html.lower()
+
+    def test_creates_parent_dirs(self, sample_generator, tmp_path):
+        out = tmp_path / "deep" / "nested" / "rapport.html"
+        sample_generator.generate(out)
+        assert out.exists()
+
+    def test_returns_absolute_path(self, sample_generator, tmp_path):
+        out = tmp_path / "rapport.html"
+        result = sample_generator.generate(out)
+        assert result.is_absolute()
+
+    def test_json_roundtrip(self, sample_benchmark, tmp_path):
+        """Vérifie que le rapport peut être généré depuis un JSON sauvegardé."""
+        json_path = tmp_path / "results.json"
+        sample_benchmark.to_json(json_path)
+
+        gen = ReportGenerator.from_json(json_path)
+        html_path = tmp_path / "rapport.html"
+        gen.generate(html_path)
+        assert html_path.exists()
+        html = html_path.read_text(encoding="utf-8")
+        assert "const DATA" in html
+
+    def test_embedded_json_valid(self, sample_generator, tmp_path):
+        """Extrait et parse le JSON embarqué dans le HTML pour vérifier sa validité."""
+        out = tmp_path / "rapport.html"
+        sample_generator.generate(out)
+        html = out.read_text(encoding="utf-8")
+
+        # Extraire le JSON entre "const DATA = " et le ";" de fin de ligne
+        import re
+        match = re.search(r"const DATA = (\{.*?\});", html, re.DOTALL)
+        assert match, "Bloc const DATA non trouvé dans le HTML"
+        data = json.loads(match.group(1))
+        assert "engines" in data
+        assert "documents" in data
+        assert len(data["engines"]) == 3
+
+
+# ---------------------------------------------------------------------------
+# Tests helpers de couleur
+# ---------------------------------------------------------------------------
+
+class TestCerColor:
+    def test_green_below_5pct(self):
+        assert _cer_color(0.04) == "#16a34a"
+
+    def test_yellow_5_to_15pct(self):
+        assert _cer_color(0.10) == "#ca8a04"
+
+    def test_orange_15_to_30pct(self):
+        assert _cer_color(0.20) == "#ea580c"
+
+    def test_red_above_30pct(self):
+        assert _cer_color(0.50) == "#dc2626"
+
+    def test_boundary_exactly_5pct(self):
+        # 0.05 est dans la zone jaune (>= 0.05)
+        assert _cer_color(0.05) == "#ca8a04"