top

templates/index.html

@@ -170,8 +170,12 @@
     .btn-secondary:not(:disabled):hover, .btn-secondary:not(:disabled):focus { background-color: var(--secondary); color: white; transform: translateY(-1px); box-shadow: var(--shadow-md); }
     .btn-secondary:not(:disabled):active { transform: translateY(0); }
 
-    .loading-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.5); display: flex; justify-content: center; align-items: center; z-index: 100; padding: 1rem; /* Ajout padding pour mobile */ }
-    .loading-card { background-color: white; padding: 2rem; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); text-align: center; max-width: 90%; /* Légère augmentation pour petits écrans */ }
+     .loading-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.5); display: flex; justify-content: center; align-items: center; z-index: 100; padding: 1rem; /* Ajout padding pour mobile */ }
+     .loading-card { background-color: white; padding: 2rem; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); text-align: center; max-width: 90%; /* Légère augmentation pour petits écrans */ }
+     .progress-bar { width: 100%; height: 4px; background-color: var(--gray-200); border-radius: 2px; overflow: hidden; margin: 1rem 0; }
+     .progress-fill { height: 100%; background-color: var(--primary); animation: progress 2s ease-in-out infinite; }
+     @keyframes progress { 0% { width: 0%; } 50% { width: 100%; } 100% { width: 0%; } }
+     .status-message { font-size: 0.9rem; color: var(--gray-700); text-align: center; margin: 0.5rem 0; font-style: italic; }
     .spinner { width: 3rem; height: 3rem; border: 4px solid var(--gray-200); border-radius: 50%; border-top-color: var(--primary); animation: spin 1s linear infinite; margin: 0 auto 1rem; }
     @keyframes spin { to { transform: rotate(360deg); } }
 
@@ -319,15 +323,21 @@
        /* .markdown-table td { font-size: 0.8rem; } */
 
        .loading-card {
-           padding: 1.5rem; /* Padding chargement réduit */
-       }
-       .spinner {
-           width: 2.5rem; height: 2.5rem; /* Spinner légèrement plus petit */
-           margin-bottom: 0.8rem;
-       }
-       .loading-card p {
-           font-size: 0.9rem; /* Texte chargement plus petit */
-       }
+            padding: 1.5rem; /* Padding chargement réduit */
+        }
+        .spinner {
+            width: 2.5rem; height: 2.5rem; /* Spinner légèrement plus petit */
+            margin-bottom: 0.8rem;
+        }
+        .loading-card p {
+            font-size: 0.9rem; /* Texte chargement plus petit */
+        }
+        .progress-bar {
+            height: 3px; /* Plus fin sur mobile */
+        }
+        .status-message {
+            font-size: 0.8rem; /* Plus petit sur mobile */
+        }
     }
 
   </style>
@@ -365,12 +375,13 @@
       </form>
     </div>
 
-    <div id="result" class="card result-card" style="display: none;">
-      <div class="tabs">
-        <button id="dissertationTab" class="tab active">Dissertation</button>
-        <button id="tableauTab" class="tab">Tableau</button>
-      </div>
-      <div id="displayContentWrapper">
+     <div id="result" class="card result-card" style="display: none;">
+       <div class="tabs">
+         <button id="dissertationTab" class="tab active">Dissertation</button>
+         <button id="tableauTab" class="tab">Tableau</button>
+       </div>
+       <div id="streamingStatus" class="status-message" style="display: none;">Phase en cours : Génération du tableau...</div>
+       <div id="displayContentWrapper">
         <div id="dissertationContentWrapper" class="tab-content">
           <div id="dissertationContent" class="custom-prose"></div>
         </div>
@@ -387,9 +398,14 @@
     </div>
   </main>
 
-  <div id="loading" class="loading-overlay" style="display: none;">
-       <div class="loading-card"><div class="spinner"></div><p>Préparation de l'analyse...</p></div>
-  </div>
+   <div id="loading" class="loading-overlay" style="display: none;">
+        <div class="loading-card">
+            <div class="spinner"></div>
+            <p id="loadingStatus">Préparation de l'analyse...</p>
+            <div class="progress-bar"><div class="progress-fill"></div></div>
+            <p id="timeEstimate">Temps estimé : 30-60 secondes</p>
+        </div>
+   </div>
 
   <script>
     // Vérification bibliothèques
