Update templates/index.html

templates/index.html

@@ -9,34 +9,51 @@
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
     <style>
         @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
-        
+
         body {
             font-family: 'Poppins', sans-serif;
             background-color: #f8fafc;
         }
-        
+
         .drop-zone {
             border: 2px dashed #4f46e5;
             transition: all 0.3s ease;
         }
-        
+
         .drop-zone:hover, .drop-zone.active {
             border-color: #4338ca;
             background-color: #eef2ff;
         }
-        
+
         pre {
             white-space: pre-wrap;
             word-wrap: break-word;
-            max-height: 500px;
+            max-height: 500px; /* Hauteur max pour les blocs de code/log */
             overflow-y: auto;
+            background-color: #f9fafb; /* Fond légèrement différent pour pre */
+            border: 1px solid #e5e7eb;
+            border-radius: 0.375rem; /* rounded-md */
         }
-        
+
         .pdf-container {
-            height: 80vh;
-            border: 1px solid #e5e7eb;
-            border-radius: 0.5rem;
-            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+            height: 80vh; /* Hauteur fixe pour le conteneur PDF */
+            border: 1px solid #e5e7eb; /* gray-200 */
+            border-radius: 0.5rem; /* rounded-lg */
+            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); /* shadow-md */
+            overflow: hidden; /* Pour s'assurer que l'iframe reste dedans */
+        }
+
+        /* Style pour le log de compilation lorsqu'il y a une erreur */
+        .compilation-log-error {
+             border-left: 4px solid #ef4444; /* red-500 */
+             background-color: #fee2e2; /* red-100 */
+             padding: 1rem; /* p-4 */
+             margin-top: 1rem; /* mt-4 */
+        }
+        .compilation-log-error pre {
+            background-color: #fff; /* Fond blanc pour le log lui-même */
+            border-color: #fecaca; /* red-200 */
+            color: #374151; /* gray-700 */
         }
     </style>
 </head>
@@ -64,39 +81,55 @@
     <!-- Main Content -->
     <main class="container mx-auto px-4 py-8">
         <!-- Status Alert -->
-        <div x-show="systemStatus.show" :class="systemStatus.type === 'error' ? 'bg-red-100 border-red-500 text-red-800' : 'bg-green-100 border-green-500 text-green-800'" 
-             class="mb-6 p-4 border-l-4 rounded-md flex items-start">
-            <div class="flex-shrink-0 mr-3">
-                <i :class="systemStatus.type === 'error' ? 'fas fa-exclamation-circle' : 'fas fa-check-circle'" class="text-xl"></i>
+        <div x-show="systemStatus.show"
+             :class="{
+                'bg-red-100 border-red-500 text-red-800': systemStatus.type === 'error',
+                'bg-green-100 border-green-500 text-green-800': systemStatus.type === 'success',
+                'bg-yellow-100 border-yellow-500 text-yellow-800': systemStatus.type === 'warning',
+                'bg-blue-100 border-blue-500 text-blue-800': systemStatus.type === 'info'
+             }"
+             class="mb-6 p-4 border-l-4 rounded-md flex items-start shadow">
+            <div class="flex-shrink-0 mr-3 mt-1">
+                <i :class="{
+                    'fas fa-exclamation-circle text-red-500': systemStatus.type === 'error',
+                    'fas fa-check-circle text-green-500': systemStatus.type === 'success',
+                    'fas fa-exclamation-triangle text-yellow-500': systemStatus.type === 'warning',
+                    'fas fa-info-circle text-blue-500': systemStatus.type === 'info'
+                   }" class="text-xl"></i>
             </div>
             <div>
                 <p class="font-medium" x-text="systemStatus.title"></p>
-                <p class="text-sm mt-1" x-text="systemStatus.message"></p>
+                <!-- Utiliser v-html pour permettre des sauts de ligne simples si besoin -->
+                <p class="text-sm mt-1" x-html="systemStatus.message.replace(/\n/g, '<br>')"></p>
             </div>
+             <button @click="systemStatus.show = false" class="ml-auto pl-3 flex-shrink-0">
+                <i class="fas fa-times text-gray-500 hover:text-gray-700"></i>
+            </button>
         </div>
 
         <!-- Workflow Steps -->
-        <div class="flex flex-wrap mb-8">
+        <div class="flex flex-wrap -mx-2 mb-8">
+            <!-- Colonne 1: Upload -->
             <div class="w-full lg:w-1/3 px-2 mb-4">
-                <div class="bg-white rounded-lg shadow-md p-6 h-full">
+                <div class="bg-white rounded-lg shadow-md p-6 h-full flex flex-col">
                     <div class="flex items-center mb-4">
-                        <div class="bg-indigo-100 text-indigo-700 rounded-full w-8 h-8 flex items-center justify-center mr-3">
+                        <div class="bg-indigo-100 text-indigo-700 rounded-full w-8 h-8 flex items-center justify-center mr-3 flex-shrink-0">
                             <i class="fas fa-upload"></i>
                         </div>
                         <h2 class="text-xl font-semibold">1. Télécharger une image</h2>
                     </div>
