hey

Dockerfile

@@ -0,0 +1,18 @@
+FROM python:3.11
+
+# Installer poppler-utils, texlive-latex-extra et texlive-full
+USER root
+RUN apt-get update && apt-get install -y poppler-utils texlive-latex-extra texlive-full && rm -rf /var/lib/apt/lists/*
+
+# Créer un utilisateur non-root
+RUN useradd -m -u 1000 user
+USER user
+ENV PATH="/home/user/.local/bin:$PATH"
+
+WORKDIR /app
+COPY --chown=user ./requirements.txt requirements.txt
+RUN pip install --no-cache-dir --upgrade -r requirements.txt
+COPY --chown=user . /app
+
+# Commande de démarrage Flask
+CMD ["flask", "run", "--host=0.0.0.0", "--port=7860"]

app.py

@@ -0,0 +1,417 @@
+from flask import Flask, render_template, request, send_file, jsonify
+from google import genai
+from google.genai import types
+from PIL import Image
+import subprocess
+import tempfile
+import os
+import io
+import shutil
+import base64
+
+app = Flask(__name__)
+
+# --- Cognvstantes ---
+MODEL_SINGLE_GENERATION = "gemini-2.5-pro-exp-03-25"  # Modèle avec "thinking" pour la génération complète
+LATEX_MENTION = r"\vspace{1cm}\noindent\textit{Ce devoir a été généré par Mariam AI. \url{https://mariam-241.vercel.app}}"
+
+# --- Configuration des secrets ---
+# Dans un environnement de production, utilisez les variables d'environnement ou un fichier .env
+GOOGLE_API_KEY = os.environ.get('GOOGLE_API_KEY', '')
+
+# --- Fonctions Utilitaires ---
+
+def check_latex_installation():
+    """Vérifie si pdflatex est accessible dans le PATH système."""
+    try:
+        subprocess.run(['pdflatex', '--version'], capture_output=True, check=True, timeout=10)
+        return True, "✅ Installation LaTeX (pdflatex) trouvée."
+    except (subprocess.CalledProcessError, FileNotFoundError, TimeoutError) as e:
+        return False, f"❌ pdflatex introuvable ou ne répond pas. Veuillez installer une distribution LaTeX (comme TeX Live ou MiKTeX) et vous assurer qu'elle est dans le PATH système. Erreur: {e}"
+
+def initialize_genai_client():
+    """Initialise et retourne le client Google GenAI."""
+    try:
+        if not GOOGLE_API_KEY:
+            return None, "Clé API Google non trouvée dans les variables d'environnement."
+            
+        client = genai.Client(api_key=GOOGLE_API_KEY)
+        return client, "✅ Client Mariam AI initialisé."
+    except Exception as e:
+        return None, f"❌ Erreur lors de l'initialisation du client: {str(e)}"
+
+def clean_latex(raw_latex_text):
+    """Nettoie le code LaTeX brut potentiellement fourni par Gemini."""
+    if not isinstance(raw_latex_text, str):
+        return ""  # Retourne une chaîne vide si l'entrée n'est pas une chaîne
+
+    cleaned = raw_latex_text.strip()
+
+    # Supprime les marqueurs de bloc de code (```latex ... ``` ou ``` ... ```)
+    if cleaned.startswith("```latex"):
+        cleaned = cleaned[8:]
+    elif cleaned.startswith("```"):
+        # Gère le cas où il y a un saut de ligne après ```
+        lines = cleaned.split('\n', 1)
+        if len(lines) > 1:
+            cleaned = lines[1]
+        else:
+            cleaned = cleaned[3:]  # Si pas de saut de ligne, juste enlever ```
+
+    # Supprime les marqueurs de fin de bloc de code
+    if cleaned.endswith("```"):
+        cleaned = cleaned[:-3].strip()  # Enlève ``` et les espaces potentiels avant
+
+    # Assure que le document commence correctement
+    if not cleaned.startswith("\\documentclass"):
+        # On pourrait choisir de lever une erreur ou de tenter une correction
+        pass
+
+    # Assure que le document se termine exactement par \end{document}
+    end_doc_tag = "\\end{document}"
+    if end_doc_tag in cleaned:
+        end_idx = cleaned.rfind(end_doc_tag) + len(end_doc_tag)
+        cleaned = cleaned[:end_idx]
+    else:
+        # Ajoute seulement si \documentclass est présent pour éviter de créer un doc invalide
+        if cleaned.strip().startswith("\\documentclass"):
+            cleaned += f"\n{end_doc_tag}"
+
+    return cleaned.strip()  # Retourne le résultat nettoyé
+
+# --- Fonction Principale (API GenAI) ---
+
+def generate_complete_latex(client, image_bytes):
+    """
+    Génère une solution complète en LaTeX à partir de l'image en une seule étape.
+    """
+    try:
+        # Convertir les bytes en image PIL
+        image = Image.open(io.BytesIO(image_bytes))
+        
+        prompt =r"""
+**PROMPT AMÉLIORÉ**
+
+# RÔLE & OBJECTIF
+Tu es un expert en mathématiques du supérieur, un tuteur pédagogue exceptionnel, et un maître utilisateur de LaTeX. Ton objectif est de générer une correction LaTeX complète, rigoureuse, pédagogique et visuellement impeccable pour l'exercice de mathématiques fourni. Le résultat doit être un fichier source `.tex` autonome, directement compilable via `pdflatex`, et d'une qualité de présentation professionnelle, similaire à l'exemple fourni précédemment.
+
+# CONTEXTE
+*   **Input:** L'énoncé de l'exercice de mathématiques sera fourni sous forme de texte (copié/collé par l'utilisateur) immédiatement après ce prompt.
+*   **Niveau Cible:** Élève de Terminale (système français, filière scientifique ou équivalent).
+*   **Output Attendu:** **Uniquement** le code source LaTeX (`.tex`) brut et complet. Aucune explication ou texte d'accompagnement en dehors du code lui-même. 
+# TÂCHE PRINCIPALE
+1.  **Analyse:** Lis et comprends parfaitement l'énoncé de l'exercice fourni.
+2.  **Résolution:** Résous l'exercice de manière exhaustive, en détaillant chaque étape de raisonnement et de calcul.
+3.  **Rédaction LaTeX:** Rédige la solution complète *directement* en code LaTeX, en respectant **scrupuleusement** toutes les spécifications techniques, de style et de contenu ci-dessous.
+
+# SPÉCIFICATIONS TECHNIQUES DU CODE LATEX
+
+1.  **Document de Base:**
+    *   Classe: `\documentclass[12pt,a4paper]{article}`
+    *   Encodage: `\usepackage[utf8]{inputenc}`, `\usepackage[T1]{fontenc}`
+    *   Langue: `\usepackage[french]{babel}`
+    *   Police: `\usepackage{lmodern}` (Latin Modern)
+    *   Typographie Fine: `\usepackage{microtype}`
+
+2.  **Packages Indispensables (Configurer si nécessaire):**
+    *   Maths: `amsmath`, `amssymb`, `amsfonts`, `mathtools`, `bm` (pour gras maths), `siunitx` (unités SI).
+    *   Mise en Page: `geometry` (marges `a4paper, margin=2.5cm`), `setspace` (utiliser `\onehalfspacing`), `fancyhdr` (pour en-têtes/pieds), `titlesec` & `titletoc` (personnalisation titres/TDM), `multicol` (si besoin).
+    *   Visuel & Couleurs: `xcolor` (définir les couleurs ci-dessous), `tcolorbox` (avec `theorems`, `skins`, `breakable`, `hooks`), `fontawesome5` (pour icônes).
+    *   Liens & PDF: `hyperref` (configuré pour liens colorés, métadonnées PDF), `bookmark`.
+    *   Graphiques: `tikz` (avec `calc`, `shapes`, `arrows.meta`, `positioning`), `pgfplots` (avec `compat=1.18`, `fillbetween`).
+
+3.  **Configuration Générale:**
+    *   Paragraphes: Pas d'indentation (`\setlength{\parindent}{0pt}`), espacement entre paragraphes (`\setlength{\parskip}{1.2ex plus 0.5ex minus 0.2ex}`).
+    *   Compilabilité: Code valide pour `pdflatex`.
+
+# STYLE & PRÉSENTATION PROFESSIONNELLE (Inspiré de l'exemple)
+
+1.  **Couleurs à Définir (`\definecolor`):**
+    *   `maincolor`: Bleu (e.g., `{RGB}{0, 90, 160}`)
+    *   `secondcolor`: Vert-bleu (e.g., `{RGB}{0, 150, 136}`)
+    *   `thirdcolor`: Violet (e.g., `{RGB}{140, 0, 140}`)
+    *   `accentcolor`: Orange (e.g., `{RGB}{255, 140, 0}`)
+    *   `ubgcolor`: Fond clair (e.g., `{RGB}{245, 247, 250}`)
+    *   `codebackground`: Fond code (e.g., `{RGB}{245, 245, 245}`)
+    *   `gridcolor`: Grille PGFPlots (e.g., `{RGB}{220, 220, 220}`)
+    *   `asymptotecolor`: Asymptotes (e.g., `{RGB}{200, 0, 0}`)
+
+2.  **Page de Titre / Présentation Initiale:**
+    *   Créer une page de titre distincte (`titlepage`) ou un bloc titre élégant après `\begin{document}` utilisant `\maketitle` (redéfini si nécessaire).
+    *   Inclure titre clair, sous-titre (e.g., "Exercice X: Solution Détaillée"), auteur générique (e.g., "Solution Proposée"), date (`\today`).
+    *   Optionnel : Page séparée pour l'énoncé encadré et un plan de résolution avant la table des matières.
+
+3.  **Structure & Navigation:**
+    *   Table des matières (`\tableofcontents`) après la présentation initiale.
+    *   En-têtes/Pieds de page (`fancyhdr`): Infos discrètes (titre exo, page), règles fines colorées.
+    *   Titres (`titlesec`): Sections/sous-sections numérotées avec style distinctif (e.g., numéro dans cercle/rectangle coloré, ligne de séparation).
+
+4.  **Boîtes `tcolorbox` Personnalisées (avec icônes `fontawesome5`):**
+    *   `enoncebox` (Grisâtre, `\faBook`): Pour l'énoncé principal.
+    *   `definitionbox` (Couleur secondaire, `\faLightbulb`): Pour définitions, théorèmes clés.
+    *   `resultbox` (Couleur accent, `\faCheckCircle`): Pour les résultats finaux importants.
+    *   `notebox` (Couleur tertiaire, `\faInfoCircle`): Pour remarques, astuces, points de méthode.
+    *   `examplebox` (Vert, `\faClipboard`): Pour exemples illustratifs ou rappels de méthode.
+    *   Configurer ces boîtes pour être `breakable`, avec titre stylisé.
+
+5.  **Commandes Mathématiques Personnalisées (`\newcommand`):**
+    *   Ensembles: `\R`, `\C`, `\N`, `\Z`, `\Q`.
+    *   Limites: `\limx{}`, `\limxp{}`, `\limxm{}`, `\limsinf`, `\liminf`.
+    *   Dérivées: `\derivee{}{} `, `\ddx{}`, `\dfdx{}`.
+    *   Divers: `\abs{}`, `\norm{}`, `\vect{}`, `\ds` (`\displaystyle`).
+    *   Mise en valeur: `\highlight{}` (fond jaune?), `\finalresult{}` (fond couleur accent?).
+    *   Environnements: `importanteq` (pour équations clés encadrées, via `empheq`).
+
+6.  **Graphiques (`pgfplots`):**
+    *   Si pertinent (étude de fonction, géométrie): Inclure un graphique propre.
+    *   Configurer `pgfplotsset`: Axes centrés (`axis lines=middle`), flèches (`-Latex`), grille (`grid=both`), labels (`xlabel`, `ylabel`), légende (`legend pos=...`), couleurs définies plus haut.
+    *   Tracer la courbe principale (trait plein, couleur principale), asymptotes (pointillés, couleurs dédiées), points remarquables.
+
+# CONTENU PÉDAGOGIQUE DE LA SOLUTION
+
+1.  **Clarté et Rigueur:**
+    *   Rappeler l'énoncé initialement dans `enoncebox`.
+    *   Structurer la solution logiquement (par question, par étape).
+    *   Justifier *chaque* étape de calcul ou de raisonnement.
+    *   Utiliser un langage mathématique précis et une rédaction claire en français.
+    *   Aligner soigneusement les équations (`align*`, `cases`).
+
+2.  **Pédagogie:**
+    *   Expliquer les "pourquoi" derrière les méthodes utilisées.
+    *   Utiliser les `notebox` pour des conseils, pièges à éviter, ou rappels de cours.
+    *   Mettre en évidence les définitions/théorèmes clés dans `definitionbox`.
+    *   Encapsuler les résultats finaux dans `resultbox` ou avec `\finalresult`.
+
+3.  **Complétude:**
+    *   Traiter toutes les questions de l'énoncé.
+    *   Inclure les interprétations graphiques demandées ou pertinentes.
+    *   Conclure si nécessaire en résumant les points essentiels.
+
+# CONTRAINTES STRICTES
+*   Le seul output doit être le code LaTeX brut.
+*   Aucun texte avant `\documentclass` ou après `\end{document}` (sauf la mention spéciale).
+*   Inclure la ligne `{LATEX_MENTION}` juste avant `\end{document}`.
+
+
+"""
+
+        response = client.models.generate_content(
+            model=MODEL_SINGLE_GENERATION,
+            contents=[image, prompt],
+            config=genai.types.GenerateContentConfig(
+                temperature=1,
+            ),
+    
+        )
+
+        latex_content_raw = None
+        thinking_content = None
+
+        # Extrait le contenu LaTeX et le raisonnement (thought)
+        if response.candidates and response.candidates[0].content and response.candidates[0].content.parts:
+            for part in response.candidates[0].content.parts:
+                if getattr(part, 'thought', None):
+                    thinking_content = part.text
+                else:
+                    latex_content_raw = part.text
+
+        if latex_content_raw:
+            latex_content_cleaned = clean_latex(latex_content_raw)
+            
+            # Vérification supplémentaire : est-ce que la mention obligatoire est présente ?
+            if LATEX_MENTION not in latex_content_cleaned:
+                # Tente de l'insérer avant \end{document}
+                end_doc_tag = "\\end{document}"
+                if end_doc_tag in latex_content_cleaned:
+                    latex_content_cleaned = latex_content_cleaned.replace(end_doc_tag, f"{LATEX_MENTION}\n{end_doc_tag}")
+                else:
+                    # Si \end{document} n'est pas là, ajoute les deux à la fin
+                    latex_content_cleaned += f"\n{LATEX_MENTION}\n{end_doc_tag}"
+                    
+            return latex_content_cleaned, thinking_content, None
+        else:
+            return None, thinking_content, "Aucun contenu LaTeX n'a été généré par le modèle."
+
+    except genai.types.StopCandidateException as e:
+        return None, None, "❌ Génération stoppée (possible contenu inapproprié)"
+    except Exception as e:
+        return None, None, f"❌ Erreur lors de la génération du LaTeX: {str(e)}"
+
+# --- Fonction de Compilation LaTeX ---
+
+def compile_latex_to_pdf(latex_content):
+    """
+    Compile une chaîne de caractères contenant du code LaTeX en fichier PDF.
+    Utilise un répertoire temporaire pour les fichiers intermédiaires.
+    """
+    if not latex_content:
+        return None, "Impossible de compiler : contenu LaTeX vide."
+
+    # Utilise un répertoire temporaire sécurisé qui sera nettoyé automatiquement
+    with tempfile.TemporaryDirectory() as temp_dir:
+        tex_filename = "solution.tex"
+        pdf_filename = "solution.pdf"
+        tex_filepath = os.path.join(temp_dir, tex_filename)
+        pdf_filepath = os.path.join(temp_dir, pdf_filename)
+        log_filepath = os.path.join(temp_dir, "solution.log")  # Pour le débogage
+
+        # Écrit le contenu LaTeX dans le fichier .tex avec encodage UTF-8
+        try:
+            with open(tex_filepath, "w", encoding="utf-8") as f:
+                f.write(latex_content)
+        except IOError as e:
+            return None, f"❌ Erreur lors de l'écriture du fichier .tex temporaire: {str(e)}"
+
+        # Exécute pdflatex
+        command = [
+            "pdflatex",
+            "-interaction=nonstopmode",
+            f"-output-directory={temp_dir}",
+            f"-jobname={os.path.splitext(pdf_filename)[0]}",  # Nom sans extension
+            tex_filepath
+        ]
+
+        pdf_generated = False
+        compilation_output = ""
+        
+        for pass_num in range(1, 3):  # Lance jusqu'à 2 passes
+            try:
+                # Augmentation du timeout pour les compilations potentiellement longues
+                result = subprocess.run(command, capture_output=True, check=True, text=True, encoding='utf-8', errors='replace', timeout=60)
+                compilation_output += f"Passe {pass_num}: Succès\n"
+                
+                # Vérifie si le PDF a été créé après la première passe (au moins)
+                if os.path.exists(pdf_filepath):
+                    pdf_generated = True
+
+            except subprocess.CalledProcessError as e:
+                error_message = f"❌ Erreur lors de la compilation LaTeX (Passe {pass_num}).\n"
+                error_message += f"Code de retour: {e.returncode}\n"
+                error_message += f"Sortie: {e.stdout}\n"
+                error_message += f"Erreurs: {e.stderr}\n"
+                
+                # Essayer de lire le fichier .log pour plus d'infos
+                try:
+                    with open(log_filepath, "r", encoding="utf-8", errors='replace') as log_file:
+                        error_message += f"Extrait du fichier log (solution.log):\n{log_file.read()[-2000:]}"
+                except IOError:
+                    error_message += "Impossible de lire le fichier log de LaTeX."
+                
+                return None, error_message
+
+            except subprocess.TimeoutExpired:
+                return None, "❌ La compilation LaTeX a dépassé le délai imparti. Le document est peut-être trop complexe ou contient une boucle infinie."
+            
+            except Exception as e:
+                return None, f"❌ Une erreur inattendue est survenue lors de l'exécution de pdflatex: {str(e)}"
+
+        # Vérifie si le fichier PDF existe après les passes
+        if pdf_generated and os.path.exists(pdf_filepath):
+            try:
+                # Lit le contenu binaire du PDF généré
+                with open(pdf_filepath, "rb") as f:
+                    pdf_data = f.read()
+                return pdf_data, "✅ PDF généré avec succès !"
+            except IOError as e:
+                return None, f"❌ Erreur lors de la lecture du fichier PDF généré: {str(e)}"
+        else:
+            error_message = "❌ Le fichier PDF n'a pas été généré après la compilation LaTeX.\n"
+            # Tenter de lire le log
+            try:
+                with open(log_filepath, "r", encoding="utf-8", errors='replace') as log_file:
+                    error_message += f"Extrait du fichier log (solution.log) après échec de génération PDF:\n{log_file.read()[-2000:]}"
+            except IOError:
+                error_message += "Impossible de lire le fichier log de LaTeX."
+            return None, error_message
+
+# --- Routes Flask ---
+
+@app.route('/')
+def index():
+    return render_template('index.html')
+
+@app.route('/check-latex', methods=['GET'])
+def check_latex():
+    latex_installed, message = check_latex_installation()
+    return jsonify({
+        'success': latex_installed,
+        'message': message
+    })
+
+@app.route('/check-api', methods=['GET'])
+def check_api():
+    client, message = initialize_genai_client()
+    return jsonify({
+        'success': client is not None,
+        'message': message
+    })
+
+@app.route('/process', methods=['POST'])
+def process():
+    if 'image' not in request.files:
+        return jsonify({'success': False, 'message': 'Aucune image téléchargée'})
+        
+    file = request.files['image']
+    if file.filename == '':
+        return jsonify({'success': False, 'message': 'Aucun fichier sélectionné'})
+    
+    # Lire l'image
+    image_bytes = file.read()
+    
+    # Initialiser le client
+    client, message = initialize_genai_client()
+    if client is None:
+        return jsonify({'success': False, 'message': message})
+    
+    # Générer le LaTeX
+    latex_content, thinking_content, error = generate_complete_latex(client, image_bytes)
+    if error:
+        return jsonify({'success': False, 'message': error})
+        
+    # Compiler en PDF
+    pdf_data, message = compile_latex_to_pdf(latex_content)
+    if pdf_data is None:
+        return jsonify({
+            'success': False, 
+            'message': message,
+            'latex': latex_content,
+            'thinking': thinking_content
+        })
+    
+    # Encoder le PDF en base64 pour le retourner au front-end
+    pdf_base64 = base64.b64encode(pdf_data).decode('utf-8')
+    
+    # Retourner les données
+    return jsonify({
+        'success': True,
+        'message': 'PDF généré avec succès',
+        'latex': latex_content,
+        'thinking': thinking_content,
+        'pdf_base64': pdf_base64
+    })
+
+@app.route('/download-pdf', methods=['POST'])
+def download_pdf():
+    if 'pdf_data' not in request.json:
+        return jsonify({'success': False, 'message': 'Données PDF manquantes'})
+    
+    try:
+        pdf_data = base64.b64decode(request.json['pdf_data'])
+        
+        # Créer un fichier temporaire pour le PDF
+        with tempfile.NamedTemporaryFile(delete=False, suffix='.pdf') as temp_file:
+            temp_file.write(pdf_data)
+            temp_path = temp_file.name
+        
+        # Envoyer le fichier
+        return send_file(
+            temp_path,
+            mimetype='application/pdf',
+            as_attachment=True,
+            download_name='solution_mariam_ai.pdf'
+        )
+    except Exception as e:
+        return jsonify({'success': False, 'message': f'Erreur lors du téléchargement: {str(e)}'})
+
+if __name__ == "__main__":
+    app.run(debug=True)

requirements.txt

@@ -0,0 +1,5 @@
+Flask
+phidata
+google-genai>=0.6.0
+pillow
+python-dotenv

templates/index.html

@@ -0,0 +1,797 @@
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+    <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: 'Inter', system-ui, -apple-system, sans-serif;
+            line-height: 1.6;
+            color: var(--text);
+            background-color: var(--bg-light);
+            padding: 1.5rem;
+        }
+
+        .container {
+            max-width: 1000px;
+            margin: 0 auto;
+        }
+
+        .header {
+            text-align: center;
+            margin-bottom: 2rem;
+        }
+
+        h1 {
+            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;
+        }
+
+        .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: var(--success-light);
+            border: 1px solid var(--success);
+        }
+
+        .status-error {
+            background-color: var(--error-light);
+            border: 1px solid var(--error);
+        }
+
+        .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;
+        }
+
+        .preview-active .file-name {
+            display: block;
+        }
+
+        .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: 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;
+            width: 100%;
+        }
+
+        .button:hover {
+            background-color: var(--primary-hover);
+        }
+
+        .button:active {
+            transform: translateY(1px);
+        }
+
+        .button:disabled {
+            background-color: var(--text-light);
+            cursor: not-allowed;
+            opacity: 0.7;
+        }
+
+        .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: var(--success-light);
+            border: 1px solid var(--success);
+            color: var(--success);
+        }
+
+        .message-error {
+            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 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;
+        }
+
+        .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;
+        }
+
+        .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 !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">
+        <div class="header">
+            <h1>Mariam AI</h1>
+            <p class="subheader">Correcteur Intelligent d'Exercices Mathématiques/physique/chimie.</p>
+        </div>
+
+        <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 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="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>
+
+        <div id="messages" class="message hidden"></div>
+
+        <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="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>
+    </div>
+
+    <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 latexOutputEl = document.getElementById('latex-output');
+            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();
+                }
+            }
+
+            function clearFileInput() {
+                imageInput.value = '';
+                imagePreview.src = '';
+                fileName.textContent = '';
+                fileInputContainer.classList.remove('preview-active');
+                processButton.disabled = true;
+            }
+
+            // --- Fonctions Utilitaires ---
+            function showLoading() {
+                loadingEl.classList.remove('hidden');
+                processButton.disabled = true;
+                messagesEl.classList.add('hidden');
+                resultsEl.classList.add('hidden');
+                pdfViewer.src = 'about:blank'; // Vider l'aperçu PDF
+                latexOutputEl.textContent = '';
+                thinkingOutputEl.textContent = '';
+                currentPdfBase64 = null;
+            }
+
+            function hideLoading() {
+                loadingEl.classList.add('hidden');
+                processButton.disabled = !imageInput.files[0];
+            }
+
+            function showMessage(message, isError = false) {
+                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';
+                     downloadButton.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.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.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.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.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';
+                }
+            }
+
+            // --- Traitement de l'Image ---
+            processButton.addEventListener('click', async () => {
+                const file = imageInput.files[0];
+                if (!file) {
+                    showMessage('Veuillez sélectionner un fichier image.', true);
+                    return;
+                }
+
+                showLoading();
+
+                const formData = new FormData();
+                formData.append('image', file);
+
+                try {
+                    const response = await fetch('/process', {
+                        method: 'POST',
+                        body: formData
+                    });
+
+                    const data = await response.json();
+                    hideLoading();
+
+                    if (data.success) {
+                        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);
+                        }
+                    }
+
+                } catch (error) {
+                    hideLoading();
+                    showMessage(`Erreur de communication avec le serveur : ${error}`, true);
+                    console.error("Fetch Error:", error);
+                }
+            });
+
+            // --- Téléchargement du PDF ---
+            downloadButton.addEventListener('click', async () => {
+                if (!currentPdfBase64) {
+                    showMessage('Aucune donnée PDF à télécharger.', true);
+                    return;
+                }
+
+                try {
+                    const response = await fetch('/download-pdf', {
+                        method: 'POST',
+                        headers: {
+                            'Content-Type': 'application/json',
+                        },
+                        body: JSON.stringify({ pdf_data: currentPdfBase64 }),
+                    });
+
+                    if (response.ok) {
+                        const blob = await response.blob();
+                        const url = window.URL.createObjectURL(blob);
+                        const a = document.createElement('a');
+                        a.style.display = 'none';
+                        a.href = url;
+                        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é.');
+                    } else {
+                        let errorMsg = `Échec du téléchargement (code ${response.status}).`;
+                        try {
+                            const errorData = await response.json();
+                            if(errorData.message) errorMsg += ` Raison: ${errorData.message}`;
+                        } catch(e) { /* Ignorer l'erreur si la réponse n'est pas JSON */ }
+                        showMessage(errorMsg, true);
+                    }
+                } catch (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();
+        });
+    </script>
+</body>
+</html>