Hugging Face's logo

Spaces:
Docfile
/
Mariam-physiques
Sleeping

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

Update templates/index.html

Browse files
Files changed (1) hide show
  1. templates/index.html +30 -138
templates/index.html CHANGED
@@ -3,152 +3,44 @@
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/[email protected]/dist/katex.min.css">
11
- <script src="https://cdn.jsdelivr.net/npm/[email protected]/marked.min.js"></script>
12
- <style>
13
- @keyframes spin {
14
- to { transform: rotate(360deg); }
15
- }
16
- .zoom-transition {
17
- transition: transform 0.3s ease-in-out;
18
- }
19
- .modal-backdrop {
20
- background-color: rgba(0, 0, 0, 0.75);
21
- backdrop-filter: blur(5px);
22
- }
23
- </style>
24
  </head>
25
- <body class="bg-gray-50">
26
- <div class="min-h-screen p-4 md:p-8">
27
- <div class="max-w-7xl mx-auto">
28
- <h1 class="text-3xl md:text-4xl font-bold text-gray-800 mb-8">
29
- Générateur de contenu avec Gemini et RDKit
30
- </h1>
31
-
32
- <form method="POST" enctype="multipart/form-data" onsubmit="showLoader()"
33
- class="bg-white rounded-lg shadow-lg p-6 mb-8">
34
- <div class="space-y-6">
35
- <div>
36
- <label for="image" class="block text-sm font-medium text-gray-700 mb-2">
37
- Image
38
- </label>
39
- <input type="file" name="image" id="image"
40
- class="block w-full text-sm text-gray-500 file:mr-4 file:py-2 file:px-4
41
- file:rounded-md file:border-0 file:text-sm file:font-semibold
42
- file:bg-blue-50 file:text-blue-700 hover:file:bg-blue-100">
43
- </div>
44
-
45
- <div>
46
- <label for="text_input" class="block text-sm font-medium text-gray-700 mb-2">
47
- Texte (supporte Markdown et LaTeX)
48
- </label>
49
- <textarea name="text_input" id="text_input" rows="4"
50
- class="mt-1 block w-full rounded-md border-gray-300 shadow-sm
51
- focus:border-blue-500 focus:ring-blue-500"></textarea>
52
- </div>
53
-
54
- <button type="submit"
55
- class="w-full md:w-auto px-6 py-3 bg-blue-600 text-white font-medium
56
- rounded-lg hover:bg-blue-700 focus:outline-none focus:ring-2
57
- focus:ring-blue-500 focus:ring-offset-2 transition-colors">
58
- Générer
59
- </button>
60
- </div>
61
- </form>
62
-
63
- <div id="loader" class="hidden">
64
- <div class="w-10 h-10 border-4 border-blue-500 border-t-transparent rounded-full
65
- mx-auto animate-spin"></div>
66
  </div>
 
 
67
 
68
- {% if generated_content %}
69
- <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
70
- <div class="md:col-span-2">
71
- <h2 class="text-xl font-semibold text-gray-800 mb-4">Contenu généré</h2>
72
- <div class="bg-white rounded-lg shadow-lg p-6 prose max-w-none">
73
- {{ generated_content | safe }}
74
- </div>
75
- </div>
76
 
77
- <div>
78
- <h2 class="text-xl font-semibold text-gray-800 mb-4">Structures chimiques</h2>
79
- <div class="space-y-4">
80
- {% for image_path in image_paths %}
81
- <div class="relative bg-white rounded-lg shadow-lg p-4">
82
- <img src="{{ image_path }}" alt="Structure Chimique"
83
- class="w-full h-auto rounded zoom-transition cursor-pointer"
84
- onclick="openModal(this.src)">
85
- <button onclick="openModal('{{ image_path }}')"
86
- class="absolute top-2 right-2 bg-white/90 p-2 rounded-full shadow
87
- hover:bg-gray-100 transition-colors">
88
- <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
89
- <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
90
- d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
91
- </svg>
92
- </button>
93
- </div>
94
- {% endfor %}
95
- </div>
96
- </div>
97
- </div>
98
- {% endif %}
99
 
100
- <!-- Modal -->
101
- <div id="imageModal"
102
- class="fixed inset-0 hidden modal-backdrop z-50 flex items-center justify-center p-4">
103
- <div class="relative max-w-4xl w-full">
104
- <button onclick="closeModal()"
105
- class="absolute -top-12 right-0 text-white hover:text-gray-300
106
- transition-colors">
107
- <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
108
- <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
109
- d="M6 18L18 6M6 6l12 12" />
110
- </svg>
111
- </button>
112
- <img id="modalImage" src="" alt="Image zoomée"
113
- class="w-full h-auto rounded-lg">
114
- </div>
115
- </div>
116
- </div>
117
- </div>
118
-
119
- <script>
120
- function showLoader() {
121
- document.getElementById('loader').classList.remove('hidden');
122
- }
123
-
124
- function openModal(imageSrc) {
125
- const modal = document.getElementById('imageModal');
126
- const modalImage = document.getElementById('modalImage');
127
- modalImage.src = imageSrc;
128
- modal.classList.remove('hidden');
129
- document.body.style.overflow = 'hidden';
130
- }
131
 
132
- function closeModal() {
133
- document.getElementById('imageModal').classList.add('hidden');
134
- document.body.style.overflow = 'auto';
135
- }
136
 
137
- // Fermer le modal en cliquant en dehors de l'image
138
- document.getElementById('imageModal').addEventListener('click', function(e) {
139
- if (e.target === this) {
140
- closeModal();
141
  }
142
- });
143
-
144
- // Support pour Markdown et LaTeX
145
- document.addEventListener('DOMContentLoaded', function() {
146
- marked.setOptions({
147
- breaks: true,
148
- gfm: true,
149
- math: true
150
- });
151
- });
152
- </script>
153
  </body>
154
  </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 - 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>