Create static/script.js

static/script.js

@@ -0,0 +1,113 @@
+document.addEventListener('DOMContentLoaded', function() {
+    
+    const containers = document.querySelectorAll('.number-input-container');
+
+    containers.forEach(container => {
+        const input = container.querySelector('.number-input');
+        const decreaseBtn = container.querySelector('.decrease-btn');
+        const increaseBtn = container.querySelector('.increase-btn');
+
+        function validateAndClamp(value) {
+            const min = parseFloat(input.getAttribute('min')) || -Infinity;
+            const max = parseFloat(input.getAttribute('max')) || Infinity;
+            
+            if (value > max) return max;
+            if (value < min) return min;
+            return value;
+        }
+
+        function updateValue(change) {
+            let current = parseFloat(input.value) || 0;
+            let step = parseFloat(input.getAttribute('step')) || 1;
+            
+            let newValue = current + (change * step);
+            newValue = Math.round(newValue * 10000) / 10000;
+
+            const clamped = validateAndClamp(newValue);
+            input.value = clamped;
+            input.dispatchEvent(new Event('input'));
+        }
+
+        decreaseBtn.addEventListener('click', () => updateValue(-1));
+        increaseBtn.addEventListener('click', () => updateValue(1));
+
+        input.addEventListener('blur', function() {
+            let current = parseFloat(this.value) || 0;
+            const clamped = validateAndClamp(current);
+            
+            if (current !== clamped) {
+                this.value = clamped;
+                this.style.color = '#f87171';
+                setTimeout(() => this.style.color = '#ffffff', 300);
+            }
+        });
+
+        input.addEventListener('wheel', function(e) {
+            if (document.activeElement === input) {
+                e.preventDefault();
+                updateValue(e.deltaY < 0 ? 1 : -1);
+            }
+        });
+    });
+});
+
+async function makePrediction() {
+    const submitBtn = document.querySelector('.submit-btn');
+    const originalText = submitBtn.innerText;
+    
+    submitBtn.innerText = "Analyzing...";
+    submitBtn.disabled = true;
+    submitBtn.style.opacity = "0.7";
+
+    const data = {
+        chroma_stft_mean: Number(document.getElementById('chroma_stft_mean').value),
+        rms_mean: Number(document.getElementById('rms_mean').value),
+        spectral_centroid_mean: Number(document.getElementById('spectral_centroid_mean').value),
+        spectral_bandwidth_mean: Number(document.getElementById('spectral_bandwidth_mean').value),
+        rolloff_mean: Number(document.getElementById('rolloff_mean').value),
+        zero_crossing_rate_mean: Number(document.getElementById('zero_crossing_rate_mean').value),
+        harmony_mean: Number(document.getElementById('harmony_mean').value),
+        tempo: Number(document.getElementById('tempo').value)
+    };
+
+    try {
+        const response = await fetch('/predict', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify(data)
+        });
+
+        const result = await response.json();
+
+        const resultCard = document.getElementById('resultCard');
+        const genre = result.prediction;
+        const confidence = result.confidence || 0;
+        const barColor = '#4e9e94';
+
+        resultCard.innerHTML = `
+            <div class="result-box">
+                <p style="color: #9ca3af; font-size: 0.9rem; letter-spacing: 1px; margin-bottom:10px;">PREDICTED GENRE</p>
+                <div style="font-size: 2.5rem; font-weight: 800; margin: 15px 0; color: #4e9e94; text-transform: capitalize;">${genre}</div>
+                <p style="margin-bottom: 20px; color: #e0e0e0;">The model classified the audio features successfully.</p>
+                
+                <div style="text-align: left; width: 100%; background: #1c1c2e; padding: 15px; border-radius: 8px; border: 1px solid #2e2e42;">
+                    <div style="display:flex; justify-content:space-between; font-size: 0.9rem; color: #ccc; margin-bottom: 8px;">
+                        <span>Confidence Score</span>
+                        <span style="color: #fff; font-weight: bold;">${confidence.toFixed(1)}%</span>
+                    </div>
+                    <div class="confidence-bar-bg">
+                        <div class="confidence-bar-fill" style="width: ${confidence}%; background-color: ${barColor};"></div>
+                    </div>
+                </div>
+            </div>
+        `;
+
+    } catch (error) {
+        console.error("Error:", error);
+        alert("Server Error: Make sure the Flask app is running.");
+    }
+
+    submitBtn.innerText = originalText;
+    submitBtn.disabled = false;
+    submitBtn.style.opacity = "1";
+}