Update templates/index.html

templates/index.html

@@ -136,10 +136,11 @@
                         <span class="text-sm text-gray-700 group-hover:text-indigo-600">Document iconographique (Image, Photo, Dessin...) avec méthodologie.</span>
                     </label>
                     <label class="relative flex items-center group cursor-pointer p-3 border border-gray-200 rounded-lg hover:bg-indigo-50 transition-colors w-full">
-                        <input type="radio" name="fileType" value="text"
+                        <input type="radio" name="fileType" value="text_image" <!-- MODIFIED: value to distinguish if needed, or keep "text" if backend logic depends on it -->
                                class="peer sr-only file-type-radio">
                         <div class="w-5 h-5 mr-3 border-2 border-gray-300 rounded-full flex-shrink-0 peer-checked:border-indigo-500 peer-checked:bg-indigo-500 transition-all"></div>
-                        <span class="text-sm text-gray-700 group-hover:text-indigo-600">Document textuel (Texte, PDF lisible...) avec méthodologie.</span>
+                        <!-- MODIFIED LABEL -->
+                        <span class="text-sm text-gray-700 group-hover:text-indigo-600">Image d'un document textuel (ex: capture d'écran de texte) avec méthodologie.</span>
                     </label>
                 </div>
             </div>
@@ -148,7 +149,7 @@
              <div class="mb-6">
                  <label class="block text-base font-medium text-gray-700 mb-3">2. Sélectionnez votre fichier</label>
                  <div id="upload-zone" class="upload-zone border-2 border-dashed border-gray-300 rounded-xl p-6 text-center cursor-pointer transition-all duration-300 relative overflow-hidden">
