FatimaGr commited on
Commit
3a392c4
·
verified ·
1 Parent(s): a246d86
Files changed (1) hide show
  1. static/script.js +87 -91
static/script.js CHANGED
@@ -18,53 +18,51 @@ function loadResumerPage() {
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">
38
  <img src="up.png" id="uploadIcon" class="upload-icon" alt="Upload">
39
- <span class="drop-text" id="dropText">Déposez votre fichier ici ou cliquez pour parcourir</span>
40
  </label>
41
  <input type="file" id="fileInput" class="file-input" accept=".doc,.docx,.xls,.xlsx,.pdf,.ppt,.pptx" hidden>
42
  </div>
43
- <button class="summary-action-btn">RÉSUMER</button>
44
  </div>
45
  <div class="results-container">
46
  <div class="results-placeholder">
47
  <div id="scrollableResult" class="scrollable-text">
48
  <p id="documentResult" class="placeholder-text" data-summary-text="">
49
- Le résultat apparaîtra ici...
50
  </p>
51
 
52
 
53
-
54
  <!-- Boutons de téléchargement visibles en bas -->
55
  <div id="downloadSection" style="display: none; margin-top: 20px;">
56
- <h3 style="color: black; margin-bottom: 10px;">Télécharger le résumé</h3>
57
  <div style="display: flex; gap: 10px; flex-wrap: wrap; justify-content: center;">
58
  <button id="downloadPdf" class="download-btn">PDF</button>
59
  <button id="downloadWord" class="download-btn">Word</button>
60
  <button id="downloadPpt" class="download-btn">PowerPoint</button>
61
- <button id="downloadTxt" class="download-btn">Texte</button>
62
  </div>
63
  </div>
64
  </div>
65
  </div>
66
  </div>
67
-
68
  </div>
69
  </div>
70
  `;
@@ -83,11 +81,11 @@ function loadResumerPage() {
83
  let resultElement = document.getElementById("documentResult");
84
 
85
  if (fileInput.files.length === 0) {
86
- resultElement.innerText = "⚠️ Aucun fichier sélectionné !";
87
  return;
88
  }
89
 
90
- resultElement.innerText = "Chargement du résumé... 🕐";
91
 
92
  let formData = new FormData();
93
  formData.append("file", fileInput.files[0]);
@@ -113,14 +111,14 @@ function loadResumerPage() {
113
 
114
  if (data.summary) {
115
  resultElement.innerHTML = `
116
- <h3 class="centered-title">📝 Résumé généré :</h3>
117
  <br>
118
  <p>${data.summary}</p>
119
  `;
120
  document.getElementById("documentResult").dataset.summaryText = data.summary;
121
  document.getElementById("downloadSection").style.display = "block";
122
  } else {
123
- resultElement.innerText = "❌ Résumé non disponible.";
124
  }
125
  } catch (error) {
126
  console.error("❌ Erreur : ", error);
@@ -224,25 +222,25 @@ function loadResumerPage() {
224
  <div class="logo-bottom">AI</div>
225
  </div>
226
  <div class="menu-section">
227
- <button class="menu-btn" id="resumerButton">RESUME</button>
228
- <button class="menu-btn" id="qesdocButton">QUESTION</button>
229
- <button class="menu-btn" id="visualisationButton">VISUALISATION</button>
230
  </div>
231
  <div class="menu-section">
232
  <div class="menu-title">IMAGES</div>
233
- <button class="menu-btn" id="interpretationButton">INTERPRETER</button>
234
- <button class="menu-btn" id="qesimgButton">QUESTIONS</button>
235
  </div>
236
  </div>
237
  <div class="main-content-area">
238
  <div class="document-container">
239
- <h1 class="document-main-title">Opérations sur documents</h1>
240
  <h2 class="document-subtitle">TRANSLATE</h2>
241
  <div class="upload-container">
242
  <div class="file-drop-zone" id="fileDropZone">
243
  <label for="translateFile" class="file-upload-label">
244
  <img src="up.png" id="uploadIcon" class="upload-icon" alt="Upload">
245
- <span class="drop-text" id="dropText">Déposez votre fichier ici ou cliquez pour parcourir</span>
246
  </label>
247
  <input type="file" id="translateFile" class="file-input" accept=".doc,.docx,.xls,.xlsx,.pdf,.ppt,.pptx" hidden>
248
  </div>
@@ -356,14 +354,14 @@ function loadResumerPage() {
356
  </div>
357
  <div class="results-container">
358
  <div class="results-placeholder">
359
- <p class="placeholder-text" id="translateResult">Le résultat apparaîtra ici...</p>
360
  <div id="downloadSection" style="display: none; margin-top: 20px;">
361
- <h3 style="color: white; margin-bottom: 10px;">Télécharger la traduction</h3>
362
  <div style="display: flex; gap: 10px;">
363
  <button id="downloadPdf" class="download-btn">PDF</button>
364
  <button id="downloadWord" class="download-btn">Word</button>
365
  <button id="downloadPpt" class="download-btn">PowerPoint</button>
366
- <button id="downloadTxt" class="download-btn">Texte</button>
367
  </div>
368
  </div>
369
  </div>
@@ -444,12 +442,12 @@ function loadResumerPage() {
444
  const resultElement = document.getElementById("translateResult");
445
 
446
  if (!fileInput.files[0]) {
447
- resultElement.innerText = "⚠️Veuillez sélectionner un fichier";
448
  return;
449
  }
450
 
451
  if (!targetLang) {
452
- resultElement.innerText = "⚠️Veuillez sélectionner une langue";
453
  return;
454
  }
455
 
@@ -458,7 +456,7 @@ function loadResumerPage() {
458
  formData.append("target_lang", targetLang);
459
 
460
  try {
461
- resultElement.innerText = "Traduction en cours...🕐";
462
  const response = await fetch("/translate/", {
463
  method: "POST",
464
  body: formData,
@@ -472,13 +470,13 @@ function loadResumerPage() {
472
  const data = await response.json();
473
 
474
  if (data.translated_text) {
475
- resultElement.innerText = "📝 Traduction : " + data.translated_text;
476
  // Stocker le texte traduit pour le téléchargement
477
  resultElement.dataset.translatedText = data.translated_text;
478
  // Afficher les options de téléchargement
479
  document.getElementById("downloadSection").style.display = "block";
480
  } else {
481
- resultElement.innerText = "❌ Traduction non disponible.";
482
  }
483
  } catch (error) {
484
  console.error("Erreur:", error);
@@ -561,43 +559,43 @@ function loadDocPage() {
561
  </div>
562
 
563
  <div class="menu-section">
564
- <button class="menu-btn" id="resumerButton">RESUME</button>
565
  <button class="menu-btn" id="traductionbutton">TRANSLATE</button>
566
- <button class="menu-btn" id="visualisationButton">VISUALISATION</button>
567
  </div>
568
 
569
  <div class="menu-section">
570
  <div class="menu-title">IMAGES</div>
571
- <button class="menu-btn" id="interpretationButton">INTERPRETER</button>
572
- <button class="menu-btn" id="qesimgButton">QUESTIONS</button>
573
  </div>
574
  </div>
575
 
576
  <div class="main-content-area">
577
  <div class="document-container">
578
- <h1 class="document-main-title">Opérations sur documents</h1>
579
- <h2 class="document-subtitle">QUESTION DOCUMENTS 📄❓</h2>
580
 
581
  <div class="upload-container">
582
  <div class="file-drop-zone" id="fileDropZone">
583
  <label for="fileInput" class="file-upload-label">
584
  <img src="up.png" id="uploadIcon" class="upload-icon" alt="Upload">
585
- <span class="drop-text" id="dropText">Déposez votre fichier ici ou cliquez pour parcourir</span>
586
  </label>
587
  <input type="file" id="fileInput" class="file-input" accept=".doc,.docx,.xls,.xlsx,.pdf,.ppt,.pptx" hidden>
588
  </div>
589
 
590
  <div class="question-container">
591
  <div class="question">
592
- <input type="text" id="questionInput" placeholder="Tapez votre question ici...">
593
  </div>
594
- <button class="question-btn" id="askDocBtn">Envoyer</button>
595
  </div>
596
  </div>
597
 
598
  <div class="results-container">
599
  <div class="results-placeholder">
600
- <p id="documentAnswer" class="placeholder-text">Le résultat apparaîtra ici...</p>
601
  </div>
602
  </div>
603
  </div>
@@ -647,7 +645,7 @@ askBtn.addEventListener('click', async () => {
647
  const answerDiv = document.getElementById('documentAnswer');
648
 
649
  if (!file || !question) {
650
- answerDiv.innerHTML = "⚠️ Veuillez ajouter un fichier et une question.";
651
  return;
652
  }
653
 
@@ -656,7 +654,7 @@ askBtn.addEventListener('click', async () => {
656
  formData.append("question", question);
657
 
658
  // Afficher "⏳ Analyse du document en cours..." pendant le traitement
659
- answerDiv.innerHTML = "⏳ Analyse du document en cours...";
660
 
661
  try {
662
  const response = await fetch("/doc-qa/", {
@@ -668,7 +666,7 @@ askBtn.addEventListener('click', async () => {
668
  if (data.answer) {
669
 
670
  answerDiv.innerHTML = `
671
- <h3 class="centered-title">✅ La réponse :</h3>
672
  <br>
673
  <p>${data.answer}</p>
674
  `;
@@ -697,25 +695,25 @@ askBtn.addEventListener('click', async () => {
697
  <div class="logo-bottom">AI</div>
698
  </div>
699
  <div class="menu-section">
700
- <button class="menu-btn" id="resumerButton">RESUME</button>
701
  <button class="menu-btn" id="traductionbutton">TRANSLATE</button>
702
- <button class="menu-btn" id="qesdocButton">QUESTION</button>
703
  </div>
704
  <div class="menu-section">
705
  <div class="menu-title">IMAGES</div>
706
- <button class="menu-btn" id="interpretationButton">INTERPRETER</button>
707
- <button class="menu-btn" id="qesimgButton">QUESTIONS</button>
708
  </div>
709
  </div>
710
  <div class="main-content-area">
711
  <div class="document-container">
712
- <h1 class="document-main-title">Opérations sur documents</h1>
713
- <h2 class="document-subtitle">VISUALISATION</h2>
714
  <div class="upload-container">
715
  <div class="file-drop-zone" id="fileDropZone">
716
  <label for="graphFileInput" class="file-upload-label">
717
  <img src="up.png" id="uploadIcon" class="upload-icon" alt="Upload">
718
- <span class="drop-text" id="dropText">Déposez votre fichier ici ou cliquez pour parcourir</span>
719
  </label>
720
  <input type="file" id="graphFileInput" class="file-input"
721
  accept=".xls,.xlsx" hidden>
@@ -724,22 +722,22 @@ askBtn.addEventListener('click', async () => {
724
  <div class="action-container">
725
  <select id="graphTypeSelect" class="language-dropdown">
726
  <option value="">Select type</option>
727
- <option value="histplot">Histogramme</option>
728
- <option value="scatterplot">Nuage de points</option>
729
- <option value="lineplot">Courbe</option>
730
- <option value="barplot">Diagramme en barres</option>
731
- <option value="boxplot">Boîte à moustaches</option>
732
  </select>
733
- <button type="button" id="generateGraphBtn" class="graph-generate-btn">Générer</button>
734
  </div>
735
  </div>
736
  <div class="graph-results-container">
737
  <div class="graph-results-placeholder">
738
  <img id="graphResultImage" class="graph-result-img">
739
- <p class="placeholder-text" id="graphPlaceholderText">Le résultat apparaîtra ici...</p>
740
  </div>
741
  <div id="downloadSection" style="display: none; margin-top: 20px; text-align: center;">
742
- <h3 style="color: white; margin-bottom: 10px;">Télécharger le graphique</h3>
743
  <div style="display: flex; justify-content: center; gap: 10px;">
744
  <button id="downloadPng" class="download-btn">PNG</button>
745
  <button id="downloadJpg" class="download-btn">JPG</button>
@@ -807,13 +805,13 @@ askBtn.addEventListener('click', async () => {
807
 
808
  // Validation
809
  if (!fileInput.files[0]) {
810
- placeholderText.textContent = "⚠️Veuillez sélectionner un fichier";
811
  downloadSection.style.display = "none";
812
  return;
813
  }
814
 
815
  if (!graphTypeSelect.value) {
816
- placeholderText.textContent = "⚠️Veuillez sélectionner un type de graphique";
817
  downloadSection.style.display = "none";
818
  return;
819
  }
@@ -821,7 +819,7 @@ askBtn.addEventListener('click', async () => {
821
  // Préparation de l'interface
822
  resultImage.style.display = "none";
823
  downloadSection.style.display = "none";
824
- placeholderText.textContent = "Génération du graphique en cours...🕐";
825
 
826
  try {
827
  // Envoi des données
@@ -933,28 +931,28 @@ function loadInterpretationPage() {
933
  </div>
934
 
935
  <div class="menu-section">
936
- <button class="menu-btn" id="qesimgButton">QUESTIONS</button>
937
  </div>
938
 
939
  <div class="menu-section">
940
  <div class="menu-title">DOCUMENTS</div>
941
- <button class="menu-btn" id="resumerButton">RESUMER</button>
942
  <button class="menu-btn" id="traductionbutton">TRANSLATE</button>
943
- <button class="menu-btn" id="qesdocButton">QUESTION</button>
944
- <button class="menu-btn" id="visualisationButton">VISUALISATION</button>
945
  </div>
946
  </div>
947
 
948
  <div class="main-content-area">
949
  <div class="document-container">
950
- <h1 class="document-main-title">Opérations sur images</h1>
951
- <h2 class="document-subtitle">INTERPRÉTATION DES IMAGES 🏞️🤖</h2>
952
 
953
  <div class="upload-container">
954
  <div class="file-drop-zone" id="fileDropZone">
955
  <label for="fileInput" class="file-upload-label">
956
  <img src="up.png" id="uploadIcon" class="upload-icon" alt="Upload">
957
- <span class="drop-text" id="dropText">Déposez votre image ici ou cliquez pour parcourir</span>
958
  </label>
959
  <input type="file" id="fileInput" class="file-input" accept=".jpg,.jpeg,.png,.gif,.bmp,.webp" hidden>
960
  </div>
@@ -963,7 +961,7 @@ function loadInterpretationPage() {
963
 
964
  <div class="results-container">
965
  <div class="results-placeholder" id="imageCaptionResult">
966
- <p class="placeholder-text">Le résultat apparaîtra ici...</p>
967
  </div>
968
  </div>
969
  </div>
@@ -1014,7 +1012,7 @@ interpretButton.addEventListener('click', async function () {
1014
 
1015
 
1016
  if (!file) {
1017
- resultContainer.innerHTML = `<p class="placeholder-text">⚠️ Veuillez sélectionner une image.</p>`;
1018
  return;
1019
  }
1020
 
@@ -1022,7 +1020,7 @@ interpretButton.addEventListener('click', async function () {
1022
  formData.append("file", file);
1023
 
1024
  // Afficher le message de chargement pendant l'analyse
1025
- resultContainer.innerHTML = `<p class="placeholder-text">⏳ Analyse en cours...</p>`;
1026
 
1027
  try {
1028
  const response = await fetch("/image-caption/", {
@@ -1035,7 +1033,7 @@ interpretButton.addEventListener('click', async function () {
1035
  if (data.caption) {
1036
 
1037
  resultContainer.innerHTML = `
1038
- <h3 style="text-align: center; font-size: 1.5rem; font-weight: bold; color: black;">📸 Légende générée :</h3>
1039
  <br>
1040
  <p style="text-align: center; font-size: 1.2rem; font-weight: bold; color: black;">${data.caption}</p>
1041
  `;
@@ -1065,28 +1063,28 @@ interpretButton.addEventListener('click', async function () {
1065
  </div>
1066
 
1067
  <div class="menu-section">
1068
- <button class="menu-btn" id="interpretationButton">INTERPRETER</button>
1069
  </div>
1070
 
1071
  <div class="menu-section">
1072
  <div class="menu-title">DOCUMENTS</div>
1073
- <button class="menu-btn" id="resumerButton">RESUMER</button>
1074
  <button class="menu-btn" id="traductionbutton">TRANSLATE</button>
1075
- <button class="menu-btn" id="qesdocButton">QUESTION</button>
1076
- <button class="menu-btn" id="visualisationButton">VISUALISATION</button>
1077
  </div>
1078
  </div>
1079
 
1080
  <div class="main-content-area">
1081
  <div class="document-container">
1082
- <h1 class="document-main-title">Opérations sur images</h1>
1083
- <h2 class="document-subtitle">QUESTION IMAGES 🖼️❓</h2>
1084
 
1085
  <div class="upload-container">
1086
  <div class="file-drop-zone" id="fileDropZone">
1087
  <label for="fileInput" class="file-upload-label">
1088
  <img src="up.png" id="uploadIcon" class="upload-icon" alt="Upload">
1089
- <span class="drop-text" id="dropText">Déposez votre image ici ou cliquez pour parcourir</span>
1090
  </label>
1091
  <input type="file" id="imageInput" class="file-input" accept=".jpg,.jpeg,.png,.gif,.bmp,.webp" hidden>
1092
  </div>
@@ -1094,15 +1092,15 @@ interpretButton.addEventListener('click', async function () {
1094
 
1095
  <div class="question-container">
1096
  <div class="question">
1097
- <input type="text" id="questionInput" placeholder="Tapez votre question ici...">
1098
  </div>
1099
- <button class="question-btn" id="sendImageQuestionBtn">Envoyer</button>
1100
  </div>
1101
  </div>
1102
 
1103
  <div id="imageAnswer" class="results-container">
1104
  <div class="results-placeholder">
1105
- <p class="placeholder-text">Le résultat apparaîtra ici...</p>
1106
  </div>
1107
  </div>
1108
  </div>
@@ -1154,7 +1152,7 @@ sendBtn.addEventListener("click", async function () {
1154
  const question = questionInput.value.trim();
1155
 
1156
  if (!file || !question) {
1157
- resultContainer.innerHTML = "<p class='placeholder-text'>⚠️ Veuillez sélectionner une image et poser une question.</p>";
1158
  return;
1159
  }
1160
 
@@ -1163,7 +1161,7 @@ sendBtn.addEventListener("click", async function () {
1163
  formData.append("question", question);
1164
 
1165
  // Afficher le message de chargement
1166
- resultContainer.innerHTML = `<p class="placeholder-text" style="text-align: center; color: black; font-weight: bold;">⏳ En attente de la réponse...</p>`;
1167
 
1168
  try {
1169
  const response = await fetch("/image-qa/", {
@@ -1176,7 +1174,7 @@ sendBtn.addEventListener("click", async function () {
1176
 
1177
  resultContainer.innerHTML = `
1178
 
1179
- <h3 style="text-align: center; font-size: 1.5rem; font-weight: bold; color: black">🧠 Réponse générée :</h3>
1180
  <br>
1181
  <p style="text-align: center; font-size: 1.2rem; font-weight: bold; color: black;">${data.answer}</p>
1182
 
@@ -1188,6 +1186,4 @@ sendBtn.addEventListener("click", async function () {
1188
  resultContainer.innerHTML = `<p class="placeholder-text">Erreur lors de l'envoi : ${error.message}</p>`;
1189
  }
1190
  });
