Spaces:

Docfile
/

Testpdf

Running

App Files Files Community

Docfile commited on 10 days ago

Commit

1f4ef47

verified ·

1 Parent(s): 8df3575

Update templates/index.html

Browse files

Files changed (1) hide show

templates/index.html +253 -365

templates/index.html CHANGED Viewed

@@ -3,412 +3,300 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Solveur Expert IA - Maths, Physique, Chimie</title>
-    <!-- Tailwind CSS Play CDN (v3 - JIT enabled) -->
     <script src="https://cdn.tailwindcss.com"></script>
-    <!-- Google Fonts -->
-    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&family=Fira+Code&display=swap" rel="stylesheet">
-    <!-- Font Awesome Icons -->
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
     <style>
-        /* Styles personnalisés complémentaires */
-        :root {
-            --primary-color: #2c3e50;
-            --secondary-color: #1abc9c;
-            --accent-color: #e74c3c;
-            --success-color: #27ae60;
-            --light-secondary-bg: #e8f8f5; /* For upload highlight */
         }
-        body {
-            font-family: 'Montserrat', sans-serif;
         }
-        .font-code {
-            font-family: 'Fira Code', monospace;
         }
-        /* Gradients can be defined here or as Tailwind arbitrary values if preferred */
-        .gradient-primary {
-            background-image: linear-gradient(to right, var(--secondary-color) 0%, #16a085 100%);
         }
-        .gradient-secondary {
-            background-image: linear-gradient(to right, var(--primary-color) 0%, #34495e 100%);
         }
         @keyframes spin {
-            to { transform: rotate(360deg); }
-        }
-        .animate-spin-custom {
-            animation: spin 0.8s linear infinite;
-        }
-        /* This class is added by JS, so define its properties here */
-        .upload-highlight {
-            border-color: var(--secondary-color) !important; /* Use !important if Tailwind specificity is an issue */
-            background-color: var(--light-secondary-bg) !important;
         }
     </style>
-    <script>
-        // Optional: Configure Tailwind if needed (e.g., extending theme colors)
-        // For this example, we'll rely on arbitrary values for CSS variables,
-        // which the Play CDN handles well.
-        // tailwind.config = {
-        //   theme: {
-        //     extend: {
-        //       colors: {
-        //         'custom-primary': 'var(--primary-color)',
-        //         'custom-secondary': 'var(--secondary-color)',
-        //         'custom-accent': 'var(--accent-color)',
-        //         'custom-success': 'var(--success-color)',
-        //       }
-        //     }
-        //   }
-        // }
-    </script>
 </head>
-<body class="bg-gray-50 text-gray-700 min-h-screen flex flex-col items-center py-6 px-4">
-    <div class="bg-white rounded-xl shadow-lg w-full max-w-2xl p-6 md:p-8">
-        <h1 class="flex items-center justify-center text-3xl font-bold text-center mb-2 text-[var(--primary-color)]">
-            <i class="fas fa-atom text-4xl mr-3 text-[var(--secondary-color)]"></i>
-            Solveur Expert IA
-        </h1>
-        <p class="text-center text-gray-500 mb-8">Solutions LaTeX précises pour Maths, Physique et Chimie.</p>
-        <div id="upload-section" class="relative border-2 border-dashed border-gray-300 rounded-xl p-8 mb-6 cursor-pointer transition-all duration-300 bg-gray-50 text-center group hover:border-[var(--secondary-color)] hover:bg-[var(--light-secondary-bg)]">
-            <div class="upload-content">
-                <i class="fas fa-file-arrow-up text-5xl mb-4 text-[var(--secondary-color)] transition-transform duration-300 transform group-hover:scale-110 group-hover:-translate-y-1"></i>
-                <p class="text-lg font-medium mb-1">Déposez l'image de votre exercice ici</p>
-                <p class="text-sm text-gray-500">ou cliquez pour sélectionner un fichier (PNG, JPG)</p>
-            </div>
-            <input type="file" id="file-input" accept="image/png, image/jpeg, image/webp" class="absolute inset-0 w-full h-full opacity-0 cursor-pointer">
-            <div id="image-preview-container" class="mt-4">
-                <img id="image-preview" src="#" alt="Aperçu de l'énoncé" class="hidden max-w-full max-h-64 rounded-lg mx-auto border border-gray-300 shadow-sm">
             </div>
-        </div>
-        <div class="bg-gray-50 rounded-xl p-5 mb-6 border border-gray-200">
-            <h3 class="flex items-center font-semibold text-[var(--primary-color)] mb-4">
-                <i class="fas fa-cogs mr-2 text-[var(--secondary-color)]"></i>Options de Formatage
-            </h3>
-            <div class="prompt-selector">
-                <label for="prompt-type" class="block font-medium mb-2">Style de la correction LaTeX :</label>
-                <div class="relative">
-                    <select id="prompt-type" name="prompt-type" class="w-full p-3 pr-10 rounded-xl border-2 border-gray-300 appearance-none bg-white focus:outline-none focus:border-[var(--secondary-color)] focus:ring-2 focus:ring-[var(--secondary-color)]/20 transition-all">
-                        <option value="refined">Format Raffiné & Complet (mise en page avancée)</option>
-                        <option value="light">Format Léger & Essentiel (LaTeX standard)</option>
-                    </select>
-                    <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-3 text-gray-700">
-                        <i class="fas fa-chevron-down"></i>
                     </div>
                 </div>
             </div>
-        </div>
-        <button id="solve-button" class="gradient-primary w-full py-4 px-6 rounded-xl text-white font-semibold text-lg tracking-wide flex items-center justify-center disabled:opacity-50 disabled:cursor-not-allowed disabled:bg-gray-400 disabled:shadow-none transition duration-300 transform hover:translate-y-px disabled:transform-none" disabled>
-            <i class="fas fa-rocket mr-2"></i>Obtenir la Solution
-        </button>
-        <a href="https://t.me/+ic4zemy1E1k0MzQ0" target="_blank" id="telegram-join-button" class="mt-4 w-full bg-blue-500 hover:bg-blue-600 text-white font-semibold py-3 px-6 rounded-xl flex items-center justify-center transition duration-300 transform hover:translate-y-px">
-            <i class="fab fa-telegram-plane mr-2"></i>Rejoindre le groupe Telegram
-        </a>
-        <div id="solving-container" class="hidden mt-8">
-            <div class="text-center mb-5">
-                <div id="status-message-element" class="flex items-center justify-center flex-wrap text-lg font-medium text-[var(--primary-color)]">
-                    <i class="fas fa-hourglass-start mr-2"></i>Prêt à résoudre votre exercice...
-                </div>
-            </div>
-            <div id="loading-spinner-element" class="hidden w-10 h-10 mx-auto my-6 border-4 border-gray-300 border-l-[var(--secondary-color)] rounded-full animate-spin-custom"></div>
-            <div class="flex items-center bg-blue-50 border-l-4 border-[var(--secondary-color)] p-4 rounded-xl my-6">
-                <i class="fab fa-telegram text-2xl text-[var(--secondary-color)] mr-3"></i>
-                <span>Une copie de la solution sera envoyée sur Telegram pour archivage.</span>
-            </div>
-            <div id="response-container-element" class="hidden mt-6 p-6 border border-gray-300 rounded-xl bg-white">
-                <h3 class="flex items-center font-semibold text-xl text-[var(--primary-color)] mb-4">
-                    <i class="fas fa-file-code mr-3 text-[var(--secondary-color)]"></i>Correction LaTeX Détaillée :
-                </h3>
-                <div id="response-output" class="font-code bg-gray-900 text-gray-200 p-5 rounded-xl overflow-x-auto whitespace-pre-wrap break-words max-h-96 mb-5 border border-gray-700"></div>
-                <button id="copy-button" class="gradient-secondary px-6 py-3 rounded-xl text-white font-medium flex items-center justify-center transition duration-300 transform hover:translate-y-px">
-                    <i class="fas fa-copy mr-2"></i>Copier le code LaTeX
-                </button>
             </div>
-            <div id="error-display-element" class="hidden bg-red-50 border-2 border-[var(--accent-color)] text-[var(--accent-color)] p-4 rounded-xl my-5 font-medium">
             </div>
         </div>
     </div>
-    <footer class="mt-12 mb-5 text-gray-500 text-sm text-center">
-        Solutions générées par <a href="#" target="_blank" class="text-[var(--secondary-color)] font-medium hover:underline">Mariam IA</a> © 2025 - Précision garantie.
     </footer>
     <script>
-        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-element');
-            const responseOutputDiv = document.getElementById('response-output');
-            const copyButton = document.getElementById('copy-button');
-            const statusMessageElement = document.getElementById('status-message-element');
-            const loadingSpinner = document.getElementById('loading-spinner-element');
-            const promptTypeSelect = document.getElementById('prompt-type');
-            const errorDisplay = document.getElementById('error-display-element');
-            let selectedFile = null;
-            let currentTaskId = null;
-            // --- Gestion du Drag and Drop améliorée ---
-            ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
-                uploadSection.addEventListener(eventName, preventDefaults, false);
-            });
-            function preventDefaults(e) {
-                e.preventDefault();
-                e.stopPropagation();
             }
