This project is for the Design Project of KAIST CS492E: "Human-AI Interaction" course.
Vocali
This service recommends songs based on user information for those who have difficulty choosing songs to sing in karaoke. Users record their voices to analyze their vocal range, and input their favorite songs and current moods. Accordingly, the system recommends appropriate songs through machine learning model. Users can get a explanation of the recommended results, or they can send feedback on the recommended results to further customize the results.
- Ant-Design: for effectively connecting graphic & interaction design in Figma with front-end developing
- React JS
- web-audio-daw: recording user voice via microphone on browser
This project is almost completed. We are going to conduct user study to find out whether this system can actually help users.
Clone down this repository. You will need node and npm installed globally on your machine.
Installation:
npm install
To Run Development Suite:
npm run start
To Build Application:
npm run build
To Update github pages
npm run deploy
To Visit App:
localhost:3000/vocali-web
Routing each pages
Recording users' voice and analyze vocal range.
Page that shows list of the songs that could be the seed for the recommendation model. Users can select the songs that they like to sing among this list.
Page that contains several categories that can indicate users' current mood. The selection affects the recommendation result.
Page that shows the recommendation result. It shows the recommending song one by one and users should enter their feedback to the song to see the next recommendation. Also, users can see the explanation about the recommendation and change the weight of each factor to control the model.
Page that shows the list of the songs that the user liked.
Header for many pages.
Footer for result pages.