Spaces:

Docfile
/

Mariam-cards

Running

App Files Files Community

Docfile commited on Jan 23

Commit

f779617

verified ·

1 Parent(s): d327e7b

Update templates/index.html

Browse files

Files changed (1) hide show

templates/index.html +69 -7

templates/index.html CHANGED Viewed

@@ -8,15 +8,20 @@
     <!-- Tailwind CSS -->
     <script src="https://cdn.tailwindcss.com"></script>
-    <!-- React and ReactDOM -->
     <script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
     <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
-    <!-- Babel pour JSX -->
     <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
-    <!-- Lucide Icons -->
-    <script src="https://unpkg.com/lucide@latest"></script>
     <!-- Police Space Grotesk -->
     <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;700&display=swap" rel="stylesheet">
@@ -25,6 +30,8 @@
         body {
             font-family: 'Space Grotesk', sans-serif;
         }
     </style>
 </head>
 <body>
@@ -32,7 +39,50 @@
     <script type="text/babel">
         const { useState, useRef, useEffect } = React;
-        const { createIcon } = lucide;
         function MathSolver() {
             const [file, setFile] = useState(null);
@@ -46,6 +96,8 @@
             const timerRef = useRef(null);
             const startTimeRef = useRef(null);
             const handleFileSelect = (selectedFile) => {
                 if (!selectedFile) return;
@@ -68,6 +120,16 @@
                 setElapsed(0);
             };
             const handleSubmit = async (e) => {
                 e.preventDefault();
                 if (!file) {
@@ -195,13 +257,13 @@
                                             {elapsed > 0 && <span className="text-blue-500 text-sm">{elapsed}s</span>}
                                         </button>
                                         <div className={`transition-all duration-300 overflow-hidden ${isThoughtsOpen ? 'max-h-96' : 'max-h-0'}`}>
-                                            <div className="p-4 text-gray-600 overflow-y-auto">{thoughts}</div>
                                         </div>
                                     </div>
                                     <div className="border-t pt-6">
                                         <h3 className="text-xl font-bold text-gray-800 mb-4">Solution</h3>
-                                        <div className="text-gray-700 overflow-y-auto max-h-96">{answer}</div>
                                     </div>
                                 </div>
                             )}

     <!-- Tailwind CSS -->
     <script src="https://cdn.tailwindcss.com"></script>
+    <!-- React et ReactDOM -->
     <script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
     <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
+    <!-- Babel -->
     <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
+    <!-- KaTeX -->
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.css">
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/contrib/auto-render.min.js"></script>
+    <!-- Marked pour le Markdown -->
+    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
     <!-- Police Space Grotesk -->
     <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;700&display=swap" rel="stylesheet">
         body {
             font-family: 'Space Grotesk', sans-serif;
         }
+        .katex { font-size: 1.1em; }
+        .math-block { margin: 1em 0; }
     </style>
 </head>
 <body>
     <script type="text/babel">
         const { useState, useRef, useEffect } = React;
+        // Fonction utilitaire pour rendre les formules LaTeX
+        const renderMath = (content, isBlock = false) => {
+            try {
+                return katex.renderToString(content, {
+                    displayMode: isBlock,
+                    throwOnError: false,
+                    strict: false
+                });
+            } catch (e) {
+                console.error('Erreur LaTeX:', e);
+                return content;
+            }
+        };
+        // Fonction pour traiter le contenu avec Markdown et LaTeX
+        const processContent = (content) => {
+            // Configuration de marked pour gérer LaTeX
+            const renderer = new marked.Renderer();
+            // Gestion des formules en ligne
+            renderer.text = (text) => {
+                return text.replace(/\$([^\$]+)\$/g, (match, latex) => {
+                    return renderMath(latex);
+                });
+            };
+            // Gestion des blocs de formules
+            renderer.paragraph = (text) => {
+                const blockMathRegex = /\$\$([\s\S]+?)\$\$/g;
+                text = text.replace(blockMathRegex, (match, latex) => {
+                    return `<div class="math-block">${renderMath(latex, true)}</div>`;
+                });
+                return `<p>${text}</p>`;
+            };
+            marked.setOptions({
+                renderer: renderer,
+                breaks: true,
+                gfm: true
+            });
+            return marked(content);
+        };
         function MathSolver() {
             const [file, setFile] = useState(null);
             const timerRef = useRef(null);
             const startTimeRef = useRef(null);
+            const thoughtsRef = useRef(null);
+            const answerRef = useRef(null);
             const handleFileSelect = (selectedFile) => {
                 if (!selectedFile) return;
                 setElapsed(0);
             };
+            // Mise à jour du contenu avec traitement LaTeX
+            useEffect(() => {
+                if (thoughtsRef.current) {
+                    thoughtsRef.current.innerHTML = processContent(thoughts);
+                }
+                if (answerRef.current) {
+                    answerRef.current.innerHTML = processContent(answer);
+                }
+            }, [thoughts, answer]);
             const handleSubmit = async (e) => {
                 e.preventDefault();
                 if (!file) {
                                             {elapsed > 0 && <span className="text-blue-500 text-sm">{elapsed}s</span>}
                                         </button>
                                         <div className={`transition-all duration-300 overflow-hidden ${isThoughtsOpen ? 'max-h-96' : 'max-h-0'}`}>
+                                            <div ref={thoughtsRef} className="p-4 text-gray-600 overflow-y-auto" />
                                         </div>
                                     </div>
                                     <div className="border-t pt-6">
                                         <h3 className="text-xl font-bold text-gray-800 mb-4">Solution</h3>
+                                        <div ref={answerRef} className="text-gray-700 overflow-y-auto max-h-96" />
                                     </div>
                                 </div>
                             )}