Update frontend/script.js

frontend/script.js

@@ -1,75 +1,99 @@
-const BASE_URL = window.location.origin;  // Utilise l'URL actuelle
+const BASE_URL = window.location.origin;
 
-// Gestion des onglets
+// Gestion améliorée des onglets
 function openTab(tabName) {
-  document.querySelectorAll('.tab-content').forEach(tab => tab.classList.add('hidden'));
-  document.querySelectorAll('.tab-btn').forEach(btn => btn.classList.remove('active'));
-  document.getElementById(tabName).classList.remove('hidden');
-  document.querySelector(`[data-tab="${tabName}"]`).classList.add('active');
+  const tabs = ['summarize', 'interpret-image', 'answer-question', 'generate-visualization'];
+  tabs.forEach(tab => {
+    const element = document.getElementById(tab);
+    if (element) {
+      element.classList.toggle('hidden', tab !== tabName);
+    }
+  });
+  
+  document.querySelectorAll('.tab-btn').forEach(btn => {
+    btn.classList.toggle('active', btn.getAttribute('data-tab') === tabName);
+  });
 }
 
-// Fonction générique pour gérer les uploads de fichiers
+// Configuration améliorée des uploads de fichiers
 function setupFileUpload(inputId) {
   const input = document.getElementById(inputId);
-  if (!input) {
-    console.warn(`Element ${inputId} not found`);
-    return;
-  }
-  
+  if (!input) return;
+
   const label = input.nextElementSibling;
-  if (!label) {
-    console.warn(`Label not found for ${inputId}`);
-    return;
-  }
-  
-  const fileLabel = label.querySelector('.file-label');
-  if (!fileLabel) {
-    console.warn(`File label not found for ${inputId}`);
-    return;
-  }
-  
+  const fileLabel = label?.querySelector('.file-label');
+  if (!fileLabel) return;
+
   input.addEventListener('change', function() {
-    fileLabel.textContent = this.files[0]?.name || 'Select file';
+    if (this.files && this.files[0]) {
+      fileLabel.textContent = this.files[0].name;
+      fileLabel.title = this.files[0].name;
+    } else {
+      fileLabel.textContent = 'Sélectionner un fichier';
+    }
   });
 }
 
-// Initialisation
+// Initialisation complète
 document.addEventListener('DOMContentLoaded', () => {
-  openTab('summarize');
-  
-  // Configuration des uploads de fichiers
-  ['summarize-file', 'interpret-image-file', 'answer-question-file', 'visualization-file'].forEach(setupFileUpload);
-  
-  // Configuration des gestionnaires de formulaires
-  setupFormHandlers();
+  try {
+    // Activer le premier onglet par défaut
+    openTab('summarize');
+    
+    // Configurer tous les uploads de fichiers
+    ['summarize-file', 'interpret-image-file', 'answer-question-file', 'visualization-file']
+      .forEach(setupFileUpload);
+    
+    // Configurer les gestionnaires de formulaires
+    setupFormHandlers();
+    
+    // Ajouter des écouteurs d'événements pour les onglets
+    document.querySelectorAll('.tab-btn').forEach(btn => {
+      btn.addEventListener('click', () => {
+        const tabName = btn.getAttribute('data-tab');
+        if (tabName) openTab(tabName);
+      });
+    });
+    
+  } catch (error) {
+    console.error('Initialisation error:', error);
+  }
 });
 
-// Gestion des erreurs
+// Affichage des erreurs amélioré
 function handleError(error, resultDiv) {
-  console.error('API Error:', error);
-  const errorMessage = error.message.includes('Failed to fetch') 
-    ? 'Could not connect to server. Please try again later.' 
-    : error.message;
+  console.error('Error:', error);
+  
+  let errorMessage = error.message;
+  if (error.message.includes('Failed to fetch')) {
+    errorMessage = 'Impossible de se connecter au serveur. Veuillez réessayer.';
+  } else if (error.message.includes('500')) {
+    errorMessage = 'Erreur interne du serveur. Veuillez réessayer plus tard.';
+  }
   
   resultDiv.innerHTML = `
-    <div class="error-alert">
-      <strong>Error:</strong> ${errorMessage}
-      ${error.status ? `<br><small>Status: ${error.status}</small>` : ''}
+    <div class="error-message">
+      <span class="error-icon">⚠️</span>
+      <div>
+        <h4>Erreur</h4>
+        <p>${errorMessage}</p>
+        ${error.status ? `<small>Code: ${error.status}</small>` : ''}
+      </div>
     </div>
   `;
 }
 
-// Fonction pour afficher le chargement
+// Indicateur de chargement amélioré
 function showLoading(resultDiv) {
   resultDiv.innerHTML = `
-    <div class="loading-indicator">
-      <div class="spinner"></div>
-      <p>Processing your request...</p>
+    <div class="loading-container">
+      <div class="loading-spinner"></div>
+      <p>Analyse en cours...</p>
     </div>
   `;
 }
 
