Spaces:

Docfile
/

Mariam-cards

Running

App Files Files Community

Docfile commited on Feb 21

Commit

fe4735c

verified ·

1 Parent(s): cc6d8fb

Create index.html

Browse files

Files changed (1) hide show

templates/index.html +588 -0

templates/index.html ADDED Viewed

	@@ -0,0 +1,588 @@

+<!DOCTYPE html>
+<html lang="fr">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta name="description" content="Solution mathématique intelligente pour résoudre vos problèmes">
+  <title>Mariam M-0 | Solution Mathématique</title>
+  <!-- Preload des ressources critiques -->
+  <link rel="preload" href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;700&display=swap" as="style">
+  <link rel="preload" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" as="style">
+  <link rel="preload" href="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.0/gsap.min.js" as="script">
+  <!-- Chargement asynchrone des styles -->
+  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;700&display=swap" rel="stylesheet">
+  <!-- Scripts différés -->
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.0/gsap.min.js" defer></script>
+  <script src="https://cdn.jsdelivr.net/npm/marked/lib/marked.umd.min.js" defer></script>
+  <!-- MathJax config et chargement optimisé -->
+  <script>
+    window.MathJax = {
+      tex: {
+        inlineMath: [['$', '$']],
+        displayMath: [['$$', '$$']],
+        processEscapes: true,
+        packages: {'[+]': ['autoload','ams']}
+      },
+      options: {
+        enableMenu: false,
+        messageStyle: 'none'
+      },
+      startup: {
+        pageReady: () => {
+          window.mathJaxReady = true;
+          window.dispatchEvent(new CustomEvent('mathJaxReady'));
+        }
+      }
+    };
+  </script>
+  <script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js" id="MathJax-script" async></script>
+  <style>
+    /* Styles critiques chargés en premier */
+    :root {
+      --primary: #3b82f6;
+      --primary-dark: #2563eb;
+      --animation-timing: 0.3s;
+    }
+    /* Optimisation des performances d'animation */
+    .optimize-animation {
+      will-change: transform, opacity;
+      transform: translateZ(0);
+      backface-visibility: hidden;
+    }
+    /* Styles de base */
+    body {
+      font-family: 'Space Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
+      background: linear-gradient(135deg, #f0f4ff 0%, #ffffff 100%);
+      min-height: 100vh;
+      overflow-x: hidden;
+    }
+    /* Media queries pour le responsive */
+    @media (max-width: 640px) {
+      .container {
+        padding: 1rem;
+      }
+      .title {
+        font-size: 1.75rem;
+      }
+      .upload-container {
+        padding: 1rem;
+      }
+    }
+    @media (min-width: 641px) and (max-width: 1024px) {
+      .container {
+        padding: 1.5rem;
+      }
+      .upload-container {
+        padding: 1.5rem;
+      }
+    }
+    /* Animations optimisées */
+    @keyframes fadeInUp {
+      from {
+        opacity: 0;
+        transform: translate3d(0, 20px, 0);
+      }
+      to {
+        opacity: 1;
+        transform: translate3d(0, 0, 0);
+      }
+    }
+    .fade-in-up {
+      animation: fadeInUp var(--animation-timing) cubic-bezier(0.4, 0, 0.2, 1) forwards;
+    }
+    /* Styles pour le loader et les composants UI */
+    .loader {
+      width: 48px;
+      height: 48px;
+      border: 3px solid var(--primary);
+      border-bottom-color: transparent;
+      border-radius: 50%;
+      display: inline-block;
+      animation: rotation 1s linear infinite;
+    }
+    @keyframes rotation {
+      to {
+        transform: rotate(360deg);
+      }
+    }
+    .upload-area {
+      border: 2px dashed #d1d5db;
+      transition: all var(--animation-timing) cubic-bezier(0.4, 0, 0.2, 1);
+      background: rgba(255, 255, 255, 0.8);
+      backdrop-filter: blur(8px);
+    }
+    .upload-area:hover {
+      border-color: var(--primary);
+      transform: scale(1.01);
+    }
+    /* Style pour le contenu mathématique */
+    .math-content {
+      overflow-x: auto;
+      -webkit-overflow-scrolling: touch;
+      max-width: 100%;
+    }
+    /* Optimisations pour le scroll */
+    .smooth-scroll {
+      scroll-behavior: smooth;
+      -webkit-overflow-scrolling: touch;
+    }
+  </style>
+</head>
+<body>
+  <div class="container max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
+    <header class="py-6 sm:py-8 md:py-10 text-center optimize-animation fade-in-up">
+      <h1 class="title text-3xl sm:text-4xl md:text-5xl font-bold text-blue-600">Mariam M-0</h1>
+      <p class="mt-2 text-gray-600">Solution Mathématique/Physique/Chimie Intelligente</p>
+    </header>
+    <main class="space-y-6 sm:space-y-8">
+      <form id="problemForm" class="space-y-4 sm:space-y-6" novalidate>
+        <div class="upload-area p-4 sm:p-6 md:p-8 text-center relative rounded-lg optimize-animation">
+          <input
+            type="file"
+            id="imageInput"
+            accept="image/*"
+            class="absolute inset-0 w-full h-full opacity-0 cursor-pointer"
+            aria-label="Choisir une image"
+          >
+          <div class="space-y-3">
+            <div class="w-12 sm:w-16 h-12 sm:h-16 mx-auto border-2 border-blue-400 rounded-full flex items-center justify-center">
+              <svg class="w-6 sm:w-8 h-6 sm:h-8 text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
+              </svg>
+            </div>
+            <p class="text-gray-700 font-medium">Déposez votre image ici</p>
+            <p class="text-gray-500 text-sm">ou cliquez pour sélectionner</p>
+          </div>
+        </div>
+        <div id="imagePreview" class="hidden text-center">
+          <img id="previewImage" class="max-w-xs sm:max-w-sm md:max-w-md mx-auto rounded-lg shadow-lg optimize-animation" alt="Prévisualisation">
+        </div>
+        <button type="submit" class="w-full py-3 px-4 bg-blue-600 text-white font-medium rounded-lg transition-all duration-300 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">
+          Résoudre le problème
+        </button>
+      </form>
+      <div id="loader" class="hidden mt-8 text-center optimize-animation">
+        <span class="loader"></span>
+        <p class="mt-4 text-gray-600">Analyse en cours...</p>
+      </div>
+      <section id="solution" class="hidden mt-8 space-y-6">
+        <div class="border-t pt-4">
+          <button id="thoughtsToggle" class="w-full flex justify-between items-center p-2 hover:bg-gray-50 rounded-lg transition-colors">
+            <span class="font-medium text-gray-700">Processus de Réflexion</span>
+            <span id="timestamp" class="text-blue-600 text-sm"></span>
+          </button>
+          <div id="thoughtsBox" class="thought-box">
+            <div id="thoughtsContent" class="p-4 text-gray-600 math-content"></div>
+          </div>
+        </div>
+        <div class="border-t pt-6">
+          <h3 class="text-xl font-bold text-gray-800 mb-4">Solution</h3>
+          <div id="answerContent" class="text-gray-700 math-content smooth-scroll"></div>
+        </div>
+      </section>
+    </main>
+  </div>
+  <script>
+    // Gestionnaire d'événements principal avec gestion améliorée des erreurs et de la performance
+    class MathSolver {
+      constructor() {
+        this.form = document.getElementById('problemForm');
+        this.imageInput = document.getElementById('imageInput');
+        this.imagePreview = document.getElementById('imagePreview');
+        this.previewImage = document.getElementById('previewImage');
+        this.loader = document.getElementById('loader');
+        this.solution = document.getElementById('solution');
+        this.thoughtsContent = document.getElementById('thoughtsContent');
+        this.answerContent = document.getElementById('answerContent');
+        this.thoughtsToggle = document.getElementById('thoughtsToggle');
+        this.thoughtsBox = document.getElementById('thoughtsBox');
+        this.timestamp = document.getElementById('timestamp');
+        this.startTime = null;
+        this.timerInterval = null;
+        this.thoughtsBuffer = '';
+        this.answerBuffer = '';
+        this.currentMode = null;
+        this.updateTimeout = null;
+        this.uploadArea = document.querySelector('.upload-area');
+        this.init();
+      }
+      init() {
+        this.setupEventListeners();
+        this.setupMarkedOptions();
+        this.setupIntersectionObserver();
+      }
+      setupEventListeners() {
+        // Utilisation des event listeners passifs pour améliorer les performances
+        this.form.addEventListener('submit', this.handleSubmit.bind(this));
+        this.imageInput.addEventListener('change', (e) => this.handleFileSelect(e.target.files[0]), { passive: true });
+        this.thoughtsToggle.addEventListener('click', this.toggleThoughts.bind(this), { passive: true });
+        // Gestion optimisée du drag & drop
+        this.setupDragAndDrop();
+        // Gestionnaire de redimensionnement optimisé
+        let resizeTimeout;
+        window.addEventListener('resize', () => {
+          clearTimeout(resizeTimeout);
+          resizeTimeout = setTimeout(() => this.handleResize(), 150);
+        }, { passive: true });
+      }
+      setupMarkedOptions() {
+        marked.setOptions({
+          gfm: true,
+          breaks: true,
+          sanitize: true,
+          smartLists: true,
+          smartypants: true
+        });
+      }
+      setupIntersectionObserver() {
+        const observer = new IntersectionObserver(
+          (entries) => {
+            entries.forEach(entry => {
+              if (entry.isIntersecting) {
+                entry.target.classList.add('fade-in-up');
+                observer.unobserve(entry.target);
+              }
+            });
+          },
+          { threshold: 0.1 }
+        );
+        document.querySelectorAll('.optimize-animation').forEach(el => observer.observe(el));
+      }
+      setupDragAndDrop() {
+        ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
+          this.uploadArea.addEventListener(eventName, (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+          }, { passive: false });
+        });
+        ['dragenter', 'dragover'].forEach(eventName => {
+          this.uploadArea.addEventListener(eventName, () => {
+            this.uploadArea.classList.add('border-blue-400');
+          }, { passive: true });
+        });
+        ['dragleave', 'drop'].forEach(eventName => {
+          this.uploadArea.addEventListener(eventName, () => {
+            this.uploadArea.classList.remove('border-blue-400');
+          }, { passive: true });
+        });
+        this.uploadArea.addEventListener('drop', (e) => {
+          const file = e.dataTransfer.files[0];
+          if (file) this.handleFileSelect(file);
+        }, { passive: false });
+      }
+      handleFileSelect(file) {
+        if (!file) return;
+        // Validation du type de fichier
+        if (!file.type.startsWith('image/')) {
+          this.showError('Veuillez sélectionner une image valide.');
+          return;
+        }
+        // Utilisation de createObjectURL pour une meilleure performance
+        const objectUrl = URL.createObjectURL(file);
+        this.previewImage.onload = () => {
+          URL.revokeObjectURL(objectUrl);
+          this.imagePreview.classList.remove('hidden');
+          requestAnimationFrame(() => {
+            this.previewImage.classList.add('fade-in-up');
+          });
+        };
+        this.previewImage.src = objectUrl;
+      }
+      async handleSubmit(e) {
+        e.preventDefault();
+        const file = this.imageInput.files[0];
+        if (!file) {
+          this.showError('Veuillez sélectionner une image.');
+          return;
+        }
+        this.startProcessing();
+        try {
+          const formData = new FormData();
+          formData.append('image', file);
+          const response = await this.sendRequest(formData);
+          await this.processResponse(response);
+        } catch (error) {
+          console.error('Erreur:', error);
+          this.showError('Une erreur est survenue lors du traitement.');
+        } finally {
+          this.stopProcessing();
+        }
+      }
+      async sendRequest(formData) {
+        const response = await fetch('/solve', {
+          method: 'POST',
+          body: formData
+        });
+        if (!response.ok) {
+          throw new Error(`HTTP error! status: ${response.status}`);
+        }
+        return response;
+      }
+      async processResponse(response) {
+        const reader = response.body.getReader();
+        const decoder = new TextDecoder();
+        let buffer = '';
+        const processChunk = async (chunk) => {
+          buffer += decoder.decode(chunk, { stream: true });
+          const lines = buffer.split('\n\n');
+          buffer = lines.pop() || '';
+          for (const line of lines) {
+            if (!line.startsWith('data:')) continue;
+            try {
+              const data = JSON.parse(line.slice(5));
+              await this.handleStreamData(data);
+            } catch (error) {
+              console.error('Erreur parsing JSON:', error);
+              continue;
+            }
+          }
+        };
+        try {
+          while (true) {
+            const { done, value } = await reader.read();
+            if (done) {
+              if (buffer) {
+                const data = JSON.parse(buffer.slice(5));
+                await this.handleStreamData(data);
+              }
+              break;
+            }
+            await processChunk(value);
+          }
+        } catch (error) {
+          throw new Error('Erreur lors du traitement du flux: ' + error.message);
+        }
+      }
+      async handleStreamData(data) {
+        if (data.mode) {
+          this.currentMode = data.mode;
+          this.loader.classList.add('hidden');
+          this.solution.classList.remove('hidden');
+          await this.animateSolutionAppearance();
+        }
+        if (data.content) {
+          if (this.currentMode === 'thinking') {
+            this.thoughtsBuffer += data.content;
+          } else if (this.currentMode === 'answering') {
+            this.answerBuffer += data.content;
+          }
+          await this.scheduleUpdate();
+        }
+      }
+      async scheduleUpdate() {
+        if (this.updateTimeout) return;
+        this.updateTimeout = setTimeout(async () => {
+          await this.updateDisplay();
+          this.updateTimeout = null;
+        }, 100);
+      }
+      async updateDisplay() {
+        // Utilisation de requestAnimationFrame pour les mises à jour visuelles
+        return new Promise(resolve => {
+          requestAnimationFrame(async () => {
+            try {
+              // Mise à jour du contenu avec sanitization
+              this.thoughtsContent.innerHTML = DOMPurify.sanitize(marked.parse(this.thoughtsBuffer));
+              this.answerContent.innerHTML = DOMPurify.sanitize(marked.parse(this.answerBuffer));
+              // Rendu MathJax optimisé
+              if (window.mathJaxReady) {
+                await this.renderMathJax();
+              }
+              // Scroll automatique optimisé
+              this.smoothScroll();
+              resolve();
+            } catch (error) {
+              console.error('Erreur mise à jour affichage:', error);
+              resolve();
+            }
+          });
+        });
+      }
+      async renderMathJax() {
+        try {
+          MathJax.startup.document.state(0);
+          await MathJax.typesetPromise([this.answerContent]);
+        } catch (error) {
+          console.error('Erreur rendu MathJax:', error);
+        }
+      }
+      smoothScroll() {
+        const scrollOptions = {
+          behavior: 'smooth',
+          block: 'end'
+        };
+        if ('scrollBehavior' in document.documentElement.style) {
+          this.answerContent.scrollIntoView(scrollOptions);
+        } else {
+          // Fallback pour les navigateurs ne supportant pas scroll-behavior
+          this.answerContent.scrollIntoView(false);
+        }
+      }
+      startProcessing() {
+        this.resetState();
+        this.startTimer();
+        this.loader.classList.remove('hidden');
+        this.solution.classList.add('hidden');
+        this.thoughtsBox.classList.add('open');
+      }
+      stopProcessing() {
+        this.stopTimer();
+        this.loader.classList.add('hidden');
+      }
+      resetState() {
+        this.thoughtsBuffer = '';
+        this.answerBuffer = '';
+        this.currentMode = null;
+        this.thoughtsContent.innerHTML = '';
+        this.answerContent.innerHTML = '';
+      }
+      startTimer() {
+        this.startTime = Date.now();
+        this.updateTimestamp();
+        this.timerInterval = setInterval(() => this.updateTimestamp(), 1000);
+      }
+      stopTimer() {
+        clearInterval(this.timerInterval);
+        this.startTime = null;
+        this.timestamp.textContent = '';
+      }
+      updateTimestamp() {
+        if (!this.startTime) return;
+        const seconds = Math.floor((Date.now() - this.startTime) / 1000);
+        this.timestamp.textContent = `${seconds}s`;
+        this.timestamp.classList.add('visible');
+      }
+      toggleThoughts() {
+        this.thoughtsBox.classList.toggle('open');
+      }
+      async animateSolutionAppearance() {
+        return new Promise(resolve => {
+          requestAnimationFrame(() => {
+            this.solution.style.opacity = '0';
+            this.solution.classList.remove('hidden');
+            requestAnimationFrame(() => {
+              this.solution.style.transition = 'opacity 0.3s ease';
+              this.solution.style.opacity = '1';
+              setTimeout(resolve, 300);
+            });
+          });
+        });
+      }
+      handleResize() {
+        // Ajustements responsifs lors du redimensionnement
+        const isMobile = window.innerWidth < 640;
+        const containerPadding = isMobile ? '1rem' : '2rem';
+        document.querySelector('.container').style.padding = containerPadding;
+      }
+      showError(message) {
+        // Système de notification d'erreur optimisé
+        const notification = document.createElement('div');
+        notification.className = 'fixed top-4 right-4 bg-red-500 text-white px-6 py-3 rounded-lg shadow-lg transform translate-y-[-100%] opacity-0 transition-all duration-300';
+        notification.textContent = message;
+        document.body.appendChild(notification);
+        requestAnimationFrame(() => {
+          notification.style.transform = 'translate(0)';
+          notification.style.opacity = '1';
+          setTimeout(() => {
+            notification.style.transform = 'translate-y-[-100%]';
+            notification.style.opacity = '0';
+            setTimeout(() => notification.remove(), 300);
+          }, 3000);
+        });
+      }
+    }
+    // Initialisation de l'application avec gestion des erreurs
+    window.addEventListener('DOMContentLoaded', () => {
+      try {
+        window.mathSolver = new MathSolver();
+      } catch (error) {
+        console.error('Erreur initialisation:', error);
+      }
+    });
+  </script>
+  <!-- Script de sanitization -->
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/dompurify/2.4.1/purify.min.js" defer></script>
+</body>
+</html>