-            // Hover effects are now handled by Tailwind's `group hover:` and `hover:` classes directly on #upload-section
-            // The .upload-highlight class is kept for explicit JS addition if needed elsewhere,
-            // but for dragenter/dragover, Tailwind's hover states are cleaner.
-            // If you still want JS to add a class for drag states:
-            ['dragenter', 'dragover'].forEach(eventName => {
-                uploadSection.addEventListener(eventName, () => {
-                    uploadSection.classList.add('upload-highlight');
-                }, false);
-            });
-            ['dragleave', 'drop'].forEach(eventName => {
-                uploadSection.addEventListener(eventName, () => {
-                    uploadSection.classList.remove('upload-highlight');
-                }, false);
-            });
-            uploadSection.addEventListener('drop', (e) => {
-                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) {
-                const allowedTypes = ['image/png', 'image/jpeg', 'image/webp'];
-                if (!allowedTypes.includes(file.type)) {
-                    displayError('Format de fichier non supporté.', 'Veuillez utiliser PNG, JPG ou WEBP.');
-                    selectedFile = null;
-                    solveButton.disabled = true;
-                    imagePreview.classList.add('hidden');
-                    return;
                 }
-                selectedFile = file;
-                solveButton.disabled = false;
-                errorDisplay.classList.add('hidden');
-                const reader = new FileReader();
-                reader.onload = (e) => {
-                    imagePreview.src = e.target.result;
-                    imagePreview.classList.remove('hidden');
-                };
-                reader.readAsDataURL(file);
             }
-            function displayError(message, details = null) {
-                let fullMessage = `<i class="fas fa-shield-halved mr-2"></i> ${message}`;
-                if (details) {
-                    fullMessage += `<br><small class="block mt-1 text-red-700 font-normal">${escapeHtml(details)}</small>`;
-                }
-                errorDisplay.innerHTML = fullMessage;
-                errorDisplay.classList.remove('hidden');
-                responseContainer.classList.add('hidden');
-                loadingSpinner.classList.add('hidden');
-                updateStatusUI('error_user', null);
             }
-            solveButton.addEventListener('click', () => {
-                if (!selectedFile) return;
-                solveButton.disabled = true;
-                solvingContainer.classList.remove('hidden');
-                responseContainer.classList.add('hidden');
-                responseOutputDiv.textContent = '';
-                errorDisplay.classList.add('hidden');
-                loadingSpinner.classList.remove('hidden');
-                updateStatusUI('pending', null, 'Préparation de la résolution...');
-                const formData = new FormData();
-                formData.append('image', selectedFile);
-                formData.append('prompt_type', promptTypeSelect.value);
-                fetch('/solve', {
-                    method: 'POST',
-                    body: formData
-                })
-                .then(response => {
-                    if (!response.ok) {
-                        return response.json().then(errData => {
-                            throw new Error(errData.error || `Erreur serveur : ${response.status}`);
-                        });
-                    }
-                    return response.json();
-                })
-                .then(data => {
-                    if (data.error) {
-                        throw new Error(data.error);
-                    }
-                    currentTaskId = data.task_id;
-                    updateStatusUI(data.status || 'pending', currentTaskId, "Lancement de l'analyse par l'IA...");
-                    const eventSource = new EventSource('/stream/' + currentTaskId);
-                    eventSource.onmessage = function(event) {
-                        const streamData = JSON.parse(event.data);
-                        if (streamData.error) {
-                            displayError(streamData.error, streamData.error_detail);
-                            if (streamData.response) {
-                                responseOutputDiv.textContent = streamData.response;
-                                responseContainer.classList.remove('hidden');
-                            }
-                            eventSource.close();
-                            solveButton.disabled = false;
-                            loadingSpinner.classList.add('hidden');
-                            return;
-                        }
-                        updateStatusUI(streamData.status, currentTaskId);
-                        if (streamData.status === 'completed' || streamData.status === 'completed_tex_only' || streamData.status === 'pdf_error') {
-                            responseContainer.classList.remove('hidden');
-                            loadingSpinner.classList.add('hidden');
-                            if (streamData.response) {
-                                responseOutputDiv.textContent = streamData.response;
-                            }
-                            if (streamData.status === 'pdf_error' && streamData.error_detail) {
-                                const statusEl = statusMessageElement.querySelector('.status-text');
-                                if(statusEl) statusEl.innerHTML += `<br><small class="pdf-error-detail block mt-1 text-orange-500"><i class="fas fa-file-invoice mr-1"></i> Erreur PDF: ${escapeHtml(streamData.error_detail)}</small>`;
-                            }
-                            eventSource.close();
-                            solveButton.disabled = false;
-                        }
-                    };
-                    eventSource.onerror = function() {
-                        eventSource.close();
-                        fetch('/task/' + currentTaskId)
-                            .then(resp => resp.json())
-                            .then(taskData => {
-                                updateStatusUI(taskData.status, currentTaskId);
-                                if (taskData.status === 'completed' || taskData.status === 'completed_tex_only' || taskData.status === 'pdf_error') {
-                                    responseContainer.classList.remove('hidden');
-                                    if (taskData.response) {
-                                        responseOutputDiv.textContent = taskData.response;
-                                    }
-                                    if (taskData.status === 'pdf_error' && taskData.error_detail) {
-                                       const statusEl = statusMessageElement.querySelector('.status-text');
-                                       if(statusEl) statusEl.innerHTML += `<br><small class="pdf-error-detail block mt-1 text-orange-500"><i class="fas fa-file-invoice mr-1"></i> Erreur PDF: ${escapeHtml(taskData.error_detail)}</small>`;
-                                    }
-                                } else if (taskData.status === 'error') {
-                                    displayError(taskData.error || 'Erreur inattendue lors de la récupération de la tâche.', taskData.error_detail);
-                                } else {
-                                    displayError('Connexion interrompue.', 'Le traitement se poursuit en arrière-plan. Vérifiez Telegram.');
-                                }
-                            })
-                            .catch(error => {
-                                displayError('Erreur de récupération du statut.', error.message);
-                            })
-                            .finally(() => {
-                                solveButton.disabled = false;
-                                loadingSpinner.classList.add('hidden');
-                            });
-                    };
-                })
-                .catch(error => {
-                    displayError(error.message || 'Erreur de communication serveur.');
-                    solveButton.disabled = false;
-                    loadingSpinner.classList.add('hidden');
-                });
-            });
-            function updateStatusUI(status, taskId, overrideMessage = null) {
-                const selectedPromptText = promptTypeSelect.options[promptTypeSelect.selectedIndex].text.split('(')[0].trim();
-                let statusMsg = overrideMessage || '';
-                let iconClass = 'fas fa-hourglass-start';
-                // We use inline style for icon color to ensure CSS variables are applied
-                let iconColorStyle = "color: var(--primary-color);";
-                if (!overrideMessage) {
-                    switch(status) {
-                        case 'pending': statusMsg = "Lancement de l'analyse par l'IA..."; iconClass = 'fas fa-play-circle'; break;
-                        case 'processing': statusMsg = "L'IA déchiffre votre exercice..."; iconClass = 'fas fa-brain'; iconColorStyle = 'color: var(--secondary-color);'; break;
-                        case 'generating_latex': statusMsg = "Construction de la solution LaTeX..."; iconClass = 'fas fa-scroll'; break;
-                        case 'cleaning_latex': statusMsg = "Peaufinage du code LaTeX..."; iconClass = 'fas fa-magic'; break;
-                        case 'generating_pdf': statusMsg = "Compilation du document PDF final..."; iconClass = 'fas fa-file-pdf'; iconColorStyle = 'color: var(--accent-color);'; break;
-                        case 'completed': statusMsg = "Solution Complète et Précise Générée !"; iconClass = 'fas fa-check-double'; iconColorStyle = 'color: var(--success-color);'; break;
-                        case 'completed_tex_only': statusMsg = "Solution LaTeX Précise Générée ! (PDF non requis/dispo)"; iconClass = 'fas fa-check-circle'; iconColorStyle = 'color: var(--success-color);'; break;
-                        case 'pdf_error': statusMsg = "Solution LaTeX Précise Générée ! (Erreur PDF)"; iconClass = 'fas fa-file-excel'; iconColorStyle = 'color: #f39c12;'; break; // Specific color
-                        case 'error': statusMsg = "Une anomalie technique est survenue."; iconClass = 'fas fa-times-circle'; iconColorStyle = 'color: var(--accent-color);'; break;
-                        case 'error_user': statusMsg = "Veuillez vérifier votre image."; iconClass = 'fas fa-exclamation-triangle'; iconColorStyle = 'color: var(--accent-color);'; break;
-                        default: statusMsg = `Progression: ${status}`; iconClass = 'fas fa-spinner fa-spin';
-                    }
                 }
-                let taskInfoHtml = '';
-                if (taskId) {
-                    taskInfoHtml = `<span class="text-sm text-gray-500 ml-2">(Tâche ${taskId.substring(0,6)} | Style: ${selectedPromptText})</span>`;
                 }
-                statusMessageElement.innerHTML = `<i class="${iconClass} mr-2" style="${iconColorStyle}"></i> <span class="status-text">${statusMsg}</span> ${taskInfoHtml}`;
             }
-            // Fonction corrigée ici !
-            function escapeHtml(unsafe) {
-                if (typeof unsafe !== 'string') return '';
-                return unsafe
-                    .replace(/&/g, "&")
-                    .replace(/</g, "<")
-                    .replace(/>/g, ">")
-                    .replace(/"/g, """)
-                    .replace(/'/g, "'");
             }
-            copyButton.addEventListener('click', () => {
-                const textToCopy = responseOutputDiv.textContent;
-                navigator.clipboard.writeText(textToCopy).then(() => {
-                    const originalIcon = copyButton.querySelector('i').className;
-                    const originalText = copyButton.childNodes[1] ? copyButton.childNodes[1].nodeValue.trim() : 'Copier le code LaTeX';
-                    copyButton.innerHTML = `<i class="fas fa-check mr-2"></i> Code Copié !`;
-                    copyButton.classList.remove('gradient-secondary');
-                    copyButton.style.backgroundColor = 'var(--success-color)';
-                    setTimeout(() => {
-                        copyButton.innerHTML = `<i class="${originalIcon} mr-2"></i> ${originalText}`;
-                        copyButton.classList.add('gradient-secondary');
-                        copyButton.style.backgroundColor = ''; // Revert to gradient
-                    }, 2500);
-                }).catch(err => {
-                    console.error('Erreur de copie: ', err);
-                    displayError('Copie échouée.', 'Veuillez copier manuellement le texte.');
-                });
-            });
         });
     </script>
 </body>
 </html>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Résolution d'exercices (Maths, Physique et Chimie)</title>
     <script src="https://cdn.tailwindcss.com"></script>
     <style>
