Spaces:
Running
Running
APDATE
Browse files- 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">
|
22 |
-
<button class="menu-btn" id="qesdocButton">
|
23 |
-
<button class="menu-btn" id="visualisationButton">
|
24 |
</div>
|
25 |
<div class="menu-section">
|
26 |
<div class="menu-title">IMAGES</div>
|
27 |
-
<button class="menu-btn" id="interpretationButton">
|
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">
|
34 |
-
<h2 class="document-subtitle">
|
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">
|
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">
|
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 |
-
|
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;">
|
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">
|
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 = "⚠️
|
87 |
return;
|
88 |
}
|
89 |
|
90 |
-
resultElement.innerText = "
|
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">📝
|
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 = "❌
|
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">
|
228 |
-
<button class="menu-btn" id="qesdocButton">
|
229 |
-
<button class="menu-btn" id="visualisationButton">
|
230 |
</div>
|
231 |
<div class="menu-section">
|
232 |
<div class="menu-title">IMAGES</div>
|
233 |
-
<button class="menu-btn" id="interpretationButton">
|
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">
|
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">
|
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">
|
360 |
<div id="downloadSection" style="display: none; margin-top: 20px;">
|
361 |
-
<h3 style="color: white; margin-bottom: 10px;">
|
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">
|
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 = "⚠️
|
448 |
return;
|
449 |
}
|
450 |
|
451 |
if (!targetLang) {
|
452 |
-
resultElement.innerText = "⚠️
|
453 |
return;
|
454 |
}
|
455 |
|
@@ -458,7 +456,7 @@ function loadResumerPage() {
|
|
458 |
formData.append("target_lang", targetLang);
|
459 |
|
460 |
try {
|
461 |
-
resultElement.innerText = "
|
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 = "📝
|
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 = "❌
|
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">
|
565 |
<button class="menu-btn" id="traductionbutton">TRANSLATE</button>
|
566 |
-
<button class="menu-btn" id="visualisationButton">
|
567 |
</div>
|
568 |
|
569 |
<div class="menu-section">
|
570 |
<div class="menu-title">IMAGES</div>
|
571 |
-
<button class="menu-btn" id="interpretationButton">
|
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">
|
579 |
-
<h2 class="document-subtitle">
|
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">
|
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="
|
593 |
</div>
|
594 |
-
<button class="question-btn" id="askDocBtn">
|
595 |
</div>
|
596 |
</div>
|
597 |
|
598 |
<div class="results-container">
|
599 |
<div class="results-placeholder">
|
600 |
-
<p id="documentAnswer" class="placeholder-text">
|
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 = "⚠️
|
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 = "⏳
|
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">✅
|
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">
|
701 |
<button class="menu-btn" id="traductionbutton">TRANSLATE</button>
|
702 |
-
<button class="menu-btn" id="qesdocButton">
|
703 |
</div>
|
704 |
<div class="menu-section">
|
705 |
<div class="menu-title">IMAGES</div>
|
706 |
-
<button class="menu-btn" id="interpretationButton">
|
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">
|
713 |
-
<h2 class="document-subtitle">
|
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">
|
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">
|
728 |
-
<option value="scatterplot">
|
729 |
-
<option value="lineplot">
|
730 |
-
<option value="barplot">
|
731 |
-
<option value="boxplot">
|
732 |
</select>
|
733 |
-
<button type="button" id="generateGraphBtn" class="graph-generate-btn">
|
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">
|
740 |
</div>
|
741 |
<div id="downloadSection" style="display: none; margin-top: 20px; text-align: center;">
|
742 |
-
<h3 style="color: white; margin-bottom: 10px;">
|
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 = "⚠️
|
811 |
downloadSection.style.display = "none";
|
812 |
return;
|
813 |
}
|
814 |
|
815 |
if (!graphTypeSelect.value) {
|
816 |
-
placeholderText.textContent = "⚠️
|
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 = "
|
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">
|
942 |
<button class="menu-btn" id="traductionbutton">TRANSLATE</button>
|
943 |
-
<button class="menu-btn" id="qesdocButton">
|
944 |
-
<button class="menu-btn" id="visualisationButton">
|
945 |
</div>
|
946 |
</div>
|
947 |
|
948 |
<div class="main-content-area">
|
949 |
<div class="document-container">
|
950 |
-
<h1 class="document-main-title">
|
951 |
-
<h2 class="document-subtitle">
|
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">
|
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">
|
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">⚠️
|
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">⏳
|
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;">📸
|
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">
|
1069 |
</div>
|
1070 |
|
1071 |
<div class="menu-section">
|
1072 |
<div class="menu-title">DOCUMENTS</div>
|
1073 |
-
<button class="menu-btn" id="resumerButton">
|
1074 |
<button class="menu-btn" id="traductionbutton">TRANSLATE</button>
|
1075 |
-
<button class="menu-btn" id="qesdocButton">
|
1076 |
-
<button class="menu-btn" id="visualisationButton">
|
1077 |
</div>
|
1078 |
</div>
|
1079 |
|
1080 |
<div class="main-content-area">
|
1081 |
<div class="document-container">
|
1082 |
-
<h1 class="document-main-title">
|
1083 |
-
<h2 class="document-subtitle">
|
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">
|
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="
|
1098 |
</div>
|
1099 |
-
<button class="question-btn" id="sendImageQuestionBtn">
|
1100 |
</div>
|
1101 |
</div>
|
1102 |
|
1103 |
<div id="imageAnswer" class="results-container">
|
1104 |
<div class="results-placeholder">
|
1105 |
-
<p class="placeholder-text">
|
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'>⚠️
|
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;">⏳
|
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">🧠
|
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 |
+
}
|
|
|
|