Hugging Face's logo

Spaces:
Docfile
/
Mariam-cc
Running

App Files Community
Docfile commited on
Commit
2a5b9dc
·
verified ·
1 Parent(s): 88c8edc

Upload index.html

Browse files
Files changed (1) hide show
  1. templates/index.html +49 -41
templates/index.html CHANGED
@@ -3,7 +3,7 @@
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Mariam AI - Analyse Littéraire (Images Multiples)</title>
7
  <script src="https://cdn.tailwindcss.com"></script>
8
  <script src="https://cdnjs.cloudflare.com/ajax/libs/marked/9.1.6/marked.min.js"></script>
9
  <style>
@@ -92,10 +92,10 @@
92
 
93
  <div class="bg-white rounded-xl shadow-lg p-8">
94
  <!-- Zone de téléchargement -->
95
- <form id="uploadForm" class="space-y-6" enctype="multipart/form-data">
96
  <div class="relative">
97
  <label for="imageInput" class="block text-lg font-medium text-gray-700 mb-3">
98
- Sélectionnez vos documents
99
  </label>
100
  <div class="mt-2 flex justify-center px-6 pt-5 pb-6 border-2 border-gray-300 border-dashed rounded-lg hover:border-blue-500 transition-colors cursor-pointer">
101
  <div class="space-y-2 text-center">
@@ -104,8 +104,8 @@
104
  </svg>
105
  <div class="text-sm text-gray-600">
106
  <label for="imageInput" class="relative cursor-pointer bg-white rounded-md font-medium text-blue-600 hover:text-blue-500 focus-within:outline-none">
107
- <span>Télécharger des fichiers</span>
108
- <input id="imageInput" name="images" type="file" class="sr-only" accept="image/*" multiple required>
109
  </label>
110
  </div>
111
  <p class="text-xs text-gray-500">PNG, JPG jusqu'à 10MB</p>
@@ -113,11 +113,11 @@
113
  </div>
114
  </div>
115
 
116
- <!-- Prévisualisation multiple -->
117
  <div id="previewContainer" class="hidden">
118
- <p class="text-gray-700 font-medium mb-3">Aperçu des documents :</p>
119
- <div id="previewImages" class="grid grid-cols-2 gap-4">
120
- <!-- Les images prévisualisées seront injectées ici -->
121
  </div>
122
  </div>
123
 
@@ -163,38 +163,41 @@
163
  </div>
164
 
165
  <script>
166
- // Gestion de la prévisualisation de plusieurs images
167
  const imageInput = document.getElementById('imageInput');
168
  const previewContainer = document.getElementById('previewContainer');
169
- const previewImages = document.getElementById('previewImages');
 
 
 
 
 
 
 
 
 
 
 
 
 
 
170
 
 
171
  imageInput.addEventListener('change', function() {
172
- const files = this.files;
173
- previewImages.innerHTML = ""; // Réinitialiser la prévisualisation
174
- if (files && files.length > 0) {
175
- previewContainer.classList.remove('hidden');
176
- Array.from(files).forEach(file => {
177
- const reader = new FileReader();
178
- reader.onload = function(e) {
179
- const img = document.createElement('img');
180
- img.src = e.target.result;
181
- img.alt = "Aperçu du document";
182
- img.className = "w-full max-h-60 object-contain rounded-lg";
183
- previewImages.appendChild(img);
184
- };
185
- reader.readAsDataURL(file);
186
- });
187
  } else {
188
  previewContainer.classList.add('hidden');
189
  }
190
  });
191
 
192
- // Gestion des onglets de résultats
193
- const dissertationTab = document.getElementById('dissertationTab');
194
- const tableauTab = document.getElementById('tableauTab');
195
- const dissertationContent = document.getElementById('dissertationContent');
196
- const tableauContent = document.getElementById('tableauContent');
197
-
198
  dissertationTab.addEventListener('click', function() {
199
  dissertationTab.classList.add('text-blue-600', 'border-b-2', 'border-blue-600');
200
  tableauTab.classList.remove('text-blue-600', 'border-b-2', 'border-blue-600');
@@ -209,33 +212,38 @@
209
  dissertationContent.classList.add('hidden');
210
  });
211
 
212
- // Soumission du formulaire vers l'endpoint analyze_multi
213
- const uploadForm = document.getElementById('uploadForm');
214
  uploadForm.addEventListener('submit', function(e) {
215
  e.preventDefault();
216
- document.getElementById('loading').classList.remove('hidden');
217
- document.getElementById('result').classList.add('hidden');
218
 
219
  const formData = new FormData(uploadForm);
220
 
221
- fetch('/analyze_multi', {
222
  method: 'POST',
223
  body: formData
224
  })
225
  .then(response => response.json())
226
  .then(data => {
227
- document.getElementById('loading').classList.add('hidden');
228
  if (data.error) {
229
  throw new Error(data.error);
230
  }
 
231
  dissertationContent.innerHTML = marked.parse(data.dissertation);
 
232
  tableauContent.querySelector('.overflow-x-auto').innerHTML = marked.parse(data.tableau);
233
- document.getElementById('result').classList.remove('hidden');
 
 
234
  dissertationTab.click();
235
- document.getElementById('result').scrollIntoView({ behavior: 'smooth' });
 
 
236
  })
237
  .catch(error => {
238
- document.getElementById('loading').classList.add('hidden');
239
  alert("Une erreur est survenue : " + error.message);
240
  });
241
  });
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Mariam AI - Analyse Littéraire</title>
7
  <script src="https://cdn.tailwindcss.com"></script>
