Hugging Face's logo

Spaces:
Docfile
/
Mariam-physiques
Sleeping

App Files Community
Docfile commited on
Commit
2acbb77
·
verified ·
1 Parent(s): 24ccb55

Update templates/index.html

Browse files
Files changed (1) hide show
  1. templates/index.html +75 -47
templates/index.html CHANGED
@@ -1,5 +1,6 @@
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">
@@ -10,7 +11,58 @@
10
  <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
11
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
12
  <style>
13
- /* ... (votre CSS ici) ... */
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
14
  </style>
15
  <script>
16
  // Configuration de marked
@@ -123,66 +175,42 @@
123
  document.getElementById('loading').classList.remove('hidden');
124
  document.getElementById('result-container').classList.add('hidden');
125
  document.getElementById('result').classList.add('math-hidden');
126
- document.getElementById('result').innerHTML = '';
127
-
128
- const formData = new FormData();
129
- formData.append('image', file);
130
-
131
- // Envoyer l'image avec fetch
132
- const response = await fetch('/generate', {
133
- method: 'POST',
134
- body: formData
135
- });
136
 
137
- const data = await response.json();
 
 
138
 
139
- if (data.error) {
140
- console.error('Erreur:', data.error);
141
- document.getElementById('loading').classList.add('hidden');
142
- document.getElementById('result').innerHTML = data.error;
143
- return;
144
- }
145
-
146
- // Se connecter à la route de streaming avec EventSource
147
- const eventSource = new EventSource(`/stream/${data.request_id}`);
148
 
149
- let completeResponse = '';
150
 
151
- eventSource.onmessage = function (event) {
152
  // Hide loading
153
  document.getElementById('loading').classList.add('hidden');
154
 
155
  // Show result
156
  document.getElementById('result-container').classList.remove('hidden');
157
-
158
- if (event.data.startsWith('Error:')) {
159
- console.error('Erreur:', event.data);
160
- document.getElementById('result').innerHTML = event.data;
161
- eventSource.close();
162
- return;
163
- }
164
-
165
- completeResponse += event.data;
166
- document.getElementById('result').innerHTML = marked.parse(completeResponse);
167
 
168
  // Rendre les maths avec MathJax
169
  MathJax.typesetPromise([document.getElementById('result')])
170
- .then(() => {
171
- document.getElementById('result').classList.remove('math-hidden');
172
- })
173
- .catch((err) => {
174
- console.error('Erreur MathJax:', err);
175
- document.getElementById('result').innerHTML = "Erreur lors du rendu des mathématiques.";
176
- document.getElementById('result').classList.remove('math-hidden');
177
- });
178
- };
179
 
180
- eventSource.onerror = function (err) {
181
- console.error('EventSource failed:', err);
182
  document.getElementById('loading').classList.add('hidden');
183
- document.getElementById('result').innerHTML = "Une erreur est survenue lors du traitement de l'image.";
184
- eventSource.close();
185
- };
186
  }
187
  });
188
  </script>
 
1
  <!DOCTYPE html>
2
  <html lang="fr">
3
+
4
  <head>
5
  <meta charset="UTF-8">
6
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
11
  <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
12
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
13
  <style>
14
+ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
15
+
16
+ body {
17
+ font-family: 'Poppins', sans-serif;
18
+ }
19
+
20
+ .loader {
21
+ width: 48px;
22
+ height: 48px;
23
+ border: 5px solid #FFF;
24
+ border-bottom-color: #3B82F6;
25
+ border-radius: 50%;
26
+ display: inline-block;
27
+ box-sizing: border-box;
28
+ animation: rotation 1s linear infinite;
29
+ }
30
+
31
+ @keyframes rotation {
32
+ 0% {
33
+ transform: rotate(0deg);
34
+ }
35
+
36
+ 100% {
37
+ transform: rotate(360deg);
38
+ }
39
+ }
40
+
41
+ .math-content {
42
+ font-size: 1.1em;
43
+ line-height: 1.6;
44
+ overflow-x: auto;
45
+ }
46
+
47
+ .math-content p {
48
+ margin-bottom: 1rem;
49
+ }
50
+
51
+ .math-content .MathJax {
52
+ overflow-x: auto;
53
+ overflow-y: hidden;
54
+ padding: 0.5rem 0;
55
+ }
56
+
57
+ @media (max-width: 640px) {
58
+ .math-content .MathJax {
59
+ font-size: 0.9em;
60
+ }
61
+ }
62
+
63
+ .math-hidden {
64
+ visibility: hidden;
65
+ }
66
  </style>
67
  <script>
68
  // Configuration de marked
 
175
  document.getElementById('loading').classList.remove('hidden');
176
  document.getElementById('result-container').classList.add('hidden');
177
  document.getElementById('result').classList.add('math-hidden');
 
 
 
 
 
 
 
 
 
 
178
 
179
+ try {
180
+ const formData = new FormData();
181
+ formData.append('image', file);
182
 
183
+ const response = await fetch('/generate', {
184
+ method: 'POST',
185
+ body: formData
186
+ });
 
 
 
 
 
187
 
188
+ const data = await response.json();
189
 
 
190
  // Hide loading
191
  document.getElementById('loading').classList.add('hidden');
192
 
193
  // Show result
194
  document.getElementById('result-container').classList.remove('hidden');
195
+ // Utiliser marked pour convertir le markdown en HTML
196
+ document.getElementById('result').innerHTML = marked.parse(data.result);
 
 
 
 
 
 
 
 
197
 
198
  // Rendre les maths avec MathJax
199
  MathJax.typesetPromise([document.getElementById('result')])
200
+ .then(() => {
201
+ document.getElementById('result').classList.remove('math-hidden');
202
+ })
203
+ .catch((err) => {
204
+ console.error('Erreur MathJax:', err);
205
+ document.getElementById('result').innerHTML = "Erreur lors du rendu des mathématiques.";
206
+ document.getElementById('result').classList.remove('math-hidden');
207
+ });
 
208
 
209
+ } catch (error) {
210
+ console.error('Erreur:', error);
211
  document.getElementById('loading').classList.add('hidden');
212
+ alert('Une erreur est survenue lors du traitement de l\'image.');
213
+ }
 
214
  }
215
  });
216
  </script>