Update templates/index.html

templates/index.html

@@ -4,188 +4,498 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Mariam AI - Correcteur d'Exercices</title>
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
     <style>
+        :root {
+            --primary: #4f46e5;
+            --primary-hover: #4338ca;
+            --primary-light: #eef2ff;
+            --success: #10b981;
+            --success-light: #ecfdf5;
+            --error: #ef4444;
+            --error-light: #fef2f2;
+            --text: #1f2937;
+            --text-light: #6b7280;
+            --bg-light: #f9fafb;
+            --card-bg: #ffffff;
+            --border: #e5e7eb;
+            --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+            --shadow-md: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+            --radius: 0.5rem;
+        }
+
+        * {
+            box-sizing: border-box;
+            margin: 0;
+            padding: 0;
+        }
+
         body {
-            font-family: sans-serif;
+            font-family: 'Inter', system-ui, -apple-system, sans-serif;
             line-height: 1.6;
-            margin: 20px;
-            background-color: #f4f4f4;
-            color: #333;
+            color: var(--text);
+            background-color: var(--bg-light);
+            padding: 1.5rem;
         }
+
         .container {
-            max-width: 900px;
-            margin: auto;
-            background: #fff;
-            padding: 25px;
-            border-radius: 8px;
-            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
+            max-width: 1000px;
+            margin: 0 auto;
         }
