Spaces:

Docfile
/

Mariam-pdf

Running

App Files Files Community

Docfile commited on 10 days ago

Commit

cf03bc3

verified ·

1 Parent(s): 7566447

Create template/index.html

Browse files

Files changed (1) hide show

template/index.html +865 -0

template/index.html ADDED Viewed

	@@ -0,0 +1,865 @@

+<!DOCTYPE html>
+<html lang="fr">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Mariam AI - Résolution d'exercices</title>
+    <!-- Font Awesome pour les icônes -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <!-- Google Fonts -->
+    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+    <style>
+        :root {
+            --primary-color: #6C63FF;
+            --secondary-color: #F50057;
+            --success-color: #4CAF50;
+            --warning-color: #FF9800;
+            --error-color: #F44336;
+            --dark-color: #333;
+            --light-color: #F5F5F5;
+            --white: #FFFFFF;
+            --transition: all 0.3s ease;
+        }
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        body {
+            font-family: 'Poppins', sans-serif;
+            background-color: #F9FAFB;
+            color: #333;
+            line-height: 1.6;
+        }
+        .container {
+            max-width: 1200px;
+            margin: 0 auto;
+            padding: 0 15px;
+        }
+        header {
+            background: linear-gradient(135deg, var(--primary-color), #8A84FF);
+            color: white;
+            padding: 2rem 0;
+            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+        }
+        header .container {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        .logo {
+            display: flex;
+            align-items: center;
+            font-size: 1.8rem;
+            font-weight: 700;
+            color: white;
+            text-decoration: none;
+        }
+        .logo i {
+            margin-right: 10px;
+            font-size: 2rem;
+        }
+        nav ul {
+            display: flex;
+            list-style: none;
+        }
+        nav ul li {
+            margin-left: 20px;
+        }
+        nav ul li a {
+            color: white;
+            text-decoration: none;
+            font-weight: 500;
+            transition: var(--transition);
+        }
+        nav ul li a:hover {
+            color: #FFD166;
+        }
+        .hero {
+            text-align: center;
+            padding: 3rem 1rem;
+        }
+        .hero h1 {
+            font-size: 2.5rem;
+            margin-bottom: 1rem;
+            color: var(--dark-color);
+        }
+        .hero p {
+            font-size: 1.2rem;
+            color: #666;
+            max-width: 800px;
+            margin: 0 auto 2rem auto;
+        }
+        main {
+            padding: 2rem 0;
+        }
+        .status-checks {
+            display: flex;
+            justify-content: center;
+            margin-bottom: 2rem;
+        }
+        .status-check {
+            background-color: var(--white);
+            border-radius: 8px;
+            padding: 15px;
+            margin: 0 10px;
+            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+            width: 250px;
+            text-align: center;
+            transition: var(--transition);
+        }
+        .status-check.loading {
+            border: 2px dashed #ccc;
+        }
+        .status-check.success {
+            border-left: 4px solid var(--success-color);
+        }
+        .status-check.error {
+            border-left: 4px solid var(--error-color);
+        }
+        .status-check i {
+            font-size: 2rem;
+            margin-bottom: 10px;
+        }
+        .status-check .loading-icon {
+            color: #ccc;
+            animation: spin 1s linear infinite;
+        }
+        .status-check .success-icon {
+            color: var(--success-color);
+        }
+        .status-check .error-icon {
+            color: var(--error-color);
+        }
+        .status-check h3 {
+            margin-bottom: 5px;
+            font-size: 1.1rem;
+        }
+        .status-check p {
+            font-size: 0.9rem;
+            color: #666;
+        }
+        .upload-container {
+            background-color: var(--white);
+            border-radius: 12px;
+            padding: 2rem;
+            margin-bottom: 2rem;
+            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
+            text-align: center;
+        }
+        .upload-area {
+            border: 2px dashed #ccc;
+            border-radius: 8px;
+            padding: 3rem 2rem;
+            text-align: center;
+            cursor: pointer;
+            transition: var(--transition);
+            margin-bottom: 1.5rem;
+            position: relative;
+        }
+        .upload-area:hover {
+            border-color: var(--primary-color);
+            background-color: rgba(108, 99, 255, 0.05);
+        }
+        .upload-area.drag-over {
+            border-color: var(--primary-color);
+            background-color: rgba(108, 99, 255, 0.1);
+        }
+        .upload-area i {
+            font-size: 3rem;
+            color: #ccc;
+            margin-bottom: 1rem;
+        }
+        .upload-area h3 {
+            margin-bottom: 0.5rem;
+            color: #444;
+        }
+        .upload-area p {
+            color: #888;
+            font-size: 0.9rem;
+            margin-bottom: 1rem;
+        }
+        .upload-area input[type="file"] {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            opacity: 0;
+            cursor: pointer;
+        }
+        .btn {
+            display: inline-block;
+            padding: 0.8rem 1.5rem;
+            border-radius: 50px;
+            font-weight: 500;
+            text-decoration: none;
+            cursor: pointer;
+            transition: var(--transition);
+            border: none;
+            font-size: 1rem;
+        }
+        .btn-primary {
+            background-color: var(--primary-color);
+            color: white;
+        }
+        .btn-primary:hover {
+            background-color: #5A52E0;
+            transform: translateY(-2px);
+            box-shadow: 0 4px 12px rgba(108, 99, 255, 0.3);
+        }
+        .btn-primary:disabled {
+            background-color: #ccc;
+            cursor: not-allowed;
+            transform: none;
+            box-shadow: none;
+        }
+        .btn-secondary {
+            background-color: var(--secondary-color);
+            color: white;
+        }
+        .btn-secondary:hover {
+            background-color: #E80051;
+            transform: translateY(-2px);
+            box-shadow: 0 4px 12px rgba(245, 0, 87, 0.3);
+        }
+        .preview-container {
+            display: none;
+            margin-top: 2rem;
+        }
+        .preview-image {
+            max-width: 100%;
+            max-height: 400px;
+            border-radius: 8px;
+            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+        }
+        .process-btn-container {
+            margin-top: 2rem;
+        }
+        .result-container {
+            display: none;
+            margin-top: 3rem;
+            padding: 2rem;
+            background-color: var(--white);
+            border-radius: 12px;
+            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
+        }
+        .result-tabs {
+            display: flex;
+            margin-bottom: 1.5rem;
+            border-bottom: 1px solid #ddd;
+        }
+        .result-tab {
+            padding: 10px 20px;
+            cursor: pointer;
+            background: none;
+            border: none;
+            border-bottom: 3px solid transparent;
+            font-weight: 500;
+            transition: var(--transition);
+        }
+        .result-tab.active {
+            border-bottom-color: var(--primary-color);
+            color: var(--primary-color);
+        }
+        .result-tab:hover:not(.active) {
+            border-bottom-color: #ddd;
+        }
+        .result-content {
+            display: none;
+        }
+        .result-content.active {
+            display: block;
+        }
+        .pdf-preview {
+            width: 100%;
+            height: 500px;
+            border: 1px solid #ddd;
+            border-radius: 8px;
+        }
+        .latex-code {
+            background-color: #f4f4f4;
+            padding: 15px;
+            border-radius: 8px;
+            white-space: pre-wrap;
+            font-family: monospace;
+            max-height: 400px;
+            overflow-y: auto;
+        }
+        .thinking-process {
+            background-color: #f9f9f9;
+            padding: 15px;
+            border-radius: 8px;
+            white-space: pre-wrap;
+            font-size: 0.9rem;
+            max-height: 400px;
+            overflow-y: auto;
+            border-left: 4px solid #ccc;
+        }
+        .download-btn {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            margin-top: 1.5rem;
+        }
+        .download-btn i {
+            margin-right: 10px;
+        }
+        .loader {
+            display: none;
+            text-align: center;
+            padding: 2rem;
+        }
+        .loader-icon {
+            font-size: 3rem;
+            color: var(--primary-color);
+            animation: spin 1s linear infinite;
+        }
+        .loader p {
+            margin-top: 1rem;
+            color: #666;
+        }
+        @keyframes spin {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
+        }
+        footer {
+            background-color: var(--dark-color);
+            color: white;
+            padding: 2rem 0;
+            margin-top: 3rem;
+        }
+        footer .container {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        .footer-links {
+            display: flex;
+        }
+        .footer-links a {
+            color: white;
+            margin-left: 15px;
+            text-decoration: none;
+            transition: var(--transition);
+        }
+        .footer-links a:hover {
+            color: var(--primary-color);
+        }
+        /* Alert styles */
+        .alert {
+            padding: 15px;
+            border-radius: 8px;
+            margin-bottom: 1rem;
+            display: flex;
+            align-items: center;
+        }
+        .alert i {
+            margin-right: 10px;
+            font-size: 1.2rem;
+        }
+        .alert-success {
+            background-color: rgba(76, 175, 80, 0.1);
+            color: var(--success-color);
+            border-left: 4px solid var(--success-color);
+        }
+        .alert-error {
+            background-color: rgba(244, 67, 54, 0.1);
+            color: var(--error-color);
+            border-left: 4px solid var(--error-color);
+        }
+        .alert-warning {
+            background-color: rgba(255, 152, 0, 0.1);
+            color: var(--warning-color);
+            border-left: 4px solid var(--warning-color);
+        }
+        /* Responsive styles */
+        @media (max-width: 768px) {
+            .status-checks {
+                flex-direction: column;
+                align-items: center;
+            }
+            .status-check {
+                width: 100%;
+                max-width: 400px;
+                margin-bottom: 15px;
+            }
+            .hero h1 {
+                font-size: 2rem;
+            }
+            .hero p {
+                font-size: 1rem;
+            }
+            footer .container {
+                flex-direction: column;
+                text-align: center;
+            }
+            .footer-links {
+                margin-top: 1rem;
+                justify-content: center;
+            }
+            .footer-links a:first-child {
+                margin-left: 0;
+            }
+        }
+    </style>
+</head>
+<body>
+    <header>
+        <div class="container">
+            <a href="/" class="logo">
+                <i class="fas fa-brain"></i>
+                Mariam AI
+            </a>
+            <nav>
+                <ul>
+                    <li><a href="/">Accueil</a></li>
+                    <li><a href="#" title="À venir">Historique</a></li>
+                    <li><a href="#" title="À venir">À propos</a></li>
+                </ul>
+            </nav>
+        </div>
+    </header>
+    <section class="hero">
+        <div class="container">
+            <h1>Résolution d'exercices scientifiques avec l'IA</h1>
+            <p>Téléchargez une image d'un exercice de mathématiques, physique ou chimie et obtenez une solution détaillée générée par l'intelligence artificielle, prête à télécharger en PDF.</p>
+        </div>
+    </section>
+    <main class="container">
+        <div class="status-checks">
+            <div class="status-check loading" id="latex-check">
+                <i class="fas fa-spinner loading-icon"></i>
+                <h3>Vérification LaTeX</h3>
+                <p>Vérification de l'installation LaTeX...</p>
+            </div>
+            <div class="status-check loading" id="api-check">
+                <i class="fas fa-spinner loading-icon"></i>
+                <h3>API Mariam AI</h3>
+                <p>Vérification de la connexion API...</p>
+            </div>
+        </div>
+        <div class="upload-container">
+            <h2>Téléchargez votre exercice</h2>
+            <p>Format accepté: JPEG, PNG, JPG</p>
+            <div class="upload-area" id="upload-area">
+                <i class="fas fa-cloud-upload-alt"></i>
+                <h3>Glissez-déposez votre image ici</h3>
+                <p>ou</p>
+                <button class="btn btn-primary">Parcourir les fichiers</button>
+                <input type="file" id="file-input" accept="image/png, image/jpeg, image/jpg">
+            </div>
+            <div class="preview-container" id="preview-container">
+                <h3>Aperçu de l'image</h3>
+                <img src="#" alt="Aperçu de l'exercice" class="preview-image" id="preview-image">
+                <div class="process-btn-container">
+                    <button class="btn btn-primary" id="process-btn" disabled>
+                        <i class="fas fa-magic"></i> Résoudre l'exercice
+                    </button>
+                    <button class="btn btn-secondary" id="cancel-btn">
+                        <i class="fas fa-times"></i> Annuler
+                    </button>
+                </div>
+            </div>
+        </div>
+        <div class="loader" id="loader">
+            <i class="fas fa-cog loader-icon"></i>
+            <p id="loader-message">Analyse de l'exercice et génération de la solution...</p>
+        </div>
+        <div class="result-container" id="result-container">
+            <h2>Résultat</h2>
+            <div class="result-tabs">
+                <button class="result-tab active" data-content="pdf-content">Solution PDF</button>
+                <button class="result-tab" data-content="latex-content">Code LaTeX</button>
+                <button class="result-tab" data-content="thinking-content">Processus de réflexion</button>
+            </div>
+            <div class="result-content active" id="pdf-content">
+                <iframe class="pdf-preview" id="pdf-preview" src=""></iframe>
+                <div class="download-btn">
+                    <a href="#" class="btn btn-primary" id="download-btn">
+                        <i class="fas fa-download"></i> Télécharger la solution en PDF
+                    </a>
+                </div>
+            </div>
+            <div class="result-content" id="latex-content">
+                <div class="latex-code" id="latex-code-display"></div>
+            </div>
+            <div class="result-content" id="thinking-content">
+                <div class="thinking-process" id="thinking-process-display"></div>
+            </div>
+        </div>
+    </main>
+    <footer>
+        <div class="container">
+            <p>&copy; 2025 Mariam AI - Version expérimentale</p>
+            <div class="footer-links">
+                <a href="#">Conditions d'utilisation</a>
+                <a href="#">Confidentialité</a>
+                <a href="#">Contact</a>
+            </div>
+        </div>
+    </footer>
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            // Éléments DOM
+            const uploadArea = document.getElementById('upload-area');
+            const fileInput = document.getElementById('file-input');
+            const previewContainer = document.getElementById('preview-container');
+            const previewImage = document.getElementById('preview-image');
+            const processBtn = document.getElementById('process-btn');
+            const cancelBtn = document.getElementById('cancel-btn');
+            const latexCheck = document.getElementById('latex-check');
+            const apiCheck = document.getElementById('api-check');
+            const loader = document.getElementById('loader');
+            const loaderMessage = document.getElementById('loader-message');
+            const resultContainer = document.getElementById('result-container');
+            const pdfPreview = document.getElementById('pdf-preview');
+            const downloadBtn = document.getElementById('download-btn');
+            const latexCodeDisplay = document.getElementById('latex-code-display');
+            const thinkingProcessDisplay = document.getElementById('thinking-process-display');
+            const resultTabs = document.querySelectorAll('.result-tab');
+            const resultContents = document.querySelectorAll('.result-content');
+            // Variables globales
+            let selectedFile = null;
+            // Vérifications initiales
+            checkLatexInstallation();
+            checkApiConnection();
+            // Gestion des événements de glisser-déposer
+            uploadArea.addEventListener('dragover', function(e) {
+                e.preventDefault();
+                uploadArea.classList.add('drag-over');
+            });
+            uploadArea.addEventListener('dragleave', function() {
+                uploadArea.classList.remove('drag-over');
+            });
+            uploadArea.addEventListener('drop', function(e) {
+                e.preventDefault();
+                uploadArea.classList.remove('drag-over');
+                if (e.dataTransfer.files.length > 0) {
+                    handleFileSelection(e.dataTransfer.files[0]);
+                }
+            });
+            // Gestion du clic sur le bouton de parcours
+            fileInput.addEventListener('change', function() {
+                if (fileInput.files.length > 0) {
+                    handleFileSelection(fileInput.files[0]);
+                }
+            });
+            // Gestion du clic sur le bouton d'annulation
+            cancelBtn.addEventListener('click', function() {
+                resetUploadArea();
+            });
+            // Gestion du clic sur le bouton de traitement
+            processBtn.addEventListener('click', function() {
+                if (selectedFile) {
+                    processImage(selectedFile);
+                }
+            });
+            // Gestion des onglets de résultat
+            resultTabs.forEach(tab => {
+                tab.addEventListener('click', function() {
+                    const contentId = this.getAttribute('data-content');
+                    // Désactiver tous les onglets et contenus
+                    resultTabs.forEach(t => t.classList.remove('active'));
+                    resultContents.forEach(c => c.classList.remove('active'));
+                    // Activer l'onglet cliqué et son contenu
+                    this.classList.add('active');
+                    document.getElementById(contentId).classList.add('active');
+                });
+            });
+            // Fonctions
+            function checkLatexInstallation() {
+                fetch('/check_latex')
+                    .then(response => response.json())
+                    .then(data => {
+                        latexCheck.classList.remove('loading');
+                        if (data.success) {
+                            latexCheck.classList.add('success');
+                            latexCheck.innerHTML = `
+                                <i class="fas fa-check-circle success-icon"></i>
+                                <h3>LaTeX installé</h3>
+                                <p>${data.message}</p>
+                            `;
+                        } else {
+                            latexCheck.classList.add('error');
+                            latexCheck.innerHTML = `
+                                <i class="fas fa-exclamation-circle error-icon"></i>
+                                <h3>LaTeX non détecté</h3>
+                                <p>${data.message}</p>
+                            `;
+                        }
+                    })
+                    .catch(error => {
+                        latexCheck.classList.remove('loading');
+                        latexCheck.classList.add('error');
+                        latexCheck.innerHTML = `
+                            <i class="fas fa-exclamation-circle error-icon"></i>
+                            <h3>Erreur de vérification</h3>
+                            <p>Impossible de vérifier l'installation LaTeX.</p>
+                        `;
+                    });
+            }
+            function checkApiConnection() {
+                fetch('/check_api')
+                    .then(response => response.json())
+                    .then(data => {
+                        apiCheck.classList.remove('loading');
+                        if (data.success) {
+                            apiCheck.classList.add('success');
+                            apiCheck.innerHTML = `
+                                <i class="fas fa-check-circle success-icon"></i>
+                                <h3>API connectée</h3>
+                                <p>${data.message}</p>
+                            `;
+                        } else {
+                            apiCheck.classList.add('error');
+                            apiCheck.innerHTML = `
+                                <i class="fas fa-exclamation-circle error-icon"></i>
+                                <h3>API non connectée</h3>
+                                <p>${data.message}</p>
+                            `;
+                        }
+                    })
+                    .catch(error => {
+                        apiCheck.classList.remove('loading');
+                        apiCheck.classList.add('error');
+                        apiCheck.innerHTML = `
+                            <i class="fas fa-exclamation-circle error-icon"></i>
+                            <h3>Erreur de connexion</h3>
+                            <p>Impossible de vérifier la connexion à l'API.</p>
+                        `;
+                    });
+            }
+            function handleFileSelection(file) {
+                // Vérifier si c'est bien une image
+                if (!file.type.match('image.*')) {
+                    showAlert('Veuillez sélectionner une image valide (JPEG, PNG, JPG).', 'error');
+                    return;
+                }
+                // Stocker le fichier
+                selectedFile = file;
+                // Afficher l'aperçu
+                const reader = new FileReader();
+                reader.onload = function(e) {
+                    previewImage.src = e.target.result;
+                    previewContainer.style.display = 'block';
+                    processBtn.disabled = false;
+                };
+                reader.readAsDataURL(file);
+            }
+            function resetUploadArea() {
+                selectedFile = null;
+                fileInput.value = '';
+                previewContainer.style.display = 'none';
+                previewImage.src = '';
+                processBtn.disabled = true;
+            }
+            function showAlert(message, type) {
+                // Créer l'alerte
+                const alertElement = document.createElement('div');
+                alertElement.className = `alert alert-${type}`;
+                // Ajouter l'icône en fonction du type
+                let icon = 'info-circle';
+                if (type === 'success') icon = 'check-circle';
+                if (type === 'error') icon = 'exclamation-circle';
+                if (type === 'warning') icon = 'exclamation-triangle';
+                alertElement.innerHTML = `
+                    <i class="fas fa-${icon}"></i>
+                    <span>${message}</span>
+                `;
+                // Insérer avant le conteneur d'upload
+                document.querySelector('.upload-container').insertAdjacentElement('beforebegin', alertElement);
+                // Supprimer après 5 secondes
+                setTimeout(() => {
+                    alertElement.remove();
+                }, 5000);
+            }
+            function processImage(file) {
+                // Préparer les données
+                const formData = new FormData();
+                formData.append('image', file);
+                // Afficher le loader
+                uploadArea.style.display = 'none';
+                previewContainer.style.display = 'none';
+                loader.style.display = 'block';
+                resultContainer.style.display = 'none';
+                // Envoyer la requête
+                fetch('/process_image', {
+                    method: 'POST',
+                    body: formData
+                })
+                .then(response => response.json())
+                .then(data => {
+                    // Cacher le loader
+                    loader.style.display = 'none';
+                    if (data.success) {
+                        // Afficher le résultat
+                        resultContainer.style.display = 'block';
+                        // Afficher le PDF
+                        pdfPreview.src = data.pdf_url;
+                        downloadBtn.href = data.pdf_url;
+                        // Afficher le code LaTeX
+                        latexCodeDisplay.textContent = data.latex || 'Aucun code LaTeX disponible.';
+                        // Afficher le processus de réflexion
+                        thinkingProcessDisplay.textContent = data.thinking || 'Aucun processus de réflexion disponible.';
+                        showAlert('Exercice résolu avec succès ! Vous pouvez maintenant télécharger la solution en PDF.', 'success');
+                    } else {
+                        // Afficher l'erreur
+                        uploadArea.style.display = 'block';
+                        showAlert(`Erreur : ${data.message}`, 'error');
+                        // Si latex disponible mais pas de PDF, afficher quand même les résultats
+                        if (data.latex) {
+                            resultContainer.style.display = 'block';
+                            latexCodeDisplay.textContent = data.latex;
+                            thinkingProcessDisplay.textContent = data.thinking || 'Aucun processus de réflexion disponible.';
+                            // Activer l'onglet LaTeX par défaut
+                            resultTabs.forEach(t => t.classList.remove('active'));
+                            resultContents.forEach(c => c.classList.remove('active'));
+                            document.querySelector('[data-content="latex-content"]').classList.add('active');
+                            document.getElementById('latex-content').classList.add('active');
+                        }
+                    }
+                })
+                .catch(error => {
+                    // Cacher le loader et afficher l'erreur
+                    loader.style.display = 'none';
+                    uploadArea.style.display = 'block';
+                    showAlert('Une erreur s\'est produite lors du traitement de l\'image.', 'error');
+                    console.error('Erreur:', error);
+                });
+            }
+            // Rendre le bouton de parcours fonctionnel
+            uploadArea.querySelector('.btn').addEventListener('click', function(e) {
+                e.preventDefault();
+                fileInput.click();
+            });
+        });
+    </script>
+</body>
+</html>