A Modern Jazz Discovery Tool (pt. 2)
This is part two of a two-part series. This article focuses on the deployment of my content-based discovery tool on Streamlit.
In part one of this series, I walked us through the journey of building the Modern Jazz Discovery tool starting with the motivations of the project, the data used, the insights gleaned from analyzing the data, and how the recommender was built. This article will focus on a short tutorial of the Streamlit app itself as well as how to embed a Spotify play button into the app. Here’s the general flow of the article:
- Streamlit App — Exploring the data
- Streamlit App — Discovery by Artist or Genre
- How to embed a Spotify play button
The screenshot above is the landing page of our modern jazz discovery tool. As seen in the left panel, the tool is split into two sections. The first, “Explore the data”, focuses on the data insights and is more exploratory. For example we see similar graphs that we saw in the previous article, however we have a bit more dynamic functionality.
The second section of the tool, “Jazz Discovery”, is the recommendation system itself. This is where the Jazz Discovery magic happens!
Artist Search
As seen above, a user can discover jazz by typing in a favorite artist name or selecting a favorite genre. Let’s check out the search by artist first. Say we wanted to find artists similar to Radiohead since that’s one of our favorite bands. By entering “Radiohead” in the search box, the term is searched in jazz album reviews to see if it ever showed up. Next we can enter the number of recommended albums we’d like to see based on this search parameter. We can enter up to 10 matches. If there are no matches (meaning Radiohead doesn’t show up in any jazz reviews) then we don’t receive any recommendations. However, if there is a match, the recommendation system will find the albums that had Radiohead mentions and give a list of these matches:
Above is a snapshot of the results. Info includes the album name, artist and album texture (as explained in the previous article). You will also have a chance to listen to the album using a Spotify play button. I will explain further below how I incorporated this into the app. First let’s briefly look at discovery by genre.
Genre Search
Let’s say I want to discover jazz music but am mostly into electronic music. So I want to find jazz albums that have similar textures to electronic.
Having selected genre=electronic, we have a choice of sub-genres to choose from. Say we’re in the mood for some dark ambient today. I can select how frequently the phrase “dark ambient” shows up in reviews if more than once but we’ll choose one for now. Lastly, we now have a list of jazz artists that meet our parameters. I’m curious about this band called Belong. Once I click the Discover button, we get 5 recommended albums by default. The information given is the same as when you search by artist, however you will also get the cosine-similarity score:
Spotify Play Button
So how did we get the Spotify play button into the application? Based on a brief search, there are many tutorials on how to do this. There is no one-size-fits-all method so here are some of the components I pieced together to get this to work in my Streamlit app. Below are the general steps:
- Obtain Spotify API credentials and initialize connection using Spotipy
- Use our list of albums (or artists) to get the Spotify embed link
- Bring link into your dataframe and load in your app
Step 1. Obtain Spotify API credentials and establish connection
Spotify’s web API is extremely useful and easy to use. I won’t go into how to obtain Spotify credentials but here’s a link to the API Tutorial to get started. After obtaining your Spotify API credentials, you will need to import Spotipy and then initiate a connection to the API using the following code:
import spotipy
from spotipy.oauth2 import SpotifyClientCredentials
from tqdm import tqdm
from time import sleep
import time
import pandas as pd
import numpy as np# Replace Spotify Credentials once you've set up an accountclient_credentials = SpotifyClientCredentials(client_id = ‘xxxxxxxx’, client_secret = ‘xxxxxxxx’)
sp = spotipy.Spotify(client_credentials_manager = client_credentials)
Step 2. Obtain Spotify Album ID
The next step is to obtain the unique ID’s (Spotify URI) related to the Spotify albums in our data. For some context, each album, artist and track on Spotify is uniquely identified by an URI (which is basically just a unique identifier). For example, if I want to hear Miles Davis, Kind of Blue, I would need the following link:
https://open.spotify.com/embed/album/1weenld61qoidwYuZ1GESA
The prefix of this url is static to embed albums, but the bolded alphanumeric portion at the end is the URI for this album. So how do we obtain these? We start with our data by getting a unique list of albums we’d like the URI’s for:
Above is just a sample of 5 artists and albums we want the Spotify embed for. Now that we have a unique column of albums we convert this into a list in order to search for the album URI using the Spotipy package:
album_list=list(df_wide_art[‘album’])
artist_list=list(df_wide_art[‘artist’])Given this list of albums we search for the album URI and append these to a separate list using the following code:
Step 3. Create Spotify embed link and load into app
Our album URI is seen in the last portion of the results above (after the 2nd colon). Therefore we strip these out and create an embed link:
As seen above, the album_uri_link is what we need to embed the Spotify play button into our app. Now that we have this in our dataframe, in our code to build the Streamlit app, we can write a function that loads the link to the Spotify embed for use in our app:
def load_audio2(url):
if type(url) == str:
try:
audio2=url
components.iframe(album_uri_link , width=600, height=200 )
except:
st.image([‘../img/none.jpeg’])For each album that is recommended there will now be a Spotify Play Button for you to sample and get a feel for.
Modern Jazz Discovery Tool
Finally, here’s a link to the jazz discovery tool deployed on Heroku for you to enjoy.
I hope you found this tutorial helpful in navigating the discovery tool as well as understanding how to embed a Spotify play button into your Streamlit app.
Disclaimer: this tool is a continual work in progress. Features and functions will be edited/added periodically. Any immediate feedback is more than welcome!
For more detail, code or to connect, please visit my Github repository or LinkedIn page.