-        h1, h2, h3 {
-            color: #444;
+
+        .header {
+            text-align: center;
+            margin-bottom: 2rem;
         }
+
         h1 {
-            text-align: center;
-            margin-bottom: 30px;
+            font-size: 2rem;
+            font-weight: 700;
+            margin-bottom: 0.5rem;
+            color: var(--primary);
+        }
+
+        h2 {
+            font-size: 1.25rem;
+            font-weight: 600;
+            margin-bottom: 1rem;
+            color: var(--text);
+        }
+
+        h3 {
+            font-size: 1rem;
+            font-weight: 600;
+            margin-bottom: 0.75rem;
+            color: var(--text);
+        }
+
+        .subheader {
+            color: var(--text-light);
+            font-size: 1rem;
         }
-        .status-checks p {
-            padding: 8px;
-            border-radius: 4px;
-            margin: 5px 0;
+
+        .card {
+            background: var(--card-bg);
+            border-radius: var(--radius);
+            box-shadow: var(--shadow);
+            padding: 1.5rem;
+            margin-bottom: 1.5rem;
+        }
+
+        .status-checks {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+            gap: 1rem;
+        }
+
+        .status-item {
+            padding: 1rem;
+            border-radius: var(--radius);
+            display: flex;
+            align-items: center;
+            gap: 0.75rem;
         }
+
         .status-success {
-            background-color: #e7f4e7;
-            color: #0d6a0d;
-            border: 1px solid #b8d9b8;
+            background-color: var(--success-light);
+            border: 1px solid var(--success);
         }
+
         .status-error {
-            background-color: #fdecea;
-            color: #a61a1a;
-            border: 1px solid #f8c8c8;
+            background-color: var(--error-light);
+            border: 1px solid var(--error);
         }
-        #upload-form label {
-            display: block;
-            margin-bottom: 8px;
-            font-weight: bold;
+
+        .status-icon {
+            font-size: 1.25rem;
+        }
+
+        .status-success .status-icon {
+            color: var(--success);
+        }
+
+        .status-error .status-icon {
+            color: var(--error);
+        }
+
+        .status-text {
+            flex: 1;
+        }
+
+        .file-upload {
+            display: flex;
+            flex-direction: column;
+            gap: 1rem;
+        }
+
+        .file-input-container {
+            position: relative;
+            width: 100%;
+            height: 150px;
+            border: 2px dashed var(--border);
+            border-radius: var(--radius);
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            gap: 0.75rem;
+            padding: 1.5rem;
+            cursor: pointer;
+            overflow: hidden;
+            transition: border-color 0.3s ease, background 0.3s ease;
+        }
+
+        .file-input-container:hover, .file-input-container.dragover {
+            border-color: var(--primary);
+            background: var(--primary-light);
+        }
+
+        .file-input {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            opacity: 0;
+            cursor: pointer;
+        }
+
+        .upload-icon {
+            font-size: 2rem;
+            color: var(--primary);
+        }
+
+        .upload-label {
+            font-weight: 500;
+        }
+
+        .upload-hint {
+            font-size: 0.875rem;
+            color: var(--text-light);
+        }
+
+        .file-preview {
+            display: none;
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            z-index: 1;
+            background: rgba(255, 255, 255, 0.9);
+            align-items: center;
+            justify-content: center;
+        }
+
+        .file-preview img {
+            max-width: 90%;
+            max-height: 90%;
+            object-fit: contain;
+        }
+
+        .preview-active .file-preview {
+            display: flex;
+        }
+
+        .file-name {
+            display: none;
+            position: absolute;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            background: rgba(255, 255, 255, 0.8);
+            padding: 0.5rem;
+            font-size: 0.875rem;
+            text-align: center;
+            word-break: break-all;
         }
-        #image-input {
+
+        .preview-active .file-name {
             display: block;
-            margin-bottom: 15px;
-            padding: 10px;
-            border: 1px solid #ccc;
-            border-radius: 4px;
-            width: calc(100% - 22px); /* Adjust for padding and border */
-        }
-        #process-button, #download-button {
-            background-color: #5c67f2;
+        }
+
+        .clear-file {
+            display: none;
+            position: absolute;
+            top: 0.5rem;
+            right: 0.5rem;
+            background: white;
+            border-radius: 50%;
+            width: 24px;
+            height: 24px;
+            align-items: center;
+            justify-content: center;
+            cursor: pointer;
+            box-shadow: var(--shadow);
+            z-index: 2;
+        }
+
+        .preview-active .clear-file {
+            display: flex;
+        }
+
+        .button {
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            gap: 0.5rem;
+            background-color: var(--primary);
             color: white;
-            padding: 12px 20px;
+            padding: 0.75rem 1.5rem;
             border: none;
-            border-radius: 4px;
+            border-radius: var(--radius);
+            font-weight: 500;
+            font-size: 1rem;
             cursor: pointer;
-            font-size: 16px;
-            transition: background-color 0.3s ease;
+            transition: background-color 0.3s, transform 0.2s;
+            width: 100%;
         }
-        #process-button:hover, #download-button:hover {
-            background-color: #4a54c4;
+
+        .button:hover {
+            background-color: var(--primary-hover);
+        }
+
+        .button:active {
+            transform: translateY(1px);
         }
-        #process-button:disabled {
-            background-color: #ccc;
+
+        .button:disabled {
+            background-color: var(--text-light);
             cursor: not-allowed;
+            opacity: 0.7;
         }
-        #loading {
-            text-align: center;
-            margin: 20px 0;
-            font-style: italic;
-            color: #666;
-        }
-        #messages {
-            margin-top: 20px;
-            padding: 15px;
-            border-radius: 4px;
-            text-align: center;
+
+        .button-icon {
+            font-size: 1rem;
+        }
+
+        .loading {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            gap: 1rem;
+            padding: 2rem;
+        }
+
+        .spinner {
+            width: 40px;
+            height: 40px;
+            border: 4px solid rgba(79, 70, 229, 0.2);
+            border-radius: 50%;
+            border-top-color: var(--primary);
+            animation: spin 1s linear infinite;
+        }
+
+        @keyframes spin {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
+        }
+
+        .message {
+            padding: 1rem;
+            border-radius: var(--radius);
+            margin-bottom: 1.5rem;
+            display: flex;
+            align-items: center;
+            gap: 0.75rem;
         }
+
         .message-success {
-            background-color: #dff0d8;
-            color: #3c763d;
-            border: 1px solid #d6e9c6;
+            background-color: var(--success-light);
+            border: 1px solid var(--success);
+            color: var(--success);
         }
