Spaces:

Docfile
/

Testpdf

Running

App Files Files Community

Docfile commited on 5 days ago

Commit

e6fa8ea

verified ·

1 Parent(s): 3de25c1

Update templates/index.html

Browse files

Files changed (1) hide show

templates/index.html +178 -45

templates/index.html CHANGED Viewed

@@ -3,7 +3,7 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Résolveur d'Images - Mariam</title>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.16.7/katex.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.16.7/contrib/auto-render.min.js"></script>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.16.7/katex.min.css">
@@ -13,6 +13,8 @@
             --primary-hover: #2980b9;
             --secondary-color: #2ecc71;
             --secondary-hover: #27ae60;
             --background-color: #f4f7f6;
             --text-color: #333;
             --border-color: #e0e0e0;
@@ -164,18 +166,44 @@
             display: none;
         }
-        .preview-container {
             margin-top: var(--spacing-unit);
         }
-        #image-preview {
-            max-width: 100%;
-            max-height: 300px;
-            display: none;
-            border-radius: 0.5rem;
             border: 1px solid var(--border-color);
         }
         .button {
             width: 100%;
             padding: var(--spacing-unit);
@@ -199,12 +227,21 @@
             background-color: #bdc3c7;
             cursor: not-allowed;
         }
         .copy-button {
             background-color: var(--secondary-color);
         }
-        .copy-button:hover {
             background-color: var(--secondary-hover);
         }
@@ -302,6 +339,13 @@
                 padding: calc(var(--spacing-unit) * 0.75) var(--spacing-unit);
                 font-size: 0.95rem;
             }
         }
     </style>
 </head>
@@ -341,13 +385,14 @@
         <div id="upload-section" class="upload-section">
             <div class="upload-icon">📤</div>
-            <p>Cliquez ou glissez-déposez une image ici</p>
-            <input type="file" id="file-input" accept="image/*">
-            <div class="preview-container">
-                <img id="image-preview" src="#" alt="Aperçu de l'image">
             </div>
         </div>
         <button id="solve-button" class="button" disabled>🔍 Résoudre</button>
         <div id="solving-container">
