Spaces:

Docfile
/

Mariam-physiques

Sleeping

App Files Files Community

Docfile commited on Dec 4, 2024

Commit

49935aa

verified ·

1 Parent(s): 04084ef

Update templates/index.html

Browse files

Files changed (1) hide show

templates/index.html +103 -90

templates/index.html CHANGED Viewed

@@ -3,122 +3,135 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Générateur de contenu avec Gemini et RDKit</title>
-    <script src="https://cdn.tailwindcss.com"></script>
     <script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
     <script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.css">
-    <script src="https://cdn.jsdelivr.net/npm/marked@4.0.0/marked.min.js"></script>
     <style>
-        @keyframes spin {
-            0% { transform: rotate(0deg); }
-            100% { transform: rotate(360deg); }
         }
-        .custom-loader {
-            border: 3px solid #e5e7eb;
-            border-top: 3px solid #3b82f6;
-            animation: spin 1s linear infinite;
         }
-        .zoom-transition {
-            transition: all 0.3s ease-in-out;
         }
     </style>
 </head>
-<body class="bg-gray-50">
-    <div class="min-h-screen p-6">
-        <div class="max-w-7xl mx-auto">
-            <h1 class="text-3xl font-bold text-gray-900 mb-8">Générateur de contenu avec Gemini et RDKit</h1>
-            <form method="POST" enctype="multipart/form-data" onsubmit="showLoader()" class="space-y-6 bg-white p-6 rounded-lg shadow-sm">
-                <div>
-                    <label for="image" class="block text-sm font-medium text-gray-700">Image</label>
-                    <input type="file" name="image" id="image"
-                           class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                 </div>
-                <div>
-                    <label for="text_input" class="block text-sm font-medium text-gray-700">Texte</label>
-                    <textarea name="text_input" id="text_input" rows="4"
-                            class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"></textarea>
-                </div>
-                <button type="submit"
-                        class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
-                    Générer
-                </button>
-            </form>
-            <div id="loader" class="hidden">
-                <div class="custom-loader w-12 h-12 rounded-full mx-auto my-8"></div>
             </div>
-            {% if generated_content %}
-            <div class="mt-8 grid grid-cols-1 md:grid-cols-3 gap-6">
-                <div class="md:col-span-2 bg-white p-6 rounded-lg shadow-sm">
-                    <h2 class="text-xl font-semibold text-gray-900 mb-4">Contenu généré</h2>
-                    <div class="prose max-w-none">
-                        {{ generated_content | safe }}
                     </div>
-                </div>
-                <div class="bg-white p-6 rounded-lg shadow-sm">
-                    <h2 class="text-xl font-semibold text-gray-900 mb-4">Structures chimiques</h2>
-                    {% for image_path in image_paths %}
-                    <div class="relative mb-4 border border-gray-200 rounded-lg p-2">
-                        <img src="{{ image_path }}" alt="Structure Chimique"
-                             class="w-full rounded zoom-transition cursor-pointer hover:scale-105"
-                             onclick="toggleZoomModal('{{ image_path }}')">
-                        <button onclick="toggleZoomModal('{{ image_path }}')"
-                                class="absolute top-2 right-2 bg-white/80 backdrop-blur-sm p-2 rounded-full shadow hover:bg-white">
-                            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
-                                <path d="M5 8a1 1 0 011-1h1V6a1 1 0 012 0v1h1a1 1 0 110 2H9v1a1 1 0 11-2 0V9H6a1 1 0 01-1-1z"/>
-                                <path fill-rule="evenodd" d="M2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8zm6-4a4 4 0 100 8 4 4 0 000-8z" clip-rule="evenodd"/>
-                            </svg>
-                        </button>
-                    </div>
-                    {% endfor %}
-                </div>
             </div>
-            <div id="zoomModal" class="hidden fixed inset-0 bg-black bg-opacity-90 z-50 flex items-center justify-center">
-                <button onclick="closeZoomModal()" class="absolute top-4 right-4 text-white hover:text-gray-300">
-                    <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
-                    </svg>
-                </button>
-                <img id="zoomedImage" src="" class="max-w-[90%] max-h-[90vh] object-contain">
             </div>
-            {% endif %}
         </div>
     </div>
     <script>
-        function showLoader() {
-            document.getElementById('loader').classList.remove('hidden');
-        }
-        function toggleZoomModal(imagePath) {
-            const modal = document.getElementById('zoomModal');
-            const zoomedImage = document.getElementById('zoomedImage');
-            modal.classList.remove('hidden');
-            zoomedImage.src = imagePath;
-            document.body.style.overflow = 'hidden';
-        }
-        function closeZoomModal() {
-            document.getElementById('zoomModal').classList.add('hidden');
-            document.body.style.overflow = 'auto';
-        }
-        document.getElementById('zoomModal').addEventListener('click', function(event) {
-            if (event.target === this) {
-                closeZoomModal();
             }
         });