-                    <p class="text-gray-600 mb-4">Importez une photo d'un exercice de mathématiques, physique ou chimie.</p>
-                    
+                    <p class="text-gray-600 mb-4">Importez une photo d'un exercice de mathématiques.</p>
+
                     <!-- Upload Area -->
-                    <div class="mt-4">
-                        <div 
-                            @dragover.prevent="dragOver = true" 
-                            @dragleave.prevent="dragOver = false" 
+                    <div class="mt-4 flex-grow">
+                        <div
+                            @dragover.prevent="dragOver = true"
+                            @dragleave.prevent="dragOver = false"
                             @drop.prevent="handleDrop($event)"
                             :class="{'active': dragOver}"
                             class="drop-zone h-52 rounded-lg flex flex-col items-center justify-center text-center p-4 cursor-pointer"
                             @click="document.getElementById('fileInput').click()">
-                            
+
                             <template x-if="!imagePreview">
                                 <div>
                                     <i class="fas fa-cloud-upload-alt text-4xl text-indigo-500 mb-3"></i>
@@ -105,74 +138,91 @@
                                     <p class="text-gray-500 text-sm mt-2">(PNG, JPG, JPEG)</p>
                                 </div>
                             </template>
-                            
+
                             <template x-if="imagePreview">
-                                <img :src="imagePreview" alt="Aperçu" class="h-full object-contain rounded"/>
+                                <img :src="imagePreview" alt="Aperçu" class="max-h-full object-contain rounded"/>
                             </template>
                         </div>
-                        
+
                         <input type="file" id="fileInput" class="hidden" accept="image/png, image/jpeg, image/jpg" @change="handleFileSelect($event)">
                     </div>
+                     <button x-show="imagePreview" @click="clearUpload()" class="mt-4 w-full text-sm text-red-600 hover:text-red-800 transition duration-300">
+                        <i class="fas fa-times mr-1"></i> Changer l'image
+                    </button>
                 </div>
             </div>
-            
+
+            <!-- Colonne 2: Analyse -->
             <div class="w-full lg:w-1/3 px-2 mb-4">
-                <div class="bg-white rounded-lg shadow-md p-6 h-full">
+                <div class="bg-white rounded-lg shadow-md p-6 h-full flex flex-col">
                     <div class="flex items-center mb-4">
-                        <div class="bg-indigo-100 text-indigo-700 rounded-full w-8 h-8 flex items-center justify-center mr-3">
+                        <div class="bg-indigo-100 text-indigo-700 rounded-full w-8 h-8 flex items-center justify-center mr-3 flex-shrink-0">
                             <i class="fas fa-robot"></i>
                         </div>
                         <h2 class="text-xl font-semibold">2. Analyse IA</h2>
                     </div>
-                    <p class="text-gray-600 mb-4">Notre IA analysera l'exercice et génèrera une solution détaillée en LaTeX.</p>
-                    
-                    <div class="mt-4">
-                        <button @click="processImage()" 
-                                :disabled="!imageFile || processing"
-                                :class="{'bg-indigo-300 cursor-not-allowed': !imageFile || processing, 'bg-indigo-600 hover:bg-indigo-700': imageFile && !processing}"
+                    <p class="text-gray-600 mb-4">L'IA analysera l'exercice et génèrera une solution détaillée en LaTeX.</p>
+
+                    <div class="mt-4 flex-grow flex flex-col justify-center">
+                        <button @click="processImage()"
+                                :disabled="!imageFile || processing || latexCheckFailed"
+                                :class="{
+                                    'bg-indigo-300 cursor-not-allowed': !imageFile || processing || latexCheckFailed,
+                                    'bg-indigo-600 hover:bg-indigo-700': imageFile && !processing && !latexCheckFailed
+                                }"
                                 class="w-full py-3 rounded-md text-white font-medium flex items-center justify-center transition duration-300">
                             <template x-if="processing">
                                 <i class="fas fa-spinner fa-spin mr-2"></i>
                             </template>
                             <span x-text="processing ? 'Traitement en cours...' : 'Analyser et Résoudre'"></span>
                         </button>
-                        
+                         <p x-show="latexCheckFailed" class="text-xs text-red-600 text-center mt-2">
+                             Impossible de continuer. Veuillez vérifier le message d'erreur système ci-dessus concernant l'installation LaTeX.
+                         </p>
+
                         <div x-show="processingStage" class="mt-4">
                             <div class="bg-indigo-50 rounded-md p-3">
                                 <div class="flex items-center">
                                     <i class="fas fa-sync fa-spin text-indigo-600 mr-2"></i>
-                                    <span class="text-indigo-800 font-medium" x-text="processingStage"></span>
+                                    <span class="text-indigo-800 font-medium text-sm" x-text="processingStage"></span>
                                 </div>
