Upload templates/index.html with huggingface_hub

templates/index.html

@@ -112,6 +112,158 @@ h3::before {
   display: block;
 }
 
+/* ================= NOUVEL ONGLET ACCUEIL ================= */
+#tab-welcome {
+  padding: 20px;
+}
+
+.welcome-header {
+  text-align: center;
+  margin-bottom: 40px;
+  padding-bottom: 30px;
+  border-bottom: 2px solid #e3f2fd;
+}
+
+.welcome-title {
+  font-size: 2.2em;
+  color: #1976D2;
+  margin-bottom: 15px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 15px;
+}
+
+.welcome-subtitle {
+  font-size: 1.2em;
+  color: #666;
+  max-width: 800px;
+  margin: 0 auto 25px;
+  line-height: 1.6;
+}
+
+.welcome-card {
+  background: linear-gradient(135deg, #E3F2FD, #BBDEFB);
+  border-radius: 15px;
+  padding: 30px;
+  margin-bottom: 30px;
+  border-left: 6px solid #1976D2;
+  box-shadow: 0 5px 15px rgba(0,0,0,0.05);
+}
+
+.welcome-card h4 {
+  color: #1976D2;
+  margin-top: 0;
+  margin-bottom: 20px;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  font-size: 1.4em;
+}
+
+.welcome-card p {
+  line-height: 1.7;
+  color: #333;
+  margin-bottom: 15px;
+}
+
+.welcome-card ul {
+  padding-left: 20px;
+  margin: 15px 0;
+}
+
+.welcome-card li {
+  margin-bottom: 10px;
+  line-height: 1.6;
+  color: #444;
+}
+
+.welcome-features {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+  gap: 20px;
+  margin: 30px 0;
+}
+
+.feature-item {
+  background: white;
+  border-radius: 12px;
+  padding: 25px;
+  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
+  border-top: 4px solid #1976D2;
+  transition: transform 0.3s;
+}
+
+.feature-item:hover {
+  transform: translateY(-5px);
+  box-shadow: 0 8px 20px rgba(0,0,0,0.12);
+}
+
+.feature-icon {
+  font-size: 32px;
+  margin-bottom: 15px;
+  color: #1976D2;
+}
+
+.feature-title {
+  font-size: 1.2em;
+  font-weight: 600;
+  color: #1976D2;
+  margin-bottom: 12px;
+}
+
+.feature-description {
+  color: #555;
+  line-height: 1.6;
+  font-size: 0.95em;
+}
+
+.how-to-start {
+  background: linear-gradient(135deg, #E8F5E9, #C8E6C9);
+  border-radius: 15px;
+  padding: 30px;
+  margin-top: 40px;
+  border-left: 6px solid #43A047;
+}
+
+.how-to-start h4 {
+  color: #2E7D32;
+}
+
+.step-list {
+  counter-reset: step-counter;
+  margin: 20px 0;
+}
+
+.step-item {
+  counter-increment: step-counter;
+  margin-bottom: 20px;
+  padding-left: 50px;
+  position: relative;
+}
+
+.step-item::before {
+  content: counter(step-counter);
+  position: absolute;
+  left: 0;
+  top: 0;
+  background: #1976D2;
+  color: white;
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: bold;
+}
+
+.step-item strong {
+  color: #1976D2;
+  display: block;
+  margin-bottom: 5px;
+}
+
 /* ================= NAVIGATION ================= */
 .nav {
   display: flex;
@@ -1293,6 +1445,10 @@ textarea:focus {
     gap: 10px;
     padding: 12px;
   }
+  
+  .welcome-features {
+    grid-template-columns: repeat(2, 1fr);
+  }
 }
 
 @media (max-width: 768px) {
@@ -1425,6 +1581,20 @@ textarea:focus {
   .compact-heatmap-container {
     flex-direction: column;
   }
+  
+  .welcome-features {
+    grid-template-columns: 1fr;
+  }
+  
+  .welcome-title {
+    font-size: 1.8em;
+    flex-direction: column;
+    gap: 10px;
+  }
+  
+  .feature-item {
+    padding: 20px;
+  }
 }
 
 @media (max-width: 480px) {
@@ -1511,7 +1681,10 @@ textarea:focus {
   <!-- SYSTEME D'ONGLETS -->
   <div class="tabs-container">
     <div class="tabs">
-      <button class="tab-btn active" data-tab="tab-evaluator">
+      <button class="tab-btn active" data-tab="tab-welcome">
+        <span>🏠</span> Accueil
+      </button>
+      <button class="tab-btn" data-tab="tab-evaluator">
         <span>👤</span> Évaluateur (RGPD)
       </button>
       <button class="tab-btn" data-tab="tab-dashboard">
@@ -1525,8 +1698,126 @@ textarea:focus {
       </button>
     </div>
 
-    <!-- ONGLET 1: INFORMATIONS ÉVALUATEUR GDPR -->
-    <div id="tab-evaluator" class="tab-content active">
+    <!-- NOUVEL ONGLET 1: ACCUEIL ET PRÉSENTATION -->
+    <div id="tab-welcome" class="tab-content active">
+      <div class="welcome-header">
+        <h1 class="welcome-title">🎓 Dashboard Réflexif – ReflAgent</h1>
+        <p class="welcome-subtitle">
+          Outil d'évaluation qualitative des messages auto-réflexifs générés par IA selon les profils d'apprenants
+        </p>
+      </div>
+      
+      <div class="welcome-card">
+        <h4><span>🎯</span> Objectif de l'application</h4>
+        <p>
+          Cette plateforme permet d'<strong>évaluer la qualité des messages auto-réflexifs</strong> générés par <strong>ReflAgent</strong>, 
+          un tuteur pédagogique personnalisé basé sur l'IA, conçu pour favoriser l'apprentissage auto-régulé (SRL) 
+          en renforçant la conscience métacognitive par un accompagnement réflexif.
+        </p>
+        
+        <h4 style="margin-top: 25px;"><span>🤖</span> Qu'est-ce que ReflAgent ?</h4>
+        <p>
+          <strong>ReflAgent</strong> est un compagnon tutoriel IA sensible aux profils, conçu pour favoriser 
+          l'apprentissage auto-régulé (SRL) en améliorant la conscience métacognitive grâce à un soutien réflexif.
+        </p>
+        
+        <p>ReflAgent fournit un feedback visant à stimuler l’apprenant et à maintenir son engagement. En cas de désengagement, il propose un feedback permettant à l’apprenant de réviser sa méthode de travail et sa stratégie d’apprentissage, en mettant l’accent sur la gestion de l’effort et la persistance.</p>
+       
+        
+        <p>
+          ReflAgent génère des retours réflexifs personnalisés en combinant des modèles de réponses 
+          prédéfinis avec une génération dynamique par grands modèles de langage (LLM) qui est conditionnée par les profils d'apprenants avec leurs indicateurs d'apprentissage.
+        </p>
+        
+        
+        <p>
+          Les messages réflexifs adressent les dimensions clés du SRL, incluant :
+          <strong>la conscience du risque, la régulation émotionnelle, les défis cognitifs et l'engagement</strong>.
+        </p>
+      </div>
+      
+      <h3>📋 Présentation des volets de l'application</h3>
+      
+      <div class="welcome-features">
+        <div class="feature-item">
+          <div class="feature-icon">👤</div>
+          <div class="feature-title">Évaluateur (RGPD)</div>
+          <div class="feature-description">
+            <strong>Authentification et consentement RGPD</strong><br>
+            Définissez votre profil d'évaluateur, votre niveau d'expertise et donnez votre consentement 
+            pour le traitement de vos données personnelles selon le règlement européen.
+          </div>
+        </div>
+        
+        <div class="feature-item">
+          <div class="feature-icon">📊</div>
+          <div class="feature-title">Dashboard Étudiant</div>
+          <div class="feature-description">
+            <strong>Visualisation complète du profil d'apprentissage</strong><br>
+            Explorez le manifeste de l'étudiant, ses compétences, son engagement via un radar interactif, 
+            et son activité via une heatmap temporelle avec indicateurs de persévérance.
+          </div>
+        </div>
+        
+        <div class="feature-item">
+          <div class="feature-icon">🤖</div>
+          <div class="feature-title">Message Réflexif & Évaluation</div>
+          <div class="feature-description">
+            <strong>Évaluation des messages générés par ReflAgent</strong><br>
+            Analysez les messages auto-réflexifs et évaluez leur qualité selon 5 métriques de confiance : 
+            Authenticité Réflexive, Alignement Empathique, Encouragement Sensible au Risque, 
+            Support aux Défis Mentaux et Support Métacognitif.
+          </div>
+        </div>
+        
+        <div class="feature-item">
+          <div class="feature-icon">📋</div>
+          <div class="feature-title">Exemple d'Analyse</div>
+          <div class="feature-description">
+            <strong>Cas d'étude avec évaluation détaillée</strong><br>
+            Découvrez un exemple concret d'analyse d'un étudiant en difficulté, avec le message réflexif 
+            généré, son évaluation métrique et des observations pédagogiques détaillées.
+          </div>
+        </div>
+      </div>
+      
+      <div class="how-to-start">
+        <h4><span>🚀</span> Comment commencer ?</h4>
+        <div class="step-list">
+          <div class="step-item">
+            <strong>Configurez votre profil d'évaluateur</strong>
+            <p>Rendez-vous dans l'onglet "Évaluateur (RGPD)" pour définir vos informations et consentements.</p>
+          </div>
+          <div class="step-item">
+            <strong>Explorez les profils d'apprenants</strong>
+            <p>Naviguez entre les 14 scénarios d'apprenants différents via les boutons de navigation.</p>
+          </div>
+          <div class="step-item">
+            <strong>Analysez les messages réflexifs</strong>
+            <p>Évaluez la qualité des messages générés par ReflAgent dans l'onglet "Message Réflexif & Évaluation".</p>
+          </div>
+          <div class="step-item">
+            <strong>Explorer l'exemple d'analyse </strong>
+            <p>Consultez l'onglet "Exemple d'Analyse" pour comprendre la méthodologie d'évaluation.</p>
+          </div>
+        </div>
+        
+        <p style="margin-top: 20px; font-style: italic; color: #2E7D32;">
+          <strong>Conseil :</strong> Commencez par explorer l'exemple d'analyse pour comprendre 
+          comment évaluer les messages avant de procéder à vos propres évaluations.
+        </p>
+      </div>
+      
+      <div style="text-align: center; margin-top: 40px; padding: 20px; background: #f8f9fa; border-radius: 10px;">
+        <p style="color: #666; font-size: 14px;">
+          <strong>Laboratoire d'informatique de l'Université du Mans</strong><br>
+          Projet de recherche sur l'apprentissage auto-régulé et l'intelligence artificielle éducative
+        </p>
+      </div>
+    </div>
+
+    <!-- ONGLET 2: INFORMATIONS ÉVALUATEUR GDPR -->
+    <div id="tab-evaluator" class="tab-content">
       <h3>👤 Informations de l'évaluateur (RGPD)</h3>
       
       <div class="evaluator-info">
@@ -1629,7 +1920,7 @@ textarea:focus {
       </div>
     </div>
 
-    <!-- ONGLET 2: DASHBOARD ÉTUDIANT COMPACT -->
+    <!-- ONGLET 3: DASHBOARD ÉTUDIANT COMPACT -->
     <div id="tab-dashboard" class="tab-content">
       <h3>📝 Manifeste étudiant</h3>
       <div id="manifest-list">
@@ -1796,7 +2087,7 @@ textarea:focus {
       </div>
     </div>
 
-    <!-- ONGLET 3: MESSAGE RÉFLEXIF ET ÉVALUATION -->
+    <!-- ONGLET 4: MESSAGE RÉFLEXIF ET ÉVALUATION -->
     <div id="tab-evaluation" class="tab-content">
       <h3>🤖 ReflAgent – Analyse & accompagnement</h3>
       <div id="reflagent">
@@ -1907,7 +2198,7 @@ textarea:focus {
       </div>
     </div>
 
-    <!-- ONGLET 4: EXEMPLE D'ANALYSE -->
+    <!-- ONGLET 5: EXEMPLE D'ANALYSE -->
     <div id="tab-example" class="tab-content">
       <h3>📋 Exemple d'Analyse – Étudiant en difficulté / évitement de l'échec : peur de l'échec supérieure à la motivation de réussite.</h3>
       
@@ -2001,9 +2292,6 @@ textarea:focus {
           </table>
         </div>
         
-        
-      
-      
     </div>
   </div>
 </div>
@@ -2140,11 +2428,9 @@ const perseveranceProfiles = {
 },
 "Étudiant actif": {
   level: "Élevée",
-  interpretation: "Forte implication et nombreux efforts, mais difficulté à maintenir l’énergie jusqu’au bout",
+  interpretation: "Forte implication et nombreux efforts, mais difficulté à maintenir l'énergie jusqu'au bout",
   color: "#4CAF50"
 }
-
-
 };
 
 // Messages de profils complets (14 profils)
@@ -2284,18 +2570,15 @@ const profileMessages = {
     { icon: "💪", text: "Persévérance visible" }
   ]
 },
-
 "Étudiant actif": {
   title: "Engagement Fort mais Énergie à Préserver",
-  message: "Tu démarres beaucoup d’activités (85%) et tu t’appuies largement sur les ressources (75%). Cet engagement montre ta motivation, mais il rend parfois difficile l’achèvement des tâches (45%). Mieux répartir tes efforts t’aidera à avancer plus sereinement.",
+  message: "Tu démarres beaucoup d'activités (85%) et tu t'appuies largement sur les ressources (75%). Cet engagement montre ta motivation, mais il rend parfois difficile l'achèvement des tâches (45%). Mieux répartir tes efforts t'aidera à avancer plus sereinement.",
   insights: [
     { icon: "⚡", text: "Engagement élevé dès le départ (85%)" },
     { icon: "📚", text: "Usage fréquent des ressources (75%)" },
-    { icon: "🧘", text: "Besoin de mieux doser l’effort" }
+    { icon: "🧘", text: "Besoin de mieux doser l'effort" }
   ]
 }
-
-
 };
 
 // ================= INIT =================
@@ -2321,6 +2604,7 @@ function initTabs() {
   const tabBtns = document.querySelectorAll('.tab-btn');
   const tabContents = document.querySelectorAll('.tab-content');
   
+  // Par défaut, le premier onglet (Accueil) est actif
   tabBtns.forEach(btn => {
     btn.addEventListener('click', () => {
       const tabId = btn.getAttribute('data-tab');
@@ -2373,11 +2657,13 @@ function initGDPR() {
   }
   
   // Écouter les changements
-  gdprAccept.addEventListener('change', updateGDPRFields);
-  gdprDecline.addEventListener('change', updateGDPRFields);
-  
-  // Initialiser
-  updateGDPRFields();
+  if (gdprAccept && gdprDecline) {
+    gdprAccept.addEventListener('change', updateGDPRFields);
+    gdprDecline.addEventListener('change', updateGDPRFields);
+    
+    // Initialiser
+    updateGDPRFields();
+  }
 }
 
 // ================= CHARGEMENT JSON =================
@@ -2560,8 +2846,8 @@ function generateReflAgentMessage(profileTitle) {
     "Étudiant acceptant l'échec": "Ton attitude face à l'échec est constructive. Utilise ces expériences pour identifier tes points d'amélioration.",
     "Étudiant inactif": "Le premier pas est le plus difficile. Choisis une seule activité simple pour commencer, sans pression.",
     "Étudiant non engagé": "Il est normal de manquer d'intérêt parfois. Cherche un aspect du cours qui pourrait te motiver davantage.",
-        "Étudiant persévérant": "Tes compétences sont solides. Fais confiance à ton potentiel et ose t'investir pleinement.",
-        "Étudiant actif": "Il est normal de manquer d'intérêt parfois. Cherche un aspect du cours qui pourrait te motiver davantage."
+    "Étudiant persévérant": "Tes compétences sont solides. Fais confiance à ton potentiel et ose t'investir pleinement.",
+    "Étudiant actif": "Il est normal de manquer d'intérêt parfois. Cherche un aspect du cours qui pourrait te motiver davantage."
   };
   
   return messages[profileTitle] || "Analyse de votre profil d'apprentissage en cours...";
@@ -2810,7 +3096,7 @@ function updateCompactRadarMetricsGrid() {
     
     // Déterminer la description
     let description = "";
-    if (metric.label.includes("Démarrage")) description = "Rapidité d'initiation de l’activité d'apprentissage";
+    if (metric.label.includes("Démarrage")) description = "Rapidité d'initiation de l'activité d'apprentissage";
     else if (metric.label.includes("Connaissances")) description = "Acquis démontrés";
     else if (metric.label.includes("Niveau moyen")) description = "Degré de maîtrise des compétences";
     else if (metric.label.includes("Taux d'erreur")) description = "Précision et attention";