Hugging Face's logo

Spaces:
Docfile
/
Mariam-cards
Build error

App Files Community
1
Docfile commited on
Commit
f9726ec
·
verified ·
1 Parent(s): 6b10944

Update templates/index.html

Browse files
Files changed (1) hide show
  1. templates/index.html +35 -31
templates/index.html CHANGED
@@ -1,4 +1,4 @@
1
- <!DOCTYPE html>
2
  <html lang="fr">
3
  <head>
4
  <meta charset="UTF-8">
@@ -91,6 +91,11 @@
91
  border-radius: 8px;
92
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
93
  }
 
 
 
 
 
94
  </style>
95
  </head>
96
  <body class="p-4 md:p-8">
@@ -140,8 +145,8 @@
140
  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
141
  </svg>
142
  </button>
143
- <div id="thoughtsBox" class="thought-box mt-4">
144
- <div id="thoughtsContent" class="prose prose-invert max-w-none text-blue-100"></div>
145
  </div>
146
  </div>
147
 
@@ -171,6 +176,7 @@
171
  thoughtsToggle.querySelector('svg').classList.toggle('rotate-180');
172
  });
173
 
 
174
  imageInput.addEventListener('change', function(e) {
175
  const file = this.files[0];
176
  if (file) {
@@ -186,7 +192,7 @@
186
  }
187
  });
188
 
189
- // Drag and drop effects
190
  const dropZone = document.querySelector('.uploadArea');
191
 
192
  ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
@@ -217,8 +223,8 @@
217
  dropZone.addEventListener('drop', handleDrop, false);
218
 
219
  function handleDrop(e) {
220
- let dt = e.dataTransfer;
221
- let files = dt.files;
222
 
223
  if (files.length) {
224
  imageInput.files = files;
@@ -232,6 +238,7 @@
232
  }
233
  }
234
 
 
235
  form.addEventListener('submit', async (event) => {
236
  event.preventDefault();
237
  const file = imageInput.files[0];
@@ -240,24 +247,23 @@
240
  return;
241
  }
242
 
 
243
  loader.classList.remove('hidden');
244
  solutionDiv.classList.add('hidden');
245
  thoughtsContent.innerHTML = '';
246
  answerContent.innerHTML = '';
 
247
 
248
  const formData = new FormData();
249
  formData.append('image', file);
250
 
251
  try {
 
252
  const response = await fetch('/solve', {
253
  method: 'POST',
254
- body: formData,
255
  });
256
 
257
- if (!response.ok) {
258
- throw new Error('Erreur lors de la requête.');
259
- }
260
-
261
  const reader = response.body.getReader();
262
  const decoder = new TextDecoder();
263
  let buffer = '';
@@ -274,32 +280,30 @@
274
  buffer = buffer.slice(eolIndex + 2);
275
 
276
  if (line.startsWith('data:')) {
277
- const jsonData = line.substring(5);
278
- try {
279
- const data = JSON.parse(jsonData);
280
- if (data.thought) {
281
- thoughtsContent.innerHTML += data.thought;
282
- } else if (data.answer) {
283
- answerContent.innerHTML += data.answer;
284
- }
285
-
286
- if (window.MathJax) {
287
- MathJax.Hub.Queue(["Typeset", MathJax.Hub, answerContent]);
 
 
 
 
 
 
 
288
  }
289
- } catch (error) {
290
- console.error('Erreur lors du parsing JSON:', error);
291
  }
292
  }
293
  }
294
  }
295
 
296
- if (window.MathJax) {
297
- MathJax.Hub.Queue(["Typeset", MathJax.Hub]);
298
- }
299
-
300
- loader.classList.add('hidden');
301
- solutionDiv.classList.remove('hidden');
302
-
303
  } catch (error) {
304
  console.error('Erreur:', error);
305
  alert('Une erreur est survenue lors du traitement de la requête.');
 
1
+ <!DOCTYPE html>
2
  <html lang="fr">
3
  <head>
4
  <meta charset="UTF-8">
 
91
  border-radius: 8px;
92
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
93
  }
94
+
95
+ #thoughtsContent, #answerContent {
96
+ max-height: 500px;
97
+ overflow-y: auto;
98
+ }
99
  </style>
100
  </head>
101
  <body class="p-4 md:p-8">
 
145
  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
146
  </svg>
147
  </button>
148
+ <div id="thoughtsBox" class="thought-box">
149
+ <div id="thoughtsContent" class="prose prose-invert max-w-none text-blue-100 mt-4"></div>
150
  </div>
151
  </div>
152
 
 
176
  thoughtsToggle.querySelector('svg').classList.toggle('rotate-180');
177
  });
178
 
179
+ // Image preview handling
180
  imageInput.addEventListener('change', function(e) {
181
  const file = this.files[0];
182
  if (file) {
 
192
  }
193
  });
194
 
195
+ // Drag and drop handling
196
  const dropZone = document.querySelector('.uploadArea');
197
 
198
  ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
 
223
  dropZone.addEventListener('drop', handleDrop, false);
224
 
225
  function handleDrop(e) {
226
+ const dt = e.dataTransfer;
227
+ const files = dt.files;
228
 
229
  if (files.length) {
230
  imageInput.files = files;
 
238
  }
239
  }
240
 
241
+ // Form submission and streaming
242
  form.addEventListener('submit', async (event) => {
243
  event.preventDefault();
244
  const file = imageInput.files[0];
 
247
  return;
248
  }
249
 
250
+ // Reset UI
251
  loader.classList.remove('hidden');
252
  solutionDiv.classList.add('hidden');
253
  thoughtsContent.innerHTML = '';
254
  answerContent.innerHTML = '';
255
+ thoughtsBox.classList.add('open');
256
 
257
  const formData = new FormData();
258
  formData.append('image', file);
259
 
260
  try {
261
+ let currentMode = null;
262
  const response = await fetch('/solve', {
263
  method: 'POST',
264
+ body: formData
265
  });
266
 
 
 
 
 
267
  const reader = response.body.getReader();
268
  const decoder = new TextDecoder();
269
  let buffer = '';
 
280
  buffer = buffer.slice(eolIndex + 2);
281
 
282
  if (line.startsWith('data:')) {
283
+ const data = JSON.parse(line.slice(5));
284
+
285
+ if (data.mode) {
286
+ currentMode = data.mode;
287
+ loader.classList.add('hidden');
288
+ solutionDiv.classList.remove('hidden');
289
+ }
290
+
291
+ if (data.content) {
292
+ const content = data.content;
293
+ if (currentMode === 'thinking') {
294
+ thoughtsContent.innerHTML += `<p>${content}</p>`;
295
+ thoughtsContent.scrollTop = thoughtsContent.scrollHeight;
296
+ } else if (currentMode === 'answering') {
297
+ answerContent.innerHTML += content;
298
+ if (window.MathJax) {
299
+ MathJax.Hub.Queue(["Typeset", MathJax.Hub, answerContent]);
300
+ }
301
  }
 
 
302
  }
303
  }
304
  }
305
  }
306
 
 
 
 
 
 
 
 
307
  } catch (error) {
308
  console.error('Erreur:', error);
309
  alert('Une erreur est survenue lors du traitement de la requête.');