-                                <div class="w-full bg-indigo-200 rounded-full h-2.5 mt-2">
-                                    <div class="bg-indigo-600 h-2.5 rounded-full" :style="`width: ${processingProgress}%`"></div>
+                                <div class="w-full bg-indigo-200 rounded-full h-1.5 mt-2 overflow-hidden">
+                                    <div class="bg-indigo-600 h-1.5 rounded-full transition-all duration-300 ease-linear" :style="`width: ${processingProgress}%`"></div>
                                 </div>
                             </div>
                         </div>
                     </div>
                 </div>
             </div>
-            
+
+            <!-- Colonne 3: Résultat -->
             <div class="w-full lg:w-1/3 px-2 mb-4">
-                <div class="bg-white rounded-lg shadow-md p-6 h-full">
+                <div class="bg-white rounded-lg shadow-md p-6 h-full flex flex-col">
                     <div class="flex items-center mb-4">
-                        <div class="bg-indigo-100 text-indigo-700 rounded-full w-8 h-8 flex items-center justify-center mr-3">
+                         <div class="bg-indigo-100 text-indigo-700 rounded-full w-8 h-8 flex items-center justify-center mr-3 flex-shrink-0">
                             <i class="fas fa-file-pdf"></i>
                         </div>
                         <h2 class="text-xl font-semibold">3. Résultat PDF</h2>
                     </div>
                     <p class="text-gray-600 mb-4">La solution sera compilée en un PDF professionnel prêt à télécharger.</p>
-                    
-                    <div class="mt-4">
-                        <button @click="downloadPDF()" 
-                                :disabled="!pdfData" 
+
+                    <div class="mt-4 flex-grow flex flex-col justify-center">
+                        <button @click="downloadPDF()"
+                                :disabled="!pdfData"
                                 :class="{'bg-gray-300 cursor-not-allowed': !pdfData, 'bg-green-600 hover:bg-green-700': pdfData}"
                                 class="w-full py-3 rounded-md text-white font-medium flex items-center justify-center transition duration-300">
                             <i class="fas fa-download mr-2"></i>
                             <span>Télécharger le PDF</span>
                         </button>
-                        
-                        <p x-show="!pdfData" class="text-sm text-gray-500 text-center mt-3">
-                            Le PDF sera disponible après l'analyse
+
+                        <p x-show="!pdfData && !processing && showResults" class="text-sm text-red-600 text-center mt-3">
+                            Échec de la génération du PDF. Vérifiez les logs de compilation.
+                        </p>
+                         <p x-show="!pdfData && !processing && !showResults" class="text-sm text-gray-500 text-center mt-3">
+                            Le PDF sera disponible après une analyse réussie.
+                        </p>
+                         <p x-show="!pdfData && processing" class="text-sm text-gray-500 text-center mt-3">
+                            Génération du PDF en cours...
                         </p>
                     </div>
                 </div>
@@ -182,137 +232,217 @@
         <!-- Results Section -->
         <div x-show="showResults" class="mt-8">
             <div class="bg-white rounded-lg shadow-md overflow-hidden">
-                <div class="bg-indigo-700 text-white px-6 py-4">
-                    <h2 class="text-xl font-semibold">Résultats de l'Analyse</h2>
+                <div class="bg-gray-100 border-b border-gray-200 px-6 py-4">
+                     <h2 class="text-xl font-semibold text-gray-800">Résultats de l'Analyse</h2>
                 </div>
-                
+
                 <div class="flex flex-wrap">
                     <!-- Tabs -->
-                    <div class="w-full px-4 py-4 bg-indigo-50 border-b border-indigo-100">
-                        <div class="flex flex-wrap -mx-2">
-                            <div class="px-2">
-                                <button @click="activeTab = 'pdf'" 
-                                        :class="{'bg-indigo-600 text-white': activeTab === 'pdf', 'bg-white text-indigo-700': activeTab !== 'pdf'}"
-                                        class="px-4 py-2 rounded-md font-medium transition duration-300">
-                                    <i class="fas fa-file-pdf mr-2"></i>PDF
+                    <div class="w-full px-4 py-3 bg-indigo-50 border-b border-indigo-100">
+                        <div class="flex flex-wrap -mx-1">
+                            <div class="px-1 mb-1">
+                                <button @click="activeTab = 'pdf'"
+                                        :class="{'bg-indigo-600 text-white shadow-sm': activeTab === 'pdf', 'bg-white text-indigo-700 hover:bg-indigo-100': activeTab !== 'pdf'}"
+                                        class="px-4 py-2 rounded-md font-medium text-sm transition duration-200 flex items-center">
+                                    <i class="fas fa-file-pdf mr-2"></i>Aperçu PDF
+                                    <span x-show="!pdfData" class="ml-2 text-xs bg-red-500 text-white rounded-full px-1.5 py-0.5">Erreur</span>
+                                    <span x-show="pdfData" class="ml-2 text-xs bg-green-500 text-white rounded-full px-1.5 py-0.5">OK</span>
                                 </button>
                             </div>