1191
- }
1192
-
1193
-
 
18
  <div class="logo-bottom">AI</div>
19
  </div>
20
  <div class="menu-section">
21
+ <button class="menu-btn" id="traductionbutton">TRANSLATE</button>
22
+ <button class="menu-btn" id="qesdocButton">DOC-QUESTIONS</button>
23
+ <button class="menu-btn" id="visualisationButton">VISUALIZATION</button>
24
  </div>
25
  <div class="menu-section">
26
  <div class="menu-title">IMAGES</div>
27
+ <button class="menu-btn" id="interpretationButton">INTERPRETATION</button>
28
+ <button class="menu-btn" id="qesimgButton">IMAGES-QUESTIONS</button>
29
  </div>
30
  </div>
31
  <div class="main-content-area">
32
  <div class="document-container">
33
+ <h1 class="document-main-title">Documents Operations</h1>
34
+ <h2 class="document-subtitle">SUMMARIZE 📋</h2>
35
  <div class="upload-container">
36
  <div class="file-drop-zone" id="fileDropZone">
37
  <label for="fileInput" class="file-upload-label">
38
  <img src="up.png" id="uploadIcon" class="upload-icon" alt="Upload">
39
+ <span class="drop-text" id="dropText">Drop your file here or click to browse</span>
40
  </label>