@@ -368,8 +413,9 @@
         document.addEventListener('DOMContentLoaded', function() {
             const uploadSection = document.getElementById('upload-section');
             const fileInput = document.getElementById('file-input');
-            const imagePreview = document.getElementById('image-preview');
             const solveButton = document.getElementById('solve-button');
             const solvingContainer = document.getElementById('solving-container');
             const responseContainer = document.getElementById('response-container');
             const responseDiv = document.getElementById('response');
@@ -377,7 +423,7 @@
             const statusElement = document.getElementById('status');
             const loadingText = document.getElementById('loading-text');
-            let selectedFile = null;
             window.selectStyle = function(style) {
                 document.getElementById(`style-${style}`).checked = true;
@@ -402,39 +448,105 @@
                 uploadSection.style.backgroundColor = '#f8f9fa';
                 if (e.dataTransfer.files.length) {
-                    handleFileSelection(e.dataTransfer.files[0]);
                 }
             });
             fileInput.addEventListener('change', (e) => {
                 if (e.target.files.length) {
-                    handleFileSelection(e.target.files[0]);
                 }
             });
-            function handleFileSelection(file) {
-                if (!file.type.startsWith('image/')) {
-                    alert('Veuillez sélectionner une image valide (format PNG, JPG, GIF, etc.)');
-                    return;
-                }
-                selectedFile = file;
-                solveButton.disabled = false;
-                solveButton.textContent = '🔍 Résoudre';
-                const reader = new FileReader();
-                reader.onload = (e) => {
-                    imagePreview.src = e.target.result;
-                    imagePreview.style.display = 'block';
-                };
-                reader.readAsDataURL(file);
                 solvingContainer.style.display = 'none';
                 responseContainer.style.display = 'none';
             }
             solveButton.addEventListener('click', () => {
-                if (!selectedFile) return;
                 const selectedStyle = document.querySelector('input[name="resolution-style"]:checked').value;
@@ -448,9 +560,16 @@
                 responseDiv.innerHTML = '';
                 const formData = new FormData();
-                formData.append('image', selectedFile);
                 formData.append('style', selectedStyle);
                 fetch('/solve', {
                     method: 'POST',
                     body: formData
@@ -476,10 +595,14 @@
                         if (data.error) {
                             handleError(data.error);
                             return;
                         }
                         updateStatus(data);
                     };
                     eventSource.onerror = function() {
@@ -505,7 +628,7 @@
                         statusElement.textContent = 'En file d\'attente...';
                         break;
                     case 'processing':
-                        statusElement.innerHTML = '<span class="thinking">Mariam</span> traite votre image... <br><small>La réponse sera également envoyée sur Telegram.</small>';
                         break;
                     case 'completed':
                         statusElement.className = 'status completed';
@@ -523,27 +646,37 @@
             function showResponse() {
                 responseContainer.style.display = 'block';
                 loadingText.style.display = 'none';
-                solveButton.disabled = false;
-                solveButton.textContent = '🔍 Résoudre';
             }
             function handleEventSourceError(taskId) {
                 fetch('/task/' + taskId)
-                    .then(response => response.json())
                     .then(taskData => {
-                        if (taskData.status === 'completed') {
                             updateStatus({
                                 status: 'completed',
                                 response: taskData.response
                             });
                         } else if (taskData.status === 'error' || taskData.error) {
-                            handleError(taskData.error || 'Une erreur est survenue.');
                         } else {
-                            handleError('La connexion au flux a été perdue. La réponse sera envoyée sur Telegram.');
                         }
                     })
-                    .catch(() => {
-                        handleError('La connexion au flux a été perdue et la récupération a échoué.');
                     });
             }
@@ -587,4 +720,4 @@
         });
     </script>
 </body>
-</html>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Résolveur d'Images & PDF - Mariam</title>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.16.7/katex.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.16.7/contrib/auto-render.min.js"></script>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.16.7/katex.min.css">
             --primary-hover: #2980b9;
             --secondary-color: #2ecc71;
             --secondary-hover: #27ae60;
+            --danger-color: #e74c3c;
+            --danger-hover: #c0392b;
             --background-color: #f4f7f6;
             --text-color: #333;
             --border-color: #e0e0e0;
             display: none;
         }
+        #file-preview-area {
             margin-top: var(--spacing-unit);
+            display: flex;
+            flex-wrap: wrap;
+            gap: var(--spacing-unit);
+            justify-content: center;
         }
+        .preview-item {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            gap: calc(var(--spacing-unit) * 0.5);
+            padding: calc(var(--spacing-unit) * 0.5);
             border: 1px solid var(--border-color);
+            border-radius: 0.5rem;
+            background-color: #fdfdfd;
+        }
+        .preview-item img {
+            max-width: 100px;
+            max-height: 100px;
+            border-radius: 0.25rem;
+            object-fit: cover;
+        }
+        .preview-item .pdf-icon {
+            font-size: 3rem; /* Adjust as needed */
+            color: var(--danger-color);
+        }
+        .preview-item span {
+            font-size: 0.8rem;
+            color: #555;
+            word-break: break-all;
+            max-width: 100px;
+            text-align: center;
         }
         .button {
             width: 100%;
             padding: var(--spacing-unit);
             background-color: #bdc3c7;
             cursor: not-allowed;
         }
+        .clear-button {
+            background-color: var(--danger-color);
+            margin-top: 0; /* No top margin if it follows directly */
+        }
+        .clear-button:hover:not(:disabled) {
+            background-color: var(--danger-hover);
+        }
         .copy-button {
             background-color: var(--secondary-color);
         }
+        .copy-button:hover:not(:disabled) {
             background-color: var(--secondary-hover);
         }
                 padding: calc(var(--spacing-unit) * 0.75) var(--spacing-unit);
                 font-size: 0.95rem;
             }
+            .preview-item img {
+                max-width: 80px;
+                max-height: 80px;
+            }
+            .preview-item .pdf-icon {
+                font-size: 2.5rem;
+            }
         }
     </style>
 </head>
         <div id="upload-section" class="upload-section">
             <div class="upload-icon">📤</div>