+
         .message-error {
-            background-color: #f2dede;
-            color: #a94442;
-            border: 1px solid #ebccd1;
-            white-space: pre-wrap; /* Pour afficher les retours à la ligne des erreurs */
-            text-align: left;
-        }
-        #results {
-            margin-top: 30px;
-            border-top: 1px solid #eee;
-            padding-top: 20px;
-        }
-        #pdf-preview iframe {
+            background-color: var(--error-light);
+            border: 1px solid var(--error);
+            color: var(--error);
+            white-space: pre-wrap;
+        }
+
+        .tab-container {
+            border: 1px solid var(--border);
+            border-radius: var(--radius);
+            overflow: hidden;
+        }
+
+        .tabs {
+            display: flex;
+            background: var(--bg-light);
+        }
+
+        .tab {
+            padding: 0.75rem 1.25rem;
+            cursor: pointer;
+            border-bottom: 2px solid transparent;
+            font-weight: 500;
+            color: var(--text-light);
+            transition: all 0.3s ease;
+        }
+
+        .tab.active {
+            color: var(--primary);
+            border-bottom-color: var(--primary);
+        }
+
+        .tab-content {
+            display: none;
+            padding: 1.5rem;
+        }
+
+        .tab-content.active {
+            display: block;
+        }
+
+        #pdf-viewer {
             width: 100%;
             height: 600px;
-            border: 1px solid #ccc;
-            border-radius: 4px;
-        }
-        #download-button {
-            display: block; /* Make it a block element */
-            margin: 15px auto 25px auto; /* Center the button */
-            width: fit-content; /* Adjust width to content */
-        }
-
-        #raw-output {
-            margin-top: 20px;
-            background-color: #f9f9f9;
-            border: 1px solid #ddd;
-            padding: 15px;
-            border-radius: 4px;
-        }
-        #raw-output h3 {
-            margin-top: 0;
-            margin-bottom: 10px;
-            border-bottom: 1px solid #eee;
-            padding-bottom: 5px;
-        }
-        #raw-output pre {
-            background-color: #efefef;
-            padding: 10px;
-            border-radius: 4px;
-            white-space: pre-wrap; /* Wrap long lines */
-            word-wrap: break-word; /* Break words if necessary */
+            border: 1px solid var(--border);
+            border-radius: var(--radius);
+        }
+
+        .code-area {
+            background-color: #f8fafc;
+            border: 1px solid var(--border);
+            border-radius: 0.25rem;
+            padding: 1rem;
             max-height: 400px;
-            overflow-y: auto; /* Add scroll if content is too long */
+            overflow-y: auto;
+        }
+
+        .code-area pre {
+            margin: 0;
+            white-space: pre-wrap;
+            word-wrap: break-word;
+            font-family: Consolas, Monaco, 'Andale Mono', monospace;
+            font-size: 0.875rem;
+            line-height: 1.5;
         }
-        #raw-output code {
-            font-family: monospace;
-            font-size: 0.9em;
+
+        .download-button {
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            gap: 0.5rem;
+            background-color: var(--primary);
+            color: white;
+            padding: 0.75rem 1.5rem;
+            border: none;
+            border-radius: var(--radius);
+            font-weight: 500;
+            font-size: 1rem;
+            cursor: pointer;
+            transition: background-color 0.3s, transform 0.2s;
+            margin: 1.5rem auto;
+            width: auto;
         }
+
         .hidden {
-            display: none;
+            display: none !important;
+        }
+
+        /* Responsive design */
+        @media (max-width: 768px) {
+            .status-checks {
+                grid-template-columns: 1fr;
+            }
+            
+            .file-upload-container {
+                height: 120px;
+            }
+            
+            .tab {
+                padding: 0.5rem 1rem;
+                font-size: 0.875rem;
+            }
+            
+            #pdf-viewer {
+                height: 400px;
+            }
         }
     </style>
 </head>
 <body>
     <div class="container">
-        <h1>Mariam AI - Correcteur d'Exercices Mathématiques</h1>
-
-        <div class="status-checks">
-            <h2>Vérifications Initiales</h2>
-            <p id="latex-status">Vérification de LaTeX...</p>
-            <p id="api-status">Vérification de la clé API Mariam AI...</p>
+        <div class="header">
+            <h1>Mariam AI</h1>
+            <p class="subheader">Correcteur Intelligent d'Exercices Mathématiques</p>
         </div>
 
