Upload templates/index.html with huggingface_hub

templates/index.html

@@ -1667,7 +1667,7 @@ 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="300" style="max-width: 100%; height: auto;"></canvas>
               
               <!-- Légende des niveaux d'activité compacte -->
               <div class="compact-enriched-legend">
@@ -2777,9 +2777,10 @@ function drawCompactEnrichedHeatmap(scenario) {
   if (!canvas) return;
   
   const ctx = canvas.getContext("2d");
-  const cellSize = 15;
-  const padding = 1;
+  const cellSize = 18;
+  const padding = 2;
   const days = ["L", "M", "M", "J", "V", "S", "D"];
+  const dayNames = ["Lundi", "Mardi", "Mercredi", "Jeudi", "Vendredi", "Samedi", "Dimanche"];
   const weeks = 4;
   const totalDays = weeks * 7;
   
@@ -2866,18 +2867,45 @@ function drawCompactEnrichedHeatmap(scenario) {
     pattern: "Schéma à analyser"
   };
   
-  ctx.font = "bold 14px Arial";
+  ctx.font = "bold 16px 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.font = "14px 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);
   
+  // Labels des semaines
+  ctx.font = "bold 12px Arial";
+  ctx.fillStyle = "#333";
+  ctx.textAlign = "center";
+  ctx.textBaseline = "middle";
+  
+  for (let week = 0; week < weeks; week++) {
+    const x = 60 + week * (cellSize * 7 + padding * 7) + (cellSize * 7) / 2;
+    const y = 90;
+    ctx.fillText(`Semaine ${week + 1}`, x, y);
+  }
+  
+  // Labels des jours
+  ctx.font = "bold 11px Arial";
+  ctx.fillStyle = "#555";
+  
+  for (let day = 0; day < 7; day++) {
+    const y = 120 + day * (cellSize + padding) + cellSize / 2;
+    ctx.textAlign = "right";
+    ctx.fillText(`${days[day]}`, 55, y);
+    
+    // Version complète au survol (tooltip serait mieux)
+    ctx.font = "9px Arial";
+    ctx.fillStyle = "#888";
+    ctx.fillText(`(${dayNames[day]})`, 55, y + 10);
+  }
+  
   // Dessiner la heatmap
   const colors = ["#EBEDF0", "#C6E48B", "#7BC96F", "#239A3B", "#196127"];
   
@@ -2885,8 +2913,8 @@ function drawCompactEnrichedHeatmap(scenario) {
     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 = 60 + week * (cellSize * 7 + padding * 7) + weekday * (cellSize + padding);
+    const y = 110 + weekday * (cellSize + padding);
     
     const intensity = activityData[day];
     
@@ -2894,17 +2922,52 @@ function drawCompactEnrichedHeatmap(scenario) {
     ctx.fillStyle = colors[intensity];
     ctx.fillRect(x, y, cellSize, cellSize);
     
+    // Ajouter un indicateur de caractère dans la cellule
+    ctx.font = "bold 10px Arial";
+    ctx.fillStyle = intensity < 2 ? "#666" : "white";
+    ctx.textAlign = "center";
+    ctx.textBaseline = "middle";
+    
+    // Caractère selon l'intensité
+    let char = "";
+    switch(intensity) {
+      case 0: char = "∅"; break; // Aucune
+      case 1: char = "·"; break; // Faible
+      case 2: char = "○"; break; // Modérée
+      case 3: char = "●"; break; // Élevée
+      case 4: char = "■"; break; // Intense
+    }
+    
+    // Dessiner le caractère au centre de la cellule
+    ctx.fillText(char, x + cellSize/2, y + cellSize/2);
+    
     // Bordure avec indication des échéances (vendredi = jour important)
     if (weekday === 4) { // Vendredi
       ctx.strokeStyle = "#FF6B6B";
-      ctx.lineWidth = 1.5;
+      ctx.lineWidth = 2;
+      ctx.strokeRect(x, y, cellSize, cellSize);
+      
+      // Indicateur spécial pour vendredi
+      ctx.fillStyle = "#FF6B6B";
+      ctx.font = "bold 8px Arial";
+      ctx.fillText("V", x + cellSize - 6, y + 8);
     } else {
       ctx.strokeStyle = intensity > 0 ? "#239A3B" : "#eee";
       ctx.lineWidth = 0.5;
+      ctx.strokeRect(x, y, cellSize, cellSize);
     }
-    ctx.strokeRect(x, y, cellSize, cellSize);
   }
   
+  // Légende des caractères en bas
+  ctx.font = "10px Arial";
+  ctx.fillStyle = "#666";
+  ctx.textAlign = "center";
+  
+  const legendChars = ["∅ Aucune", "· Faible", "○ Modérée", "● Élevée", "■ Intense"];
+  const legendX = canvas.width / 2;
+  const legendY = canvas.height - 15;
+  
+  
   // Analyser et afficher les métriques de persévérance compactes
   analyzeCompactPersistenceMetrics(activityData, scenario.id);
 }