Spaces:

MeysamSh
/

Speech-DeepFake-Detection

Sleeping

App Files Files Community

MeysamSh commited on Nov 21, 2025

Commit

4fcb7f8

1 Parent(s): 6a0c23b

change interface to visualize the wavform

Browse files

Files changed (4) hide show

Web/index.html +29 -106
Web/index_org.html +162 -0
Web/script.js +345 -410
Web/script_org.js +498 -0

Web/index.html CHANGED Viewed

@@ -1,93 +1,30 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Audio Analysis API</title>
-  <link rel="stylesheet" href="/static/styles.css">
   <!-- Bootstrap CSS -->
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
-  <style>
-    body {
-      background-color: #f8f9fa;
-      padding: 20px;
-    }
-    .container {
-      max-width: 800px;
-      margin: 0 auto;
-      background: #fff;
-      padding: 30px;
-      border-radius: 10px;
-      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-    }
-    h1 {
-      text-align: center;
-      margin-bottom: 20px;
-      color: #333;
-      font-weight: bold;
-    }
-    h2 {
-      color: #555;
-      margin-bottom: 20px;
-      font-size: 1.5rem;
-    }
-    .btn {
-      margin: 5px;
-      font-weight: 500;
-    }
-    #recordingsList {
-      margin-top: 20px;
-    }
-    .response {
-      margin-top: 20px;
-      padding: 15px;
-      background-color: #e9ecef;
-      border-radius: 5px;
-      color: #333;
-      font-size: 1.1rem;
-    }
-    .metadata {
-      margin-top: 20px;
-      padding: 15px;
-      background-color: #f1f3f4;
-      border-radius: 5px;
-      color: #333;
-      font-size: 1.1rem;
-    }
-    .list-group-item {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-    }
-    .list-group-item a {
-      text-decoration: none;
-      color: #0d6efd;
-    }
-    .list-group-item a:hover {
-      text-decoration: underline;
-    }
-    #controls {
-      margin-bottom: 20px;
-    }
-    #formats {
-      font-size: 0.9rem;
-      color: #666;
-      margin-bottom: 10px;
-    }
   </style>
 </head>
@@ -96,7 +33,6 @@
     <h1>Audio Analysis API</h1>
     <h2>Upload or Record Audio Files</h2>
-    <!-- Form for Uploading Files -->
     <form id="upload-form" class="mb-4">
       <div class="mb-3">
         <input type="file" id="audio-file" class="form-control" accept="audio/*" multiple />
@@ -106,57 +42,44 @@
     <hr>
-    <!-- Buttons for Recording Audio -->
     <div id="controls" class="mb-4 text-center">
       <button id="recordButton" class="btn btn-success">Record</button>
       <button id="pauseButton" class="btn btn-warning" disabled>Pause</button>
       <button id="stopButton" class="btn btn-danger" disabled>Stop</button>
     </div>
     <div id="formats" class="mb-3 text-center">Format: Start recording to see sample rate</div>
-    <p class="text-center"><strong>Recordings:</strong></p>
     <ol id="recordingsList" class="list-group"></ol>
-    <!-- Metadata Display -->
     <div class="metadata mt-4">
       <h3>File Metadata</h3>
-      <!-- Dropdown Filters -->
       <div class="mb-3 d-flex flex-wrap gap-3">
         <i>Choisir un Label</i>
-        <select id="filter-label" class="form-select">
-          <option value="">All Labels</option>
-        </select>
         <i>Choisir un System</i>
-        <select id="filter-system" class="form-select">
-          <option value="">All Systems</option>
-        </select>
         <i>Choisir un Codec</i>
-        <select id="filter-codec" class="form-select">
-          <option value="">All Codecs</option>
-        </select>
         <i>Choisir un Genre</i>
-        <select id="filter-genre" class="form-select">
-          <option value="">All Genres</option>
-        </select>
         <i>Choisir une Année</i>
-        <select id="filter-year" class="form-select">
-          <option value="">All Years</option>
-        </select>
       </div>
       <div id="metadata-display"></div>
     </div>
-    <!-- Response Display -->
     <div class="response mt-4">
       <h3>Analysis Results</h3>
       <div id="response"></div>
     </div>
   </div>
-  <!-- Load Recorder.js and your script.js -->
   <script src="/static/recorder.js"></script>
   <script src="/static/script.js"></script>
 </body>
 </html>

 <!DOCTYPE html>
 <html lang="en">
 <head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
   <title>Audio Analysis API</title>