-        <div id="upload-form">
-            <h2>Soumettre un Exercice</h2>
-            <label for="image-input">Choisissez une image de l'exercice :</label>
-            <input type="file" id="image-input" accept="image/*">
-            <button id="process-button">Générer la Solution</button>
+        <div class="card">
+            <h2>État du système</h2>
+            <div class="status-checks">
+                <div id="latex-status" class="status-item">
+                    <span class="status-icon"><i class="fas fa-spinner fa-spin"></i></span>
+                    <span class="status-text">Vérification de LaTeX...</span>
+                </div>
+                <div id="api-status" class="status-item">
+                    <span class="status-icon"><i class="fas fa-spinner fa-spin"></i></span>
+                    <span class="status-text">Vérification de l'API Mariam AI...</span>
+                </div>
+            </div>
         </div>
 
-        <div id="loading" class="hidden">
-            <p>Traitement en cours... Mariam AI réfléchit et compile le PDF...</p>
-            <p>Cela peut prendre jusqu'à 1 minute.</p>
+        <div class="card">
+            <h2>Soumettre un exercice</h2>
+            <div class="file-upload">
+                <div id="file-input-container" class="file-input-container">
+                    <span class="upload-icon"><i class="fas fa-cloud-upload-alt"></i></span>
+                    <span class="upload-label">Déposez votre image ou cliquez pour sélectionner</span>
+                    <span class="upload-hint">Formats acceptés: JPG, PNG, GIF</span>
+                    <input type="file" id="image-input" class="file-input" accept="image/*">
+                    
+                    <div class="file-preview">
+                        <img id="image-preview" src="" alt="Aperçu">
+                    </div>
+                    <div class="file-name" id="file-name"></div>
+                    <div class="clear-file" id="clear-file"><i class="fas fa-times"></i></div>
+                </div>
+                
+                <button id="process-button" class="button" disabled>
+                    <span class="button-icon"><i class="fas fa-magic"></i></span>
+                    <span>Générer la solution</span>
+                </button>
+            </div>
         </div>
 
-        <div id="messages" class="hidden"></div>
-
-        <div id="results" class="hidden">
-            <h2>Résultats</h2>
-
-            <div id="pdf-preview">
-                <h3>Aperçu du PDF</h3>
-                <iframe id="pdf-viewer" title="Aperçu du PDF de la solution"></iframe>
-            </div>
+        <div id="loading" class="card loading hidden">
+            <div class="spinner"></div>
+            <p>Mariam AI analyse l'exercice et génère la solution...</p>
+            <p class="upload-hint">Cette opération peut prendre jusqu'à une minute.</p>
+        </div>
 
-            <button id="download-button" class="hidden">Télécharger le PDF</button>
+        <div id="messages" class="message hidden"></div>
 
-            <div id="raw-output">
-                <div id="latex-section" class="hidden">
-                    <h3>Code LaTeX Généré</h3>
-                    <pre><code id="latex-output"></code></pre>
+        <div id="results" class="card hidden">
+            <h2>Résultat de l'analyse</h2>
+            
+            <div class="tab-container">
+                <div class="tabs">
+                    <div class="tab active" data-tab="pdf">Aperçu PDF</div>
+                    <div class="tab" data-tab="latex">Code LaTeX</div>
+                    <div class="tab" data-tab="thinking">Processus de réflexion</div>
                 </div>
-                <div id="thinking-section" class="hidden">
-                    <h3>Processus de Réflexion (IA)</h3>
-                    <pre><code id="thinking-output"></code></pre>
+                
+                <div id="pdf-tab" class="tab-content active">
+                    <iframe id="pdf-viewer" title="Aperçu du PDF de la solution"></iframe>
+                    <div class="download-container">
+                        <button id="download-button" class="download-button">
+                            <i class="fas fa-download"></i> Télécharger le PDF
+                        </button>
+                    </div>
+                </div>
+                
+                <div id="latex-tab" class="tab-content">
+                    <div class="code-area">
+                        <pre id="latex-output"></pre>
+                    </div>
+                </div>
+                
+                <div id="thinking-tab" class="tab-content">
+                    <div class="code-area">
+                        <pre id="thinking-output"></pre>
+                    </div>
                 </div>
             </div>
         </div>
