Hugging Face's logo

Spaces:
Docfile
/
HistoireGeo
Running

App Files Community
Docfile commited on
Commit
50f7df4
·
verified ·
1 Parent(s): 3040512

Update templates/histoire.html

Browse files
Files changed (1) hide show
  1. templates/histoire.html +150 -85
templates/histoire.html CHANGED
@@ -15,7 +15,7 @@
15
  <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/js/all.min.js"></script>
16
  <script src="https://cdn.jsdelivr.net/npm/aos@2.3.4/dist/aos.js"></script>
17
 
18
- <style>
19
  body {
20
  font-family: 'Poppins', sans-serif;
21
  }
@@ -47,6 +47,59 @@
47
  margin: 10px;
48
  border: 1px solid #ccc;
49
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
50
  </style>
51
  </head>
52
  <body class="bg-slate-100 min-h-screen">
@@ -261,102 +314,114 @@
261
 
262
  <!-- Scripts -->
263
  <script>
264
- // Attendre que tous les scripts soient chargés
265
- window.addEventListener('load', function() {
266
- // Initialize AOS
267
- AOS.init({
268
- duration: 800,
269
- once: true,
270
- offset: 100
271
- });
272
 
273
- function showLoading(outputId) {
274
- const output = document.getElementById(outputId);
275
- output.classList.remove('hidden');
276
- output.innerHTML = `
277
- <div class="flex items-center justify-center space-x-3">
278
- <div class="loading-spinner h-8 w-8 border-4 border-blue-500 border-t-transparent rounded-full"></div>
279
- <span class="text-gray-600">Génération en cours...</span>
280
- </div>
281
- `;
282
- }
283
 
284
- function handleImagePreviews(inputId, previewContainerId) {
285
- const input = document.getElementById(inputId);
286
- const previewContainer = document.getElementById(previewContainerId);
 
 
 
 
 
 
 
287
 
288
- input.addEventListener('change', function() {
289
- previewContainer.innerHTML = ''; // Clear previous previews
 
290
 
291
- const files = this.files;
292
- for (let i = 0; i < files.length; i++) {
293
- const file = files[i];
294
- if (file.type.startsWith('image/')) {
295
- const reader = new FileReader();
296
- reader.onload = function(e) {
297
- const img = document.createElement('img');
298
- img.src = e.target.result;
299
- img.classList.add('image-preview');
300
- previewContainer.appendChild(img);
301
- }
302
- reader.readAsDataURL(file);
303
- }
304
- }
305
- });
306
- }
307
-
308
- async function submitForm(formId, outputId, endpoint) {
309
- const form = document.getElementById(formId);
310
- const output = document.getElementById(outputId);
311
 
312
- form.addEventListener('submit', async (e) => {
313
- e.preventDefault();
314
- showLoading(outputId);
 
 
 
315
 
316
- try {
317
- const formData = new FormData(form);
318
- const response = await fetch(endpoint, {
319
- method: 'POST',
320
- body: formData
321
- });
322
 
323
- if (!response.ok) {
324
- throw new Error(`HTTP error! status: ${response.status}`);
325
- }
 
 
 
 
326
 
327
- const result = await response.json();
328
- output.classList.remove('hidden');
329
- output.innerHTML = `
330
- <div class="prose max-w-none">
331
- ${marked.parse(result.output)}
332
- </div>
333
- `;
334
- } catch (error) {
335
- output.classList.remove('hidden');
336
- output.innerHTML = `
337
- <div class="bg-red-50 border-l-4 border-red-500 p-4">
338
- <div class="flex items-center">
339
- <div class="flex-shrink-0">
340
- <i class="fas fa-exclamation-circle text-red-500"></i>
341
- </div>
342
- <div class="ml-3">
343
- <p class="text-red-700">Une erreur est survenue: ${error.message}</p>
344
- </div>
345
  </div>
346
  </div>
347
- `;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
348
  }
349
  });
350
- }
351
-
352
- submitForm('histoire-form', 'histoire-output', '/api/histoire');
353
- submitForm('histoire-type2-form', 'histoire-type2-output', '/api/histoire-type2');
354
- submitForm('geographie-form', 'geographie-output', '/api/geographie');
355
- submitForm('geographie-type2-form', 'geographie-type2-output', '/api/geographie-type2');
356
 
357
- handleImagePreviews('images-histoire-type2', 'image-preview-histoire-type2');
358
- handleImagePreviews('images-geographie-type2', 'image-preview-geographie-type2');
359
- });
360
- </script>
361
  </body>
362
  </html>
 
15
  <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/js/all.min.js"></script>
16
  <script src="https://cdn.jsdelivr.net/npm/aos@2.3.4/dist/aos.js"></script>
17
 
18
+ <style>
19
  body {
20
  font-family: 'Poppins', sans-serif;
21
  }
 
47
  margin: 10px;
48
  border: 1px solid #ccc;
49
  }
