Spaces:

Docfile
/

Mariam-physiques

Sleeping

App Files Files Community

Docfile commited on Dec 4, 2024

Commit

e8e81cb

verified ·

1 Parent(s): 5181917

Update templates/index.html

Browse files

Files changed (1) hide show

templates/index.html +57 -123

templates/index.html CHANGED Viewed

@@ -4,158 +4,92 @@
     <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>
-    <!-- Bootstrap CSS -->
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
-    <!-- MathJax for LaTeX -->
-    <script async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
-    <!-- Markdown Parser -->
     <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
-    <style>
-        body {
-            font-family: 'Arial', sans-serif;
-            background-color: #f9f9f9;
-            padding: 20px;
-        }
-        h1, h2 {
-            color: #2c3e50;
-        }
-        .loader {
-            border: 5px solid #f3f3f3;
-            border-top: 5px solid #3498db;
-            border-radius: 50%;
-            width: 40px;
-            height: 40px;
-            animation: spin 1s linear infinite;
-            margin: 20px auto;
-            display: none;
-        }
-        @keyframes spin {
-            0% { transform: rotate(0deg); }
-            100% { transform: rotate(360deg); }
-        }
-        .resizable-image {
-            max-width: 100%;
-            height: auto;
-            cursor: pointer;
-            transition: transform 0.3s ease-in-out;
-        }
-        .resizable-image:hover {
-            transform: scale(1.1);
-        }
-        .modal {
-            display: none;
-            position: fixed;
-            z-index: 1050;
-            left: 0;
-            top: 0;
-            width: 100%;
-            height: 100%;
-            background-color: rgba(0, 0, 0, 0.8);
-            align-items: center;
-            justify-content: center;
-        }
-        .modal img {
-            max-width: 90%;
-            max-height: 90%;
-        }
-        .modal .close-modal {
-            position: absolute;
-            top: 10px;
-            right: 20px;
-            color: #fff;
-            font-size: 24px;
-            font-weight: bold;
-            cursor: pointer;
-        }
-        .content-wrapper {
-            white-space: pre-wrap;
-            word-wrap: break-word;
-        }
-    </style>
 </head>
-<body>
-    <div class="container">
-        <h1 class="text-center my-4">Générateur de contenu avec Gemini et RDKit</h1>
         <form method="POST" enctype="multipart/form-data" onsubmit="showLoader()">
-            <div class="mb-3">
-                <label for="image" class="form-label">Image :</label>
-                <input type="file" name="image" id="image" class="form-control">
             </div>
-            <div class="mb-3">
-                <label for="text_input" class="form-label">Texte (Markdown ou LaTeX) :</label>
-                <textarea name="text_input" id="text_input" class="form-control" rows="6" placeholder="Saisissez votre texte ici..."></textarea>
             </div>
-            <button type="submit" class="btn btn-primary w-100">Générer</button>
         </form>
-        <div id="loader" class="loader"></div>
         {% if generated_content %}
-        <div class="row mt-4">
-            <div class="col-lg-8">
-                <h2>Contenu généré :</h2>
-                <div class="content-wrapper" id="generatedContent">
-                    {{ generated_content | safe }}
-                </div>
             </div>
-            <div class="col-lg-4">
-                <h2>Structures chimiques :</h2>
-                {% for image_path in image_paths %}
-                <div class="text-center my-3">
-                    <img src="{{ image_path }}" alt="Structure Chimique" class="resizable-image" onclick="toggleZoomModal('{{ image_path }}')">
                 </div>
-                {% endfor %}
             </div>
         </div>
-        {% endif %}
-    </div>
-    <!-- Modal -->
-    <div id="zoomModal" class="modal d-flex">
-        <span class="close-modal" onclick="closeZoomModal()">×</span>
-        <img id="zoomedImage" src="">
     </div>
-    <!-- Scripts -->
     <script>
         function showLoader() {
-            document.getElementById('loader').style.display = 'block';
         }
-        window.onload = function () {
-            document.getElementById('loader').style.display = 'none';
-        };
         function toggleZoomModal(imagePath) {
             const modal = document.getElementById('zoomModal');
             const zoomedImage = document.getElementById('zoomedImage');
             zoomedImage.src = imagePath;
-            modal.style.display = 'flex';
         }
         function closeZoomModal() {
-            document.getElementById('zoomModal').style.display = 'none';
         }