+  <link rel="stylesheet" href="/static/styles.css" />
   <!-- Bootstrap CSS -->
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
+  <!-- Wavesurfer -->
+  <script src="https://unpkg.com/wavesurfer.js"></script>
+  <style>
+    body { background-color: #f8f9fa; padding: 20px; }
+    .container { max-width: 900px; margin: 0 auto; background:#fff; padding:30px; border-radius:10px; box-shadow:0 4px 6px rgba(0,0,0,0.1); }
+    h1 { text-align:center; margin-bottom:20px; color:#333; font-weight:bold; }
+    .wave-item { margin-bottom: 18px; padding: 12px; border-radius: 8px; background: #fbfbfb; border: 1px solid #eee; }
+    .wave-controls { display:flex; gap:8px; align-items:center; margin-top:8px; flex-wrap:wrap; }
+    .wave-canvas { width:100%; height:80px; }
+    .file-title { font-weight:600; margin-bottom:6px; color:#222; }
+    .btn-small { padding: .25rem .5rem; font-size:.85rem; }
+    #recordingsList .list-group-item { display:block; padding:0; border:none; }
+    .metadata, .response { margin-top:20px; padding:15px; border-radius:5px; }
+    .metadata { background:#f1f3f4; }
+    .response { background:#e9ecef; }
   </style>
 </head>
     <h1>Audio Analysis API</h1>
     <h2>Upload or Record Audio Files</h2>
     <form id="upload-form" class="mb-4">
       <div class="mb-3">
         <input type="file" id="audio-file" class="form-control" accept="audio/*" multiple />
     <hr>
     <div id="controls" class="mb-4 text-center">
       <button id="recordButton" class="btn btn-success">Record</button>
       <button id="pauseButton" class="btn btn-warning" disabled>Pause</button>
       <button id="stopButton" class="btn btn-danger" disabled>Stop</button>
     </div>
     <div id="formats" class="mb-3 text-center">Format: Start recording to see sample rate</div>
+    <p class="text-center"><strong>Recordings & Uploads:</strong></p>
     <ol id="recordingsList" class="list-group"></ol>
     <div class="metadata mt-4">
       <h3>File Metadata</h3>
       <div class="mb-3 d-flex flex-wrap gap-3">
         <i>Choisir un Label</i>
+        <select id="filter-label" class="form-select"><option value="">All Labels</option></select>
         <i>Choisir un System</i>
+        <select id="filter-system" class="form-select"><option value="">All Systems</option></select>
         <i>Choisir un Codec</i>
+        <select id="filter-codec" class="form-select"><option value="">All Codecs</option></select>
         <i>Choisir un Genre</i>
+        <select id="filter-genre" class="form-select"><option value="">All Genres</option></select>
         <i>Choisir une Année</i>
+        <select id="filter-year" class="form-select"><option value="">All Years</option></select>
       </div>
       <div id="metadata-display"></div>
     </div>
     <div class="response mt-4">
       <h3>Analysis Results</h3>
       <div id="response"></div>
     </div>
   </div>
+  <!-- Recorder.js (must be present in /Web/recorder.js) -->
   <script src="/static/recorder.js"></script>
+  <!-- Your main script -->
   <script src="/static/script.js"></script>
 </body>
 </html>

Web/index_org.html ADDED Viewed

	@@ -0,0 +1,162 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Audio Analysis API</title>
+  <link rel="stylesheet" href="/static/styles.css">
+  <!-- Bootstrap CSS -->
+  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
+  <style>
+    body {
+      background-color: #f8f9fa;
+      padding: 20px;
+    }
+    .container {
+      max-width: 800px;
+      margin: 0 auto;
+      background: #fff;
+      padding: 30px;
+      border-radius: 10px;
+      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+    }
+    h1 {
+      text-align: center;
+      margin-bottom: 20px;
+      color: #333;
+      font-weight: bold;
+    }
+    h2 {
+      color: #555;
+      margin-bottom: 20px;
+      font-size: 1.5rem;
+    }
+    .btn {
+      margin: 5px;
+      font-weight: 500;
+    }
+    #recordingsList {
+      margin-top: 20px;
+    }
+    .response {
+      margin-top: 20px;
+      padding: 15px;
+      background-color: #e9ecef;
+      border-radius: 5px;
+      color: #333;
+      font-size: 1.1rem;
+    }
+    .metadata {
+      margin-top: 20px;
+      padding: 15px;
+      background-color: #f1f3f4;
+      border-radius: 5px;
+      color: #333;
+      font-size: 1.1rem;
+    }
+    .list-group-item {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
+    .list-group-item a {
+      text-decoration: none;
+      color: #0d6efd;
+    }
+    .list-group-item a:hover {
+      text-decoration: underline;
+    }
+    #controls {
+      margin-bottom: 20px;
+    }
+    #formats {
+      font-size: 0.9rem;
+      color: #666;
+      margin-bottom: 10px;
+    }
+  </style>
+</head>
+<body>
+  <div class="container">
+    <h1>Audio Analysis API</h1>
+    <h2>Upload or Record Audio Files</h2>
+    <!-- Form for Uploading Files -->
+    <form id="upload-form" class="mb-4">
+      <div class="mb-3">
+        <input type="file" id="audio-file" class="form-control" accept="audio/*" multiple />
+      </div>
+      <button type="button" id="upload-button" class="btn btn-primary w-100">Upload & Analyze</button>
+    </form>
+    <hr>
+    <!-- Buttons for Recording Audio -->
+    <div id="controls" class="mb-4 text-center">
+      <button id="recordButton" class="btn btn-success">Record</button>
+      <button id="pauseButton" class="btn btn-warning" disabled>Pause</button>
+      <button id="stopButton" class="btn btn-danger" disabled>Stop</button>
+    </div>
+    <div id="formats" class="mb-3 text-center">Format: Start recording to see sample rate</div>
+    <p class="text-center"><strong>Recordings:</strong></p>
+    <ol id="recordingsList" class="list-group"></ol>
+    <!-- Metadata Display -->
+    <div class="metadata mt-4">
+      <h3>File Metadata</h3>
+      <!-- Dropdown Filters -->
+      <div class="mb-3 d-flex flex-wrap gap-3">
+        <i>Choisir un Label</i>
+        <select id="filter-label" class="form-select">
+          <option value="">All Labels</option>
+        </select>
+        <i>Choisir un System</i>
+        <select id="filter-system" class="form-select">
+          <option value="">All Systems</option>
+        </select>
+        <i>Choisir un Codec</i>
+        <select id="filter-codec" class="form-select">
+          <option value="">All Codecs</option>
+        </select>
+        <i>Choisir un Genre</i>
+        <select id="filter-genre" class="form-select">
+          <option value="">All Genres</option>
+        </select>
+        <i>Choisir une Année</i>
+        <select id="filter-year" class="form-select">
+          <option value="">All Years</option>
+        </select>
+      </div>
+      <div id="metadata-display"></div>
+    </div>
+    <!-- Response Display -->
+    <div class="response mt-4">
+      <h3>Analysis Results</h3>
+      <div id="response"></div>
+    </div>
+  </div>
+  <!-- Load Recorder.js and your script.js -->
+  <script src="/static/recorder.js"></script>
+  <script src="/static/script.js"></script>
+</body>
+</html>

Web/script.js CHANGED Viewed

@@ -1,3 +1,6 @@
 const uploadButton = document.getElementById('upload-button');
 const audioFileInput = document.getElementById('audio-file');
 const recordButton = document.getElementById('recordButton');
@@ -5,494 +8,426 @@ const stopButton = document.getElementById('stopButton');
 const pauseButton = document.getElementById('pauseButton');
 const responseDiv = document.getElementById('response');
 const metadataDisplay = document.getElementById('metadata-display');
-let gumStream;
-let rec;
-let input;
-let audioContext;
 function startAudioContext() {
-    if (!audioContext) {
-      audioContext = new (window.AudioContext || window.webkitAudioContext)();
-    } else if (audioContext.state === 'suspended') {
-      audioContext.resume().then(() => {
-        console.log('AudioContext repris');
-      });
-    }
   }
-// Fonction pour rééchantillonner l'audio à 16 kHz
 async function resampleAudio(blob, targetSampleRate = 16000) {
-    return new Promise((resolve, reject) => {
-      const reader = new FileReader();
-      reader.onload = async () => {
-        const audioContext = new (window.AudioContext || window.webkitAudioContext)();
-        const buffer = await audioContext.decodeAudioData(reader.result);
-        // Créer un nouvel AudioContext avec le taux d'échantillonnage cible
-        const offlineContext = new OfflineAudioContext(
-          buffer.numberOfChannels,
-          buffer.length * (targetSampleRate / buffer.sampleRate),
-          targetSampleRate
-        );
-        // Créer une source audio avec le buffer original
-        const source = offlineContext.createBufferSource();
-        source.buffer = buffer;
-        // Connecter la source au contexte offline
-        source.connect(offlineContext.destination);
-        source.start();
-        // Rendre l'audio
-        const resampledBuffer = await offlineContext.startRendering();
-        // Convertir le buffer rééchantillonné en WAV
-        const wavBlob = bufferToWav(resampledBuffer);
         resolve(wavBlob);
-      };
-      reader.onerror = reject;
-      reader.readAsArrayBuffer(blob);
-    });
 }
-// Fonction pour convertir un AudioBuffer en WAV
 function bufferToWav(buffer) {
   const numChannels = buffer.numberOfChannels;
   const sampleRate = buffer.sampleRate;
-  const length = buffer.length * numChannels * 2; // 2 bytes par échantillon
-  const data = new Float32Array(length);
-  // Interleave les canaux
-  for (let channel = 0; channel < numChannels; channel++) {
-    const channelData = buffer.getChannelData(channel);
     for (let i = 0; i < channelData.length; i++) {
-      data[i * numChannels + channel] = channelData[i];
     }
   }
-  // Encoder en WAV
-  const wavBlob = encodeWAV(data, sampleRate, numChannels);
-  return wavBlob;
 }
-// Fonction pour encoder des données audio en WAV
 function encodeWAV(samples, sampleRate, numChannels) {
   const buffer = new ArrayBuffer(44 + samples.length * 2);
   const view = new DataView(buffer);
-  // Écrire l'en-tête WAV
   writeString(view, 0, 'RIFF');
   view.setUint32(4, 36 + samples.length * 2, true);
   writeString(view, 8, 'WAVE');
   writeString(view, 12, 'fmt ');
   view.setUint32(16, 16, true);
-  view.setUint16(20, 1, true); // Format PCM
   view.setUint16(22, numChannels, true);
   view.setUint32(24, sampleRate, true);
   view.setUint32(28, sampleRate * numChannels * 2, true);
   view.setUint16(32, numChannels * 2, true);
-  view.setUint16(34, 16, true); // Bits par échantillon
   writeString(view, 36, 'data');
   view.setUint32(40, samples.length * 2, true);
-  // Écrire les échantillons audio
   floatTo16BitPCM(view, 44, samples);
   return new Blob([view], { type: 'audio/wav' });
 }
-// Fonction utilitaire pour écrire une chaîne dans un DataView
-function writeString(view, offset, string) {
-  for (let i = 0; i < string.length; i++) {
-    view.setUint8(offset + i, string.charCodeAt(i));
-  }
-}
-// Fonction utilitaire pour convertir des échantillons flottants en PCM 16 bits
 function floatTo16BitPCM(view, offset, input) {
   for (let i = 0; i < input.length; i++, offset += 2) {
-    const s = Math.max(-1, Math.min(1, input[i]));
     view.setInt16(offset, s < 0 ? s * 0x8000 : s * 0x7FFF, true);
   }
 }
-// Function to fetch metadata from the text file
 async function fetchMetadata() {
-    try {
-        const response = await fetch('../metadata.txt'); // Assurez-vous que le fichier est accessible
-        if (!response.ok) {
-            throw new Error('Failed to fetch metadata');
-        }
-        const text = await response.text();
-        console.log('Metadata file content:', text); // Debugging
-        // Split text into lines
-        const lines = text.split('\n').map(line => line.trim()).filter(line => line !== '');
-        if (lines.length < 2) {
-            throw new Error('Metadata file is empty or malformed');
-        }
-        // Extract headers
-        const headers = lines[0].split(';').map(h => h.trim().toLowerCase());
-        // Extract data
-        const metadata = lines.slice(1).map(line => {
-            const values = line.split(';').map(value => value.trim());
-            let entry = {};
-            headers.forEach((header, index) => {
-                entry[header] = values[index] || 'N/A'; // Default to 'N/A' if missing data
-            });
-            return entry;
-        });
-        console.log('Parsed Metadata:', metadata); // Debugging
-        return metadata;
-    } catch (error) {
-        console.error('Error fetching metadata:', error);
-        return [];
-    }
 }
 function populateFilters() {
-    const predefinedValues = {
-        label: ["spoof", "genuine"],
-        system: ["bonafide"].concat(Array.from({ length: 19 }, (_, i) => `A${String(i + 1).padStart(2, '0')}`)),
-        codec: ["FLAC", "WAV", "MP3"],
-        genre: ["male", "female"],
-        year: ["2020", "2021", "2022", "2023", "2024", "2025"]
-    };
-    Object.keys(predefinedValues).forEach(key => {
-        populateDropdown(`filter-${key}`, predefinedValues[key]);
-    });
 }
 function populateDropdown(id, values) {
-    const select = document.getElementById(id);
-    select.innerHTML = '<option value="">All</option>'; // Ajouter l'option "All" par défaut
-    values.forEach(value => {
-        const option = document.createElement("option");
-        option.value = value;
-        option.textContent = value.charAt(0).toUpperCase() + value.slice(1); // Majuscule initiale
-        select.appendChild(option);
-    });
-    select.addEventListener("change", filterMetadata);
-}
-function filterMetadata() {
-    const selectedLabel = document.getElementById("filter-label").value.toLowerCase();
-    const selectedSystem = document.getElementById("filter-system").value.toLowerCase();
-    const selectedCodec = document.getElementById("filter-codec").value.toLowerCase();
-    const selectedGenre = document.getElementById("filter-genre").value.toLowerCase();
-    const selectedYear = document.getElementById("filter-year").value.toLowerCase();
-    fetchMetadata().then(metadata => {
-        const filteredMetadata = metadata.filter(entry =>
-            (selectedLabel === "" || entry.label.toLowerCase() === selectedLabel) &&
-            (selectedSystem === "" || entry.system.toLowerCase() === selectedSystem) &&
-            (selectedCodec === "" || entry.codec.toLowerCase() === selectedCodec) &&
-            (selectedGenre === "" || entry.genre.toLowerCase() === selectedGenre) &&
-            (selectedYear === "" || entry.year.toLowerCase() === selectedYear)
-        );
-        displayMetadata(null, metadata, true); // Mode filtrage
-    });
 }
 function displayMetadata(files, metadata, filteredOnly = false) {
-    metadataDisplay.innerHTML = ''; // Nettoyer l'affichage avant de remplir
-    // Si on ne filtre pas et qu'aucun fichier n'est sélectionné, afficher tout
-    if (!filteredOnly && (!files || files.length === 0)) {
-        metadataDisplay.innerHTML = '<p>No files selected.</p>';
-        return;
-    }
-    let filteredMetadata;
-    if (filteredOnly) {
-        // Appliquer les filtres des drop-downs
-        const selectedLabel = document.getElementById("filter-label").value.toLowerCase();
-        const selectedSystem = document.getElementById("filter-system").value.toLowerCase();
-        const selectedCodec = document.getElementById("filter-codec").value.toLowerCase();
-        const selectedGenre = document.getElementById("filter-genre").value.toLowerCase();
-        const selectedYear = document.getElementById("filter-year").value.toLowerCase();
-        filteredMetadata = metadata.filter(entry =>
-            (selectedLabel === "" || entry.label.toLowerCase() === selectedLabel) &&
-            (selectedSystem === "" || entry.system.toLowerCase() === selectedSystem) &&
-            (selectedCodec === "" || entry.codec.toLowerCase() === selectedCodec) &&
-            (selectedGenre === "" || entry.genre.toLowerCase() === selectedGenre) &&
-            (selectedYear === "" || entry.year.toLowerCase() === selectedYear)
-        );
-    } else {
-        // Obtenir la liste des fichiers sélectionnés
-        const selectedFiles = Array.from(files).map(file => file.name.trim().toLowerCase());
-        // Filtrer les métadonnées pour ne garder que celles des fichiers sélectionnés
-        filteredMetadata = metadata.filter(entry => selectedFiles.includes(entry.filedir.trim().toLowerCase()));
-    }
-    // Vérifier si aucun résultat après filtrage
-    if (filteredMetadata.length === 0) {
-        metadataDisplay.innerHTML = '<p>No metadata found.</p>';
-        return;
-    }
-    // Création du tableau Bootstrap
-    const table = document.createElement('table');
-    table.classList.add('table', 'table-striped', 'table-bordered');
-    // Création de l'en-tête du tableau
-    const headerRow = document.createElement('tr');
-    Object.keys(filteredMetadata[0]).forEach(headerText => {
-        const header = document.createElement('th');
-        header.textContent = headerText.charAt(0).toUpperCase() + headerText.slice(1);
-        headerRow.appendChild(header);
-    });
-    table.appendChild(headerRow);
-    // Remplir le tableau avec les métadonnées filtrées
-    filteredMetadata.forEach(entry => {
-        const row = document.createElement('tr');
-        Object.values(entry).forEach(value => {
-            const cell = document.createElement('td');
-            cell.textContent = value;
-            row.appendChild(cell);
-        });
-        table.appendChild(row);
-    });
-    // Ajouter le tableau à la section d'affichage des métadonnées
-    metadataDisplay.appendChild(table);
 }
 document.addEventListener('DOMContentLoaded', async () => {
-    populateFilters(); // Charger les valeurs fixes dans les drop-downs
-    const metadata = await fetchMetadata();
-    displayMetadata(metadata);
 });
-async function uploadAudio(files) {
-    if (!files || files.length === 0) {
-        alert('Please select or record files first!');
-        return;
-    }
-    const formData = new FormData();
-    const filesArray = Array.from(files);
-    for (let i = 0; i < filesArray.length; i++) {
-        formData.append('files', filesArray[i]);
-    }
-    responseDiv.textContent = 'Uploading and analyzing audio...';
-    try {
-        const metadataObj = await fetchMetadata();
-        displayMetadata(filesArray, metadataObj); // Afficher uniquement les métadonnées des fichiers sélectionnés
-        const response = await fetch('http://127.0.0.1:8000/predict/', {
-            method: 'POST',
-            body: formData,
-        });
-        if (!response.ok) {
-            const errorData = await response.json();
-            throw new Error(`Server error: ${errorData.message || response.statusText}`);
-        }
-        const data = await response.json();
-        responseDiv.innerHTML = '';
-        data.forEach((result, index) => {
-            const resultDiv = document.createElement('div');
-            resultDiv.innerHTML = `File: <b>${result.filename}</b>, Label: <b>${result.label}</b>, Confidence: <b>${result.confidence}</b>`;
-            responseDiv.appendChild(resultDiv);
-        });
-    } catch (error) {
-        console.error('Error:', error);
-        responseDiv.textContent = 'Error: ' + error.message;
-    }
 }
-uploadButton.addEventListener('click', () => {
-    const files = audioFileInput.files;
-    if (!files || files.length === 0) {
-        alert('Please select files first!');
-        return;
     }
-    uploadAudio(files);
 });
-// Start Recording
 recordButton.addEventListener('click', async () => {
-    startAudioContext(); // Initialiser ou reprendre l'AudioContext
-    console.log('Recording started');
-    const constraints = { audio: true, video: false };
-    try {
-      gumStream = await navigator.mediaDevices.getUserMedia(constraints);
-      console.log('Microphone access granted');
-      input = audioContext.createMediaStreamSource(gumStream);
-      console.log('Audio source created');
-      // Initialize Recorder.js
-      rec = new Recorder(input, { numChannels: 1 });
-      console.log('Recorder initialized');
-      // Start recording
-      rec.record();
-      console.log('Recording started');
-      // Update button states
-      recordButton.disabled = true;
-      stopButton.disabled = false;
-      pauseButton.disabled = false;
-    } catch (error) {
-      console.error('Error accessing microphone:', error);
-      alert('Error accessing microphone: ' + error.message);
-    }
-  });
-  function stopRecording() {
-    console.log('stopRecording called');
-    // Désactiver les boutons
-    stopButton.disabled = true;
-    recordButton.disabled = false;
-    pauseButton.disabled = true;
-    pauseButton.innerHTML = 'Pause';
-    // Arrêter l'enregistrement
     rec.stop();
-    console.log('Recording stopped');
-    // Arrêter l'accès au microphone
     gumStream.getAudioTracks()[0].stop();
-    console.log('Microphone access stopped');
-    // Exporter l'audio en WAV
-    rec.exportWAV(async (blob) => {
-      console.log('Audio exported as WAV');
-      // Vérifier la taille du fichier audio
-      if (blob.size === 0) {
-        console.error('Le fichier audio est vide.');
-        responseDiv.textContent = 'Erreur : Le fichier audio est vide.';
-        return;
-      }
-      // Rééchantillonner l'audio à 16 kHz
-      try {
-        const resampledBlob = await resampleAudio(blob, 16000);
-        console.log('Audio rééchantillonné à 16 kHz');
-        // Envoyer l'audio rééchantillonné à l'API pour analyse
-        await sendAudioToAPI(resampledBlob); // Ajouter await ici
-      } catch (error) {
-        console.error('Erreur lors du rééchantillonnage :', error);
-        responseDiv.textContent = 'Erreur : ' + error.message;
-      }
-    });
-}
-async function sendAudioToAPI(blob) {
-    console.log('Sending audio to API');
-    const formData = new FormData();
-    const filename = 'recorded-audio.wav'; // Nom du fichier
-    formData.append('files', blob, filename); // Utiliser 'files' comme nom de champ
     try {
-        const response = await fetch('http://127.0.0.1:8000/predict/', {
-            method: 'POST',
-            body: formData,
-        });
-        console.log('API response status:', response.status);
-        if (!response.ok) {
-            throw new Error(`HTTP error! status: ${response.status}`);
         }
-        const data = await response.json();
-        console.log('API response data:', data);
-        // Afficher le résultat de l'API
-        if (data.length > 0) {
-            responseDiv.innerHTML = `Label: <b>${data[0].label}</b>, Confidence: <b>${data[0].confidence}</b>`;
-        } else {
-            responseDiv.textContent = 'Error: No data returned from the API.';
-        }
-    } catch (error) {
-        console.error('Error sending audio to API:', error);
-        responseDiv.textContent = 'Error: ' + error.message;
-    }
-}
-// Pause Recording
-pauseButton.addEventListener('click', () => {
-    if (rec.recording) {
-      // Pause recording
-      rec.stop();
-      pauseButton.textContent = 'Resume';
-    } else {
-      // Resume recording
-      rec.record();
-      pauseButton.textContent = 'Pause';
     }
   });
-stopButton.addEventListener('click', () => {
-    stopRecording();
 });
-// Ajouter un écouteur d'événement pour un clic utilisateur sur le bouton d'enregistrement
-recordButton.addEventListener('click', async () => {
-    startAudioContext(); // Initialiser ou reprendre l'AudioContext
-    console.log('Recording started');
-    const constraints = { audio: true, video: false };
-    try {
-      gumStream = await navigator.mediaDevices.getUserMedia(constraints);
-      console.log('Microphone access granted');
-      input = audioContext.createMediaStreamSource(gumStream);
-      console.log('Audio source created');
-      // Initialize Recorder.js
-      rec = new Recorder(input, { numChannels: 1 });
-      console.log('Recorder initialized');
-      // Start recording
-      rec.record();
-      console.log('Recording started');
-      // Update button states
-      recordButton.disabled = true;
-      stopButton.disabled = false;
-      pauseButton.disabled = false;
-    } catch (error) {
-      console.error('Error accessing microphone:', error);
-      alert('Error accessing microphone: ' + error.message);
-    }
-  });

+// Web/script.js
+// Requires: recorder.js included in page and wavesurfer.js (CDN in index.html)
 const uploadButton = document.getElementById('upload-button');
 const audioFileInput = document.getElementById('audio-file');
 const recordButton = document.getElementById('recordButton');
 const pauseButton = document.getElementById('pauseButton');
 const responseDiv = document.getElementById('response');
 const metadataDisplay = document.getElementById('metadata-display');
+const recordingsList = document.getElementById('recordingsList');
+let gumStream = null;
+let rec = null;
+let input = null;
+let audioContext = null;
+// initialize audio context
 function startAudioContext() {
+  if (!audioContext) {
+    audioContext = new (window.AudioContext || window.webkitAudioContext)();
+  } else if (audioContext.state === 'suspended') {
+    audioContext.resume();
   }
+}
+// ---- Resampling helpers (kept from your original code) ----
 async function resampleAudio(blob, targetSampleRate = 16000) {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onload = async () => {
+      const aCtx = new (window.OfflineAudioContext || window.webkitOfflineAudioContext || window.AudioContext)(1, 2, targetSampleRate);
+      const baseCtx = new (window.AudioContext || window.webkitAudioContext)();
+      try {
+        const decoded = await baseCtx.decodeAudioData(reader.result.slice(0));
+        const offline = new OfflineAudioContext(decoded.numberOfChannels, Math.ceil(decoded.length * targetSampleRate / decoded.sampleRate), targetSampleRate);
+        const src = offline.createBufferSource();
+        src.buffer = decoded;
+        src.connect(offline.destination);
+        src.start(0);
+        const rendered = await offline.startRendering();
+        const wavBlob = bufferToWav(rendered);
         resolve(wavBlob);
+      } catch (err) {
+        reject(err);
+      }
+    };
+    reader.onerror = reject;
+    reader.readAsArrayBuffer(blob);
+  });
 }
 function bufferToWav(buffer) {
   const numChannels = buffer.numberOfChannels;
   const sampleRate = buffer.sampleRate;
+  const length = buffer.length * numChannels;
+  const samples = new Float32Array(length);
+  for (let ch = 0; ch < numChannels; ch++) {
+    const channelData = buffer.getChannelData(ch);
     for (let i = 0; i < channelData.length; i++) {
+      samples[i * numChannels + ch] = channelData[i];
     }
   }
+  return encodeWAV(samples, sampleRate, numChannels);
 }
 function encodeWAV(samples, sampleRate, numChannels) {
   const buffer = new ArrayBuffer(44 + samples.length * 2);
   const view = new DataView(buffer);
+  function writeString(view, offset, string) {
+    for (let i = 0; i < string.length; i++) {
+      view.setUint8(offset + i, string.charCodeAt(i));
+    }
+  }
   writeString(view, 0, 'RIFF');
   view.setUint32(4, 36 + samples.length * 2, true);
   writeString(view, 8, 'WAVE');
   writeString(view, 12, 'fmt ');
   view.setUint32(16, 16, true);
+  view.setUint16(20, 1, true);
   view.setUint16(22, numChannels, true);
   view.setUint32(24, sampleRate, true);
   view.setUint32(28, sampleRate * numChannels * 2, true);
   view.setUint16(32, numChannels * 2, true);
+  view.setUint16(34, 16, true);
   writeString(view, 36, 'data');
   view.setUint32(40, samples.length * 2, true);
   floatTo16BitPCM(view, 44, samples);
   return new Blob([view], { type: 'audio/wav' });
 }
 function floatTo16BitPCM(view, offset, input) {
   for (let i = 0; i < input.length; i++, offset += 2) {
+    let s = Math.max(-1, Math.min(1, input[i]));
     view.setInt16(offset, s < 0 ? s * 0x8000 : s * 0x7FFF, true);
   }
 }
+// ---------------- Metadata functions (kept with minimal refactor) ----------------
 async function fetchMetadata() {
+  try {
+    const response = await fetch('/static/metadata.txt');
+    if (!response.ok) throw new Error('Failed to fetch metadata');
+    const text = await response.text();
+    const lines = text.split('\n').map(l => l.trim()).filter(l => l !== '');
+    if (lines.length < 2) return [];
+    const headers = lines[0].split(';').map(h => h.trim().toLowerCase());
+    const metadata = lines.slice(1).map(line => {
+      const values = line.split(';').map(v => v.trim());
+      const entry = {};
+      headers.forEach((h, i) => entry[h] = values[i] || 'N/A');
+      return entry;
+    });
+    return metadata;
+  } catch (err) {
+    console.warn('fetchMetadata failed:', err);
+    return [];
+  }
 }
 function populateFilters() {
+  const predefinedValues = {
+    label: ["spoof", "genuine"],
+    system: ["bonafide"].concat(Array.from({ length: 19 }, (_, i) => `A${String(i + 1).padStart(2, '0')}`)),
+    codec: ["FLAC", "WAV", "MP3"],
+    genre: ["male", "female"],
+    year: ["2020", "2021", "2022", "2023", "2024", "2025"]
+  };
+  Object.keys(predefinedValues).forEach(key => {
+    populateDropdown(`filter-${key}`, predefinedValues[key]);
+  });
 }
 function populateDropdown(id, values) {
+  const select = document.getElementById(id);
+  if (!select) return;
+  select.innerHTML = '<option value="">All</option>';
+  values.forEach(v => {
+    const option = document.createElement('option');
+    option.value = v;
+    option.textContent = v.charAt(0).toUpperCase() + v.slice(1);
+    select.appendChild(option);
+  });
+  select.addEventListener('change', filterMetadata);
 }
 function displayMetadata(files, metadata, filteredOnly = false) {
+  metadataDisplay.innerHTML = '';
+  if (!filteredOnly && (!files || files.length === 0)) {
+    metadataDisplay.innerHTML = '<p>No files selected.</p>';
+    return;
+  }
+  let filteredMetadata;
+  if (filteredOnly) {
+    const sLabel = document.getElementById("filter-label").value.toLowerCase();
+    const sSystem = document.getElementById("filter-system").value.toLowerCase();
+    const sCodec = document.getElementById("filter-codec").value.toLowerCase();
+    const sGenre = document.getElementById("filter-genre").value.toLowerCase();
+    const sYear = document.getElementById("filter-year").value.toLowerCase();
+    filteredMetadata = metadata.filter(entry =>
+      (sLabel === "" || (entry.label && entry.label.toLowerCase() === sLabel)) &&
+      (sSystem === "" || (entry.system && entry.system.toLowerCase() === sSystem)) &&
+      (sCodec === "" || (entry.codec && entry.codec.toLowerCase() === sCodec)) &&
+      (sGenre === "" || (entry.genre && entry.genre.toLowerCase() === sGenre)) &&
+      (sYear === "" || (entry.year && entry.year.toLowerCase() === sYear))
+    );
+  } else {
+    const selectedFiles = Array.from(files).map(f => f.name.trim().toLowerCase());
+    filteredMetadata = metadata.filter(entry => selectedFiles.includes(entry.filedir.trim().toLowerCase()));
+  }
+  if (!filteredMetadata || filteredMetadata.length === 0) {
+    metadataDisplay.innerHTML = '<p>No metadata found.</p>';
+    return;
+  }
+  const table = document.createElement('table');
+  table.className = 'table table-striped table-bordered';
+  const headerRow = document.createElement('tr');
+  Object.keys(filteredMetadata[0]).forEach(h => {
+    const th = document.createElement('th'); th.textContent = h.charAt(0).toUpperCase() + h.slice(1); headerRow.appendChild(th);
+  });
+  table.appendChild(headerRow);
+  filteredMetadata.forEach(entry => {
+    const row = document.createElement('tr');
+    Object.values(entry).forEach(val => { const td = document.createElement('td'); td.textContent = val; row.appendChild(td); });
+    table.appendChild(row);
+  });
+  metadataDisplay.appendChild(table);
 }
 document.addEventListener('DOMContentLoaded', async () => {
+  populateFilters();
+  const metadata = await fetchMetadata();
+  displayMetadata(null, metadata, true);
 });
+// ---------------- Waveform / UI helpers ----------------
+// create a unique id
+function uid(prefix='id') {
+  return prefix + '_' + Math.random().toString(36).slice(2,9);
+}
+// create waveform card for a blob or file
+function createWaveformItem({ blob, filename, filetype, origin = 'upload' }) {
+  const id = uid('wave');
+  // List item
+  const li = document.createElement('li');
+  li.className = 'list-group-item';
+  // Card wrapper
+  const wrapper = document.createElement('div');
+  wrapper.className = 'wave-item';
+  const title = document.createElement('div');
+  title.className = 'file-title';
+  title.textContent = filename || 'Audio';
+  // waveform container
+  const canvasDiv = document.createElement('div');
+  canvasDiv.className = 'wave-canvas';
+  canvasDiv.id = id;
+  // controls
+  const controls = document.createElement('div');
+  controls.className = 'wave-controls';
+  const playBtn = document.createElement('button');
+  playBtn.className = 'btn btn-sm btn-primary btn-small';
+  playBtn.textContent = 'Play';
+  const pauseBtn = document.createElement('button');
+  pauseBtn.className = 'btn btn-sm btn-secondary btn-small';
+  pauseBtn.textContent = 'Pause';
+  const downloadBtn = document.createElement('a');
+  downloadBtn.className = 'btn btn-sm btn-outline-success btn-small';
+  downloadBtn.textContent = 'Download';
+  downloadBtn.href = URL.createObjectURL(blob);
+  downloadBtn.download = filename || 'audio.wav';
+  const analyzeBtn = document.createElement('button');
+  analyzeBtn.className = 'btn btn-sm btn-info btn-small';
+  analyzeBtn.textContent = 'Analyze';
+  controls.appendChild(playBtn);
+  controls.appendChild(pauseBtn);
+  controls.appendChild(downloadBtn);
+  controls.appendChild(analyzeBtn);
+  wrapper.appendChild(title);
+  wrapper.appendChild(canvasDiv);
+  wrapper.appendChild(controls);
+  li.appendChild(wrapper);
+  recordingsList.prepend(li); // newest first
+  // instantiate wavesurfer on the container
+  const ws = WaveSurfer.create({
+    container: `#${id}`,
+    waveColor: '#8ab4f8',
+    progressColor: '#0d6efd',
+    height: 80,
+    responsive: true,
+    normalize: true,
+    backend: 'WebAudio'
+  });
+  ws.loadBlob(blob);
+  // wire buttons
+  playBtn.addEventListener('click', () => ws.play());
+  pauseBtn.addEventListener('click', () => ws.pause());
+  ws.on('finish', () => { playBtn.textContent = 'Play'; });
+  ws.on('play', () => { playBtn.textContent = 'Playing'; });
+  ws.on('pause', () => { playBtn.textContent = 'Play'; });
+  analyzeBtn.addEventListener('click', async () => {
+    // send this blob to API for analysis
+    responseDiv.textContent = 'Analyzing ' + (filename || 'file') + ' ...';
+    try {
+      const res = await sendBlobToAPI(blob, filename);
+      if (Array.isArray(res) && res.length > 0) {
+        responseDiv.innerHTML = `File: <b>${res[0].filename || filename}</b>, Label: <b>${res[0].label}</b>, Confidence: <b>${res[0].confidence}</b>`;
+      } else {
+        responseDiv.textContent = 'No response from API';
+      }
+    } catch (err) {
+      responseDiv.textContent = 'Error: ' + err.message;
+    }
+  });
+  return { listItem: li, wavesurfer: ws };
+}
+// send a Blob to backend predict endpoint
+async function sendBlobToAPI(blob, filename = 'file.wav') {
+  const formData = new FormData();
+  formData.append('files', blob, filename);
+  const resp = await fetch('http://127.0.0.1:8000/predict/', { method: 'POST', body: formData });
+  if (!resp.ok) {
+    const txt = await resp.text();
+    throw new Error('Server error: ' + resp.status + ' - ' + txt);
+  }
+  return resp.json();
 }
+// handle file uploads -> create waveform items (and optionally auto-analyze)
+audioFileInput.addEventListener('change', async (e) => {
+  const files = Array.from(e.target.files || []);
+  if (!files.length) return;
+  const metadata = await fetchMetadata();
+  displayMetadata(files, metadata, false);
+  for (const f of files) {
+    // convert to blob (it's already blob/file)
+    const blob = f;
+    // create waveform card
+    createWaveformItem({ blob, filename: f.name, filetype: f.type, origin: 'upload' });
+  }
+});
+// upload & analyze button (sends all current files displayed in list)
+uploadButton.addEventListener('click', async () => {
+  // collect blobs from list items (download link href or wavesurfer backend)
+  const items = Array.from(recordingsList.querySelectorAll('.wave-item'));
+  if (items.length === 0) {
+    alert('No files to upload/analyze. Please upload or record first.');
+    return;
+  }
+  // gather blobs by reading download links
+  const blobs = [];
+  items.forEach(item => {
+    const dl = item.querySelector('a[download]');
+    if (dl) {
+      // reconstruct blob from object URL is not possible; better to re-create from wavesurfer peaks via export?
+      // Simpler approach: when creating each item we stored blob via closure. We'll instead keep a weak map.
     }
+  });
+  // Simpler: ask user to select files via the file input for bulk upload; otherwise analyze each displayed item individually:
+  const list = recordingsList.querySelectorAll('.wave-item');
+  if (list.length === 0) return;
+  responseDiv.textContent = 'Uploading and analyzing audio...';
+  // iterate and click each Analyze button sequentially
+  for (const item of list) {
+    const analyzeBtn = item.querySelector('button.btn-info');
+    if (analyzeBtn) analyzeBtn.click();
+    // slight delay between requests to avoid flooding
+    await new Promise(r => setTimeout(r, 500));
+  }
 });
+// ---------------- Recording logic (cleaned, single set of handlers) ----------------
 recordButton.addEventListener('click', async () => {
+  startAudioContext();
+  const constraints = { audio: true };
+  try {
+    gumStream = await navigator.mediaDevices.getUserMedia(constraints);
+    input = audioContext.createMediaStreamSource(gumStream);
+    rec = new Recorder(input, { numChannels: 1 });
+    rec.record();
+    recordButton.disabled = true;
+    stopButton.disabled = false;
+    pauseButton.disabled = false;
+    pauseButton.textContent = 'Pause';
+  } catch (err) {
+    alert('Microphone access denied: ' + (err.message || err));
+  }
+});
+pauseButton.addEventListener('click', () => {
+  if (!rec) return;
+  if (rec.recording) {
     rec.stop();
+    pauseButton.textContent = 'Resume';
+  } else {
+    rec.record();
+    pauseButton.textContent = 'Pause';
+  }
+});
+stopButton.addEventListener('click', () => {
+  if (!rec) return;
+  stopButton.disabled = true;
+  pauseButton.disabled = true;
+  recordButton.disabled = false;
+  rec.stop();
+  // stop tracks
+  if (gumStream && gumStream.getAudioTracks && gumStream.getAudioTracks()[0]) {
     gumStream.getAudioTracks()[0].stop();
+  }
+  rec.exportWAV(async (blob) => {
+    // sanity check
+    if (!blob || blob.size === 0) {
+      responseDiv.textContent = 'Error: recorded file is empty.';
+      return;
+    }
+    // create waveform from original blob (also resample for sending)
     try {
+      // show original waveform
+      const item = createWaveformItem({ blob, filename: `recording_${new Date().toISOString()}.wav`, origin: 'record' });
+      // resample to 16kHz for API and attach analyze behavior to that blob (we will override analyze button behavior to use resampled blob)
+      const resampledBlob = await resampleAudio(blob, 16000);
+      // patch the analyze button to send resampledBlob instead of original
+      const analyzeBtn = item.listItem.querySelector('button.btn-info');
+      analyzeBtn.onclick = async () => {
+        responseDiv.textContent = 'Analyzing recorded audio...';
+        try {
+          const res = await sendBlobToAPI(resampledBlob, analyzeBtn ? analyzeBtn.dataset?.filename : 'recording.wav');
+          if (Array.isArray(res) && res.length > 0) {
+            responseDiv.innerHTML = `File: <b>${res[0].filename || 'recording'}</b>, Label: <b>${res[0].label}</b>, Confidence: <b>${res[0].confidence}</b>`;
+          } else {
+            responseDiv.textContent = 'No response from API';
+          }
+        } catch (err) {
+          responseDiv.textContent = 'Error: ' + err.message;
         }
+      };
+    } catch (err) {
+      console.error('Resample or create waveform failed:', err);
+      responseDiv.textContent = 'Error processing recording: ' + err.message;
     }
   });
 });
+// ---------------- Utility: attach analyze to uploaded file items so they use original blob ----------------
+// Note: createWaveformItem already wires analyze to send the provided blob; so uploaded files will analyze original file
+// End of script

Web/script_org.js ADDED Viewed

	@@ -0,0 +1,498 @@

+const uploadButton = document.getElementById('upload-button');
+const audioFileInput = document.getElementById('audio-file');
+const recordButton = document.getElementById('recordButton');
+const stopButton = document.getElementById('stopButton');
+const pauseButton = document.getElementById('pauseButton');
+const responseDiv = document.getElementById('response');
+const metadataDisplay = document.getElementById('metadata-display');
+let gumStream;
+let rec;
+let input;
+let audioContext;
+function startAudioContext() {
+    if (!audioContext) {
+      audioContext = new (window.AudioContext || window.webkitAudioContext)();
+    } else if (audioContext.state === 'suspended') {
+      audioContext.resume().then(() => {
+        console.log('AudioContext repris');
+      });
+    }
+  }
+// Fonction pour rééchantillonner l'audio à 16 kHz
+async function resampleAudio(blob, targetSampleRate = 16000) {
+    return new Promise((resolve, reject) => {
+      const reader = new FileReader();
+      reader.onload = async () => {
+        const audioContext = new (window.AudioContext || window.webkitAudioContext)();
+        const buffer = await audioContext.decodeAudioData(reader.result);
+        // Créer un nouvel AudioContext avec le taux d'échantillonnage cible
+        const offlineContext = new OfflineAudioContext(
+          buffer.numberOfChannels,
+          buffer.length * (targetSampleRate / buffer.sampleRate),
+          targetSampleRate
+        );
+        // Créer une source audio avec le buffer original
+        const source = offlineContext.createBufferSource();
+        source.buffer = buffer;
+        // Connecter la source au contexte offline
+        source.connect(offlineContext.destination);
+        source.start();
+        // Rendre l'audio
+        const resampledBuffer = await offlineContext.startRendering();
+        // Convertir le buffer rééchantillonné en WAV
+        const wavBlob = bufferToWav(resampledBuffer);
+        resolve(wavBlob);
+      };
+      reader.onerror = reject;
+      reader.readAsArrayBuffer(blob);
+    });
+}
+// Fonction pour convertir un AudioBuffer en WAV
+function bufferToWav(buffer) {
+  const numChannels = buffer.numberOfChannels;
+  const sampleRate = buffer.sampleRate;
+  const length = buffer.length * numChannels * 2; // 2 bytes par échantillon
+  const data = new Float32Array(length);
+  // Interleave les canaux
+  for (let channel = 0; channel < numChannels; channel++) {
+    const channelData = buffer.getChannelData(channel);
+    for (let i = 0; i < channelData.length; i++) {
+      data[i * numChannels + channel] = channelData[i];
+    }
+  }
+  // Encoder en WAV
+  const wavBlob = encodeWAV(data, sampleRate, numChannels);
+  return wavBlob;
+}
+// Fonction pour encoder des données audio en WAV
+function encodeWAV(samples, sampleRate, numChannels) {
+  const buffer = new ArrayBuffer(44 + samples.length * 2);
+  const view = new DataView(buffer);
+  // Écrire l'en-tête WAV
+  writeString(view, 0, 'RIFF');
+  view.setUint32(4, 36 + samples.length * 2, true);
+  writeString(view, 8, 'WAVE');
+  writeString(view, 12, 'fmt ');
+  view.setUint32(16, 16, true);
+  view.setUint16(20, 1, true); // Format PCM
+  view.setUint16(22, numChannels, true);
+  view.setUint32(24, sampleRate, true);
+  view.setUint32(28, sampleRate * numChannels * 2, true);
+  view.setUint16(32, numChannels * 2, true);
+  view.setUint16(34, 16, true); // Bits par échantillon
+  writeString(view, 36, 'data');
+  view.setUint32(40, samples.length * 2, true);
+  // Écrire les échantillons audio
+  floatTo16BitPCM(view, 44, samples);
+  return new Blob([view], { type: 'audio/wav' });
+}
+// Fonction utilitaire pour écrire une chaîne dans un DataView
+function writeString(view, offset, string) {
+  for (let i = 0; i < string.length; i++) {
+    view.setUint8(offset + i, string.charCodeAt(i));
+  }
+}
+// Fonction utilitaire pour convertir des échantillons flottants en PCM 16 bits
+function floatTo16BitPCM(view, offset, input) {
+  for (let i = 0; i < input.length; i++, offset += 2) {
+    const s = Math.max(-1, Math.min(1, input[i]));
+    view.setInt16(offset, s < 0 ? s * 0x8000 : s * 0x7FFF, true);
+  }
+}
+// Function to fetch metadata from the text file
+async function fetchMetadata() {
+    try {
+        const response = await fetch('../metadata.txt'); // Assurez-vous que le fichier est accessible
+        if (!response.ok) {
+            throw new Error('Failed to fetch metadata');
+        }
+        const text = await response.text();
+        console.log('Metadata file content:', text); // Debugging
+        // Split text into lines
+        const lines = text.split('\n').map(line => line.trim()).filter(line => line !== '');
+        if (lines.length < 2) {
+            throw new Error('Metadata file is empty or malformed');
+        }
+        // Extract headers
+        const headers = lines[0].split(';').map(h => h.trim().toLowerCase());
+        // Extract data
+        const metadata = lines.slice(1).map(line => {
+            const values = line.split(';').map(value => value.trim());
+            let entry = {};
+            headers.forEach((header, index) => {
+                entry[header] = values[index] || 'N/A'; // Default to 'N/A' if missing data
+            });
+            return entry;
+        });
+        console.log('Parsed Metadata:', metadata); // Debugging
+        return metadata;
+    } catch (error) {
+        console.error('Error fetching metadata:', error);
+        return [];
+    }
+}
+function populateFilters() {
+    const predefinedValues = {
+        label: ["spoof", "genuine"],
+        system: ["bonafide"].concat(Array.from({ length: 19 }, (_, i) => `A${String(i + 1).padStart(2, '0')}`)),
+        codec: ["FLAC", "WAV", "MP3"],
+        genre: ["male", "female"],
+        year: ["2020", "2021", "2022", "2023", "2024", "2025"]
+    };
+    Object.keys(predefinedValues).forEach(key => {
+        populateDropdown(`filter-${key}`, predefinedValues[key]);
+    });
+}
+function populateDropdown(id, values) {
+    const select = document.getElementById(id);
+    select.innerHTML = '<option value="">All</option>'; // Ajouter l'option "All" par défaut
+    values.forEach(value => {
+        const option = document.createElement("option");
+        option.value = value;
+        option.textContent = value.charAt(0).toUpperCase() + value.slice(1); // Majuscule initiale
+        select.appendChild(option);
+    });
+    select.addEventListener("change", filterMetadata);
+}
+function filterMetadata() {
+    const selectedLabel = document.getElementById("filter-label").value.toLowerCase();
+    const selectedSystem = document.getElementById("filter-system").value.toLowerCase();
+    const selectedCodec = document.getElementById("filter-codec").value.toLowerCase();
+    const selectedGenre = document.getElementById("filter-genre").value.toLowerCase();
+    const selectedYear = document.getElementById("filter-year").value.toLowerCase();
+    fetchMetadata().then(metadata => {
+        const filteredMetadata = metadata.filter(entry =>
+            (selectedLabel === "" || entry.label.toLowerCase() === selectedLabel) &&
+            (selectedSystem === "" || entry.system.toLowerCase() === selectedSystem) &&
+            (selectedCodec === "" || entry.codec.toLowerCase() === selectedCodec) &&
+            (selectedGenre === "" || entry.genre.toLowerCase() === selectedGenre) &&
+            (selectedYear === "" || entry.year.toLowerCase() === selectedYear)
+        );
+        displayMetadata(null, metadata, true); // Mode filtrage
+    });
+}
+function displayMetadata(files, metadata, filteredOnly = false) {
+    metadataDisplay.innerHTML = ''; // Nettoyer l'affichage avant de remplir
+    // Si on ne filtre pas et qu'aucun fichier n'est sélectionné, afficher tout
+    if (!filteredOnly && (!files || files.length === 0)) {
+        metadataDisplay.innerHTML = '<p>No files selected.</p>';
+        return;
+    }
+    let filteredMetadata;
+    if (filteredOnly) {
+        // Appliquer les filtres des drop-downs
+        const selectedLabel = document.getElementById("filter-label").value.toLowerCase();
+        const selectedSystem = document.getElementById("filter-system").value.toLowerCase();
+        const selectedCodec = document.getElementById("filter-codec").value.toLowerCase();
+        const selectedGenre = document.getElementById("filter-genre").value.toLowerCase();
+        const selectedYear = document.getElementById("filter-year").value.toLowerCase();
+        filteredMetadata = metadata.filter(entry =>
+            (selectedLabel === "" || entry.label.toLowerCase() === selectedLabel) &&
+            (selectedSystem === "" || entry.system.toLowerCase() === selectedSystem) &&
+            (selectedCodec === "" || entry.codec.toLowerCase() === selectedCodec) &&
+            (selectedGenre === "" || entry.genre.toLowerCase() === selectedGenre) &&
+            (selectedYear === "" || entry.year.toLowerCase() === selectedYear)
+        );
+    } else {
+        // Obtenir la liste des fichiers sélectionnés
+        const selectedFiles = Array.from(files).map(file => file.name.trim().toLowerCase());
+        // Filtrer les métadonnées pour ne garder que celles des fichiers sélectionnés
+        filteredMetadata = metadata.filter(entry => selectedFiles.includes(entry.filedir.trim().toLowerCase()));
+    }
+    // Vérifier si aucun résultat après filtrage
+    if (filteredMetadata.length === 0) {
+        metadataDisplay.innerHTML = '<p>No metadata found.</p>';
+        return;
+    }
+    // Création du tableau Bootstrap
+    const table = document.createElement('table');
+    table.classList.add('table', 'table-striped', 'table-bordered');
+    // Création de l'en-tête du tableau
+    const headerRow = document.createElement('tr');
+    Object.keys(filteredMetadata[0]).forEach(headerText => {
+        const header = document.createElement('th');
+        header.textContent = headerText.charAt(0).toUpperCase() + headerText.slice(1);
+        headerRow.appendChild(header);
+    });
+    table.appendChild(headerRow);
+    // Remplir le tableau avec les métadonnées filtrées
+    filteredMetadata.forEach(entry => {
+        const row = document.createElement('tr');
+        Object.values(entry).forEach(value => {
+            const cell = document.createElement('td');
+            cell.textContent = value;
+            row.appendChild(cell);
+        });
+        table.appendChild(row);
+    });
+    // Ajouter le tableau à la section d'affichage des métadonnées
+    metadataDisplay.appendChild(table);
+}
+document.addEventListener('DOMContentLoaded', async () => {
+    populateFilters(); // Charger les valeurs fixes dans les drop-downs
+    const metadata = await fetchMetadata();
+    displayMetadata(metadata);
+});
+async function uploadAudio(files) {
+    if (!files || files.length === 0) {
+        alert('Please select or record files first!');
+        return;
+    }
+    const formData = new FormData();
+    const filesArray = Array.from(files);
+    for (let i = 0; i < filesArray.length; i++) {
+        formData.append('files', filesArray[i]);
+    }
+    responseDiv.textContent = 'Uploading and analyzing audio...';
+    try {
+        const metadataObj = await fetchMetadata();
+        displayMetadata(filesArray, metadataObj); // Afficher uniquement les métadonnées des fichiers sélectionnés
+        const response = await fetch('http://127.0.0.1:8000/predict/', {
+            method: 'POST',
+            body: formData,
+        });
+        if (!response.ok) {
+            const errorData = await response.json();
+            throw new Error(`Server error: ${errorData.message || response.statusText}`);
+        }
+        const data = await response.json();
+        responseDiv.innerHTML = '';
+        data.forEach((result, index) => {
+            const resultDiv = document.createElement('div');
+            resultDiv.innerHTML = `File: <b>${result.filename}</b>, Label: <b>${result.label}</b>, Confidence: <b>${result.confidence}</b>`;
+            responseDiv.appendChild(resultDiv);
+        });
+    } catch (error) {
+        console.error('Error:', error);
+        responseDiv.textContent = 'Error: ' + error.message;
+    }
+}
+uploadButton.addEventListener('click', () => {
+    const files = audioFileInput.files;
+    if (!files || files.length === 0) {
+        alert('Please select files first!');
+        return;
+    }
+    uploadAudio(files);
+});
+// Start Recording
+recordButton.addEventListener('click', async () => {
+    startAudioContext(); // Initialiser ou reprendre l'AudioContext
+    console.log('Recording started');
+    const constraints = { audio: true, video: false };
+    try {
+      gumStream = await navigator.mediaDevices.getUserMedia(constraints);
+      console.log('Microphone access granted');
+      input = audioContext.createMediaStreamSource(gumStream);
+      console.log('Audio source created');
+      // Initialize Recorder.js
+      rec = new Recorder(input, { numChannels: 1 });
+      console.log('Recorder initialized');
+      // Start recording
+      rec.record();
+      console.log('Recording started');
+      // Update button states
+      recordButton.disabled = true;
+      stopButton.disabled = false;
+      pauseButton.disabled = false;
+    } catch (error) {
+      console.error('Error accessing microphone:', error);
+      alert('Error accessing microphone: ' + error.message);
+    }
+  });
+  function stopRecording() {
+    console.log('stopRecording called');
+    // Désactiver les boutons
+    stopButton.disabled = true;
+    recordButton.disabled = false;
+    pauseButton.disabled = true;
+    pauseButton.innerHTML = 'Pause';
+    // Arrêter l'enregistrement
+    rec.stop();
+    console.log('Recording stopped');
+    // Arrêter l'accès au microphone
+    gumStream.getAudioTracks()[0].stop();
+    console.log('Microphone access stopped');
+    // Exporter l'audio en WAV
+    rec.exportWAV(async (blob) => {
+      console.log('Audio exported as WAV');
+      // Vérifier la taille du fichier audio
+      if (blob.size === 0) {
+        console.error('Le fichier audio est vide.');
+        responseDiv.textContent = 'Erreur : Le fichier audio est vide.';
+        return;
+      }
+      // Rééchantillonner l'audio à 16 kHz
+      try {
+        const resampledBlob = await resampleAudio(blob, 16000);
+        console.log('Audio rééchantillonné à 16 kHz');
+        // Envoyer l'audio rééchantillonné à l'API pour analyse
+        await sendAudioToAPI(resampledBlob); // Ajouter await ici
+      } catch (error) {
+        console.error('Erreur lors du rééchantillonnage :', error);
+        responseDiv.textContent = 'Erreur : ' + error.message;
+      }
+    });
+}
+async function sendAudioToAPI(blob) {
+    console.log('Sending audio to API');
+    const formData = new FormData();
+    const filename = 'recorded-audio.wav'; // Nom du fichier
+    formData.append('files', blob, filename); // Utiliser 'files' comme nom de champ
+    try {
+        const response = await fetch('http://127.0.0.1:8000/predict/', {
+            method: 'POST',
+            body: formData,
+        });
+        console.log('API response status:', response.status);
+        if (!response.ok) {
+            throw new Error(`HTTP error! status: ${response.status}`);
+        }
+        const data = await response.json();
+        console.log('API response data:', data);
+        // Afficher le résultat de l'API
+        if (data.length > 0) {
+            responseDiv.innerHTML = `Label: <b>${data[0].label}</b>, Confidence: <b>${data[0].confidence}</b>`;
+        } else {
+            responseDiv.textContent = 'Error: No data returned from the API.';
+        }
+    } catch (error) {
+        console.error('Error sending audio to API:', error);
+        responseDiv.textContent = 'Error: ' + error.message;
+    }
+}
+// Pause Recording
+pauseButton.addEventListener('click', () => {
+    if (rec.recording) {
+      // Pause recording
+      rec.stop();
+      pauseButton.textContent = 'Resume';
+    } else {
+      // Resume recording
+      rec.record();
+      pauseButton.textContent = 'Pause';
+    }
+  });
+stopButton.addEventListener('click', () => {
+    stopRecording();
+});
+// Ajouter un écouteur d'événement pour un clic utilisateur sur le bouton d'enregistrement
+recordButton.addEventListener('click', async () => {
+    startAudioContext(); // Initialiser ou reprendre l'AudioContext
+    console.log('Recording started');
+    const constraints = { audio: true, video: false };
+    try {
+      gumStream = await navigator.mediaDevices.getUserMedia(constraints);
+      console.log('Microphone access granted');
+      input = audioContext.createMediaStreamSource(gumStream);
+      console.log('Audio source created');
+      // Initialize Recorder.js
+      rec = new Recorder(input, { numChannels: 1 });
+      console.log('Recorder initialized');
+      // Start recording
+      rec.record();
+      console.log('Recording started');
+      // Update button states
+      recordButton.disabled = true;
+      stopButton.disabled = false;
+      pauseButton.disabled = false;
+    } catch (error) {
+      console.error('Error accessing microphone:', error);
+      alert('Error accessing microphone: ' + error.message);
+    }
+  });