Update templates/index.html

templates/index.html

@@ -136,11 +136,10 @@
                         <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_image" <!-- MODIFIED: value to distinguish if needed, or keep "text" if backend logic depends on it -->
+                        <input type="radio" name="fileType" value="text"
                                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>
-                        <!-- 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>
+                        <span class="text-sm text-gray-700 group-hover:text-indigo-600">Analyse de texte à partir d'une image (Image, Photo de texte...) avec méthodologie.</span>
                     </label>
                 </div>
             </div>
@@ -149,7 +148,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/*"> <!-- Default accept to image/* -->
+                    <input id="file-upload" name="file" type="file" class="sr-only" accept="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">
@@ -163,7 +162,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, WEBP) - Max 16MB</p> <!-- Default info text -->
+                        <p class="text-xs text-gray-500" id="file-types-info">Images (PNG, JPG, GIF, WEBP) - Max 16MB</p>
                     </div>
                  </div>
             </div>
@@ -173,7 +172,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> <!-- Kept for potential future use, but will be hidden for text_image -->
+                    <pre id="text-preview" class="text-sm text-gray-700 whitespace-pre-wrap hidden bg-white p-3 rounded shadow-inner"></pre>
                     <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">
@@ -228,7 +227,7 @@
             const fileInput = document.getElementById('file-upload');
             const preview = document.getElementById('preview');
             const imagePreview = document.getElementById('image-preview');
-            const textPreview = document.getElementById('text-preview'); // Still used for clearing
+            const textPreview = document.getElementById('text-preview'); // Still keep the element for completeness
             const fileInfo = document.getElementById('file-info');
             const removeFileButton = document.getElementById('remove-file-button');
             const submitButton = document.getElementById('submit-button');
@@ -241,10 +240,7 @@
             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({
                 breaks: true,
                 gfm: true,
@@ -256,14 +252,13 @@
                              return Prism.highlight(code, Prism.languages[lang], lang);
                         } catch (error) {
                             console.warn(`Prism highlighting failed for language ${lang}:`, error)
-                            return code; 
+                            return code;
                         }
                     }
                     return code;
                 }
             });
 
-            // --- Helper Functions ---
             function showLoading(isLoading) {
                 if (isLoading) {
                     submitButtonText.classList.add('hidden');
@@ -281,57 +276,49 @@
                 fileInput.value = '';
                 preview.classList.add('hidden');
                 imagePreview.classList.add('hidden');
-                textPreview.classList.add('hidden');
+                textPreview.classList.add('hidden'); // Ensure text preview is hidden
                 imagePreview.src = '#';
-                textPreview.textContent = '';
+                textPreview.textContent = ''; // Clear text preview content
                 fileInfo.textContent = '';
                 removeFileButton.classList.add('hidden');
                 results.classList.add('hidden');
                 analysisContent.innerHTML = '<p class="text-gray-500">L\'analyse apparaîtra ici...</p>';
                 submitButton.disabled = true;
                 showLoading(false);
-                updateAcceptAttribute(); // Ensure accept attribute is correct on reset
+                updateAcceptAttribute(); // Call this to set initial accept types
             }
 
             function updateAcceptAttribute() {
-                 const selectedType = document.querySelector('input[name="fileType"]:checked').value;
-                 // MODIFICATION: Both options now accept images
-                 fileInput.accept = imageMimeTypes;
-                 fileTypesInfo.textContent = imageInfoText;
+                 // Both options now accept images
+                 fileInput.accept = "image/png, image/jpeg, image/gif, image/webp";
+                 fileTypesInfo.textContent = "Images (PNG, JPG, GIF, WEBP) - Max 16MB";
 
                  if (selectedFile) {
-                    // Now, both types expect an image. If a file was selected, it must be an image.
+                    // Check if the currently selected file is an image
                     const isImage = selectedFile.type.startsWith('image/');
-                    if(!isImage) {
+                    if (!isImage) {
+                        // If a non-image file was somehow selected (e.g., before this logic was in place, or if user bypasses JS)
+                        // and then the radio changes, reset.
                         resetUI();
                         Swal.fire({
                             icon: 'warning',
                             title: 'Type de fichier incompatible',
-                            text: 'Seuls les fichiers images sont acceptés. Veuillez resélectionner votre fichier.',
+                            text: 'Seuls les fichiers image (PNG, JPG, GIF, WEBP) sont acceptés. Veuillez resélectionner votre fichier.',
                         });
                     }
                  }
             }
 
-
-            // --- Event Listeners ---
             fileTypeRadios.forEach(radio => {
                 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
+                    // Update accept attribute (though it's always images now)
+                    updateAcceptAttribute();
+                    // If a file is selected, and it's not an image (which shouldn't happen with current validation),
+                    // the updateAcceptAttribute will handle resetting.
+                    // Otherwise, no need to clear selection if it's already an image.
                 });
             });
+
             uploadZone.addEventListener('click', () => fileInput.click());
             uploadZone.addEventListener('dragover', (e) => {
                 e.preventDefault();
@@ -357,10 +344,8 @@
             copyAnalysisButton.addEventListener('click', copyAnalysisToClipboard);
 
 
-            // --- Core Logic Functions ---
-
             function handleFileSelection(file) {
-                // const fileType = document.querySelector('input[name="fileType"]:checked').value; // fileType radio value
+                // const intendedAnalysisType = document.querySelector('input[name="fileType"]:checked').value; // For future use if needed
                 const maxFileSize = 16 * 1024 * 1024;
 
                  if (file.size > maxFileSize) {
@@ -375,11 +360,11 @@
 
                  const allowedImageTypes = ['image/png', 'image/jpeg', 'image/gif', 'image/webp'];
 
-                 // MODIFICATION: Always validate as image
+                 // Both radio options now expect an image
                  if (!allowedImageTypes.includes(file.type)) {
                     const isImageTypeByName = /\.(jpe?g|png|gif|webp)$/i.test(file.name);
-                    if (!isImageTypeByName) {
-                       Swal.fire({ 
+                    if (!isImageTypeByName) { // Check by extension as a fallback
+                       Swal.fire({
                            icon: 'error',
                            title: 'Type de fichier invalide',
                            text: 'Veuillez sélectionner une image (PNG, JPG, GIF, WEBP).'
@@ -389,6 +374,7 @@
                     }
                  }
 
+                // If validation passes:
                 selectedFile = file;
                 preview.classList.remove('hidden');
                 preview.classList.add('fade-in');
@@ -397,30 +383,29 @@
                 fileInfo.textContent = `${file.name} (${(file.size / 1024).toFixed(1)} Ko)`;
                 removeFileButton.classList.remove('hidden');
 
-                // MODIFICATION: Always show image preview
+                // 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 image avant de lancer l\'analyse.', 'warning');
+                     Swal.fire('Aucun fichier', 'Veuillez sélectionner un fichier avant de lancer l\'analyse.', 'warning');
                     return;
                 }
 
-                // 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.
+                // This 'fileTypeForBackend' is crucial for the backend
                 const fileTypeForBackend = document.querySelector('input[name="fileType"]:checked').value;
                 const formData = new FormData();
-                formData.append('file', selectedFile);
-                formData.append('fileType', fileTypeForBackend); // Send the selected radio value
+                formData.append('file', selectedFile); // This will always be an image file
+                formData.append('fileType', fileTypeForBackend); // This will be 'image' or 'text' based on radio
 
                 showLoading(true);
                 results.classList.add('hidden');
@@ -467,7 +452,8 @@
                         text: error.message || 'Une erreur inconnue est survenue.',
                     });
                     console.error('Error during analysis:', error);
-                    submitButton.disabled = false; 
+                    // Do not re-enable button if there was a selected file, let user reset or try again with same file
+                    // submitButton.disabled = (selectedFile === null);
                 });
             }
 
@@ -487,9 +473,9 @@
                     .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') 
-                    .replace(/<[^>]+>/g, '') 
-                    .replace(/</g, '<').replace(/>/g, '>').replace(/&/g, '&') 
+                    .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)
@@ -498,8 +484,8 @@
                             icon: 'success',
                             title: 'Copié !',
                             text: 'L\'analyse a été copiée dans le presse-papiers.',
-                            timer: 1500, 
-                            showConfirmButton: false 
+                            timer: 1500,
+                            showConfirmButton: false
                         });
                     })
                     .catch(err => {
@@ -512,9 +498,7 @@
                     });
             }
 
-            // --- Initial Setup ---
-            updateAcceptAttribute(); // Call once to set initial state
-            resetUI(); // Call resetUI which also calls updateAcceptAttribute
+            resetUI(); // Initial setup call
 
         }); // End DOMContentLoaded
     </script>