-        // Markdown rendering
-        const textarea = document.getElementById('text_input');
-        const contentWrapper = document.getElementById('generatedContent');
-        if (textarea && contentWrapper) {
-            textarea.addEventListener('input', () => {
-                const markdownText = textarea.value;
-                contentWrapper.innerHTML = marked(markdownText);
-                MathJax.typeset(); // Re-render LaTeX
-            });
-        }
     </script>
 </body>
 </html>

     <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.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js" async></script>
     <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
+    <script src="https://cdn.tailwindcss.com"></script>
 </head>
+<body class="bg-gray-100 text-gray-900">
+    <div class="container mx-auto p-6">
+        <h1 class="text-3xl font-bold mb-4">Générateur de contenu avec Gemini et RDKit</h1>
         <form method="POST" enctype="multipart/form-data" onsubmit="showLoader()">
+            <div class="mb-4">
+                <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 border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
             </div>
+            <div class="mb-4">
+                <label for="text_input" class="block text-sm font-medium text-gray-700">Texte (Markdown ou LaTeX) :</label>
+                <textarea name="text_input" id="text_input" rows="5" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm" placeholder="Écrivez ici en Markdown ou LaTeX..."></textarea>
             </div>
+            <button type="submit" class="bg-indigo-600 text-white px-4 py-2 rounded hover:bg-indigo-700">Générer</button>
         </form>
+        <div class="loader mt-6 hidden" id="loader">
+            <svg class="animate-spin h-8 w-8 text-indigo-600 mx-auto" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+                <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v8H4z"></path>
+            </svg>
+        </div>
         {% if generated_content %}
+        <div class="mt-8 grid md:grid-cols-3 gap-6">
+            <!-- Contenu généré -->
+            <div class="md:col-span-2 bg-white shadow-md rounded-md p-6">
+                <h2 class="text-2xl font-semibold mb-4">Contenu généré :</h2>
+                <div id="renderedContent" class="prose max-w-none"></div>
+                <script>
+                    document.getElementById('renderedContent').innerHTML = marked(`{{ generated_content | safe }}`);
+                    MathJax.typesetPromise();
+                </script>
             </div>
+            <!-- Structures chimiques -->
+            <div class="bg-white shadow-md rounded-md p-6">
+                <h2 class="text-2xl font-semibold mb-4">Structures chimiques :</h2>
+                <div class="space-y-4">
+                    {% for image_path in image_paths %}
+                    <div class="relative group">
+                        <img src="{{ image_path }}" alt="Structure Chimique" class="w-full h-auto rounded-md border border-gray-200 transform transition duration-200 group-hover:scale-105">
+                        <button onclick="toggleZoomModal('{{ image_path }}')" class="absolute top-2 right-2 bg-gray-900 text-white text-xs px-2 py-1 rounded">Zoom</button>
+                    </div>
+                    {% endfor %}
                 </div>
             </div>
         </div>
+        <!-- Modal pour zoom -->
+        <div id="zoomModal" class="fixed inset-0 bg-black bg-opacity-75 hidden z-50 flex items-center justify-center">
+            <div class="relative">
+                <img id="zoomedImage" src="" class="max-w-full max-h-screen rounded shadow-lg">
+                <button onclick="closeZoomModal()" class="absolute top-2 right-2 bg-gray-900 text-white text-lg px-3 py-1 rounded">&times;</button>
+            </div>
+        </div>
+        {% endif %}
     </div>
     <script>
         function showLoader() {
+            document.getElementById('loader').classList.remove('hidden');
         }
         function toggleZoomModal(imagePath) {
             const modal = document.getElementById('zoomModal');
             const zoomedImage = document.getElementById('zoomedImage');
             zoomedImage.src = imagePath;
+            modal.classList.remove('hidden');
         }
         function closeZoomModal() {
+            const modal = document.getElementById('zoomModal');
+            modal.classList.add('hidden');
         }
+        // Fermer le modal en cliquant à l'extérieur de l'image
+        window.addEventListener('click', function(event) {
+            const modal = document.getElementById('zoomModal');
+            if (event.target === modal) {
+                modal.classList.add('hidden');
+            }
+        });
     </script>
 </body>
 </html>