+        /* Custom scrollbar for pre block (optional) */
+        pre::-webkit-scrollbar {
+            width: 8px;
+            height: 8px;
         }
+        pre::-webkit-scrollbar-track {
+            background: #f1f1f1;
+            border-radius: 10px;
         }
+        pre::-webkit-scrollbar-thumb {
+            background: #888;
+            border-radius: 10px;
         }
+        pre::-webkit-scrollbar-thumb:hover {
+            background: #555;
         }
+        .spinner {
+            border: 4px solid rgba(0, 0, 0, 0.1);
+            width: 36px;
+            height: 36px;
+            border-radius: 50%;
+            border-left-color: #0ea5e9; /* sky-500 */
+            animation: spin 1s ease infinite;
         }
         @keyframes spin {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
         }
     </style>
 </head>
+<body class="bg-slate-100 text-slate-800 min-h-screen flex flex-col items-center justify-center p-4 font-sans">
+    <div class="bg-white p-6 sm:p-8 rounded-xl shadow-2xl w-full max-w-2xl">
+        <header class="mb-6 sm:mb-8 text-center">
+            <h1 class="text-2xl sm:text-3xl font-bold text-sky-700">
+                Résolution d'Exercices
+            </h1>
+            <p class="text-sm text-slate-500">Mathématiques, Physique et Chimie</p>
+        </header>
+        <form id="solveForm" class="space-y-6">
+            <div>
+                <label for="imageUpload" class="block text-sm font-medium text-gray-700 mb-1">
+                    Télécharger une image de l'exercice :
+                </label>
+                <input type="file" id="imageUpload" name="image" accept="image/*" required
+                       class="block w-full text-sm text-slate-500
+                              file:mr-4 file:py-2 file:px-4
+                              file:rounded-full file:border-0
+                              file:text-sm file:font-semibold
+                              file:bg-sky-50 file:text-sky-700
+                              hover:file:bg-sky-100
+                              border border-gray-300 rounded-md p-2 focus:outline-none focus:ring-2 focus:ring-sky-500">
             </div>
