Upload templates/index.html with huggingface_hub

templates/index.html

@@ -580,6 +580,23 @@ button:disabled {
   margin: 15px 0;
 }
 
+.compact-heatmap-container {
+  display: flex;
+  gap: 20px;
+  flex-wrap: wrap;
+  margin-bottom: 15px;
+}
+
+.compact-heatmap-left {
+  flex: 1;
+  min-width: 300px;
+}
+
+.compact-heatmap-right {
+  flex: 1;
+  min-width: 300px;
+}
+
 .compact-heatmap-analysis {
   margin-bottom: 15px;
 }
@@ -1247,6 +1264,10 @@ textarea:focus {
     grid-template-columns: repeat(4, 1fr); /* 4 colonnes sur 2 lignes */
     grid-template-rows: repeat(2, auto);
   }
+  
+  .compact-heatmap-container {
+    flex-direction: column;
+  }
 }
 
 @media (max-width: 768px) {
@@ -1358,6 +1379,10 @@ textarea:focus {
     display: block;
     overflow-x: auto;
   }
+  
+  .compact-heatmap-container {
+    flex-direction: column;
+  }
 }
 
 @media (max-width: 480px) {
@@ -1412,6 +1437,10 @@ textarea:focus {
     padding: 10px 8px;
     font-size: 13px;
   }
+  
+  .compact-heatmap-container {
+    flex-direction: column;
+  }
 }
 </style>
 </head>
