Spaces:

Docfile
/

Mariam-cards

Running

App Files Files Community

Docfile commited on Feb 1

Commit

43f48fd

verified ·

1 Parent(s): e18c45b

Upload index.html

Browse files

Files changed (1) hide show

templates/index.html +35 -29

templates/index.html CHANGED Viewed

@@ -1,20 +1,19 @@
- <!DOCTYPE html>
 <html lang="fr">
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Mariam M-0 | Solution Mathématique</title>
-  <!-- Tailwind CSS (version 2.2.19 utilisée ici, à mettre à jour si besoin) -->
   <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet">
-  <!-- Configuration optimisée de MathJax avec support étendu LaTeX -->
   <script>
     window.MathJax = {
       tex: {
         inlineMath: [['$', '$']],
         displayMath: [['$$', '$$']],
         processEscapes: true,
-        // Chargement automatique de commandes supplémentaires (ex. environnements de tableaux)
         packages: {'[+]': ['autoload','ams']}
       },
       options: {
@@ -31,14 +30,14 @@
   </script>
   <script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js" id="MathJax-script" async></script>
   <script src="https://cdn.jsdelivr.net/npm/marked/lib/marked.umd.min.js"></script>
   <style>
     @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;700&display=swap');
     body {
       font-family: 'Space Grotesk', sans-serif;
     }
     .uploadArea {
       background: #f3f4f6;
       border: 2px dashed #d1d5db;
@@ -47,7 +46,6 @@
     .uploadArea:hover {
       border-color: #3b82f6;
     }
     .blue-button {
       background: #3b82f6;
       transition: background-color 0.2s ease;
@@ -55,7 +53,6 @@
     .blue-button:hover {
       background: #2563eb;
     }
     .loader {
       width: 48px;
       height: 48px;
@@ -69,7 +66,6 @@
       0% { transform: rotate(0deg); }
       100% { transform: rotate(360deg); }
     }
     .thought-box {
       transition: max-height 0.3s ease-out;
       max-height: 0;
@@ -78,27 +74,22 @@
     .thought-box.open {
       max-height: 500px;
     }
     #thoughtsContent, #answerContent {
       max-height: 500px;
       overflow-y: auto;
       scroll-behavior: smooth;
       white-space: pre-wrap;
     }
     .preview-image {
       max-width: 300px;
       max-height: 300px;
       object-fit: contain;
     }
     .timestamp {
       color: #3b82f6;
       font-size: 0.9em;
       margin-left: 8px;
     }
-    /* Styles supplémentaires pour une meilleure présentation des tableaux */
     table {
       border-collapse: collapse;
       width: 100%;
@@ -113,7 +104,6 @@
       background-color: #f3f4f6;
       font-weight: 600;
     }
-    /* Pour un rendu responsive, ajouter éventuellement : */
     .table-responsive {
       overflow-x: auto;
     }
@@ -161,18 +151,23 @@
       <!-- Affichage de la solution -->
       <section id="solution" class="hidden mt-8 space-y-6">
-        <div class="border-t pt-4">
-          <button id="thoughtsToggle" type="button" class="w-full flex justify-between items-center p-2">
-            <span class="font-medium text-gray-700">Processus de Réflexion</span>
             <span id="timestamp" class="timestamp"></span>
-          </button>
-          <div id="thoughtsBox" class="thought-box">
-            <div id="thoughtsContent" class="p-4 text-gray-600"></div>
           </div>
         </div>
         <div class="border-t pt-6">
           <h3 class="text-xl font-bold text-gray-800 mb-4">Solution</h3>
-          <!-- Enveloppement d'éventuels tableaux dans une div responsive -->
           <div id="answerContent" class="text-gray-700 table-responsive"></div>
         </div>
       </section>
@@ -193,6 +188,7 @@
       const imagePreview = document.getElementById('imagePreview');
       const previewImage = document.getElementById('previewImage');
       const timestamp = document.getElementById('timestamp');
       let startTime = null;
       let timerInterval = null;
@@ -255,7 +251,7 @@
         handleFileSelect(e.dataTransfer.files[0]);
       });
-      // Fonction pour relancer le rendu MathJax dès que le contenu de la réponse est mis à jour
       const typesetAnswerIfReady = async () => {
         if (window.mathJaxReady) {
           MathJax.startup.document.elements = [document.getElementById('answerContent')];
@@ -268,11 +264,8 @@
       // Fonction pour déclencher la mise à jour de l'affichage
       const updateDisplay = async () => {
-        // Mise à jour du contenu via marked
         thoughtsContent.innerHTML = marked.parse(thoughtsBuffer);
         answerContent.innerHTML = marked.parse(answerBuffer);
-        // Lancer le rendu MathJax
         await typesetAnswerIfReady();
         updateTimeout = null;
       };
@@ -283,7 +276,7 @@
         updateTimeout = setTimeout(updateDisplay, 200);
       };
-      // Configuration de marked avec support du mode GFM (pour les tableaux) et interprétation des sauts de ligne
       marked.setOptions({
         gfm: true,
         breaks: true
@@ -346,7 +339,6 @@
                 }
               }
             }
-            // Planifier la mise à jour dé-bouncée
             scheduleUpdate();
           };
@@ -354,7 +346,6 @@
           while (true) {
             const { done, value } = await reader.read();
             if (done) {
-              // Traitement du contenu restant dans le buffer
               if (buffer) {
                 const data = JSON.parse(buffer.slice(5));
                 if (data.content) {
@@ -378,6 +369,21 @@
           stopTimer();
         }
       });
     });
   </script>
 </body>