@@ -518,39 +534,52 @@
         }
     }
      function processStreamChunk(jsonData, isDeepThink) { // Pass deepthink flag
-         try {
-             const parsedData = JSON.parse(jsonData);
-             if (parsedData.error) { console.error("Erreur serveur:", parsedData.error); alert("Une erreur s'est produite lors de l'analyse. Veuillez vérifier votre connexion et réessayer."); loadingIndicator.style.display = 'none'; downloadPdfBtn.disabled = true; if (currentlyStreaming) removeCursor(currentlyStreaming); streamComplete = true; return; }
-
-            // First chunk received successfully
-            if (resultDiv.style.display === 'none') {
-                 resultDiv.style.display = 'block';
-                 resultDiv.classList.add('slide-up');
-                 loadingIndicator.style.display = 'none';
-                 switchTab('dissertation'); // Default to dissertation tab
-                 // Record usage ONLY if it was a DeepThink request and this is the first chunk
-                 if (isDeepThink) {
-                     recordDeepThinkUsage();
-                 }
-            }
+          try {
+              const parsedData = JSON.parse(jsonData);
+              if (parsedData.error) { console.error("Erreur serveur:", parsedData.error); alert("Une erreur s'est produite lors de l'analyse. Veuillez vérifier votre connexion et réessayer."); loadingIndicator.style.display = 'none'; downloadPdfBtn.disabled = true; if (currentlyStreaming) removeCursor(currentlyStreaming); streamComplete = true; return; }
+
+             // First chunk received successfully
+             if (resultDiv.style.display === 'none') {
+                  resultDiv.style.display = 'block';
+                  resultDiv.classList.add('slide-up');
+                  loadingIndicator.style.display = 'none';
+                  switchTab('dissertation'); // Default to dissertation tab
+                  // Record usage ONLY if it was a DeepThink request and this is the first chunk
+                  if (isDeepThink) {
+                      recordDeepThinkUsage();
+                  }
+             }
 
-            if (parsedData.type === 'tableau') { tableauMarkdownRaw += parsedData.chunk; }
-            else if (parsedData.type === 'dissertation') { dissertationMarkdownRaw += parsedData.chunk; }
-            else { console.warn("Type de chunk inconnu reçu:", parsedData.type); return; }
+             if (parsedData.type === 'tableau') {
+                 tableauMarkdownRaw += parsedData.chunk;
+                 document.getElementById('loadingStatus').textContent = "Génération du tableau d'analyse en cours...";
+                 document.getElementById('streamingStatus').textContent = "Phase en cours : Génération du tableau...";
+                 document.getElementById('timeEstimate').textContent = "Temps estimé : 10-20 secondes";
+                 document.getElementById('streamingStatus').style.display = 'block';
+             }
+             else if (parsedData.type === 'dissertation') {
+                 dissertationMarkdownRaw += parsedData.chunk;
+                 document.getElementById('loadingStatus').textContent = "Rédaction de la dissertation en cours...";
+                 document.getElementById('streamingStatus').textContent = "Phase en cours : Rédaction de la dissertation...";
+                 document.getElementById('timeEstimate').textContent = "Temps estimé : 30-60 secondes";
+                 document.getElementById('streamingStatus').style.display = 'block';
+             }
+             else { console.warn("Type de chunk inconnu reçu:", parsedData.type); return; }
 
-            if (currentlyStreaming !== parsedData.type) { if (currentlyStreaming) { removeCursor(currentlyStreaming); } currentlyStreaming = parsedData.type; }
-            updateDisplayContent(parsedData.type);
+             if (currentlyStreaming !== parsedData.type) { if (currentlyStreaming) { removeCursor(currentlyStreaming); } currentlyStreaming = parsedData.type; }
+             updateDisplayContent(parsedData.type);
 
-        } catch (e) { if (e instanceof SyntaxError) { console.warn("Chunk JSON invalide:", jsonData, e); } else { console.error("Erreur traitement chunk:", e, jsonData); } }
-    }
-    function handleStreamEnd() { console.log("Fin du stream."); streamComplete = true; if (currentlyStreaming) { removeCursor(currentlyStreaming); } loadingIndicator.style.display = 'none'; downloadPdfBtn.disabled = false; currentlyStreaming = null; }
+         } catch (e) { if (e instanceof SyntaxError) { console.warn("Chunk JSON invalide:", jsonData, e); } else { console.error("Erreur traitement chunk:", e, jsonData); } }
+     }
+     function handleStreamEnd() { console.log("Fin du stream."); streamComplete = true; if (currentlyStreaming) { removeCursor(currentlyStreaming); } loadingIndicator.style.display = 'none'; downloadPdfBtn.disabled = false; currentlyStreaming = null; document.getElementById('streamingStatus').style.display = 'none'; }
 
     // --- Analysis Request Logic (Reusable) ---
-    function startAnalysis(formData) {
-        // Reset state before starting
-        tableauMarkdownRaw = ''; dissertationMarkdownRaw = ''; currentlyStreaming = null; streamComplete = false;
-        dissertationContent.innerHTML = ''; tableauContent.innerHTML = ''; // Clear previous content
-        resultDiv.style.display = 'none'; loadingIndicator.style.display = 'flex'; downloadPdfBtn.disabled = true; switchTab('dissertation');
+     function startAnalysis(formData) {
+         // Reset state before starting
+         tableauMarkdownRaw = ''; dissertationMarkdownRaw = ''; currentlyStreaming = null; streamComplete = false;
+         dissertationContent.innerHTML = ''; tableauContent.innerHTML = ''; // Clear previous content
+         resultDiv.style.display = 'none'; loadingIndicator.style.display = 'flex'; downloadPdfBtn.disabled = true; switchTab('dissertation');
+         document.getElementById('streamingStatus').style.display = 'none';
 
         const isDeepThinkRequest = formData.get('use_deepthink') === 'true';
         console.log(`Lancement de l'analyse ${isDeepThinkRequest ? 'DeepThink' : 'standard'}...`);