index.html

<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Electrocheck engine</title>
<style>
  :root {
    --bg: #f6f5f2; --panel: #ffffff; --ink: #1b1b1f; --muted: #5d5d66; --line: #dcdad4; --accent: #2346d8;
    --true: #1d7a3e; --mostly-true: #4f8a2a; --mixed: #a06a00; --mostly-false: #c2501b; --false: #b3261e; --unknown: #5d5d66;
  }
  @media (prefers-color-scheme: dark) {
    :root {
      --bg: #141417; --panel: #1d1d22; --ink: #ececf0; --muted: #a2a2ad; --line: #34343c; --accent: #8ea2ff;
      --true: #5cc883; --mostly-true: #9bcf62; --mixed: #e0aa3c; --mostly-false: #f08a55; --false: #f2726a; --unknown: #a2a2ad;
    }
  }
  * { box-sizing: border-box; }
  body { margin: 0; background: var(--bg); color: var(--ink); font: 16px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif; }
  main { max-width: 860px; margin: 0 auto; padding: 24px 16px 64px; }
  h1 { font-size: 1.5rem; margin: 0 0 4px; }
  .lead { color: var(--muted); margin: 0 0 24px; }
  form, .result { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 20px; }
  label { display: block; font-weight: 600; font-size: .9rem; margin: 14px 0 4px; }
  label small { font-weight: 400; color: var(--muted); }
  input, textarea, select { width: 100%; font: inherit; color: var(--ink); background: var(--bg); border: 1px solid var(--line);
                            border-radius: 6px; padding: 8px 10px; }
  textarea { min-height: 64px; resize: vertical; }
  .row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
  @media (max-width: 640px) { .row { grid-template-columns: 1fr; } }
  details { margin-top: 14px; }
  summary { cursor: pointer; color: var(--muted); }
  .actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 20px; }
  button { font: inherit; font-weight: 600; border-radius: 6px; padding: 9px 18px; cursor: pointer; border: 1px solid var(--accent); }
  button[type=submit] { background: var(--accent); color: #fff; }
  button.secondary { background: transparent; color: var(--accent); }
  button:disabled { opacity: .6; cursor: wait; }
  .result { margin-top: 20px; }
  .result[hidden] { display: none; }
  .verdict { display: inline-block; font-weight: 700; font-size: 1.2rem; padding: 4px 12px; border-radius: 6px; color: #fff; }
  .meta { color: var(--muted); font-size: .9rem; margin: 8px 0 0; }
  .flags { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0; padding: 0; list-style: none; }
  .flags li { font-size: .82rem; border: 1px solid var(--line); border-radius: 999px; padding: 2px 10px; }
  .flags li.bad { border-color: var(--false); color: var(--false); }
  .sources { padding-left: 20px; }
  .sources li { margin: 10px 0; overflow-wrap: anywhere; }
  .sources a { color: var(--accent); }
  .tier { font-size: .78rem; color: var(--muted); }
  .error { color: var(--false); font-weight: 600; }
  pre { white-space: pre-wrap; overflow-wrap: anywhere; font-size: .82rem; background: var(--bg); padding: 10px; border-radius: 6px; }
</style>
</head>
<body>
<main>
  <h1>Electrocheck engine</h1>
  <p class="lead">Vérifie une affirmation faite à la télévision : la phrase à vérifier, qui l'a dite et ses mots exacts. Une vérification prend de 10 secondes à deux minutes.</p>

  <form id="form">
    <label for="claim">Affirmation à vérifier <small>(une phrase autonome)</small></label>
    <textarea id="claim" name="claim" required></textarea>

    <div class="row">
      <div><label for="speaker">Orateur</label><input id="speaker" name="speaker"></div>
      <div><label for="channel">Chaîne</label><input id="channel" name="channel"></div>
      <div><label for="asserted_at">Date de l'émission</label><input id="asserted_at" name="asserted_at" type="date"></div>
    </div>

    <label for="quote">Mots exacts <small>(tels que prononcés)</small></label>
    <textarea id="quote" name="quote"></textarea>

    <details>
      <summary>Contexte (facultatif)</summary>
      <label for="sentence">Phrase entière autour des mots exacts</label>
      <textarea id="sentence" name="sentence"></textarea>
      <label for="meant">Sens que l'orateur donne à ses mots <small>(s'il diffère du sens littéral)</small></label>
      <input id="meant" name="meant">
      <label for="before">Dit juste avant <small>(la question posée, le sujet)</small></label>
      <textarea id="before" name="before"></textarea>
      <label for="after">Dit juste après</label>
      <textarea id="after" name="after"></textarea>
      <label for="context">Transcription autour</label>
      <textarea id="context" name="context"></textarea>
      <label for="captions">Sous-titres</label>
      <textarea id="captions" name="captions"></textarea>
      <label for="order">Recherche des sources</label>
      <select id="order" name="order">
        <option value="">Réglage du serveur (CHECK_ORDER)</option>
        <option value="linkup_first">Linkup d'abord, puis Gemini</option>
        <option value="google_first">Gemini et Google d'abord</option>
      </select>
    </details>

    <div class="actions">
      <button type="submit" id="go">Vérifier</button>
      <button type="button" class="secondary" id="example">Exemple</button>
    </div>
  </form>

  <section class="result" id="result" hidden aria-live="polite"></section>
</main>

<script>
const VERDICTS = {
  vrai: ["Vrai", "--true"], plutot_vrai: ["Plutôt vrai", "--mostly-true"], mixte: ["Mixte", "--mixed"],
  plutot_faux: ["Plutôt faux", "--mostly-false"], faux: ["Faux", "--false"], insuffisant: ["Insuffisant", "--unknown"],
};
const TIERS = { 1: "source primaire", 2: "grand média", 3: "autre source" };
const EXAMPLE = {
  claim: "La proportion d'élèves issus de milieux défavorisés s'élève à 43 % dans les collèges publics et à 18 % dans les collèges privés.",
  speaker: "Raphaël Glucksmann", channel: "France 2", asserted_at: "2026-10-01",
  before: "[Animateur] C'est un constat sur le creusement des inégalités. Donnez-nous une mesure qui permet de les réduire.",
  quote: "dans un collège public aujourd'hui, il y a 43 pourcents d'élèves issus de milieux défavorisés, dans un collège privé, c'est 18 pourcents",
  sentence: "Vous savez que dans un collège public, dans un collège public aujourd'hui, il y a 43 pourcents d'élèves issus de milieux défavorisés, dans un collège privé, c'est 18 pourcents, et ça s'accroît, la différence s'accroît.",
};

const form = document.getElementById("form");
const result = document.getElementById("result");
const go = document.getElementById("go");

function esc(text) {
  return String(text ?? "").replace(/[&<>"']/g, c => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" }[c]));
}

