Inspiration

After the keynote presentations, Clarifai, an image and video recognition API seemed interesting to work with. With the desire to work on a fun project, we decided to utilize Clarifai and Spotify APIs for this hackathon.

What it does

We created a website called MusicalPics that can be accessed on both a computer and on mobile. MusicalPics allows the user to take or choose a picture to be uploaded on the website. A list of songs are recommended based on the visuals within the picture and the user is able to randomize and play a song with an embedded Spotify player.

How we built it

We built this project using javascript, html, css, Spotify's API, Clarifai's API, and Github. Once it is uploaded, Clarifai analyzes and tags the image. The tags are then filtered into Spotify's API where songs are chosen based on the similarities of their titles.

Challenges we ran into

A challenge we encountered was integrating Clarifai with the website due to difficulties with authenticating credentials. Another problem was, instead of a URL, it could not analyze and tag images that were stored in a local file on a computer. The main and major challenge of this hackathon was having to alter our original plan from using a video, to having to use an image because no matter how long we debugged, we simply could not figure it out..

Accomplishments that we're proud of

The main accomplishment was being able to upload, connect, and tag a local image using Clarifai. We were also very happy to have connected the tags with similar songs from Spotify and having a working prototype by the end of the day!

What we learned

The main learning takeaways was how to accurately use Clarifai and Spotify APIs, and integrating them with a website.

What's next for MusicalPics

In the future, it would be great to be able to tag the visuals from a YouTube video and create more specific, customizable tags for the user's images. In addition, it would be great to work on the mobile responsive design first before beginning to build the website.

Share this project:

Updates