Upload templates/index.html with huggingface_hub

templates/index.html

@@ -638,20 +638,20 @@ button:disabled {
 /* ================= LÉGENDE HEATMAP COMPACTE (RÉDUITE) ================= */
 .compact-enriched-legend {
   background: white;
-  padding: 10px 15px; /* Réduit de 15px à 10px en haut/bas */
+  padding: 15px;
   border-radius: 10px;
   border: 1px solid #e0e0e0;
-  margin: 10px 0; /* Réduit de 15px à 10px */
-  height: 50px; /* Réduit de 60px à 50px */
+  margin: 10px 0;
+  height: auto;
   display: flex;
-  align-items: center;
+  align-items: flex-start;
   justify-content: space-between;
 }
 
 .compact-legend-section h5 {
   color: #1976D2;
-  margin: 0; /* Supprimé margin-bottom et margin-top */
-  font-size: 12px; /* Réduit de 14px à 12px */
+  margin: 0 0 10px 0;
+  font-size: 14px;
   display: flex;
   align-items: center;
   gap: 6px;
@@ -662,30 +662,34 @@ button:disabled {
   padding: 0;
   display: flex;
   flex-direction: column;
-  gap: 5px; /* Espacement réduit */
+  gap: 5px;
+  width: 100%;
 }
 
 /* Grille de légende compacte sur une seule ligne */
 .compact-legend-grid {
-  display: flex; /* Changé de grid à flex pour une seule ligne */
-  gap: 5px; /* Réduit de 8px à 5px */
-  flex-wrap: nowrap;
+  display: flex;
+  gap: 10px;
+  flex-wrap: wrap;
 }
 
 .compact-legend-item-small {
   display: flex;
   align-items: center;
-  gap: 3px; /* Réduit de 6px à 3px */
-  font-size: 9px; /* Réduit de 11px à 9px */
+  gap: 5px;
+  font-size: 11px;
   white-space: nowrap;
+  padding: 4px 8px;
+  background: #f8f9fa;
+  border-radius: 4px;
 }
 
 .compact-legend-color-small {
-  width: 12px; /* Réduit de 16px à 12px */
-  height: 12px; /* Réduit de 16px à 12px */
-  border-radius: 3px; /* Réduit de 4px à 3px */
-  border: 1px solid white; /* Réduit de 2px à 1px */
-  box-shadow: 0 1px 2px rgba(0,0,0,0.1); /* Ombre plus légère */
+  width: 14px;
+  height: 14px;
+  border-radius: 3px;
+  border: 1px solid white;
+  box-shadow: 0 1px 2px rgba(0,0,0,0.1);
 }
 
 /* ================= INDICATEURS DE PERSÉVÉRANCE COMPACTS ================= */
@@ -702,7 +706,6 @@ button:disabled {
   flex-direction: column;
   gap: 8px;
   margin-bottom: 10px;
-   margin-top: 1px;      /* ou 0 si tu veux coller */
 }
 
 .compact-indicator {
@@ -1689,7 +1692,7 @@ textarea:focus {
         </div>
       </div>
 
-      <!-- HEATMAP COMPACTE -->
+      <!-- HEATMAP COMPACTE AVEC TITRES ALIGNÉS -->
       <div class="compact-heatmap-and-indicators">
         <h3>🔥 Heatmap d'activité - Analyse de la persistance et du management de l'effort (persévérance)</h3>
         
@@ -1708,33 +1711,35 @@ textarea:focus {
               </div>
               
               <!-- Canvas pour le heatmap -->
-              <canvas id="heatmap" width="800" height="250" style="max-width: 100%; height: auto;"></canvas>
+              <canvas id="heatmap" width="800" height="350" style="max-width: 100%; height: auto;"></canvas>
               
               <!-- Légende des niveaux d'activité compacte -->
               <div class="compact-enriched-legend">
                 <div class="compact-legend-section">
-                  <h5>📈 Niveaux d'activité</h5>
-                </div>
-                <div class="compact-legend-grid">
-                  <div class="compact-legend-item-small">
-                    <div class="compact-legend-color-small" style="background:#EBEDF0;"></div>
-                    <span>Aucune</span>
-                  </div>
-                  <div class="compact-legend-item-small">
-                    <div class="compact-legend-color-small" style="background:#C6E48B;"></div>
-                    <span>Faible</span>
-                  </div>
-                  <div class="compact-legend-item-small">
-                    <div class="compact-legend-color-small" style="background:#7BC96F;"></div>
-                    <span>Moyenne</span>
-                  </div>
-                  <div class="compact-legend-item-small">
-                    <div class="compact-legend-color-small" style="background:#239A3B;"></div>
-                    <span>Élevée</span>
-                  </div>
-                  <div class="compact-legend-item-small">
-                    <div class="compact-legend-color-small" style="background:#196127;"></div>
-                    <span>Intense</span>
+                  <h5 style="margin: 0 0 10px 0; font-size: 14px; color: #1976D2; display: flex; align-items: center; gap: 6px;">
+                    <span>📈</span> Niveaux d'activité
+                  </h5>
+                  <div class="compact-legend-grid">
+                    <div class="compact-legend-item-small">
+                      <div class="compact-legend-color-small" style="background:#EBEDF0;"></div>
+                      <span>Aucune</span>
+                    </div>
+                    <div class="compact-legend-item-small">
+                      <div class="compact-legend-color-small" style="background:#C6E48B;"></div>
+                      <span>Faible</span>
+                    </div>
+                    <div class="compact-legend-item-small">
+                      <div class="compact-legend-color-small" style="background:#7BC96F;"></div>
+                      <span>Moyenne</span>
+                    </div>
+                    <div class="compact-legend-item-small">
+                      <div class="compact-legend-color-small" style="background:#239A3B;"></div>
+                      <span>Élevée</span>
+                    </div>
+                    <div class="compact-legend-item-small">
+                      <div class="compact-legend-color-small" style="background:#196127;"></div>
+                      <span>Intense</span>
+                    </div>
                   </div>
                 </div>
               </div>
@@ -1744,60 +1749,47 @@ textarea:focus {
           <!-- Colonne droite : Indicateurs de la persistance et du management de l'effort -->
           <div class="compact-heatmap-right">
             <div class="compact-persistence-analysis" id="compact-persistenceAnalysis">
-              <h5>🧭 Indicateurs de la gestion du temps et régularité</h5>
+              <h5 style="margin: 0 0 15px 0; font-size: 14px; color: #1976D2; display: flex; align-items: center; gap: 6px;">
+                <span>🧭</span> Indicateurs de la gestion du temps et régularité
+              </h5>
               <div class="compact-persistence-indicators">
                 <div class="compact-indicator">
-  <span class="compact-indicator-dot" style="background:#FF6B6B;"></span>
-  <span>
-    Régularité du travail :
-    <strong id="compact-regularityScore">-</strong>
-  </span>
-</div>
+                  <span class="compact-indicator-dot" style="background:#FF6B6B;"></span>
+                  <span>
+                    Régularité du travail :
+                    <strong id="compact-regularityScore">-</strong>
+                  </span>
+                </div>
 
-<div style="margin-left: 18px; margin-top: 0; font-size: 12px; color: #888;">
-  La constance de l’activité de l’apprenant dans le temps.
-</div>
+                <div style="margin-left: 18px; margin-top: 0; font-size: 12px; color: #888;">
+                  La constance de l'activité de l'apprenant dans le temps.
+                </div>
 
-       
-       
-            <div class="compact-indicator"> 
-  <span class="compact-indicator-dot" style="background:#FFD166;"></span>
-  <span>Gestion échéances : <strong id="compact-deadlineScore">-</strong></span>
-</div>
+                <div class="compact-indicator"> 
+                  <span class="compact-indicator-dot" style="background:#FFD166;"></span>
+                  <span>Gestion échéances : <strong id="compact-deadlineScore">-</strong></span>
+                </div>
 
-<div style="margin-left: 18px; margin-top: 0; font-size: 12px; color: #888;">
-  La capacité de l'apprenant à respecter les délais pédagogiques.
-</div>
+                <div style="margin-left: 18px; margin-top: 0; font-size: 12px; color: #888;">
+                  La capacité de l'apprenant à respecter les délais pédagogiques.
+                </div>
 
-                
-                
-                
-                         
-       <div class="compact-indicator" style="margin-top: 10px;">
-  <span class="compact-indicator-dot" style="background:#4ECDC4;"></span>
-  <span>
-    <strong>Schéma d'effort :</strong>
-    <span id="compact-effortPattern">-  </span>
-  </span>
-</div>
+                <div class="compact-indicator" style="margin-top: 10px;">
+                  <span class="compact-indicator-dot" style="background:#4ECDC4;"></span>
+                  <span>
+                    <strong>Schéma d'effort :</strong>
+                    <span id="compact-effortPattern">-  </span>
+                  </span>
+                </div>
 
-<div style="margin-left: 18px; margin-top: 0; font-size: 12px; color: #888;">
-La dynamique temporelle de l'effort.
+                <div style="margin-left: 18px; margin-top: 0; font-size: 12px; color: #888;">
+                  La dynamique temporelle de l'effort.
                 </div>
-   
-                
               </div>
               
-              
-
-<div style="text-align: center;">
-  <strong>Persistance et gestion des efforts :</strong>
-  <span id="compact-regularityText">Analyse en cours...</span>
-</div>
-
-
-
-
+              <div style="text-align: center; margin-top: 15px;">
+                <strong>Persistance et gestion des efforts :</strong>
+                <span id="compact-regularityText">Analyse en cours...</span>
               </div>
             </div>
           </div>
@@ -2536,7 +2528,7 @@ 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 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."
   };
   
@@ -2646,8 +2638,8 @@ function loadScenario(index) {
   // Mettre à jour le message bot radar compact
   updateCompactRadarBotMessage(s);
 
-  // Mettre à jour la heatmap enrichie compacte
-  drawCompactEnrichedHeatmap(s);
+  // Mettre à jour la heatmap enrichie compacte avec les axes
+  drawCompactEnrichedHeatmapWithAxes(s);
   
   // Mettre à jour la persévérance spécifique au profil
   updatePerseveranceProfile(s.title);
@@ -2770,7 +2762,6 @@ function updateCompactRadarMetricsGrid() {
   radarMetrics.forEach(metric => {
     // Déterminer la classe de couleur selon la valeur
     let colorClass = "";
-;
     if (metric.value >= 70) colorClass = "high";
     else if (metric.value >= 40) colorClass = "medium";
     else colorClass = "low";
@@ -2842,8 +2833,8 @@ function updateCompactRadarBotMessage(scenario) {
   });
 }
 
-// Dessiner la heatmap enrichie compacte
-function drawCompactEnrichedHeatmap(scenario) {
+// Dessiner la heatmap enrichie compacte avec axes
+function drawCompactEnrichedHeatmapWithAxes(scenario) {
   const canvas = document.getElementById("heatmap");
   if (!canvas) return;
   
@@ -2940,24 +2931,66 @@ function drawCompactEnrichedHeatmap(scenario) {
   ctx.font = "bold 14px Arial";
   ctx.fillStyle = "#1976D2";
   ctx.textAlign = "center";
-  ctx.fillText(`${scenarioInfo.emoji} ${scenarioInfo.title}`, canvas.width / 2, 20);
+  ctx.fillText(`${scenarioInfo.emoji} ${scenarioInfo.title}`, canvas.width / 2, 25);
   
   ctx.font = "12px Arial";
   ctx.fillStyle = "#666";
-  ctx.fillText(`${scenarioInfo.pattern}`, canvas.width / 2, 40);
+  ctx.fillText(`${scenarioInfo.pattern}`, canvas.width / 2, 45);
   
   // Générer les données d'activité selon le scénario
   const activityData = generateCompactPersistenceData(scenario.id, totalDays);
   
-  // Dessiner la heatmap
+  // Dessiner la heatmap avec axes
   const colors = ["#EBEDF0", "#C6E48B", "#7BC96F", "#239A3B", "#196127"];
   
+  // Position de départ de la grille
+  const startX = 60;
+  const startY = 80;
+  
+  // Ajouter les labels des jours (à gauche)
+  ctx.font = "11px Arial";
+  ctx.fillStyle = "#555";
+  ctx.textAlign = "right";
+  ctx.textBaseline = "middle";
+  
+  for (let weekday = 0; weekday < 7; weekday++) {
+    const y = startY + weekday * (cellSize + padding) + cellSize / 2;
+    ctx.fillText(days[weekday], startX - 10, y);
+  }
+  
+  // Ajouter les numéros des semaines (en haut)
+  ctx.font = "11px Arial";
+  ctx.fillStyle = "#555";
+  ctx.textAlign = "center";
+  ctx.textBaseline = "bottom";
+  
+  for (let week = 0; week < weeks; week++) {
+    const x = startX + week * (cellSize * 7 + padding * 7) + (cellSize * 7) / 2;
+    ctx.fillText(`S${week + 1}`, x, startY - 5);
+  }
+  
+  // Ajouter un titre pour les axes
+  ctx.font = "10px Arial";
+  ctx.fillStyle = "#777";
+  ctx.textAlign = "center";
+  
+  // Titre pour les semaines
+  ctx.fillText("Semaines", canvas.width / 2, startY - 15);
+  
+  // Titre pour les jours
+  ctx.save();
+  ctx.translate(startX - 25, startY + (cellSize * 7) / 2);
+  ctx.rotate(-Math.PI / 2);
+  ctx.fillText("Jours", 0, 0);
+  ctx.restore();
+  
+  // Dessiner les cellules
   for (let day = 0; day < totalDays; day++) {
     const week = Math.floor(day / 7);
     const weekday = day % 7;
     
-    const x = 30 + week * (cellSize * 7 + padding * 7) + weekday * (cellSize + padding);
-    const y = 60 + weekday * (cellSize + padding);
+    const x = startX + week * (cellSize * 7 + padding * 7) + weekday * (cellSize + padding);
+    const y = startY + weekday * (cellSize + padding);
     
     const intensity = activityData[day];
     
@@ -3571,7 +3604,6 @@ function initTrustSave(){
     
     // Récupérer les informations conditionnelles
     let evaluatorName = "";
-;
     let evaluatorRole = "";
     let expertiseLevel = "";
     let messageMastery = "";
@@ -3877,7 +3909,7 @@ function changePersistenceAnalysis() {
   if (!currentScenario) return;
   
   // Redessiner la heatmap avec le mode sélectionné
-  drawCompactEnrichedHeatmap(currentScenario);
+  drawCompactEnrichedHeatmapWithAxes(currentScenario);
   
   // Ajouter une annotation selon le mode
   const canvas = document.getElementById("heatmap");
@@ -3941,4 +3973,4 @@ window.loadScenario = loadScenario;
 </div>
 
 </body>
-</html>      
+</html>