Spaces:
Sleeping
Sleeping
| <html lang="fr"> | |
| <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> | |
| <!-- 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> |