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 = `
SMARTDOC
AI
IMAGES
Documents Operations
SUMMARIZE 📋
The result will appear here...
Download the summary
`;
// 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 = "⚠️ 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";
// 🎤 Ajouter l'effet vocal
const playVoiceBtn = document.getElementById("playVoiceBtn");
playVoiceBtn.addEventListener("click", function () {
const textToRead = document.getElementById("summaryText").textContent;
const utterance = new SpeechSynthesisUtterance(textToRead);
utterance.lang = "en-US"; // ou "fr-FR" si ton résumé est en français
window.speechSynthesis.speak(utterance);
});
}
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);
}
});
// 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 = `
`;
document.getElementById("documentResult").dataset.translationText = data.translation;
document.getElementById("downloadSection").style.display = "block";
// 🎤 Ajouter l'effet vocal
const playVoiceBtn = document.getElementById("playVoiceBtn");
playVoiceBtn.addEventListener("click", function () {
const textToRead = document.getElementById("translationText").textContent;
const utterance = new SpeechSynthesisUtterance(textToRead);
utterance.lang = "en-US"; // adapte ici selon la langue de ta traduction ("fr-FR" pour du français par exemple)
window.speechSynthesis.speak(utterance);
});
}
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);
}
}
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
Documents Operations
DOCUMENTS QUESTIONS 📄❓
The result will appear here...
`;
// 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 = "⚠️ No question or file selected.";
return;
}
const formData = new FormData();
formData.append("file", file);
formData.append("question", question);
// Afficher "⏳ Analyse du document en cours..." pendant le traitement
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}
`;
// 🎤 Ajouter l'effet vocal
const playVoiceBtn = document.getElementById("playAnswerVoiceBtn");
playVoiceBtn.addEventListener("click", function () {
const textToRead = document.getElementById("answerText").textContent;
const utterance = new SpeechSynthesisUtterance(textToRead);
utterance.lang = "en-US"; // ou adapte ici si tu as des réponses en français
window.speechSynthesis.speak(utterance);
});
} 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
Documents Operations
VISUALIZATION 📊
The result will appear here...
Download the graph
`;
// 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 = "Ready to generate the chart";
}
});
// 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 = "⚠️No file selected";
downloadSection.style.display = "none";
return;
}
if (!graphTypeSelect.value) {
placeholderText.textContent = "⚠️No a chart type selected";
downloadSection.style.display = "none";
return;
}
// Préparation de l'interface
resultImage.style.display = "none";
downloadSection.style.display = "none";
placeholderText.textContent = "⏳ Graph generation in progress...";
try {
// Envoi des données
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);
}
// Créer une URL de l'image à partir de la chaîne base64
const imageUrl = `data:image/png;base64,${result.image_base64}`;
// Afficher l'image
resultImage.onload = () => {
// 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("Please generate a shart first");
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
Images Operations
IMAGES INTERPRETATION 🏞️🤖
The result will appear here...
`;
// 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 = `
⚠️ No image selected.
`;
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 = `