+            <p>Cliquez ou glissez-déposez vos images et/ou 1 fichier PDF ici</p>
+            <input type="file" id="file-input" accept="image/*,application/pdf" multiple>
+            <div id="file-preview-area">
+                <!-- Les aperçus des fichiers seront ajoutés ici -->
             </div>
         </div>
+        <button id="clear-files-button" class="button clear-button" style="display: none;">🗑️ Effacer les fichiers</button>
         <button id="solve-button" class="button" disabled>🔍 Résoudre</button>
         <div id="solving-container">
         document.addEventListener('DOMContentLoaded', function() {
             const uploadSection = document.getElementById('upload-section');
             const fileInput = document.getElementById('file-input');
+            const filePreviewArea = document.getElementById('file-preview-area');
             const solveButton = document.getElementById('solve-button');
+            const clearFilesButton = document.getElementById('clear-files-button');
             const solvingContainer = document.getElementById('solving-container');
             const responseContainer = document.getElementById('response-container');
             const responseDiv = document.getElementById('response');
             const statusElement = document.getElementById('status');
             const loadingText = document.getElementById('loading-text');
+            let selectedFiles = []; // Tableau pour stocker les fichiers sélectionnés
             window.selectStyle = function(style) {
                 document.getElementById(`style-${style}`).checked = true;
                 uploadSection.style.backgroundColor = '#f8f9fa';
                 if (e.dataTransfer.files.length) {
+                    handleFileSelection(e.dataTransfer.files);
                 }
             });
             fileInput.addEventListener('change', (e) => {
                 if (e.target.files.length) {
+                    handleFileSelection(e.target.files);
                 }
             });
+            function handleFileSelection(files) {
+                const newFiles = Array.from(files);
+                let pdfAlreadySelected = selectedFiles.some(f => f.type === 'application/pdf');
+                newFiles.forEach(file => {
+                    if (file.type.startsWith('image/')) {
+                        if (!selectedFiles.some(sf => sf.name === file.name && sf.size === file.size)) { // Évite les doublons
+                             selectedFiles.push(file);
+                        }
+                    } else if (file.type === 'application/pdf') {
+                        if (!pdfAlreadySelected) {
+                            // Supprimer tout PDF existant avant d'ajouter le nouveau
+                            selectedFiles = selectedFiles.filter(f => f.type !== 'application/pdf');
+                            selectedFiles.push(file);
+                            pdfAlreadySelected = true; // Marquer qu'un PDF est maintenant sélectionné
+                        } else {
+                            alert('Vous ne pouvez sélectionner qu\'un seul fichier PDF.');
+                        }
+                    } else {
+                        alert(`Le fichier "${file.name}" n'est pas une image ou un PDF valide et sera ignoré.`);
+                    }
+                });
+                updateFilePreviews();
+                updateButtonsState();
                 solvingContainer.style.display = 'none';
                 responseContainer.style.display = 'none';
             }
+            function updateFilePreviews() {
+                filePreviewArea.innerHTML = ''; // Clear previous previews
+                if (selectedFiles.length === 0) {
+                    filePreviewArea.style.display = 'none';
+                    return;
+                }
+                filePreviewArea.style.display = 'flex';
+                selectedFiles.forEach(file => {
+                    const previewItem = document.createElement('div');
+                    previewItem.classList.add('preview-item');
+                    const fileNameSpan = document.createElement('span');
+                    fileNameSpan.textContent = file.name.length > 15 ? file.name.substring(0,12) + "..." : file.name;
+                    if (file.type.startsWith('image/')) {
+                        const img = document.createElement('img');
+                        const reader = new FileReader();
+                        reader.onload = (e) => {
+                            img.src = e.target.result;
+                        };
+                        reader.readAsDataURL(file);
+                        previewItem.appendChild(img);
+                    } else if (file.type === 'application/pdf') {
+                        const pdfIcon = document.createElement('div');
+                        pdfIcon.classList.add('pdf-icon');
+                        pdfIcon.textContent = '📄'; // Ou une icône SVG/FontAwesome
+                        previewItem.appendChild(pdfIcon);
+                    }
+                    previewItem.appendChild(fileNameSpan);
+                    filePreviewArea.appendChild(previewItem);
+                });
+            }
+            function updateButtonsState() {
+                if (selectedFiles.length > 0) {
+                    solveButton.disabled = false;
+                    solveButton.textContent = `🔍 Résoudre (${selectedFiles.length} fichier(s))`;
+                    clearFilesButton.style.display = 'block';
+                } else {
+                    solveButton.disabled = true;
+                    solveButton.textContent = '🔍 Résoudre';
+                    clearFilesButton.style.display = 'none';
+                }
+            }
+            clearFilesButton.addEventListener('click', () => {
+                selectedFiles = [];
+                fileInput.value = ''; // Important pour permettre de re-sélectionner les mêmes fichiers
+                updateFilePreviews();
+                updateButtonsState();
+                solvingContainer.style.display = 'none';
+                responseContainer.style.display = 'none';
+            });
             solveButton.addEventListener('click', () => {
+                if (selectedFiles.length === 0) return;
                 const selectedStyle = document.querySelector('input[name="resolution-style"]:checked').value;
                 responseDiv.innerHTML = '';
                 const formData = new FormData();
+                selectedFiles.forEach(file => {
+                    formData.append('user_files', file); // Envoyer chaque fichier sous la clé 'user_files'
+                });
                 formData.append('style', selectedStyle);
+                // Pour le débogage : afficher le contenu de FormData
+                // for (let [key, value] of formData.entries()) {
+                //     console.log(`${key}: ${value.name || value}`);
+                // }
                 fetch('/solve', {
                     method: 'POST',
                     body: formData
                         if (data.error) {
                             handleError(data.error);
+                            eventSource.close(); // Important de fermer en cas d'erreur finale
                             return;
                         }
                         updateStatus(data);
+                        if (data.status === 'completed' || data.status === 'error') {
+                            eventSource.close();
+                        }
                     };
                     eventSource.onerror = function() {
                         statusElement.textContent = 'En file d\'attente...';
                         break;
                     case 'processing':
+                        statusElement.innerHTML = '<span class="thinking">Mariam</span> traite vos fichiers... <br><small>La réponse sera également envoyée sur Telegram.</small>';
                         break;
                     case 'completed':
                         statusElement.className = 'status completed';
             function showResponse() {
                 responseContainer.style.display = 'block';
                 loadingText.style.display = 'none';
+                // Ne pas réactiver le bouton ici si on veut attendre que l'utilisateur efface les fichiers
+                // solveButton.disabled = false;
+                // solveButton.textContent = `🔍 Résoudre (${selectedFiles.length} fichier(s))`;
+                // Laisser le bouton "Effacer les fichiers" comme principal moyen de recommencer
             }
             function handleEventSourceError(taskId) {
+                 // Essayer de récupérer l'état final de la tâche
                 fetch('/task/' + taskId)
+                    .then(response => {
+                        if (!response.ok) {
+                           throw new Error(`Erreur serveur lors de la récupération de la tâche: ${response.status}`);
+                        }
+                        return response.json();
+                    })
                     .then(taskData => {
+                        if (taskData.status === 'completed' && taskData.response) {
                             updateStatus({
                                 status: 'completed',
                                 response: taskData.response
                             });
                         } else if (taskData.status === 'error' || taskData.error) {
+                            handleError(taskData.error || 'Une erreur est survenue lors du traitement de la tâche.');
                         } else {
+                             // Si la tâche n'est pas terminée ou en erreur, mais que le flux est perdu.
+                            handleError('La connexion au flux a été perdue. Vérifiez Telegram ou réessayez plus tard.');
                         }
                     })
+                    .catch((err) => {
+                        console.error("Erreur lors de la récupération de l'état de la tâche:", err);
+                        handleError('La connexion au flux a été perdue et la récupération de l\'état final a échoué. La réponse pourrait être sur Telegram.');
                     });
             }
         });
     </script>
 </body>
+</html>