@@ -1616,80 +1645,87 @@ textarea:focus {
       <div class="compact-heatmap-and-indicators">
         <h3>🔥 Heatmap d'activité - Analyse de Persévérance</h3>
         
-        <div class="compact-heatmap-analysis">
-          <div class="compact-analysis-controls">
-            <label for="persistenceMode">Mode d'analyse :</label>
-            <select id="persistenceMode" onchange="changePersistenceAnalysis()">
-              <option value="regularity">📊 Régularité du travail</option>
-              <option value="effortPattern">🔄 Schéma d'effort</option>
-              <option value="deadline">⏰ Gestion des échéances</option>
-              <option value="combined">🎯 Vue combinée</option>
-            </select>
-          </div>
-          
-          <!-- Canvas pour le heatmap -->
-          <canvas id="heatmap" width="800" height="250" style="max-width: 100%; height: auto;"></canvas>
-        </div>
-        
-        <!-- Légende des niveaux d'activité compacte -->
-        <div class="compact-enriched-legend">
-          <div class="compact-legend-section">
-            <h5>📈 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 activité</span>
+        <div class="compact-heatmap-container">
+          <!-- Colonne gauche : Heatmap et contrôles -->
+          <div class="compact-heatmap-left">
+            <div class="compact-heatmap-analysis">
+              <div class="compact-analysis-controls">
+                <label for="persistenceMode">Mode d'analyse :</label>
+                <select id="persistenceMode" onchange="changePersistenceAnalysis()">
+                  <option value="regularity">📊 Régularité du travail</option>
+                  <option value="effortPattern">🔄 Schéma d'effort</option>
+                  <option value="deadline">⏰ Gestion des échéances</option>
+                  <option value="combined">🎯 Vue combinée</option>
+                </select>
               </div>
-              <div class="compact-legend-item-small">
-                <div class="compact-legend-color-small" style="background:#C6E48B;"></div>
-                <span>Faible activité</span>
-              </div>
-              <div class="compact-legend-item-small">
-                <div class="compact-legend-color-small" style="background:#7BC96F;"></div>
-                <span>Activité modérée</span>
-              </div>
-              <div class="compact-legend-item-small">
-                <div class="compact-legend-color-small" style="background:#239A3B;"></div>
-                <span>Activité élevée</span>
-              </div>
-              <div class="compact-legend-item-small">
-                <div class="compact-legend-color-small" style="background:#196127;"></div>
-                <span>Activité intense</span>
+              
+              <!-- Canvas pour le heatmap -->
+              <canvas id="heatmap" width="800" height="250" 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 class="compact-legend-grid">
+                    <div class="compact-legend-item-small">
+                      <div class="compact-legend-color-small" style="background:#EBEDF0;"></div>
+                      <span>Aucune activité</span>
+                    </div>
+                    <div class="compact-legend-item-small">
+                      <div class="compact-legend-color-small" style="background:#C6E48B;"></div>
+                      <span>Faible activité</span>
+                    </div>
+                    <div class="compact-legend-item-small">
+                      <div class="compact-legend-color-small" style="background:#7BC96F;"></div>
+                      <span>Activité modérée</span>
+                    </div>
+                    <div class="compact-legend-item-small">
+                      <div class="compact-legend-color-small" style="background:#239A3B;"></div>
+                      <span>Activité élevée</span>
+                    </div>
+                    <div class="compact-legend-item-small">
+                      <div class="compact-legend-color-small" style="background:#196127;"></div>
+                      <span>Activité intense</span>
+                    </div>
+                  </div>
+                </div>
               </div>
             </div>
           </div>
-        </div>
-        
-        <!-- Analyse de persévérance compacte -->
-        <div class="compact-persistence-analysis" id="compact-persistenceAnalysis">
-          <h5>🎯 Indicateurs de Persévérance</h5>
-          <div class="compact-persistence-indicators">
-            <div class="compact-indicator">
-              <span class="compact-indicator-dot" style="background:#FF6B6B;"></span>
-              <span>Régularité calculée : <strong id="compact-regularityScore">-</strong></span>
-            </div>
-            <div class="compact-indicator">
-              <span class="compact-indicator-dot" style="background:#4ECDC4;"></span>
-              <span>Schéma d'effort : <strong id="compact-effortPattern">-</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>
           
-          <div class="compact-persistence-text" style="margin-top: 10px;">
-            <div style="margin-bottom: 10px;">
-              <strong>Schéma d'effort :</strong> 
-<div style="margin-top: 5px; padding: 8px; background: transparent; border-radius: 6px; font-size: 13px;">
-                <span id="compact-patternText">Analyse en cours...</span>
+          <!-- Colonne droite : Indicateurs de persévérance -->
+          <div class="compact-heatmap-right">
+            <div class="compact-persistence-analysis" id="compact-persistenceAnalysis">
+              <h5>🎯 Indicateurs de Persévérance</h5>
+              <div class="compact-persistence-indicators">
+                <div class="compact-indicator">
+                  <span class="compact-indicator-dot" style="background:#FF6B6B;"></span>
+                  <span>Régularité calculée : <strong id="compact-regularityScore">-</strong></span>
+                </div>
+                <div class="compact-indicator">
+                  <span class="compact-indicator-dot" style="background:#4ECDC4;"></span>
+                  <span>Schéma d'effort : <strong id="compact-effortPattern">-</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>
-            </div>
-           <div>
-  <strong>Persévérance et gestion des efforts :</strong> 
-  <span id="compact-regularityText">Analyse en cours...</span>
-</div>
+              
+              <div class="compact-persistence-text" style="margin-top: 10px;">
+                <div style="margin-bottom: 10px;">
+                  <strong>Schéma d'effort :</strong> 
+  <div style="margin-top: 5px; padding: 8px; background: transparent; border-radius: 6px; font-size: 13px;">
+                    <span id="compact-patternText">Analyse en cours...</span>
+                  </div>
+                </div>
+               <div>
+    <strong>Persévérance et gestion des efforts :</strong> 
+    <span id="compact-regularityText">Analyse en cours...</span>
+  </div>
 
+              </div>
+            </div>
           </div>
         </div>
       </div>
@@ -1716,7 +1752,7 @@ textarea:focus {
           <!-- Les étoiles seront ajoutées par JavaScript -->
         </div>
         <small style="color: #666; display: block; margin-top: 5px;">
-         Le message auto-réflexif reflète-t-il fidèlement la situation réelle de l’étudiant (profil d’apprenant) ?
+         Le message auto-réflexif reflète-t-il fidèlement la situation réelle de l'étudiant (profil d'apprenant) ?
         </small>
       </div>
       
@@ -2491,6 +2527,7 @@ 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";
@@ -3117,6 +3154,7 @@ function initTrustSave(){
     
     // Récupérer les informations conditionnelles
     let evaluatorName = "";
+;
     let evaluatorRole = "";
     let expertiseLevel = "";
     let messageMastery = "";