ASPIC/contact_ia_test.html

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ASPIC — Test IA création de contact</title>
<link rel="icon" href="mevelia-icone.png">
<style>
  /* contact_ia_test.html — 4 septembre 2026
     Outil de mise au point interne (PAS un écran utilisateur), voir
     contact_ia_interprete.php pour le détail du choix d'architecture.
     Page autonome, volontairement séparée d'ecran_fond.html/micro_test.js :
     la collecte brute de dictées (banque de corpus, table ASP_DicteesTest)
     continue de tourner sans interférence — cette page est un banc d'essai
     à part pour la première étape d'interprétation (LLM à sortie
     structurée), qu'on peut abandonner ou retravailler sans rien défaire
     ailleurs.
     Look "terminal" repris de la fenêtre de micro_test.js (fond noir, police
     monospace) — c'est ce rendu qui a plu à Jean-Marc : on est "dans le cœur
     de la bête", pas dans un écran utilisateur poli, ce qui prépare
     psychologiquement à un outil moins accompagné qu'un vrai formulaire.
     Correction du 4 septembre 2026 (soir), Jean-Marc : « Valider » ne crée
     surtout PAS de contact réel. Ça enregistre seulement l'essai (texte brut
     + interprétation du LLM + correction éventuelle) dans une table à part
     (ASP_PropositionsContact, via contact_ia_valide.php), en vue d'une
     évolution où chaque instruction vocale validée donnera naissance à un
     post-it pour un assistant — pas encore câblé, ASP_ToDoList ne sachant
     pas encore attribuer une tâche à un assistant (voir "reste à faire" du
     journal de développement). */
  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;height:100%;background:#111;color:#ddd;
    font-family:"Segoe UI","Arial",sans-serif;}
  #page{max-width:720px;margin:0 auto;padding:24px 16px 60px;}
  h1{font-size:16px;color:#888;font-weight:normal;margin:0 0 4px;}
  .sous-titre{font-size:12px;color:#666;margin:0 0 20px;}

  /* -------- Terminal (dictée brute) -------- */
  #terminal{background:#000;border:1px solid #333;border-radius:6px;
    font-family:"Courier New",Consolas,monospace;overflow:hidden;
    margin-bottom:18px;}
  #terminal .entete{color:#888;font-size:11px;padding:6px 10px;
    border-bottom:1px solid #222;}
  #terminal .controles{display:flex;align-items:center;gap:8px;
    padding:8px 10px;border-bottom:1px solid #222;flex-wrap:wrap;}
  #terminal .controles button{font:inherit;font-size:13px;
    background:#1a1a1a;color:#ccc;border:1px solid #444;border-radius:4px;
    padding:6px 14px;cursor:pointer;}
  #terminal .controles button.actif{background:#2a4d2a;color:#bdf7bd;
    border-color:#3a6d3a;}
  #terminal .controles button:disabled{opacity:.4;cursor:default;}
  #terminal .controles .etat{margin-left:auto;color:#777;font-size:11px;}
  #terminal .lignes{min-height:80px;max-height:260px;overflow-y:auto;
    padding:10px;color:#fff;font-size:14px;line-height:1.6;
    white-space:pre-wrap;}
  #terminal .lignes .en-cours{color:#8a8a8a;font-style:italic;}
  #terminal .lignes .erreur{color:#e14a5c;}

  /* -------- Formulaire de champs structurés -------- */
  #resultat{display:none;}
  #resultat.visible{display:block;}
  #resultat .bloc{background:#1a1a1a;border:1px solid #333;border-radius:6px;
    padding:14px 16px;margin-bottom:14px;}
  #resultat .bloc h2{font-size:12px;color:#888;font-weight:normal;
    text-transform:uppercase;letter-spacing:.05em;margin:0 0 12px;}
  .champ{margin-bottom:10px;}
  .champ label{display:block;font-size:11px;color:#999;margin-bottom:3px;}
  .champ input,.champ select,.champ textarea{width:100%;font:inherit;
    font-size:13px;background:#0d0d0d;color:#eee;border:1px solid #444;
    border-radius:4px;padding:6px 8px;}
  .champ input.interprete,.champ select.interprete{border-color:#3a6d3a;}
  .champ textarea{min-height:60px;resize:vertical;font-family:inherit;}
  .grille2{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
  #bouton-creer{font:inherit;font-size:14px;background:#2a4d2a;color:#bdf7bd;
    border:1px solid #3a6d3a;border-radius:5px;padding:10px 20px;
    cursor:pointer;}
  #bouton-creer:disabled{opacity:.4;cursor:default;}
  #message-creation{margin-top:10px;font-size:13px;}
  #message-creation.ok{color:#7be07b;}
  #message-creation.ko{color:#e14a5c;}
</style>
</head>
<body>
<div id="page">
  <h1>Création de contact — essai d'interprétation IA</h1>
  <p class="sous-titre">Outil de mise au point interne, pas un écran utilisateur. Dicte librement comme si tu créais un contact, puis clique sur « Interpréter ».</p>

  <div id="terminal">
    <div class="entete">Dictée brute</div>
    <div class="controles">
      <button type="button" id="bouton-micro">🎤 Micro</button>
      <button type="button" id="bouton-interpreter" disabled>Interpréter →</button>
      <button type="button" id="bouton-reinitialiser">Réinitialiser</button>
      <span class="etat" id="etat-micro"></span>
    </div>
    <div class="lignes" id="zone-lignes"></div>
  </div>

  <div id="resultat">
    <div class="bloc">
      <h2>Identité</h2>
      <div class="grille2">
        <div class="champ"><label for="f-nom">Nom</label><input id="f-nom" data-champ="CNT_Nom"></div>
        <div class="champ"><label for="f-prenom">Prénom</label><input id="f-prenom" data-champ="CNT_Prenom"></div>
      </div>
      <div class="grille2">
        <div class="champ"><label for="f-statut">Statut</label>
          <select id="f-statut" data-champ="CNT_Statut"><option value="">—</option></select>
        </div>
        <div class="champ"><label for="f-profession">Profession</label>
          <select id="f-profession"><option value="">—</option><option value="__nouvelle__">+ Nouvelle profession…</option></select>
        </div>
      </div>
      <div class="champ" id="bloc-nouvelle-profession" style="display:none;">
        <label for="f-profession-nouvelle">Libellé de la nouvelle profession</label>
        <input id="f-profession-nouvelle">
      </div>
    </div>

    <div class="bloc">
      <h2>Société</h2>
      <div class="grille2">
        <div class="champ"><label for="f-societe">Société</label><input id="f-societe" data-champ="CNT_Société"></div>
        <div class="champ"><label for="f-service">Service</label><input id="f-service" data-champ="CNT_Service"></div>
      </div>
      <div class="champ"><label for="f-fonction">Fonction</label><input id="f-fonction" data-champ="CNT_Fonction"></div>
      <div class="champ"><label for="f-siret">SIRET</label><input id="f-siret" data-champ="CNT_SIRET"></div>
    </div>

    <div class="bloc">
      <h2>Adresse</h2>
      <div class="champ"><label for="f-adr1">Ligne 1</label><input id="f-adr1" data-champ="CNT_AdrLig1"></div>
      <div class="champ"><label for="f-adr2">Ligne 2</label><input id="f-adr2" data-champ="CNT_AdrLig2"></div>
      <div class="champ"><label for="f-adr3">Ligne 3</label><input id="f-adr3" data-champ="CNT_AdrLig3"></div>
      <div class="grille2">
        <div class="champ"><label for="f-cp">Code postal</label><input id="f-cp" data-champ="CNT_AdrCP"></div>
        <div class="champ"><label for="f-ville">Ville</label><input id="f-ville" data-champ="CNT_AdrVille"></div>
      </div>
    </div>

    <div class="bloc">
      <h2>Coordonnées</h2>
      <div class="grille2">
        <div class="champ"><label for="f-tel">Téléphone</label><input id="f-tel" data-champ="CNT_Tel"></div>
        <div class="champ"><label for="f-portable">Portable</label><input id="f-portable" data-champ="CNT_Portable"></div>
      </div>
      <div class="champ"><label for="f-mail">Mail</label><input id="f-mail" data-champ="CNT_Mail"></div>
    </div>

    <div class="bloc">
      <h2>Notes (contexte non rattaché à un champ précis)</h2>
      <div class="champ"><textarea id="f-notes" data-champ="CNT_Notes"></textarea></div>
    </div>

    <button type="button" id="bouton-creer">Valider</button>
    <p class="sous-titre">« Valider » n'enregistre PAS de contact réel — seulement cet essai (brut + interprétation + ta correction) pour analyse.</p>
    <div id="message-creation"></div>
  </div>
</div>
<script src="contact_ia_test.js"></script>
</body>
</html>