Spaces:

MeysamSh
/

Speech-DeepFake-Detection

Sleeping

App Files Files Community

MeysamSh commited on Nov 21, 2025

Commit

edbbc3c

1 Parent(s): 0b3fb1f

change interface to visualize the wavform

Browse files

Files changed (2) hide show

Web/index.html +119 -82
Web/script.js +190 -102

Web/index.html CHANGED Viewed

@@ -1,116 +1,153 @@
-<!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: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; }
   </style>
 </head>
 <body>
-  <div class="container">
-    <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 />
       </div>
-      <button type="button" id="upload-button" class="btn btn-primary w-100">Upload & Analyze</button>
-    </form>
-    <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>
-    <!-- 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">
-        <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>
-  <!-- Recorder.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" />
+  <title>Speech DeepFake detection </title>
+  <!-- Bootstrap for quick UI -->
+  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
+  <!-- WaveSurfer -->
   <script src="https://unpkg.com/wavesurfer.js"></script>
   <style>
+    :root{
+      --accent:#ff5500; /* SoundCloud-esque orange */
+      --muted:#6c757d;
+      --card-bg: #ffffff;
+      --page-bg: #fbfbfc;
     }
+    body{
+      background: linear-gradient(180deg, #fbfbfc 0%, #f6f7f9 100%);
+      font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
+      padding: 28px;
+      color:#222;
+    }
+    .app {
+      max-width: 960px;
+      margin: 0 auto;
+      background: var(--card-bg);
+      border-radius: 12px;
+      box-shadow: 0 8px 30px rgba(34,41,47,0.06);
+      padding: 26px;
+    }
+    h1 { color:#111; font-weight:700; margin-bottom:6px; }
+    p.lead { color:var(--muted); margin-top:0; }
+    /* Controls */
+    .control-row { display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
+    #formats { color:var(--muted); font-size:0.95rem; }
+    /* Wave card (SoundCloud-like compact list) */
+    .wave-item{
       display:flex;
+      gap:14px;
       align-items:center;
+      padding:12px;
+      border-radius:10px;
+      background: linear-gradient(90deg, rgba(255,255,255,0.6), rgba(250,250,251,0.6));
+      border:1px solid #eee;
+      margin-bottom:12px;
     }
+    .wave-meta { min-width:160px; max-width:220px; }
+    .file-title { font-weight:600; color:#111; margin-bottom:6px; }
+    .wave-canvas { flex:1; min-width:240px; }
+    .wave-controls{ display:flex; gap:8px; align-items:center; }
+    .btn-play{
+      background: var(--accent);
       border: none;
+      color: #fff;
     }
+    .small-muted { color:var(--muted); font-size:0.9rem; }
+    /* Analysis & metadata panels */
+    .panel { margin-top:18px; padding:12px; border-radius:8px; background:#fafafa; border:1px solid #eee; }
+    .response pre{ white-space:pre-wrap; word-break:break-word; }
+    input[type="file"] { padding:4px; }
+    /* Make waves visually similar to SoundCloud: subtle rounded waves and orange progress */
+    .wavesurfer .wave { border-radius:4px; overflow:hidden; }
   </style>
 </head>
 <body>
+  <div class="app">
+    <div class="d-flex justify-content-between align-items-start mb-3">
+      <div>
+        <h1>SoundCloud-style Recorder & Analyzer</h1>
+        <p class="lead">Record audio, upload WAV/MP3, preview as waveform, play and analyze.</p>
+      </div>
+      <div class="text-end small-muted">
+        <div>Format: <span id="formats">—</span></div>
+        <div class="mt-2">Files shown in SoundCloud-like waveform</div>
+      </div>
+    </div>
+    <!-- Upload -->
+    <div class="panel">
       <div class="mb-3">
+        <label class="form-label">Upload audio files</label>
+        <input id="audio-file" type="file" class="form-control" accept="audio/*,.wav" multiple />
+      </div>
+      <div class="d-grid gap-2">
+        <button id="upload-button" type="button" class="btn btn-outline-primary">Upload & Analyze</button>
       </div>
     </div>
+    <!-- Recorder -->
+    <div class="panel mt-3">
+      <div class="mb-2"><strong>Record audio</strong></div>
+      <div class="control-row">
+        <button id="recordButton" class="btn btn-success">Start recording</button>
+        <button id="pauseButton" class="btn btn-warning" disabled>Pause</button>
+        <button id="stopButton" class="btn btn-danger" disabled>Stop</button>
+        <div class="small-muted ms-2">Recorded files appear below with waveform preview</div>
+      </div>
+    </div>
+    <!-- Recordings List -->
+    <div class="mt-3">
+      <h5>Recordings & Uploads</h5>
+      <ol id="recordingsList" class="list-unstyled p-0"></ol>
     </div>
+    <!-- Analysis / Metadata -->
+    <div class="row mt-3">
+      <div class="col-md-6">
+        <div class="panel response">
+          <h6>Analysis Results</h6>
+          <div id="response"><small class="small-muted">No analysis yet</small></div>
+        </div>
+      </div>
+      <div class="col-md-6">
+        <div class="panel metadata">
+          <h6>File Metadata</h6>
+          <div id="metadata-display"><small class="small-muted">Upload or record to see metadata</small></div>
+        </div>
       </div>
     </div>
   </div>
+  <!-- Use the uploaded recorder.js and script.js files from your workspace -->
+  <!-- per your instruction we reference the uploaded file paths -->
+  <script src="/mnt/data/recorder.js"></script>
+  <script src="/mnt/data/script.js"></script>
+  <!-- small inline initializer to ensure script.js hooks run after DOM loads -->
+  <script>
+    // The provided script.js expects DOM elements with IDs used above.
+    // If your script.js exposes an init() or similar, call it here; otherwise it will run on load.
+    // We'll just ensure basic elements exist and (optionally) show sample rate when available.
+    document.addEventListener('DOMContentLoaded', () => {
+      const formatsEl = document.getElementById('formats');
+      if (!formatsEl) return;
+      // If script.js attaches the recorder and updates #formats, it will override this.
+      formatsEl.textContent = 'Ready — click Record or Upload a file';
+    });
+  </script>
 </body>
+</html>

Web/script.js CHANGED Viewed

@@ -1,113 +1,201 @@
-// ... (everything above stays unchanged)
-function createWaveformItem({ blob, filename, filetype, origin = 'upload' }) {
-  const id = uid('wave');
-  const li = document.createElement('li');
-  li.className = 'list-group-item';
-  const wrapper = document.createElement('div');
-  wrapper.className = 'wave-item';
-  const title = document.createElement('div');
-  title.className = 'file-title';
-  title.textContent = filename || 'Audio';
-  const canvasDiv = document.createElement('div');
-  canvasDiv.className = 'wave-canvas';
-  canvasDiv.id = id;
-  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';
-  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';
-  controls.appendChild(playBtn);
-  controls.appendChild(pauseBtn);
-  controls.appendChild(downloadBtn);
-  // ADD REMOVE BUTTON TO CONTROLS
-  controls.appendChild(removeBtn);
-  controls.appendChild(analyzeBtn);
-  wrapper.appendChild(title);
-  wrapper.appendChild(canvasDiv);
-  wrapper.appendChild(controls);
-  li.appendChild(wrapper);
-  recordingsList.prepend(li);
-  const ws = WaveSurfer.create({
-    container: `#${id}`,
-    waveColor: '#8ab4f8',
-    progressColor: '#0d6efd',
-    height: 80,
-    responsive: true,
-    normalize: true,
-    backend: 'WebAudio'
-  });
-  ws.loadBlob(blob);
-  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 () => {
-    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;
     }
-  });
-  // -----------------------------------------------------------
-  // ⭐ NEW: REMOVE FUNCTIONALITY — ERASES THIS ENTIRE WAVE CARD
-  // -----------------------------------------------------------
-  removeBtn.addEventListener("click", () => {
-    try { ws.destroy(); } catch (e) {}
-    URL.revokeObjectURL(blobUrl);
-    li.remove();
-  });
-  // -----------------------------------------------------------
-  return { listItem: li, wavesurfer: ws };
-}

+/* ============================================================
+   SoundCloud-Style Audio Recorder + Waveform Display + Analyzer
+   ============================================================
+*/
+// Global variables
+let audioContext;
+let gumStream;
+let rec;
+let input;
+// DOM Elements
+const recordBtn = document.getElementById("recordButton");
+const stopBtn = document.getElementById("stopButton");
+const pauseBtn = document.getElementById("pauseButton");
+const recordingsList = document.getElementById("recordingsList");
+const uploadButton = document.getElementById("upload-button");
+const uploadInput = document.getElementById("audio-file");
+const responseBox = document.getElementById("response");
+const metadataBox = document.getElementById("metadata-display");
+// ==============================
+// Recording Controls
+// ==============================
+recordBtn.addEventListener("click", startRecording);
+stopBtn.addEventListener("click", stopRecording);
+pauseBtn.addEventListener("click", pauseRecording);
+// Start recording
+function startRecording() {
+    console.log("Recording started...");
+    recordBtn.disabled = true;
+    stopBtn.disabled = false;
+    pauseBtn.disabled = false;
+    navigator.mediaDevices.getUserMedia({ audio: true }).then(function (stream) {
+        audioContext = new (window.AudioContext || window.webkitAudioContext)();
+        document.getElementById("formats").innerText =
+            "Sample rate: " + audioContext.sampleRate + " Hz";
+        gumStream = stream;
+        input = audioContext.createMediaStreamSource(stream);
+        rec = new Recorder(input, { numChannels: 1 });
+        rec.record();
+    }).catch(function (e) {
+        console.error("Could not start recording:", e);
+        recordBtn.disabled = false;
+        stopBtn.disabled = true;
+        pauseBtn.disabled = true;
+    });
+}
+// Pause recording
+function pauseRecording() {
+    if (rec.recording) {
+        rec.stop();
+        pauseBtn.innerText = "Resume";
+    } else {
+        rec.record();
+        pauseBtn.innerText = "Pause";
+    }
+}
+// Stop recording
+function stopRecording() {
+    console.log("Recording stopped.");
+    stopBtn.disabled = true;
+    recordBtn.disabled = false;
+    pauseBtn.disabled = true;
+    pauseBtn.innerText = "Pause";
+    rec.stop();
+    gumStream.getAudioTracks()[0].stop();
+    rec.exportWAV(createWaveformItem);
+}
+// ==============================
+// File Upload
+// ==============================
+uploadButton.addEventListener("click", () => {
+    if (!uploadInput.files.length) {
+        alert("Select at least one file.");
+        return;
+    }
+    Array.from(uploadInput.files).forEach((file) => handleUploadedFile(file));
+});
+function handleUploadedFile(file) {
+    const url = URL.createObjectURL(file);
+    createWaveformItem(file, url);
+}
+// ==============================
+// Create SoundCloud-like Waveform
+// ==============================
+function createWaveformItem(blob, forcedUrl = null) {
+    const url = forcedUrl || URL.createObjectURL(blob);
+    const li = document.createElement("li");
+    li.className = "wave-item";
+    const container = document.createElement("div");
+    container.className = "wave-canvas";
+    const meta = document.createElement("div");
+    meta.className = "wave-meta";
+    meta.innerHTML = `<div class="file-title">${blob.name || "recording.wav"}</div>`;
+    // Play button
+    const playBtn = document.createElement("button");
+    playBtn.className = "btn btn-play btn-sm";
+    playBtn.innerText = "Play";
+    // Analyze button
+    const analyzeBtn = document.createElement("button");
+    analyzeBtn.className = "btn btn-outline-secondary btn-sm";
+    analyzeBtn.innerText = "Analyze";
+    const controls = document.createElement("div");
+    controls.className = "wave-controls";
+    controls.appendChild(playBtn);
+    controls.appendChild(analyzeBtn);
+    li.appendChild(meta);
+    li.appendChild(container);
+    li.appendChild(controls);
+    recordingsList.appendChild(li);
+    // Create WaveSurfer
+    const wavesurfer = WaveSurfer.create({
+        container,
+        waveColor: "#bbb",
+        progressColor: "#ff5500",
+        cursorColor: "#333",
+        barWidth: 2,
+        height: 70,
+        responsive: true,
+    });
+    wavesurfer.load(url);
+    // Toggle play/pause
+    playBtn.addEventListener("click", () => {
+        wavesurfer.playPause();
+        playBtn.innerText = wavesurfer.isPlaying() ? "Pause" : "Play";
+    });
+    // Analyze
+    analyzeBtn.addEventListener("click", () => {
+        analyzeAudio(blob);
+    });
+    // Metadata
+    blob.arrayBuffer().then((buffer) => {
+        const ctx = new AudioContext();
+        ctx.decodeAudioData(buffer).then((decoded) => {
+            metadataBox.innerHTML = `
+                <strong>Channels:</strong> ${decoded.numberOfChannels}<br>
+                <strong>Duration:</strong> ${decoded.duration.toFixed(2)}s<br>
+                <strong>Sample Rate:</strong> ${decoded.sampleRate} Hz
+            `;
+        });
+    });
+}
+// ==============================
+// Audio Analysis API (placeholder)
+// ==============================
+async function analyzeAudio(blob) {
+    responseBox.innerHTML = "<em>Analyzing...</em>";
+    // Convert Blob to File
+    const file = new File([blob], blob.name || "audio.wav", { type: blob.type });
+    const formData = new FormData();
+    formData.append("file", file);
+    try {
+        // Replace the URL with your real backend endpoint
+        const res = await fetch("http://localhost:7860/predict", {
+            method: "POST",
+            body: formData,
+        });
+        const data = await res.json();
+        responseBox.innerHTML = `<pre>${JSON.stringify(data, null, 2)}</pre>`;
     } catch (err) {
+        responseBox.innerHTML = `<span style="color:red;">Analysis failed.</span>`;
+        console.error(err);
     }
+}