The screen while you have a Spotify playing.
An example of manually inputted lyrics.
Homepage.
Dizzy Drake. To represent Canada.
Spotify authentication.

RapViz

See your favourite lyricist's rhyme schemes visualized, or perhaps visualize your own!

Inspiration

There are loads of videos online that inspired this project. Take a look at Genius' version, Check The Rhyme.

or Vox's Rapping, deconstructed: The best rhymers of all time

These videos get millions, and I mean millions of hits online. Why? Well, it's damn fun! And it's cool.

We thought we could leverage NLP, a couple of freely available APIs, and some basic React so create a website that generates these kinds of 'highlighted' rhymes. So what happened?

What it does

The user is presented with one of two options. They may either submit their own bars into a text field, or they can sign into Spotify and have their current song's lyrics analyzed. The lyrics are printed out with the rhyme scheme highlighted.

How we built it

We used a Flask backend to write a couple of endpoints to help us LyricsGenius, an API for scraping lyrics from Genius. We also wrote our NLP-based rhyme detection algorithm in Python and processed all of that data on the backend. Spotify authentication and the UI was all handled by React. We eventually deployed our app to Google Cloud so other users could try it.

Challenges we ran into

Develop the rhyme algorithm was really tricky, especially getting it to be fast enough (eventually down to O(n) time!). We also ran into issues integrating Spotify into our app, but eventually got it sorted.

Accomplishments that we're proud of

We are able to programmatically generate what would take a video editor likely a couple of hours to do! Leveraging modern web technologies and NLP, displaying the rhyme scheme of a song proved to be a challenging but very possible feat.

What we learned

We learned quite a bit about NLP, algorithm design, and making a Flask/React app. We also learned how to deploy a web app to GCloud.

What's next for RapViz: breakdown your favourite lyricist's rhyme schemes

We hope to make this app a bit more functional. Ideally, we'd like it so the lyrics display in sync with your music. That's pretty lofty though.

Built With

Submitted to

Created by

I mainly worked on the rhyme-finding python algorithm.

Jack He
I did most of the UI design, assisted with templating the project, and got Spotify connected.

Michael DeMarco
UBC
I connected the various apis together in React and Flask, as well as worked on the NLP rhyming algorithm. Also developed React components including the rhyme visualizer and styled them.

Liang Liu
Ryan Mehri