Spaces:

Docfile
/

Mariam-physiques

Sleeping

App Files Files Community

Docfile commited on Dec 4, 2024

Commit

6ab076c

verified ·

1 Parent(s): 6eb5857

Update templates/index.html

Browse files

Files changed (1) hide show

templates/index.html +43 -211

templates/index.html CHANGED Viewed

@@ -1,237 +1,69 @@
 <!DOCTYPE html>
-<html lang="fr">
 <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Mariam AI - Résolution d'exercices</title>
-    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap" rel="stylesheet">
-    <script>
-        MathJax = {
-            tex: {
-                inlineMath: [['$', '$'], ['\\(', '\\)']],
-                displayMath: [['$$', '$$'], ['\\[', '\\]']],
-                processEscapes: true,
-                packages: {'[+]': ['ams', 'noerrors']}
-            },
-            loader: {load: ['[tex]/ams', '[tex]/noerrors']}
-        };
-    </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>
     <style>
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-            font-family: 'Poppins', sans-serif;
-        }
-        body {
-            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
-            min-height: 100vh;
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            padding: 2rem;
-        }
-        .container {
-            max-width: 800px;
-            width: 100%;
-            background: rgba(255, 255, 255, 0.95);
-            padding: 2rem;
-            border-radius: 20px;
-            box-shadow: 0 8px 32px rgba(31, 38, 135, 0.15);
-            backdrop-filter: blur(4px);
-        }
-        .header {
-            text-align: center;
-            margin-bottom: 2rem;
-        }
-        .header h1 {
-            color: #1a1a1a;
-            font-size: 2.5rem;
-            margin-bottom: 0.5rem;
-            background: linear-gradient(45deg, #2193b0, #6dd5ed);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-        }
-        .header p {
-            color: #666;
-            font-size: 1.1rem;
-        }
-        .upload-section {
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            gap: 1.5rem;
-            margin-bottom: 2rem;
-        }
-        .file-upload {
-            position: relative;
-            display: inline-block;
-        }
-        .file-upload input[type="file"] {
-            display: none;
-        }
-        .upload-btn {
-            padding: 1rem 2rem;
-            background: linear-gradient(45deg, #2193b0, #6dd5ed);
-            color: white;
-            border-radius: 50px;
-            cursor: pointer;
-            transition: all 0.3s ease;
-            font-weight: 500;
-            display: inline-flex;
-            align-items: center;
-            gap: 0.5rem;
-        }
-        .upload-btn:hover {
-            transform: translateY(-2px);
-            box-shadow: 0 5px 15px rgba(33, 147, 176, 0.3);
-        }
-        .submit-btn {
-            padding: 1rem 3rem;
-            background: linear-gradient(45deg, #2193b0, #6dd5ed);
-            color: white;
-            border: none;
-            border-radius: 50px;
-            cursor: pointer;
-            font-weight: 500;
-            transition: all 0.3s ease;
-        }
-        .submit-btn:hover {
-            transform: translateY(-2px);
-            box-shadow: 0 5px 15px rgba(33, 147, 176, 0.3);
-        }
-        .result {
-            margin-top: 2rem;
-            padding: 1.5rem;
-            background: #f8f9fa;
-            border-radius: 10px;
-            min-height: 100px;
-        }
-        .loading {
-            display: none;
-            position: fixed;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            background: rgba(255, 255, 255, 0.9);
-            justify-content: center;
-            align-items: center;
-            z-index: 1000;
-        }
-        .loading-content {
-            text-align: center;
-        }
-        .spinner {
-            width: 50px;
-            height: 50px;
-            border: 5px solid #f3f3f3;
-            border-top: 5px solid #2193b0;
             border-radius: 50%;
             animation: spin 1s linear infinite;
-            margin: 0 auto 1rem;
         }
         @keyframes spin {
             0% { transform: rotate(0deg); }
             100% { transform: rotate(360deg); }
         }
-        .selected-file {
-            display: none;
-            margin-top: 1rem;
-            padding: 0.5rem 1rem;
-            background: #e9ecef;
-            border-radius: 5px;
-            font-size: 0.9rem;
-            color: #495057;
-        }
-        @media (max-width: 768px) {
-            .container {
-                padding: 1.5rem;
-            }
-            .header h1 {
-                font-size: 2rem;
-            }
-            .upload-btn, .submit-btn {
-                padding: 0.8rem 1.5rem;
-            }
-        }
     </style>
 </head>
 <body>
     <div class="container">
-        <div class="header">
-            <h1>Mariam AI</h1>
-            <p>Assistant de résolution d'exercices</p>
-        </div>
-        <form method="post" enctype="multipart/form-data" id="uploadForm">
-            <div class="upload-section">
-                <div class="file-upload">
-                    <label for="image" class="upload-btn">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                            <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
-                            <polyline points="17 8 12 3 7 8"></polyline>
-                            <line x1="12" y1="3" x2="12" y2="15"></line>
-                        </svg>
-                        Sélectionner une image
-                    </label>
-                    <input type="file" name="image" id="image" accept="image/*" required>
-                </div>
-                <div class="selected-file" id="selectedFile"></div>
-                <button type="submit" class="submit-btn">Analyser</button>
             </div>
         </form>
-        <div class="result">
-            {{ e | safe }}
-        </div>
-    </div>
-    <div class="loading" id="loading">
-        <div class="loading-content">
-            <div class="spinner"></div>
-            <p>Analyse en cours...</p>
-        </div>
     </div>
     <script>
-        document.getElementById('image').addEventListener('change', function(e) {
-            const fileName = e.target.files[0]?.name;
-            const selectedFile = document.getElementById('selectedFile');
-            if (fileName) {
-                selectedFile.textContent = `Fichier sélectionné : ${fileName}`;
-                selectedFile.style.display = 'block';
-            } else {
-                selectedFile.style.display = 'none';
-            }
-        });
-        document.getElementById('uploadForm').addEventListener('submit', function() {
-            document.getElementById('loading').style.display = 'flex';
-        });
     </script>
 </body>
 </html>

 <!DOCTYPE html>
+<html>
 <head>
+    <title>Générateur de contenu avec Gemini et RDKit</title>
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
     <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>
     <style>
+        .loader {
+            border: 5px solid #f3f3f3; /* Light grey */
+            border-top: 5px solid #3498db; /* Blue */
             border-radius: 50%;
+            width: 30px;
+            height: 30px;
             animation: spin 1s linear infinite;
+            margin: 20px auto;
+            display: none; /* Initialement caché */
         }
         @keyframes spin {
             0% { transform: rotate(0deg); }
             100% { transform: rotate(360deg); }
         }
     </style>
 </head>
 <body>
     <div class="container">
+        <h1>Générateur de contenu avec Gemini et RDKit</h1>
+        <form method="POST" enctype="multipart/form-data" onsubmit="showLoader()">
+            <div class="form-group">
+                <label for="image">Image:</label>
+                <input type="file" name="image" id="image" class="form-control-file">
+            </div>
+            <div class="form-group">
+                <label for="text_input">Texte:</label>
+                <textarea  name="text_input" id="text_input"  class="form-control"  ></textarea>
             </div>
+            <button type="submit" class="btn btn-primary">Générer</button>
         </form>
+        <div class="loader" id="loader"></div>
+        {% if generated_content %}
+            <div class="row">
+                <div class="col-md-8">
+                    <h2>Contenu généré:</h2>
+                    <div>
+                        {{ generated_content | safe }}
+                    </div>
+                </div>
+                 <div class="col-md-4">
+                    <h2>Structures chimiques:</h2>
+                    {% for image_path in image_paths %}
+                        <img src="{{ image_path }}" alt="Structure Chimique" style="width:100%; height:auto;"><br>
+                    {% endfor %}
+                </div>
+            </div>
+        {% endif %}
     </div>
+    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
+    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
     <script>
+        function showLoader() {
+            document.getElementById('loader').style.display = 'block';
+        }
     </script>
 </body>
 </html>