Hugging Face's logo

Spaces:
AIWebDev
/
smartdocai
Running

App Files Community
FatimaGr commited on
Commit
1b8241d
·
verified ·
1 Parent(s): efd633c

add

Browse files
Files changed (1) hide show
  1. static/script.js +384 -282
static/script.js CHANGED
@@ -17,25 +17,21 @@ function loadResumerPage() {
17
  <div class="logo-top">SMARTDOCS</div>
18
  <div class="logo-bottom">AI</div>
19
  </div>
20
-
21
  <div class="menu-section">
22
  <button class="menu-btn" id="traductionbutton">TRADUCTION</button>
23
  <button class="menu-btn" id="qesdocButton">QUESTION</button>
24
  <button class="menu-btn" id="visualisationButton">VISUALISATION</button>
25
  </div>
26
-
27
  <div class="menu-section">
28
  <div class="menu-title">IMAGES</div>
29
  <button class="menu-btn" id="interpretationButton">INTERPRETER</button>
30
  <button class="menu-btn" id="qesimgButton">QUESTIONS</button>
31
  </div>
32
  </div>
33
-
34
  <div class="main-content-area">
35
  <div class="document-container">
36
  <h1 class="document-main-title">Opérations sur documents</h1>
37
  <h2 class="document-subtitle">RÉSUMER 📋</h2>
38
-
39
  <div class="upload-container">
40
  <div class="file-drop-zone" id="fileDropZone">
41
  <label for="fileInput" class="file-upload-label">
@@ -46,7 +42,6 @@ function loadResumerPage() {
46
  </div>
47
  <button class="summary-action-btn">RÉSUMER</button>
48
  </div>
49
-
50
  <div class="results-container">
51
  <div class="results-placeholder">
52
  <p class="placeholder-text">Le résultat apparaîtra ici...</p>
@@ -94,11 +89,13 @@ fileInput.addEventListener('change', function(event) {
94
 
95
 
96
  }
97
- //Quand on clique sur le boutton traduction ---------------
98
 
99
- function loadTraductionPage() {
100
- document.body.style.setProperty('--background-image', "url('traduction.webp')");
101
- let appContainer = document.createElement("div");
 
 
102
  appContainer.classList.add("app-container");
103
  appContainer.innerHTML = `
104
  <div class="sidebar">
@@ -106,146 +103,140 @@ fileInput.addEventListener('change', function(event) {
106
  <div class="logo-top">SMARTDOCS</div>
107
  <div class="logo-bottom">AI</div>
108
  </div>
109
-
110
  <div class="menu-section">
111
  <button class="menu-btn" id="resumerButton">RESUME</button>
112
  <button class="menu-btn" id="qesdocButton">QUESTION</button>
113
  <button class="menu-btn" id="visualisationButton">VISUALISATION</button>
114
  </div>
115
-
116
  <div class="menu-section">
117
  <div class="menu-title">IMAGES</div>
118
  <button class="menu-btn" id="interpretationButton">INTERPRETER</button>
119
  <button class="menu-btn" id="qesimgButton">QUESTIONS</button>
120
  </div>
121
  </div>
122
-
123
  <div class="main-content-area">
124
  <div class="document-container">
125
  <h1 class="document-main-title">Opérations sur documents</h1>
126
  <h2 class="document-subtitle">TRANSLATE </h2>
127
-
128
  <div class="upload-container">
129
  <div class="file-drop-zone" id="fileDropZone">
130
- <label for="fileInput" class="file-upload-label">
131
  <img src="up.png" id="uploadIcon" class="upload-icon" alt="Upload">
132
  <span class="drop-text" id="dropText">Déposez votre fichier ici ou cliquez pour parcourir</span>
133
  </label>
134
- <input type="file" id="fileInput" class="file-input" accept=".doc,.docx,.xls,.xlsx,.pdf,.ppt,.pptx" hidden>
135
  </div>
136
 
137
- <div class="action-container">
138
-
139
- <select id="languageSelect" class="language-dropdown">
140
- <option >Select language</option>
141
- <option value="af">Afrikaans</option>
142
- <option value="am">Amharic</option>
143
- <option value="ar">Arabic</option>
144
- <option value="ast">Asturian</option>
145
- <option value="az">Azerbaijani</option>
146
- <option value="ba">Bashkir</option>
147
- <option value="be">Belarusian</option>
148
- <option value="bg">Bulgarian</option>
149
- <option value="bn">Bengali</option>
150
- <option value="br">Breton</option>
151
- <option value="bs">Bosnian</option>
152
- <option value="ca">Catalan; Valencian</option>
153
- <option value="ceb">Cebuano</option>
154
- <option value="cs">Czech</option>
155
- <option value="cy">Welsh</option>
156
- <option value="da">Danish</option>
157
- <option value="de">German</option>
158
- <option value="el">Greek</option>
159
- <option value="en">English</option>
160
- <option value="es">Spanish</option>
161
- <option value="et">Estonian</option>
162
- <option value="fa">Persian</option>
163
- <option value="ff">Fulah</option>
164
- <option value="fi">Finnish</option>
165
- <option value="fr">French</option>
166
- <option value="fy">Western Frisian</option>
167
- <option value="ga">Irish</option>
168
- <option value="gd">Gaelic; Scottish Gaelic</option>
169
- <option value="gl">Galician</option>
170
- <option value="gu">Gujarati</option>
171
- <option value="ha">Hausa</option>
172
- <option value="he">Hebrew</option>
173
- <option value="hi">Hindi</option>
174
- <option value="hr">Croatian</option>
175
- <option value="ht">Haitian; Haitian Creole</option>
176
- <option value="hu">Hungarian</option>
177
- <option value="hy">Armenian</option>
178
- <option value="id">Indonesian</option>
179
- <option value="ig">Igbo</option>
180
- <option value="ilo">Iloko</option>
181
- <option value="is">Icelandic</option>
182
- <option value="it">Italian</option>
183
- <option value="ja">Japanese</option>
184
- <option value="jv">Javanese</option>
185
- <option value="ka">Georgian</option>
186
- <option value="kk">Kazakh</option>
187
- <option value="km">Central Khmer</option>
188
- <option value="kn">Kannada</option>
189
- <option value="ko">Korean</option>
190
- <option value="lb">Luxembourgish</option>
191
- <option value="lg">Ganda</option>
192
- <option value="ln">Lingala</option>
193
- <option value="lo">Lao</option>
194
- <option value="lt">Lithuanian</option>
195
- <option value="lv">Latvian</option>
196
- <option value="mg">Malagasy</option>
197
- <option value="mk">Macedonian</option>
198
- <option value="ml">Malayalam</option>
199
- <option value="mn">Mongolian</option>
200
- <option value="mr">Marathi</option>
201
- <option value="ms">Malay</option>
202
- <option value="my">Burmese</option>
203
- <option value="ne">Nepali</option>
204
- <option value="nl">Dutch; Flemish</option>
205
- <option value="no">Norwegian</option>
206
- <option value="ns">Northern Sotho</option>
207
- <option value="oc">Occitan (post 1500)</option>
208
- <option value="or">Oriya</option>
209
- <option value="pa">Panjabi; Punjabi</option>
210
- <option value="pl">Polish</option>
211
- <option value="ps">Pushto; Pashto</option>
212
- <option value="pt">Portuguese</option>
213
- <option value="ro">Romanian; Moldavian</option>
214
- <option value="ru">Russian</option>
215
- <option value="sd">Sindhi</option>
216
- <option value="si">Sinhala; Sinhalese</option>
217
- <option value="sk">Slovak</option>
218
- <option value="sl">Slovenian</option>
219
- <option value="so">Somali</option>
220
- <option value="sq">Albanian</option>
221
- <option value="sr">Serbian</option>
222
- <option value="ss">Swati</option>
223
- <option value="su">Sundanese</option>
224
- <option value="sv">Swedish</option>
225
- <option value="sw">Swahili</option>
226
- <option value="ta">Tamil</option>
227
- <option value="th">Thai</option>
228
- <option value="tl">Tagalog</option>
229
- <option value="tn">Tswana</option>
230
- <option value="tr">Turkish</option>
231
- <option value="uk">Ukrainian</option>
232
- <option value="ur">Urdu</option>
233
- <option value="uz">Uzbek</option>
234
- <option value="vi">Vietnamese</option>
235
- <option value="wo">Wolof</option>
236
- <option value="xh">Xhosa</option>
237
- <option value="yi">Yiddish</option>
238
- <option value="yo">Yoruba</option>
239
- <option value="zh">Chinese</option>
240
- <option value="zu">Zulu</option>
241
- </select>
242
- <button class="summary-action-btn">Translate</button>
243
- </div>
244
  </div>
245
-
246
  <div class="results-container">
247
  <div class="results-placeholder">
248
- <p class="placeholder-text">Le résultat apparaîtra ici...</p>
249
  </div>
250
  </div>
251
  </div>
@@ -254,138 +245,183 @@ fileInput.addEventListener('change', function(event) {
254
  document.body.innerHTML = "";
255
  document.body.appendChild(appContainer);
256
 
257
- document.getElementById('resumerButton').addEventListener('click', loadResumerPage);
258
- document.getElementById('qesdocButton').addEventListener('click', loadDocPage);
259
- document.getElementById('visualisationButton').addEventListener('click', loadVisualisationPage);
260
- document.getElementById('interpretationButton').addEventListener('click', loadInterpretationPage);
261
- document.getElementById('qesimgButton').addEventListener('click', loadImagePage);
262
- const fileInput = document.getElementById('fileInput');
263
- const dropText = document.getElementById('dropText');
264
- const uploadIcon = document.getElementById('uploadIcon');
265
- +
266
-
267
- dropText.addEventListener('click', function(event) {
268
- event.preventDefault();
269
- event.stopPropagation();
270
- fileInput.click();
271
- });
272
-
273
- uploadIcon.addEventListener('click', function(event) {
274
- event.preventDefault();
275
- event.stopPropagation();
276
- fileInput.click();
277
- });
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
278
 
279
- fileInput.addEventListener('change', function(event) {
280
- let file = event.target.files[0];
281
- if (file) {
282
- dropText.textContent = file.name;
283
- uploadIcon.style.display = "none";
284
- }
285
- });
286
 
 
 
 
 
 
 
 
 
 
 
287
  }
 
 
 
288
 
289
- function loadDocPage() {
290
- document.body.style.setProperty('--background-image', "url('qstdoc2.webp')");
291
-
292
- // Créer une nouvelle structure pour ne pas écraser les événements
293
- let appContainer = document.createElement("div");
294
- appContainer.classList.add("app-container");
295
- appContainer.innerHTML = `
296
- <div class="sidebar">
297
- <div class="logo-container">
298
- <div class="logo-top">SMARTDOCS</div>
299
- <div class="logo-bottom">AI</div>
300
- </div>
301
-
302
- <div class="menu-section">
303
- <button class="menu-btn" id="resumerButton">RESUME</button>
304
- <button class="menu-btn" id="traductionbutton">TRANSLATE</button>
305
- <button class="menu-btn" id="visualisationButton">VISUALISATION</button>
306
- </div>
307
-
308
- <div class="menu-section">
309
- <div class="menu-title">IMAGES</div>
310
- <button class="menu-btn" id="interpretationButton">INTERPRETER</button>
311
- <button class="menu-btn" id="qesimgButton">QUESTIONS</button>
312
- </div>
313
  </div>
314
-
315
- <div class="main-content-area">
316
- <div class="document-container">
317
- <h1 class="document-main-title">Opérations sur documents</h1>
318
- <h2 class="document-subtitle">QUESTION DOCUMENTS 📄❓</h2>
319
-
320
- <div class="upload-container">
321
- <div class="file-drop-zone" id="fileDropZone">
322
- <label for="fileInput" class="file-upload-label">
323
- <img src="up.png" id="uploadIcon" class="upload-icon" alt="Upload">
324
- <span class="drop-text" id="dropText">Déposez votre fichier ici ou cliquez pour parcourir</span>
325
- </label>
326
- <input type="file" id="fileInput" class="file-input" accept=".doc,.docx,.xls,.xlsx,.pdf,.ppt,.pptx" hidden>
327
- </div>
328
-
329
- <div class="question-container">
330
- <div class="question">
331
- <input type="text" id="questionInput" placeholder="Tapez votre question ici...">
332
- </div>
333
- <button class="question-btn">Envoyer</button>
334
- </div>
 
335
  </div>
336
-
337
- <div class="results-container">
338
- <div class="results-placeholder">
339
- <p class="placeholder-text">Le résultat apparaîtra ici...</p>
340
  </div>
 
 
 
 
 
 
341
  </div>
342
  </div>
343
  </div>
344
- `;
345
-
346
- // Insérer la nouvelle structure sans écraser les événements
347
- document.body.innerHTML = "";
348
- document.body.appendChild(appContainer);
349
-
350
- // Réassocier les événements aux boutons
351
- document.getElementById('resumerButton').addEventListener('click', loadResumerPage);
352
- document.getElementById('traductionbutton').addEventListener('click', loadTraductionPage);
353
- document.getElementById('visualisationButton').addEventListener('click', loadVisualisationPage);
354
- document.getElementById('interpretationButton').addEventListener('click', loadInterpretationPage);
355
- document.getElementById('qesimgButton').addEventListener('click', loadImagePage);
356
-
 
357
  const fileInput = document.getElementById('fileInput');
358
  const dropText = document.getElementById('dropText');
359
  const uploadIcon = document.getElementById('uploadIcon');
360
  +
361
 
362
  dropText.addEventListener('click', function(event) {
363
- event.preventDefault();
364
- event.stopPropagation();
365
- fileInput.click();
366
  });
367
 
368
  uploadIcon.addEventListener('click', function(event) {
369
- event.preventDefault();
370
- event.stopPropagation();
371
- fileInput.click();
372
  });
373
 
374
  fileInput.addEventListener('change', function(event) {
375
- let file = event.target.files[0];
376
- if (file) {
377
- dropText.textContent = file.name;
378
- uploadIcon.style.display = "none";
379
- }
380
  });
381
- }
382
 
383
  //quand on clique sur visualisation ----------------------
384
-
385
  function loadVisualisationPage() {
 
386
  document.body.style.setProperty('--background-image', "url('visualisation.webp')");
387
- let appContainer = document.createElement("div");
388
- appContainer.classList.add("app-container");
 
 
389
  appContainer.innerHTML = `
390
  <div class="sidebar">
391
  <div class="logo-container">
@@ -397,7 +433,6 @@ fileInput.addEventListener('change', function(event) {
397
  <button class="menu-btn" id="resumerButton">RESUME</button>
398
  <button class="menu-btn" id="traductionbutton">TRANSLATE</button>
399
  <button class="menu-btn" id="qesdocButton">QUESTION</button>
400
-
401
  </div>
402
 
403
  <div class="menu-section">
@@ -410,78 +445,145 @@ fileInput.addEventListener('change', function(event) {
410
  <div class="main-content-area">
411
  <div class="document-container">
412
  <h1 class="document-main-title">Opérations sur documents</h1>
413
- <h2 class="document-subtitle">VISUALISATION </h2>
414
 
 
415
  <div class="upload-container">
416
  <div class="file-drop-zone" id="fileDropZone">
417
- <label for="fileInput" class="file-upload-label">
418
  <img src="up.png" id="uploadIcon" class="upload-icon" alt="Upload">
419
  <span class="drop-text" id="dropText">Déposez votre fichier ici ou cliquez pour parcourir</span>
420
  </label>
421
- <input type="file" id="fileInput" class="file-input" accept=".doc,.docx,.xls,.xlsx,.pdf,.ppt,.pptx" hidden>
 
422
  </div>
423
 
424
- <div class="action-container">
425
-
426
- <select id="languageSelect" class="language-dropdown">
427
- <option >Select type</option>
428
- <option value="histplot">Histogramme</option>
429
- <option value="scatterplot">Nuage de points</option>
430
- <option value="lineplot">Courbe</option>
431
- <option value="barplot">Diagramme en barres</option>
432
- <option value="boxplot">Boîte à moustaches</option>
433
-
434
-
435
- </select>
436
- <button class="summary-action-btn">Génerer</button>
437
- </div>
438
  </div>
439
 
440
- <div class="results-container">
441
- <div class="results-placeholder">
442
- <p class="placeholder-text">Le résultat apparaîtra ici...</p>
 
 
443
  </div>
444
  </div>
445
  </div>
446
  </div>
447
  `;
 
 
448
  document.body.innerHTML = "";
449
  document.body.appendChild(appContainer);
450
 
451
- document.getElementById('resumerButton').addEventListener('click', loadResumerPage);
452
- document.getElementById('traductionbutton').addEventListener('click', loadTraductionPage);
453
- document.getElementById('qesdocButton').addEventListener('click', loadDocPage);
454
- document.getElementById('interpretationButton').addEventListener('click', loadInterpretationPage);
455
- document.getElementById('qesimgButton').addEventListener('click', loadImagePage);
456
-
457
-
458
- const fileInput = document.getElementById('fileInput');
459
- const dropText = document.getElementById('dropText');
460
- const uploadIcon = document.getElementById('uploadIcon');
461
- +
462
-
463
- dropText.addEventListener('click', function(event) {
464
- event.preventDefault();
465
- event.stopPropagation();
466
- fileInput.click();
467
- });
468
-
469
- uploadIcon.addEventListener('click', function(event) {
470
- event.preventDefault();
471
- event.stopPropagation();
472
- fileInput.click();
473
- });
474
-
475
- fileInput.addEventListener('change', function(event) {
476
- let file = event.target.files[0];
477
- if (file) {
478
- dropText.textContent = file.name;
479
- uploadIcon.style.display = "none";
480
- }
481
- });
482
-
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
483
  }
484
 
 
485
 
486
  //quand on clique sur interpretation ---------------------
487
 
 
17
  <div class="logo-top">SMARTDOCS</div>
18
  <div class="logo-bottom">AI</div>
19
  </div>
 
20
  <div class="menu-section">
21
  <button class="menu-btn" id="traductionbutton">TRADUCTION</button>
22
  <button class="menu-btn" id="qesdocButton">QUESTION</button>
23
  <button class="menu-btn" id="visualisationButton">VISUALISATION</button>
24
  </div>
 
25
  <div class="menu-section">
26
  <div class="menu-title">IMAGES</div>
27
  <button class="menu-btn" id="interpretationButton">INTERPRETER</button>
28
  <button class="menu-btn" id="qesimgButton">QUESTIONS</button>
29
  </div>
30
  </div>
 
31
  <div class="main-content-area">
32
  <div class="document-container">
33
  <h1 class="document-main-title">Opérations sur documents</h1>
34
  <h2 class="document-subtitle">RÉSUMER 📋</h2>
 
35
  <div class="upload-container">
36
  <div class="file-drop-zone" id="fileDropZone">
37
  <label for="fileInput" class="file-upload-label">
 
42
  </div>
43
  <button class="summary-action-btn">RÉSUMER</button>
44
  </div>
 
45
  <div class="results-container">
46
  <div class="results-placeholder">
47
  <p class="placeholder-text">Le résultat apparaîtra ici...</p>
 
89
 
90
 
91
  }
92
+
93
 
94
+ //Quand on clique sur le boutton traduction ---------------
95
+
96
+ function loadTraductionPage() {
97
+ document.body.style.setProperty('--background-image', "url('traduction.webp')");
98
+ let appContainer = document.createElement("div");
99
  appContainer.classList.add("app-container");
100
  appContainer.innerHTML = `
101
  <div class="sidebar">
 
103
  <div class="logo-top">SMARTDOCS</div>
104
  <div class="logo-bottom">AI</div>
105
  </div>
 
106
  <div class="menu-section">
107
  <button class="menu-btn" id="resumerButton">RESUME</button>
108
  <button class="menu-btn" id="qesdocButton">QUESTION</button>
109
  <button class="menu-btn" id="visualisationButton">VISUALISATION</button>
110
  </div>
 
111
  <div class="menu-section">
112
  <div class="menu-title">IMAGES</div>
113
  <button class="menu-btn" id="interpretationButton">INTERPRETER</button>
114
  <button class="menu-btn" id="qesimgButton">QUESTIONS</button>
115
  </div>
116
  </div>
 
117
  <div class="main-content-area">
118
  <div class="document-container">
119
  <h1 class="document-main-title">Opérations sur documents</h1>
120
  <h2 class="document-subtitle">TRANSLATE </h2>
 
121
  <div class="upload-container">
122
  <div class="file-drop-zone" id="fileDropZone">
123
+ <label for="translateFile" class="file-upload-label">
124
  <img src="up.png" id="uploadIcon" class="upload-icon" alt="Upload">
125
  <span class="drop-text" id="dropText">Déposez votre fichier ici ou cliquez pour parcourir</span>
126
  </label>
127
+ <input type="file" id="translateFile" class="file-input" accept=".doc,.docx,.xls,.xlsx,.pdf,.ppt,.pptx" hidden>
128
  </div>
129
 
130
+ <div class="action-container">
131
+ <select id="targetLanguageSelect" class="language-dropdown">
132
+ <option value="">Select language</option>
133
+ <option value="af">Afrikaans</option>
134
+ <option value="am">Amharic</option>
135
+ <option value="ar">Arabic</option>
136
+ <option value="ast">Asturian</option>
137
+ <option value="az">Azerbaijani</option>
138
+ <option value="ba">Bashkir</option>
139
+ <option value="be">Belarusian</option>
140
+ <option value="bg">Bulgarian</option>
141
+ <option value="bn">Bengali</option>
142
+ <option value="br">Breton</option>
143
+ <option value="bs">Bosnian</option>
144
+ <option value="ca">Catalan; Valencian</option>
145
+ <option value="ceb">Cebuano</option>
146
+ <option value="cs">Czech</option>
147
+ <option value="cy">Welsh</option>
148
+ <option value="da">Danish</option>
149
+ <option value="de">German</option>
150
+ <option value="el">Greek</option>
151
+ <option value="en">English</option>
152
+ <option value="es">Spanish</option>
153
+ <option value="et">Estonian</option>
154
+ <option value="fa">Persian</option>
155
+ <option value="ff">Fulah</option>
156
+ <option value="fi">Finnish</option>
157
+ <option value="fr">French</option>
158
+ <option value="fy">Western Frisian</option>
159
+ <option value="ga">Irish</option>
160
+ <option value="gd">Gaelic; Scottish Gaelic</option>
161
+ <option value="gl">Galician</option>
162
+ <option value="gu">Gujarati</option>
163
+ <option value="ha">Hausa</option>
164
+ <option value="he">Hebrew</option>
165
+ <option value="hi">Hindi</option>
166
+ <option value="hr">Croatian</option>
167
+ <option value="ht">Haitian; Haitian Creole</option>
168
+ <option value="hu">Hungarian</option>
169
+ <option value="hy">Armenian</option>
170
+ <option value="id">Indonesian</option>
171
+ <option value="ig">Igbo</option>
172
+ <option value="ilo">Iloko</option>
173
+ <option value="is">Icelandic</option>
174
+ <option value="it">Italian</option>
175
+ <option value="ja">Japanese</option>
176
+ <option value="jv">Javanese</option>
177
+ <option value="ka">Georgian</option>
178
+ <option value="kk">Kazakh</option>
179
+ <option value="km">Central Khmer</option>
180
+ <option value="kn">Kannada</option>
181
+ <option value="ko">Korean</option>
182
+ <option value="lb">Luxembourgish</option>
183
+ <option value="lg">Ganda</option>
184
+ <option value="ln">Lingala</option>
185
+ <option value="lo">Lao</option>
186
+ <option value="lt">Lithuanian</option>
187
+ <option value="lv">Latvian</option>
188
+ <option value="mg">Malagasy</option>
189
+ <option value="mk">Macedonian</option>
190
+ <option value="ml">Malayalam</option>
191
+ <option value="mn">Mongolian</option>
192
+ <option value="mr">Marathi</option>
193
+ <option value="ms">Malay</option>
194
+ <option value="my">Burmese</option>
195
+ <option value="ne">Nepali</option>
196
+ <option value="nl">Dutch; Flemish</option>
197
+ <option value="no">Norwegian</option>
198
+ <option value="ns">Northern Sotho</option>
199
+ <option value="oc">Occitan (post 1500)</option>
200
+ <option value="or">Oriya</option>
201
+ <option value="pa">Panjabi; Punjabi</option>
202
+ <option value="pl">Polish</option>
203
+ <option value="ps">Pushto; Pashto</option>
204
+ <option value="pt">Portuguese</option>
205
+ <option value="ro">Romanian; Moldavian</option>
206
+ <option value="ru">Russian</option>
207
+ <option value="sd">Sindhi</option>
208
+ <option value="si">Sinhala; Sinhalese</option>
209
+ <option value="sk">Slovak</option>
210
+ <option value="sl">Slovenian</option>
211
+ <option value="so">Somali</option>
212
+ <option value="sq">Albanian</option>
213
+ <option value="sr">Serbian</option>
214
+ <option value="ss">Swati</option>
215
+ <option value="su">Sundanese</option>
216
+ <option value="sv">Swedish</option>
217
+ <option value="sw">Swahili</option>
218
+ <option value="ta">Tamil</option>
219
+ <option value="th">Thai</option>
220
+ <option value="tl">Tagalog</option>
221
+ <option value="tn">Tswana</option>
222
+ <option value="tr">Turkish</option>
223
+ <option value="uk">Ukrainian</option>
224
+ <option value="ur">Urdu</option>
225
+ <option value="uz">Uzbek</option>
226
+ <option value="vi">Vietnamese</option>
227
+ <option value="wo">Wolof</option>
228
+ <option value="xh">Xhosa</option>
229
+ <option value="yi">Yiddish</option>
230
+ <option value="yo">Yoruba</option>
231
+ <option value="zh">Chinese</option>
232
+ <option value="zu">Zulu</option>
233
+ </select>
234
+ <button class="translate" id="translateButton">Translate</button>
235
+ </div>
 
236
  </div>
 
237
  <div class="results-container">
238
  <div class="results-placeholder">
239
+ <p class="placeholder-text" id="translateResult">Le résultat apparaîtra ici...</p>
240
  </div>
241
  </div>
242
  </div>
 
245
  document.body.innerHTML = "";
246
  document.body.appendChild(appContainer);
247
 
248
+ document.getElementById('resumerButton').addEventListener('click', loadResumerPage);
249
+ document.getElementById('qesdocButton').addEventListener('click', loadDocPage);
250
+ document.getElementById('visualisationButton').addEventListener('click', loadVisualisationPage);
251
+ document.getElementById('interpretationButton').addEventListener('click', loadInterpretationPage);
252
+ document.getElementById('qesimgButton').addEventListener('click', loadImagePage);
253
+
254
+ const fileInput = document.getElementById('translateFile');
255
+ const dropText = document.getElementById('dropText');
256
+ const uploadIcon = document.getElementById('uploadIcon');
257
+
258
+ dropText.addEventListener('click', function(event) {
259
+ event.preventDefault();
260
+ event.stopPropagation();
261
+ fileInput.click();
262
+ });
263
+
264
+ uploadIcon.addEventListener('click', function(event) {
265
+ event.preventDefault();
266
+ event.stopPropagation();
267
+ fileInput.click();
268
+ });
269
+
270
+ fileInput.addEventListener('change', function(event) {
271
+ let file = event.target.files[0];
272
+ if (file) {
273
+ dropText.textContent = file.name;
274
+ uploadIcon.style.display = "none";
275
+ }
276
+ });
277
+
278
+ // Ajout de l'événement pour le bouton de traduction
279
+ document.getElementById('translateButton').addEventListener('click', uploadForTranslation);
280
+
281
+ async function uploadForTranslation() {
282
+ let fileInput = document.getElementById("translateFile");
283
+ let targetLang = document.getElementById("targetLanguageSelect").value;
284
+
285
+ if (!fileInput.files[0]) {
286
+ document.getElementById("translateResult").innerText = "Veuillez sélectionner un fichier";
287
+ return;
288
+ }
289
+
290
+ if (!targetLang) {
291
+ document.getElementById("translateResult").innerText = "Veuillez sélectionner une langue";
292
+ return;
293
+ }
294
+
295
+ let formData = new FormData();
296
+ formData.append("file", fileInput.files[0]);
297
+ formData.append("target_lang", targetLang);
298
+
299
+ try {
300
+ console.log("📤 Envoi du fichier pour traduction...");
301
+ let response = await fetch("/translate/", {
302
+ method: "POST",
303
+ body: formData,
304
+ headers: { "Accept": "application/json" }
305
+ });
306
+
307
+ let responseText = await response.text();
308
+ console.log("📤 Réponse brute du serveur :", responseText);
309
+
310
+ if (!response.ok) {
311
+ throw new Error("Erreur de requête ! " + responseText);
312
+ }
313
 
314
+ let data = JSON.parse(responseText);
315
+ console.log("📤 Réponse JSON du serveur :", data);
 
 
 
 
 
316
 
317
+ let resultElement = document.getElementById("translateResult");
318
+ if (data.translated_text) {
319
+ resultElement.innerText = "📝 Traduction : " + data.translated_text;
320
+ } else {
321
+ resultElement.innerText = "❌ Traduction non disponible.";
322
+ }
323
+ } catch (error) {
324
+ console.error("❌ Erreur :", error);
325
+ document.getElementById("translateResult").innerText = "Échec de la requête ! " + error.message;
326
+ }
327
  }
328
+ }
329
+ function loadDocPage() {
330
+ document.body.style.setProperty('--background-image', "url('qstdoc2.webp')");
331
 
332
+ // Créer une nouvelle structure pour ne pas écraser les événements
333
+ let appContainer = document.createElement("div");
334
+ appContainer.classList.add("app-container");
335
+ appContainer.innerHTML = `
336
+ <div class="sidebar">
337
+ <div class="logo-container">
338
+ <div class="logo-top">SMARTDOCS</div>
339
+ <div class="logo-bottom">AI</div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
340
  </div>
341
+ <div class="menu-section">
342
+ <button class="menu-btn" id="resumerButton">RESUME</button>
343
+ <button class="menu-btn" id="traductionbutton">TRANSLATE</button>
344
+ <button class="menu-btn" id="visualisationButton">VISUALISATION</button>
345
+ </div>
346
+ <div class="menu-section">
347
+ <div class="menu-title">IMAGES</div>
348
+ <button class="menu-btn" id="interpretationButton">INTERPRETER</button>
349
+ <button class="menu-btn" id="qesimgButton">QUESTIONS</button>
350
+ </div>
351
+ </div>
352
+ <div class="main-content-area">
353
+ <div class="document-container">
354
+ <h1 class="document-main-title">Opérations sur documents</h1>
355
+ <h2 class="document-subtitle">QUESTION DOCUMENTS 📄❓</h2>
356
+ <div class="upload-container">
357
+ <div class="file-drop-zone" id="fileDropZone">
358
+ <label for="fileInput" class="file-upload-label">
359
+ <img src="up.png" id="uploadIcon" class="upload-icon" alt="Upload">
360
+ <span class="drop-text" id="dropText">Déposez votre fichier ici ou cliquez pour parcourir</span>
361
+ </label>
362
+ <input type="file" id="fileInput" class="file-input" accept=".doc,.docx,.xls,.xlsx,.pdf,.ppt,.pptx" hidden>
363
  </div>
364
+ <div class="question-container">
365
+ <div class="question">
366
+ <input type="text" id="questionInput" placeholder="Tapez votre question ici...">
 
367
  </div>
368
+ <button class="question-btn">Envoyer</button>
369
+ </div>
370
+ </div>
371
+ <div class="results-container">
372
+ <div class="results-placeholder">
373
+ <p class="placeholder-text">Le résultat apparaîtra ici...</p>
374
  </div>
375
  </div>
376
  </div>
377
+ </div>
378
+ `;
379
+
380
+ // Insérer la nouvelle structure sans écraser les événements
381
+ document.body.innerHTML = "";
382
+ document.body.appendChild(appContainer);
383
+
384
+ // Réassocier les événements aux boutons
385
+ document.getElementById('resumerButton').addEventListener('click', loadResumerPage);
386
+ document.getElementById('traductionbutton').addEventListener('click', loadTraductionPage);
387
+ document.getElementById('visualisationButton').addEventListener('click', loadVisualisationPage);
388
+ document.getElementById('interpretationButton').addEventListener('click', loadInterpretationPage);
389
+ document.getElementById('qesimgButton').addEventListener('click', loadImagePage);
390
+
391
  const fileInput = document.getElementById('fileInput');
392
  const dropText = document.getElementById('dropText');
393
  const uploadIcon = document.getElementById('uploadIcon');
394
  +
395
 
396
  dropText.addEventListener('click', function(event) {
397
+ event.preventDefault();
398
+ event.stopPropagation();
399
+ fileInput.click();
400
  });
401
 
402
  uploadIcon.addEventListener('click', function(event) {
403
+ event.preventDefault();
404
+ event.stopPropagation();
405
+ fileInput.click();
406
  });
407
 
408
  fileInput.addEventListener('change', function(event) {
409
+ let file = event.target.files[0];
410
+ if (file) {
411
+ dropText.textContent = file.name;
412
+ uploadIcon.style.display = "none";
413
+ }
414
  });
415
+ }
416
 
417
  //quand on clique sur visualisation ----------------------
 
418
  function loadVisualisationPage() {
419
+ // 1. Configuration de l'arrière-plan
420
  document.body.style.setProperty('--background-image', "url('visualisation.webp')");
421
+
422
+ // 2. Création de la structure HTML
423
+ const appContainer = document.createElement("div");
424
+ appContainer.className = "app-container";
425
  appContainer.innerHTML = `
426
  <div class="sidebar">
427
  <div class="logo-container">
 
433
  <button class="menu-btn" id="resumerButton">RESUME</button>
434
  <button class="menu-btn" id="traductionbutton">TRANSLATE</button>
435
  <button class="menu-btn" id="qesdocButton">QUESTION</button>
 
436
  </div>
437
 
438
  <div class="menu-section">
 
445
  <div class="main-content-area">
446
  <div class="document-container">
447
  <h1 class="document-main-title">Opérations sur documents</h1>
448
+ <h2 class="document-subtitle">VISUALISATION</h2>
449
 
450
+ <!-- Conteneur d'upload (pas un formulaire) -->
451
  <div class="upload-container">
452
  <div class="file-drop-zone" id="fileDropZone">
453
+ <label for="graphFileInput" class="file-upload-label">
454
  <img src="up.png" id="uploadIcon" class="upload-icon" alt="Upload">
455
  <span class="drop-text" id="dropText">Déposez votre fichier ici ou cliquez pour parcourir</span>
456
  </label>
457
+ <input type="file" id="graphFileInput" class="file-input"
458
+ accept=".doc,.docx,.xls,.xlsx,.pdf,.ppt,.pptx" hidden>
459
  </div>
460
 
461
+ <div class="graph-action-container">
462
+ <select id="graphTypeSelect" class="language-dropdown">
463
+ <option value="">Select type</option>
464
+ <option value="histplot">Histogramme</option>
465
+ <option value="scatterplot">Nuage de points</option>
466
+ <option value="lineplot">Courbe</option>
467
+ <option value="barplot">Diagramme en barres</option>
468
+ <option value="boxplot">Boîte à moustaches</option>
469
+ </select>
470
+ <button type="button" id="generateGraphBtn" class="visualiser">Générer</button>
471
+ </div>
 
 
 
472
  </div>
473
 
474
+ <!-- Zone de résultats -->
475
+ <div class="graph-results-container">
476
+ <div class="graph-results-placeholder">
477
+ <img id="graphResultImage" class="graph-result-img">
478
+ <p class="placeholder-text" id="graphPlaceholderText">Le résultat apparaîtra ici...</p>
479
  </div>
480
  </div>
481
  </div>
482
  </div>
483
  `;
484
+
485
+ // 3. Nettoyage et insertion
486
  document.body.innerHTML = "";
487
  document.body.appendChild(appContainer);
488
 
489
+ // 4. Gestion des événements
490
+ const setupEventListeners = () => {
491
+ // Navigation
492
+ document.getElementById('resumerButton').addEventListener('click', loadResumerPage);
493
+ document.getElementById('traductionbutton').addEventListener('click', loadTraductionPage);
494
+ document.getElementById('qesdocButton').addEventListener('click', loadDocPage);
495
+ document.getElementById('interpretationButton').addEventListener('click', loadInterpretationPage);
496
+ document.getElementById('qesimgButton').addEventListener('click', loadImagePage);
497
+
498
+ // Gestion des fichiers
499
+ const fileInput = document.getElementById('graphFileInput');
500
+ const dropText = document.getElementById('dropText');
501
+ const uploadIcon = document.getElementById('uploadIcon');
502
+
503
+ dropText.addEventListener('click', (e) => {
504
+ e.preventDefault();
505
+ fileInput.click();
506
+ });
507
+
508
+ uploadIcon.addEventListener('click', (e) => {
509
+ e.preventDefault();
510
+ fileInput.click();
511
+ });
512
+
513
+ fileInput.addEventListener('change', (e) => {
514
+ if (e.target.files[0]) {
515
+ dropText.textContent = e.target.files[0].name;
516
+ uploadIcon.style.display = "none";
517
+ }
518
+ });
519
+
520
+ // Génération du graphique
521
+ document.getElementById('generateGraphBtn').addEventListener('click', generateGraph);
522
+ };
523
+
524
+ // 5. Fonction de génération du graphique
525
+ const generateGraph = async () => {
526
+ const fileInput = document.getElementById('graphFileInput');
527
+ const graphTypeSelect = document.getElementById('graphTypeSelect');
528
+ const resultImage = document.getElementById('graphResultImage');
529
+ const placeholderText = document.getElementById('graphPlaceholderText');
530
+
531
+ // Validation
532
+ if (!fileInput.files[0]) {
533
+ placeholderText.textContent = "Veuillez sélectionner un fichier";
534
+ return;
535
+ }
536
+
537
+ if (!graphTypeSelect.value) {
538
+ placeholderText.textContent = "Veuillez sélectionner un type de graphique";
539
+ return;
540
+ }
541
+
542
+ // Préparation de l'interface
543
+ resultImage.style.display = "none";
544
+ placeholderText.textContent = "Génération du graphique...";
545
+
546
+ try {
547
+ // Envoi des données
548
+ const formData = new FormData();
549
+ formData.append("file", fileInput.files[0]);
550
+ formData.append("query", graphTypeSelect.value);
551
+
552
+ const response = await fetch("http://localhost:8000/generate_viz/", {
553
+ method: "POST",
554
+ body: formData,
555
+ headers: { 'Accept': 'image/*' }
556
+ });
557
+
558
+ // Vérification
559
+ if (!response.ok) {
560
+ throw new Error(`Erreur ${response.status}: ${await response.text()}`);
561
+ }
562
+
563
+ const contentType = response.headers.get('Content-Type');
564
+ if (!contentType?.includes('image')) {
565
+ throw new Error("Réponse non reconnue comme image");
566
+ }
567
+
568
+ // Affichage
569
+ const imageBlob = await response.blob();
570
+ resultImage.onload = () => URL.revokeObjectURL(resultImage.src);
571
+ resultImage.src = URL.createObjectURL(imageBlob);
572
+ resultImage.style.display = "block";
573
+ placeholderText.textContent = "";
574
+
575
+ } catch (error) {
576
+ console.error("Erreur:", error);
577
+ placeholderText.textContent = `Erreur: ${error.message}`;
578
+ resultImage.style.display = "none";
579
+ }
580
+ };
581
+
582
+ // Initialisation
583
+ setupEventListeners();
584
  }
585
 
586
+
587
 
588
  //quand on clique sur interpretation ---------------------
589