+            <div>
+                <span class="block text-sm font-medium text-gray-700 mb-2">Choisir le format de la solution :</span>
+                <div class="space-y-2">
+                    <div class="flex items-center">
+                        <input id="promptRefined" name="prompt_type" type="radio" value="refined" checked
+                               class="h-4 w-4 text-sky-600 border-gray-300 focus:ring-sky-500">
+                        <label for="promptRefined" class="ml-2 block text-sm text-gray-900">
+                            Format Raffiné & Complet <span class="text-xs text-gray-500">(mise en page avancée)</span>
+                        </label>
+                    </div>
+                    <div class="flex items-center">
+                        <input id="promptLight" name="prompt_type" type="radio" value="light"
+                               class="h-4 w-4 text-sky-600 border-gray-300 focus:ring-sky-500">
+                        <label for="promptLight" class="ml-2 block text-sm text-gray-900">
+                            Format simple
+                        </label>
                     </div>
                 </div>
             </div>
+            <button type="submit" id="submitButton"
+                    class="w-full bg-sky-600 hover:bg-sky-700 text-white font-bold py-2.5 px-4 rounded-md
+                           focus:outline-none focus:ring-2 focus:ring-sky-500 focus:ring-offset-2
+                           transition duration-150 ease-in-out
+                           disabled:bg-slate-400 disabled:cursor-not-allowed">
+                Résoudre l'exercice
+            </button>
+        </form>
+        <div id="statusArea" class="mt-6 space-y-3 hidden">
+            <div class="flex items-center space-x-3 p-3 rounded-md bg-sky-50 border border-sky-200">
+                <div id="spinner" class="spinner hidden"></div>
+                <p id="statusMessage" class="text-sm font-medium text-sky-700"></p>
             </div>
