Upload templates/index.html with huggingface_hub

templates/index.html

@@ -305,10 +305,10 @@ button:disabled {
   color: #689f38;
 }
 
-/* ================= COMPÉTENCES REGROUPÉES SUR 3 COLONNES ================= */
+/* ================= COMPÉTENCES EN MATRICE 3x4 ================= */
 #competence-bars {
   background: white;
-  padding: 15px;
+  padding: 20px;
   border-radius: 12px;
   border: 1px solid #e0e0e0;
   margin: 15px 0;
@@ -316,52 +316,63 @@ button:disabled {
 
 .compact-competences-grid {
   display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  gap: 12px;
-  margin: 10px 0;
+  grid-template-columns: repeat(4, 1fr); /* 4 colonnes */
+  grid-template-rows: repeat(3, auto); /* 3 lignes */
+  gap: 15px;
+  margin: 20px 0;
 }
 
-.compact-competence-item {
-  padding: 10px;
-  background: #f8f9fa;
-  border-radius: 8px;
+.compact-competence-matrix-item {
+  padding: 15px;
+  background: linear-gradient(135deg, #f8f9fa, #e9ecef);
+  border-radius: 10px;
   border-left: 4px solid #1976D2;
-  transition: transform 0.2s;
+  transition: all 0.3s ease;
   height: 100%;
-  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  min-height: 120px;
 }
 
-.compact-competence-item:hover {
-  transform: translateY(-2px);
-  background: #e3f2fd;
+.compact-competence-matrix-item:hover {
+  transform: translateY(-3px);
+  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
+  background: linear-gradient(135deg, #e3f2fd, #bbdefb);
 }
 
-.compact-competence-label {
-  font-size: 12px;
+.compact-matrix-competence-label {
+  font-size: 13px;
   font-weight: 600;
   color: #333;
-  margin-bottom: 8px;
-  display: flex;
-  justify-content: space-between;
+  margin-bottom: 10px;
+  line-height: 1.4;
+  flex-grow: 1;
 }
 
-.compact-competence-bar {
-  height: 10px;
+.compact-matrix-competence-value {
+  font-size: 24px;
+  font-weight: bold;
+  color: #1976D2;
+  text-align: center;
+  margin: 10px 0;
+}
+
+.compact-matrix-competence-value.high { color: #43A047; }
+.compact-matrix-competence-value.medium { color: #FB8C00; }
+.compact-matrix-competence-value.low { color: #E53935; }
+
+.compact-matrix-competence-bar {
+  height: 8px;
   background: #e0e0e0;
-  border-radius: 5px;
+  border-radius: 4px;
   overflow: hidden;
-  margin: 5px 0;
+  margin: 8px 0;
 }
 
-.compact-competence-fill {
+.compact-matrix-competence-fill {
   height: 100%;
-  border-radius: 5px;
-  color: white;
-  font-size: 9px;
-  text-align: right;
-  padding-right: 5px;
-  line-height: 10px;
-  font-weight: bold;
+  border-radius: 4px;
   transition: width 0.5s ease;
 }
 
@@ -1192,6 +1203,11 @@ textarea:focus {
   .tab-btn {
     width: 100%;
   }
+  
+  .compact-competences-grid {
+    grid-template-columns: repeat(3, 1fr); /* 3 colonnes */
+    grid-template-rows: repeat(5, auto); /* 5 lignes */
+  }
 }
 
 @media (max-width: 768px) {
@@ -1225,7 +1241,22 @@ textarea:focus {
   }
   
   .compact-competences-grid {
-    grid-template-columns: repeat(2, 1fr);
+    grid-template-columns: repeat(2, 1fr); /* 2 colonnes */
+    grid-template-rows: repeat(7, auto); /* 7 lignes */
+    gap: 12px;
+  }
+  
+  .compact-competence-matrix-item {
+    padding: 12px;
+    min-height: 100px;
+  }
+  
+  .compact-matrix-competence-label {
+    font-size: 12px;
+  }
+  
+  .compact-matrix-competence-value {
+    font-size: 20px;
   }
   
   .compact-radar-metrics-grid {
@@ -1275,7 +1306,8 @@ textarea:focus {
   }
   
   .compact-competences-grid {
-    grid-template-columns: 1fr;
+    grid-template-columns: 1fr; /* 1 colonne */
+    grid-template-rows: repeat(14, auto); /* 14 lignes */
   }
   
   .example-metrics-table th,
@@ -1429,8 +1461,11 @@ textarea:focus {
         </div>
       </div>
 
-      <h3>📊 Progression par compétence</h3>
+      <h3>📊 Progression par compétence (Matrice 3x4)</h3>
       <div id="competence-bars">
+        <p style="font-size: 14px; color: #666; margin-bottom: 15px; font-style: italic;">
+          Affichage matriciel des 14 compétences principales (3 lignes × 4 colonnes)
+        </p>
         <div id="compact-competences">
           <em>Chargement des compétences...</em>
         </div>
@@ -1957,7 +1992,7 @@ const profileMessages = {
     insights: [
       { icon: "🔄", text: "Démarrage constant (70%)" },
       { icon: "📝", text: "Achèvement régulier (68%)" },
-      { icon: "🎨", text: "Trajectoire d’apprentissage prometteuse" }
+      { icon: "🎨", text: "Trajectoire d'apprentissage prometteuse" }
     ]
   },
   "Étudiant en difficulté": {
@@ -1966,7 +2001,7 @@ const profileMessages = {
     insights: [
       { icon: "👥", text: "Interactions élevées (85%)" },
       { icon: "🚀", text: "Démarrage solide (72%)" },
-      { icon: "💬", text: "Taux d’erreurs observées" }
+      { icon: "💬", text: "Taux d'erreurs observées" }
     ]
   },
   "Étudiant évitant l'échec": {
@@ -1975,7 +2010,7 @@ const profileMessages = {
     insights: [
       { icon: "😨", text: "Démarrage faible (35%)" },
       { icon: "⏱️", text: "Achèvement limité (30%)" },
-      { icon: "🌱", text: "Niveau d’activité et d’engagement limité" }
+      { icon: "🌱", text: "Niveau d'activité et d'engagement limité" }
     ]
   },
   "Étudiant à risque": {
@@ -2274,30 +2309,73 @@ function updateCompactCompetences(competences) {
     return;
   }
   
-  competences.forEach(comp => {
+  // Créer un conteneur de grille
+  const gridContainer = document.createElement('div');
+  gridContainer.className = 'compact-competences-grid';
+  
+  // Limiter à 14 compétences pour la matrice 3x4 (avec 2 cases vides)
+  const maxCompetences = 14;
+  const displayedCompetences = competences.slice(0, maxCompetences);
+  
+  displayedCompetences.forEach(comp => {
     // Déterminer la couleur selon la valeur
-    let color;
-    if (comp.value < 50) color = '#E53935';
-    else if (comp.value < 70) color = '#FB8C00';
-    else color = '#43A047';
+    let color, colorClass;
+    if (comp.value < 50) {
+      color = '#E53935';
+      colorClass = 'low';
+    } else if (comp.value < 70) {
+      color = '#FB8C00';
+      colorClass = 'medium';
+    } else {
+      color = '#43A047';
+      colorClass = 'high';
+    }
     
-    // Créer l'élément de compétence
+    // Créer l'élément de compétence matricielle
     const compItem = document.createElement('div');
-    compItem.className = 'compact-competence-item';
+    compItem.className = 'compact-competence-matrix-item';
     compItem.innerHTML = `
-      <div class="compact-competence-label">
-        <span>${comp.label}</span>
-        <span>${comp.value}%</span>
+      <div class="compact-matrix-competence-label">
+        ${comp.label}
       </div>
-      <div class="compact-competence-bar">
-        <div class="compact-competence-fill" style="width: ${comp.value}%; background: ${color};">
-          ${comp.value >= 10 ? comp.value + '%' : ''}
+      <div class="compact-matrix-competence-value ${colorClass}">
+        ${comp.value}%
+      </div>
+      <div class="compact-matrix-competence-bar">
+        <div class="compact-matrix-competence-fill" style="width: ${comp.value}%; background: ${color};">
         </div>
       </div>
+      <div style="display: flex; justify-content: space-between; font-size: 11px; color: #666; margin-top: 5px;">
+        <span>0%</span>
+        <span>100%</span>
+      </div>
     `;
     
-    container.appendChild(compItem);
+    gridContainer.appendChild(compItem);
   });
+  
+  // Si nous avons moins de 14 compétences, ajouter des cases vides pour compléter la matrice
+  const emptySlots = maxCompetences - displayedCompetences.length;
+  for (let i = 0; i < emptySlots; i++) {
+    const emptyItem = document.createElement('div');
+    emptyItem.className = 'compact-competence-matrix-item';
+    emptyItem.style.opacity = '0.3';
+    emptyItem.innerHTML = `
+      <div class="compact-matrix-competence-label" style="color: #999;">
+        Compétence non définie
+      </div>
+      <div class="compact-matrix-competence-value" style="color: #999;">
+        --
+      </div>
+      <div class="compact-matrix-competence-bar">
+        <div class="compact-matrix-competence-fill" style="width: 0%; background: #999;">
+        </div>
+      </div>
+    `;
+    gridContainer.appendChild(emptyItem);
+  }
+  
+  container.appendChild(gridContainer);
 }
 
 // Mettre à jour la grille des métriques radar compacte