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="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="action-container">
        
        <select id="languageSelect" class="language-dropdown">
        <option class="a" >Select language</option>
             <option class="a" value="af">Afrikaans</option>
            <option class="a" value="am">Amharic</option>
            <option value="ar"class="a">Arabic</option>
            <option value="ast"class="a">Asturian</option>
            <option value="az"class="a">Azerbaijani</option>
            <option value="ba"class="a">Bashkir</option>
            <option value="be"class="a">Belarusian</option>
            <option value="bg"class="a">Bulgarian</option>
            <option value="bn"class="a">Bengali</option>
            <option value="br"class="a">Breton</option>
            <option value="bs"class="a">Bosnian</option>
            <option value="ca"class="a">Catalan; Valencian</option>
            <option value="ceb"class="a">Cebuano</option>
            <option value="cs"class="a">Czech</option>
            <option value="cy"class="a">Welsh</option>
            <option value="da"class="a">Danish</option>
            <option value="de"class="a">German</option>
            <option value="el"class="a">Greek</option>
            <option value="en"class="a">English</option>
            <option value="es"class="a">Spanish</option>
            <option value="et"class="a">Estonian</option>
            <option value="fa"class="a">Persian</option>
            <option value="ff"class="a">Fulah</option>
            <option value="fi"class="a">Finnish</option>
            <option value="fr"class="a">French</option>
            <option value="fy"class="a">Western Frisian</option>
            <option value="ga"class="a">Irish</option>
            <option value="gd"class="a">Gaelic; Scottish Gaelic</option>
            <option value="gl"class="a">Galician</option>
            <option value="gu"class="a">Gujarati</option>
            <option value="ha"class="a">Hausa</option>
            <option value="he"class="a">Hebrew</option>
            <option value="hi"class="a">Hindi</option>
            <option value="hr"class="a">Croatian</option>
            <option value="ht"class="a">Haitian; Haitian Creole</option>
            <option value="hu"class="a">Hungarian</option>
            <option value="hy"class="a">Armenian</option>
            <option value="id"class="a">Indonesian</option>
            <option value="ig"class="a">Igbo</option>
            <option value="ilo"class="a">Iloko</option>
            <option value="is"class="a">Icelandic</option>
            <option value="it"class="a">Italian</option>
            <option value="ja"class="a">Japanese</option>
            <option value="jv"class="a">Javanese</option>
            <option value="ka"class="a">Georgian</option>
            <option value="kk"class="a">Kazakh</option>
            <option value="km"class="a">Central Khmer</option>
            <option value="kn"class="a">Kannada</option>
            <option value="ko"class="a">Korean</option>
            <option value="lb"class="a">Luxembourgish</option>
            <option value="lg"class="a">Ganda</option>
            <option value="ln"class="a">Lingala</option>
            <option value="lo"class="a">Lao</option>
            <option value="lt"class="a">Lithuanian</option>
            <option value="lv"class="a">Latvian</option>
            <option value="mg"class="a">Malagasy</option>
            <option value="mk"class="a">Macedonian</option>
            <option value="ml"class="a">Malayalam</option>
            <option value="mn"class="a">Mongolian</option>
            <option value="mr"class="a">Marathi</option>
            <option value="ms"class="a">Malay</option>
            <option value="my"class="a">Burmese</option>
            <option value="ne"class="a">Nepali</option>
            <option value="nl"class="a">Dutch; Flemish</option>
            <option value="no"class="a">Norwegian</option>
            <option value="ns"class="a">Northern Sotho</option>
            <option value="oc"class="a">Occitan (post 1500)</option>
            <option value="or"class="a">Oriya</option>
            <option value="pa"class="a">Panjabi; Punjabi</option>
            <option value="pl"class="a">Polish</option>
            <option value="ps"class="a">Pushto; Pashto</option>
            <option value="pt"class="a">Portuguese</option>
            <option value="ro"class="a">Romanian; Moldavian</option>
            <option value="ru"class="a">Russian</option>
            <option value="sd"class="a">Sindhi</option>
            <option value="si"class="a">Sinhala; Sinhalese</option>
            <option value="sk"class="a">Slovak</option>
            <option value="sl"class="a">Slovenian</option>
            <option value="so"class="a">Somali</option>
            <option value="sq"class="a">Albanian</option>
            <option value="sr"class="a">Serbian</option>
            <option value="ss"class="a">Swati</option>
            <option value="su"class="a">Sundanese</option>
            <option value="sv"class="a">Swedish</option>
            <option value="sw"class="a">Swahili</option>
            <option value="ta"class="a">Tamil</option>
            <option value="th"class="a">Thai</option>
            <option value="tl"class="a">Tagalog</option>
            <option value="tn"class="a">Tswana</option>
            <option value="tr"class="a">Turkish</option>
            <option value="uk"class="a">Ukrainian</option>
            <option value="ur"class="a">Urdu</option>
            <option value="uz"class="a">Uzbek</option>
            <option value="vi"class="a">Vietnamese</option>
            <option value="wo"class="a">Wolof</option>
            <option value="xh"class="a">Xhosa</option>
            <option value="yi"class="a">Yiddish</option>
            <option value="yo"class="a">Yoruba</option>
            <option value="zh"class="a">Chinese</option>
            <option value="zu"class="a">Zulu</option>
        </select>
        <button class="translate"  id="translateBtn">TRANSLATE</button>
    </div>
                </div>

                <div class="results-containe">
                    <div class="result">
                        <p class="placeholder-text">LOADING</p>
                    </div>
                </div>
            </div>
        </div>
    `;
       // Ajout des écouteurs APRES que le HTML soit injecté
    document.getElementById("translateBtn").addEventListener("click", uploadForTranslation);
    const fileInput = document.getElementById("fileInput");
    const dropText = document.getElementById("dropText");
    const uploadIcon = document.getElementById("uploadIcon");

    dropText.addEventListener("click", function (event) {
        event.preventDefault();
        fileInput.click();
    });

    uploadIcon.addEventListener("click", function (event) {
        event.preventDefault();
        fileInput.click();
    });

    fileInput.addEventListener("change", function (event) {
        let file = event.target.files[0];
        if (file) {
            dropText.textContent = file.name;
            uploadIcon.style.display = "none";
        }
    });

    document.getElementById("backArrow").addEventListener("click", loadHomePage);}
    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('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";
    }
});

    }

    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() {
        document.body.style.setProperty('--background-image', "url('visualisation.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="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>
    
                    <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="action-container">
            
            <select id="languageSelect" class="language-dropdown">
            <option >Select type</option>
                  <option value="histplot"class="a">Histogramme</option>
                  <option value="scatterplot"class="a">Nuage de points</option>
                <option value="lineplot"class="a">Courbe</option>
                  <option value="barplot"class="a">Diagramme en barres</option>
                  <option value="boxplot"class="a">Boîte à moustaches</option>

          
            </select>
            <button class="visualiser">GENERER</button>
        </div>
                    </div>
    
                    <div class="results-containe">
                        <div class="result">
                            <p class="placeholder-text">Géneration en cours</p>
                        </div>
                    </div>
                </div>
            </div>
        `;
        document.body.innerHTML = "";
        document.body.appendChild(appContainer);
    
        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);


        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 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);
        });
    
    }









































async function uploadForTranslation() {
    let fileInput = document.getElementById("fileInput");
    let targetLang = document.getElementById("languageSelect").value;
    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.createElement("div");
        resultElement.innerText = data.translated_text ? "📝 Traduction : " + data.translated_text : "❌ Traduction non disponible.";
        document.querySelector(".results-container").appendChild(resultElement);
    } catch (error) {
        console.error("❌ Erreur :", error);
        let resultElement = document.createElement("div");
        resultElement.innerText = "Échec de la requête ! " + error.message;
        document.querySelector(".results-container").appendChild(resultElement);
    }
}