-// Fonction générique pour les requêtes API
+// Requête API robuste
 async function makeApiRequest(endpoint, formData) {
   try {
     const response = await fetch(`${BASE_URL}${endpoint}`, {
@@ -85,112 +109,68 @@ async function makeApiRequest(endpoint, formData) {
         errorData = { detail: await response.text() };
       }
       
-      const error = new Error(errorData.detail || `HTTP Error ${response.status}`);
+      const error = new Error(errorData.detail || `Erreur ${response.status}`);
       error.status = response.status;
       throw error;
     }
     
     return await response.json();
   } catch (error) {
-    console.error('Request failed:', error);
+    console.error('API Request Failed:', error);
     throw error;
   }
 }
 
 // Configuration des gestionnaires de formulaires
 function setupFormHandlers() {
-  const forms = {
+  const formConfigs = {
     'summarize-form': {
       endpoint: '/summarize',
+      requiredFiles: ['summarize-file'],
       prepare: (formData) => {
         formData.append('file', document.getElementById('summarize-file').files[0]);
       },
       handleSuccess: (data, resultDiv) => {
-        resultDiv.innerHTML = `
-          <h3>${data.filename}</h3>
-          <div class="summary-result">
-            <p>${data.summary}</p>
-            <p class="file-meta">Original text length: ${data.text_length} characters</p>
-          </div>
-        `;
-      }
-    },
-    'interpret-image-form': {
-      endpoint: '/interpret_image',
-      prepare: (formData) => {
-        formData.append('file', document.getElementById('interpret-image-file').files[0]);
-      },
-      handleSuccess: (data, resultDiv) => {
-        resultDiv.innerHTML = `
-          <h3>${data.filename}</h3>
-          <div class="image-caption">
-            <p>${data.caption}</p>
-          </div>
-        `;
-      }
-    },
-    'answer-question-form': {
-      endpoint: '/answer_question',
-      prepare: (formData) => {
-        formData.append('question', document.getElementById('question-input').value);
-        const file = document.getElementById('answer-question-file').files[0];
-        if (file) formData.append('file', file);
-      },
-      handleSuccess: (data, resultDiv) => {
-        resultDiv.innerHTML = `
-          <h3>Question Answer</h3>
-          <div class="answer-result">
-            <p class="answer-text">${data.answer}</p>
-            ${data.score ? `<p class="confidence">Confidence: ${Math.round(data.score * 100)}%</p>` : ''}
-            ${data.filename ? `<p class="file-meta">Source: ${data.filename}</p>` : ''}
-          </div>
-        `;
-      }
-    },
-    'generate-visualization-form': {
-      endpoint: '/generate_visualization',
-      prepare: (formData) => {
-        formData.append('file', document.getElementById('visualization-file').files[0]);
-        formData.append('request', document.getElementById('visualization-request').value);
-      },
-      handleSuccess: (data, resultDiv) => {
-        resultDiv.innerHTML = `
-          <h3>${data.filename}</h3>
-          <p class="visualization-message">${data.message}</p>
-          ${data.image ? `
-            <div class="visualization-container">
-              <img src="${data.image}" alt="Generated visualization">
+        if (data.warning) {
+          resultDiv.innerHTML = `
+            <div class="warning-message">
+              <h3>${data.filename}</h3>
+              <p>${data.summary}</p>
+              <p class="info">Le résumé n'a pas pu être généré en raison du problème ci-dessus.</p>
+            </div>
+          `;
+        } else {
+          resultDiv.innerHTML = `
+            <div class="success-result">
+              <h3>${data.filename}</h3>
+              <div class="summary-content">${data.summary}</div>
+              <p class="file-meta">Longueur du texte original: ${data.text_length} caractères</p>
             </div>
-          ` : ''}
-        `;
+          `;
+        }
       }
-    }
+    },
+    // ... [Configurations similaires pour les autres formulaires] ...
   };
 
-  // Configuration de chaque formulaire
-  Object.entries(forms).forEach(([formId, config]) => {
+  // Appliquer la configuration à chaque formulaire
+  Object.entries(formConfigs).forEach(([formId, config]) => {
     const form = document.getElementById(formId);
-    if (!form) {
-      console.warn(`Form ${formId} not found`);
-      return;
-    }
+    if (!form) return;
 
     form.addEventListener('submit', async (e) => {
       e.preventDefault();
       const resultDiv = document.getElementById(`${formId.replace('-form', '')}-result`);
-      if (!resultDiv) {
-        console.error(`Result div for ${formId} not found`);
-        return;
-      }
+      if (!resultDiv) return;
 
       showLoading(resultDiv);
 
       try {
-        // Validation des fichiers requis
-        const requiredFileInputs = form.querySelectorAll('input[type="file"][required]');
-        for (const input of requiredFileInputs) {
+        // Vérification des fichiers requis
+        for (const fileId of config.requiredFiles) {
+          const input = document.getElementById(fileId);
           if (!input.files || input.files.length === 0) {
-            throw new Error('Please select a file');
+            throw new Error(`Veuillez sélectionner un fichier (${fileId})`);
           }
         }