41
  <input type="file" id="fileInput" class="file-input" accept=".doc,.docx,.xls,.xlsx,.pdf,.ppt,.pptx" hidden>
42
  </div>
43
+ <button class="summary-action-btn">SUMMARIZE</button>
44
  </div>
45
  <div class="results-container">
46
  <div class="results-placeholder">
47
  <div id="scrollableResult" class="scrollable-text">
48
  <p id="documentResult" class="placeholder-text" data-summary-text="">
49
+ The result will appear here...
50
  </p>
51
 
52
 
 
53
  <!-- Boutons de téléchargement visibles en bas -->
54
  <div id="downloadSection" style="display: none; margin-top: 20px;">
55
+ <h3 style="color: black; margin-bottom: 10px;">Download the summary</h3>
56
  <div style="display: flex; gap: 10px; flex-wrap: wrap; justify-content: center;">
57
  <button id="downloadPdf" class="download-btn">PDF</button>
58
  <button id="downloadWord" class="download-btn">Word</button>
59
  <button id="downloadPpt" class="download-btn">PowerPoint</button>
60
+ <button id="downloadTxt" class="download-btn">Text</button>
61
  </div>
62
  </div>
63
  </div>
64
  </div>
65
  </div>
 
66
  </div>
67
  </div>
68
  `;
 
81
  let resultElement = document.getElementById("documentResult");
82
 
83
  if (fileInput.files.length === 0) {
84
+ resultElement.innerText = "⚠️ No file selected !";
85
  return;
86
  }
87
 
88
+ resultElement.innerText = "Loading the summary... 🕐";
89
 
90
  let formData = new FormData();
91
  formData.append("file", fileInput.files[0]);
 
111
 
112
  if (data.summary) {
113
  resultElement.innerHTML = `