@@ -193,22 +503,109 @@
 
     <script>
         document.addEventListener('DOMContentLoaded', () => {
+            // Éléments DOM
             const latexStatusEl = document.getElementById('latex-status');
             const apiStatusEl = document.getElementById('api-status');
+            const fileInputContainer = document.getElementById('file-input-container');
             const imageInput = document.getElementById('image-input');
+            const imagePreview = document.getElementById('image-preview');
+            const fileName = document.getElementById('file-name');
+            const clearFile = document.getElementById('clear-file');
             const processButton = document.getElementById('process-button');
             const loadingEl = document.getElementById('loading');
             const messagesEl = document.getElementById('messages');
             const resultsEl = document.getElementById('results');
             const pdfViewer = document.getElementById('pdf-viewer');
             const downloadButton = document.getElementById('download-button');
-            const rawOutputEl = document.getElementById('raw-output');
-            const latexSection = document.getElementById('latex-section');
             const latexOutputEl = document.getElementById('latex-output');
-            const thinkingSection = document.getElementById('thinking-section');
             const thinkingOutputEl = document.getElementById('thinking-output');
+            const tabs = document.querySelectorAll('.tab');
+            const tabContents = document.querySelectorAll('.tab-content');
+
+            let currentPdfBase64 = null; // Stockage des données PDF
+
+            // --- Gestion des onglets ---
+            tabs.forEach(tab => {
+                tab.addEventListener('click', () => {
+                    // Désactiver tous les onglets
+                    tabs.forEach(t => t.classList.remove('active'));
+                    tabContents.forEach(c => c.classList.remove('active'));
+                    
+                    // Activer l'onglet sélectionné
+                    tab.classList.add('active');
+                    document.getElementById(`${tab.dataset.tab}-tab`).classList.add('active');
+                });
+            });
+
+            // --- Gestion du chargement des images ---
+            imageInput.addEventListener('change', handleFileSelect);
+            
+            // Gestion du drag and drop
+            ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
+                fileInputContainer.addEventListener(eventName, preventDefaults, false);
+            });
+
+            ['dragenter', 'dragover'].forEach(eventName => {
+                fileInputContainer.addEventListener(eventName, () => {
+                    fileInputContainer.classList.add('dragover');
+                }, false);
+            });
+
+            ['dragleave', 'drop'].forEach(eventName => {
+                fileInputContainer.addEventListener(eventName, () => {
+                    fileInputContainer.classList.remove('dragover');
+                }, false);
+            });
+
+            fileInputContainer.addEventListener('drop', handleDrop, false);
+            
+            // Gestion du bouton de suppression de fichier
+            clearFile.addEventListener('click', (e) => {
+                e.stopPropagation();
+                clearFileInput();
+            });
+
+            function preventDefaults(e) {
+                e.preventDefault();
+                e.stopPropagation();
+            }
+
+            function handleDrop(e) {
+                const dt = e.dataTransfer;
+                const files = dt.files;
+                
+                if (files && files[0]) {
+                    imageInput.files = files;
+                    handleFileSelect();
+                }
+            }
+
+            function handleFileSelect() {
+                const file = imageInput.files[0];
+                
+                if (file) {
+                    const reader = new FileReader();
+                    
+                    reader.onload = function(e) {
+                        imagePreview.src = e.target.result;
+                        fileName.textContent = file.name;
+                        fileInputContainer.classList.add('preview-active');
+                        processButton.disabled = false;
+                    };
+                    
+                    reader.readAsDataURL(file);
+                } else {
+                    clearFileInput();
+                }
+            }
 
