Update templates/index.html

templates/index.html

@@ -127,26 +127,26 @@
         <div class="bg-white rounded-2xl shadow-xl p-6 md:p-8 mb-8 slide-up">
             <!-- File Type Selection -->
             <div class="mb-6">
-                <label class="block text-base font-medium text-gray-700 mb-3">1. Choisissez le type de document</label>
+                <label class="block text-base font-medium text-gray-700 mb-3">1. Choisissez le type de document et la méthodologie</label>
                 <div class="flex flex-col sm:flex-row gap-4">
                     <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="image" checked
                                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 iconographique (Image, Photo, Dessin...) avec méthodologie.</span>
+                        <span class="text-sm text-gray-700 group-hover:text-indigo-600">Image (Photo, Dessin...) avec méthodologie iconographique.</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_method_image_input"
                                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">Analyse de texte à partir d'une image (Image, Photo de texte...) avec méthodologie.</span>
+                        <span class="text-sm text-gray-700 group-hover:text-indigo-600">Image (Photo, Dessin...) avec méthodologie textuelle.</span>
                     </label>
                 </div>
             </div>
 
             <!-- Upload Zone -->
              <div class="mb-6">
-                 <label class="block text-base font-medium text-gray-700 mb-3">2. Sélectionnez votre fichier</label>
+                 <label class="block text-base font-medium text-gray-700 mb-3">2. Sélectionnez votre fichier image</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/*">
                     <div class="space-y-3">
@@ -172,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>
+                    <pre id="text-preview" class="text-sm text-gray-700 whitespace-pre-wrap hidden bg-white p-3 rounded shadow-inner"></pre> <!-- Keep for potential future text use, but hide -->
                     <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 +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 keep the element for completeness
+            const textPreview = document.getElementById('text-preview'); // Keep reference, but won't be used for 2nd option
             const fileInfo = document.getElementById('file-info');
             const removeFileButton = document.getElementById('remove-file-button');
             const submitButton = document.getElementById('submit-button');
@@ -276,9 +276,9 @@
                 fileInput.value = '';
                 preview.classList.add('hidden');
                 imagePreview.classList.add('hidden');
-                textPreview.classList.add('hidden'); // Ensure text preview is hidden
+                textPreview.classList.add('hidden');
                 imagePreview.src = '#';
-                textPreview.textContent = ''; // Clear text preview content
+                textPreview.textContent = '';
                 fileInfo.textContent = '';
                 removeFileButton.classList.add('hidden');
                 results.classList.add('hidden');
@@ -289,36 +289,33 @@
             }
 
             function updateAcceptAttribute() {
+                 const selectedType = document.querySelector('input[name="fileType"]:checked').value;
                  // 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 (selectedType === 'image') {
+                     fileTypesInfo.textContent = "Images (PNG, JPG, GIF, WEBP) pour analyse iconographique - Max 16MB";
+                 } else if (selectedType === 'text_method_image_input') {
+                     fileTypesInfo.textContent = "Images (PNG, JPG, GIF, WEBP) pour analyse textuelle - Max 16MB";
+                 }
 
                  if (selectedFile) {
-                    // Check if the currently selected file is an image
+                    // Check if the currently selected file is an image, regardless of radio button choice
                     const isImage = selectedFile.type.startsWith('image/');
-                    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.
+                    if(!isImage) {
                         resetUI();
                         Swal.fire({
                             icon: 'warning',
-                            title: 'Type de fichier incompatible',
-                            text: 'Seuls les fichiers image (PNG, JPG, GIF, WEBP) sont acceptés. Veuillez resélectionner votre fichier.',
+                            title: 'Type de fichier changé ou invalide',
+                            text: 'Seuls les fichiers images sont acceptés. Veuillez resélectionner votre fichier.',
                         });
                     }
                  }
             }
 
             fileTypeRadios.forEach(radio => {
-                radio.addEventListener('change', () => {
-                    // 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.
-                });
+                radio.addEventListener('change', updateAcceptAttribute);
             });
-
             uploadZone.addEventListener('click', () => fileInput.click());
             uploadZone.addEventListener('dragover', (e) => {
                 e.preventDefault();
@@ -343,9 +340,8 @@
             submitButton.addEventListener('click', handleSubmit);
             copyAnalysisButton.addEventListener('click', copyAnalysisToClipboard);
 
-
             function handleFileSelection(file) {
-                // const intendedAnalysisType = document.querySelector('input[name="fileType"]:checked').value; // For future use if needed
+                const fileTypeOption = document.querySelector('input[name="fileType"]:checked').value; // To know which methodology
                 const maxFileSize = 16 * 1024 * 1024;
 
                  if (file.size > maxFileSize) {
@@ -360,10 +356,10 @@
 
                  const allowedImageTypes = ['image/png', 'image/jpeg', 'image/gif', 'image/webp'];
 
-                 // Both radio options now expect an image
+                 // Both options now expect an image
                  if (!allowedImageTypes.includes(file.type)) {
                     const isImageTypeByName = /\.(jpe?g|png|gif|webp)$/i.test(file.name);
-                    if (!isImageTypeByName) { // Check by extension as a fallback
+                    if (!isImageTypeByName) {
                        Swal.fire({
                            icon: 'error',
                            title: 'Type de fichier invalide',
@@ -374,7 +370,6 @@
                     }
                  }
 
-                // If validation passes:
                 selectedFile = file;
                 preview.classList.remove('hidden');
                 preview.classList.add('fade-in');
@@ -383,15 +378,13 @@
                 fileInfo.textContent = `${file.name} (${(file.size / 1024).toFixed(1)} Ko)`;
                 removeFileButton.classList.remove('hidden');
 
-                // Always show image preview
+                // Always show image preview now
                 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;
             }
 
@@ -401,11 +394,11 @@
                     return;
                 }
 
-                // This 'fileTypeForBackend' is crucial for the backend
-                const fileTypeForBackend = document.querySelector('input[name="fileType"]:checked').value;
+                const fileTypeForAnalysis = document.querySelector('input[name="fileType"]:checked').value;
                 const formData = new FormData();
-                formData.append('file', selectedFile); // This will always be an image file
-                formData.append('fileType', fileTypeForBackend); // This will be 'image' or 'text' based on radio
+                formData.append('file', selectedFile);
+                // This 'fileType' will tell the backend which prompt/methodology to use
+                formData.append('fileType', fileTypeForAnalysis); 
 
                 showLoading(true);
                 results.classList.add('hidden');
@@ -438,7 +431,6 @@
                         } else {
                             console.warn("Prism n'est pas chargé, impossible de colorer la syntaxe.");
                         }
-
                         results.scrollIntoView({ behavior: 'smooth', block: 'start' });
                     } else {
                         throw new Error(data.error || "L'analyse n'a pas pu être générée.");
@@ -452,8 +444,7 @@
                         text: error.message || 'Une erreur inconnue est survenue.',
                     });
                     console.error('Error during analysis:', error);
-                    // Do not re-enable button if there was a selected file, let user reset or try again with same file
-                    // submitButton.disabled = (selectedFile === null);
+                    submitButton.disabled = (selectedFile === null);
                 });
             }
 
@@ -475,7 +466,7 @@
                     .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(/</g, '<').replace(/>/g, '>').replace(/&/g, '&') // Basic decoding
                     .trim();
 
                 navigator.clipboard.writeText(textToCopy)
@@ -498,9 +489,9 @@
                     });
             }
 
-            resetUI(); // Initial setup call
-
-        }); // End DOMContentLoaded
+            updateAcceptAttribute(); // Initial call
+            resetUI(); // Initial reset
+        });
     </script>
 </body>
 </html>