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...
`;
// Insérer la nouvelle interface sans écraser les scripts
document.body.innerHTML = "";
document.body.appendChild(appContainer);
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 ---------------
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...
`;
document.body.innerHTML = "";
document.body.appendChild(appContainer);
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', 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";
}
});
// Ajout de l'événement pour le bouton de traduction
document.getElementById('translateButton').addEventListener('click', uploadForTranslation);
async function uploadForTranslation() {
let fileInput = document.getElementById("translateFile");
let targetLang = document.getElementById("targetLanguageSelect").value;
if (!fileInput.files[0]) {
document.getElementById("translateResult").innerText = "Veuillez sélectionner un fichier";
return;
}
if (!targetLang) {
document.getElementById("translateResult").innerText = "Veuillez sélectionner une langue";
return;
}
let formData = new FormData();
formData.append("file", fileInput.files[0]);
formData.append("target_lang", targetLang);
try {
console.log("📤 Envoi du fichier pour traduction...");
let response = await fetch("/translate/", {
method: "POST",
body: formData,
headers: { "Accept": "application/json" }
});
let responseText = await response.text();
console.log("📤 Réponse brute du serveur :", responseText);
if (!response.ok) {
throw new Error("Erreur de requête ! " + responseText);
}
let data = JSON.parse(responseText);
console.log("📤 Réponse JSON du serveur :", data);
let resultElement = document.getElementById("translateResult");
if (data.translated_text) {
resultElement.innerText = "📝 Traduction : " + data.translated_text;
} else {
resultElement.innerText = "❌ Traduction non disponible.";
}
} catch (error) {
console.error("❌ Erreur :", error);
document.getElementById("translateResult").innerText = "Échec de la requête ! " + error.message;
}
}
}
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";
}
});
}
//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...
`;
// 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";
}
});
// Génération du graphique
document.getElementById('generateGraphBtn').addEventListener('click', generateGraph);
};
// 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');
// Validation
if (!fileInput.files[0]) {
placeholderText.textContent = "Veuillez sélectionner un fichier";
return;
}
if (!graphTypeSelect.value) {
placeholderText.textContent = "Veuillez sélectionner un type de graphique";
return;
}
// Préparation de l'interface
resultImage.style.display = "none";
placeholderText.textContent = "Génération du graphique...";
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
const imageBlob = await response.blob();
resultImage.onload = () => URL.revokeObjectURL(resultImage.src);
resultImage.src = URL.createObjectURL(imageBlob);
resultImage.style.display = "block";
placeholderText.textContent = "";
} catch (error) {
console.error("Erreur:", error);
placeholderText.textContent = `Erreur: ${error.message}`;
resultImage.style.display = "none";
}
};
// 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 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 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 = `
SMARTDOCS
AI
DOCUMENTS
Opérations sur images
QUESTION 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('interpretationButton').addEventListener('click', loadInterpretationPage);
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";
}
});
// Gestion du bouton "Envoyer"
document.getElementById('sendQuestionBtn').addEventListener('click', function() {
const questionText = document.getElementById('questionInput').value;
if (questionText.trim() === "") {
alert("Veuillez entrer une question !");
return;
}
alert("Question envoyée : " + questionText);
});
}