50
+ /* Styles améliorés pour le Markdown sur mobile */
51
+ .markdown-output {
52
+ width: 100%;
53
+ overflow-wrap: break-word;
54
+ word-wrap: break-word;
55
+ hyphens: auto;
56
+ }
57
+ .markdown-output p {
58
+ margin: 1em 0;
59
+ line-height: 1.6;
60
+ font-size: 16px;
61
+ }
62
+ .markdown-output h1,
63
+ .markdown-output h2,
64
+ .markdown-output h3,
65
+ .markdown-output h4 {
66
+ margin: 1.5em 0 0.5em;
67
+ line-height: 1.3;
68
+ }
69
+ .markdown-output ul,
70
+ .markdown-output ol {
71
+ padding-left: 1.5em;
72
+ margin: 1em 0;
73
+ }
74
+ .markdown-output li {
75
+ margin: 0.5em 0;
76
+ line-height: 1.4;
77
+ }
78
+ @media (max-width: 768px) {
79
+ .markdown-output {
80
+ font-size: 15px;
81
+ }
82
+ .markdown-output p {
83
+ margin: 0.8em 0;
84
+ }
85
+ .markdown-output ul,
86
+ .markdown-output ol {
87
+ padding-left: 1.2em;
88
+ }
89
+ .markdown-output h1 { font-size: 1.8em; }
90
+ .markdown-output h2 { font-size: 1.5em; }
91
+ .markdown-output h3 { font-size: 1.3em; }
92
+ .markdown-output h4 { font-size: 1.1em; }
93
+ .markdown-output pre {
94
+ padding: 1em;
95
+ overflow-x: auto;
96
+ white-space: pre-wrap;
97
+ word-wrap: break-word;
98
+ }
99
+ .markdown-output code {
100
+ word-break: break-word;
101
+ }
102
+ }
103
  </style>
104
  </head>
105
  <body class="bg-slate-100 min-h-screen">
 
314
 
315
  <!-- Scripts -->
316
  <script>
317
+ window.addEventListener('load', function() {
318
+ AOS.init({
319
+ duration: 800,
320
+ once: true,
321
+ offset: 100
322
+ });
 
 
323
 
324
+ // Configuration personnalisée de marked pour un meilleur rendu mobile
325
+ marked.setOptions({
326
+ breaks: true,
327
+ gfm: true,
328
+ headerIds: false,
329
+ renderer: new marked.Renderer()
330
+ });
 
 
 
331
 
332
+ function showLoading(outputId) {
333
+ const output = document.getElementById(outputId);
334
+ output.classList.remove('hidden');
335
+ output.innerHTML = `
336
+ <div class="flex items-center justify-center space-x-3">
337
+ <div class="loading-spinner h-8 w-8 border-4 border-blue-500 border-t-transparent rounded-full"></div>
338
+ <span class="text-gray-600">Génération en cours...</span>
339
+ </div>
340
+ `;
341
+ }
342
 
343
+ async function submitForm(formId, outputId, endpoint) {
344
+ const form = document.getElementById(formId);
345
+ const output = document.getElementById(outputId);
346
 
347
+ form.addEventListener('submit', async (e) => {
348
+ e.preventDefault();
349
+ showLoading(outputId);
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
350
 
351
+ try {
352
+ const formData = new FormData(form);
353
+ const response = await fetch(endpoint, {
354
+ method: 'POST',
355
+ body: formData
356
+ });
357
 
358
+ if (!response.ok) {
359
+ throw new Error(`HTTP error! status: ${response.status}`);
360
+ }
 
 
 
361
 
362
+ const result = await response.json();
363
+ output.classList.remove('hidden');
364
+ output.innerHTML = `
365
+ <div class="markdown-output prose max-w-none">
366
+ ${marked.parse(result.output)}
367
+ </div>
368
+ `;
369
 
370
+ // Ajuster les tableaux pour le mobile
371
+ const tables = output.getElementsByTagName('table');
372
+ Array.from(tables).forEach(table => {
373
+ table.parentNode.style.overflow = 'auto';
374
+ table.style.minWidth = '100%';
375
+ });
376
+ } catch (error) {
377
+ output.classList.remove('hidden');
378
+ output.innerHTML = `
379
+ <div class="bg-red-50 border-l-4 border-red-500 p-4">
380
+ <div class="flex items-center">
381
+ <div class="flex-shrink-0">
382
+ <i class="fas fa-exclamation-circle text-red-500"></i>
383
+ </div>
384
+ <div class="ml-3">
385
+ <p class="text-red-700">Une erreur est survenue: ${error.message}</p>
 
 
386
  </div>
387
  </div>
388
+ </div>
389
+ `;
390
+ }
391
+ });
392
+ }
393
+
394
+ // Initialisation des formulaires et des prévisualisations d'images
395
+ submitForm('histoire-form', 'histoire-output', '/api/histoire');
396
+ submitForm('histoire-type2-form', 'histoire-type2-output', '/api/histoire-type2');
397
+ submitForm('geographie-form', 'geographie-output', '/api/geographie');
398
+ submitForm('geographie-type2-form', 'geographie-type2-output', '/api/geographie-type2');
399
+
400
+ // Configuration de la prévisualisation des images
401
+ function handleImagePreviews(inputId, previewContainerId) {
402
+ const input = document.getElementById(inputId);
403
+ const previewContainer = document.getElementById(previewContainerId);
404
+
405
+ input.addEventListener('change', function() {
406
+ previewContainer.innerHTML = '';
407
+ Array.from(this.files).forEach(file => {
408
+ if (file.type.startsWith('image/')) {
409
+ const reader = new FileReader();
410
+ reader.onload = (e) => {
411
+ const img = document.createElement('img');
412
+ img.src = e.target.result;
413
+ img.classList.add('image-preview');
414
+ previewContainer.appendChild(img);
415
+ };
416
+ reader.readAsDataURL(file);
417
  }
418
  });
419
+ });
420
+ }
 
 
 
 
421
 
422
+ handleImagePreviews('images-histoire-type2', 'image-preview-histoire-type2');
423
+ handleImagePreviews('images-geographie-type2', 'image-preview-geographie-type2');
424
+ });
425
+ </script>
426
  </body>
427
  </html>