SongSnap: A Journey Through Lyrics with ChatGPT

March 17, 2023

TLDR

Experience music in a whole new way with SongSnap - a website powered by the ChatGPT API that delivers concise, one-sentence summaries of your favorite songs! Check it out at mysongsnap.com

The Birth of SongSnap

It all started during a walk in the park, as I listened to 21 Savage and Metro Boomin's album "SAVAGE MODE II." I realized I didn't understand much of what was being said in the lyrics because I was more focused on the rhythms and melodies. I knew I wasn't the only one who faced this issue, especially with fast rappers like JID, who are incredibly talented, but sometimes difficult to follow.

This revelation sparked an idea in my mind – what if I could create a website that summarized rap lyrics in a single sentence? I could help other rhythm enthusiasts like me better understand the messages behind the music. With the release of the ChatGPT API, which offered a fast, affordable, and advanced way to generate text, I had the perfect foundation to build SongSnap.

The Core Functionality: Simple and User-Friendly

The vision for SongSnap was to create a simple, user-friendly interface that allowed users to input a song title and artist, press a button, and receive a summary of the lyrics. I wanted to make it as easy as possible for users to understand the meaning behind their favorite rap songs without having to sift through lengthy and complex lyrics.

The two main components behind this project is the LyricsGenius Python library and the ChatGPT API. The LyricsGenius library is a Python client for the Genius.com API and is able to get the lyrics, which the API cannot do. Other APIs such as Musixmatch or lyrics.com needed a commercial license and a subscription.

To ensure the quality of the summaries, I experimented with various prompts to find the ones that produced the best results. This process of fine-tuning and optimizing the prompts is ongoing, as I continuously strive to improve the summaries generated by the ChatGPT API.

With a background in Python and that the lyrics were available through LyricsGenius, I chose to use Flask for the backend of SongSnap, while HTML and CSS formed the foundation of the frontend. I selected Vercel as the hosting platform, following the recommendations of numerous developers on Twitter.

Overcoming Challenges and Learning Lessons

Consumer Perspective

When working on this project, I prioritized the experience of the consumer. What would be the easiest and most straightforward way to provide this information? Is this better than other alternatives out there? Can anyone use this? Questions like this constantly popped into my head when scoping this out and developing it. I involved a close group of friends in the development process and gathered their feedback and prioritized their new features. Their input proved to be invaluable and have given me many different new ideas to implement. To keep it as simplistic and functional as possible, I have limited it to just one sentence summaries and only taking in the song title and artist.

I also wanted to improve the user experience so that they were not waiting for the response to show up. Hence, I decided to look into another option that I discuss in further detail in the next section.

Cold Start Problem

The main challenge I have yet to overcome is the cold start problem, where the serverless function initially takes more time because it is busy processing and setting up the provisioned instance. As a result, the website would load to an error page. I along with my other testers noticed this, so I spent some time identifying the root cause.

I am able to extract the lyrics within ~1-2 seconds, but the ChatGPT generations take longer based on the length of the response. I did not see a way to improve the latency of these APIs, but the main bottleneck was the length of generated responses. I looked for a solution, where I stumbled upon Vercel edge functions and Hassan El Mghari's side project on generating twitter bios . This was an effective option because I used the edge functions to stream in the responses dynamically as ChatGPT was generating them instead of waiting for the entire response to be finished.

By redesigning and re-engineering the website using Next.js, Node.js, and Tailwind CSS, I was able to utilize that function. However, I still needed to use the LyricsGenius Python library to get the lyrics because official APIs require a commercial license and payment, and for a personal fun side project, I did not want to get a subscription. Thus, I was using three scripts, a Next.js script to call to the Node.js script to call to a Python script because Next.js and Python are not natively integrated. This was functional in my local environment, but when deploying it to Vercel, I ran into issues with the Python script not being detected in the runtime environment, which was specified to be Node.js. Perhaps it can work and I still need to look into it more? I will reach out to Vercel developers and see what their thoughts are.

Prioritization

Looking back, I wish I had spent more time focusing on the bulk of the work instead of getting caught up in small details or stylistic decisions. I realized the importance of having a clear game plan and focusing on creating a functional product, even if it's not perfect.

The Future of SongSnap

In the end, SongSnap has been an incredible learning experience, teaching me not only about web development and APIs but also about the importance of perseverance, experimentation, and collaboration. As I continue to improve and expand the project, I hope that SongSnap will inspire others to explore the world of music and deepen their appreciation for the artistry and messages behind the lyrics.