8
  <script src="https://cdnjs.cloudflare.com/ajax/libs/marked/9.1.6/marked.min.js"></script>
9
  <style>
 
92
 
93
  <div class="bg-white rounded-xl shadow-lg p-8">
94
  <!-- Zone de téléchargement -->
95
+ <form id="uploadForm" class="space-y-6">
96
  <div class="relative">
97
  <label for="imageInput" class="block text-lg font-medium text-gray-700 mb-3">
98
+ Sélectionnez votre document
99
  </label>
100
  <div class="mt-2 flex justify-center px-6 pt-5 pb-6 border-2 border-gray-300 border-dashed rounded-lg hover:border-blue-500 transition-colors cursor-pointer">
101
  <div class="space-y-2 text-center">
 
104
  </svg>
105
  <div class="text-sm text-gray-600">
106
  <label for="imageInput" class="relative cursor-pointer bg-white rounded-md font-medium text-blue-600 hover:text-blue-500 focus-within:outline-none">
107
+ <span>Télécharger un fichier</span>
108
+ <input id="imageInput" name="image" type="file" class="sr-only" accept="image/*" required>
109
  </label>
110
  </div>
111
  <p class="text-xs text-gray-500">PNG, JPG jusqu'à 10MB</p>
 
113
  </div>
114
  </div>
115
 
116
+ <!-- Prévisualisation -->
117
  <div id="previewContainer" class="hidden">
118
+ <p class="text-gray-700 font-medium mb-3">Aperçu du document :</p>
119
+ <div class="relative rounded-lg overflow-hidden bg-gray-100">
120
+ <img id="previewImage" src="#" alt="Aperçu" class="w-full max-h-80 object-contain">
121
  </div>
122
  </div>
123
 
 
163
  </div>
164
 
165
  <script>
166
+ const uploadForm = document.getElementById('uploadForm');
167
  const imageInput = document.getElementById('imageInput');
168
  const previewContainer = document.getElementById('previewContainer');
169
+ const previewImage = document.getElementById('previewImage');
170
+ const loadingIndicator = document.getElementById('loading');
171
+ const resultDiv = document.getElementById('result');
172
+ const dissertationTab = document.getElementById('dissertationTab');
173
+ const tableauTab = document.getElementById('tableauTab');
174
+ const dissertationContent = document.getElementById('dissertationContent');
175
+ const tableauContent = document.getElementById('tableauContent');
176
+
177
+ // Configuration de marked pour le rendu Markdown
178
+ marked.setOptions({
179
+ breaks: true,
180
+ gfm: true,
181
+ headerIds: true,
182
+ langPrefix: 'language-',
183
+ });
184
 
185
+ // Prévisualisation
186
  imageInput.addEventListener('change', function() {
187
+ const file = this.files[0];
188
+ if (file) {
189
+ const reader = new FileReader();
190
+ reader.onload = function(e) {
191
+ previewImage.src = e.target.result;
192
+ previewContainer.classList.remove('hidden');
193
+ }
194
+ reader.readAsDataURL(file);
 
 
 
 
 
 
 
195
  } else {
196
  previewContainer.classList.add('hidden');
197
  }
198
  });
199
 
200
+ // Gestion des onglets
 
 
 
 
 
201
  dissertationTab.addEventListener('click', function() {
202
  dissertationTab.classList.add('text-blue-600', 'border-b-2', 'border-blue-600');
203
  tableauTab.classList.remove('text-blue-600', 'border-b-2', 'border-blue-600');
 
212
  dissertationContent.classList.add('hidden');
213
  });
214
 
215
+ // Soumission du formulaire
 
216
  uploadForm.addEventListener('submit', function(e) {
217
  e.preventDefault();
218
+ loadingIndicator.classList.remove('hidden');
219
+ resultDiv.classList.add('hidden');
220
 
221
  const formData = new FormData(uploadForm);
222
 
223
+ fetch('/analyze', {
224
  method: 'POST',
225
  body: formData
226
  })
227
  .then(response => response.json())
228
  .then(data => {
229
+ loadingIndicator.classList.add('hidden');
230
  if (data.error) {
231
  throw new Error(data.error);
232
  }
233
+
234
  dissertationContent.innerHTML = marked.parse(data.dissertation);
235
+ // Injection du tableau dans le conteneur overflow-x-auto
236
  tableauContent.querySelector('.overflow-x-auto').innerHTML = marked.parse(data.tableau);
237
+
238
+ resultDiv.classList.remove('hidden');
239
+ // Afficher l'onglet dissertation par défaut
240
  dissertationTab.click();
241
+
242
+ // Scroll vers les résultats
243
+ resultDiv.scrollIntoView({ behavior: 'smooth' });
244
  })
245
  .catch(error => {
246
+ loadingIndicator.classList.add('hidden');
247
  alert("Une erreur est survenue : " + error.message);
248
  });
249
  });