Update templates/index.html

templates/index.html

@@ -8,10 +8,6 @@
     <!-- 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>
     
@@ -38,7 +34,38 @@
     <div id="root"></div>
 
     <script type="text/babel">
-        const { useState, useRef, useEffect } = React;
+        // Définition des hooks (similaire à React)
+        const useState = (initialValue) => {
+          let value = initialValue;
+          const setValue = (newValue) => {
+            value = newValue;
+            renderApp(); 
+          };
+          return [value, setValue];
+        };
+
+        const useRef = (initialValue) => {
+          return { current: initialValue };
+        };
+
+        const useEffect = (callback, dependencies) => {
+          
+          useEffect.dependencies = useEffect.dependencies || [];
+          
+          let hasChanged = false;
+          if (dependencies.length === 0) {
+            hasChanged = true;
+          } else {
+            hasChanged = dependencies.some((dep, i) => {
+              return useEffect.dependencies[i] !== dep;
+            });
+          }
+
+          if (hasChanged) {
+            useEffect.cleanup = useEffect.cleanup || callback();
+            useEffect.dependencies = dependencies;
+          }
+        };
 
         // Fonction utilitaire pour rendre les formules LaTeX
         const renderMath = (content, isBlock = false) => {
@@ -198,83 +225,99 @@
             }, []);
 
             return (
-                <div className="p-4">
-                    <div className="max-w-4xl mx-auto">
-                        <div className="p-6">
-                            <div className="text-center mb-8">
-                                <h1 className="text-4xl font-bold text-blue-600">Mariam M-0</h1>
-                                <p className="text-gray-600">Solution Mathématique Intelligente</p>
+              `<div class="p-4">
+                    <div class="max-w-4xl mx-auto">
+                        <div class="p-6">
+                            <div class="text-center mb-8">
+                                <h1 class="text-4xl font-bold text-blue-600">Mariam M-0</h1>
+                                <p class="text-gray-600">Solution Mathématique Intelligente</p>
                             </div>
 
-                            <form onSubmit={handleSubmit} className="space-y-6">
-                                <div className="relative p-8 text-center bg-gray-50 border-2 border-dashed border-gray-300 hover:border-blue-500 transition-colors rounded-lg">
+                            <form onsubmit="handleSubmit(event)" class="space-y-6">
+                                <div class="relative p-8 text-center bg-gray-50 border-2 border-dashed border-gray-300 hover:border-blue-500 transition-colors rounded-lg">
                                     <input
                                         type="file"
-                                        onChange={(e) => handleFileSelect(e.target.files[0])}
+                                        onchange="handleFileSelect(event.target.files[0])"
                                         accept="image/*"
-                                        className="absolute inset-0 w-full h-full opacity-0 cursor-pointer"
+                                        class="absolute inset-0 w-full h-full opacity-0 cursor-pointer"
                                     />
-                                    <div className="space-y-3">
-                                        <div className="w-16 h-16 mx-auto border-2 border-blue-400 rounded-full flex items-center justify-center">
-                                            <svg className="w-8 h-8 text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="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" />
+                                    <div class="space-y-3">
+                                        <div class="w-16 h-16 mx-auto border-2 border-blue-400 rounded-full flex items-center justify-center">
+                                            <svg class="w-8 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 className="text-gray-700 font-medium">Déposez votre image ici</p>
-                                        <p className="text-gray-500 text-sm">ou cliquez pour sélectionner</p>
+                                        <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>
 
-                                {previewUrl && (
-                                    <div className="text-center">
-                                        <img src={previewUrl} alt="Prévisualisation" className="max-w-sm mx-auto h-auto object-contain" />
-                                    </div>
+                                ${previewUrl && (
+                                    `<div class="text-center">
+                                        <img src="${previewUrl}" alt="Prévisualisation" class="max-w-sm mx-auto h-auto object-contain" />
+                                    </div>`
                                 )}
 
                                 <button
                                     type="submit"
-                                    className="w-full py-3 bg-blue-500 hover:bg-blue-600 text-white font-medium rounded-lg transition-colors"
+                                    class="w-full py-3 bg-blue-500 hover:bg-blue-600 text-white font-medium rounded-lg transition-colors"
                                 >
                                     Résoudre le problème
                                 </button>
                             </form>
 
-                            {loading && (
-                                <div className="mt-8 text-center">
-                                    <div className="w-12 h-12 border-3 border-blue-500 border-t-transparent rounded-full animate-spin mx-auto" />
-                                    <p className="mt-4 text-gray-600">Analyse en cours...</p>
-                                </div>
+                            ${loading && (
+                                `<div class="mt-8 text-center">
+                                    <div class="w-12 h-12 border-3 border-blue-500 border-t-transparent rounded-full animate-spin mx-auto" />
+                                    <p class="mt-4 text-gray-600">Analyse en cours...</p>
+                                </div>`
                             )}
 
-                            {showSolution && (
-                                <div className="mt-8 space-y-6">
-                                    <div className="border-t pt-4">
+                            ${showSolution && (
+                                `<div class="mt-8 space-y-6">
+                                    <div class="border-t pt-4">
                                         <button
-                                            onClick={() => setIsThoughtsOpen(!isThoughtsOpen)}
-                                            className="w-full flex justify-between items-center p-2"
+                                            onclick="setIsThoughtsOpen(!isThoughtsOpen)"
+                                            class="w-full flex justify-between items-center p-2"
                                         >
-                                            <span className="font-medium text-gray-700">Processus de Réflexion</span>
-                                            {elapsed > 0 && <span className="text-blue-500 text-sm">{elapsed}s</span>}
+                                            <span class="font-medium text-gray-700">Processus de Réflexion</span>
+                                            ${elapsed > 0 && `<span class="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 class="transition-all duration-300 overflow-hidden ${isThoughtsOpen ? 'max-h-96' : 'max-h-0'}">
+                                            <div id="thoughtsRef" class="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 class="border-t pt-6">
+                                        <h3 class="text-xl font-bold text-gray-800 mb-4">Solution</h3>
+                                        <div id="answerRef" class="text-gray-700 overflow-y-auto max-h-96" />
                                     </div>
-                                </div>
+                                </div>`
                             )}
                         </div>
                     </div>
-                </div>
+                </div>`
             );
         }
 
-        const root = ReactDOM.createRoot(document.getElementById('root'));
-        root.render(<MathSolver />);
+        // Fonction pour rendre l'application
+        const renderApp = () => {
+          const app = MathSolver();
+          document.getElementById('root').innerHTML = app;
+
+          // Récupération des éléments après le rendu
+          thoughtsRef.current = document.getElementById('thoughtsRef');
+          answerRef.current = document.getElementById('answerRef');
+
+          // Exécution des effets après chaque rendu
+          if(useEffect.cleanup) {
+            useEffect.cleanup();
+            useEffect.cleanup = null;
+          }
+        };
+
+        // Premier rendu de l'application
+        renderApp();
     </script>
 </body>
 </html>