Have you ever thought that for some moments in your life you needed the right soundtrack? This is the app for you! You can provide us with a picture that represents your mood and we will create a Spotify playlist inspired by your image that conveys the same mood as the image.
This is the project for the CPAC course, we are Filippo, Jiayan and Haokun (Group7). We created a program that allows users to upload a local photo, or take a photo, then analyze it to return the user's favorite songs in their Spotify account.
Table of Contents
Picture Mood Playlist is an entertainment application that allows you to generate a Spotify playlist based on the mood of an input picture.
Follow the steps below to download, setup and run the app locally.
Before running, you will need the following:
-
Node.js
https://nodejs.org/en/download/
-
python 3.x (3.7 or above recommended)
https://www.python.org/downloads/
- Clone the repo
git clone https://github.com/armandoboemio/i-am-groove.git
- Install NPM packages
cd client npm i - Install python libraries
cd server pip install -r requirements.txt
- Run Flask
cd server flask run - Run NPM
cd client npm start
The user can tweak the parameters to get different rhytmic grooves and patterns.
User is asked to upload or take a picture of any kind. After the upload the AI process starts. We can have two situations:
- Face is present
- Face is not present
This step directly follows the previous one. The data we sent before is used in order to presonalize the user experience and to entertain him by asking him questions about his favourite songs and artists. When no face is present in the picture questions related to objects will appear and the chosen objects will be later used for the Playlist Generation purposes.
Finally, the answer of the previous questions, after some modifications, are used as a seed to request some recommened songs to the Spotify API. The returned songs will be filtered according to some rules that will give them scores: the closer the song is to the mood, the higher the score will be.
The app has been realized using a front-end + back-end approach.
The front-end or client is realized using the React framework. The client is composed by a main and different modules. Each sub-window function is defined as a component.
- The app component handles the conditional rendering of two children: LoggedIn.js and NotLoggedIn.js most of the GUI elements and state parameters updates are handled by these two components.
- NotLoggedIn.js Handles the Spotify authentication process
- LoggedIn.js contains all the web app logics and all the interactive steps after the user has logged in
The back-end or server is written in python using the micro-framework Flask. Here all the heavy-weight computation is done. In particular, the object recognition and mood recognition tasks are performed in this context. The API setups the routes to receive and send (GET and POST methods) the commands from the front-end. Secondary files hold the necessary functions for the main code to work. For example Spotify an Musixmatch calls are present.
Jayan Cui - [email protected]
Filippo Gualtieri - [email protected]
Haokun Song - [email protected]