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> | |
| <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/[email protected]/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> |