This Spotify Recommender is a team project from SPS Taiwan Google program.
This recommender will use machine learning algorithms to recommend songs based on a user's input playlist from Spotify. The algorithm will recommend a list of songs based on the features of the playlist
-
Click User Home in the navigation bar to access the recommender. Click insights to access general info about your musical tastes based on your Spotify history.
+
Click User Home in the navigation bar to access the recommender. Click Insights to access general info about your musical tastes based on your Spotify history.
diff --git a/views/playlist.ejs b/views/playlist.ejs
index 0f12a28..758da10 100644
--- a/views/playlist.ejs
+++ b/views/playlist.ejs
@@ -38,13 +38,23 @@
}
var playlist_id = "playlist-id"
+ var playlist_2 = ""
+ var readyToRecommend = false;
- // sends playlist_id to server to fetch playlists
+ // sends playlist_id to server to fetch tracks
async function postplaylist() {
playlist_id = await getParameterByName('playlist');
+ playlist_2 = await getParameterByName('playlist2');
+ if (playlist_2) {
+ readyToRecommend = true;
+ }
+
clearQuery()
console.log(`Selected playlist ID: ${playlist_id}`);
+ console.log(`Second playlist id: ${playlist_2}`);
+ console.log(readyToRecommend);
+
postData('/playlistid', {
playlist: playlist_id
})
@@ -53,103 +63,117 @@
})
}
- loadTracks()
-
- // get JSON object of track's audio features to pass into Datastore track entity
- // async function getAudioFeatures(track_id) {
- // const response = await fetch(`https://api.spotify.com/v1/audio-features/${track_id}`, {
- // headers: {
- // 'Authorization': ' Bearer ' + access_token,
- // }
- // })
- // const json = await response.json()
- // // console.log(json)
- // return json
- // }
+ loadTracks()
- var temp_playlist = [];
+ // get JSON object of track's audio features to pass into Datastore track entity
+ // async function getAudioFeatures(track_id) {
+ // const response = await fetch(`https://api.spotify.com/v1/audio-features/${track_id}`, {
+ // headers: {
+ // 'Authorization': ' Bearer ' + access_token,
+ // }
+ // })
+ // const json = await response.json()
+ // // console.log(json)
+ // return json
+ // }
+
+ var temp_playlist = []
+ var playlist_id_array = []
var onPlay = false;
async function loadTracks() {
await postplaylist();
fetch('/playlist-tracks')
- .then(response => {
- if (response.status != 200) {
- console.log(`Error ${response.status}`)
- }
- return response.json()
- })
- .then(playlist => {
- const app = document.getElementById('tracks');
- // two big divs for playlist and tracks
- const playlistInfo = document.createElement('div');
- playlistInfo.setAttribute('id', 'playlist-info');
- const trackInfo = document.createElement('div');
- trackInfo.setAttribute('id', 'track-info');
- app.appendChild(playlistInfo);
- app.appendChild(trackInfo);
- // playlist image
- const playlist_img = document.createElement('img');
- playlist_img.setAttribute('id', 'playlist-cover');
- playlist_img.setAttribute('alt', 'Playlist Cover');
- if (playlist.images.length > 0) {
- playlist_img.setAttribute('src', playlist.images[0].url);
- }
- else {
- // placeholder image
- playlist_img.setAttribute('src', 'http://www.scottishculture.org/themes/scottishculture/images/music_placeholder.png');
+ .then(response => {
+ if (response.status != 200) {
+ console.log(`Error ${response.status}`)
+ }
+ return response.json()
+ })
+ .then(async playlist => {
+ const app = document.getElementById('tracks');
+ // two big divs for playlist and tracks
+ const playlistInfo = document.createElement('div');
+ playlistInfo.setAttribute('id', 'playlist-info');
+ const trackInfo = document.createElement('div');
+ trackInfo.setAttribute('id', 'track-info');
+ app.appendChild(playlistInfo);
+ app.appendChild(trackInfo);
+ // playlist image
+ const playlist_img = document.createElement('img');
+ playlist_img.setAttribute('id', 'playlist-cover');
+ playlist_img.setAttribute('alt', 'Playlist Cover');
+ if (playlist.images.length > 0) {
+ playlist_img.setAttribute('src', playlist.images[0].url);
+ }
+ else {
+ // placeholder image
+ playlist_img.setAttribute('src', 'http://www.scottishculture.org/themes/scottishculture/images/music_placeholder.png');
+ }
+ playlistInfo.appendChild(playlist_img);
+ // playlist name
+ const playlist_name = document.createElement('p');
+ playlist_name.setAttribute('id', 'playlist-name');
+ playlist_name.textContent = playlist.name;
+ playlistInfo.appendChild(playlist_name);
+ // container for confirm/back buttons
+ const buttons_div = document.createElement('div');
+ buttons_div.setAttribute('id', 'buttons');
+ playlistInfo.appendChild(buttons_div);
+ // confirm button
+ const confirm = document.createElement('a');
+ confirm.setAttribute('id', 'confirm');
+ confirm.setAttribute('class', 'button');
+ if (!readyToRecommend) {
+ confirm.href = `/searchuser/?playlist=${playlist_id}`;
+ } else {
+ confirm.href = `/recommend`;
+ }
+ confirm.textContent = 'Confirm';
+ confirm.setAttribute('onclick', 'confirm()');
+
+ // let array = await getPlaylistArray();
+ // // now our local playlist id array is populated
+
+ // console.log(array);
+ // if (array.length == 2) {
+ // confirm.setAttribute('href', '/recommend');
+ // } else if (array.length < 2) {
+ // confirm.setAttribute('href', '/searchuser');
+ // }
+
+ buttons.appendChild(confirm);
+ // back button
+ const back = document.createElement('a');
+ back.setAttribute('id', 'back');
+ back.setAttribute('class', 'button');
+ back.setAttribute('href', '/userhome');
+ back.textContent = 'Back';
+ buttons.appendChild(back);
+
+ var hr_added = false;
+ playlist.tracks.items.forEach(async (item) => {
+ var artists = []
+ item.track.artists.forEach(artist => {
+ artists.push(artist.name)
+ })
+ var temp_track = {
+ artists: artists,
+ audio_features: [],
+ name: item.track.name,
+ track_id: item.track.id,
+ playlist_id: playlist_id
+ };
+ temp_playlist.push(temp_track);
+
+ // division line
+ if (hr_added) {
+ const hr = document.createElement('hr');
+ trackInfo.appendChild(hr);
+ } else {
+ hr_added = true;
}
- playlistInfo.appendChild(playlist_img);
- // playlist name
- const playlist_name = document.createElement('p');
- playlist_name.setAttribute('id', 'playlist-name');
- playlist_name.textContent = playlist.name;
- playlistInfo.appendChild(playlist_name);
- // container for confirm/back buttons
- const buttons_div = document.createElement('div');
- buttons_div.setAttribute('id', 'buttons');
- playlistInfo.appendChild(buttons_div);
- // confirm button
-
- const confirm = document.createElement('a');
- confirm.setAttribute('id', 'confirm');
- confirm.setAttribute('class', 'button');
- confirm.textContent = 'Confirm';
- confirm.setAttribute('onclick', 'confirm()');
- confirm.setAttribute('href', `/recommend`);
- buttons.appendChild(confirm);
- // back button
- const back = document.createElement('a');
- back.setAttribute('id', 'back');
- back.setAttribute('class', 'button');
- back.setAttribute('href', '/userhome');
- back.textContent = 'Back';
- buttons.appendChild(back);
-
- //
-
- var hr_added = false;
- playlist.tracks.items.forEach(async (item) => {
- var artists = []
- item.track.artists.forEach(artist => {
- artists.push(artist.name)
- })
- var temp_track = {
- artists: artists,
- audio_features: [],
- name: item.track.name,
- track_id: item.track.id,
- playlist_id: playlist_id
- };
- temp_playlist.push(temp_track);
- // division line
- if (hr_added) {
- const hr = document.createElement('hr');
- trackInfo.appendChild(hr);
- } else {
- hr_added = true;
- }
// create a row container for each track
const track = document.createElement('div');
@@ -218,6 +242,7 @@
}
async function confirm() {
+
for (var i = 0; i < temp_playlist.length; ++i) {
postData('/track', temp_playlist[i])
.then(res => {
@@ -225,8 +250,20 @@
playlist_id = res.playlist_id;
});
}
- // await recommend();
- };
+
+ if (readyToRecommend) {
+ pushPlaylistArray();
+ }
+ }
+
+ async function pushPlaylistArray() {
+ console.log(`posting playlist array: ${playlist_id}, ${playlist_2}`)
+ postData('/confirmPlaylist', [playlist_id, playlist_2])
+ .then(res => {
+ console.log(res)
+ })
+ }
+
// fetch post request
async function postData(url = '', data = {}) {
@@ -240,4 +277,42 @@
return response.json()
}
+ async function getPlaylistArray() {
+ var temp = []
+
+ await fetch('/playlistArray')
+ .then (response => {
+ if (response.status != 200) {
+ console.log(`Error ${response.status}`)
+ }
+ return response.json()
+ })
+ .then (data => {
+ playlist_id_array = data.playlistArray;
+ temp = data.playlistArray;
+ console.log(`THE TWO PLAYLISTS ON BROWSER ARE: ${playlist_id_array}`);
+ })
+ .catch (err => {
+ console.log(err);
+ })
+ console.log(`temp: ${temp}`)
+ return temp;
+ }
+
+ // fetch get request
+ // async function getData(url = '', params = []) {
+ // params.forEach(async (param) => {
+ // url += "/" + param
+ // });
+ // const response = await fetch(url, {
+ // method: 'GET',
+ // headers: {
+ // 'Content-Type': 'application/json'
+ // }
+ // })
+ // return response.json()
+ // }
+
+ // runRecommendations()
+
\ No newline at end of file
diff --git a/views/recommend.ejs b/views/recommend.ejs
index 3b5d9b7..9c556ab 100644
--- a/views/recommend.ejs
+++ b/views/recommend.ejs
@@ -14,7 +14,7 @@
-