Upload 4 files

Dockerfile

@@ -0,0 +1,14 @@
+FROM python:3.11-slim
+
+WORKDIR /app
+COPY requirements.txt .
+RUN pip install --no-cache-dir -r requirements.txt
+
+COPY . .
+
+# HF Spaces persistent storage
+ENV DATA_DIR=/data
+RUN mkdir -p /data/audio
+
+EXPOSE 7860
+CMD ["python", "app.py"]

app.py

@@ -0,0 +1,161 @@
+"""
+Audio Recording Studio — collaborative audio collection tool.
+Flask + SQLite backend.  Deploy on HF Spaces (Docker) or any server.
+"""
+
+import os
+import sqlite3
+import uuid
+from datetime import datetime
+
+from flask import (
+    Flask, render_template, request, jsonify, send_from_directory, send_file
+)
+
+app = Flask(__name__)
+
+DATA_DIR = os.environ.get("DATA_DIR", "data")
+DB_PATH = os.path.join(DATA_DIR, "recordings.db")
+AUDIO_DIR = os.path.join(DATA_DIR, "audio")
+os.makedirs(AUDIO_DIR, exist_ok=True)
+
+
+# ── Database ────────────────────────────────────────────────────
+
+def get_db():
+    conn = sqlite3.connect(DB_PATH)
+    conn.row_factory = sqlite3.Row
+    return conn
+
+
+def init_db():
+    with get_db() as db:
+        db.execute("""
+            CREATE TABLE IF NOT EXISTS recordings (
+                id          TEXT PRIMARY KEY,
+                user        TEXT NOT NULL,
+                name        TEXT NOT NULL,
+                filename    TEXT NOT NULL,
+                duration    REAL DEFAULT 0,
+                created_at  TEXT NOT NULL,
+                notes       TEXT DEFAULT ''
+            )
+        """)
+
+
+init_db()
+
+
+# ── Routes ──────────────────────────────────────────────────────
+
+@app.route("/")
+def index():
+    return render_template("index.html")
+
+
+@app.route("/api/recordings", methods=["GET"])
+def list_recordings():
+    with get_db() as db:
+        rows = db.execute(
+            "SELECT * FROM recordings ORDER BY created_at DESC"
+        ).fetchall()
+    return jsonify([dict(r) for r in rows])
+
+
+@app.route("/api/recordings", methods=["POST"])
+def create_recording():
+    audio = request.files.get("audio")
+    if not audio:
+        return jsonify({"error": "No audio file"}), 400
+
+    user = request.form.get("user", "Anonymous").strip() or "Anonymous"
+    name = request.form.get("name", "").strip()
+    duration = float(request.form.get("duration", 0))
+    notes = request.form.get("notes", "").strip()
+
+    rec_id = uuid.uuid4().hex[:12]
+    ts = datetime.now().strftime("%Y-%m-%d %H:%M:%S")
+
+    if not name:
+        name = f"Recording {ts}"
+
+    filename = f"{rec_id}.webm"
+    audio.save(os.path.join(AUDIO_DIR, filename))
+
+    with get_db() as db:
+        db.execute(
+            "INSERT INTO recordings (id, user, name, filename, duration, created_at, notes) "
+            "VALUES (?, ?, ?, ?, ?, ?, ?)",
+            (rec_id, user, name, filename, duration, ts, notes),
+        )
+
+    return jsonify({
+        "id": rec_id, "user": user, "name": name,
+        "filename": filename, "duration": duration,
+        "created_at": ts, "notes": notes,
+    }), 201
+
+
+@app.route("/api/recordings/<rec_id>", methods=["PATCH"])
+def update_recording(rec_id):
+    data = request.get_json(force=True)
+    fields, values = [], []
+    for col in ("name", "notes", "user"):
+        if col in data:
+            fields.append(f"{col} = ?")
+            values.append(data[col])
+    if not fields:
+        return jsonify({"error": "Nothing to update"}), 400
+
+    values.append(rec_id)
+    with get_db() as db:
+        db.execute(f"UPDATE recordings SET {', '.join(fields)} WHERE id = ?", values)
+    return jsonify({"ok": True})
+
+
+@app.route("/api/recordings/<rec_id>", methods=["DELETE"])
+def delete_recording(rec_id):
+    with get_db() as db:
+        row = db.execute("SELECT filename FROM recordings WHERE id = ?", (rec_id,)).fetchone()
+        if row:
+            path = os.path.join(AUDIO_DIR, row["filename"])
+            if os.path.exists(path):
+                os.remove(path)
+            db.execute("DELETE FROM recordings WHERE id = ?", (rec_id,))
+    return jsonify({"ok": True})
+
+
+@app.route("/audio/<filename>")
+def serve_audio(filename):
+    return send_from_directory(AUDIO_DIR, filename)
+
+
+@app.route("/api/export")
+def export_excel():
+    import pandas as pd
+
+    with get_db() as db:
+        rows = db.execute("SELECT * FROM recordings ORDER BY created_at DESC").fetchall()
+
+    data = []
+    for r in rows:
+        data.append({
+            "Name": r["name"],
+            "User": r["user"],
+            "Timestamp": r["created_at"],
+            "Duration (s)": round(r["duration"], 1),
+            "Notes": r["notes"],
+            "Audio File": r["filename"],
+        })
+
+    df = pd.DataFrame(data) if data else pd.DataFrame(
+        columns=["Name", "User", "Timestamp", "Duration (s)", "Notes", "Audio File"]
+    )
+    path = os.path.join(DATA_DIR, "export.xlsx")
+    df.to_excel(path, index=False)
+    return send_file(path, as_attachment=True, download_name="recordings.xlsx")
+
+
+if __name__ == "__main__":
+    port = int(os.environ.get("PORT", 7860))
+    app.run(host="0.0.0.0", port=port, debug=False)