-                            <div class="px-2">
-                                <button @click="activeTab = 'latex'" 
-                                        :class="{'bg-indigo-600 text-white': activeTab === 'latex', 'bg-white text-indigo-700': activeTab !== 'latex'}"
-                                        class="px-4 py-2 rounded-md font-medium transition duration-300">
+                            <div class="px-1 mb-1">
+                                <button @click="activeTab = 'latex'"
+                                        :class="{'bg-indigo-600 text-white shadow-sm': activeTab === 'latex', 'bg-white text-indigo-700 hover:bg-indigo-100': activeTab !== 'latex'}"
+                                        class="px-4 py-2 rounded-md font-medium text-sm transition duration-200 flex items-center">
                                     <i class="fas fa-code mr-2"></i>Code LaTeX
                                 </button>
                             </div>
-                            <div class="px-2" x-show="thinkingProcess">
-                                <button @click="activeTab = 'thinking'" 
-                                        :class="{'bg-indigo-600 text-white': activeTab === 'thinking', 'bg-white text-indigo-700': activeTab !== 'thinking'}"
-                                        class="px-4 py-2 rounded-md font-medium transition duration-300">
-                                    <i class="fas fa-brain mr-2"></i>Processus de Réflexion
+                            <!-- NOUVEL ONGLET POUR LOGS DE COMPILATION -->
+                            <div class="px-1 mb-1" x-show="compilationLog">
+                                <button @click="activeTab = 'log'"
+                                        :class="{'bg-indigo-600 text-white shadow-sm': activeTab === 'log', 'bg-white text-indigo-700 hover:bg-indigo-100': activeTab !== 'log'}"
+                                        class="px-4 py-2 rounded-md font-medium text-sm transition duration-200 flex items-center">
+                                    <i class="fas fa-terminal mr-2"></i>Log Compilation
+                                     <span x-show="!pdfData" class="ml-2 text-xs bg-red-500 text-white rounded-full px-1.5 py-0.5"><i class="fas fa-exclamation-triangle"></i></span>
+                                     <span x-show="pdfData" class="ml-2 text-xs bg-green-500 text-white rounded-full px-1.5 py-0.5"><i class="fas fa-check"></i></span>
+                                </button>
+                            </div>
+                             <div class="px-1 mb-1" x-show="thinkingProcess">
+                                <button @click="activeTab = 'thinking'"
+                                        :class="{'bg-indigo-600 text-white shadow-sm': activeTab === 'thinking', 'bg-white text-indigo-700 hover:bg-indigo-100': activeTab !== 'thinking'}"
+                                        class="px-4 py-2 rounded-md font-medium text-sm transition duration-200 flex items-center">
+                                    <i class="fas fa-brain mr-2"></i>Processus IA
                                 </button>
                             </div>
                         </div>
                     </div>
-                    
+
                     <!-- Content Panels -->
                     <div class="w-full p-6">
                         <!-- PDF Preview -->
-                        <div x-show="activeTab === 'pdf'" class="pdf-container">
-                            <iframe x-show="pdfData" :src="'data:application/pdf;base64,' + pdfData" width="100%" height="100%" class="border-0"></iframe>
-                            <div x-show="!pdfData" class="h-full flex items-center justify-center">
-                                <div class="text-center text-gray-500">
-                                    <i class="fas fa-file-pdf text-4xl mb-3"></i>
-                                    <p>Aucun PDF disponible pour le moment</p>
+                        <div x-show="activeTab === 'pdf'">
+                            <div class="pdf-container bg-gray-100 flex items-center justify-center">
+                                <iframe x-show="pdfData" :src="'data:application/pdf;base64,' + pdfData" width="100%" height="100%" class="border-0">
+                                     Votre navigateur ne supporte pas les iframes pour PDF. Vous pouvez le <a @click.prevent="downloadPDF()" href="#" class="text-indigo-600 hover:underline">télécharger</a>.
+                                </iframe>
+                                <div x-show="!pdfData" class="text-center text-gray-500 p-8">
+                                    <i class="fas fa-file-excel text-6xl mb-4 text-red-400"></i>
+                                    <h3 class="text-xl font-semibold mb-2 text-red-600">Échec de la génération du PDF</h3>
+                                    <p class="mb-4">Impossible d'afficher l'aperçu car le fichier PDF n'a pas pu être créé.</p>
+                                    <p>Veuillez consulter l'onglet <strong class="text-gray-700">"Log Compilation"</strong> pour identifier la cause de l'erreur.</p>
+                                     <button @click="activeTab = 'log'" class="mt-4 px-4 py-2 bg-indigo-600 text-white rounded-md hover:bg-indigo-700 transition duration-300 text-sm">
+                                         Voir le Log de Compilation
+                                     </button>
                                 </div>
                             </div>
                         </div>
-                        
+
                         <!-- LaTeX Code -->