114
+ <h3 class="centered-title">📝 Summary generated :</h3>
115
  <br>
116
  <p>${data.summary}</p>
117
  `;
118
  document.getElementById("documentResult").dataset.summaryText = data.summary;
119
  document.getElementById("downloadSection").style.display = "block";
120
  } else {
121
+ resultElement.innerText = "❌ Summary not available.";
122
  }
123
  } catch (error) {
124
  console.error("❌ Erreur : ", error);
 
222
  <div class="logo-bottom">AI</div>
223
  </div>
224
  <div class="menu-section">
225
+ <button class="menu-btn" id="resumerButton">SUMMARIZE</button>
226
+ <button class="menu-btn" id="qesdocButton">DOC-QUESTIONS</button>
227
+ <button class="menu-btn" id="visualisationButton">VISUALIZATION</button>
228
  </div>
229
  <div class="menu-section">
230
  <div class="menu-title">IMAGES</div>
231
+ <button class="menu-btn" id="interpretationButton">INTERPRETATION</button>
232
+ <button class="menu-btn" id="qesimgButton">IMAGES-QUESTIONS</button>
233
  </div>
234
  </div>
235
  <div class="main-content-area">
236
  <div class="document-container">
237
+ <h1 class="document-main-title">Documents Operations</h1>
238
  <h2 class="document-subtitle">TRANSLATE</h2>
239
  <div class="upload-container">
240
  <div class="file-drop-zone" id="fileDropZone">
241
  <label for="translateFile" class="file-upload-label">
242
  <img src="up.png" id="uploadIcon" class="upload-icon" alt="Upload">
243
+ <span class="drop-text" id="dropText">Drop your file here or click to browse</span>
244
  </label>
245
  <input type="file" id="translateFile" class="file-input" accept=".doc,.docx,.xls,.xlsx,.pdf,.ppt,.pptx" hidden>
246
  </div>
 
354
  </div>
355
  <div class="results-container">
356
  <div class="results-placeholder">
357
+ <p class="placeholder-text" id="translateResult">The result will appear here...</p>
358
  <div id="downloadSection" style="display: none; margin-top: 20px;">
359
+ <h3 style="color: white; margin-bottom: 10px;">Download the translation</h3>
360
  <div style="display: flex; gap: 10px;">
361
  <button id="downloadPdf" class="download-btn">PDF</button>
362
  <button id="downloadWord" class="download-btn">Word</button>
363
  <button id="downloadPpt" class="download-btn">PowerPoint</button>
364
+ <button id="downloadTxt" class="download-btn">Text</button>
365
  </div>
366
  </div>
367
  </div>
 
442
  const resultElement = document.getElementById("translateResult");
443
 
444
  if (!fileInput.files[0]) {
445
+ resultElement.innerText = "⚠️No file selected";
446
  return;
447
  }
448
 
449
  if (!targetLang) {
450
+ resultElement.innerText = "⚠️No language selected";
451
  return;
452
  }
453
 
 
456
  formData.append("target_lang", targetLang);
457
 
458
  try {
459
+ resultElement.innerText = "Translation in progress...🕐";
460
  const response = await fetch("/translate/", {
461
  method: "POST",
462
  body: formData,
 
470
  const data = await response.json();
471
 
472
  if (data.translated_text) {
473
+ resultElement.innerText = "📝 Translation : " + data.translated_text;
474
  // Stocker le texte traduit pour le téléchargement
475
  resultElement.dataset.translatedText = data.translated_text;
476
  // Afficher les options de téléchargement
477
  document.getElementById("downloadSection").style.display = "block";
478
  } else {
479
+ resultElement.innerText = "❌ Translation not available.";
480
  }
481
  } catch (error) {
482
  console.error("Erreur:", error);
 
559
  </div>
560
 
561
  <div class="menu-section">
562
+ <button class="menu-btn" id="resumerButton">SUMMARIZE</button>
563
  <button class="menu-btn" id="traductionbutton">TRANSLATE</button>
564
+ <button class="menu-btn" id="visualisationButton">VISUALIZATION</button>
565
  </div>
566
 
567
  <div class="menu-section">
568
  <div class="menu-title">IMAGES</div>
569
+ <button class="menu-btn" id="interpretationButton">INTERPRETATION</button>
570
+ <button class="menu-btn" id="qesimgButton">IMAGES-QUESTIONS</button>
571
  </div>
572
  </div>
573
 
574
  <div class="main-content-area">
575
  <div class="document-container">
576
+ <h1 class="document-main-title">Documents Operations</h1>
577
+ <h2 class="document-subtitle">DOCUMENTS QUESTIONS 📄❓</h2>
578
 
579
  <div class="upload-container">
580
  <div class="file-drop-zone" id="fileDropZone">
581
  <label for="fileInput" class="file-upload-label">
582
  <img src="up.png" id="uploadIcon" class="upload-icon" alt="Upload">
583
+ <span class="drop-text" id="dropText">Drop your file here or click to browse</span>
584
  </label>
585
  <input type="file" id="fileInput" class="file-input" accept=".doc,.docx,.xls,.xlsx,.pdf,.ppt,.pptx" hidden>
586
  </div>
587
 
588
  <div class="question-container">
589
  <div class="question">
590
+ <input type="text" id="questionInput" placeholder="Enter your question here...">
591
  </div>
592
+ <button class="question-btn" id="askDocBtn">Send</button>
593
  </div>
594
  </div>
595
 
596
  <div class="results-container">
597
  <div class="results-placeholder">
598
+ <p id="documentAnswer" class="placeholder-text">The result will appear here...</p>
599
  </div>
600
  </div>
601
  </div>
 
645
  const answerDiv = document.getElementById('documentAnswer');
646
 
647
  if (!file || !question) {
648
+ answerDiv.innerHTML = "⚠️ No question or file selected.";
649
  return;
650
  }
651
 
 
654
  formData.append("question", question);
655
 
656
  // Afficher "⏳ Analyse du document en cours..." pendant le traitement
657
+ answerDiv.innerHTML = "⏳Document analysis in progress...";
658
 
659
  try {
660
  const response = await fetch("/doc-qa/", {
 
666
  if (data.answer) {
667
 
668
  answerDiv.innerHTML = `