-        window.onload = function() {
-            document.getElementById('loader').classList.add('hidden');
-        };
     </script>
 </body>
 </html>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Mariam AI - Résolution d'exercices Physique-Chimie</title>
     <script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
     <script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
     <style>
+        @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
+        body {
+            font-family: 'Poppins', sans-serif;
         }
+        .loader {
+            width: 48px;
+            height: 48px;
+            border: 5px solid #FFF;
+            border-bottom-color: #3B82F6;
+            border-radius: 50%;
+            display: inline-block;
+            box-sizing: border-box;
+            animation: rotation 1s linear infinite;
         }
+        @keyframes rotation {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
         }
     </style>
 </head>
+<body class="bg-gray-50 min-h-screen">
+    <!-- Navbar -->
+    <nav class="bg-white shadow-lg">
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+            <div class="flex justify-between items-center h-16">
+                <div class="flex items-center">
+                    <i class="fas fa-atom text-blue-600 text-2xl mr-2"></i>
+                    <span class="font-bold text-xl text-gray-800">Mariam AI</span>
                 </div>
+            </div>
+        </div>
+    </nav>
+    <!-- Main Content -->
+    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+        <div class="bg-white rounded-lg shadow-xl p-6 md:p-8">
+            <div class="text-center mb-8">
+                <h1 class="text-3xl font-bold text-gray-800 mb-2">Assistant Physique-Chimie</h1>
+                <p class="text-gray-600">Uploadez une photo de votre exercice pour obtenir une résolution détaillée</p>
             </div>
+            <!-- Upload Section -->
+            <div class="flex flex-col items-center justify-center w-full">
+                <label for="image-input" class="flex flex-col items-center justify-center w-full h-64 border-2 border-blue-300 border-dashed rounded-lg cursor-pointer bg-gray-50 hover:bg-gray-100 transition duration-300">
+                    <div class="flex flex-col items-center justify-center pt-5 pb-6">
+                        <i class="fas fa-cloud-upload-alt text-4xl text-blue-500 mb-4"></i>
+                        <p class="mb-2 text-sm text-gray-500"><span class="font-semibold">Cliquez pour upload</span> ou glissez-déposez</p>
+                        <p class="text-xs text-gray-500">PNG, JPG ou JPEG</p>
                     </div>
+                    <input id="image-input" type="file" class="hidden" accept="image/*" />
+                </label>
+            </div>
+            <!-- Preview Section -->
+            <div class="mt-8">
+                <img id="image-preview" class="max-w-full h-auto mx-auto rounded-lg shadow-md hidden" alt="Preview">
             </div>
+            <!-- Loading Animation -->
+            <div id="loading" class="hidden flex justify-center items-center my-8">
+                <span class="loader"></span>
+                <span class="ml-3 text-gray-600">Analyse en cours...</span>
+            </div>
+            <!-- Result Section -->
+            <div id="result-container" class="hidden mt-8">
+                <h2 class="text-xl font-semibold text-gray-800 mb-4">Résolution détaillée :</h2>
+                <div id="result" class="bg-gray-50 rounded-lg p-6 prose max-w-none"></div>
             </div>
         </div>
     </div>
     <script>
+        document.getElementById('image-input').addEventListener('change', async function(e) {
+            const file = e.target.files[0];
+            if (file) {
+                // Show preview
+                const preview = document.getElementById('image-preview');
+                const reader = new FileReader();
+                reader.onload = function(e) {
+                    preview.src = e.target.result;
+                    preview.classList.remove('hidden');
+                };
+                reader.readAsDataURL(file);
+                // Show loading
+                document.getElementById('loading').classList.remove('hidden');
+                document.getElementById('result-container').classList.add('hidden');
+                try {
+                    const response = await fetch('/generate', {
+                        method: 'POST',
+                        headers: {
+                            'Content-Type': 'application/json',
+                        },
+                        body: JSON.stringify({
+                            image: await new Promise(resolve => {
+                                reader.onload = () => resolve(reader.result);
+                                reader.readAsDataURL(file);
+                            })
+                        })
+                    });
+                    const data = await response.json();
+                    // Hide loading
+                    document.getElementById('loading').classList.add('hidden');
+                    // Show result
+                    document.getElementById('result-container').classList.remove('hidden');
+                    document.getElementById('result').innerHTML = data.result;
+                    MathJax.typeset();
+                } catch (error) {
+                    console.error('Erreur:', error);
+                    // Hide loading
+                    document.getElementById('loading').classList.add('hidden');
+                    alert('Une erreur est survenue lors du traitement de l\'image.');
+                }
             }
         });
     </script>
 </body>
 </html>