-            let currentPdfBase64 = null; // Stocker les données PDF pour le téléchargement
+            function clearFileInput() {
+                imageInput.value = '';
+                imagePreview.src = '';
+                fileName.textContent = '';
+                fileInputContainer.classList.remove('preview-active');
+                processButton.disabled = true;
+            }
 
             // --- Fonctions Utilitaires ---
             function showLoading() {
@@ -216,73 +613,97 @@
                 processButton.disabled = true;
                 messagesEl.classList.add('hidden');
                 resultsEl.classList.add('hidden');
-                pdfViewer.src = 'about:blank'; // Clear previous PDF
+                pdfViewer.src = 'about:blank'; // Vider l'aperçu PDF
                 latexOutputEl.textContent = '';
                 thinkingOutputEl.textContent = '';
-                latexSection.classList.add('hidden');
-                thinkingSection.classList.add('hidden');
-                downloadButton.classList.add('hidden');
                 currentPdfBase64 = null;
             }
 
             function hideLoading() {
                 loadingEl.classList.add('hidden');
-                processButton.disabled = false;
+                processButton.disabled = !imageInput.files[0];
             }
 
             function showMessage(message, isError = false) {
-                messagesEl.textContent = message;
-                messagesEl.className = isError ? 'message-error' : 'message-success';
+                messagesEl.innerHTML = `
+                    <i class="fas ${isError ? 'fa-exclamation-circle' : 'fa-check-circle'}"></i>
+                    <div>${message}</div>
+                `;
+                messagesEl.className = `message ${isError ? 'message-error' : 'message-success'}`;
                 messagesEl.classList.remove('hidden');
             }
 
             function displayResults(data) {
                 resultsEl.classList.remove('hidden');
 
+                // Gestion du PDF
                 if (data.pdf_base64) {
                     pdfViewer.src = `data:application/pdf;base64,${data.pdf_base64}`;
                     currentPdfBase64 = data.pdf_base64;
                     downloadButton.classList.remove('hidden');
                 } else {
-                     pdfViewer.src = 'about:blank'; // Ensure it's blank if no PDF
+                     pdfViewer.src = 'about:blank';
                      downloadButton.classList.add('hidden');
                 }
 
-                if (data.latex) {
-                    latexOutputEl.textContent = data.latex;
-                    latexSection.classList.remove('hidden');
-                } else {
-                    latexSection.classList.add('hidden');
-                }
-
-                if (data.thinking) {
-                    thinkingOutputEl.textContent = data.thinking;
-                    thinkingSection.classList.remove('hidden');
-                } else {
-                    thinkingSection.classList.add('hidden');
+                // Gestion du LaTeX
+                latexOutputEl.textContent = data.latex || "Aucun code LaTeX disponible.";
+                
+                // Gestion du processus de réflexion
+                thinkingOutputEl.textContent = data.thinking || "Aucun processus de réflexion disponible.";
+                
+                // Activer l'onglet approprié par défaut
+                if (data.pdf_base64) {
+                    activateTab('pdf');
+                } else if (data.latex) {
+                    activateTab('latex');
+                } else if (data.thinking) {
+                    activateTab('thinking');
                 }
             }
+            
+            function activateTab(tabName) {
+                tabs.forEach(t => t.classList.remove('active'));
+                tabContents.forEach(c => c.classList.remove('active'));
+                
+                document.querySelector(`.tab[data-tab="${tabName}"]`).classList.add('active');
+                document.getElementById(`${tabName}-tab`).classList.add('active');
+            }
 
             // --- Vérifications Initiales ---
             async function checkStatus() {
                 try {
                     const latexRes = await fetch('/check-latex');
                     const latexData = await latexRes.json();
-                    latexStatusEl.textContent = latexData.message;
-                    latexStatusEl.className = latexData.success ? 'status-success' : 'status-error';
+                    
+                    latexStatusEl.innerHTML = `
+                        <span class="status-icon"><i class="fas ${latexData.success ? 'fa-check-circle' : 'fa-times-circle'}"></i></span>
+                        <span class="status-text">${latexData.message}</span>
+                    `;
+                    latexStatusEl.className = `status-item ${latexData.success ? 'status-success' : 'status-error'}`;
                 } catch (error) {
-                    latexStatusEl.textContent = '❌ Erreur lors de la vérification de LaTeX: ' + error;
-                    latexStatusEl.className = 'status-error';
+                    latexStatusEl.innerHTML = `
+                        <span class="status-icon"><i class="fas fa-times-circle"></i></span>
+                        <span class="status-text">Erreur lors de la vérification de LaTeX: ${error}</span>
+                    `;
+                    latexStatusEl.className = 'status-item status-error';
                 }
 
                 try {
                     const apiRes = await fetch('/check-api');
                     const apiData = await apiRes.json();
-                    apiStatusEl.textContent = apiData.message;
-                    apiStatusEl.className = apiData.success ? 'status-success' : 'status-error';
+                    
+                    apiStatusEl.innerHTML = `
+                        <span class="status-icon"><i class="fas ${apiData.success ? 'fa-check-circle' : 'fa-times-circle'}"></i></span>
+                        <span class="status-text">${apiData.message}</span>
+                    `;
+                    apiStatusEl.className = `status-item ${apiData.success ? 'status-success' : 'status-error'}`;
                 } catch (error) {
-                    apiStatusEl.textContent = '❌ Erreur lors de la vérification de l\'API: ' + error;
-                    apiStatusEl.className = 'status-error';
+                    apiStatusEl.innerHTML = `
+                        <span class="status-icon"><i class="fas fa-times-circle"></i></span>
+                        <span class="status-text">Erreur lors de la vérification de l'API: ${error}</span>
+                    `;
+                    apiStatusEl.className = 'status-item status-error';
                 }
             }
 
@@ -309,13 +730,13 @@
                     hideLoading();
 
                     if (data.success) {
-                        showMessage('Solution générée et compilée avec succès !');
+                        showMessage('Solution générée avec succès !');
                         displayResults(data);
                     } else {
                         showMessage(`Erreur : ${data.message}`, true);
                         // Afficher le LaTeX/Thinking même en cas d'erreur de compilation
                         if(data.latex || data.thinking) {
-                             displayResults(data); // Affiche LaTeX/Thinking sans PDF
+                             displayResults(data);
                         }
                     }
 
@@ -327,7 +748,7 @@
             });
 
             // --- Téléchargement du PDF ---
