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 = `
Documents Operations
SUMMARIZE đ
`;
// 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 = `
đ Listen to Summary
đ Summary generated :
${data.summary}
`;
document.getElementById("documentResult").dataset.summaryText = data.summary;
document.getElementById("downloadSection").style.display = "block";
const playVoiceBtn = document.getElementById("playVoiceBtn");
let isSpeaking = false;
let utterance = null;
playVoiceBtn.addEventListener("click", function () {
if (isSpeaking) {
// Si la lecture est en cours, on l'arrĂȘte
window.speechSynthesis.cancel();
isSpeaking = false;
} else {
// Sinon, on commence Ă lire
const textToRead = document.getElementById("summaryText").textContent;
utterance = new SpeechSynthesisUtterance(textToRead);
utterance.lang = "en-US"; // ou "fr-FR"
utterance.onend = function () {
// Lecture terminée
isSpeaking = false;
};
window.speechSynthesis.speak(utterance);
isSpeaking = true;
}
});
}
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 = `
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
`;
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 = "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 = "đ Translate :\n " + 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 = "â 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 = `
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";
}
});
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 = `
đ Listen to Answer
â
The result :
${data.answer}
`;
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() {
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
`;
// 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 = `
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 = `âł 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 = `
đ Listen to Interpretation
đž Generated caption :
${data.caption}
`; // đ€ Ajouter l'effet vocal
const playVoiceBtn = document.getElementById("playVoiceBtn");
playVoiceBtn.addEventListener("click", function () {
const textToRead = document.getElementById("interpretationText").textContent;
const utterance = new SpeechSynthesisUtterance(textToRead);
utterance.lang = "en-US"; // adapte ici selon la langue de l'interprétation
window.speechSynthesis.speak(utterance);
});
} 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')");
// CrĂ©er une nouvelle structure pour Ă©viter dâĂ©craser les Ă©vĂ©nements
let appContainer = document.createElement("div");
appContainer.classList.add("app-container");
appContainer.innerHTML = `
Images Operations
IMAGES 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('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);
// Afficher le message de chargement
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 = `
đ Listen to Answer
đ§ Generated answer :
${data.answer}
`;
// đ€ Ajouter l'effet vocal
const playVoiceBtn = document.getElementById("playVoiceBtn");
playVoiceBtn.addEventListener("click", function () {
const textToRead = data.answer;
const utterance = new SpeechSynthesisUtterance(textToRead);
utterance.lang = "en-US"; // adapte ici selon la langue de la réponse
window.speechSynthesis.speak(utterance);
});
} else {
resultContainer.innerHTML = `Erreur : ${data.error}
`;
}
} catch (error) {
resultContainer.innerHTML = `Erreur lors de l'envoi : ${error.message}
`;
}
});
} 