March 15, 2016

Clarifai Featured Hack: Make Sweet Music With Photos Using Photoverse

Table of Contents:

Photoverse is a web application that turns images into music by recommending 8tracks internet radio playlists to fit the mood and feel of any photo. Time to find the soundtrack to your life!


Have you ever heard of synesthesia? It’s a condition in which one sense is simultaneously perceived as if by another sense. You know, when people “taste” music or “hear” colors. Anyway, Photoverse is kind of like that – an app that lets you “hear” images!

Photoversie playlist creation app

Leveraging the photo tagging power of the Clarifai API, Photoverse is able to search through 8tracks‘ internet radio library and show the user the top playlists to fit the mood created by their photos. So, if you ever wondered what Donald Trump’s soundtrack would be, here’s your chance to find out. Spooky accurate, right?

President Trump Holding Finger Up

WHY WE ❤ IT
Photoverse is cool because it’s a perfect blend of art and science! As the saying goes, a picture is worth a thousand words … but when you add in Clarifai, it can be worth a thousand songs! You can check out the live demo of Photoverse or the GitHub repo and try it for yourself.

 

HOW YOU DO IT
We asked the Photoverse team – Zackery Harley, Colin MacLeod, Jake Alsemgeest, and Andrés Kebe – to tell us how they came up with the app and what they used to build it. Here’s what they had to say!

Clarifai: What inspired your idea for Photoverse?
Zackery: Before coming to ConUHacks, Colin and I were talking about creating some sort of website or web app and were trying to brainstorm ideas. We both love music and technology so I suggested making something with the Spotify API. After we read through the list of sponsor APIs for ConUHacks, I came up with the idea to suggest playlist based of of tags generated by Clarifai’s API. We ended up joining up with Jake and Andrés at the team building session.
Andrés: I always end up spending more time finding a perfect playlist for the moment rather than actually listening to it. With Photoverse, all that extra time can finally be used to enjoy the music.


C: What sorcery is this? Or, how did you build your app?
Zackery: We used a Node.js server along with some dependencies (body-parser, express, js-sha512, request, clarifai, stylus, cheerio, socket.io) to run the backend for the project. We used this server to query Clarifai’s API, which would then return tags based on the image we supplied. Due to the fact that 8tracks no longer supplies API keys, we had to use a workaround to generate playlists. This involved sending a GET request to 8tracks’ search page using the generated tags, where we them extract the playlist IDs. We use this info to create iframes which show the embedded players on our page.
Andrés: I personally worked on the front end of the app, designing both the interface and the logo. The real magicians were Zach and Jake who reversed engineered a way to use 8tracks inside our web app.


C: What was the best part about working with the Clarifai API?
Zackery: Unlike a lot of other companies’ APIs (or lack thereof), the Clarifai API is well documented and easy to use. It made getting the info we required very simple and helped us reach our goal of generating playlists for photos.
Jake: Ease of use was definitely cool.  The tags it would generate were actually really interesting as they wouldn’t be something I would always think with.  Sometimes they wouldn’t be the best for our given uses, however we found ways to work with them all.
Andrés: It was incredible to see how accurate the Clarifai API is. It accurately tagged all the pics we applied it to.


Thanks for sharing, guys!


To learn more, check out our documentation and sign-up for a free Clarifai account to start using our API – all it takes is three lines of code to get up and running! We’re super excited to share all the cool things built by our developer community, so don’t forget to tweet @Clarifai to show us your apps.