-                        <div x-show="activeTab === 'latex'" class="bg-gray-50 rounded-md">
-                            <div class="bg-gray-100 px-4 py-2 border-b border-gray-200 flex justify-between items-center">
-                                <span class="font-medium">Code LaTeX généré</span>
-                                <button @click="copyToClipboard(latexCode)" class="text-indigo-600 hover:text-indigo-800 transition duration-300">
+                        <div x-show="activeTab === 'latex'">
+                            <div class="bg-gray-100 px-4 py-2 border-b border-gray-200 flex justify-between items-center rounded-t-md">
+                                <span class="font-medium text-gray-700">Code LaTeX généré</span>
+                                <button @click="copyToClipboard(latexCode)" title="Copier le code LaTeX" class="text-indigo-600 hover:text-indigo-800 transition duration-300 text-sm px-3 py-1 bg-white rounded border border-indigo-200 hover:bg-indigo-50">
                                     <i class="fas fa-copy mr-1"></i>Copier
                                 </button>
                             </div>
-                            <pre class="p-4 text-sm"><code x-text="latexCode || 'Aucun code LaTeX disponible'"></code></pre>
+                            <pre class="p-4 text-sm border-t-0 rounded-b-md rounded-t-none"><code x-text="latexCode || 'Aucun code LaTeX disponible'"></code></pre>
+                        </div>
+
+                        <!-- NOUVEAU PANNEAU : Log de Compilation -->
+                        <div x-show="activeTab === 'log'">
+                             <div :class="!pdfData ? 'compilation-log-error' : 'bg-gray-50 rounded-md p-4 border border-gray-200'">
+                                <div class="flex justify-between items-center mb-3">
+                                    <h3 class="font-medium" :class="!pdfData ? 'text-red-800' : 'text-gray-700'">
+                                        <i class="fas fa-terminal mr-2"></i>Log de Compilation pdflatex
+                                    </h3>
+                                    <button @click="copyToClipboard(compilationLog)" title="Copier le log" class="text-indigo-600 hover:text-indigo-800 transition duration-300 text-sm px-3 py-1 bg-white rounded border border-indigo-200 hover:bg-indigo-50">
+                                        <i class="fas fa-copy mr-1"></i>Copier le Log
+                                    </button>
+                                </div>
+                                <pre class="p-3 text-xs"><code x-text="compilationLog || 'Aucun log de compilation disponible'"></code></pre>
+                                <p x-show="!pdfData" class="mt-3 text-sm text-red-700">
+                                    <i class="fas fa-exclamation-circle mr-1"></i> Le PDF n'a pas pu être généré. Recherchez les lignes commençant par `!` (erreur) ou `Warning:` dans le log ci-dessus pour comprendre le problème. Les erreurs courantes incluent des packages manquants, des commandes inconnues ou des erreurs de syntaxe LaTeX.
+                                </p>
+                                 <p x-show="pdfData" class="mt-3 text-sm text-green-700">
+                                    <i class="fas fa-check-circle mr-1"></i> Le PDF a été généré. Le log peut contenir des avertissements (`Warning:`) qui n'ont pas empêché la compilation mais pourraient indiquer des problèmes mineurs.
+                                </p>
+                             </div>
                         </div>
-                        
+
                         <!-- Thinking Process -->
-                        <div x-show="activeTab === 'thinking'" class="bg-gray-50 rounded-md">
-                            <div class="bg-gray-100 px-4 py-2 border-b border-gray-200">
-                                <span class="font-medium">Processus de réflexion de l'IA</span>
+                        <div x-show="activeTab === 'thinking'">
+                            <div class="bg-gray-100 px-4 py-2 border-b border-gray-200 rounded-t-md">
+                                <span class="font-medium text-gray-700">Processus de réflexion de l'IA</span>
                             </div>
-                            <pre class="p-4 text-sm"><code x-text="thinkingProcess || 'Aucune information sur le processus de réflexion disponible'"></code></pre>
+                            <pre class="p-4 text-sm border-t-0 rounded-b-md rounded-t-none"><code x-text="thinkingProcess || 'Aucune information sur le processus de réflexion disponible'"></code></pre>
                         </div>
                     </div>
                 </div>
             </div>
         </div>
-        
+
         <!-- Footer -->
         <footer class="mt-12 text-center text-gray-600 text-sm">
             <p>Mariam AI © 2025 - Solution d'automatisation pour les sciences</p>
-            <p class="mt-1">Version expérimentale - Nécessite une installation LaTeX locale</p>
+            <p class="mt-1">Version Alpha - Nécessite une installation LaTeX (pdflatex) fonctionnelle sur le serveur.</p>
+            <p class="mt-1" x-show="latexCheckMessage" x-text="latexCheckMessage"></p>
         </footer>
     </main>
