Spaces:
Sleeping
Sleeping
| <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; | |
| border-top: 5px solid #3498db; | |
| border-radius: 50%; | |
| width: 30px; | |
| height: 30px; | |
| animation: spin 1s linear infinite; | |
| margin: 20px auto; | |
| display: none; | |
| } | |
| @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="max-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'; | |
| } | |
| // Optionnel : cacher le loader après le chargement de la page | |
| window.onload = function() { | |
| document.getElementById('loader').style.display = 'none'; | |
| }; | |
| </script> | |
| </body> | |
| </html> |