-             downloadButton.addEventListener('click', async () => {
+            downloadButton.addEventListener('click', async () => {
                 if (!currentPdfBase64) {
                     showMessage('Aucune donnée PDF à télécharger.', true);
                     return;
@@ -343,23 +764,18 @@
                     });
 
                     if (response.ok) {
-                        // Le backend utilise send_file avec as_attachment=True,
-                        // le navigateur devrait déclencher le téléchargement automatiquement.
-                        // On récupère le blob pour créer un lien de secours au cas où.
                         const blob = await response.blob();
                         const url = window.URL.createObjectURL(blob);
                         const a = document.createElement('a');
                         a.style.display = 'none';
                         a.href = url;
-                        // Le nom de fichier est défini côté serveur, mais on le remet ici
                         a.download = response.headers.get('Content-Disposition')?.split('filename=')[1]?.replaceAll('"', '') || 'solution_mariam_ai.pdf';
                         document.body.appendChild(a);
                         a.click();
                         window.URL.revokeObjectURL(url);
                         a.remove();
-                         showMessage('Téléchargement démarré.');
+                        showMessage('Téléchargement démarré.');
                     } else {
-                        // Essayer de lire le message d'erreur JSON du serveur
                         let errorMsg = `Échec du téléchargement (code ${response.status}).`;
                         try {
                             const errorData = await response.json();
@@ -368,12 +784,11 @@
                         showMessage(errorMsg, true);
                     }
                 } catch (error) {
-                     showMessage(`Erreur lors de la tentative de téléchargement : ${error}`, true);
-                     console.error("Download Error:", error);
+                    showMessage(`Erreur lors de la tentative de téléchargement : ${error}`, true);
+                    console.error("Download Error:", error);
                 }
             });
 
-
             // Exécuter les vérifications au chargement
             checkStatus();
         });