Guide: How to Build Emotion Recognition Application with JavaScript

Implementing Emotion Recognition API using JavaScript

Setting up the Environment

Let's start by creating a JS file, "emotions.js", with all the functions that we will use during the process. First, add the API_TOKEN as a global variable. You can get your token from your dashboard:

API_TOKEN = "your token"

Detecting emotions

To define a function that detects people emotions from the image, use this code:

function emotions(image, callback){
    var myHeaders = new Headers();
    myHeaders.append("token", API_TOKEN);

    var formdata = new FormData();    

    if ((typeof image == "string") && (image.indexOf("https://") == 0))
        formdata.append("photo", image);
    else
        formdata.append("photo", image, "file");

    var requestOptions = {
      method: 'POST',
      headers: myHeaders,
      body: formdata,
      redirect: 'follow'
    };

    fetch("https://api.luxand.cloud/photo/emotions", requestOptions)
      .then(response => response.json())
      .then(result => callback(result))
      .catch(error => console.log('error', error)); 
}

HTML file

Now, let's create an HTML page that allows us to upload the image. Then we will use emotions() function we've defined above, and output the result. Create "emotions.html" file and copy the following code into it:

<!DOCTYPE html> 
<html> 
<head>
    <title>Emotion detection demo</title>
    <script src="emotions.js"></script>
</head>

<body>
    <div>
        <h2>Emotion detection demo</h2>

        <div style="padding-bottom: 20px;">Please choose the photo for emotion detection</div>
        <input type="file" name="photo" onchange="javascript:detect_emotions()"/>
        <div id="detect-result" style="display: none; font-family: monospace; background-color: #606a94; color: white; margin-top: 20px; max-width: 600px; padding: 10px;"></div>
    </div>
</body>

<script>
function detect_emotions(){
    var photo = document.getElementsByName("photo")[0].files[0];

    emotions(photo, function(result){
        document.getElementById("detect-result").innerHTML = JSON.stringify(result, null, 8)
            .replace(/\ /g, "&nbsp;")
            .replace(/\n/g, "<br/>")

        document.getElementById("detect-result")["style"]["display"] = "block"
    });
}
</script>

</html>

Emotion Detection Results

The result of this call is an array containing information about the emotions of the people in the photo, and the rectangle coordinates of the face.

{
        "status": "success",
        "faces": [
                {
                        "rectangle": {
                                "top": 321,
                                "left": 329,
                                "bottom": 678,
                                "right": 686
                        },
                        "emotions": {
                                "happiness": 0.324,
                                "neutral": 0.676
                        }
                }
        ]
}

The values mean the following:

'status' - status or result of the operation, example - "success"
'faces' - a list of detected faces in the image, each element of this list defines the following parameters:
'rectangle' - coordinates of the detected face square in parameters - top, left, bottom, and right
'emotions' - detected face emotion in terms of categorical parameters - happiness, neutral … with an indication of the degree of emotion correspondence of each of the found categories from 0 to 1.