669
+ <h3 class="centered-title">✅ The result :</h3>
670
  <br>
671
  <p>${data.answer}</p>
672
  `;
 
695
  <div class="logo-bottom">AI</div>
696
  </div>
697
  <div class="menu-section">
698
+ <button class="menu-btn" id="resumerButton">SUMMARIZE</button>
699
  <button class="menu-btn" id="traductionbutton">TRANSLATE</button>
700
+ <button class="menu-btn" id="qesdocButton">DOC-QUESTIONS</button>
701
  </div>
702
  <div class="menu-section">
703
  <div class="menu-title">IMAGES</div>
704
+ <button class="menu-btn" id="interpretationButton">INTERPRETATION</button>
705
+ <button class="menu-btn" id="qesimgButton">IMAGES-QUESTIONS</button>
706
  </div>
707
  </div>
708
  <div class="main-content-area">
709
  <div class="document-container">
710
+ <h1 class="document-main-title">Documents Operations</h1>
711
+ <h2 class="document-subtitle">VISUALIZATION</h2>
712
  <div class="upload-container">
713
  <div class="file-drop-zone" id="fileDropZone">
714
  <label for="graphFileInput" class="file-upload-label">
715
  <img src="up.png" id="uploadIcon" class="upload-icon" alt="Upload">
716
+ <span class="drop-text" id="dropText">Drop your file here or click to browse</span>
717
  </label>
718
  <input type="file" id="graphFileInput" class="file-input"
719
  accept=".xls,.xlsx" hidden>
 
722
  <div class="action-container">
723
  <select id="graphTypeSelect" class="language-dropdown">
724
  <option value="">Select type</option>
725
+ <option value="histplot">Histogram</option>
726
+ <option value="scatterplot">Scatter plot</option>
727
+ <option value="lineplot">line plot</option>
728
+ <option value="barplot">bar plot</option>
729
+ <option value="boxplot">box plot</option>
730
  </select>
731
+ <button type="button" id="generateGraphBtn" class="graph-generate-btn">Generate</button>
732
  </div>
733
  </div>
734
  <div class="graph-results-container">
735
  <div class="graph-results-placeholder">
736
  <img id="graphResultImage" class="graph-result-img">
737
+ <p class="placeholder-text" id="graphPlaceholderText">The result will appear here...</p>
738
  </div>
739
  <div id="downloadSection" style="display: none; margin-top: 20px; text-align: center;">
740
+ <h3 style="color: white; margin-bottom: 10px;">Download the graph</h3>
741
  <div style="display: flex; justify-content: center; gap: 10px;">
742
  <button id="downloadPng" class="download-btn">PNG</button>
743
  <button id="downloadJpg" class="download-btn">JPG</button>
 
805
 
806
  // Validation
807
  if (!fileInput.files[0]) {
808
+ placeholderText.textContent = "⚠️No file selected";
809
  downloadSection.style.display = "none";
810
  return;
811
  }
812
 
813
  if (!graphTypeSelect.value) {
814
+ placeholderText.textContent = "⚠️No graph type selected";
815
  downloadSection.style.display = "none";
816
  return;
817
  }
 
819
  // Préparation de l'interface
820
  resultImage.style.display = "none";
821
  downloadSection.style.display = "none";
822
+ placeholderText.textContent = "Graph generation in progress...🕐";
823
 
824
  try {
825
  // Envoi des données
 
931
  </div>
932
 
933
  <div class="menu-section">
934
+ <button class="menu-btn" id="qesimgButton">IMAGES-QUESTIONS</button>
935
  </div>
936
 
937
  <div class="menu-section">
938
  <div class="menu-title">DOCUMENTS</div>
939
+ <button class="menu-btn" id="resumerButton">SUMMARIZE</button>
940
  <button class="menu-btn" id="traductionbutton">TRANSLATE</button>
941
+ <button class="menu-btn" id="qesdocButton">DOC-QUESTIONS</button>
942
+ <button class="menu-btn" id="visualisationButton">VISUALIZATION</button>
943
  </div>
944
  </div>
945
 
946
  <div class="main-content-area">
947
  <div class="document-container">
948
+ <h1 class="document-main-title">Images Operations</h1>
949
+ <h2 class="document-subtitle">IMAGES INTERPRETATION 🏞️🤖</h2>
950
 
951
  <div class="upload-container">
952
  <div class="file-drop-zone" id="fileDropZone">
953
  <label for="fileInput" class="file-upload-label">
954
  <img src="up.png" id="uploadIcon" class="upload-icon" alt="Upload">
955
+ <span class="drop-text" id="dropText">Drop your image here or click to browse</span>
956
  </label>
957
  <input type="file" id="fileInput" class="file-input" accept=".jpg,.jpeg,.png,.gif,.bmp,.webp" hidden>
958
  </div>
 
961
 
962
  <div class="results-container">
963
  <div class="results-placeholder" id="imageCaptionResult">
964
+ <p class="placeholder-text">The result will appear here...</p>
965
  </div>
966
  </div>
967
  </div>
 
1012
 
1013
 
1014
  if (!file) {
1015
+ resultContainer.innerHTML = `<p class="placeholder-text">⚠️ No image selected.</p>`;
1016
  return;
1017
  }
1018
 
 
1020
  formData.append("file", file);
1021
 
1022
  // Afficher le message de chargement pendant l'analyse
1023
+ resultContainer.innerHTML = `<p class="placeholder-text">⏳ Image analysis in progress...</p>`;
1024
 
1025
  try {
1026
  const response = await fetch("/image-caption/", {
 
1033
  if (data.caption) {
1034
 
1035
  resultContainer.innerHTML = `
