Hugging Face's logo

Spaces:
Docfile
/
Testpdf
Running

App Files Community
Docfile commited on
Commit
35fdca9
·
verified ·
1 Parent(s): f59ae01

Update templates/index.html

Browse files
Files changed (1) hide show
  1. templates/index.html +78 -25
templates/index.html CHANGED
@@ -95,6 +95,13 @@
95
  .copy-button:hover {
96
  background-color: #0b7dda;
97
  }
 
 
 
 
 
 
 
98
  .loading {
99
  text-align: center;
100
  font-style: italic;
@@ -105,6 +112,11 @@
105
  margin-bottom: 10px;
106
  font-weight: bold;
107
  }
 
 
 
 
 
108
  </style>
109
  </head>
110
  <body>
@@ -123,6 +135,9 @@
123
 
124
  <div id="solving-container">
125
  <div class="status" id="status">En attente de résolution...</div>
 
 
 
126
  <div class="loading" id="loading-text">Traitement en cours...</div>
127
  <div class="response-container" id="response-container">
128
  <div id="response"></div>
@@ -204,45 +219,59 @@
204
  const formData = new FormData();
205
  formData.append('image', selectedFile);
206
 
207
- // Création d'une connexion SSE pour recevoir la réponse en streaming
208
- const eventSource = new EventSource('/solve?' + new URLSearchParams({
209
- t: new Date().getTime()
210
- }));
211
-
212
  fetch('/solve', {
213
  method: 'POST',
214
  body: formData
215
- }).then(response => {
216
- if (!response.ok) {
217
- throw new Error('Erreur lors de la résolution');
 
 
218
  }
219
 
220
- // Gestion du SSE
221
- const eventSource = new EventSource('/solve');
 
 
 
222
  let fullResponse = '';
223
 
224
  eventSource.onmessage = function(event) {
225
  const data = JSON.parse(event.data);
226
 
227
- if (data.mode === 'thinking') {
228
- statusElement.textContent = 'Gemini réfléchit...';
229
- response.className = 'thinking';
230
- } else if (data.mode === 'answering') {
231
- statusElement.textContent = 'Réponse:';
232
- response.className = '';
233
  responseContainer.style.display = 'block';
234
  loadingText.style.display = 'none';
 
 
 
235
  }
236
 
237
- if (data.content) {
238
- fullResponse += data.content;
 
 
 
 
 
 
 
 
 
239
  response.innerHTML = fullResponse;
240
  renderMathInElement(response);
241
- }
242
-
243
- if (data.error) {
 
244
  statusElement.textContent = 'Erreur:';
245
- response.innerHTML = data.error;
 
 
 
246
  eventSource.close();
247
  solveButton.disabled = false;
248
  }
@@ -250,11 +279,35 @@
250
 
251
  eventSource.onerror = function() {
252
  eventSource.close();
253
- solveButton.disabled = false;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
254
  };
255
- }).catch(error => {
 
256
  statusElement.textContent = 'Erreur:';
257
- response.innerHTML = 'Une erreur est survenue lors de la communication avec le serveur.';
258
  responseContainer.style.display = 'block';
259
  loadingText.style.display = 'none';
260
  solveButton.disabled = false;
 
95
  .copy-button:hover {
96
  background-color: #0b7dda;
97
  }
98
+ .telegram-notice {
99
+ background-color: #e3f2fd;
100
+ border-left: 4px solid #2196F3;
101
+ padding: 10px;
102
+ margin: 15px 0;
103
+ font-size: 14px;
104
+ }
105
  .loading {
106
  text-align: center;
107
  font-style: italic;
 
112
  margin-bottom: 10px;
113
  font-weight: bold;
114
  }
115
+ .status small {
116
+ font-weight: normal;
117
+ color: #666;
118
+ font-size: 0.85em;
119
+ }
120
  </style>
121
  </head>
122
  <body>
 
135
 
136
  <div id="solving-container">
137
  <div class="status" id="status">En attente de résolution...</div>
138
+ <div class="telegram-notice">
139
+ La réponse complète sera également envoyée sous forme de fichier texte sur Telegram.
140
+ </div>
141
  <div class="loading" id="loading-text">Traitement en cours...</div>
142
  <div class="response-container" id="response-container">
143
  <div id="response"></div>
 
219
  const formData = new FormData();
220
  formData.append('image', selectedFile);
221
 
222
+ // Soumettre l'image pour traitement en arrière-plan
 
 
 
 
223
  fetch('/solve', {
224
  method: 'POST',
225
  body: formData
226
+ })
227
+ .then(response => response.json())
228
+ .then(data => {
229
+ if (data.error) {
230
+ throw new Error(data.error);
231
  }
232
 
233
+ const taskId = data.task_id;
234
+ statusElement.textContent = 'Traitement en arrière-plan (ID: ' + taskId + ')';
235
+
236
+ // Création d'une connexion SSE pour suivre le progrès
237
+ const eventSource = new EventSource('/stream/' + taskId);
238
  let fullResponse = '';
239
 
240
  eventSource.onmessage = function(event) {
241
  const data = JSON.parse(event.data);
242
 
243
+ if (data.error) {
244
+ statusElement.textContent = 'Erreur:';
245
+ response.innerHTML = data.error;
 
 
 
246
  responseContainer.style.display = 'block';
247
  loadingText.style.display = 'none';
248
+ eventSource.close();
249
+ solveButton.disabled = false;
250
+ return;
251
  }
252
 
253
+ if (data.status === 'pending') {
254
+ statusElement.textContent = 'En attente de traitement...';
255
+ } else if (data.status === 'processing') {
256
+ statusElement.textContent = 'Gemini traite votre image...';
257
+ statusElement.innerHTML += '<br><small>La réponse sera également envoyée sur Telegram</small>';
258
+ } else if (data.status === 'completed') {
259
+ statusElement.textContent = 'Traitement terminé!';
260
+ responseContainer.style.display = 'block';
261
+ loadingText.style.display = 'none';
262
+
263
+ fullResponse = data.response;
264
  response.innerHTML = fullResponse;
265
  renderMathInElement(response);
266
+
267
+ eventSource.close();
268
+ solveButton.disabled = false;
269
+ } else if (data.status === 'error') {
270
  statusElement.textContent = 'Erreur:';
271
+ response.innerHTML = data.error || 'Une erreur inattendue est survenue';
272
+ responseContainer.style.display = 'block';
273
+ loadingText.style.display = 'none';
274
+
275
  eventSource.close();
276
  solveButton.disabled = false;
277
  }
 
279
 
280
  eventSource.onerror = function() {
281
  eventSource.close();
282
+ // Essayer de récupérer le statut via une requête GET normale
283
+ fetch('/task/' + taskId)
284
+ .then(response => response.json())
285
+ .then(taskData => {
286
+ if (taskData.status === 'completed') {
287
+ statusElement.textContent = 'Traitement terminé!';
288
+ responseContainer.style.display = 'block';
289
+ loadingText.style.display = 'none';
290
+
291
+ response.innerHTML = taskData.response;
292
+ renderMathInElement(response);
293
+ } else if (taskData.status === 'error') {
294
+ throw new Error(taskData.error || 'Une erreur inattendue est survenue');
295
+ }
296
+ })
297
+ .catch(error => {
298
+ statusElement.textContent = 'Erreur de connexion:';
299
+ response.innerHTML = 'La connexion a été perdue, mais le traitement continue en arrière-plan. La réponse sera envoyée sur Telegram.';
300
+ responseContainer.style.display = 'block';
301
+ loadingText.style.display = 'none';
302
+ })
303
+ .finally(() => {
304
+ solveButton.disabled = false;
305
+ });
306
  };
307
+ })
308
+ .catch(error => {
309
  statusElement.textContent = 'Erreur:';
310
+ response.innerHTML = error.message || 'Une erreur est survenue lors de la communication avec le serveur.';
311
  responseContainer.style.display = 'block';
312
  loadingText.style.display = 'none';
313
  solveButton.disabled = false;