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')");
// Effacer uniquement le contenu de la page sans casser le script
let appContainer = document.createElement("div");
appContainer.classList.add("app-container");
appContainer.innerHTML = `
SMARTDOCS
AI
IMAGES
Opérations sur documents
RÉSUMER 📋
Le résultat apparaîtra ici...
Télécharger le résumé
`;
// Insérer la nouvelle interface sans écraser les scripts
document.body.innerHTML = "";
document.body.appendChild(appContainer);
// Ajouter l'événement de clic pour le bouton "RÉSUMER"
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 = "⚠️ Aucun fichier sélectionné !";
return;
}
resultElement.innerText = "Chargement du résumé... 🕐";
let formData = new FormData();
formData.append("file", fileInput.files[0]);
try {
let response = await fetch("https://malaknihed-smartdocsai.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 = `
📝 Résumé généré :
${data.summary}
`;
document.getElementById("documentResult").dataset.summaryText = data.summary;
document.getElementById("downloadSection").style.display = "block";
} else {
resultElement.innerText = "❌ Résumé non disponible.";
}
} 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);
}
});
// Reconnexion des boutons du menu latéral
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);
// Gestion du dropzone
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 ---------------
function loadTraductionPage() {
document.body.style.setProperty('--background-image', "url('traduction.webp')");
let appContainer = document.createElement("div");
appContainer.classList.add("app-container");
appContainer.innerHTML = `
SMARTDOCS
AI
IMAGES
Opérations sur documents
TRANSLATE
Le résultat apparaîtra ici...
Télécharger la traduction
`;
document.body.innerHTML = "";
document.body.appendChild(appContainer);
// Chargement des librairies externes
loadExternalLibs();
// Gestion des événements
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() {
// Navigation
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);
// Gestion des fichiers
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";
}
});
// Traduction
document.getElementById('translateButton').addEventListener('click', uploadForTranslation);
// Téléchargements
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 = "⚠️Veuillez sélectionner un fichier";
return;
}
if (!targetLang) {
resultElement.innerText = "⚠️Veuillez sélectionner une langue";
return;
}
const formData = new FormData();
formData.append("file", fileInput.files[0]);
formData.append("target_lang", targetLang);
try {
resultElement.innerText = "Traduction en cours...🕐";
const response = await fetch("/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 : " + data.translated_text;
// Stocker le texte traduit pour le téléchargement
resultElement.dataset.translatedText = data.translated_text;
// Afficher les options de téléchargement
document.getElementById("downloadSection").style.display = "block";
} else {
resultElement.innerText = "❌ Traduction non disponible.";
}
} 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);
}
}
function loadDocPage() {
document.body.style.setProperty('--background-image', "url('qstdoc2.webp')");
// Créer une nouvelle structure pour ne pas écraser les événements
let appContainer = document.createElement("div");
appContainer.classList.add("app-container");
appContainer.innerHTML = `
SMARTDOCS
AI
IMAGES
Opérations sur documents
QUESTION DOCUMENTS 📄❓
Le résultat apparaîtra ici...
`;
// Insérer la nouvelle structure sans écraser les événements
document.body.innerHTML = "";
document.body.appendChild(appContainer);
// Réassocier les événements aux boutons
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";
}
});
// 👉 Fonction d'envoi de la question/document
// 👉 Fonction d'envoi de la question/document
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 = "⚠️ Veuillez ajouter un fichier et une question.";
return;
}
const formData = new FormData();
formData.append("file", file);
formData.append("question", question);
// Afficher "⏳ Analyse du document en cours..." pendant le traitement
answerDiv.innerHTML = "⏳ Analyse du document en cours...";
try {
const response = await fetch("/doc-qa/", {
method: "POST",
body: formData
});
const data = await response.json();
if (data.answer) {
answerDiv.innerHTML = `
✅ La réponse :
${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() {
// 1. Configuration de l'arrière-plan
document.body.style.setProperty('--background-image', "url('visualisation.webp')");
// 2. Création de la structure HTML
const appContainer = document.createElement("div");
appContainer.className = "app-container";
appContainer.innerHTML = `
SMARTDOCS
AI
IMAGES
Opérations sur documents
VISUALISATION
Le résultat apparaîtra ici...
Télécharger le graphique
`;
// 3. Nettoyage et insertion
document.body.innerHTML = "";
document.body.appendChild(appContainer);
// 4. Gestion des événements
const setupEventListeners = () => {
// Navigation
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);
// Gestion des fichiers
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";
// Réinitialiser l'affichage quand un nouveau fichier est sélectionné
document.getElementById("downloadSection").style.display = "none";
document.getElementById("graphResultImage").style.display = "none";
document.getElementById("graphPlaceholderText").textContent = "Prêt à générer le graphique";
}
});
// Génération du graphique
document.getElementById('generateGraphBtn').addEventListener('click', generateGraph);
// Téléchargement du graphique
document.getElementById('downloadPng').addEventListener('click', () => downloadGraph('png'));
document.getElementById('downloadJpg').addEventListener('click', () => downloadGraph('jpg'));
};
// 5. Fonction de génération du graphique
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");
// Validation
if (!fileInput.files[0]) {
placeholderText.textContent = "⚠️Veuillez sélectionner un fichier";
downloadSection.style.display = "none";
return;
}
if (!graphTypeSelect.value) {
placeholderText.textContent = "⚠️Veuillez sélectionner un type de graphique";
downloadSection.style.display = "none";
return;
}
// Préparation de l'interface
resultImage.style.display = "none";
downloadSection.style.display = "none";
placeholderText.textContent = "Génération du graphique en cours...🕐";
try {
// Envoi des données
const formData = new FormData();
formData.append("file", fileInput.files[0]);
formData.append("query", graphTypeSelect.value);
const response = await fetch("http://localhost:8000/generate_viz/", {
method: "POST",
body: formData,
headers: { 'Accept': 'image/*' }
});
// Vérification
if (!response.ok) {
throw new Error(`Erreur ${response.status}: ${await response.text()}`);
}
const contentType = response.headers.get('Content-Type');
if (!contentType?.includes('image')) {
throw new Error("Réponse non reconnue comme image");
}
// Affichage du résultat
const imageBlob = await response.blob();
const imageUrl = URL.createObjectURL(imageBlob);
resultImage.onload = () => {
URL.revokeObjectURL(imageUrl);
// Afficher les options de téléchargement une fois l'image chargée
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";
}
};
// 6. Fonction de téléchargement du graphique
const downloadGraph = (format) => {
const resultImage = document.getElementById('graphResultImage');
if (!resultImage.src || resultImage.style.display === "none") {
alert("⚠️Veuillez d'abord générer un graphique");
return;
}
// Créer un canvas pour la conversion
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: // PNG par défaut
mimeType = 'image/png';
extension = 'png';
}
// Conversion et téléchargement
canvas.toBlob((blob) => {
downloadFile(blob, `graphique.${extension}`);
}, mimeType, format === 'jpg' ? 0.92 : 1); // Qualité à 92% pour JPG, 100% pour PNG
};
// 7. Fonction utilitaire pour le téléchargement
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);
};
// Initialisation
setupEventListeners();
}
//quand on clique sur interpretation ---------------------
function loadInterpretationPage() {
document.body.style.setProperty('--background-image', "url('interpreter.webp')");
// Créer une nouvelle structure pour ne pas écraser les événements
let appContainer = document.createElement("div");
appContainer.classList.add("app-container");
appContainer.innerHTML = `
SMARTDOCS
AI
DOCUMENTS
Opérations sur images
INTERPRÉTATION DES IMAGES 🏞️🤖
Le résultat apparaîtra ici...
`;
// Insérer la nouvelle structure sans écraser les événements
document.body.innerHTML = "";
document.body.appendChild(appContainer);
// Réassocier les événements aux boutons
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";
}
});
// Appel API backend pour interprétation
interpretButton.addEventListener('click', async function () {
let file = fileInput.files[0];
if (!file) {
resultContainer.innerHTML = `
⚠️ Veuillez sélectionner une image.
`;
return;
}
let formData = new FormData();
formData.append("file", file);
// Afficher le message de chargement pendant l'analyse
resultContainer.innerHTML = `
`;
}
});
}
//quand on clique sur quesion image ---------------
function loadImagePage() {
document.body.style.setProperty('--background-image', "url('qstimage.webp')");
// Créer une nouvelle structure pour éviter d’écraser les événements
let appContainer = document.createElement("div");
appContainer.classList.add("app-container");
appContainer.innerHTML = `