document.getElementById("example").addEventListener("click", () => {
  for (const [name, value] of Object.entries(EXAMPLE)) form.elements[name].value = value;
});

form.addEventListener("submit", async (event) => {
  event.preventDefault();
  const body = {};
  for (const el of form.elements) if (el.name && el.value.trim()) body[el.name] = el.value.trim();
  if (body.asserted_at) body.asserted_at = new Date(body.asserted_at).toISOString();
  go.disabled = true;
  go.textContent = "Vérification…";
  const started = performance.now();
  result.hidden = false;
  result.innerHTML = '<p class="meta">Recherche des sources et vérification en cours…</p>';
  try {
    const res = await fetch("check", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(body) });
    const data = await res.json();
    result.innerHTML = res.ok ? render(data, (performance.now() - started) / 1000) : `<p class="error">Erreur : ${esc(data.error || res.status)}</p>`;
  } catch (err) {
    result.innerHTML = `<p class="error">Erreur : ${esc(err.message)}</p>`;
  } finally {
    go.disabled = false;
    go.textContent = "Vérifier";
  }
});

function render(d, seconds) {
  const [label, color] = VERDICTS[d.verdict] || [d.verdict, "--unknown"];
  const flags = d.guard ? [`<li class="bad">ramené à « insuffisant » : ${esc(d.guard)}</li>`] : [];
  for (const a of d.attempts) {
    flags.push(a.failed ? `<li class="bad">${esc(a.call)} : échec (${esc(a.failed)})</li>`
      : `<li>${esc(a.call)}${a.thinking ? " (réflexion " + esc(a.thinking) + ")" : ""} : ${esc(a.verdict)}, ${esc(a.usable_sources)} source(s)</li>`);
  }
  const sources = d.sources.length
    ? `<ol class="sources">${d.sources.map(s => `<li><a href="${esc(s.url)}" target="_blank" rel="noopener noreferrer">${esc(s.title)}</a>
         <span class="tier">· ${esc(s.domain)} · ${esc(TIERS[s.tier] || "")}</span>${s.says ? `<br>${esc(s.says)}` : ""}</li>`).join("")}</ol>`
    : '<p class="meta">Aucune source exploitable.</p>';
  return `<span class="verdict" style="background: var(${color})">${esc(label)}</span>
    <p class="meta">Confiance ${Math.round(d.confidence * 100)} % · ${seconds.toFixed(1)} s</p>
    <p>${esc(d.explanation)}</p>
    ${d.meant ? `<p class="meta">Sens jugé : ${esc(d.meant)}</p>` : ""}
    <ul class="flags">${flags.join("")}</ul>
    <h2 style="font-size:1.05rem">Sources</h2>${sources}
    <details><summary>Réponse complète (JSON)</summary><pre>${esc(JSON.stringify(d, null, 2))}</pre></details>`;
}
</script>
</body>
</html>