@iad-os/emotion-detector

Introduction

EmotionDetector is a fully configurable React library that makes use of face-api.js to detect:

• emotions
• gender
• age

Getting Started

Dependencies

The library has been successfully tested with the following packages versions. If you have a more recent version of these packages feel free to experiment and give me a feedback.

"react": "16.14.0",
"react-dom": "16.14.0",
"react-scripts": "3.4.3",
"web-vitals": "2.1.4"

Install

npm install @iad-os/emotion-detector

During the installation process you will notice that some required files will be copied under your "public" dir.

Usage Example

Minimal code to use the component:

<EmotionDetector
    onEmotionDetect={(detection: Detection) => {
    	//... some stuff with Detection object
    }}
    detecting={true}
 />

You can also use various props to fully configure the component.

Available props

Required Props

Key	Type	Description	Default
detecting	boolean	Enable/Disable Detection

Additional Props

Key	Type	Description	Default
onEmotionDetect	Function	Called on each detection. Returns a Detection object.
emotionDetectPeriod	number	Specifies the period between onEmotionDetect calls	1000
detectionPeriodMillis	number	Set detection period of face-api in milliseconds	1000
emoThreshold	number	Set a minimum percentage to say a emotion is for sure the one detected. Ex: if "happy" percentage is < emoThreshold, say it's positive.	60
detectAge	boolean	Enable/Disable Age detection	true
detectSex	boolean	Enable/Disable Sex Detection	true
showCam	boolean	Show/Hide Cam Component	true
camSizeRatio	number	Size ratio of the cam component. "1" is the Max Cam Size Resolution.	1
showLabel	boolean	Show/Hide Label component	true
labelFormat	string	Detection label format. Available values: "text", "emoji", "both". The Default value depend on the camSizeRatio and on the cam size.	"both"
text	string	Custom label text
labelStyle	React.CSSProperties	Custom label style