mirror of
https://github.com/siop-spelev/siop2.git
synced 2026-08-08 12:41:54 +00:00
0730bf9dad
L'écran 6 (dictée, jamais construite — option « si budget temps ») dit maintenant explicitement que la description relue et jointe à l'OT rejoint le corpus de l'assistant à la clôture, anonymisée comme les bilans codés. Idée discutée avec le référent (transcription locale via faster-whisper envisagée, moteur/calibrage tranchés dans le détail), maquette amendée et validée — implémentation non demandée pour l'instant. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
583 lines
33 KiB
HTML
583 lines
33 KiB
HTML
<!doctype html>
|
||
<html lang="fr">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<title>SIOP V2 — Maquettes HD · R5 IA</title>
|
||
</head>
|
||
<body>
|
||
<!--
|
||
SIOP V2 — Maquettes HD de la release R5 « IA » (design-first).
|
||
À VALIDER PAR LE RÉFÉRENT AVANT TOUT CODE `apps/ai` (principe n°1).
|
||
Deux capacités (cadrage) : assistant RAG qui CITE SES SOURCES, et
|
||
suggestion de codes de bilan depuis une description libre. Voix : si
|
||
budget temps, avec purge de l'audio (loi 09-08).
|
||
Principe permanent : L'IA PROPOSE, L'HUMAIN VALIDE — aucune écriture
|
||
automatique. Tokens répliqués de ../tokens.css, bi-thème.
|
||
-->
|
||
<style>
|
||
/* ═══ Tokens (répliques de ../tokens.css) ═══ */
|
||
:root{
|
||
--primaire:#1f4fb8;--primaire-actif:#1a439c;--primaire-doux:#eaf0fb;
|
||
--safran:#dd8a0b;--safran-doux:#fdf3e3;
|
||
--fond:#f5f7fa;--surface:#ffffff;--surface-2:#eef2f7;
|
||
--bordure:#dce3ec;--bordure-forte:#b9c4d4;
|
||
--encre:#1b2534;--encre-2:#55647a;--encre-3:#8494ab;
|
||
--st-ouvert:#3d6fe0;--st-ouvert-fond:#e9effc;--st-encours:#6d5bd8;--st-encours-fond:#efecfa;
|
||
--st-attente:#b96f07;--st-attente-fond:#fbf1df;--st-termine:#178a50;--st-termine-fond:#e6f5ec;
|
||
--prio-bloque:#d92626;--prio-bloque-fond:#fdeaea;
|
||
--succes:#178a50;--alerte:#b96f07;--danger:#d92626;--info:#3d6fe0;
|
||
--nav-fond:#16233b;--nav-encre:#c6d2e4;--nav-encre-vif:#ffffff;--nav-bordure:#24344f;
|
||
--police-ui:"Manrope","Avenir Next","Segoe UI Variable",system-ui,sans-serif;
|
||
--rayon:10px;--rayon-controle:8px;--ombre-menu:0 8px 24px rgb(16 30 54/.14);
|
||
}
|
||
@media (prefers-color-scheme:dark){:root{
|
||
--primaire:#6e92e8;--primaire-actif:#8facf0;--primaire-doux:#1d2c4c;
|
||
--safran:#e89a1f;--safran-doux:#33270f;
|
||
--fond:#0f1622;--surface:#182234;--surface-2:#1e2a40;
|
||
--bordure:#2b3850;--bordure-forte:#3d4d6b;
|
||
--encre:#e8edf5;--encre-2:#a7b4c8;--encre-3:#6d7d96;
|
||
--st-ouvert:#7da2ee;--st-ouvert-fond:#1c2a47;--st-encours:#a394ec;--st-encours-fond:#262040;
|
||
--st-attente:#e0a33c;--st-attente-fond:#322510;--st-termine:#4bc084;--st-termine-fond:#12301f;
|
||
--prio-bloque:#f26d6d;--prio-bloque-fond:#3a1414;
|
||
--succes:#4bc084;--alerte:#e0a33c;--danger:#f26d6d;--info:#7da2ee;
|
||
--nav-fond:#0c1524;--nav-encre:#a7b4c8;--nav-encre-vif:#f2f6fc;--nav-bordure:#1e2c44;
|
||
--ombre-menu:0 8px 24px rgb(0 0 0/.45);
|
||
}}
|
||
:root[data-theme="light"]{
|
||
--primaire:#1f4fb8;--primaire-actif:#1a439c;--primaire-doux:#eaf0fb;
|
||
--safran:#dd8a0b;--safran-doux:#fdf3e3;
|
||
--fond:#f5f7fa;--surface:#ffffff;--surface-2:#eef2f7;
|
||
--bordure:#dce3ec;--bordure-forte:#b9c4d4;
|
||
--encre:#1b2534;--encre-2:#55647a;--encre-3:#8494ab;
|
||
--st-ouvert:#3d6fe0;--st-ouvert-fond:#e9effc;--st-encours:#6d5bd8;--st-encours-fond:#efecfa;
|
||
--st-attente:#b96f07;--st-attente-fond:#fbf1df;--st-termine:#178a50;--st-termine-fond:#e6f5ec;
|
||
--prio-bloque:#d92626;--prio-bloque-fond:#fdeaea;
|
||
--succes:#178a50;--alerte:#b96f07;--danger:#d92626;--info:#3d6fe0;
|
||
--nav-fond:#16233b;--nav-encre:#c6d2e4;--nav-encre-vif:#ffffff;--nav-bordure:#24344f;
|
||
--ombre-menu:0 8px 24px rgb(16 30 54/.14);
|
||
}
|
||
:root[data-theme="dark"]{
|
||
--primaire:#6e92e8;--primaire-actif:#8facf0;--primaire-doux:#1d2c4c;
|
||
--safran:#e89a1f;--safran-doux:#33270f;
|
||
--fond:#0f1622;--surface:#182234;--surface-2:#1e2a40;
|
||
--bordure:#2b3850;--bordure-forte:#3d4d6b;
|
||
--encre:#e8edf5;--encre-2:#a7b4c8;--encre-3:#6d7d96;
|
||
--st-ouvert:#7da2ee;--st-ouvert-fond:#1c2a47;--st-encours:#a394ec;--st-encours-fond:#262040;
|
||
--st-attente:#e0a33c;--st-attente-fond:#322510;--st-termine:#4bc084;--st-termine-fond:#12301f;
|
||
--prio-bloque:#f26d6d;--prio-bloque-fond:#3a1414;
|
||
--succes:#4bc084;--alerte:#e0a33c;--danger:#f26d6d;--info:#7da2ee;
|
||
--nav-fond:#0c1524;--nav-encre:#a7b4c8;--nav-encre-vif:#f2f6fc;--nav-bordure:#1e2c44;
|
||
--ombre-menu:0 8px 24px rgb(0 0 0/.45);
|
||
}
|
||
|
||
/* ═══ Base ═══ */
|
||
*{box-sizing:border-box;margin:0}
|
||
html,body{background:var(--fond)}
|
||
body{font-family:var(--police-ui);color:var(--encre);font-size:14px;line-height:1.5}
|
||
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
|
||
button:focus-visible,a:focus-visible{outline:2px solid var(--primaire);outline-offset:2px;border-radius:4px}
|
||
.num{font-variant-numeric:tabular-nums}
|
||
|
||
/* ═══ Barre de revue ═══ */
|
||
.revue{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:12px;flex-wrap:wrap;
|
||
padding:10px 16px;background:var(--nav-fond);color:var(--nav-encre);font-size:13px}
|
||
.revue b{color:var(--nav-encre-vif);letter-spacing:.02em}
|
||
.revue .onglets{display:flex;gap:4px;flex-wrap:wrap}
|
||
.revue .onglets button{padding:6px 10px;border-radius:6px;color:var(--nav-encre)}
|
||
.revue .onglets button:hover{background:rgb(255 255 255/.08);color:var(--nav-encre-vif)}
|
||
.revue .onglets button[aria-selected="true"]{background:rgb(255 255 255/.12);color:var(--nav-encre-vif);
|
||
box-shadow:inset 3px 0 0 var(--safran)}
|
||
.revue .droite{margin-left:auto}
|
||
.revue .theme{padding:6px 10px;border:1px solid var(--nav-bordure);border-radius:6px}
|
||
.note-ecran{max-width:1180px;margin:14px auto 0;padding:0 20px;color:var(--encre-2);font-size:13px}
|
||
.note-ecran b{color:var(--encre)}
|
||
|
||
/* ═══ Coquille web (simplifiée — la vraie est celle des releases passées) ═══ */
|
||
.ecran{display:none;max-width:1180px;margin:14px auto 44px;padding:0 20px}
|
||
.ecran.actif{display:block}
|
||
.app{display:grid;grid-template-columns:210px 1fr;min-height:680px;border:1px solid var(--bordure);
|
||
border-radius:14px;overflow:hidden;background:var(--fond)}
|
||
.nav{background:var(--nav-fond);color:var(--nav-encre);padding:16px 0;font-size:13px}
|
||
.nav .logo{display:flex;align-items:center;gap:8px;padding:0 16px 14px;color:var(--nav-encre-vif);
|
||
font-weight:800;font-size:17px;letter-spacing:.04em}
|
||
.nav .logo i{color:var(--safran);font-style:normal}
|
||
.nav .groupe{padding:10px 16px 3px;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:#6b7f9e}
|
||
.nav a{display:block;padding:7px 16px;color:var(--nav-encre);text-decoration:none;border-left:3px solid transparent}
|
||
.nav a.actif{background:rgb(255 255 255/.09);color:var(--nav-encre-vif);border-left-color:var(--safran)}
|
||
.contenu{padding:18px 20px;display:flex;flex-direction:column;gap:12px}
|
||
.entete{display:flex;align-items:center;gap:10px}
|
||
.entete h2{font-size:18px}
|
||
.entete .fin{margin-left:auto;font-size:12px;color:var(--encre-3)}
|
||
.carte{background:var(--surface);border:1px solid var(--bordure);border-radius:var(--rayon);padding:14px}
|
||
.carte h3{font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--encre-2);margin-bottom:8px}
|
||
.btn{display:inline-flex;align-items:center;gap:6px;padding:8px 13px;border-radius:var(--rayon-controle);
|
||
border:1px solid var(--bordure-forte);font-weight:600;font-size:13px;background:var(--surface)}
|
||
.btn.prim{background:var(--primaire);border-color:var(--primaire);color:#fff}
|
||
.btn.ghost{border-color:transparent;color:var(--primaire)}
|
||
|
||
/* ═══ Assistant (chat sourcé) ═══ */
|
||
.chat{display:flex;flex-direction:column;gap:12px;max-width:760px}
|
||
.msg-q{align-self:flex-end;background:var(--primaire);color:#fff;border-radius:14px 14px 4px 14px;
|
||
padding:10px 14px;max-width:75%;font-size:13.5px}
|
||
.msg-r{background:var(--surface);border:1px solid var(--bordure);border-radius:14px 14px 14px 4px;
|
||
padding:12px 14px;max-width:88%;font-size:13.5px;display:flex;flex-direction:column;gap:10px}
|
||
.msg-r p b{color:var(--encre)}
|
||
.cite{display:inline-flex;align-items:center;justify-content:center;min-width:16px;height:16px;
|
||
border-radius:5px;background:var(--primaire-doux);color:var(--primaire);font-size:10.5px;font-weight:800;
|
||
vertical-align:2px;margin:0 1px;cursor:pointer}
|
||
.sources{display:flex;flex-direction:column;gap:6px;border-top:1px dashed var(--bordure);padding-top:10px}
|
||
.source{display:flex;gap:10px;align-items:flex-start;background:var(--surface-2);border-radius:9px;padding:8px 10px}
|
||
.source .no{flex:none;width:18px;height:18px;border-radius:5px;background:var(--primaire-doux);
|
||
color:var(--primaire);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800}
|
||
.source b{font-size:12.5px}
|
||
.source .ou{color:var(--encre-2);font-size:11.5px}
|
||
.source .extrait{color:var(--encre-2);font-size:12px;font-style:italic;border-left:2px solid var(--safran);
|
||
padding-left:8px;margin-top:3px}
|
||
.source .ouvrir{margin-left:auto;color:var(--primaire);font-weight:700;font-size:12px;white-space:nowrap}
|
||
.avert{display:flex;gap:8px;align-items:center;background:var(--safran-doux);color:var(--alerte);
|
||
border-radius:9px;padding:8px 10px;font-size:12px;font-weight:600}
|
||
.saisie-chat{display:flex;gap:8px;max-width:760px}
|
||
.saisie-chat input{flex:1;border:1.5px solid var(--bordure-forte);border-radius:10px;background:var(--surface);
|
||
padding:11px 13px;font:inherit;color:var(--encre)}
|
||
.refus{background:var(--surface);border:1.5px dashed var(--bordure-forte);border-radius:14px;
|
||
padding:12px 14px;max-width:88%;font-size:13.5px;display:flex;flex-direction:column;gap:8px}
|
||
.refus b{color:var(--encre)}
|
||
.refus .pourquoi{color:var(--encre-2);font-size:12.5px}
|
||
|
||
/* ═══ Suggestion de bilan ═══ */
|
||
.grille-2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
|
||
.zone-libre{width:100%;min-height:74px;border:1.5px solid var(--bordure-forte);border-radius:10px;
|
||
background:var(--surface);padding:10px 12px;font:inherit;font-size:13px;color:var(--encre)}
|
||
.suggestion{display:flex;gap:10px;align-items:flex-start;border:1.5px solid var(--primaire);
|
||
background:var(--primaire-doux);border-radius:10px;padding:10px 12px}
|
||
.suggestion .ia{flex:none;font-size:15px}
|
||
.suggestion b{font-size:13px}
|
||
.suggestion .just{color:var(--encre-2);font-size:12px}
|
||
.confiance{margin-left:auto;font-size:10.5px;font-weight:800;color:var(--primaire);white-space:nowrap}
|
||
.actions-sug{display:flex;gap:8px;margin-top:4px}
|
||
.champ{display:flex;flex-direction:column;gap:4px;font-size:12px}
|
||
.champ label{font-weight:700;color:var(--encre-2);font-size:11px}
|
||
.champ label em{color:var(--danger);font-style:normal}
|
||
.select{border:1.5px solid var(--bordure-forte);border-radius:9px;background:var(--surface);
|
||
padding:8px 10px;font-size:13px;color:var(--encre)}
|
||
.select.pre{border-color:var(--primaire);background:var(--primaire-doux);position:relative}
|
||
.select.pre::after{content:'suggéré';position:absolute;top:-8px;right:8px;font-size:9px;font-weight:800;
|
||
color:var(--primaire);background:var(--surface);padding:0 5px;border-radius:99px;border:1px solid var(--primaire)}
|
||
.select.vide{color:var(--encre-3)}
|
||
|
||
/* ═══ Corpus ═══ */
|
||
table{border-collapse:collapse;width:100%;font-size:13px}
|
||
th{text-align:left;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--encre-2);
|
||
background:var(--surface-2);padding:8px 10px}
|
||
td{padding:8px 10px;border-top:1px solid var(--bordure)}
|
||
.st{font-size:10.5px;font-weight:700;padding:2px 8px;border-radius:999px;white-space:nowrap}
|
||
.st.ok{color:var(--st-termine);background:var(--st-termine-fond)}
|
||
.st.encours{color:var(--st-ouvert);background:var(--st-ouvert-fond)}
|
||
.st.exclu{color:var(--encre-3);background:var(--surface-2)}
|
||
.interrupteur{width:34px;height:19px;border-radius:99px;background:var(--succes);position:relative;display:inline-block}
|
||
.interrupteur::after{content:'';position:absolute;top:2px;right:2px;width:15px;height:15px;border-radius:50%;background:#fff}
|
||
.interrupteur.off{background:var(--bordure-forte)}
|
||
.interrupteur.off::after{right:auto;left:2px}
|
||
|
||
/* ═══ Téléphone (repris de maquette-r4) ═══ */
|
||
.tels{display:flex;gap:28px;justify-content:center;flex-wrap:wrap}
|
||
.tel{width:310px;border:1px solid var(--bordure-forte);border-radius:28px;overflow:hidden;background:var(--fond);
|
||
box-shadow:var(--ombre-menu);display:flex;flex-direction:column}
|
||
.tel .encoche{height:26px;background:var(--nav-fond);display:flex;justify-content:center;align-items:center}
|
||
.tel .encoche i{width:70px;height:7px;border-radius:999px;background:rgb(255 255 255/.18)}
|
||
.tel .legende{text-align:center;font-size:11.5px;font-weight:700;letter-spacing:.05em;
|
||
text-transform:uppercase;color:var(--encre-3);padding:8px;background:var(--surface-2)}
|
||
.ecran-tel{padding:14px;display:flex;flex-direction:column;gap:10px;min-height:540px}
|
||
.entete-tel{display:flex;align-items:center;gap:8px;font-weight:800;font-size:15px}
|
||
.entete-tel i{color:var(--safran);font-style:normal}
|
||
.carte-tel{background:var(--surface);border:1px solid var(--bordure);border-radius:12px;padding:12px;
|
||
display:flex;flex-direction:column;gap:8px;font-size:12.5px}
|
||
.carte-tel h4{font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--encre-2)}
|
||
.btn-tel{display:flex;justify-content:center;align-items:center;gap:8px;padding:11px;border-radius:10px;
|
||
font-weight:700;font-size:13.5px;background:var(--primaire);color:#fff}
|
||
.btn-tel.contour{background:var(--surface);color:var(--primaire);border:1.5px solid var(--primaire)}
|
||
.chip-sug{display:inline-flex;align-items:center;gap:5px;border:1.5px solid var(--primaire);
|
||
background:var(--primaire-doux);color:var(--primaire);border-radius:999px;padding:4px 10px;
|
||
font-size:11.5px;font-weight:700}
|
||
.micro{width:52px;height:52px;border-radius:50%;background:var(--prio-bloque);color:#fff;display:flex;
|
||
align-items:center;justify-content:center;font-size:20px;align-self:center}
|
||
.onde{display:flex;gap:3px;align-items:center;justify-content:center;height:26px}
|
||
.onde i{width:3px;border-radius:2px;background:var(--primaire)}
|
||
</style>
|
||
|
||
<header class="revue">
|
||
<b>SIOP · Maquettes R5 — IA</b>
|
||
<nav class="onglets" role="tablist" aria-label="Écrans">
|
||
<button role="tab" aria-selected="true" data-cible="assistant">1 · Assistant sourcé</button>
|
||
<button role="tab" aria-selected="false" data-cible="sans-source">2 · Sans source = refus</button>
|
||
<button role="tab" aria-selected="false" data-cible="suggestion-bilan">3 · Suggestion de bilan (web)</button>
|
||
<button role="tab" aria-selected="false" data-cible="suggestion-mobile">4 · Suggestion (mobile)</button>
|
||
<button role="tab" aria-selected="false" data-cible="corpus">5 · Corpus & ingestion</button>
|
||
<button role="tab" aria-selected="false" data-cible="voix">6 · Voix (option)</button>
|
||
</nav>
|
||
<div class="droite"><button class="theme" id="btn-theme">Thème : auto</button></div>
|
||
</header>
|
||
|
||
<!-- ═══ 1 · ASSISTANT SOURCÉ ═══ -->
|
||
<p class="note-ecran" data-note="assistant"><b>Intention :</b> la recette type du cadrage, à l'écran.
|
||
Chaque affirmation porte ses <b>citations numérotées</b> ; chaque source montre le document (bibliothèque
|
||
R3), la page et l'<b>extrait exact</b>, avec « Ouvrir » vers le document. L'avertissement « l'IA propose »
|
||
est permanent, pas un disclaimer caché. L'assistant vit dans la sidebar (groupe Pilotage).</p>
|
||
<section class="ecran actif" id="assistant">
|
||
<div class="app">
|
||
<aside class="nav">
|
||
<div class="logo"><i>♦</i> SIOP</div>
|
||
<div class="groupe">Pilotage</div>
|
||
<a href="#">Statistiques</a>
|
||
<a class="actif" href="#">Assistant</a>
|
||
<a href="#">Personnes</a>
|
||
</aside>
|
||
<div class="contenu">
|
||
<div class="entete">
|
||
<h2>Assistant</h2>
|
||
<span class="fin">répond UNIQUEMENT depuis votre bibliothèque et vos historiques</span>
|
||
</div>
|
||
<div class="chat">
|
||
<div class="msg-q">Quel couple de serrage pour les coulisseaux de guides du Gen2 ?</div>
|
||
<div class="msg-r">
|
||
<p>Pour l'Otis <b>Gen2 Premier</b>, la notice prescrit un couple de serrage de
|
||
<b>25 N·m</b> pour les vis de fixation des coulisseaux de guides
|
||
<span class="cite">1</span>, avec contrôle du jeu latéral à 0,5 mm maximum
|
||
<span class="cite">1</span>. Sur votre parc, ce réglage a été appliqué lors du
|
||
remplacement des coulisseaux de l'ascenseur A1 le 17 juillet
|
||
<span class="cite">2</span>.</p>
|
||
<div class="sources">
|
||
<div class="source">
|
||
<span class="no">1</span>
|
||
<div>
|
||
<b>Notice Otis Gen2 Premier.pdf</b>
|
||
<div class="ou">Bibliothèque · Asc. A1 · page 42, § « Guidage cabine »</div>
|
||
<div class="extrait">« Serrer les vis de fixation des coulisseaux au couple de 25 N·m ;
|
||
jeu latéral maximal admissible : 0,5 mm. »</div>
|
||
</div>
|
||
<a class="ouvrir" href="#">Ouvrir p. 42</a>
|
||
</div>
|
||
<div class="source">
|
||
<span class="no">2</span>
|
||
<div>
|
||
<b>OT-2026-0341 — Bruit anormal en gaine</b>
|
||
<div class="ou">Historique · clôturé le 17/07/2026 · bilan : Guides / Remplacement pièce</div>
|
||
<div class="extrait">« Coulisseau de guide 16 mm × 2 — frottement guides, remplacement effectué. »</div>
|
||
</div>
|
||
<a class="ouvrir" href="#">Ouvrir l'OT</a>
|
||
</div>
|
||
</div>
|
||
<div class="avert">⚠ L'IA propose, vous validez : vérifiez la notice avant d'agir sur l'appareil.</div>
|
||
</div>
|
||
</div>
|
||
<div class="saisie-chat">
|
||
<input placeholder="Poser une question (notices, historiques, procédures)…">
|
||
<button class="btn prim">Envoyer</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ═══ 2 · SANS SOURCE = REFUS ═══ -->
|
||
<p class="note-ecran" data-note="sans-source" hidden><b>Intention :</b> l'anti-hallucination rendue
|
||
VISIBLE : quand le corpus ne porte pas la réponse, l'assistant le dit, montre ce qu'il a cherché, et
|
||
propose l'action utile (téléverser la notice manquante dans la bibliothèque R3). Jamais de réponse
|
||
inventée « pour faire plaisir ».</p>
|
||
<section class="ecran" id="sans-source">
|
||
<div class="app">
|
||
<aside class="nav">
|
||
<div class="logo"><i>♦</i> SIOP</div>
|
||
<div class="groupe">Pilotage</div>
|
||
<a href="#">Statistiques</a>
|
||
<a class="actif" href="#">Assistant</a>
|
||
<a href="#">Personnes</a>
|
||
</aside>
|
||
<div class="contenu">
|
||
<div class="entete"><h2>Assistant</h2></div>
|
||
<div class="chat">
|
||
<div class="msg-q">Procédure de remplacement du variateur de fréquence du monte-charge KONE ?</div>
|
||
<div class="refus">
|
||
<b>Je ne trouve pas de source fiable dans votre bibliothèque — je préfère ne pas inventer.</b>
|
||
<div class="pourquoi">J'ai cherché dans 6 documents indexés et 214 bilans d'intervention :
|
||
aucune notice KONE, aucun historique de variateur sur le monte-charge MC-1.</div>
|
||
<div class="actions-sug">
|
||
<button class="btn prim">Téléverser la notice KONE dans la bibliothèque</button>
|
||
<button class="btn">Reformuler ma question</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="saisie-chat">
|
||
<input placeholder="Poser une question…">
|
||
<button class="btn prim">Envoyer</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ═══ 3 · SUGGESTION DE BILAN (WEB) ═══ -->
|
||
<p class="note-ecran" data-note="suggestion-bilan" hidden><b>Intention :</b> le technicien (ou le
|
||
dispatcher) décrit la panne en français libre — l'IA propose les codes du bilan R2 avec sa
|
||
<b>justification</b> et sa confiance. « Appliquer » PRÉ-REMPLIT les sélecteurs (liseré « suggéré ») —
|
||
rien n'est enregistré tant que l'humain n'a pas cliqué « Enregistrer le bilan ». Les référentiels
|
||
restent la seule vérité : l'IA ne peut suggérer QUE des codes existants.</p>
|
||
<section class="ecran" id="suggestion-bilan">
|
||
<div class="app">
|
||
<aside class="nav">
|
||
<div class="logo"><i>♦</i> SIOP</div>
|
||
<div class="groupe">Exploitation</div>
|
||
<a class="actif" href="#">Ordres de travail</a>
|
||
<a href="#">Demandes</a>
|
||
</aside>
|
||
<div class="contenu">
|
||
<div class="entete">
|
||
<h2>OT-2026-0352 — Portes qui rebondissent au 3ᵉ</h2>
|
||
<span class="fin">fiche OT · carte Bilan d'intervention</span>
|
||
</div>
|
||
<div class="carte">
|
||
<h3>Décrire pour suggérer (optionnel)</h3>
|
||
<textarea class="zone-libre">La porte cabine rebondissait à la fermeture au 3e étage, cellule encrassée, j'ai nettoyé la barrière et réglé le contact NC-31, essais OK sur 10 cycles.</textarea>
|
||
<div class="actions-sug">
|
||
<button class="btn prim">✨ Suggérer les codes</button>
|
||
<span style="font-size:11.5px;color:var(--encre-3);align-self:center">
|
||
La description reste dans l'OT — elle n'écrit rien toute seule.
|
||
</span>
|
||
</div>
|
||
</div>
|
||
<div class="carte">
|
||
<h3>3 suggestions — rien n'est enregistré sans vous</h3>
|
||
<div style="display:flex;flex-direction:column;gap:8px">
|
||
<div class="suggestion"><span class="ia">✨</span>
|
||
<div><b>Anomalie constatée → « Cellule/barrière encrassée »</b>
|
||
<div class="just">« cellule encrassée », « nettoyé la barrière » dans votre description</div></div>
|
||
<span class="confiance">confiance forte</span>
|
||
</div>
|
||
<div class="suggestion"><span class="ia">✨</span>
|
||
<div><b>Action réalisée → « Nettoyage + réglage »</b>
|
||
<div class="just">« j'ai nettoyé… et réglé le contact »</div></div>
|
||
<span class="confiance">confiance forte</span>
|
||
</div>
|
||
<div class="suggestion"><span class="ia">✨</span>
|
||
<div><b>Élément concerné → « Portes »</b>
|
||
<div class="just">« porte cabine », « contact NC-31 » — 9 bilans similaires sur ce parc</div></div>
|
||
<span class="confiance">confiance moyenne</span>
|
||
</div>
|
||
</div>
|
||
<div class="actions-sug">
|
||
<button class="btn prim">Appliquer les 3 (pré-remplir)</button>
|
||
<button class="btn">Ignorer</button>
|
||
</div>
|
||
</div>
|
||
<div class="carte">
|
||
<h3>Bilan d'intervention — requis pour clôturer</h3>
|
||
<div class="grille-2">
|
||
<div class="champ"><label>État des portes <em>*</em></label>
|
||
<div class="select vide">Sélectionner…</div></div>
|
||
<div class="champ"><label>Anomalie constatée</label>
|
||
<div class="select pre">Cellule/barrière encrassée</div></div>
|
||
<div class="champ"><label>Action réalisée <em>*</em></label>
|
||
<div class="select pre">Nettoyage + réglage</div></div>
|
||
<div class="champ"><label>Élément concerné <em>*</em></label>
|
||
<div class="select pre">Portes</div></div>
|
||
</div>
|
||
<div class="actions-sug" style="margin-top:10px">
|
||
<button class="btn prim">Enregistrer le bilan</button>
|
||
<span style="font-size:11.5px;color:var(--alerte);align-self:center;font-weight:600">
|
||
⚠ « État des portes » reste à choisir — l'IA ne l'a pas deviné, elle ne devine pas.
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ═══ 4 · SUGGESTION (MOBILE) ═══ -->
|
||
<p class="note-ecran" data-note="suggestion-mobile" hidden><b>Intention :</b> la même capacité au pouce,
|
||
dans l'écran de clôture R4 : décrire (ou dicter, écran 6), recevoir des <b>chips suggérées</b>, les
|
||
appliquer d'un geste — les sélecteurs restent la vérité et la garde de clôture ne change pas.
|
||
Hors-ligne : la suggestion attend le réseau (l'IA est un service serveur), la clôture en file R4
|
||
fonctionne sans elle.</p>
|
||
<section class="ecran" id="suggestion-mobile">
|
||
<div class="tels">
|
||
<div class="tel">
|
||
<div class="encoche"><i></i></div>
|
||
<div class="legende">Clôture — suggestion depuis la description</div>
|
||
<div class="ecran-tel">
|
||
<div class="entete-tel"><i>♦</i> ‹ Clôturer OT-2026-0352</div>
|
||
<div class="carte-tel">
|
||
<h4>Décrire pour suggérer</h4>
|
||
<div style="border:1.5px solid var(--bordure-forte);border-radius:9px;background:var(--surface);padding:9px;color:var(--encre);font-size:12.5px">
|
||
Porte cabine qui rebondit, cellule encrassée, nettoyage + réglage du contact, essais OK.
|
||
</div>
|
||
<div class="btn-tel contour">✨ Suggérer les codes</div>
|
||
</div>
|
||
<div class="carte-tel">
|
||
<h4>Suggestions — appuyez pour appliquer</h4>
|
||
<div style="display:flex;flex-wrap:wrap;gap:6px">
|
||
<span class="chip-sug">✨ Anomalie : Cellule encrassée</span>
|
||
<span class="chip-sug">✨ Action : Nettoyage + réglage</span>
|
||
<span class="chip-sug">✨ Élément : Portes</span>
|
||
</div>
|
||
<div style="font-size:11px;color:var(--encre-3)">Rien ne s'enregistre sans votre geste —
|
||
les chips pré-remplissent les sélecteurs ci-dessous.</div>
|
||
</div>
|
||
<div class="carte-tel">
|
||
<h4>Bilan d'intervention</h4>
|
||
<div style="display:flex;flex-direction:column;gap:6px;font-size:12.5px">
|
||
<div>État des portes * : <b style="color:var(--encre-3)">à choisir</b></div>
|
||
<div>Anomalie : <b style="color:var(--primaire)">Cellule encrassée (suggéré)</b></div>
|
||
<div>Action * : <b style="color:var(--primaire)">Nettoyage + réglage (suggéré)</b></div>
|
||
<div>Élément * : <b style="color:var(--primaire)">Portes (suggéré)</b></div>
|
||
</div>
|
||
</div>
|
||
<div class="btn-tel" style="background:var(--bordure-forte)">Clôturer (bilan incomplet)</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ═══ 5 · CORPUS & INGESTION ═══ -->
|
||
<p class="note-ecran" data-note="corpus" hidden><b>Intention :</b> le corpus est la bibliothèque R3 +
|
||
les bilans codés — <b>rien d'externe</b>, et c'est VISIBLE : chaque document montre son statut
|
||
d'indexation, un interrupteur l'exclut du corpus, « Réindexer » est un geste explicite. Bandeau
|
||
loi 09-08 : l'anonymisation à l'ingestion est dite, pas cachée dans une CGU.</p>
|
||
<section class="ecran" id="corpus">
|
||
<div class="app">
|
||
<aside class="nav">
|
||
<div class="logo"><i>♦</i> SIOP</div>
|
||
<div class="groupe">Ressources</div>
|
||
<a href="#">Stock & achats</a>
|
||
<a href="#">Tiers</a>
|
||
<a class="actif" href="#">Fichiers</a>
|
||
</aside>
|
||
<div class="contenu">
|
||
<div class="entete">
|
||
<h2>Bibliothèque — corpus de l'assistant</h2>
|
||
<span class="fin">6 documents · 5 indexés · 214 bilans codés inclus</span>
|
||
<button class="btn" style="margin-left:12px">Réindexer tout</button>
|
||
</div>
|
||
<div class="avert">🛡 Loi 09-08 — anonymisation à l'ingestion : noms, téléphones et e-mails des
|
||
personnes ne sont JAMAIS envoyés dans les index ni aux modèles.</div>
|
||
<div class="carte" style="padding:0">
|
||
<table>
|
||
<thead><tr><th>Document</th><th>Rattaché à</th><th>Indexation</th><th>Corpus</th></tr></thead>
|
||
<tbody>
|
||
<tr><td><b>Notice Otis Gen2 Premier.pdf</b></td><td>Asc. A1</td>
|
||
<td><span class="st ok">indexé · 17 juil. 09:12 · 38 extraits</span></td>
|
||
<td><span class="interrupteur"></span></td></tr>
|
||
<tr><td><b>Schindler 3300 — manuel.pdf</b></td><td>Asc. B1 · B2</td>
|
||
<td><span class="st ok">indexé · 17 juil. 09:12 · 51 extraits</span></td>
|
||
<td><span class="interrupteur"></span></td></tr>
|
||
<tr><td><b>Certificat parachute 2026.pdf</b></td><td>Asc. A1</td>
|
||
<td><span class="st ok">indexé · 17 juil. 09:13 · 4 extraits</span></td>
|
||
<td><span class="interrupteur"></span></td></tr>
|
||
<tr><td><b>Notice KONE MonoSpace.pdf</b></td><td>MC-1</td>
|
||
<td><span class="st encours">indexation en cours…</span></td>
|
||
<td><span class="interrupteur"></span></td></tr>
|
||
<tr><td><b>photo-guide-frottement.jpg</b></td><td>OT-2026-0341</td>
|
||
<td><span class="st exclu">image — non indexable</span></td>
|
||
<td><span class="interrupteur off"></span></td></tr>
|
||
<tr><td><b>Contrat cadre SPELEV 2026.pdf</b></td><td>Tour Atlas</td>
|
||
<td><span class="st exclu">exclu par l'admin</span></td>
|
||
<td><span class="interrupteur off"></span></td></tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
<div class="carte">
|
||
<h3>Historiques inclus</h3>
|
||
<div style="font-size:13px;color:var(--encre-2)">214 bilans d'intervention codés (R2→R4),
|
||
anonymisés — c'est ce qui permet « sur votre parc, ce réglage a déjà été appliqué… ».</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ═══ 6 · VOIX (OPTION) ═══ -->
|
||
<p class="note-ecran" data-note="voix" hidden><b>Intention :</b> l'option « si budget temps » du
|
||
cadrage : dicter au lieu de taper, mains sales sur le palier. L'audio est transcrit puis
|
||
<b>PURGÉ immédiatement</b> (loi 09-08) — le bandeau le dit au moment même. La transcription devient la
|
||
description libre de l'écran 4 : même circuit, même validation humaine. <b>Amendement (22/07) :</b>
|
||
une fois relue et jointe à l'OT, cette description vit dans le bilan (champ note) — et, à la clôture,
|
||
rejoint le corpus de l'assistant comme les autres bilans, anonymisée par le même pipeline (D4). Le
|
||
technicien le sait dès l'écran de relecture : rien de cité n'est caché a posteriori.</p>
|
||
<section class="ecran" id="voix">
|
||
<div class="tels">
|
||
<div class="tel">
|
||
<div class="encoche"><i></i></div>
|
||
<div class="legende">Dictée — pendant l'enregistrement</div>
|
||
<div class="ecran-tel">
|
||
<div class="entete-tel"><i>♦</i> ‹ Décrire l'intervention</div>
|
||
<div class="carte-tel" style="align-items:center;gap:12px;padding:22px 12px">
|
||
<div class="micro">🎙</div>
|
||
<div class="onde">
|
||
<i style="height:8px"></i><i style="height:18px"></i><i style="height:12px"></i>
|
||
<i style="height:22px"></i><i style="height:10px"></i><i style="height:16px"></i>
|
||
<i style="height:7px"></i><i style="height:20px"></i><i style="height:11px"></i>
|
||
</div>
|
||
<div style="font-size:13px;color:var(--encre-2);text-align:center">« …cellule encrassée,
|
||
j'ai nettoyé la barrière et réglé le contact… »</div>
|
||
<div class="btn-tel" style="background:var(--danger);width:100%">■ Terminer la dictée</div>
|
||
</div>
|
||
<div class="carte-tel">
|
||
<h4>Confidentialité (loi 09-08)</h4>
|
||
<div style="font-size:12px;color:var(--encre-2)">🛡 L'audio est transcrit puis
|
||
<b style="color:var(--encre)">supprimé immédiatement</b> — seule la transcription (que vous
|
||
relisez) est conservée, dans l'OT. Dictée <b style="color:var(--encre)">opt-in</b> :
|
||
jamais d'écoute sans ce bouton.</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="tel">
|
||
<div class="encoche"><i></i></div>
|
||
<div class="legende">Après — transcription relue, audio purgé</div>
|
||
<div class="ecran-tel">
|
||
<div class="entete-tel"><i>♦</i> ‹ Décrire l'intervention</div>
|
||
<div class="carte-tel">
|
||
<h4>Transcription — relisez avant d'envoyer</h4>
|
||
<div style="border:1.5px solid var(--bordure-forte);border-radius:9px;background:var(--surface);padding:9px;font-size:12.5px">
|
||
Porte cabine qui rebondissait à la fermeture au 3ᵉ, cellule encrassée, nettoyage de la
|
||
barrière et réglage du contact NC-31, essais concluants sur dix cycles.
|
||
</div>
|
||
<div style="font-size:11px;color:var(--st-termine);font-weight:700">✓ Audio purgé (2,4 s après transcription)</div>
|
||
</div>
|
||
<div class="carte-tel">
|
||
<h4>Et ensuite</h4>
|
||
<div style="display:flex;flex-direction:column;gap:8px">
|
||
<div class="btn-tel contour">✨ Suggérer les codes depuis ce texte</div>
|
||
<div class="btn-tel">Joindre la description à l'OT</div>
|
||
</div>
|
||
<div style="font-size:11px;color:var(--encre-3)">🛡 À la clôture de l'OT, ce texte (anonymisé)
|
||
rejoindra le corpus de l'assistant — comme les bilans déjà codés, pour aider les prochaines
|
||
interventions sur ce parc.</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<script>
|
||
(function(){
|
||
var onglets=document.querySelectorAll('.revue .onglets button');
|
||
var ecrans=document.querySelectorAll('.ecran');
|
||
var notes=document.querySelectorAll('.note-ecran');
|
||
onglets.forEach(function(b){b.addEventListener('click',function(){
|
||
onglets.forEach(function(x){x.setAttribute('aria-selected','false')});
|
||
b.setAttribute('aria-selected','true');
|
||
var cible=b.dataset.cible;
|
||
ecrans.forEach(function(e){e.classList.toggle('actif',e.id===cible)});
|
||
notes.forEach(function(n){n.hidden=(n.dataset.note!==cible)});
|
||
window.scrollTo({top:0});
|
||
})});
|
||
var ordre=['auto','light','dark'];var i=0;
|
||
var bt=document.getElementById('btn-theme');
|
||
bt.addEventListener('click',function(){
|
||
i=(i+1)%3;var m=ordre[i];
|
||
if(m==='auto'){document.documentElement.removeAttribute('data-theme')}
|
||
else{document.documentElement.setAttribute('data-theme',m)}
|
||
bt.textContent='Thème : '+(m==='auto'?'auto':(m==='light'?'clair':'sombre'));
|
||
});
|
||
})();
|
||
</script>
|
||
</body>
|
||
</html>
|