davalllo2/SpotifyData

1document.addEventListener("DOMContentLoaded", function() {2    document.getElementById("uploadForm").addEventListener("submit", async function(event) {3        event.preventDefault();4        await uploadFile();5    });6 7    document.getElementById("interactiveBtn").addEventListener("click", async function() {8        await fetchInteractiveChart();9    });10 11    document.getElementById("recommendForm").addEventListener("submit", async function(event) {12        event.preventDefault();13        await fetchRecommendations();14    });15 16    document.getElementById("visualizeHistoryBtn").addEventListener("click", async function() {17        await fetchListeningHistoryVisualization();18    });19});20 21// 📤 Upload CSV File22async function uploadFile() {23    let fileInput = document.getElementById("fileInput");24    let formData = new FormData();25    formData.append("file", fileInput.files[0]);26 27    try {28        let response = await fetch("/upload", { method: "POST", body: formData });29        let result = await response.json();30 31        if (result.error) {32            alert(`❌ Error: ${result.error}`);33            return;34        }35 36        alert("✅ File uploaded successfully!");37 38        // Fetch summary stats & visualization39        await fetchSummary();40        await fetchVisualization();41    } catch (error) {42        console.error("Upload Error:", error);43        alert("⚠️ Upload failed. Please try again.");44    }45}46 47// 📊 Fetch Summary Stats48async function fetchSummary() {49    try {50        let response = await fetch("/summary");51        let data = await response.json();52 53        let summaryOutput = document.getElementById("summaryOutput");54 55        if (data.error) {56            summaryOutput.innerHTML = `<p style="color: red;">⚠️ ${data.error}</p>`;57            return;58        }59 60        summaryOutput.innerHTML = `61            <p><strong>Total Songs:</strong> ${data["Total Songs"]}</p>62            <p><strong>Unique Artists:</strong> ${data["Unique Artists"]}</p>63            <p><strong>Avg Duration (min):</strong> ${data["Avg Duration (min)"]}</p>64        `;65    } catch (error) {66        console.error("Summary Fetch Error:", error);67        document.getElementById("summaryOutput").innerHTML = "<p>⚠️ Failed to fetch summary.</p>";68    }69}70 71// 📈 Fetch Static Visualization72async function fetchVisualization() {73    try {74        let response = await fetch("/visualize");75        let data = await response.json();76 77        if (data.image_url) {78            let chartImage = document.getElementById("chartImage");79            chartImage.src = data.image_url;80            chartImage.style.display = "block";81        }82    } catch (error) {83        console.error("Visualization Fetch Error:", error);84    }85}86 87// 🎨 Fetch Listening History Visualization88async function fetchListeningHistoryVisualization() {89    try {90        let response = await fetch("/visualize-history");91        let data = await response.json();92 93        if (data.image_url) {94            let historyChart = document.getElementById("historyChart");95            historyChart.src = data.image_url;96            historyChart.style.display = "block";97        } else {98            alert(`⚠️ ${data.error}`);99        }100    } catch (error) {101        console.error("Listening History Visualization Fetch Error:", error);102    }103}104 105// 🎵 Fetch User's Top Spotify Artists106async function fetchSpotifyTopArtists() {107    try {108        let response = await fetch("/spotify-top-artists", { method: "GET" });109        let data = await response.json();110 111        let output = document.getElementById("spotifyArtistsOutput");112        output.innerHTML = "<h3>Your Top Artists:</h3>";113 114        if (data.error) {115            output.innerHTML += `<p>${data.error}</p>`;116        } else {117            data.forEach(artist => {118                output.innerHTML += `<p><strong>${artist.name}</strong></p>`;119            });120        }121    } catch (error) {122        console.error("Error fetching Spotify top artists:", error);123    }124}125 126// 🎵 Fetch Spotify Recommendations127async function fetchSpotifyRecommendations() {128    try {129        let response = await fetch("/spotify-recommendations", { method: "GET" });130        let data = await response.json();131 132        let output = document.getElementById("spotifyRecommendationsOutput");133        output.innerHTML = "<h3>Recommended Songs:</h3>";134 135        if (data.error) {136            output.innerHTML += `<p>${data.error}</p>`;137        } else {138            data.forEach(song => {139                output.innerHTML += `<p><strong>${song.name}</strong> by ${song.artist}</p>`;140            });141        }142    } catch (error) {143        console.error("Error fetching Spotify recommendations:", error);144    }145}146