static/script.js

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 = `
        <div class="sidebar">
            <div class="logo-container">
                <div class="logo-top">SMARTDOCS</div>
                <div class="logo-bottom">AI</div>
            </div>
            <div class="menu-section">
                <button class="menu-btn" id="traductionbutton">TRADUCTION</button>
                <button class="menu-btn" id="qesdocButton">QUESTION</button>
                <button class="menu-btn" id="visualisationButton">VISUALISATION</button>
            </div>
            <div class="menu-section">
                <div class="menu-title">IMAGES</div>
                <button class="menu-btn" id="interpretationButton">INTERPRETER</button>
                <button class="menu-btn" id="qesimgButton">QUESTIONS</button>
            </div>
        </div>
        <div class="main-content-area">
            <div class="document-container">
                <h1 class="document-main-title">Opérations sur documents</h1>
                <h2 class="document-subtitle">RÉSUMER 📋</h2>
                <div class="upload-container">
                    <div class="file-drop-zone" id="fileDropZone">
                        <label for="fileInput" class="file-upload-label">
                            <img src="up.png" id="uploadIcon" class="upload-icon" alt="Upload">
                            <span class="drop-text" id="dropText">Déposez votre fichier ici ou cliquez pour parcourir</span>
                        </label>
                        <input type="file" id="fileInput" class="file-input" accept=".doc,.docx,.xls,.xlsx,.pdf,.ppt,.pptx" hidden>
                    </div>
                    <button class="summary-action-btn">RÉSUMER</button>
                </div>
                <div class="results-container">
                    <div class="results-placeholder">
                        <p class="placeholder-text">Le résultat apparaîtra ici...</p>
                    </div>
                </div>
            </div>
        </div>
    `;

    // 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 = `
        <div class="sidebar">
            <div class="logo-container">
                <div class="logo-top">SMARTDOCS</div>
                <div class="logo-bottom">AI</div>
            </div>
            <div class="menu-section">
                <button class="menu-btn" id="resumerButton">RESUME</button>
                <button class="menu-btn" id="qesdocButton">QUESTION</button>
                <button class="menu-btn" id="visualisationButton">VISUALISATION</button>
            </div>
            <div class="menu-section">
                <div class="menu-title">IMAGES</div>
                <button class="menu-btn" id="interpretationButton">INTERPRETER</button>
                <button class="menu-btn" id="qesimgButton">QUESTIONS</button>
            </div>
        </div>
        <div class="main-content-area">
            <div class="document-container">
                <h1 class="document-main-title">Opérations sur documents</h1>
                <h2 class="document-subtitle">TRANSLATE </h2>
                <div class="upload-container">
                    <div class="file-drop-zone" id="fileDropZone">
                        <label for="translateFile" class="file-upload-label">
                            <img src="up.png" id="uploadIcon" class="upload-icon" alt="Upload">
                            <span class="drop-text" id="dropText">Déposez votre fichier ici ou cliquez pour parcourir</span>
                        </label>
                        <input type="file" id="translateFile" class="file-input" accept=".doc,.docx,.xls,.xlsx,.pdf,.ppt,.pptx" hidden>
                    </div>
                    
                    <div class="action-container">
                        <select id="targetLanguageSelect" class="language-dropdown">
                            <option value="">Select language</option>
                            <option value="af">Afrikaans</option>
                            <option value="am">Amharic</option>
                            <option value="ar">Arabic</option>
                            <option value="ast">Asturian</option>
                            <option value="az">Azerbaijani</option>
                            <option value="ba">Bashkir</option>
                            <option value="be">Belarusian</option>
                            <option value="bg">Bulgarian</option>
                            <option value="bn">Bengali</option>
                            <option value="br">Breton</option>
                            <option value="bs">Bosnian</option>
                            <option value="ca">Catalan; Valencian</option>
                            <option value="ceb">Cebuano</option>
                            <option value="cs">Czech</option>
                            <option value="cy">Welsh</option>
                            <option value="da">Danish</option>
                            <option value="de">German</option>
                            <option value="el">Greek</option>
                            <option value="en">English</option>
                            <option value="es">Spanish</option>
                            <option value="et">Estonian</option>
                            <option value="fa">Persian</option>
                            <option value="ff">Fulah</option>
                            <option value="fi">Finnish</option>
                            <option value="fr">French</option>
                            <option value="fy">Western Frisian</option>
                            <option value="ga">Irish</option>
                            <option value="gd">Gaelic; Scottish Gaelic</option>
                            <option value="gl">Galician</option>
                            <option value="gu">Gujarati</option>
                            <option value="ha">Hausa</option>
                            <option value="he">Hebrew</option>
                            <option value="hi">Hindi</option>
                            <option value="hr">Croatian</option>
                            <option value="ht">Haitian; Haitian Creole</option>
                            <option value="hu">Hungarian</option>
                            <option value="hy">Armenian</option>
                            <option value="id">Indonesian</option>
                            <option value="ig">Igbo</option>
                            <option value="ilo">Iloko</option>
                            <option value="is">Icelandic</option>
                            <option value="it">Italian</option>
                            <option value="ja">Japanese</option>
                            <option value="jv">Javanese</option>
                            <option value="ka">Georgian</option>
                            <option value="kk">Kazakh</option>
                            <option value="km">Central Khmer</option>
                            <option value="kn">Kannada</option>
                            <option value="ko">Korean</option>
                            <option value="lb">Luxembourgish</option>
                            <option value="lg">Ganda</option>
                            <option value="ln">Lingala</option>
                            <option value="lo">Lao</option>
                            <option value="lt">Lithuanian</option>
                            <option value="lv">Latvian</option>
                            <option value="mg">Malagasy</option>
                            <option value="mk">Macedonian</option>
                            <option value="ml">Malayalam</option>
                            <option value="mn">Mongolian</option>
                            <option value="mr">Marathi</option>
                            <option value="ms">Malay</option>
                            <option value="my">Burmese</option>
                            <option value="ne">Nepali</option>
                            <option value="nl">Dutch; Flemish</option>
                            <option value="no">Norwegian</option>
                            <option value="ns">Northern Sotho</option>
                            <option value="oc">Occitan (post 1500)</option>
                            <option value="or">Oriya</option>
                            <option value="pa">Panjabi; Punjabi</option>
                            <option value="pl">Polish</option>
                            <option value="ps">Pushto; Pashto</option>
                            <option value="pt">Portuguese</option>
                            <option value="ro">Romanian; Moldavian</option>
                            <option value="ru">Russian</option>
                            <option value="sd">Sindhi</option>
                            <option value="si">Sinhala; Sinhalese</option>
                            <option value="sk">Slovak</option>
                            <option value="sl">Slovenian</option>
                            <option value="so">Somali</option>
                            <option value="sq">Albanian</option>
                            <option value="sr">Serbian</option>
                            <option value="ss">Swati</option>
                            <option value="su">Sundanese</option>
                            <option value="sv">Swedish</option>
                            <option value="sw">Swahili</option>
                            <option value="ta">Tamil</option>
                            <option value="th">Thai</option>
                            <option value="tl">Tagalog</option>
                            <option value="tn">Tswana</option>
                            <option value="tr">Turkish</option>
                            <option value="uk">Ukrainian</option>
                            <option value="ur">Urdu</option>
                            <option value="uz">Uzbek</option>
                            <option value="vi">Vietnamese</option>
                            <option value="wo">Wolof</option>
                            <option value="xh">Xhosa</option>
                            <option value="yi">Yiddish</option>
                            <option value="yo">Yoruba</option>
                            <option value="zh">Chinese</option>
                            <option value="zu">Zulu</option>
                        </select>
                        <button class="translate" id="translateButton">Translate</button>
                    </div>
                </div>
                <div class="results-container">
                    <div class="results-placeholder">
                        <p class="placeholder-text" id="translateResult">Le résultat apparaîtra ici...</p>
                    </div>
                </div>
            </div>
        </div>
    `;
    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 = `
        <div class="sidebar">
            <div class="logo-container">
                <div class="logo-top">SMARTDOCS</div>
                <div class="logo-bottom">AI</div>
            </div>
            <div class="menu-section">
                <button class="menu-btn" id="resumerButton">RESUME</button>
                <button class="menu-btn" id="traductionbutton">TRANSLATE</button>
                <button class="menu-btn" id="visualisationButton">VISUALISATION</button>
            </div>
            <div class="menu-section">
                <div class="menu-title">IMAGES</div>
                <button class="menu-btn" id="interpretationButton">INTERPRETER</button>
                <button class="menu-btn" id="qesimgButton">QUESTIONS</button>
            </div>
        </div>
        <div class="main-content-area">
            <div class="document-container">
                <h1 class="document-main-title">Opérations sur documents</h1>
                <h2 class="document-subtitle">QUESTION DOCUMENTS 📄❓</h2>
                <div class="upload-container">
                    <div class="file-drop-zone" id="fileDropZone">
                        <label for="fileInput" class="file-upload-label">
                            <img src="up.png" id="uploadIcon" class="upload-icon" alt="Upload">
                            <span class="drop-text" id="dropText">Déposez votre fichier ici ou cliquez pour parcourir</span>
                        </label>
                        <input type="file" id="fileInput" class="file-input" accept=".doc,.docx,.xls,.xlsx,.pdf,.ppt,.pptx" hidden>
                    </div>
                    <div class="question-container">
                        <div class="question">
                            <input type="text" id="questionInput" placeholder="Tapez votre question ici...">
                        </div>
                        <button class="question-btn">Envoyer</button>
                    </div>
                </div>
                <div class="results-container">
                    <div class="results-placeholder">
                        <p class="placeholder-text">Le résultat apparaîtra ici...</p>
                    </div>
                </div>
            </div>
        </div>
    `;

    // 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 = `
            <div class="sidebar">
                <div class="logo-container">
                    <div class="logo-top">SMARTDOCS</div>
                    <div class="logo-bottom">AI</div>
                </div>
    
                <div class="menu-section">
                    <button class="menu-btn" id="resumerButton">RESUME</button>
                    <button class="menu-btn" id="traductionbutton">TRANSLATE</button>
                    <button class="menu-btn" id="qesdocButton">QUESTION</button>
                </div>
    
                <div class="menu-section">
                    <div class="menu-title">IMAGES</div>
                    <button class="menu-btn" id="interpretationButton">INTERPRETER</button>
                    <button class="menu-btn" id="qesimgButton">QUESTIONS</button>
                </div>
            </div>
    
            <div class="main-content-area">
                <div class="document-container">
                    <h1 class="document-main-title">Opérations sur documents</h1>
                    <h2 class="document-subtitle">VISUALISATION</h2>
    
                    <!-- Conteneur d'upload (pas un formulaire) -->
                    <div class="upload-container">
                        <div class="file-drop-zone" id="fileDropZone">
                            <label for="graphFileInput" class="file-upload-label">
                                <img src="up.png" id="uploadIcon" class="upload-icon" alt="Upload">
                                <span class="drop-text" id="dropText">Déposez votre fichier ici ou cliquez pour parcourir</span>
                            </label>
                            <input type="file" id="graphFileInput" class="file-input" 
                                   accept=".doc,.docx,.xls,.xlsx,.pdf,.ppt,.pptx" hidden>
                        </div>
                        
                        <div class="graph-action-container">
                            <select id="graphTypeSelect" class="language-dropdown">
                                <option value="">Select type</option>
                                <option value="histplot">Histogramme</option>
                                <option value="scatterplot">Nuage de points</option>
                                <option value="lineplot">Courbe</option>
                                <option value="barplot">Diagramme en barres</option>
                                <option value="boxplot">Boîte à moustaches</option>
                            </select>
                            <button type="button" id="generateGraphBtn" class="visualiser">Générer</button>
                        </div>
                    </div>
    
                    <!-- Zone de résultats -->
                    <div class="graph-results-container">
                        <div class="graph-results-placeholder">
                            <img id="graphResultImage" class="graph-result-img">
                            <p class="placeholder-text" id="graphPlaceholderText">Le résultat apparaîtra ici...</p>
                        </div>
                    </div>
                </div>
            </div>
        `;
        
        // 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 = `
            <div class="sidebar">
                <div class="logo-container">
                    <div class="logo-top">SMARTDOCS</div>
                    <div class="logo-bottom">AI</div>
                </div>
    
                <div class="menu-section">
                    <button class="menu-btn" id="qesimgButton">QUESTIONS</button>
                </div>
    
                <div class="menu-section">
                    <div class="menu-title">DOCUMENTS</div>
                    <button class="menu-btn" id="resumerButton">RESUMER</button>
                    <button class="menu-btn" id="traductionbutton">TRANSLATE</button>
                    <button class="menu-btn" id="qesdocButton">QUESTION</button>
                    <button class="menu-btn" id="visualisationButton">VISUALISATION</button>
                </div>
            </div>
    
            <div class="main-content-area">
                <div class="document-container">
                    <h1 class="document-main-title">Opérations sur images</h1>
                    <h2 class="document-subtitle">INTERPRÉTATION DES IMAGES 🏞️🤖</h2>
    
                    <div class="upload-container">
                        <div class="file-drop-zone" id="fileDropZone">
                            <label for="fileInput" class="file-upload-label">
                                <img src="up.png" id="uploadIcon" class="upload-icon" alt="Upload">
                                <span class="drop-text" id="dropText">Déposez votre image ici ou cliquez pour parcourir</span>
                            </label>
                            <input type="file" id="fileInput" class="file-input" accept=".jpg,.jpeg,.png,.gif,.bmp,.webp" hidden>
                        </div>
                        <button class="summary-action-btn">INTERPRET</button>
                    </div>
    
                    <div class="results-container">
                        <div class="results-placeholder">
                            <p class="placeholder-text">Le résultat apparaîtra ici...</p>
                        </div>
                    </div>
                </div>
            </div>
        `;
    
        // 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 = `
            <div class="sidebar">
                <div class="logo-container">
                    <div class="logo-top">SMARTDOCS</div>
                    <div class="logo-bottom">AI</div>
                </div>
    
                <div class="menu-section">
                    <button class="menu-btn" id="interpretationButton">INTERPRETER</button>
                </div>
    
                <div class="menu-section">
                    <div class="menu-title">DOCUMENTS</div>
                    <button class="menu-btn" id="resumerButton">RESUMER</button>
                    <button class="menu-btn" id="traductionbutton">TRANSLATE</button>
                    <button class="menu-btn" id="qesdocButton">QUESTION</button>
                    <button class="menu-btn" id="visualisationButton">VISUALISATION</button>
                </div>
            </div>
    
            <div class="main-content-area">
                <div class="document-container">
                    <h1 class="document-main-title">Opérations sur images</h1>
                    <h2 class="document-subtitle">QUESTION IMAGES 🖼️❓</h2>
    
                    <div class="upload-container">
                        <div class="file-drop-zone" id="fileDropZone">
                            <label for="fileInput" class="file-upload-label">
                                <img src="up.png" id="uploadIcon" class="upload-icon" alt="Upload">
                                <span class="drop-text" id="dropText">Déposez votre image ici ou cliquez pour parcourir</span>
                            </label>
                            <input type="file" id="fileInput" class="file-input" accept=".jpg,.jpeg,.png,.gif,.bmp,.webp" hidden>
                        </div>
                    
    
                    <div class="question-container">
                          <div class="question">
                            <input type="text" id="questionInput" placeholder="Tapez votre question ici...">
                          </div>
                            <button class="question-btn">Envoyer</button>
                     </div>
                    </div>
    
                    <div class="results-container">
                        <div class="results-placeholder">
                            <p class="placeholder-text">Le résultat apparaîtra ici...</p>
                        </div>
                    </div>
                </div>
            </div>
        `;
    
        // 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);
        });
    
    }