document.getElementById('resumerButton').addEventListener('click', loadResumerPage);
document.getElementById('traductionbutton').addEventListener('click', loadTraductionPage);
document.getElementById('qesdocButton').addEventListener('click', loadDocPage);
document.getElementById('visualisationButton').addEventListener('click', loadVisualisationPage);
document.getElementById('interpretationButton').addEventListener('click', loadInterpretationPage);
document.getElementById('qesimgButton').addEventListener('click', loadImagePage);
//quand on clique sur le boutton resumer ------------------------
function loadResumerPage() {
document.body.style.setProperty('--background-image', "url('resumer2.webp')");
let appContainer = document.createElement("div");
appContainer.classList.add("app-container");
appContainer.innerHTML = `
Documents Operations
SUMMARIZE 📋
`;
document.body.innerHTML = "";
document.body.appendChild(appContainer);
document.querySelector('.summary-action-btn').addEventListener('click', async () => {
await uploadDocument();
});
async function uploadDocument() {
let fileInput = document.getElementById("fileInput");
let resultElement = document.getElementById("documentResult");
if (fileInput.files.length === 0) {
resultElement.innerText = "⚠️ No file selected !";
return;
}
resultElement.innerText = "Loading the summary... 🕐";
let formData = new FormData();
formData.append("file", fileInput.files[0]);
try {
let response = await fetch("https://aiwebdev-smartdocai.hf.space/summarize/", {
method: "POST",
body: formData,
headers: { "Accept": "application/json" }
});
if (!response.ok) {
throw new Error("Erreur de requête !");
}
let data = await response.json();
console.log("📤 Réponse du serveur :", data);
if (data.message && data.message.includes("Modèle en cours de chargement")) {
resultElement.innerText = "Le résumé est en cours de génération. Veuillez patienter... 🕐";
return;
}
if (data.summary) {
resultElement.innerHTML =
📝 Summary generated :
${data.summary}
;
document.getElementById("documentResult").dataset.summaryText = data.summary;
document.getElementById("downloadSection").style.display = "block";
}
else {
resultElement.innerText = "❌ Summary not available.";
}
} catch (error) {
console.error("❌ Erreur : ", error);
resultElement.innerText = "Erreur lors de la demande !";
}
}
document.addEventListener("click", (e) => {
const text = document.getElementById("documentResult").dataset.summaryText;
if (!text) return;
if (e.target.id === "downloadPdf") {
const { jsPDF } = window.jspdf;
const doc = new jsPDF();
let lines = doc.splitTextToSize(text, 180);
doc.text(lines, 10, 10);
doc.save('resume.pdf');
}
if (e.target.id === "downloadWord") {
const { Document, Paragraph, TextRun, Packer } = window.docx;
const doc = new Document({
sections: [{
children: [new Paragraph({ children: [new TextRun(text)] })]
}]
});
Packer.toBlob(doc).then(blob => {
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = 'resume.docx';
a.click();
URL.revokeObjectURL(url);
});
}
if (e.target.id === "downloadPpt") {
const pptx = new window.PptxGenJS();
const slide = pptx.addSlide();
slide.addText(text, { x: 1, y: 1, w: 8, h: 4 });
pptx.writeFile({ fileName: 'resume.pptx' });
}
if (e.target.id === "downloadTxt") {
const blob = new Blob([text], { type: 'text/plain' });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = 'resume.txt';
a.click();
URL.revokeObjectURL(url);
}
});
document.getElementById('traductionbutton').addEventListener('click', loadTraductionPage);
document.getElementById('qesdocButton').addEventListener('click', loadDocPage);
document.getElementById('visualisationButton').addEventListener('click', loadVisualisationPage);
document.getElementById('interpretationButton').addEventListener('click', loadInterpretationPage);
document.getElementById('qesimgButton').addEventListener('click', loadImagePage);
const fileInput = document.getElementById('fileInput');
const dropText = document.getElementById('dropText');
const uploadIcon = document.getElementById('uploadIcon');
dropText.addEventListener('click', function(event) {
event.preventDefault();
event.stopPropagation();
fileInput.click();
});
uploadIcon.addEventListener('click', function(event) {
event.preventDefault();
event.stopPropagation();
fileInput.click();
});
fileInput.addEventListener('change', function(event) {
let file = event.target.files[0];
if (file) {
dropText.textContent = file.name;
uploadIcon.style.display = "none";
}
});
}
//Quand on clique sur le boutton traduction ---------------
ici aussi je veuxque leffet vocale lit le resultat de traduction : resultElement.innerText = "📝 Traduction :\n " + data.translated_text;
function loadTraductionPage() {
document.body.style.setProperty('--background-image', "url('traduction.webp')");
let appContainer = document.createElement("div");
appContainer.classList.add("app-container");
appContainer.innerHTML = `
Documents Operations
TRANSLATE 🌍
Select language
Afrikaans
Amharic
Arabic
Asturian
Azerbaijani
Bashkir
Belarusian
Bulgarian
Bengali
Breton
Bosnian
Catalan; Valencian
Cebuano
Czech
Welsh
Danish
German
Greek
English
Spanish
Estonian
Persian
Fulah
Finnish
French
Western Frisian
Irish
Gaelic; Scottish Gaelic
Galician
Gujarati
Hausa
Hebrew
Hindi
Croatian
Haitian; Haitian Creole
Hungarian
Armenian
Indonesian
Igbo
Iloko
Icelandic
Italian
Japanese
Javanese
Georgian
Kazakh
Central Khmer
Kannada
Korean
Luxembourgish
Ganda
Lingala
Lao
Lithuanian
Latvian
Malagasy
Macedonian
Malayalam
Mongolian
Marathi
Malay
Burmese
Nepali
Dutch; Flemish
Norwegian
Northern Sotho
Occitan (post 1500)
Oriya
Panjabi; Punjabi
Polish
Pushto; Pashto
Portuguese
Romanian; Moldavian
Russian
Sindhi
Sinhala; Sinhalese
Slovak
Slovenian
Somali
Albanian
Serbian
Swati
Sundanese
Swedish
Swahili
Tamil
Thai
Tagalog
Tswana
Turkish
Ukrainian
Urdu
Uzbek
Vietnamese
Wolof
Xhosa
Yiddish
Yoruba
Chinese
Zulu
Translate
The result will appear here...
Download the translation
PDF
Word
PowerPoint
Texte
`;
document.body.innerHTML = "";
document.body.appendChild(appContainer);
loadExternalLibs();
setupEventListeners();
function loadExternalLibs() {
if (!window.jspdf) {
const script = document.createElement('script');
script.src = 'https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js';
document.head.appendChild(script);
}
if (!window.docx) {
const script = document.createElement('script');
script.src = 'https://cdnjs.cloudflare.com/ajax/libs/docx/7.8.2/docx.min.js';
document.head.appendChild(script);
}
if (!window.PptxGenJS) {
const script = document.createElement('script');
script.src = 'https://cdnjs.cloudflare.com/ajax/libs/PptxGenJS/3.11.0/pptxgen.min.js';
document.head.appendChild(script);
}
}
function setupEventListeners() {
document.getElementById('resumerButton').addEventListener('click', loadResumerPage);
document.getElementById('qesdocButton').addEventListener('click', loadDocPage);
document.getElementById('visualisationButton').addEventListener('click', loadVisualisationPage);
document.getElementById('interpretationButton').addEventListener('click', loadInterpretationPage);
document.getElementById('qesimgButton').addEventListener('click', loadImagePage);
const fileInput = document.getElementById('translateFile');
const dropText = document.getElementById('dropText');
const uploadIcon = document.getElementById('uploadIcon');
dropText.addEventListener('click', (e) => {
e.preventDefault();
fileInput.click();
});
uploadIcon.addEventListener('click', (e) => {
e.preventDefault();
fileInput.click();
});
fileInput.addEventListener('change', (e) => {
if (e.target.files[0]) {
dropText.textContent = e.target.files[0].name;
uploadIcon.style.display = "none";
}
});
document.getElementById('translateButton').addEventListener('click', uploadForTranslation);
document.getElementById('downloadPdf').addEventListener('click', downloadAsPdf);
document.getElementById('downloadWord').addEventListener('click', downloadAsWord);
document.getElementById('downloadPpt').addEventListener('click', downloadAsPowerPoint);
document.getElementById('downloadTxt').addEventListener('click', downloadAsText);
}
async function uploadForTranslation() {
const fileInput = document.getElementById("translateFile");
const targetLang = document.getElementById("targetLanguageSelect").value;
const resultElement = document.getElementById("translateResult");
if (!fileInput.files[0]) {
resultElement.innerText = "No file selected";
return;
}
if (!targetLang) {
resultElement.innerText = "Please select a language";
return;
}
const formData = new FormData();
formData.append("file", fileInput.files[0]);
formData.append("target_lang", targetLang);
try {
resultElement.innerText = "Translation in progress...🕐";
const response = await fetch("https://aiwebdev-smartdocai.hf.space/translate/", {
method: "POST",
body: formData,
headers: { "Accept": "application/json" }
});
if (!response.ok) {
throw new Error("Erreur de requête: " + await response.text());
}
const data = await response.json();
if (data.translated_text) {
resultElement.innerText = "📝 Traduction :\n " + data.translated_text;
resultElement.dataset.translatedText = data.translated_text;
document.getElementById("downloadSection").style.display = "block";
} else {
resultElement.innerText = "❌ Translation not available.";
}
} catch (error) {
console.error("Erreur:", error);
resultElement.innerText = "Échec de la traduction: " + error.message;
}
}
function downloadAsPdf() {
const text = document.getElementById("translateResult").dataset.translatedText;
if (!text) return;
const { jsPDF } = window.jspdf;
const doc = new jsPDF();
doc.text(text, 10, 10);
doc.save('traduction.pdf');
}
async function downloadAsWord() {
const text = document.getElementById("translateResult").dataset.translatedText;
if (!text) return;
const { Document, Paragraph, TextRun, Packer } = window.docx;
const doc = new Document({
sections: [{
properties: {},
children: [
new Paragraph({
children: [
new TextRun(text)
]
})
]
}]
});
Packer.toBlob(doc).then(blob => {
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = 'traduction.docx';
a.click();
URL.revokeObjectURL(url);
});
}
function downloadAsPowerPoint() {
const text = document.getElementById("translateResult").dataset.translatedText;
if (!text) return;
const pptx = new window.PptxGenJS();
const slide = pptx.addSlide();
slide.addText(text, { x: 1, y: 1, w: 8, h: 4 });
pptx.writeFile({ fileName: 'traduction.pptx' });
}
function downloadAsText() {
const text = document.getElementById("translateResult").dataset.translatedText;
if (!text) return;
const blob = new Blob([text], { type: 'text/plain' });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = 'traduction.txt';
a.click();
URL.revokeObjectURL(url);
}
}
//Quand on clique sur le boutton QSTDOC---------------
function loadDocPage() {
document.body.style.setProperty('--background-image', "url('qstdoc2.webp')");
let appContainer = document.createElement("div");
appContainer.classList.add("app-container");
appContainer.innerHTML = `
Documents Operations
DOCUMENTS QUESTIONS 📄❓
The result will appear here...
`;
document.body.innerHTML = "";
document.body.appendChild(appContainer);
document.getElementById('resumerButton').addEventListener('click', loadResumerPage);
document.getElementById('traductionbutton').addEventListener('click', loadTraductionPage);
document.getElementById('visualisationButton').addEventListener('click', loadVisualisationPage);
document.getElementById('interpretationButton').addEventListener('click', loadInterpretationPage);
document.getElementById('qesimgButton').addEventListener('click', loadImagePage);
const fileInput = document.getElementById('fileInput');
const dropText = document.getElementById('dropText');
const uploadIcon = document.getElementById('uploadIcon');
+
dropText.addEventListener('click', function(event) {
event.preventDefault();
event.stopPropagation();
fileInput.click();
});
uploadIcon.addEventListener('click', function(event) {
event.preventDefault();
event.stopPropagation();
fileInput.click();
});
fileInput.addEventListener('change', function(event) {
let file = event.target.files[0];
if (file) {
dropText.textContent = file.name;
uploadIcon.style.display = "none";
}
});
const askBtn = document.getElementById('askDocBtn');
askBtn.addEventListener('click', async () => {
const file = fileInput.files[0];
const question = document.getElementById('questionInput').value;
const answerDiv = document.getElementById('documentAnswer');
if (!file || !question) {
answerDiv.innerHTML = "⚠️ No question or file selected.";
return;
}
const formData = new FormData();
formData.append("file", file);
formData.append("question", question);
answerDiv.innerHTML = "⏳Document analysis in progress...";
try {
const response = await fetch("/doc-qa/", {
method: "POST",
body: formData
});
const data = await response.json();
if (data.answer) {
answerDiv.innerHTML = `
✅ The result :
${data.answer}
`;
} else {
answerDiv.innerHTML = `❌ ${data.error || "Erreur inconnue"}`;
}
} catch (error) {
answerDiv.innerHTML = "❌ Erreur lors de l'envoi de la requête.";
}
});
}
//quand on clique sur visualisation ----------------------
function loadVisualisationPage() {
document.body.style.setProperty('--background-image', "url('visualisation.webp')");
const appContainer = document.createElement("div");
appContainer.className = "app-container";
appContainer.innerHTML = `
Documents Operations
VISUALIZATION 📊
Select type
Histogram
Point cloud
Curve
Bar chart
Boxplot
Generate
The result will appear here...
Download the graph
PNG
JPG
`;
document.body.innerHTML = "";
document.body.appendChild(appContainer);
const setupEventListeners = () => {
document.getElementById('resumerButton').addEventListener('click', loadResumerPage);
document.getElementById('traductionbutton').addEventListener('click', loadTraductionPage);
document.getElementById('qesdocButton').addEventListener('click', loadDocPage);
document.getElementById('interpretationButton').addEventListener('click', loadInterpretationPage);
document.getElementById('qesimgButton').addEventListener('click', loadImagePage);
const fileInput = document.getElementById('graphFileInput');
const dropText = document.getElementById('dropText');
const uploadIcon = document.getElementById('uploadIcon');
dropText.addEventListener('click', (e) => {
e.preventDefault();
fileInput.click();
});
uploadIcon.addEventListener('click', (e) => {
e.preventDefault();
fileInput.click();
});
fileInput.addEventListener('change', (e) => {
if (e.target.files[0]) {
dropText.textContent = e.target.files[0].name;
uploadIcon.style.display = "none";
document.getElementById("downloadSection").style.display = "none";
document.getElementById("graphResultImage").style.display = "none";
document.getElementById("graphPlaceholderText").textContent = "Ready to generate the chart";
}
});
document.getElementById('generateGraphBtn').addEventListener('click', generateGraph);
document.getElementById('downloadPng').addEventListener('click', () => downloadGraph('png'));
document.getElementById('downloadJpg').addEventListener('click', () => downloadGraph('jpg'));
};
const generateGraph = async () => {
const fileInput = document.getElementById('graphFileInput');
const graphTypeSelect = document.getElementById('graphTypeSelect');
const resultImage = document.getElementById('graphResultImage');
const placeholderText = document.getElementById('graphPlaceholderText');
const downloadSection = document.getElementById("downloadSection");
if (!fileInput.files[0]) {
placeholderText.textContent = "⚠️No file selected";
downloadSection.style.display = "none";
return;
}
if (!graphTypeSelect.value) {
placeholderText.textContent = "⚠️No a chart type selected";
downloadSection.style.display = "none";
return;
}
resultImage.style.display = "none";
downloadSection.style.display = "none";
placeholderText.textContent = "⏳ Graph generation in progress...";
try {
const formData = new FormData();
formData.append("file", fileInput.files[0]);
formData.append("query", graphTypeSelect.value);
const response = await fetch("/generate_viz/", {
method: "POST",
body: formData,
headers: { 'Accept': 'application/json' }
});
if (!response.ok) {
throw new Error(`Erreur ${response.status}: ${await response.text()}`);
}
const result = await response.json();
if (result.error) {
throw new Error(result.error);
}
const imageUrl = `data:image/png;base64,${result.image_base64}`;
resultImage.onload = () => {
document.getElementById("downloadSection").style.display = "block";
placeholderText.textContent = "";
};
resultImage.src = imageUrl;
resultImage.style.display = "block";
} catch (error) {
console.error("Erreur:", error);
placeholderText.textContent = `Erreur: ${error.message}`;
resultImage.style.display = "none";
downloadSection.style.display = "none";
}
};
const downloadGraph = (format) => {
const resultImage = document.getElementById('graphResultImage');
if (!resultImage.src || resultImage.style.display === "none") {
alert("Please generate a shart first");
return;
}
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
canvas.width = resultImage.naturalWidth;
canvas.height = resultImage.naturalHeight;
ctx.drawImage(resultImage, 0, 0);
let mimeType, extension;
switch(format) {
case 'jpg':
mimeType = 'image/jpeg';
extension = 'jpg';
break;
default:
mimeType = 'image/png';
extension = 'png';
}
canvas.toBlob((blob) => {
downloadFile(blob, `graphique.${extension}`);
}, mimeType, format === 'jpg' ? 0.92 : 1);
};
const downloadFile = (blob, filename) => {
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = filename;
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
setTimeout(() => URL.revokeObjectURL(url), 100);
};
setupEventListeners();
}
//quand on clique sur interpretation ---------------------
function loadInterpretationPage() {
document.body.style.setProperty('--background-image', "url('interpreter.webp')");
let appContainer = document.createElement("div");
appContainer.classList.add("app-container");
appContainer.innerHTML = `
Images Operations
IMAGES INTERPRETATION 🏞️🤖
The result will appear here...
`;
document.body.innerHTML = "";
document.body.appendChild(appContainer);
document.getElementById('resumerButton').addEventListener('click', loadResumerPage);
document.getElementById('traductionbutton').addEventListener('click', loadTraductionPage);
document.getElementById('qesdocButton').addEventListener('click', loadDocPage);
document.getElementById('visualisationButton').addEventListener('click', loadVisualisationPage);
document.getElementById('qesimgButton').addEventListener('click', loadImagePage);
const interpretButton = document.getElementById('interpretButton');
const resultContainer = document.getElementById('imageCaptionResult');
const fileInput = document.getElementById('fileInput');
const dropText = document.getElementById('dropText');
const uploadIcon = document.getElementById('uploadIcon');
+
dropText.addEventListener('click', function(event) {
event.preventDefault();
event.stopPropagation();
fileInput.click();
});
uploadIcon.addEventListener('click', function(event) {
event.preventDefault();
event.stopPropagation();
fileInput.click();
});
fileInput.addEventListener('change', function(event) {
let file = event.target.files[0];
if (file) {
dropText.textContent = file.name;
uploadIcon.style.display = "none";
}
});
interpretButton.addEventListener('click', async function () {
let file = fileInput.files[0];
if (!file) {
resultContainer.innerHTML = `⚠️ No image selected.
`;
return;
}
let formData = new FormData();
formData.append("file", file);
// Afficher le message de chargement pendant l'analyse
resultContainer.innerHTML = `⏳ Image analysis in progress...
`;
try {
const response = await fetch("/image-caption/", {
method: "POST",
body: formData,
});
const data = await response.json();
if (data.caption) {
resultContainer.innerHTML = `
📸 Generated caption :
${data.caption}
`;
} else if (data.error) {
resultContainer.innerHTML = `❌ Erreur : ${data.error}
`;
}
} catch (error) {
resultContainer.innerHTML = `❌ Erreur lors de l'envoi de l'image.
`;
}
});
}
//quand on clique sur quesion image ---------------
function loadImagePage() {
document.body.style.setProperty('--background-image', "url('qstimage.webp')");
let appContainer = document.createElement("div");
appContainer.classList.add("app-container");
appContainer.innerHTML = `
Images Operations
IMAGES QUESTIONS 🖼️❓
The result will appear here...
`;
document.body.innerHTML = "";
document.body.appendChild(appContainer);
document.getElementById('resumerButton').addEventListener('click', loadResumerPage);
document.getElementById('traductionbutton').addEventListener('click', loadTraductionPage);
document.getElementById('qesdocButton').addEventListener('click', loadDocPage);
document.getElementById('visualisationButton').addEventListener('click', loadVisualisationPage);
document.getElementById('interpretationButton').addEventListener('click', loadInterpretationPage);
const fileInput = document.getElementById('imageInput');
const dropText = document.getElementById('dropText');
const uploadIcon = document.getElementById('uploadIcon');
+
dropText.addEventListener('click', function(event) {
event.preventDefault();
event.stopPropagation();
fileInput.click();
});
uploadIcon.addEventListener('click', function(event) {
event.preventDefault();
event.stopPropagation();
fileInput.click();
});
fileInput.addEventListener('change', function(event) {
let file = event.target.files[0];
if (file) {
dropText.textContent = file.name;
uploadIcon.style.display = "none";
}
});
const sendBtn = document.getElementById("sendImageQuestionBtn");
const questionInput = document.getElementById("questionInput");
const resultContainer = document.getElementById("imageAnswer");
sendBtn.addEventListener("click", async function () {
const file = fileInput.files[0];
const question = questionInput.value.trim();
if (!file || !question) {
resultContainer.innerHTML = "⚠️ No question or image selected.
";
return;
}
const formData = new FormData();
formData.append("file", file);
formData.append("question", question);
resultContainer.innerHTML = `⏳ Waiting for the answer...
`;
try {
const response = await fetch("/image-qa/", {
method: "POST",
body: formData
});
const data = await response.json();
if (data.answer) {
resultContainer.innerHTML = `
🧠 Generated answer :
${data.answer}
`;
} else {
resultContainer.innerHTML = `Erreur : ${data.error}
`;
}
} catch (error) {
resultContainer.innerHTML = `Erreur lors de l'envoi : ${error.message}
`;
}
});
} 