-    
+
+    <!-- Feedback Flottant -->
+    <div x-show="feedback.show"
+         class="fixed bottom-4 right-4 z-50 max-w-sm p-4 rounded-md shadow-lg text-white"
+         :class="{ 'bg-green-600': feedback.type === 'success', 'bg-red-600': feedback.type === 'error' }"
+         x-transition:enter="transition ease-out duration-300"
+         x-transition:enter-start="opacity-0 transform translate-y-2"
+         x-transition:enter-end="opacity-100 transform translate-y-0"
+         x-transition:leave="transition ease-in duration-200"
+         x-transition:leave-start="opacity-100 transform translate-y-0"
+         x-transition:leave-end="opacity-0 transform translate-y-2">
+        <div class="flex items-center">
+             <i :class="{ 'fas fa-check-circle': feedback.type === 'success', 'fas fa-exclamation-circle': feedback.type === 'error' }" class="mr-2 text-xl"></i>
+             <span x-text="feedback.message"></span>
+             <button @click="feedback.show = false" class="ml-auto -mr-1 -mt-1 p-1">
+                 <i class="fas fa-times text-white opacity-70 hover:opacity-100"></i>
+             </button>
+        </div>
+    </div>
+
+
     <script>
         function app() {
             return {
-                // État de l'application
-                systemStatus: {
-                    show: false,
-                    type: 'info',
-                    title: '',
-                    message: ''
-                },
+                // État système
+                systemStatus: { show: false, type: 'info', title: '', message: '' },
+                latexCheckFailed: false, // Indicateur spécifique pour l'échec de la vérif LaTeX
+                latexCheckMessage: '', // Message de la vérif LaTeX pour le footer
+
+                // Upload
                 dragOver: false,
                 imageFile: null,
                 imagePreview: null,
+
+                // Traitement
                 processing: false,
                 processingStage: null,
                 processingProgress: 0,
+
+                // Résultats
                 showResults: false,
-                activeTab: 'pdf',
-                
-                // Données générées
+                activeTab: 'pdf', // Onglet actif par défaut
                 latexCode: null,
                 thinkingProcess: null,
-                pdfData: null,
-                compilationLog: null,
-                
+                pdfData: null, // Contient le base64 du PDF si succès
+                compilationLog: null, // Contient TOUJOURS le log (succès ou échec)
+
+                 // Feedback utilisateur
+                feedback: { show: false, type: 'success', message: '' },
+
                 // Méthodes
                 checkLatexInstallation() {
                     fetch('/check-latex')
                         .then(response => response.json())
                         .then(data => {
+                            this.latexCheckMessage = data.message; // Stocker le message pour le footer
                             if (!data.success) {
-                                this.showStatus('error', 'Configuration requise', data.message);
+                                this.latexCheckFailed = true;
+                                // Afficher une alerte système persistante pour ce problème critique
+                                this.systemStatus = {
+                                    show: true,
+                                    type: 'error',
+                                    title: 'Erreur de Configuration Serveur',
+                                    message: data.message + "\nL'application ne pourra pas compiler les PDF tant que ce problème n'est pas résolu."
+                                };
+                                // Ne pas cacher automatiquement cette erreur critique
+                            } else {
+                                this.latexCheckFailed = false;
+                                this.showStatus('success', 'Configuration Vérifiée', data.message, 5000); // Message de succès court
                             }
                         })
                         .catch(error => {
                             console.error('Erreur lors de la vérification LaTeX:', error);
-                            this.showStatus('error', 'Erreur système', 'Impossible de vérifier l\'installation LaTeX.');
+                             this.latexCheckFailed = true; // Supposer échec en cas d'erreur réseau/serveur
+                             this.latexCheckMessage = 'Impossible de vérifier l\'installation LaTeX.';
+                            this.showStatus('error', 'Erreur Système', 'Impossible de vérifier l\'installation LaTeX. Le serveur backend est peut-être indisponible ou une erreur s\'est produite.');
                         });
                 },
-                
-                showStatus(type, title, message) {
-                    this.systemStatus = {
-                        show: true,
-                        type,
-                        title,
-                        message
-                    };
-                    
-                    // Auto-hide after 10 seconds for success messages
-                    if (type === 'success') {
+
+                showStatus(type, title, message, duration = null) {
+                    this.systemStatus = { show: true, type, title, message };
+                    if (duration) {
                         setTimeout(() => {
-                            this.systemStatus.show = false;
-                        }, 10000);
+                             // Ne masquer que si le message actuel est toujours celui qu'on voulait masquer
+                             if (this.systemStatus.message === message) {
+                                 this.systemStatus.show = false;
+                             }
+                        }, duration);
                     }
                 },
-                
+
+                 showFeedback(type, message, duration = 4000) {
+                    this.feedback = { show: true, type, message };
+                    setTimeout(() => { this.feedback.show = false; }, duration);
+                 },
+
                 handleDrop(event) {
                     this.dragOver = false;
                     const files = event.dataTransfer.files;
@@ -320,131 +450,194 @@
                         this.processFile(files[0]);
                     }
                 },
-                
+
                 handleFileSelect(event) {
                     const file = event.target.files[0];
                     if (file) {
                         this.processFile(file);
                     }
+                    // Réinitialiser pour permettre de sélectionner le même fichier à nouveau
+                    event.target.value = null;
                 },
-                
+
                 processFile(file) {
-                    // Vérifier si c'est une image
-                    if (!file.type.match('image.*')) {
+                    const allowedTypes = ['image/png', 'image/jpeg', 'image/jpg'];
+                    if (!allowedTypes.includes(file.type)) {
                         this.showStatus('error', 'Format incorrect', 'Veuillez sélectionner une image (PNG, JPG, JPEG)');
                         return;
                     }
-                    
-                    // Stocker le fichier et créer un aperçu
+                     const maxSize = 10 * 1024 * 1024; // 10 MB
+                     if (file.size > maxSize) {
+                          this.showStatus('error', 'Fichier trop volumineux', `L'image ne doit pas dépasser ${maxSize / 1024 / 1024} Mo.`);
+                          return;
+                     }
+
+
                     this.imageFile = file;
                     const reader = new FileReader();
                     reader.onload = (e) => {
                         this.imagePreview = e.target.result;
-                        this.showStatus('success', 'Image téléchargée', 'Votre image a été correctement importée. Vous pouvez maintenant lancer l\'analyse.');
+                         // Pas de message de succès juste pour l'upload, c'est implicite
+                    };
+                    reader.onerror = () => {
+                         this.showStatus('error', 'Erreur Lecture Fichier', 'Impossible de lire le fichier image sélectionné.');
+                         this.clearUpload();
                     };
                     reader.readAsDataURL(file);
-                    
-                    // Reset results
+
+                    // Reset previous results when a new file is loaded
                     this.resetResults();
+                     this.systemStatus.show = false; // Cacher les anciennes alertes
                 },
-                
+
+                clearUpload() {
+                     this.imageFile = null;
+                     this.imagePreview = null;
+                     // Ne pas réinitialiser les résultats ici, l'utilisateur veut peut-être juste changer l'image
+                     // this.resetResults();
+                     document.getElementById('fileInput').value = null; // Important pour re-sélectionner le même fichier
+                },
+
                 resetResults() {
                     this.showResults = false;
                     this.latexCode = null;
                     this.thinkingProcess = null;
                     this.pdfData = null;
                     this.compilationLog = null;
-                    this.activeTab = 'pdf';
+                    this.activeTab = 'pdf'; // Toujours revenir à l'onglet PDF par défaut
                 },
-                
+
                 processImage() {
-                    if (!this.imageFile || this.processing) return;
-                    
+                    if (!this.imageFile || this.processing || this.latexCheckFailed) return;
+
                     this.processing = true;
-                    this.processingStage = "Initialisation...";
-                    this.processingProgress = 5;
-                    
-                    // Préparer les données du formulaire
+                    this.resetResults(); // Effacer les anciens résultats avant de commencer
+                    this.systemStatus.show = false; // Cacher les alertes
+                    this.updateProcessingStatus("Téléversement de l'image...", 5);
+
                     const formData = new FormData();
                     formData.append('image', this.imageFile);
-                    
-                    // Envoyer la demande
-                    setTimeout(() => this.updateProcessingStatus("Analyse de l'image par l'IA...", 20), 1000);
-                    
+
+                    setTimeout(() => this.updateProcessingStatus("Analyse par l'IA et génération LaTeX...", 20), 500);
+
                     fetch('/process-image', {
                         method: 'POST',
                         body: formData
                     })
-                    .then(response => response.json())
+                    .then(response => {
+                        // Gérer les erreurs HTTP (e.g., 500 Internal Server Error)
+                         if (!response.ok) {
+                              // Essayer de lire le message d'erreur JSON s'il y en a un
+                              return response.json().then(errData => {
+                                   throw new Error(errData.message || `Erreur serveur: ${response.status} ${response.statusText}`);
+                              }).catch(() => {
+                                   // Si pas de JSON, lancer une erreur générique
+                                   throw new Error(`Erreur serveur: ${response.status} ${response.statusText}`);
+                              });
+                         }
+                         return response.json(); // Traiter la réponse JSON si statut OK
+                    })
                     .then(data => {
-                        this.updateProcessingStatus("Finalisation des résultats...", 90);
-                        
-                        setTimeout(() => {
-                            this.processing = false;
-                            this.processingStage = null;
-                            
-                            if (data.success) {
-                                this.latexCode = data.latex;
-                                this.thinkingProcess = data.thinking;
-                                this.pdfData = data.pdf_base64;
-                                this.showResults = true;
-                                this.showStatus('success', 'Analyse réussie', 'La solution a été générée avec succès. Vous pouvez maintenant télécharger le PDF.');
-                            } else {
-                                this.showStatus('error', 'Échec de l\'analyse', data.message);
-                                if (data.latex) {
-                                    this.latexCode = data.latex;
-                                    this.thinkingProcess = data.thinking;
-                                    this.compilationLog = data.compilation_log;
-                                    this.showResults = true;
-                                    this.activeTab = 'latex';  // Afficher l'onglet LaTeX en cas d'erreur PDF
-                                }
-                            }
-                        }, 500);
+                         // Simulation de la compilation
+                         let progress = 60;
+                         this.updateProcessingStatus("Compilation LaTeX vers PDF...", progress);
+                         const interval = setInterval(() => {
+                              progress += 5;
+                              if (progress <= 95) {
+                                   this.updateProcessingStatus("Compilation LaTeX vers PDF...", progress);
+                              } else {
+                                   clearInterval(interval);
+                              }
+                         }, 300); // Augmenter toutes les 300ms
+
+                        // Traitement de la réponse (après la simulation)
+                         setTimeout(() => {
+                             clearInterval(interval); // S'assurer que l'intervalle est arrêté
+                             this.processing = false;
+                             this.processingStage = null;
+                             this.processingProgress = 0;
+                             this.showResults = true; // Afficher la section des résultats
+
+                             // Mettre à jour les données même en cas d'échec partiel
+                             this.latexCode = data.latex || null;
+                             this.thinkingProcess = data.thinking || null;
+                             this.compilationLog = data.compilation_log || null; // Très important
+                             this.pdfData = data.pdf_base64 || null; // Sera null si échec
+
+                             if (data.success) {
+                                 this.showStatus('success', 'Analyse Réussie', data.message);
+                                 this.activeTab = 'pdf'; // Afficher le PDF si succès
+                             } else {
+                                 // Message d'erreur principal
+                                 this.showStatus('error', 'Échec du Traitement', data.message);
+
+                                 // Si échec de compilation, aller directement au log
+                                 if (this.compilationLog && !this.pdfData) {
+                                     this.activeTab = 'log';
+                                 } else if (this.latexCode) {
+                                     this.activeTab = 'latex'; // Sinon, au LaTeX si disponible
+                                 } else {
+                                     this.activeTab = 'pdf'; // Fallback
+                                 }
+                             }
+                         }, 2000); // Laisser le temps à la "compilation" de s'afficher
+
                     })
                     .catch(error => {
                         console.error('Erreur lors du traitement de l\'image:', error);
                         this.processing = false;
                         this.processingStage = null;
-                        this.showStatus('error', 'Erreur système', 'Une erreur inattendue est survenue lors du traitement de l\'image.');
+                        this.processingProgress = 0;
+                        // Afficher l'erreur venant du serveur ou une erreur générique
+                        this.showStatus('error', 'Erreur Critique', error.message || 'Une erreur inattendue est survenue lors de la communication avec le serveur.');
+                        this.resetResults(); // Pas de résultats partiels en cas d'erreur critique
                     });
                 },
-                
+
                 updateProcessingStatus(message, progress) {
                     this.processingStage = message;
                     this.processingProgress = progress;
                 },
-                
+
                 downloadPDF() {
-                    if (!this.pdfData) return;
-                    
-                    // Créer un blob à partir du base64
-                    const byteCharacters = atob(this.pdfData);
-                    const byteNumbers = new Array(byteCharacters.length);
-                    for (let i = 0; i < byteCharacters.length; i++) {
-                        byteNumbers[i] = byteCharacters.charCodeAt(i);
+                    if (!this.pdfData) {
+                         this.showFeedback('error', 'Aucun PDF à télécharger.');
+                         return;
+                    };
+
+                    try {
+                        const byteCharacters = atob(this.pdfData);
+                        const byteNumbers = new Array(byteCharacters.length);
+                        for (let i = 0; i < byteCharacters.length; i++) {
+                            byteNumbers[i] = byteCharacters.charCodeAt(i);
+                        }
+                        const byteArray = new Uint8Array(byteNumbers);
+                        const blob = new Blob([byteArray], {type: 'application/pdf'});
+
+                        const link = document.createElement('a');
+                        link.href = URL.createObjectURL(blob);
+                        link.download = 'solution_mariam_ai.pdf';
+                        document.body.appendChild(link);
+                        link.click();
+                        document.body.removeChild(link);
+                        URL.revokeObjectURL(link.href); // Libérer la mémoire
+                        this.showFeedback('success', 'Téléchargement lancé.');
+                    } catch (e) {
+                         console.error("Erreur lors de la création du lien de téléchargement PDF:", e);
+                         this.showFeedback('error', 'Erreur lors de la préparation du téléchargement.');
                     }
-                    const byteArray = new Uint8Array(byteNumbers);
-                    const blob = new Blob([byteArray], {type: 'application/pdf'});
-                    
-                    // Créer un lien et déclencher le téléchargement
-                    const link = document.createElement('a');
-                    link.href = URL.createObjectURL(blob);
-                    link.download = 'solution_mariam_ai.pdf';
-                    document.body.appendChild(link);
-                    link.click();
-                    document.body.removeChild(link);
                 },
-                
+
                 copyToClipboard(text) {
                     if (!text) return;
-                    
+
                     navigator.clipboard.writeText(text)
                         .then(() => {
-                            this.showStatus('success', 'Copié', 'Le code LaTeX a été copié dans le presse-papiers.');
+                             this.showFeedback('success', 'Copié dans le presse-papiers !');
                         })
                         .catch(err => {
                             console.error('Erreur lors de la copie:', err);
-                            this.showStatus('error', 'Échec de la copie', 'Impossible de copier le code dans le presse-papiers.');
+                             this.showFeedback('error', 'Impossible de copier automatiquement.');
                         });
                 }
             };