Create script.js

static/script.js

@@ -0,0 +1,683 @@
+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 >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="summary-action-btn">Translate</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>
+    `;
+    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">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 class="summary-action-btn">Génerer</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>
+        `;
+        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);
+        });
+    
+    }