+<!DOCTYPE html>
 <html lang="fr">
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Mariam M-0 | Solution Mathématique</title>
+  <!-- Tailwind CSS -->
   <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet">
+  <!-- Configuration de MathJax -->
   <script>
     window.MathJax = {
       tex: {
         inlineMath: [['$', '$']],
         displayMath: [['$$', '$$']],
         processEscapes: true,
         packages: {'[+]': ['autoload','ams']}
       },
       options: {
   </script>
   <script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js" id="MathJax-script" async></script>
   <script src="https://cdn.jsdelivr.net/npm/marked/lib/marked.umd.min.js"></script>
+  <!-- Bibliothèque pour l'export en PDF -->
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js"></script>
   <style>
     @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;700&display=swap');
     body {
       font-family: 'Space Grotesk', sans-serif;
     }
     .uploadArea {
       background: #f3f4f6;
       border: 2px dashed #d1d5db;
     .uploadArea:hover {
       border-color: #3b82f6;
     }
     .blue-button {
       background: #3b82f6;
       transition: background-color 0.2s ease;
     .blue-button:hover {
       background: #2563eb;
     }
     .loader {
       width: 48px;
       height: 48px;
       0% { transform: rotate(0deg); }
       100% { transform: rotate(360deg); }
     }
     .thought-box {
       transition: max-height 0.3s ease-out;
       max-height: 0;
     .thought-box.open {
       max-height: 500px;
     }
     #thoughtsContent, #answerContent {
       max-height: 500px;
       overflow-y: auto;
       scroll-behavior: smooth;
       white-space: pre-wrap;
     }
     .preview-image {
       max-width: 300px;
       max-height: 300px;
       object-fit: contain;
     }
     .timestamp {
       color: #3b82f6;
       font-size: 0.9em;
       margin-left: 8px;
     }
     table {
       border-collapse: collapse;
       width: 100%;
       background-color: #f3f4f6;
       font-weight: 600;
     }
     .table-responsive {
       overflow-x: auto;
     }
       <!-- Affichage de la solution -->
       <section id="solution" class="hidden mt-8 space-y-6">
+        <div class="border-t pt-4 flex justify-between items-center">
+          <div>
+            <button id="thoughtsToggle" type="button" class="p-2">
+              <span class="font-medium text-gray-700">Processus de Réflexion</span>
+            </button>
             <span id="timestamp" class="timestamp"></span>
           </div>
+          <!-- Bouton d'export en PDF -->
+          <button id="exportPdf" type="button" class="blue-button py-2 px-4 text-white font-medium rounded-lg">
+            Exporter en PDF
+          </button>
+        </div>
+        <div id="thoughtsBox" class="thought-box">
+          <div id="thoughtsContent" class="p-4 text-gray-600"></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 table-responsive"></div>
         </div>
       </section>
       const imagePreview = document.getElementById('imagePreview');
       const previewImage = document.getElementById('previewImage');
       const timestamp = document.getElementById('timestamp');
+      const exportPdf = document.getElementById('exportPdf');
       let startTime = null;
       let timerInterval = null;
         handleFileSelect(e.dataTransfer.files[0]);
       });
+      // Fonction pour relancer le rendu MathJax dès que le contenu est mis à jour
       const typesetAnswerIfReady = async () => {
         if (window.mathJaxReady) {
           MathJax.startup.document.elements = [document.getElementById('answerContent')];
       // Fonction pour déclencher la mise à jour de l'affichage
       const updateDisplay = async () => {
         thoughtsContent.innerHTML = marked.parse(thoughtsBuffer);
         answerContent.innerHTML = marked.parse(answerBuffer);
         await typesetAnswerIfReady();
         updateTimeout = null;
       };
         updateTimeout = setTimeout(updateDisplay, 200);
       };
+      // Configuration de marked
       marked.setOptions({
         gfm: true,
         breaks: true
                 }
               }
             }
             scheduleUpdate();
           };
           while (true) {
             const { done, value } = await reader.read();
             if (done) {
               if (buffer) {
                 const data = JSON.parse(buffer.slice(5));
                 if (data.content) {
           stopTimer();
         }
       });
+      // Export de la solution au format PDF
+      exportPdf.addEventListener('click', () => {
+        // On peut par exemple exporter l'élément "solution"
+        const element = document.getElementById('solution');
+        // Options d'export (adapter selon vos besoins)
+        const opt = {
+          margin:       0.5,
+          filename:     'solution.pdf',
+          image:        { type: 'jpeg', quality: 0.98 },
+          html2canvas:  { scale: 2 },
+          jsPDF:        { unit: 'in', format: 'letter', orientation: 'portrait' }
+        };
+        html2pdf().set(opt).from(element).save();
+      });
     });
   </script>
 </body>