This is a simple web application that uses facial emotion recognition to detect emotions from a user's face. It uses face-api.js for facial emotion recognition and the YouTube Data API v3 to get a list of songs by random artists. The application analyzes the user's facial expression and recommends a song that matches their mood.
The application also uses p5.js, react-p5, @tensorflow/tfjs, @tensorflow/tfjs-converter, @tensorflow/tfjs-core, @tensorflow/tfjs-node to power its facial emotion recognition feature.
A working version of the application is available at Emotunes.
The following dependencies are required to build and run the application:
-
React: A JavaScript library for building user interfaces, which provides a declarative approach to building UIs and encourages component-based architecture.
-
TypeScript: A typed superset of JavaScript, which provides static type checking and other features to help catch errors before runtime.
-
face-api.js: A JavaScript API for face detection and recognition in the browser, which provides a range of functions for analyzing facial features and emotions.
-
@tensorflow/tfjs: A JavaScript library for machine learning, which provides a range of tools and functions for training and running models in the browser.
-
@tensorflow/tfjs-converter: A library for converting trained models from various machine learning frameworks (such as TensorFlow and Keras) to the TensorFlow.js format.
-
@tensorflow/tfjs-core: The core library of TensorFlow.js, which provides low-level functions for building and training machine learning models.
-
@tensorflow/tfjs-node: A Node.js library for running TensorFlow.js models on the server side.
-
p5.js: A JavaScript library for creative coding, which provides a range of functions and tools for creating interactive graphics and animations.
-
react-p5: A React wrapper for p5.js, which provides a simple way to integrate p5.js sketches into a React application.
-
gh-pages: A tool for publishing a static website to a GitHub Pages repository, which provides a simple way to host and share your application online.
-
Node.js: A JavaScript runtime built on Chrome's V8 JavaScript engine, which provides a range of tools and libraries for building server-side applications. Node v18.15.0 is recommended.
-
npm: A package manager for the Node.js ecosystem, which provides a range of tools for installing, updating, and managing dependencies.
To install the dependencies and start the application, follow these steps:
-
Clone the repository to your local machine.
-
Install Node.js and npm, if you haven't already. Works best with Node v18.15.0.
-
Open a terminal window and navigate to the project directory.
-
Run
npm install
to install the required dependencies. -
Run
npm start
to start the development server. -
Open a web browser and navigate to
http://localhost:3000
to view the application. -
Add REACT_APP_YOUTUBE_API_KEY from Google Developers Console in the .env file at the root of your project directory to make the YouTube search work.
Running npm run build
builds the app for production to the build
folder.
It correctly bundles React in production mode and optimizes the build for the best performance.
The build is minified and the filenames include the hashes.
Your app is ready to be deployed!
Emotunes is deployed using gh-pages. To deploy the application to your own gh-pages site, follow these steps:
- Update the
homepage
field inpackage.json
to match your own repository URL. - Run
npm run deploy
.
This will create a production build of the application and deploy it to your gh-pages site.
- React 18
- TypeScript
- face-api.js
- YouTube Data API v3
- p5.js
- react-p5
- @tensorflow/tfjs
- @tensorflow/tfjs-converter
- @tensorflow/tfjs-core
- @tensorflow/tfjs-node
If you want to contribute to Emotunes, feel free to fork the repository and submit a pull request. Any contributions are welcome!
This project is licensed under the MIT License - see the LICENSE.md file for details.
To use the application, simply open it in a web browser and allow access to your device's camera. The application will use face detection and recognition to analyze your facial features and detect your emotions in real-time.