requirements.txt

@@ -0,0 +1,3 @@
+flask
+pandas
+openpyxl

templates/index.html

@@ -0,0 +1,361 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width,initial-scale=1">
+<title>Audio Recording Studio</title>
+<style>
+/* ── Reset & base ─────────────────────────────────────────── */
+*{box-sizing:border-box;margin:0;padding:0}
+:root{
+  --bg:#f5f6fa;--surface:#fff;--border:#e2e5f1;
+  --primary:#4361ee;--primary-hover:#3a56d4;
+  --danger:#ef476f;--danger-hover:#d63a5e;
+  --success:#06d6a0;--text:#1e1e2f;--muted:#6c7293;
+  --radius:8px;--shadow:0 1px 3px rgba(0,0,0,.08);
+}
+body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;background:var(--bg);color:var(--text);line-height:1.5}
+
+/* ── Layout ───────────────────────────────────────────────── */
+.app{display:flex;min-height:100vh}
+.sidebar{width:340px;background:var(--surface);border-right:1px solid var(--border);padding:24px;display:flex;flex-direction:column;gap:16px;position:sticky;top:0;height:100vh;overflow-y:auto}
+.main{flex:1;padding:24px;overflow-y:auto}
+
+/* ── Sidebar ──────────────────────────────────────────────── */
+.logo{font-size:20px;font-weight:700;color:var(--primary);display:flex;align-items:center;gap:8px}
+.logo svg{width:28px;height:28px}
+
+.field label{display:block;font-size:12px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;margin-bottom:4px}
+.field input,.field textarea{width:100%;padding:8px 10px;border:1px solid var(--border);border-radius:var(--radius);font-size:14px;outline:none;transition:border .15s}
+.field input:focus,.field textarea:focus{border-color:var(--primary)}
+.field textarea{resize:vertical;min-height:56px}
+
+.timer{text-align:center;font-size:40px;font-weight:300;font-variant-numeric:tabular-nums;color:var(--muted);padding:8px 0}
+.timer.active{color:var(--danger);font-weight:400}
+
+canvas#waveform{width:100%;height:40px;border-radius:6px;background:#f0f1f6}
+
+.rec-controls{display:flex;gap:10px}
+.rec-controls button{flex:1}
+button{padding:10px 16px;font-size:14px;font-weight:600;border:none;border-radius:var(--radius);cursor:pointer;transition:background .15s,opacity .15s}
+button:disabled{opacity:.4;cursor:not-allowed}
+.btn-record{background:var(--danger);color:#fff}
+.btn-record:hover:not(:disabled){background:var(--danger-hover)}
+.btn-stop{background:var(--muted);color:#fff}
+.btn-stop:hover:not(:disabled){background:#555a78}
+.btn-primary{background:var(--primary);color:#fff}
+.btn-primary:hover:not(:disabled){background:var(--primary-hover)}
+.btn-outline{background:transparent;border:1px solid var(--border);color:var(--text)}
+.btn-outline:hover{background:#f0f1f6}
+.btn-danger-sm{background:none;border:none;color:var(--danger);cursor:pointer;font-size:13px;padding:4px 8px;border-radius:4px}
+.btn-danger-sm:hover{background:#fde8ee}
+
+.sidebar audio{width:100%;border-radius:6px}
+.hidden{display:none}
+
+/* ── Table ────────────────────────────────────────────────── */
+.toolbar{display:flex;align-items:center;gap:12px;margin-bottom:16px;flex-wrap:wrap}
+.toolbar h2{font-size:18px;font-weight:600;margin-right:auto}
+.search-box{padding:8px 12px;border:1px solid var(--border);border-radius:var(--radius);font-size:14px;width:220px;outline:none}
+.search-box:focus{border-color:var(--primary)}
+.badge{background:var(--primary);color:#fff;font-size:12px;padding:2px 8px;border-radius:12px;font-weight:600}
+
+table{width:100%;border-collapse:collapse;background:var(--surface);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
+thead th{text-align:left;padding:12px 14px;font-size:12px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);border-bottom:2px solid var(--border);background:#fafbfe;white-space:nowrap}
+tbody td{padding:10px 14px;border-bottom:1px solid var(--border);font-size:14px;vertical-align:middle}
+tbody tr:hover{background:#f8f9ff}
+tbody tr.playing{background:#eef1ff}
+.cell-user{font-weight:600;color:var(--primary)}
+.cell-name{max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.cell-notes{max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted);font-size:13px}
+.cell-duration{font-variant-numeric:tabular-nums;white-space:nowrap}
+.cell-actions{white-space:nowrap}
+.play-btn{background:none;border:none;cursor:pointer;font-size:18px;padding:2px 6px;border-radius:4px}
+.play-btn:hover{background:#eef1ff}
+.empty-state{text-align:center;padding:60px 20px;color:var(--muted)}
+.empty-state p{font-size:15px;margin-top:8px}
+
+/* ── Inline edit ──────────────────────────────────────────── */
+.editable{cursor:pointer;border-bottom:1px dashed transparent;transition:border .15s}
+.editable:hover{border-bottom-color:var(--primary)}
+
+/* ── Responsive ───────────────────────────────────────────── */
+@media(max-width:768px){
+  .app{flex-direction:column}
+  .sidebar{width:100%;height:auto;position:static;border-right:none;border-bottom:1px solid var(--border)}
+  .main{padding:16px}
+  .search-box{width:100%}
+}
+</style>
+</head>
+<body>
+<div class="app">
+
+  <!-- ── Sidebar: recorder ────────────────────────────────── -->
+  <div class="sidebar">
+    <div class="logo">
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="4"/><path d="M12 2v2m0 16v2M4.93 4.93l1.41 1.41m11.32 11.32l1.41 1.41M2 12h2m16 0h2M4.93 19.07l1.41-1.41m11.32-11.32l1.41-1.41"/></svg>
+      Audio Recording Studio
+    </div>
+
+    <div class="field">
+      <label for="userName">Your Name</label>
+      <input type="text" id="userName" placeholder="e.g. Alice" autocomplete="off">
+    </div>
+    <div class="field">
+      <label for="recName">Recording Name</label>
+      <input type="text" id="recName" placeholder="e.g. Interview – Session 3" autocomplete="off">
+    </div>
+    <div class="field">
+      <label for="recNotes">Notes (optional)</label>
+      <textarea id="recNotes" placeholder="Any context…"></textarea>
+    </div>
+
+    <div class="timer" id="timer">00:00</div>
+    <canvas id="waveform"></canvas>
+
+    <div class="rec-controls">
+      <button class="btn-record" id="btnRecord">Record</button>
+      <button class="btn-stop" id="btnStop" disabled>Stop</button>
+    </div>
+
+    <audio id="preview" controls class="hidden"></audio>
+    <button class="btn-primary" id="btnSave" disabled>Save Recording</button>
+    <div id="sideStatus" style="text-align:center;font-size:13px;min-height:18px"></div>
+  </div>
+
+  <!-- ── Main: table ──────────────────────────────────────── -->
+  <div class="main">
+    <div class="toolbar">
+      <h2>Recordings <span class="badge" id="countBadge">0</span></h2>
+      <input class="search-box" id="searchBox" placeholder="Search…" autocomplete="off">
+      <button class="btn-outline" id="btnRefresh">Refresh</button>
+      <button class="btn-outline" id="btnExport">Export Excel</button>
+    </div>
+
+    <table>
+      <thead>
+        <tr>
+          <th>#</th><th>User</th><th>Name</th><th>Timestamp</th><th>Duration</th><th>Notes</th><th>Play</th><th>Actions</th>
+        </tr>
+      </thead>
+      <tbody id="tableBody">
+        <tr><td colspan="8" class="empty-state"><p>No recordings yet. Start recording from the sidebar.</p></td></tr>
+      </tbody>
+    </table>
+  </div>
+
+</div>
+
+<!-- ── Shared audio player (hidden) ───────────────────────── -->
+<audio id="tablePlayer"></audio>
+
+<script>
+(function(){
+  /* ── DOM ───────────────────────────────────── */
+  var $ = document.getElementById.bind(document);
+  var btnRecord=$("btnRecord"),btnStop=$("btnStop"),btnSave=$("btnSave");
+  var preview=$("preview"),timerEl=$("timer"),statusEl=$("sideStatus");
+  var userName=$("userName"),recName=$("recName"),recNotes=$("recNotes");
+  var canvas=$("waveform"),ctx=canvas.getContext("2d");
+  var tableBody=$("tableBody"),countBadge=$("countBadge");
+  var searchBox=$("searchBox"),tablePlayer=$("tablePlayer");
+
+  var mediaRecorder,audioChunks,recordedBlob;
+  var timerInt,startTime,analyser,animFrame,audioCtx,stream;
+  var allRecordings=[];
+  var playingId=null;
+
+  /* Persist user name */
+  userName.value=localStorage.getItem("audioStudioUser")||"";
+  userName.addEventListener("input",function(){localStorage.setItem("audioStudioUser",userName.value)});
+
+  /* ── Timer ──────────────────────────────────── */
+  function resetTimer(){timerEl.textContent="00:00";timerEl.classList.remove("active")}
+  function startTimerFn(){
+    startTime=Date.now();timerEl.classList.add("active");
+    timerInt=setInterval(function(){
+      var s=Math.floor((Date.now()-startTime)/1000);
+      timerEl.textContent=String(Math.floor(s/60)).padStart(2,"0")+":"+String(s%60).padStart(2,"0");
+    },250);
+  }
+  function stopTimerFn(){clearInterval(timerInt);timerEl.classList.remove("active")}
+
+  /* ── Waveform ───────────────────────────────── */
+  function resizeCanvas(){canvas.width=canvas.clientWidth*(devicePixelRatio||1);canvas.height=canvas.clientHeight*(devicePixelRatio||1)}
+  resizeCanvas();window.addEventListener("resize",resizeCanvas);
+  function drawWave(){
+    if(!analyser)return;animFrame=requestAnimationFrame(drawWave);
+    var buf=new Uint8Array(analyser.fftSize);analyser.getByteTimeDomainData(buf);
+    var w=canvas.width,h=canvas.height;ctx.clearRect(0,0,w,h);
+    ctx.lineWidth=2;ctx.strokeStyle="#4361ee";ctx.beginPath();
+    var dx=w/buf.length,x=0;
+    for(var i=0;i<buf.length;i++){var y=buf[i]/128*h/2;i?ctx.lineTo(x,y):ctx.moveTo(x,y);x+=dx}
+    ctx.lineTo(w,h/2);ctx.stroke();
+  }
+  function stopVis(){cancelAnimationFrame(animFrame);ctx.clearRect(0,0,canvas.width,canvas.height)}
+  function setStatus(m,ok){statusEl.textContent=m;statusEl.style.color=ok?"#06d6a0":ok===false?"#ef476f":"#6c7293"}
+
+  /* ── Record ─────────────────────────────────── */
+  btnRecord.addEventListener("click",function(){
+    setStatus("");audioChunks=[];recordedBlob=null;
+    preview.classList.add("hidden");preview.src="";btnSave.disabled=true;
+
+    navigator.mediaDevices.getUserMedia({audio:true}).then(function(s){
+      stream=s;
+      audioCtx=new(window.AudioContext||window.webkitAudioContext)();
+      var src=audioCtx.createMediaStreamSource(s);
+      analyser=audioCtx.createAnalyser();analyser.fftSize=2048;
+      src.connect(analyser);drawWave();
+
+      var mime="audio/webm;codecs=opus";
+      if(!MediaRecorder.isTypeSupported(mime))mime="audio/webm";
+      if(!MediaRecorder.isTypeSupported(mime))mime="";
+
+      mediaRecorder=new MediaRecorder(s,mime?{mimeType:mime}:undefined);
+      mediaRecorder.ondataavailable=function(e){if(e.data.size>0)audioChunks.push(e.data)};
+      mediaRecorder.onstop=function(){
+        recordedBlob=new Blob(audioChunks,{type:"audio/webm"});
+        preview.src=URL.createObjectURL(recordedBlob);
+        preview.classList.remove("hidden");
+        btnSave.disabled=false;
+        setStatus("Ready to save.");
+      };
+      mediaRecorder.start(1000);startTimerFn();
+      btnRecord.disabled=true;btnStop.disabled=false;
+      setStatus("Recording…");
+    }).catch(function(e){setStatus("Mic denied: "+e.message,false)});
+  });
+
+  btnStop.addEventListener("click",function(){
+    if(mediaRecorder&&mediaRecorder.state!=="inactive")mediaRecorder.stop();
+    stopTimerFn();stopVis();
+    if(stream){stream.getTracks().forEach(function(t){t.stop()});stream=null}
+    if(audioCtx){audioCtx.close();audioCtx=null}
+    btnRecord.disabled=false;btnStop.disabled=true;
+  });
+
+  /* ── Save ────────────────────────────────────── */
+  btnSave.addEventListener("click",function(){
+    if(!recordedBlob)return;
+    btnSave.disabled=true;setStatus("Uploading…");
+
+    var fd=new FormData();
+    fd.append("audio",recordedBlob,"recording.webm");
+    fd.append("user",userName.value.trim()||"Anonymous");
+    fd.append("name",recName.value.trim());
+    fd.append("notes",recNotes.value.trim());
+    fd.append("duration",((Date.now()-startTime)/1000).toFixed(1));
+
+    fetch("/api/recordings",{method:"POST",body:fd})
+      .then(function(r){if(!r.ok)throw new Error(r.statusText);return r.json()})
+      .then(function(){
+        setStatus("Saved!",true);
+        recName.value="";recNotes.value="";
+        recordedBlob=null;preview.classList.add("hidden");preview.src="";
+        resetTimer();loadTable();
+      })
+      .catch(function(e){setStatus("Error: "+e.message,false);btnSave.disabled=false});
+  });
+
+  /* ── Table ──────────────────────────────────── */
+  function loadTable(){
+    fetch("/api/recordings").then(function(r){return r.json()}).then(function(data){
+      allRecordings=data;renderTable(data);
+    });
+  }
+
+  function renderTable(data){
+    var q=searchBox.value.toLowerCase();
+    var filtered=q?data.filter(function(r){
+      return (r.name+r.user+r.notes+r.created_at).toLowerCase().indexOf(q)>=0;
+    }):data;
+
+    countBadge.textContent=filtered.length;
+
+    if(!filtered.length){
+      tableBody.innerHTML='<tr><td colspan="8" class="empty-state"><p>No recordings found.</p></td></tr>';
+      return;
+    }
+    var html="";
+    filtered.forEach(function(r,i){
+      var dur=r.duration?fmtDur(r.duration):"—";
+      var playing=playingId===r.id;
+      html+='<tr class="'+(playing?"playing":"")+'" data-id="'+r.id+'">'
+        +'<td>'+(i+1)+'</td>'
+        +'<td class="cell-user">'+esc(r.user)+'</td>'
+        +'<td class="cell-name editable" data-field="name" title="Click to edit">'+esc(r.name)+'</td>'
+        +'<td>'+esc(r.created_at)+'</td>'
+        +'<td class="cell-duration">'+dur+'</td>'
+        +'<td class="cell-notes editable" data-field="notes" title="Click to edit">'+esc(r.notes||"—")+'</td>'
+        +'<td><button class="play-btn" data-file="'+esc(r.filename)+'" data-rid="'+r.id+'">'+(playing?"\u23F9":"\u25B6")+'</button></td>'
+        +'<td class="cell-actions"><button class="btn-danger-sm" data-del="'+r.id+'">Delete</button></td>'
+        +'</tr>';
+    });
+    tableBody.innerHTML=html;
+  }
+
+  /* Search */
+  searchBox.addEventListener("input",function(){renderTable(allRecordings)});
+
+  /* Play in table */
+  tableBody.addEventListener("click",function(e){
+    var btn=e.target.closest(".play-btn");
+    if(!btn)return;
+    var rid=btn.dataset.rid,file=btn.dataset.file;
+    if(playingId===rid){tablePlayer.pause();tablePlayer.src="";playingId=null}
+    else{tablePlayer.src="/audio/"+file;tablePlayer.play();playingId=rid}
+    renderTable(allRecordings);
+  });
+  tablePlayer.addEventListener("ended",function(){playingId=null;renderTable(allRecordings)});
+
+  /* Inline edit */
+  tableBody.addEventListener("dblclick",function(e){
+    var td=e.target.closest(".editable");
+    if(!td)return;
+    var rid=td.parentElement.dataset.id;
+    var field=td.dataset.field;
+    var old=td.textContent==="—"?"":td.textContent;
+    var input=document.createElement("input");
+    input.type="text";input.value=old;
+    input.style.cssText="width:100%;padding:4px 6px;font-size:13px;border:1px solid var(--primary);border-radius:4px";
+    td.textContent="";td.appendChild(input);input.focus();
+
+    function commit(){
+      var val=input.value.trim();
+      td.textContent=val||"—";
+      if(val!==old){
+        var body={};body[field]=val;
+        fetch("/api/recordings/"+rid,{method:"PATCH",headers:{"Content-Type":"application/json"},body:JSON.stringify(body)})
+          .then(function(){loadTable()});
+      }
+    }
+    input.addEventListener("blur",commit);
+    input.addEventListener("keydown",function(ev){if(ev.key==="Enter")input.blur();if(ev.key==="Escape"){input.value=old;input.blur()}});
+  });
+
+  /* Delete */
+  tableBody.addEventListener("click",function(e){
+    var btn=e.target.closest("[data-del]");
+    if(!btn)return;
+    if(!confirm("Delete this recording?"))return;
+    fetch("/api/recordings/"+btn.dataset.del,{method:"DELETE"}).then(function(){loadTable()});
+  });
+
+  /* Refresh & export */
+  $("btnRefresh").addEventListener("click",loadTable);
+  $("btnExport").addEventListener("click",function(){window.location="/api/export"});
+
+  /* Auto-refresh every 10s for collaboration */
+  setInterval(loadTable,10000);
+
+  /* ── Helpers ─────────────────────────────────── */
+  function esc(s){var d=document.createElement("div");d.textContent=s;return d.innerHTML}
+  function fmtDur(s){var m=Math.floor(s/60),sec=Math.floor(s%60);return String(m).padStart(2,"0")+":"+String(sec).padStart(2,"0")}
+
+  /* Init */
+  loadTable();
+})();
+</script>
+</body>
+</html>