change interface to visualize the wavform

Web/index.html

@@ -16,12 +16,43 @@
     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; }
+
+    .wave-item {
+      margin-bottom: 18px;
+      padding: 12px;
+      border-radius: 8px;
+      background: #fbfbfb;
+      border: 1px solid #eee;
+    }
+
+    .wave-controls {
+      display:flex;
+      gap:10px;
+      align-items:center;
+      margin-top:8px;
+      flex-wrap:wrap;
+    }
+
+    .remove-btn {
+      background: #dc3545;
+      border: none;
+      padding: 4px 10px;
+      color: white;
+      border-radius: 5px;
+      cursor: pointer;
+      font-size: 0.8rem;
+    }
+
+    .remove-btn:hover {
+      background: #b52b38;
+    }
+
+    #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; }
@@ -53,6 +84,12 @@
     <p class="text-center"><strong>Recordings & Uploads:</strong></p>
     <ol id="recordingsList" class="list-group"></ol>
 
+    <!-- MOVED ABOVE METADATA -->
+    <div class="response mt-4">
+      <h3>Analysis Results</h3>
+      <div id="response"></div>
+    </div>
+
     <div class="metadata mt-4">
       <h3>File Metadata</h3>
       <div class="mb-3 d-flex flex-wrap gap-3">
@@ -70,16 +107,10 @@
       <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) -->
+  <!-- Recorder.js -->
   <script src="/static/recorder.js"></script>
-
-  <!-- Your main script -->
   <script src="/static/script.js"></script>
 </body>
 </html>

Web/script.js

@@ -1,214 +1,11 @@
-// Web/script.js
-// Requires: recorder.js included in page and wavesurfer.js (CDN in index.html)
+// ... (everything above stays unchanged)
 
-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');
-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';
 
@@ -216,12 +13,10 @@ function createWaveformItem({ blob, filename, filetype, origin = 'upload' }) {
   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';
 
@@ -236,9 +31,18 @@ function createWaveformItem({ blob, filename, filetype, origin = 'upload' }) {
   const downloadBtn = document.createElement('a');
   downloadBtn.className = 'btn btn-sm btn-outline-success btn-small';
   downloadBtn.textContent = 'Download';
-  downloadBtn.href = URL.createObjectURL(blob);
+  const blobUrl = URL.createObjectURL(blob);
+  downloadBtn.href = blobUrl;
   downloadBtn.download = filename || 'audio.wav';
 
+  // ----------------------------
+  // ⭐ NEW: REMOVE BUTTON
+  // ----------------------------
+  const removeBtn = document.createElement("button");
+  removeBtn.className = "remove-btn";
+  removeBtn.innerText = "Remove";
+  // ----------------------------
+
   const analyzeBtn = document.createElement('button');
   analyzeBtn.className = 'btn btn-sm btn-info btn-small';
   analyzeBtn.textContent = 'Analyze';
@@ -246,6 +50,10 @@ function createWaveformItem({ blob, filename, filetype, origin = 'upload' }) {
   controls.appendChild(playBtn);
   controls.appendChild(pauseBtn);
   controls.appendChild(downloadBtn);
+
+  // ADD REMOVE BUTTON TO CONTROLS
+  controls.appendChild(removeBtn);
+
   controls.appendChild(analyzeBtn);
 
   wrapper.appendChild(title);
@@ -253,9 +61,8 @@ function createWaveformItem({ blob, filename, filetype, origin = 'upload' }) {
   wrapper.appendChild(controls);
 
   li.appendChild(wrapper);
-  recordingsList.prepend(li); // newest first
+  recordingsList.prepend(li);
 
-  // instantiate wavesurfer on the container
   const ws = WaveSurfer.create({
     container: `#${id}`,
     waveColor: '#8ab4f8',
@@ -268,20 +75,22 @@ function createWaveformItem({ blob, filename, filetype, origin = 'upload' }) {
 
   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>`;
+        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';
       }
@@ -290,144 +99,15 @@ function createWaveformItem({ blob, filename, filetype, origin = 'upload' }) {
     }
   });
 
-  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.
-    }
+  // -----------------------------------------------------------
+  // ⭐ NEW: REMOVE FUNCTIONALITY — ERASES THIS ENTIRE WAVE CARD
+  // -----------------------------------------------------------
+  removeBtn.addEventListener("click", () => {
+    try { ws.destroy(); } catch (e) {}
+    URL.revokeObjectURL(blobUrl);
+    li.remove();
   });
+  // -----------------------------------------------------------
 
-  // 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
+  return { listItem: li, wavesurfer: ws };
+}