-                    <input id="file-upload" name="file" type="file" class="sr-only" accept="image/*">
+                    <input id="file-upload" name="file" type="file" class="sr-only" accept="image/*"> <!-- Default accept to image/* -->
                     <div class="space-y-3">
                         <div class="w-16 h-16 mx-auto rounded-full bg-indigo-100 flex items-center justify-center border-4 border-white shadow-sm">
                             <svg class="w-8 h-8 text-indigo-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -162,7 +163,7 @@
                             <span class="text-gray-500"> ou </span>
                             <label for="file-upload" class="cursor-pointer text-indigo-600 hover:text-indigo-500 font-medium">cliquez pour sélectionner</label>
                         </div>
-                        <p class="text-xs text-gray-500" id="file-types-info">Images (PNG, JPG, GIF) ou Textes (TXT, PDF) - Max 16MB</p>
+                        <p class="text-xs text-gray-500" id="file-types-info">Images (PNG, JPG, GIF, WEBP) - Max 16MB</p> <!-- Default info text -->
                     </div>
                  </div>
             </div>
@@ -172,7 +173,7 @@
                 <h3 class="text-base font-medium text-gray-800 mb-3">Aperçu</h3>
                 <div class="preview-container border rounded-lg p-4 bg-gray-50 max-h-72 overflow-auto relative">
                     <img id="image-preview" class="max-w-full h-auto hidden rounded block mx-auto" alt="Aperçu Image">
-                    <pre id="text-preview" class="text-sm text-gray-700 whitespace-pre-wrap hidden bg-white p-3 rounded shadow-inner"></pre>
+                    <pre id="text-preview" class="text-sm text-gray-700 whitespace-pre-wrap hidden bg-white p-3 rounded shadow-inner"></pre> <!-- Kept for potential future use, but will be hidden for text_image -->
                     <p id="file-info" class="text-xs text-gray-500 mt-2 text-center"></p>
                      <button id="remove-file-button" class="absolute top-2 right-2 bg-red-100 text-red-600 hover:bg-red-200 rounded-full p-1 text-xs hidden" title="Retirer le fichier">
                         <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
@@ -227,7 +228,7 @@
             const fileInput = document.getElementById('file-upload');
             const preview = document.getElementById('preview');
             const imagePreview = document.getElementById('image-preview');
-            const textPreview = document.getElementById('text-preview');
+            const textPreview = document.getElementById('text-preview'); // Still used for clearing
             const fileInfo = document.getElementById('file-info');
             const removeFileButton = document.getElementById('remove-file-button');
             const submitButton = document.getElementById('submit-button');
@@ -240,6 +241,8 @@
             const fileTypesInfo = document.getElementById('file-types-info');
 
             let selectedFile = null;
+            const imageMimeTypes = "image/png, image/jpeg, image/gif, image/webp";
+            const imageInfoText = "Images (PNG, JPG, GIF, WEBP) - Max 16MB";
 
             // Configure marked with Prism check
             marked.setOptions({
@@ -248,16 +251,14 @@
                 headerIds: false,
                 mangle: false,
                 highlight: function(code, lang) {
-                    // ** Check if Prism and the language are loaded **
                     if (typeof Prism !== 'undefined' && Prism.languages[lang]) {
                         try {
                              return Prism.highlight(code, Prism.languages[lang], lang);
                         } catch (error) {
                             console.warn(`Prism highlighting failed for language ${lang}:`, error)
-                            return code; // Return unhighlighted on error
+                            return code; 
                         }
                     }
-                    // ** Fallback if Prism or language not available **
                     return code;
                 }
             });
@@ -289,30 +290,24 @@
                 analysisContent.innerHTML = '<p class="text-gray-500">L\'analyse apparaîtra ici...</p>';
                 submitButton.disabled = true;
                 showLoading(false);
-                updateAcceptAttribute();
+                updateAcceptAttribute(); // Ensure accept attribute is correct on reset
             }
 
             function updateAcceptAttribute() {
                  const selectedType = document.querySelector('input[name="fileType"]:checked').value;
-                 if (selectedType === 'image') {
-                     fileInput.accept = "image/png, image/jpeg, image/gif, image/webp";
-                     fileTypesInfo.textContent = "Images (PNG, JPG, GIF, WEBP) - Max 16MB";
-                 } else {
-                     fileInput.accept = "text/plain, application/pdf, .txt";
-                     fileTypesInfo.textContent = "Textes (TXT, PDF lisible) - Max 16MB";
-                 }
-                 if (selectedFile) {
-                    const currentFileTypeMatchesSelection =
-                       (selectedType === 'image' && selectedFile.type.startsWith('image/')) ||
-                       (selectedType === 'text' && (selectedFile.type === 'text/plain' || selectedFile.type === 'application/pdf' || selectedFile.name.endsWith('.txt')));
+                 // MODIFICATION: Both options now accept images
+                 fileInput.accept = imageMimeTypes;
+                 fileTypesInfo.textContent = imageInfoText;
 
-                    if(!currentFileTypeMatchesSelection) {
+                 if (selectedFile) {
+                    // Now, both types expect an image. If a file was selected, it must be an image.
+                    const isImage = selectedFile.type.startsWith('image/');
+                    if(!isImage) {
                         resetUI();
-                         // Use SweetAlert for this message too
                         Swal.fire({
                             icon: 'warning',
-                            title: 'Type de fichier changé',
-                            text: 'Le type de document a été modifié. Veuillez resélectionner votre fichier.',
+                            title: 'Type de fichier incompatible',
+                            text: 'Seuls les fichiers images sont acceptés. Veuillez resélectionner votre fichier.',
                         });
                     }
                  }
@@ -321,7 +316,21 @@
 
             // --- Event Listeners ---
             fileTypeRadios.forEach(radio => {
-                radio.addEventListener('change', updateAcceptAttribute);
+                radio.addEventListener('change', () => {
+                    // No need to call updateAcceptAttribute if it always accepts images,
+                    // but if you changed the radio value to be different, you might re-evaluate.
+                    // For now, we'll just check if a file is selected and if it's still valid (image)
+                    // Or, more simply, just reset if type changes and a file is loaded, to force re-selection
+                    if (selectedFile) {
+                        resetUI();
+                         Swal.fire({
+                            icon: 'info',
+                            title: 'Type de document changé',
+                            text: 'Le type de méthodologie a été modifié. Veuillez resélectionner votre fichier image.',
+                        });
+                    }
+                    updateAcceptAttribute(); // Still useful to call for consistency, though its effect is now static on accept types
+                });
             });
             uploadZone.addEventListener('click', () => fileInput.click());
             uploadZone.addEventListener('dragover', (e) => {
@@ -351,11 +360,11 @@
             // --- Core Logic Functions ---
 
             function handleFileSelection(file) {
-                const fileType = document.querySelector('input[name="fileType"]:checked').value;
+                // const fileType = document.querySelector('input[name="fileType"]:checked').value; // fileType radio value
                 const maxFileSize = 16 * 1024 * 1024;
 
                  if (file.size > maxFileSize) {
-                    Swal.fire({ // Use SweetAlert
+                    Swal.fire({
                         icon: 'error',
                         title: 'Fichier trop volumineux',
                         text: `La taille maximale autorisée est de 16 Mo. Votre fichier fait ${(file.size / 1024 / 1024).toFixed(1)} Mo.`,
@@ -365,12 +374,12 @@
                 }
 
                  const allowedImageTypes = ['image/png', 'image/jpeg', 'image/gif', 'image/webp'];
-                 const allowedTextTypes = ['text/plain', 'application/pdf'];
 
-                 if (fileType === 'image' && !allowedImageTypes.includes(file.type)) {
+                 // MODIFICATION: Always validate as image
+                 if (!allowedImageTypes.includes(file.type)) {
                     const isImageTypeByName = /\.(jpe?g|png|gif|webp)$/i.test(file.name);
                     if (!isImageTypeByName) {
-                       Swal.fire({ // Use SweetAlert
+                       Swal.fire({ 
                            icon: 'error',
                            title: 'Type de fichier invalide',
                            text: 'Veuillez sélectionner une image (PNG, JPG, GIF, WEBP).'
@@ -378,20 +387,8 @@
                        resetUI();
                        return;
                     }
-                 } else if (fileType === 'text' && !allowedTextTypes.includes(file.type)) {
-                    const isTextTypeByName = /\.txt$/i.test(file.name);
-                     if (!isTextTypeByName && file.type !== 'application/pdf') {
-                         Swal.fire({ // Use SweetAlert
-                           icon: 'error',
-                           title: 'Type de fichier invalide',
-                           text: 'Veuillez sélectionner un fichier texte (TXT) ou PDF.'
-                       });
-                        resetUI();
-                        return;
-                    }
                  }
 
-                // If validation passes:
                 selectedFile = file;
                 preview.classList.remove('hidden');
                 preview.classList.add('fade-in');
@@ -400,36 +397,30 @@
                 fileInfo.textContent = `${file.name} (${(file.size / 1024).toFixed(1)} Ko)`;
                 removeFileButton.classList.remove('hidden');
 
-                if (fileType === 'image') {
-                    imagePreview.classList.remove('hidden');
-                    textPreview.classList.add('hidden');
-                    const reader = new FileReader();
-                    reader.onload = (e) => imagePreview.src = e.target.result;
-                    reader.readAsDataURL(file);
-                } else {
-                    imagePreview.classList.add('hidden');
-                    textPreview.classList.remove('hidden');
-                    if (file.type === 'application/pdf') {
-                         textPreview.textContent = "Aperçu non disponible pour les fichiers PDF. Le contenu sera analysé.";
-                    } else {
-                         const reader = new FileReader();
-                         reader.onload = (e) => textPreview.textContent = e.target.result;
-                         reader.readAsText(file);
-                    }
-                }
+                // MODIFICATION: Always show image preview
+                imagePreview.classList.remove('hidden');
+                textPreview.classList.add('hidden'); // Ensure text preview is hidden
+                textPreview.textContent = ''; // Clear any old text preview content
+                const reader = new FileReader();
+                reader.onload = (e) => imagePreview.src = e.target.result;
+                reader.readAsDataURL(file);
+                
                 submitButton.disabled = false;
             }
 
             function handleSubmit() {
                 if (!selectedFile) {
-                     Swal.fire('Aucun fichier', 'Veuillez sélectionner un fichier avant de lancer l\'analyse.', 'warning');
+                     Swal.fire('Aucun fichier', 'Veuillez sélectionner un fichier image avant de lancer l\'analyse.', 'warning');
                     return;
                 }
 
-                const fileType = document.querySelector('input[name="fileType"]:checked').value;
+                // This 'fileType' value ('image' or 'text_image') will be sent to the backend.
+                // The backend can use this to apply different analysis methodologies
+                // even though the uploaded file is always an image.
+                const fileTypeForBackend = document.querySelector('input[name="fileType"]:checked').value;
                 const formData = new FormData();
                 formData.append('file', selectedFile);
-                formData.append('fileType', fileType);
+                formData.append('fileType', fileTypeForBackend); // Send the selected radio value
 
                 showLoading(true);
                 results.classList.add('hidden');
@@ -455,11 +446,7 @@
                         results.classList.add('slide-up');
                         analysisContent.innerHTML = marked.parse(data.analysis);
 
-                        // ** Check if Prism is loaded before highlighting **
                         if (typeof Prism !== 'undefined') {
-                             // Use Prism's autoloader or highlightAllUnder
-                             // Prism.highlightAllUnder(analysisContent); // Might work with autoloader
-                             // Or manually trigger highlighting on specific elements if autoloader fails:
                               analysisContent.querySelectorAll('pre code').forEach((block) => {
                                 Prism.highlightElement(block);
                               });
@@ -474,15 +461,13 @@
                 })
                 .catch(error => {
                     showLoading(false);
-                    // Use SweetAlert for error display
                      Swal.fire({
                         icon: 'error',
                         title: 'Erreur lors de l\'analyse',
                         text: error.message || 'Une erreur inconnue est survenue.',
                     });
-                    // Optionally log detailed error
                     console.error('Error during analysis:', error);
-                    submitButton.disabled = false; // Re-enable on error
+                    submitButton.disabled = false; 
                 });
             }
 
@@ -497,31 +482,28 @@
                 tempDiv.innerHTML = analysisHtml;
                 let textToCopy = tempDiv.textContent || tempDiv.innerText || "";
 
-                 // Basic conversion for better text format
                  textToCopy = analysisHtml
                     .replace(/<br\s*\/?>/gi, '\n')
                     .replace(/<\/p>/gi, '\n')
                     .replace(/<\/li>/gi, '\n')
                     .replace(/<\/(h[1-6])>/gi, '\n\n')
-                    .replace(/<pre.*?><code.*?>([\s\S]*?)<\/code><\/pre>/gi, '\n```\n$1\n```\n') // Attempt to format code blocks
-                    .replace(/<[^>]+>/g, '') // Remove remaining tags
-                    .replace(/</g, '<').replace(/>/g, '>').replace(/&/g, '&') // Decode entities
+                    .replace(/<pre.*?><code.*?>([\s\S]*?)<\/code><\/pre>/gi, '\n```\n$1\n```\n') 
+                    .replace(/<[^>]+>/g, '') 
+                    .replace(/</g, '<').replace(/>/g, '>').replace(/&/g, '&') 
                     .trim();
 
                 navigator.clipboard.writeText(textToCopy)
                     .then(() => {
-                         // Use SweetAlert for success
                          Swal.fire({
                             icon: 'success',
                             title: 'Copié !',
                             text: 'L\'analyse a été copiée dans le presse-papiers.',
-                            timer: 1500, // Auto-close after 1.5 seconds
-                            showConfirmButton: false // Hide the confirmation button
+                            timer: 1500, 
+                            showConfirmButton: false 
                         });
                     })
                     .catch(err => {
                         console.error('Erreur de copie: ', err);
-                         // Use SweetAlert for error
                          Swal.fire({
                             icon: 'error',
                             title: 'Erreur de copie',
@@ -530,10 +512,9 @@
                     });
             }
 
-
             // --- Initial Setup ---
-            updateAcceptAttribute();
-            resetUI();
+            updateAcceptAttribute(); // Call once to set initial state
+            resetUI(); // Call resetUI which also calls updateAcceptAttribute
 
         }); // End DOMContentLoaded
     </script>