Refactor Dockerfile and app.py for Flask integration

Dockerfile

@@ -2,6 +2,7 @@ FROM python:3.10-slim
 
 ENV PYTHONDONTWRITEBYTECODE=1
 ENV PYTHONUNBUFFERED=1
+ENV HOST=0.0.0.0
 
 WORKDIR /app
 
@@ -13,4 +14,4 @@ COPY . .
 
 EXPOSE 8501
 
-CMD ["streamlit", "run", "app.py", "--server.port=8501", "--server.address=0.0.0.0"]
+CMD ["python", "app.py"]

app.py

@@ -1,366 +1,551 @@
+import atexit
 import os
 import tempfile
+import uuid
+from pathlib import Path
 
-import streamlit as st
 import torch
-import matplotlib.pyplot as plt
+from flask import Flask, jsonify, render_template_string, request, send_from_directory
 
+from classes import ESC50_CLASSES
 from preprocessing import preprocess_audio
 from utils import load_compressed_model, load_model, predict
-from classes import ESC50_CLASSES
 
 
-ORIGINAL_MODEL_PATH   = "weights/esc50_model.pth"
-COMPRESSED_MODEL_PATH = "weights/esc50_model_compressed.pth"
-STATS_PATH   = "stats/esc50_mel_stats.json"
-SAMPLES_DIR  = "samples"
-
-# ── Page config ───────────────────────────────────────────────────────────────
-st.set_page_config(
-    page_title="SoundEdge - Environmental Sound Classification",
-    page_icon="🔊",
-    layout="wide",
-)
-
-# ── Custom CSS ────────────────────────────────────────────────────────────────
-st.markdown("""
-<style>
-/* Global */
-html, body, [data-testid="stAppViewContainer"] {
-    background-color: #f8fafc;
-    color: #1e293b;
-    font-size: 1.05rem;
-}
-[data-testid="stSidebar"] { display: none; }
-.block-container {
-    padding-top: 2rem !important;
-    max-width: 1100px !important;
-    margin: 0 auto !important;
-    padding-left: 2rem !important;
-    padding-right: 2rem !important;
-}
-#MainMenu, footer, header { visibility: hidden; }
-
-/* Hero banner */
-.hero {
-    background: linear-gradient(135deg, #e0f2fe 0%, #ede9fe 60%, #dbeafe 100%);
-    border: 1px solid #bfdbfe;
-    border-radius: 16px;
-    padding: 1rem 2rem 1rem 2rem;
-    margin-bottom: 2rem;
-    text-align: center;
-}
-.hero h1 {
-    font-size: 3.2rem;
-    font-weight: 800;
-    background: linear-gradient(90deg, #0284c7, #7c3aed);
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-    margin: 0 0 0.5rem 0;
-}
-.hero p {
-    color: #475569;
-    font-size: 1.2rem;
-    margin: 0;
-}
-
-/* Section headings */
-.section-title {
-    font-size: 1rem;
-    font-weight: 700;
-    color: #7c3aed;
-    text-transform: uppercase;
-    letter-spacing: 0.1em;
-    margin-bottom: 0.85rem;
-}
-
-/* Class badge pills */
-.badge-grid {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 0.4rem;
-    margin-bottom: 0.5rem;
-}
-.badge {
-    background: #f1f5f9;
-    border: 1px solid #e2e8f0;
-    border-radius: 9px;
-    padding: 0.3rem 0.65rem;
-    font-size: 0.88rem;
-    color: #475569;
-    display: inline-flex;
-    align-items: center;
-    gap: 0.4rem;
-}
-
-/* Result card */
-.result-card {
-    background: linear-gradient(135deg, #dbeafe 0%, #ede9fe 100%);
-    border: 1px solid #3b82f6;
-    border-radius: 14px;
-    padding: 1.8rem 2rem;
-    margin: 1.2rem 0 1.4rem 0;
-    text-align: center;
-}
-.result-card .label {
-    font-size: 0.95rem;
-    color: #64748b;
-    text-transform: uppercase;
-    letter-spacing: 0.09em;
-    margin-bottom: 0.5rem;
-}
-.result-card .class-name {
-    font-size: 2.6rem;
-    font-weight: 800;
-    color: #0369a1;
-    margin: 0;
-}
-.result-card .confidence {
-    font-size: 1.35rem;
-    color: #7c3aed;
-    margin-top: 0.5rem;
-}
-
-/* Top-3 progress bars */
-.prob-row { margin-bottom: 1.1rem; }
-.prob-label {
-    display: flex;
-    justify-content: space-between;
-    font-size: 1.05rem;
-    margin-bottom: 0.4rem;
-    color: #334155;
-}
-.prob-bar-bg {
-    background: #e2e8f0;
-    border-radius: 999px;
-    height: 13px;
-    width: 100%;
-    overflow: hidden;
-}
-.prob-bar-fill {
-    height: 100%;
-    border-radius: 999px;
-    background: linear-gradient(90deg, #0284c7, #7c3aed);
-}
-
-/* Divider */
-hr { border-color: #e2e8f0 !important; }
-</style>
-""", unsafe_allow_html=True)
-
-# ── Hero ──────────────────────────────────────────────────────────────────────
-st.markdown("""
-<div class="hero">
-    <h1>🔊 SoundEdge</h1>
-    <p>Environmental Sound Classification &mdash; upload a short audio clip and let the model identify the sound.</p>
-</div>
-""", unsafe_allow_html=True)
-
-# ── Supported classes ─────────────────────────────────────────────────────────
-st.markdown('<div class="section-title">Supported Sound Classes</div>', unsafe_allow_html=True)
-badges_html = '<div class="badge-grid">'
-for cls in ESC50_CLASSES:
-    label = cls.replace('_', ' ').title()
-    badges_html += f'<span class="badge">{label}</span>'
-badges_html += '</div>'
-st.markdown(badges_html, unsafe_allow_html=True)
-
-st.divider()
-
-# ── Model ───────────────────────────────���─────────────────────────────────────
-device = torch.device("cuda" if torch.cuda.is_available() else "cpu")
-
-@st.cache_resource
-def get_original_model():
-    return load_model(ORIGINAL_MODEL_PATH, device, num_classes=len(ESC50_CLASSES))
-
-@st.cache_resource
-def get_compressed_model():
-    return load_compressed_model(ORIGINAL_MODEL_PATH, COMPRESSED_MODEL_PATH, num_classes=len(ESC50_CLASSES))
-
-# ── Model selector ────────────────────────────────────────────────────────────
-st.markdown('<div class="section-title">Select Model</div>', unsafe_allow_html=True)
-_model_choice = st.radio(
-    "model_selector",
-    options=["Original", "Compressed"],
-    horizontal=True,
-    label_visibility="collapsed",
-)
-if _model_choice == "Compressed":
-    active_model  = get_compressed_model()
-    active_device = torch.device("cpu")
-else:
-    active_model  = get_original_model()
-    active_device = device
-
-st.divider()
-
-# ── Session state ────────────────────────────────────────────────────────────
-if "sample_to_classify" not in st.session_state:
-    st.session_state.sample_to_classify = None
-if "active_source" not in st.session_state:
-    st.session_state.active_source = None
-
-def _clear_classification_output():
-    st.session_state.sample_to_classify = None
-    st.session_state.active_source = None
-
-def _activate_upload_source():
-    st.session_state.sample_to_classify = None
-    st.session_state.active_source = "upload"
-
-# ── Audio input tabs ──────────────────────────────────────────────────────────
-st.markdown('<div class="section-title">Choose Audio Input</div>', unsafe_allow_html=True)
-
-tab_upload, tab_sample = st.tabs(["  ⬆️  Upload a File  ", "  🎵  Try a Sample  "])
-
-uploaded_file = None
-
-with tab_upload:
-    st.markdown("""
-    <div style="background:#f0f9ff;border:1px solid #bae6fd;border-radius:12px;
-                padding:1rem 1.25rem;margin-bottom:1rem;">
-        <div style="font-weight:700;color:#0369a1;font-size:0.95rem;margin-bottom:0.5rem;">
-            📋 Upload Guide
-        </div>
-        <ul style="margin:0;padding-left:1.2rem;color:#475569;font-size:0.92rem;line-height:1.8;">
-            <li><strong>Format:</strong> WAV (<code>.wav</code>) only</li>
-            <li><strong>Duration:</strong> ~5 seconds recommended &mdash; clips longer than 5 s will be trimmed, shorter clips will be zero-padded</li>
-            <li><strong>File size:</strong> Keep under 5 MB for best performance</li>
-        </ul>
-    </div>
-    """, unsafe_allow_html=True)
-    uploaded_file = st.file_uploader(
-        "WAV audio file (5 seconds recommended)",
-        type=["wav"],
-        key="uploaded_audio",
-        on_change=_activate_upload_source,
-        label_visibility="collapsed",
+BASE_DIR = Path(__file__).resolve().parent
+ORIGINAL_MODEL_PATH = BASE_DIR / "weights" / "esc50_model.pth"
+COMPRESSED_MODEL_PATH = BASE_DIR / "weights" / "esc50_model_compressed.pth"
+STATS_PATH = BASE_DIR / "stats" / "esc50_mel_stats.json"
+SAMPLES_DIR = BASE_DIR / "samples"
+UPLOAD_DIR = Path(tempfile.gettempdir()) / "soundedge_uploads"
+UPLOAD_DIR.mkdir(parents=True, exist_ok=True)
+
+ALLOWED_EXTENSIONS = {".wav"}
+LOW_CONFIDENCE_THRESHOLD = 0.6
+MAX_UPLOAD_BYTES = 5 * 1024 * 1024
+
+app = Flask(__name__)
+app.config["MAX_CONTENT_LENGTH"] = MAX_UPLOAD_BYTES
+
+_gpu_device = torch.device("cuda" if torch.cuda.is_available() else "cpu")
+_model_cache = {"Original": None, "Compressed": None}
+
+
+def _safe_label(raw_name: str) -> str:
+    return raw_name.replace("_", " ").title()
+
+
+def _sample_files() -> list[str]:
+    if not SAMPLES_DIR.is_dir():
+        return []
+    return sorted([f.name for f in SAMPLES_DIR.iterdir() if f.suffix.lower() == ".wav"])
+
+
+def _validate_wav_filename(filename: str) -> bool:
+    ext = Path(filename).suffix.lower()
+    return ext in ALLOWED_EXTENSIONS
+
+
+def _get_active_model(model_choice: str):
+    if model_choice == "Compressed":
+        if _model_cache["Compressed"] is None:
+            _model_cache["Compressed"] = load_compressed_model(
+                str(ORIGINAL_MODEL_PATH),
+                str(COMPRESSED_MODEL_PATH),
+                num_classes=len(ESC50_CLASSES),
+            )
+        return _model_cache["Compressed"], torch.device("cpu")
+
+    if _model_cache["Original"] is None:
+        _model_cache["Original"] = load_model(
+            str(ORIGINAL_MODEL_PATH),
+            _gpu_device,
+            num_classes=len(ESC50_CLASSES),
+        )
+    return _model_cache["Original"], _gpu_device
+
+
+def _prediction_payload(model_choice: str, source_path: Path):
+    model, device = _get_active_model(model_choice)
+    input_tensor = preprocess_audio(str(source_path), str(STATS_PATH))
+    top_class, top_prob, all_probs = predict(model, input_tensor, device)
+
+    return {
+        "topClass": top_class,
+        "topClassLabel": _safe_label(top_class),
+        "topProbability": top_prob,
+        "topProbabilityPct": round(top_prob * 100, 2),
+        "lowConfidence": top_prob < LOW_CONFIDENCE_THRESHOLD,
+        "top3": [
+            {
+                "className": p["class_name"],
+                "classLabel": _safe_label(p["class_name"]),
+                "probability": p["probability"],
+                "probabilityPct": round(p["probability"] * 100, 2),
+            }
+            for p in all_probs[:3]
+        ],
+        "allProbs": [
+            {
+                "className": p["class_name"],
+                "classLabel": _safe_label(p["class_name"]),
+                "probability": p["probability"],
+                "probabilityPct": round(p["probability"] * 100, 2),
+            }
+            for p in all_probs
+        ],
+    }
+
+
+@app.get("/")
+def index():
+    classes = [_safe_label(c) for c in ESC50_CLASSES]
+    samples = _sample_files()
+    return render_template_string(
+        PAGE_TEMPLATE,
+        class_badges=classes,
+        samples=samples,
     )
-    if uploaded_file is not None:
-        if not uploaded_file.name.lower().endswith(".wav"):
-            st.error("Only .wav files are supported.")
-            st.stop()
-        st.audio(uploaded_file)
-    elif st.session_state.active_source == "upload":
-        st.session_state.active_source = None
-
-with tab_sample:
-    _sample_files = (
-        sorted([f for f in os.listdir(SAMPLES_DIR) if f.lower().endswith(".wav")])
-        if os.path.isdir(SAMPLES_DIR) else []
+
+
+@app.get("/samples/<path:filename>")
+def serve_sample(filename: str):
+    return send_from_directory(SAMPLES_DIR, filename)
+
+
+@app.get("/uploads/<path:filename>")
+def serve_uploaded_file(filename: str):
+    return send_from_directory(UPLOAD_DIR, filename)
+
+
+@app.post("/upload")
+def upload_audio():
+    uploaded = request.files.get("file")
+    if uploaded is None:
+        return jsonify({"error": "Missing file field. Use multipart form key 'file'."}), 400
+
+    filename = uploaded.filename or ""
+    if not filename:
+        return jsonify({"error": "No file selected."}), 400
+    if not _validate_wav_filename(filename):
+        return jsonify({"error": "Only .wav files are supported."}), 400
+
+    file_id = uuid.uuid4().hex
+    stored_name = f"{file_id}.wav"
+    destination = UPLOAD_DIR / stored_name
+    uploaded.save(destination)
+
+    return jsonify(
+        {
+            "fileId": file_id,
+            "filename": filename,
+            "audioUrl": f"/uploads/{stored_name}",
+        }
     )
 
-    if not _sample_files:
-        st.info("No sample files found in the samples/ folder.")
-    else:
-        def _parse_sample_name(fn: str) -> str:
-            name = os.path.splitext(fn)[0]
-            return name.replace('_', ' ').title()
-
-        _options = {_parse_sample_name(f): f for f in _sample_files}
-        _selected = st.selectbox(
-            "Pick a sample clip",
-            options=list(_options.keys()),
-            key="sample_selector",
-            on_change=_clear_classification_output,
-            label_visibility="collapsed",
-        )
-        _sample_path = os.path.join(SAMPLES_DIR, _options[_selected])
-        st.audio(_sample_path)
-        if st.button("Classify this sample  ›", use_container_width=True):
-            st.session_state.sample_to_classify = _sample_path
-            st.session_state.active_source = "sample"
-
-# ── Determine active source ───────────────────────────────────────────────────
-source_path  = None
-cleanup_temp = False
-temp_path    = None
-
-if st.session_state.active_source == "upload" and uploaded_file is not None:
-    with tempfile.NamedTemporaryFile(delete=False, suffix=".wav") as _tmp:
-        uploaded_file.seek(0)
-        _tmp.write(uploaded_file.read())
-        temp_path = _tmp.name
-    source_path  = temp_path
-    cleanup_temp = True
-elif st.session_state.active_source == "sample" and st.session_state.sample_to_classify:
-    source_path = st.session_state.sample_to_classify
-
-# ── Inference & results ───────────────────────────────────────────────────────
-if source_path:
+
+@app.post("/predict")
+def predict_audio():
+    payload = request.get_json(silent=True) or {}
+    source_type = payload.get("source", "upload")
+    model_choice = payload.get("model", "Original")
+    if model_choice not in ("Original", "Compressed"):
+        return jsonify({"error": "Invalid model. Use 'Original' or 'Compressed'."}), 400
+
     try:
-        with st.spinner("Analysing audio…"):
-            input_tensor = preprocess_audio(source_path, STATS_PATH)
-            top_class, top_prob, all_probs = predict(active_model, input_tensor, active_device)
-
-        # ── Low-confidence guard ──────────────────────────────────────────────
-        if top_prob < 0.6:
-            st.markdown("""
-            <div style="background:#fff1f2;border:1px solid #fecdd3;border-radius:14px;
-                        padding:1.8rem 2rem;margin:1.2rem 0 1.4rem 0;text-align:center;">
-                <div style="font-size:2rem;margin-bottom:0.6rem;">🎙️</div>
-                <div style="font-size:1.1rem;font-weight:700;color:#dc2626;margin-bottom:0.4rem;">
-                    Unable to confidently identify the sound
-                </div>
-                <div style="color:#64748b;font-size:0.95rem;">
-                    Please upload a clearer audio file and try again.
+        if source_type == "upload":
+            file_id = payload.get("fileId", "")
+            if not file_id:
+                return jsonify({"error": "Missing fileId for uploaded source."}), 400
+            source_path = UPLOAD_DIR / f"{file_id}.wav"
+            if not source_path.exists():
+                return jsonify({"error": "Uploaded file not found. Upload again."}), 404
+        elif source_type == "sample":
+            sample_name = payload.get("sampleName", "")
+            if not sample_name:
+                return jsonify({"error": "Missing sampleName for sample source."}), 400
+            source_path = SAMPLES_DIR / sample_name
+            if not source_path.exists() or source_path.suffix.lower() != ".wav":
+                return jsonify({"error": "Sample not found."}), 404
+        else:
+            return jsonify({"error": "Invalid source. Use 'upload' or 'sample'."}), 400
+
+        result = _prediction_payload(model_choice=model_choice, source_path=source_path)
+        return jsonify(result)
+    except Exception as exc:
+        return jsonify({"error": f"Error during inference: {exc}"}), 500
+
+
+@app.get("/health")
+def health():
+    return jsonify({"status": "ok"})
+
+
+def _cleanup_uploads():
+    if not UPLOAD_DIR.exists():
+        return
+    for wav in UPLOAD_DIR.glob("*.wav"):
+        try:
+            wav.unlink()
+        except OSError:
+            pass
+
+
+atexit.register(_cleanup_uploads)
+
+
+PAGE_TEMPLATE = """
+<!doctype html>
+<html lang="en">
+<head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>SoundEdge - Environmental Sound Classification</title>
+    <style>
+        :root {
+            --bg: #f8fafc;
+            --text: #1e293b;
+            --muted: #64748b;
+            --border: #cbd5e1;
+            --panel: #ffffff;
+            --primary: #0369a1;
+            --accent: #0ea5e9;
+            --danger-bg: #fff1f2;
+            --danger: #dc2626;
+        }
+        * { box-sizing: border-box; }
+        body {
+            margin: 0;
+            font-family: "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
+            background: linear-gradient(140deg, #f8fafc 0%, #eff6ff 50%, #e0f2fe 100%);
+            color: var(--text);
+        }
+        .container {
+            width: min(1100px, 92vw);
+            margin: 2rem auto 3rem;
+        }
+        .hero {
+            background: linear-gradient(135deg, #e0f2fe 0%, #ede9fe 60%, #dbeafe 100%);
+            border: 1px solid #bfdbfe;
+            border-radius: 16px;
+            padding: 1rem 1.4rem;
+            text-align: center;
+            margin-bottom: 1rem;
+        }
+        .hero h1 { margin: 0 0 0.4rem; color: #075985; }
+        .hero p { margin: 0; color: #475569; }
+        .panel {
+            background: var(--panel);
+            border: 1px solid var(--border);
+            border-radius: 14px;
+            padding: 1rem;
+            margin-top: 1rem;
+        }
+        .section-title {
+            font-size: 0.85rem;
+            letter-spacing: 0.09em;
+            text-transform: uppercase;
+            color: #7c3aed;
+            font-weight: 700;
+            margin-bottom: 0.7rem;
+        }
+        .badge-grid { display: flex; flex-wrap: wrap; gap: 0.4rem; }
+        .badge {
+            background: #f1f5f9;
+            border: 1px solid #e2e8f0;
+            border-radius: 8px;
+            padding: 0.28rem 0.58rem;
+            font-size: 0.85rem;
+        }
+        .input-grid {
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            gap: 1rem;
+        }
+        @media (max-width: 860px) {
+            .input-grid { grid-template-columns: 1fr; }
+        }
+        .row { margin-bottom: 0.8rem; }
+        .hint { color: var(--muted); font-size: 0.9rem; margin: 0.2rem 0 0.8rem; }
+        .btn {
+            border: 1px solid #0369a1;
+            background: #0369a1;
+            color: #fff;
+            border-radius: 10px;
+            padding: 0.55rem 0.9rem;
+            font-weight: 600;
+            cursor: pointer;
+        }
+        .btn.secondary {
+            border-color: #7c3aed;
+            background: #7c3aed;
+        }
+        .btn:disabled {
+            opacity: 0.55;
+            cursor: not-allowed;
+        }
+        .status {
+            margin-top: 0.55rem;
+            font-size: 0.9rem;
+            color: var(--muted);
+            min-height: 1.2rem;
+        }
+        .error {
+            color: var(--danger);
+            background: var(--danger-bg);
+            border: 1px solid #fecdd3;
+            border-radius: 10px;
+            padding: 0.65rem;
+            margin-top: 0.7rem;
+        }
+        .result-card {
+            background: linear-gradient(135deg, #dbeafe 0%, #ede9fe 100%);
+            border: 1px solid #60a5fa;
+            border-radius: 14px;
+            padding: 1.2rem;
+            text-align: center;
+        }
+        .result-label { font-size: 0.82rem; letter-spacing: 0.09em; color: #64748b; text-transform: uppercase; }
+        .result-class { margin: 0.3rem 0 0; color: #0c4a6e; font-size: 1.9rem; font-weight: 800; }
+        .result-prob { margin-top: 0.45rem; color: #6d28d9; font-size: 1.15rem; font-weight: 700; }
+        .bar-row { margin-top: 0.7rem; }
+        .bar-label {
+            display: flex;
+            justify-content: space-between;
+            font-size: 0.95rem;
+            margin-bottom: 0.25rem;
+        }
+        .bar-bg {
+            height: 11px;
+            border-radius: 999px;
+            background: #e2e8f0;
+            overflow: hidden;
+        }
+        .bar-fill {
+            height: 11px;
+            border-radius: 999px;
+            background: linear-gradient(90deg, #0284c7, #7c3aed);
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <div class="hero">
+            <h1>SoundEdge</h1>
+            <p>Environmental Sound Classification with backend-managed uploads.</p>
+        </div>
+
+        <div class="panel">
+            <div class="section-title">Supported Sound Classes</div>
+            <div class="badge-grid">
+                {% for cls in class_badges %}
+                    <span class="badge">{{ cls }}</span>
+                {% endfor %}
+            </div>
+        </div>
+
+        <div class="panel">
+            <div class="section-title">Select Model</div>
+            <label><input type="radio" name="model" value="Original" checked> Original</label>
+            <label style="margin-left:1rem;"><input type="radio" name="model" value="Compressed"> Compressed</label>
+        </div>
+
+        <div class="input-grid">
+            <div class="panel">
+                <div class="section-title">Upload Via Backend API</div>
+                <div class="row"><input id="uploadInput" type="file" accept=".wav,audio/wav" /></div>
+                <div class="row">
+                    <button id="uploadBtn" class="btn">Upload</button>
+                    <button id="predictUploadedBtn" class="btn secondary" disabled>Classify Uploaded Audio</button>
                 </div>
+                <audio id="uploadedAudio" controls style="width:100%;display:none;margin-top:0.6rem;"></audio>
+                <div id="uploadStatus" class="status"></div>
+                <div id="uploadError"></div>
             </div>
-            """, unsafe_allow_html=True)
-        else:
-            # ── Result card ───────────────────────────────────────────────────
-            top_label = top_class.replace('_', ' ').title()
-            st.markdown(f"""
-            <div class="result-card">
-                <div class="label">Predicted Sound</div>
-                <div class="class-name">{top_label}</div>
-                <div class="confidence">Confidence &nbsp;{top_prob * 100:.1f}%</div>
+
+            <div class="panel">
+                <div class="section-title">Try Sample Audio</div>
+                {% if samples %}
+                    <select id="sampleSelect" style="width:100%;padding:0.5rem;border-radius:8px;border:1px solid var(--border);">
+                        {% for sample in samples %}
+                            <option value="{{ sample }}">{{ sample }}</option>
+                        {% endfor %}
+                    </select>
+                    <audio id="sampleAudio" controls style="width:100%;margin-top:0.6rem;"></audio>
+                    <div class="row" style="margin-top:0.7rem;"><button id="predictSampleBtn" class="btn">Classify Sample</button></div>
+                {% else %}
+                    <p class="hint">No sample files found in the samples folder.</p>
+                {% endif %}
+                <div id="sampleStatus" class="status"></div>
             </div>
-            """, unsafe_allow_html=True)
-
-            # ── Top-3 predictions ─────────────────────────────────────────────
-            st.markdown('<div class="section-title">Top 3 Predictions</div>', unsafe_allow_html=True)
-            for item in all_probs[:3]:
-                pct = item['probability'] * 100
-                lbl = item['class_name'].replace('_', ' ').title()
-                st.markdown(f"""
-                <div class="prob-row">
-                    <div class="prob-label">
-                        <span>{lbl}</span><span>{pct:.1f}%</span>
+        </div>
+
+        <div id="resultsPanel" class="panel" style="display:none;"></div>
+    </div>
+
+    <script>
+        let uploadedFileId = null;
+        const uploadInput = document.getElementById("uploadInput");
+        const uploadBtn = document.getElementById("uploadBtn");
+        const predictUploadedBtn = document.getElementById("predictUploadedBtn");
+        const uploadStatus = document.getElementById("uploadStatus");
+        const uploadError = document.getElementById("uploadError");
+        const uploadedAudio = document.getElementById("uploadedAudio");
+        const sampleSelect = document.getElementById("sampleSelect");
+        const sampleAudio = document.getElementById("sampleAudio");
+        const sampleStatus = document.getElementById("sampleStatus");
+        const predictSampleBtn = document.getElementById("predictSampleBtn");
+        const resultsPanel = document.getElementById("resultsPanel");
+
+        function currentModel() {
+            const selected = document.querySelector('input[name="model"]:checked');
+            return selected ? selected.value : "Original";
+        }
+
+        function setError(target, message) {
+            target.innerHTML = message ? `<div class="error">${message}</div>` : "";
+        }
+
+        function renderResult(result) {
+            resultsPanel.style.display = "block";
+            if (result.lowConfidence) {
+                resultsPanel.innerHTML = `
+                    <div class="error" style="margin-top:0;">
+                        Unable to confidently identify the sound. Please upload a clearer clip and try again.
                     </div>
-                    <div class="prob-bar-bg">
-                        <div class="prob-bar-fill" style="width:{pct:.1f}%;"></div>
+                `;
+                return;
+            }
+
+            let top3Html = "";
+            result.top3.forEach(item => {
+                top3Html += `
+                    <div class="bar-row">
+                        <div class="bar-label"><span>${item.classLabel}</span><span>${item.probabilityPct.toFixed(2)}%</span></div>
+                        <div class="bar-bg"><div class="bar-fill" style="width:${item.probabilityPct}%;"></div></div>
                     </div>
+                `;
+            });
+
+            let allHtml = "";
+            result.allProbs.forEach(item => {
+                const isTop = item.className === result.topClass;
+                const bg = isTop ? "#dbeafe" : "#f8fafc";
+                allHtml += `<div style="display:flex;justify-content:space-between;padding:0.35rem 0.55rem;border-radius:7px;background:${bg};margin-top:0.2rem;">
+                    <span>${item.classLabel}</span><span>${item.probabilityPct.toFixed(2)}%</span>
+                </div>`;
+            });
+
+            resultsPanel.innerHTML = `
+                <div class="result-card">
+                    <div class="result-label">Predicted Sound</div>
+                    <h2 class="result-class">${result.topClassLabel}</h2>
+                    <div class="result-prob">Confidence ${result.topProbabilityPct.toFixed(2)}%</div>
                 </div>
-                """, unsafe_allow_html=True)
-
-            # ── All-class probability chart ───────────────────────────────────
-            st.markdown('<div class="section-title" style="margin-top:1.6rem;">All Class Probabilities</div>', unsafe_allow_html=True)
-
-            chart_labels = [x["class_name"].replace('_', ' ').title() for x in all_probs]
-            chart_values = [x["probability"] * 100 for x in all_probs]
-            bar_colors   = ['#0284c7' if chart_labels[i] == top_label else '#bfdbfe'
-                            for i in range(len(chart_labels))]
-            # increase figure height if many classes to avoid cramped labels
-            fig, ax = plt.subplots(figsize=(9, 4 + len(chart_labels) * 0.1))
-            fig.patch.set_facecolor('#f8fafc')
-            ax.set_facecolor('#f8fafc')
-            ax.barh(chart_labels[::-1], chart_values[::-1],
-                    color=bar_colors[::-1], height=0.6, edgecolor='none')
-            ax.set_xlabel("Probability (%)", color='#475569', fontsize=9)
-            ax.tick_params(colors='#334155', labelsize=8.5)
-            for spine in ax.spines.values():
-                spine.set_visible(False)
-            ax.grid(axis='x', color='#e2e8f0', linewidth=0.8)
-            ax.set_xlim(0, max(chart_values) * 1.18 if max(chart_values) > 0 else 100)
-            plt.tight_layout(pad=1.0)
-            st.pyplot(fig)
-            plt.close(fig)
-
-    except Exception as e:
-        st.error(f"Error during inference: {e}")
-
-    finally:
-        if cleanup_temp and temp_path and os.path.exists(temp_path):
-            os.remove(temp_path)
+                <div class="section-title" style="margin-top:1rem;">Top 3 Predictions</div>
+                ${top3Html}
+                <div class="section-title" style="margin-top:1.2rem;">All Class Probabilities</div>
+                ${allHtml}
+            `;
+        }
+
+        async function predict(payload, statusEl) {
+            statusEl.textContent = "Analysing audio...";
+            const resp = await fetch("/predict", {
+                method: "POST",
+                headers: { "Content-Type": "application/json" },
+                body: JSON.stringify({ ...payload, model: currentModel() })
+            });
+            const data = await resp.json();
+            if (!resp.ok) {
+                throw new Error(data.error || "Prediction failed.");
+            }
+            statusEl.textContent = "Classification completed.";
+            renderResult(data);
+        }
+
+        uploadInput?.addEventListener("change", () => {
+            setError(uploadError, "");
+            uploadStatus.textContent = "";
+            uploadedFileId = null;
+            predictUploadedBtn.disabled = true;
+
+            const file = uploadInput.files && uploadInput.files[0];
+            if (!file) {
+                uploadedAudio.style.display = "none";
+                return;
+            }
+            const objectUrl = URL.createObjectURL(file);
+            uploadedAudio.src = objectUrl;
+            uploadedAudio.style.display = "block";
+        });
+
+        uploadBtn?.addEventListener("click", async () => {
+            setError(uploadError, "");
+            uploadStatus.textContent = "";
+            const file = uploadInput.files && uploadInput.files[0];
+            if (!file) {
+                setError(uploadError, "Select a WAV file before uploading.");
+                return;
+            }
+
+            const formData = new FormData();
+            formData.append("file", file);
+
+            try {
+                uploadStatus.textContent = "Uploading...";
+                const resp = await fetch("/upload", { method: "POST", body: formData });
+                const data = await resp.json();
+                if (!resp.ok) {
+                    throw new Error(data.error || "Upload failed.");
+                }
+                uploadedFileId = data.fileId;
+                uploadedAudio.src = data.audioUrl;
+                predictUploadedBtn.disabled = false;
+                uploadStatus.textContent = `Uploaded: ${data.filename}`;
+            } catch (err) {
+                setError(uploadError, err.message || "Upload failed.");
+                uploadStatus.textContent = "";
+            }
+        });
+
+        predictUploadedBtn?.addEventListener("click", async () => {
+            setError(uploadError, "");
+            if (!uploadedFileId) {
+                setError(uploadError, "Upload a file first.");
+                return;
+            }
+            try {
+                await predict({ source: "upload", fileId: uploadedFileId }, uploadStatus);
+            } catch (err) {
+                setError(uploadError, err.message || "Prediction failed.");
+                uploadStatus.textContent = "";
+            }
+        });
+
+        if (sampleSelect && sampleAudio) {
+            function syncSampleAudio() {
+                sampleAudio.src = `/samples/${encodeURIComponent(sampleSelect.value)}`;
+            }
+            sampleSelect.addEventListener("change", syncSampleAudio);
+            syncSampleAudio();
+        }
+
+        predictSampleBtn?.addEventListener("click", async () => {
+            sampleStatus.textContent = "";
+            try {
+                await predict({ source: "sample", sampleName: sampleSelect.value }, sampleStatus);
+            } catch (err) {
+                sampleStatus.textContent = err.message || "Prediction failed.";
+            }
+        });
+    </script>
+</body>
+</html>
+"""
+
+
+if __name__ == "__main__":
+    port = int(os.environ.get("PORT", "8501"))
+    host = os.environ.get("HOST", "127.0.0.1")
+    app.run(host=host, port=port, debug=False)

requirements.txt

@@ -10,6 +10,7 @@ colorama==0.4.6
 contourpy==1.3.2
 cycler==0.12.1
 filelock==3.25.0
+Flask==3.1.1
 fonttools==4.61.1
 fsspec==2026.2.0
 gitdb==4.0.12