Update static/script.js

static/script.js

@@ -4,7 +4,6 @@ document.addEventListener('DOMContentLoaded', function() {
     const submitBtn = document.getElementById('submitBtn');
     const dropZone = document.getElementById('dropZone');
 
-    // Handle File Selection
     fileInput.addEventListener('change', function(e) {
         if (this.files && this.files[0]) {
             fileNameDisplay.textContent = this.files[0].name;
@@ -14,7 +13,6 @@ document.addEventListener('DOMContentLoaded', function() {
         }
     });
 
-    // Drag and Drop support
     dropZone.addEventListener('dragover', (e) => {
         e.preventDefault();
         dropZone.classList.add('dragover');
@@ -31,7 +29,6 @@ document.addEventListener('DOMContentLoaded', function() {
         if (e.dataTransfer.files && e.dataTransfer.files[0]) {
             fileInput.files = e.dataTransfer.files;
             
-            // Trigger the change event manually
             const event = new Event('change');
             fileInput.dispatchEvent(event);
         }
@@ -49,12 +46,10 @@ async function makePrediction() {
         return;
     }
 
-    // Loading State
-    submitBtn.innerText = "Extracting Features & Analyzing... (This may take 5-10 seconds)";
+    submitBtn.innerText = "Extracting Features & Analyzing... \n(This may take 5-10 seconds)";
     submitBtn.disabled = true;
     submitBtn.style.opacity = "0.7";
     
-    // Create FormData object to send the file
     const formData = new FormData();
     formData.append('audio_file', fileInput.files[0]);
 
@@ -69,12 +64,12 @@ async function makePrediction() {
         if (response.ok) {
             const genre = result.prediction;
             const confidence = result.confidence || 0;
-            const barColor = '#4e9e94';
+            const barColor = '#7e57c2';
 
             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>
+                    <div style="font-size: 2.5rem; font-weight: 800; margin: 15px 0; color: #7e57c2; text-transform: capitalize;">${genre}</div>
                     <p style="margin-bottom: 20px; color: #e0e0e0;">Audio feature extraction and classification complete.</p>
                     
                     <div style="text-align: left; width: 100%; background: #1c1c2e; padding: 15px; border-radius: 8px; border: 1px solid #2e2e42;">
@@ -97,7 +92,6 @@ async function makePrediction() {
         alert("Server Error: Make sure the Flask app is running.");
     }
 
-    // Reset Button
     submitBtn.innerText = originalText;
     submitBtn.disabled = false;
     submitBtn.style.opacity = "1";