+            <div id="errorMessage" class="p-3 rounded-md bg-red-50 border border-red-200 text-red-700 text-sm hidden"></div>
+            <div id="errorDetailMessage" class="p-3 rounded-md bg-amber-50 border border-amber-200 text-amber-700 text-sm hidden"></div>
+        </div>
+        <div id="resultArea" class="mt-6 hidden">
+            <h3 class="text-lg font-semibold text-slate-700 mb-2">Code LaTeX Généré :</h3>
+            <div class="bg-gray-900 text-gray-100 p-4 rounded-md shadow">
+                <pre><code id="latexOutput" class="text-sm whitespace-pre-wrap break-all block max-h-96 overflow-auto"></code></pre>
             </div>
+             <button id="copyLatexButton" class="mt-3 bg-slate-200 hover:bg-slate-300 text-slate-700 text-sm font-medium py-1.5 px-3 rounded-md transition duration-150 ease-in-out">
+                Copier le LaTeX
+            </button>
         </div>
     </div>
+    <footer class="mt-8 text-center text-xs text-slate-500">
+        <p>© 2025 Mariam AI - Solution Propulsée par Mariam</p>
     </footer>
     <script>
+        const solveForm = document.getElementById('solveForm');
+        const submitButton = document.getElementById('submitButton');
+        const imageUpload = document.getElementById('imageUpload');
+        const statusArea = document.getElementById('statusArea');
+        const spinner = document.getElementById('spinner');
+        const statusMessage = document.getElementById('statusMessage');
+        const errorMessage = document.getElementById('errorMessage');
+        const errorDetailMessage = document.getElementById('errorDetailMessage');
+        const resultArea = document.getElementById('resultArea');
+        const latexOutput = document.getElementById('latexOutput');
+        const copyLatexButton = document.getElementById('copyLatexButton');
+        let eventSource = null;
+        solveForm.addEventListener('submit', async function(event) {
+            event.preventDefault();
+            if (!imageUpload.files || imageUpload.files.length === 0) {
+                showError("Veuillez sélectionner un fichier image.");
+                return;
             }
+            submitButton.disabled = true;
+            showStatus("Initialisation...", true);
+            hideError();
+            hideResult();
+            const formData = new FormData(solveForm);
+            try {
+                const response = await fetch('/solve', {
+                    method: 'POST',
+                    body: formData
+                });
+                if (!response.ok) {
+                    const errorData = await response.json().catch(() => ({ error: 'Erreur serveur inconnue' }));
+                    throw new Error(errorData.error || `Erreur HTTP: ${response.status}`);
                 }
+                const data = await response.json();
+                if (data.task_id) {
+                    showStatus("Tâche créée. En attente de la réponse...", true);
+                    startStreaming(data.task_id);
+                } else {
+                    throw new Error("ID de tâche non reçu.");
                 }
+            } catch (error) {
+                showError(`Erreur lors de la soumission : ${error.message}`);
+                submitButton.disabled = false;
+                hideStatus();
             }
+        });
+        function startStreaming(taskId) {
+            if (eventSource) {
+                eventSource.close();
             }
+            eventSource = new EventSource(`/stream/${taskId}`);
+            showStatus("Connexion au flux de progression...", true);
+            eventSource.onmessage = function(event) {
+                const data = JSON.parse(event.data);
+                let userFriendlyStatus = data.status;
+                switch(data.status) {
+                    case 'pending': userFriendlyStatus = "En attente de traitement..."; break;
+                    case 'processing': userFriendlyStatus = "Traitement de l'image..."; break;
+                    case 'generating_latex': userFriendlyStatus = "Génération du code LaTeX en cours..."; break;
+                    case 'cleaning_latex': userFriendlyStatus = "Nettoyage du code LaTeX..."; break;
+                    case 'generating_pdf': userFriendlyStatus = "Génération du PDF en cours..."; break;
+                    case 'completed': userFriendlyStatus = "Terminé ! Solution générée (LaTeX et PDF)."; break;
+                    case 'completed_tex_only': userFriendlyStatus = "Terminé ! Solution LaTeX générée (PDF non disponible)."; break;
+                    case 'pdf_error': userFriendlyStatus = "Erreur lors de la génération du PDF. Le code LaTeX est disponible."; break;
+                    case 'error': userFriendlyStatus = "Une erreur est survenue."; break;
+                }
+                showStatus(userFriendlyStatus, !['completed', 'error', 'pdf_error', 'completed_tex_only'].includes(data.status));
+                if (data.error) {
+                    showError(data.error);
+                } else {
+                    hideError(); // Hide general error if a specific one is not present in this message
+                }
+                if (data.error_detail) {
+                    showErrorDetail(data.error_detail);
+                } else {
+                    hideErrorDetail();
+                }
+                if (data.response) {
+                    latexOutput.textContent = data.response;
+                    showResult();
                 }
+                if (['completed', 'error', 'pdf_error', 'completed_tex_only'].includes(data.status)) {
+                    eventSource.close();
+                    submitButton.disabled = false;
+                    if (data.status !== 'error' && !data.error) { // If not a critical error, keep status positive
+                         // Status already set by switch
+                    } else if (data.error) {
+                         showStatus("Traitement terminé avec des erreurs.", false);
+                    }
                 }
+            };
+            eventSource.onerror = function(err) {
+                console.error("Erreur EventSource:", err);
+                showError("Erreur de connexion au serveur pour les mises à jour. Veuillez réessayer.");
+                showStatus("Déconnecté.", false);
+                eventSource.close();
+                submitButton.disabled = false;
+            };
+        }
+        function showStatus(message, showSpinner = false) {
+            statusArea.classList.remove('hidden');
+            statusMessage.textContent = message;
+            if (showSpinner) {
+                spinner.classList.remove('hidden');
+            } else {
+                spinner.classList.add('hidden');
             }
+        }
+        function hideStatus() {
+            statusArea.classList.add('hidden');
+            spinner.classList.add('hidden');
+        }
+        function showError(message) {
+            errorMessage.textContent = message;
+            errorMessage.classList.remove('hidden');
+            statusArea.classList.remove('hidden'); // Ensure status area is visible to show error
+        }
+        function hideError() {
+            errorMessage.classList.add('hidden');
+            errorMessage.textContent = '';
+        }
+        function showErrorDetail(message) {
+            errorDetailMessage.textContent = message;
+            errorDetailMessage.classList.remove('hidden');
+            statusArea.classList.remove('hidden');
+        }
+         function hideErrorDetail() {
+            errorDetailMessage.classList.add('hidden');
+            errorDetailMessage.textContent = '';
+        }
+        function showResult() {
+            resultArea.classList.remove('hidden');
+        }
+        function hideResult() {
+            resultArea.classList.add('hidden');
+            latexOutput.textContent = '';
+        }
+        copyLatexButton.addEventListener('click', () => {
+            if (latexOutput.textContent) {
+                navigator.clipboard.writeText(latexOutput.textContent)
+                    .then(() => {
+                        const originalText = copyLatexButton.textContent;
+                        copyLatexButton.textContent = 'Copié !';
+                        setTimeout(() => {
+                            copyLatexButton.textContent = originalText;
+                        }, 2000);
+                    })
+                    .catch(err => {
+                        console.error('Erreur de copie: ', err);
+                        alert('Erreur lors de la copie du texte.');
+                    });
             }
         });
     </script>
 </body>
 </html>