Enhance UI and functionality for audio upload and prediction features

app.py

@@ -100,7 +100,7 @@ def _prediction_payload(model_choice: str, source_path: Path):
 @app.get("/")
 def index():
     classes = [_safe_label(c) for c in ESC50_CLASSES]
-    samples = _sample_files()
+    samples = [{"name": s, "label": _safe_label(Path(s).stem)} for s in _sample_files()]
     return render_template_string(
         PAGE_TEMPLATE,
         class_badges=classes,
@@ -203,13 +203,15 @@ PAGE_TEMPLATE = """
     <title>SoundEdge - Environmental Sound Classification</title>
     <style>
         :root {
-            --bg: #f8fafc;
-            --text: #1e293b;
+            --bg: #f1f5f9;
+            --text: #1f2937;
             --muted: #64748b;
-            --border: #cbd5e1;
-            --panel: #ffffff;
-            --primary: #0369a1;
-            --accent: #0ea5e9;
+            --line: #d8dee8;
+            --chip-bg: #e9edf3;
+            --chip-border: #d8e0ec;
+            --panel: transparent;
+            --blue: #0b75b8;
+            --violet: #6d46e8;
             --danger-bg: #fff1f2;
             --danger: #dc2626;
         }
@@ -217,76 +219,187 @@ PAGE_TEMPLATE = """
         body {
             margin: 0;
             font-family: "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
-            background: linear-gradient(140deg, #f8fafc 0%, #eff6ff 50%, #e0f2fe 100%);
+            background: var(--bg);
             color: var(--text);
         }
         .container {
-            width: min(1100px, 92vw);
-            margin: 2rem auto 3rem;
+            width: min(1020px, 92vw);
+            margin: 1.4rem auto 3rem;
         }
         .hero {
-            background: linear-gradient(135deg, #e0f2fe 0%, #ede9fe 60%, #dbeafe 100%);
-            border: 1px solid #bfdbfe;
-            border-radius: 16px;
-            padding: 1rem 1.4rem;
+            background: linear-gradient(135deg, #d8e7fb 0%, #dfe4f8 100%);
+            border: 1px solid #b7d1f5;
+            border-radius: 14px;
+            padding: 2rem 1.4rem 1.6rem;
             text-align: center;
-            margin-bottom: 1rem;
+            margin-bottom: 1.9rem;
+        }
+        .hero h1 {
+            margin: 0;
+            font-size: clamp(2.2rem, 3.8vw, 3.6rem);
+            font-weight: 800;
+            background: linear-gradient(90deg, #1f82c4, #4f48d9);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+        }
+        .hero p {
+            margin: 1rem 0 0;
+            color: #445d78;
+            font-size: 2.1vmin;
+            min-font-size: 1rem;
+        }
+        .hero-icon {
+            font-size: clamp(2rem, 4vmin, 2.8rem);
+            margin-right: 0.55rem;
+            vertical-align: 0.28em;
+        }
+        .section {
+            border-top: 1px solid var(--line);
+            padding-top: 1.9rem;
+            margin-top: 1.7rem;
+        }
+        .section:first-of-type {
+            border-top: 0;
+            padding-top: 0;
+            margin-top: 0;
         }
-        .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;
+            border: 0;
         }
         .section-title {
-            font-size: 0.85rem;
-            letter-spacing: 0.09em;
+            font-size: 1.72rem;
+            letter-spacing: 0.12em;
             text-transform: uppercase;
-            color: #7c3aed;
-            font-weight: 700;
-            margin-bottom: 0.7rem;
+            color: var(--violet);
+            font-weight: 800;
+            margin: 0 0 1rem;
         }
-        .badge-grid { display: flex; flex-wrap: wrap; gap: 0.4rem; }
+        .badge-grid { display: flex; flex-wrap: wrap; gap: 0.46rem; }
         .badge {
-            background: #f1f5f9;
-            border: 1px solid #e2e8f0;
+            background: var(--chip-bg);
+            border: 1px solid var(--chip-border);
             border-radius: 8px;
-            padding: 0.28rem 0.58rem;
-            font-size: 0.85rem;
+            padding: 0.32rem 0.74rem;
+            font-size: 1rem;
+            color: #425569;
         }
-        .input-grid {
-            display: grid;
-            grid-template-columns: 1fr 1fr;
+        .model-row {
+            display: flex;
+            gap: 1.2rem;
+            align-items: center;
+            font-size: 1.08rem;
+        }
+        .model-row label {
+            display: inline-flex;
+            align-items: center;
+            gap: 0.45rem;
+            cursor: pointer;
+        }
+        .tabs {
+            display: flex;
             gap: 1rem;
+            border-bottom: 2px solid var(--line);
+            margin-bottom: 1.05rem;
+        }
+        .tab-btn {
+            border: 0;
+            background: transparent;
+            color: #334155;
+            font-size: 1.08rem;
+            padding: 0.32rem 0.1rem 0.7rem;
+            border-bottom: 3px solid transparent;
+            cursor: pointer;
+        }
+        .tab-btn.active {
+            color: #0f73c6;
+            border-color: #0f73c6;
+        }
+        .tab-panel {
+            display: none;
+        }
+        .tab-panel.active {
+            display: block;
+        }
+        .guide-box {
+            background: #eff8ff;
+            border: 1px solid #b9def9;
+            border-radius: 12px;
+            padding: 0.95rem 1rem;
+            color: #36516e;
+            margin-bottom: 0.95rem;
+            font-size: 0.95rem;
+        }
+        .guide-title {
+            font-weight: 700;
+            color: #0c5f9e;
+            margin-bottom: 0.45rem;
+        }
+        .input-grid {
+            display: flex;
+            gap: 0.75rem;
+            align-items: center;
+            flex-wrap: wrap;
+        }
+        .upload-input {
+            border: 1px solid #ccd7e4;
+            border-radius: 9px;
+            background: #f7fafc;
+            padding: 0.42rem;
+            min-width: 280px;
+        }
+        .sample-select {
+            width: 100%;
+            border-radius: 10px;
+            border: 1px solid #d6deea;
+            font-size: 1.2rem;
+            color: #374b60;
+            background: #eef2f7;
+            padding: 0.58rem 0.8rem;
+        }
+        .audio-wrap {
+            margin-top: 0.8rem;
+            width: 100%;
+            max-width: 100%;
+            border-radius: 999px;
+            background: #e8edf4;
+            padding: 0.3rem 0.65rem;
+        }
+        audio {
+            width: 100%;
+            height: 38px;
         }
-        @media (max-width: 860px) {
-            .input-grid { grid-template-columns: 1fr; }
+        .sample-btn {
+            margin-top: 0.95rem;
+            width: 100%;
+            border: 1px solid #cfd9e5;
+            background: #f2f5f8;
+            color: #233548;
+            border-radius: 11px;
+            padding: 0.72rem 0.9rem;
+            font-size: 2.1vmin;
+            cursor: pointer;
         }
-        .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;
+            border: 1px solid #0b77bb;
+            background: #0b77bb;
             color: #fff;
             border-radius: 10px;
-            padding: 0.55rem 0.9rem;
+            padding: 0.57rem 1rem;
             font-weight: 600;
             cursor: pointer;
         }
         .btn.secondary {
-            border-color: #7c3aed;
-            background: #7c3aed;
+            border-color: #6d46e8;
+            background: #6d46e8;
         }
         .btn:disabled {
             opacity: 0.55;
             cursor: not-allowed;
         }
         .status {
-            margin-top: 0.55rem;
-            font-size: 0.9rem;
+            margin-top: 0.6rem;
+            font-size: 0.96rem;
             color: var(--muted);
             min-height: 1.2rem;
         }
@@ -298,44 +411,97 @@ PAGE_TEMPLATE = """
             padding: 0.65rem;
             margin-top: 0.7rem;
         }
+        #resultsPanel { display: none; }
         .result-card {
             background: linear-gradient(135deg, #dbeafe 0%, #ede9fe 100%);
-            border: 1px solid #60a5fa;
+            border: 1px solid #5f96ff;
             border-radius: 14px;
-            padding: 1.2rem;
+            padding: 1.9rem;
             text-align: center;
+            margin-bottom: 1.2rem;
+        }
+        .result-label {
+            font-size: 1.35rem;
+            letter-spacing: 0.12em;
+            color: #6a7c90;
+            text-transform: uppercase;
+        }
+        .result-class {
+            margin: 0.58rem 0 0;
+            color: #0d6ba9;
+            font-size: clamp(2.1rem, 4vmin, 3.4rem);
+            font-weight: 800;
+        }
+        .result-prob {
+            margin-top: 0.58rem;
+            color: #6d46e8;
+            font-size: clamp(1.35rem, 2.6vmin, 2rem);
+            font-weight: 600;
         }
-        .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-row { margin-top: 0.9rem; }
         .bar-label {
             display: flex;
             justify-content: space-between;
-            font-size: 0.95rem;
+            font-size: 1.1rem;
             margin-bottom: 0.25rem;
+            color: #3a4b5c;
         }
         .bar-bg {
-            height: 11px;
+            height: 14px;
             border-radius: 999px;
-            background: #e2e8f0;
+            background: #cfd6df;
             overflow: hidden;
         }
         .bar-fill {
-            height: 11px;
+            height: 14px;
             border-radius: 999px;
             background: linear-gradient(90deg, #0284c7, #7c3aed);
         }
+        .all-prob-list {
+            margin-top: 0.75rem;
+            max-height: 420px;
+            overflow-y: auto;
+            padding-right: 0.25rem;
+        }
+        .all-prob-row {
+            margin-bottom: 0.48rem;
+        }
+        .all-prob-head {
+            display: flex;
+            justify-content: space-between;
+            font-size: 0.98rem;
+            color: #3f5061;
+            margin-bottom: 0.16rem;
+        }
+        .all-prob-bg {
+            height: 8px;
+            border-radius: 999px;
+            background: #d9e0e8;
+            overflow: hidden;
+        }
+        .all-prob-fill {
+            height: 8px;
+            border-radius: 999px;
+            background: #0b86c8;
+        }
+        @media (max-width: 760px) {
+            .section-title { font-size: 1.14rem; }
+            .badge { font-size: 0.85rem; }
+            .hero p { font-size: 0.98rem; }
+            .sample-select { font-size: 1.18rem; }
+            .sample-btn { font-size: 0.95rem; }
+            .upload-input { min-width: 100%; }
+        }
     </style>
 </head>
 <body>
     <div class="container">
         <div class="hero">
-            <h1>SoundEdge</h1>
-            <p>Environmental Sound Classification with backend-managed uploads.</p>
+            <h1><span class="hero-icon">🔊</span>SoundEdge</h1>
+            <p>Environmental Sound Classification - upload a short audio clip and let the model identify the sound.</p>
         </div>
 
-        <div class="panel">
+        <div class="panel section">
             <div class="section-title">Supported Sound Classes</div>
             <div class="badge-grid">
                 {% for cls in class_badges %}
@@ -344,43 +510,59 @@ PAGE_TEMPLATE = """
             </div>
         </div>
 
-        <div class="panel">
+        <div class="panel section">
             <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 class="model-row">
+                <label><input type="radio" name="model" value="Original" checked> Original</label>
+                <label><input type="radio" name="model" value="Compressed"> Compressed</label>
+            </div>
         </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 class="panel section">
+            <div class="section-title">Choose Audio Input</div>
+            <div class="tabs">
+                <button id="tabUpload" class="tab-btn active" type="button">⬆️ Upload a File</button>
+                <button id="tabSample" class="tab-btn" type="button">🎵 Try a Sample</button>
+            </div>
+
+            <div id="uploadPanel" class="tab-panel active">
+                <div class="guide-box">
+                    <div class="guide-title">Upload Guide</div>
+                    <div>Format: WAV (.wav) only.</div>
+                    <div>Duration: Around 5 seconds gives best results.</div>
+                    <div>Size: Keep under 5 MB.</div>
+                </div>
+                <div class="input-grid">
+                    <input id="uploadInput" class="upload-input" type="file" accept=".wav,audio/wav" />
+                    <button id="uploadBtn" class="btn" type="button">Upload</button>
+                    <button id="predictUploadedBtn" class="btn secondary" type="button" disabled>Classify Uploaded Audio</button>
+                </div>
+                <div class="audio-wrap" id="uploadedAudioWrap" style="display:none;">
+                    <audio id="uploadedAudio" controls></audio>
                 </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>
 
-            <div class="panel">
-                <div class="section-title">Try Sample Audio</div>
+            <div id="samplePanel" class="tab-panel">
                 {% if samples %}
-                    <select id="sampleSelect" style="width:100%;padding:0.5rem;border-radius:8px;border:1px solid var(--border);">
+                    <select id="sampleSelect" class="sample-select">
                         {% for sample in samples %}
-                            <option value="{{ sample }}">{{ sample }}</option>
+                            <option value="{{ sample.name }}">{{ sample.label }}</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>
+                    <div class="audio-wrap">
+                        <audio id="sampleAudio" controls></audio>
+                    </div>
+                    <button id="predictSampleBtn" class="sample-btn" type="button">Classify this sample ></button>
                 {% else %}
-                    <p class="hint">No sample files found in the samples folder.</p>
+                    <div class="status">No sample files found in the samples folder.</div>
                 {% endif %}
                 <div id="sampleStatus" class="status"></div>
             </div>
         </div>
 
-        <div id="resultsPanel" class="panel" style="display:none;"></div>
+        <div id="resultsPanel" class="panel section"></div>
     </div>
 
     <script>
@@ -396,6 +578,11 @@ PAGE_TEMPLATE = """
         const sampleStatus = document.getElementById("sampleStatus");
         const predictSampleBtn = document.getElementById("predictSampleBtn");
         const resultsPanel = document.getElementById("resultsPanel");
+        const uploadedAudioWrap = document.getElementById("uploadedAudioWrap");
+        const tabUpload = document.getElementById("tabUpload");
+        const tabSample = document.getElementById("tabSample");
+        const uploadPanel = document.getElementById("uploadPanel");
+        const samplePanel = document.getElementById("samplePanel");
 
         function currentModel() {
             const selected = document.querySelector('input[name="model"]:checked');
@@ -406,6 +593,14 @@ PAGE_TEMPLATE = """
             target.innerHTML = message ? `<div class="error">${message}</div>` : "";
         }
 
+        function setTab(mode) {
+            const isUpload = mode === "upload";
+            tabUpload?.classList.toggle("active", isUpload);
+            tabSample?.classList.toggle("active", !isUpload);
+            uploadPanel?.classList.toggle("active", isUpload);
+            samplePanel?.classList.toggle("active", !isUpload);
+        }
+
         function renderResult(result) {
             resultsPanel.style.display = "block";
             if (result.lowConfidence) {
@@ -429,23 +624,24 @@ PAGE_TEMPLATE = """
 
             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>`;
+                allHtml += `
+                    <div class="all-prob-row">
+                        <div class="all-prob-head"><span>${item.classLabel}</span><span>${item.probabilityPct.toFixed(1)}%</span></div>
+                        <div class="all-prob-bg"><div class="all-prob-fill" style="width:${item.probabilityPct}%;"></div></div>
+                    </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 class="result-prob">Confidence ${result.topProbabilityPct.toFixed(1)}%</div>
                 </div>
                 <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}
+                <div class="all-prob-list">${allHtml}</div>
             `;
         }
 
@@ -472,12 +668,12 @@ PAGE_TEMPLATE = """
 
             const file = uploadInput.files && uploadInput.files[0];
             if (!file) {
-                uploadedAudio.style.display = "none";
+                uploadedAudioWrap.style.display = "none";
                 return;
             }
             const objectUrl = URL.createObjectURL(file);
             uploadedAudio.src = objectUrl;
-            uploadedAudio.style.display = "block";
+            uploadedAudioWrap.style.display = "block";
         });
 
         uploadBtn?.addEventListener("click", async () => {
@@ -501,6 +697,7 @@ PAGE_TEMPLATE = """
                 }
                 uploadedFileId = data.fileId;
                 uploadedAudio.src = data.audioUrl;
+                uploadedAudioWrap.style.display = "block";
                 predictUploadedBtn.disabled = false;
                 uploadStatus.textContent = `Uploaded: ${data.filename}`;
             } catch (err) {
@@ -531,6 +728,10 @@ PAGE_TEMPLATE = """
             syncSampleAudio();
         }
 
+        tabUpload?.addEventListener("click", () => setTab("upload"));
+        tabSample?.addEventListener("click", () => setTab("sample"));
+        setTab("sample");
+
         predictSampleBtn?.addEventListener("click", async () => {
             sampleStatus.textContent = "";
             try {