Hugging Face's logo

Spaces:
Docfile
/
Mariam-physiques
Sleeping

App Files Community
Docfile commited on
Commit
5181917
·
verified ·
1 Parent(s): d3df14c

Update templates/index.html

Browse files
Files changed (1) hide show
  1. templates/index.html +99 -69
templates/index.html CHANGED
@@ -1,17 +1,32 @@
1
  <!DOCTYPE html>
2
- <html>
3
  <head>
 
 
4
  <title>Générateur de contenu avec Gemini et RDKit</title>
5
- <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
6
- <script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
7
- <script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
 
 
 
8
  <style>
 
 
 
 
 
 
 
 
 
 
9
  .loader {
10
  border: 5px solid #f3f3f3;
11
  border-top: 5px solid #3498db;
12
  border-radius: 50%;
13
- width: 30px;
14
- height: 30px;
15
  animation: spin 1s linear infinite;
16
  margin: 20px auto;
17
  display: none;
@@ -25,107 +40,122 @@
25
  .resizable-image {
26
  max-width: 100%;
27
  height: auto;
28
- transition: transform 0.2s; /* Ajoute une transition pour une expérience plus douce */
 
29
  }
30
 
31
  .resizable-image:hover {
32
- transform: scale(1.5); /* Zoom x1.5 au survol */
33
- cursor: zoom-in;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
34
  }
35
- .structure-chimique-container {
36
- position: relative; /* Pour positionner le bouton de zoom */
37
- margin-bottom: 20px;
38
- border: 1px solid #ccc;
39
- padding: 10px;
40
- text-align: center;
41
- }
42
-
43
- .zoom-button {
44
  position: absolute;
45
  top: 10px;
46
- right: 10px;
47
- background-color: #f0f0f0;
48
- border: none;
49
- padding: 5px 10px;
50
  cursor: pointer;
51
- z-index: 10; /* Assurez-vous que le bouton est au-dessus de l'image */
 
 
 
 
52
  }
53
  </style>
54
  </head>
55
  <body>
56
  <div class="container">
57
- <h1>Générateur de contenu avec Gemini et RDKit</h1>
58
  <form method="POST" enctype="multipart/form-data" onsubmit="showLoader()">
59
- <div class="form-group">
60
- <label for="image">Image:</label>
61
- <input type="file" name="image" id="image" class="form-control-file">
62
  </div>
63
- <div class="form-group">
64
- <label for="text_input">Texte:</label>
65
- <textarea name="text_input" id="text_input" class="form-control"></textarea>
66
  </div>
67
- <button type="submit" class="btn btn-primary">Générer</button>
68
  </form>
69
 
70
- <div class="loader" id="loader"></div>
71
 
72
  {% if generated_content %}
73
- <div class="row">
74
- <div class="col-md-8">
75
- <h2>Contenu généré:</h2>
76
- <div class="content-wrapper">
77
- {{ generated_content | safe }}
78
- </div>
79
- </div>
80
- <div class="col-md-4">
81
- <h2>Structures chimiques:</h2>
82
- {% for image_path in image_paths %}
83
- <div class="structure-chimique-container">
84
- <img src="{{ image_path }}" alt="Structure Chimique" class="resizable-image" onclick="toggleZoom(this)">
85
- <button class="zoom-button" onclick="toggleZoomModal('{{ image_path }}')">Zoom</button>
86
- </div>
87
- {% endfor %}
88
  </div>
89
  </div>
90
- <!-- Modal pour l'image zoomée -->
91
- <div id="zoomModal" class="modal" style="display: none; position: fixed; z-index: 1; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0,0,0,0.9);">
92
- <span class="close-modal" style="position: absolute; top: 15px; right: 35px; color: #f1f1f1; font-size: 40px; font-weight: bold; cursor: pointer;" onclick="closeZoomModal()">×</span>
93
- <img id="zoomedImage" src="" style="margin: auto; display: block; max-width: 90%; max-height: 90%;">
94
- <div style="text-align:center; color:white;">Cliquer en dehors de l'image ou sur la croix pour fermer.</div>
 
 
95
  </div>
 
96
  {% endif %}
97
  </div>
98
 
99
- <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
100
- <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
101
- <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
102
- <script>
 
 
 
 
103
  function showLoader() {
104
  document.getElementById('loader').style.display = 'block';
105
  }
106
 
107
- window.onload = function() {
108
  document.getElementById('loader').style.display = 'none';
109
  };
110
 
111
- function toggleZoomModal(imagePath) {
112
- var modal = document.getElementById('zoomModal');
113
- var zoomedImage = document.getElementById('zoomedImage');
114
  zoomedImage.src = imagePath;
115
- modal.style.display = 'block';
116
  }
117
- function closeZoomModal() {
 
118
  document.getElementById('zoomModal').style.display = 'none';
119
  }
120
 
121
- // Fermer le modal si on clique en dehors de l'image
122
- window.onclick = function(event) {
123
- var modal = document.getElementById('zoomModal');
124
- if (event.target == modal) {
125
- modal.style.display = "none";
126
- }
 
 
 
127
  }
128
-
129
  </script>
130
  </body>
131
  </html>
 
1
  <!DOCTYPE html>
2
+ <html lang="fr">
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
+ <!-- Bootstrap CSS -->
8
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
9
+ <!-- MathJax for LaTeX -->
10
+ <script async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
11
+ <!-- Markdown Parser -->
12
+ <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
13
  <style>
14
+ body {
15
+ font-family: 'Arial', sans-serif;
16
+ background-color: #f9f9f9;
17
+ padding: 20px;
18
+ }
19
+
20
+ h1, h2 {
21
+ color: #2c3e50;
22
+ }
23
+
24
  .loader {
25
  border: 5px solid #f3f3f3;
26
  border-top: 5px solid #3498db;
27
  border-radius: 50%;
28
+ width: 40px;
29
+ height: 40px;
30
  animation: spin 1s linear infinite;
31
  margin: 20px auto;
32
  display: none;
 
40
  .resizable-image {
41
  max-width: 100%;
42
  height: auto;
43
+ cursor: pointer;
44
+ transition: transform 0.3s ease-in-out;
45
  }
46
 
47
  .resizable-image:hover {
48
+ transform: scale(1.1);
49
+ }
50
+
51
+ .modal {
52
+ display: none;
53
+ position: fixed;
54
+ z-index: 1050;
55
+ left: 0;
56
+ top: 0;
57
+ width: 100%;
58
+ height: 100%;
59
+ background-color: rgba(0, 0, 0, 0.8);
60
+ align-items: center;
61
+ justify-content: center;
62
+ }
63
+
64
+ .modal img {
65
+ max-width: 90%;
66
+ max-height: 90%;
67
  }
68
+
69
+ .modal .close-modal {
 
 
 
 
 
 
 
70
  position: absolute;
71
  top: 10px;
72
+ right: 20px;
73
+ color: #fff;
74
+ font-size: 24px;
75
+ font-weight: bold;
76
  cursor: pointer;
77
+ }
78
+
79
+ .content-wrapper {
80
+ white-space: pre-wrap;
81
+ word-wrap: break-word;
82
  }
83
  </style>
84
  </head>
85
  <body>
86
  <div class="container">
87
+ <h1 class="text-center my-4">Générateur de contenu avec Gemini et RDKit</h1>
88
  <form method="POST" enctype="multipart/form-data" onsubmit="showLoader()">
89
+ <div class="mb-3">
90
+ <label for="image" class="form-label">Image :</label>
91
+ <input type="file" name="image" id="image" class="form-control">
92
  </div>
93
+ <div class="mb-3">
94
+ <label for="text_input" class="form-label">Texte (Markdown ou LaTeX) :</label>
95
+ <textarea name="text_input" id="text_input" class="form-control" rows="6" placeholder="Saisissez votre texte ici..."></textarea>
96
  </div>
97
+ <button type="submit" class="btn btn-primary w-100">Générer</button>
98
  </form>
99
 
100
+ <div id="loader" class="loader"></div>
101
 
102
  {% if generated_content %}
103
+ <div class="row mt-4">
104
+ <div class="col-lg-8">
105
+ <h2>Contenu généré :</h2>
106
+ <div class="content-wrapper" id="generatedContent">
107
+ {{ generated_content | safe }}
 
 
 
 
 
 
 
 
 
 
108
  </div>
109
  </div>
110
+ <div class="col-lg-4">
111
+ <h2>Structures chimiques :</h2>
112
+ {% for image_path in image_paths %}
113
+ <div class="text-center my-3">
114
+ <img src="{{ image_path }}" alt="Structure Chimique" class="resizable-image" onclick="toggleZoomModal('{{ image_path }}')">
115
+ </div>
116
+ {% endfor %}
117
  </div>
118
+ </div>
119
  {% endif %}
120
  </div>
121
 
122
+ <!-- Modal -->
123
+ <div id="zoomModal" class="modal d-flex">
124
+ <span class="close-modal" onclick="closeZoomModal()">×</span>
125
+ <img id="zoomedImage" src="">
126
+ </div>
127
+
128
+ <!-- Scripts -->
129
+ <script>
130
  function showLoader() {
131
  document.getElementById('loader').style.display = 'block';
132
  }
133
 
134
+ window.onload = function () {
135
  document.getElementById('loader').style.display = 'none';
136
  };
137
 
138
+ function toggleZoomModal(imagePath) {
139
+ const modal = document.getElementById('zoomModal');
140
+ const zoomedImage = document.getElementById('zoomedImage');
141
  zoomedImage.src = imagePath;
142
+ modal.style.display = 'flex';
143
  }
144
+
145
+ function closeZoomModal() {
146
  document.getElementById('zoomModal').style.display = 'none';
147
  }
148
 
149
+ // Markdown rendering
150
+ const textarea = document.getElementById('text_input');
151
+ const contentWrapper = document.getElementById('generatedContent');
152
+ if (textarea && contentWrapper) {
153
+ textarea.addEventListener('input', () => {
154
+ const markdownText = textarea.value;
155
+ contentWrapper.innerHTML = marked(markdownText);
156
+ MathJax.typeset(); // Re-render LaTeX
157
+ });
158
  }
 
159
  </script>
160
  </body>
161
  </html>