1036
+ <h3 style="text-align: center; font-size: 1.5rem; font-weight: bold; color: black;">📸 Generated caption :</h3>
1037
  <br>
1038
  <p style="text-align: center; font-size: 1.2rem; font-weight: bold; color: black;">${data.caption}</p>
1039
  `;
 
1063
  </div>
1064
 
1065
  <div class="menu-section">
1066
+ <button class="menu-btn" id="interpretationButton">INTERPRETATION</button>
1067
  </div>
1068
 
1069
  <div class="menu-section">
1070
  <div class="menu-title">DOCUMENTS</div>
1071
+ <button class="menu-btn" id="resumerButton">SUMMARIZE</button>
1072
  <button class="menu-btn" id="traductionbutton">TRANSLATE</button>
1073
+ <button class="menu-btn" id="qesdocButton">DOC-QUESTIONS</button>
1074
+ <button class="menu-btn" id="visualisationButton">VISUALIZATION</button>
1075
  </div>
1076
  </div>
1077
 
1078
  <div class="main-content-area">
1079
  <div class="document-container">
1080
+ <h1 class="document-main-title">Images Operations</h1>
1081
+ <h2 class="document-subtitle">IMAGES QUESTIONS 🖼️❓</h2>
1082
 
1083
  <div class="upload-container">
1084
  <div class="file-drop-zone" id="fileDropZone">
1085
  <label for="fileInput" class="file-upload-label">
1086
  <img src="up.png" id="uploadIcon" class="upload-icon" alt="Upload">
1087
+ <span class="drop-text" id="dropText">Drop your image here or click to browse</span>
1088
  </label>
1089
  <input type="file" id="imageInput" class="file-input" accept=".jpg,.jpeg,.png,.gif,.bmp,.webp" hidden>
1090
  </div>
 
1092
 
1093
  <div class="question-container">
1094
  <div class="question">
1095
+ <input type="text" id="questionInput" placeholder="Enter your question here...">
1096
  </div>
1097
+ <button class="question-btn" id="sendImageQuestionBtn">Send</button>
1098
  </div>
1099
  </div>
1100
 
1101
  <div id="imageAnswer" class="results-container">
1102
  <div class="results-placeholder">
1103
+ <p class="placeholder-text">The result will appear here...</p>
1104
  </div>
1105
  </div>
1106
  </div>
 
1152
  const question = questionInput.value.trim();
1153
 
1154
  if (!file || !question) {
1155
+ resultContainer.innerHTML = "<p class='placeholder-text'>⚠️ No question or image selected.</p>";
1156
  return;
1157
  }
1158
 
 
1161
  formData.append("question", question);
1162
 
1163
  // Afficher le message de chargement
1164
+ resultContainer.innerHTML = `<p class="placeholder-text" style="text-align: center; color: black; font-weight: bold;">⏳ Waiting for the answer...</p>`;
1165
 
1166
  try {
1167
  const response = await fetch("/image-qa/", {
 
1174
 
1175
  resultContainer.innerHTML = `
1176
 
1177
+ <h3 style="text-align: center; font-size: 1.5rem; font-weight: bold; color: black">🧠 Generated answer :</h3>
1178
  <br>
1179
  <p style="text-align: center; font-size: 1.2rem; font-weight: bold; color: black;">${data.answer}</p>
1180
 
 
1186
  resultContainer.innerHTML = `<p class="placeholder-text">Erreur lors de l'envoi : ${error.message}</p>`;
1187
  }
1188
  });
1189
+ }