Hugging Face's logo

Spaces:
Docfile
/
Mariam-physiques
Sleeping

App Files Community
Docfile commited on
Commit
e3c21fa
·
verified ·
1 Parent(s): 985354a

Update templates/index.html

Browse files
Files changed (1) hide show
  1. templates/index.html +108 -30
templates/index.html CHANGED
@@ -3,44 +3,122 @@
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Générateur de contenu - Markdown & LaTeX</title>
7
- <script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js" async></script>
8
- <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
9
  <script src="https://cdn.tailwindcss.com"></script>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
10
  </head>
11
- <body class="bg-gray-50 text-gray-900">
12
- <div class="container mx-auto py-6 px-4">
13
- <h1 class="text-3xl font-bold mb-6">Générateur de contenu</h1>
14
-
15
- <!-- Formulaire -->
16
- <form id="contentForm" class="bg-white shadow-md rounded-lg p-6 mb-6">
17
- <div class="mb-4">
18
- <label for="text_input" class="block text-sm font-medium text-gray-700">Texte (Markdown ou LaTeX) :</label>
19
- <textarea 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>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
20
  </div>
21
- <button type="button" onclick="generateContent()" class="bg-indigo-600 text-white px-4 py-2 rounded hover:bg-indigo-700">Générer</button>
22
- </form>
23
 
24
- <!-- Zone de rendu du contenu généré -->
25
- <div id="renderedContent" class="prose lg:prose-lg bg-white shadow-md rounded-lg p-6"></div>
 
 
 
 
 
 
26
 
27
- <!-- Script -->
28
- <script>
29
- function generateContent() {
30
- // Récupération du texte de l'utilisateur
31
- const userInput = document.getElementById('text_input').value;
 
 
 
 
 
 
 
 
 
 
 
 
 
32
 
33
- // Conversion du Markdown en HTML
34
- const htmlContent = marked(userInput);
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
35
 
36
- // Insérer le HTML dans la zone de rendu
37
- const contentDiv = document.getElementById('renderedContent');
38
- contentDiv.innerHTML = htmlContent;
 
39
 
40
- // Exécuter MathJax pour traiter les expressions LaTeX
41
- MathJax.typesetPromise();
 
42
  }
43
- </script>
44
- </div>
 
 
 
 
45
  </body>
46
  </html>
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Générateur de contenu avec Gemini et RDKit</title>
 
 
7
  <script src="https://cdn.tailwindcss.com"></script>
8
+ <script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
9
+ <script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
10
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.0/dist/katex.min.css">
11
+ <script src="https://cdn.jsdelivr.net/npm/marked@4.0.0/marked.min.js"></script>
12
+ <style>
13
+ @keyframes spin {
14
+ 0% { transform: rotate(0deg); }
15
+ 100% { transform: rotate(360deg); }
16
+ }
17
+ .custom-loader {
18
+ border: 3px solid #e5e7eb;
19
+ border-top: 3px solid #3b82f6;
20
+ animation: spin 1s linear infinite;
21
+ }
22
+ .zoom-transition {
23
+ transition: all 0.3s ease-in-out;
24
+ }
25
+ </style>
26
  </head>
27
+ <body class="bg-gray-50">
28
+ <div class="min-h-screen p-6">
29
+ <div class="max-w-7xl mx-auto">
30
+ <h1 class="text-3xl font-bold text-gray-900 mb-8">Générateur de contenu avec Gemini et RDKit</h1>
31
+
32
+ <form method="POST" enctype="multipart/form-data" onsubmit="showLoader()" class="space-y-6 bg-white p-6 rounded-lg shadow-sm">
33
+ <div>
34
+ <label for="image" class="block text-sm font-medium text-gray-700">Image</label>
35
+ <input type="file" name="image" id="image"
36
+ 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">
37
+ </div>
38
+
39
+ <div>
40
+ <label for="text_input" class="block text-sm font-medium text-gray-700">Texte</label>
41
+ <textarea name="text_input" id="text_input" rows="4"
42
+ 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>
43
+ </div>
44
+
45
+ <button type="submit"
46
+ 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">
47
+ Générer
48
+ </button>
49
+ </form>
50
+
51
+ <div id="loader" class="hidden">
52
+ <div class="custom-loader w-12 h-12 rounded-full mx-auto my-8"></div>
53
  </div>
 
 
54
 
55
+ {% if generated_content %}
56
+ <div class="mt-8 grid grid-cols-1 md:grid-cols-3 gap-6">
57
+ <div class="md:col-span-2 bg-white p-6 rounded-lg shadow-sm">
58
+ <h2 class="text-xl font-semibold text-gray-900 mb-4">Contenu généré</h2>
59
+ <div class="prose max-w-none">
60
+ {{ generated_content | safe }}
61
+ </div>
62
+ </div>
63
 
64
+ <div class="bg-white p-6 rounded-lg shadow-sm">
65
+ <h2 class="text-xl font-semibold text-gray-900 mb-4">Structures chimiques</h2>
66
+ {% for image_path in image_paths %}
67
+ <div class="relative mb-4 border border-gray-200 rounded-lg p-2">
68
+ <img src="{{ image_path }}" alt="Structure Chimique"
69
+ class="w-full rounded zoom-transition cursor-pointer hover:scale-105"
70
+ onclick="toggleZoomModal('{{ image_path }}')">
71
+ <button onclick="toggleZoomModal('{{ image_path }}')"
72
+ class="absolute top-2 right-2 bg-white/80 backdrop-blur-sm p-2 rounded-full shadow hover:bg-white">
73
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
74
+ <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"/>
75
+ <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"/>
76
+ </svg>
77
+ </button>
78
+ </div>
79
+ {% endfor %}
80
+ </div>
81
+ </div>
82
 
83
+ <div id="zoomModal" class="hidden fixed inset-0 bg-black bg-opacity-90 z-50 flex items-center justify-center">
84
+ <button onclick="closeZoomModal()" class="absolute top-4 right-4 text-white hover:text-gray-300">
85
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
86
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
87
+ </svg>
88
+ </button>
89
+ <img id="zoomedImage" src="" class="max-w-[90%] max-h-[90vh] object-contain">
90
+ </div>
91
+ {% endif %}
92
+ </div>
93
+ </div>
94
+
95
+ <script>
96
+ function showLoader() {
97
+ document.getElementById('loader').classList.remove('hidden');
98
+ }
99
+
100
+ function toggleZoomModal(imagePath) {
101
+ const modal = document.getElementById('zoomModal');
102
+ const zoomedImage = document.getElementById('zoomedImage');
103
+ modal.classList.remove('hidden');
104
+ zoomedImage.src = imagePath;
105
+ document.body.style.overflow = 'hidden';
106
+ }
107
 
108
+ function closeZoomModal() {
109
+ document.getElementById('zoomModal').classList.add('hidden');
110
+ document.body.style.overflow = 'auto';
111
+ }
112
 
113
+ document.getElementById('zoomModal').addEventListener('click', function(event) {
114
+ if (event.target === this) {
115
+ closeZoomModal();
116
  }
117
+ });
118
+
119
+ window.onload = function() {
120
+ document.getElementById('loader').classList.add('hidden');
121
+ };
122
+ </script>
123
  </body>
124
  </html>