Week 2: Getting Emotional Returning the Dominant Emotion

Week 2 Step 4 ⬤⬤⬤⬤◯◯◯◯ | 🕐 Estimated completion: 5-10 minutes

Getting Emotional ~ Returning the Dominant Emotion

✅ Task:

Modify your Azure Function so that it returns the Dominant Emotion of an Image.

[ ] 1. In your function emotionalgifs, determine the dominant emotion in the emotion data and output the dominant emotion in the request body when you make a POST request
[ ] 🚀 Commit your code to emotionalgifs/index.js on the emotionalgifs branch
[ ] Create a pull request to merge emotionalgifs onto main, and only merge the pull request when the bot approves your changes!

1: Finding the Dominant Emotion

In order to match the results of the Face API with Gifs from the Giphy API, we need to determine the dominant emotion from the API response.

:hammer_and_wrench: Modifying the Azure Function

We need to access the emotion data by itself, without the face id and other analyzed data. To do this, we need to create another variable in the module.exports async function.

let emotions = result[0].faceAttributes.emotion;

:bulb: Now you've got the JSON object with all the emotion values, find the highest valued emotion! Use context.log(emotions) to see how it's structured.

We're accessing the data at index 0 because we're analyzing one face. If there were two faces, the data for the second face would be stored at index 1.

❓ How do I find the max value from the JSON object?

Recall that the entire JSON response object looks like this: ```js { "result": [ { "faceId": "a16f522d-0577-4e50-97cb-1feeef7aaf2e", "faceRectangle": { "top": 313, "left": 210, "width": 594, "height": 594 }, "faceAttributes": { "emotion": { "anger": 0, "contempt": 0, "disgust": 0, "fear": 0, "happiness": 1, "neutral": 0, "sadness": 0, "surprise": 0 } } } ] } ``` 💡 The code that we want is the `emotion` part of the response, not the entire thing. - Therefore, we will use the previously created variable `emotions`, which stores: ```js "emotion": { "anger": 0, "contempt": 0, "disgust": 0, "fear": 0, "happiness": 1, "neutral": 0, "sadness": 0, "surprise": 0 } ``` > :bulb: In JSON, the **key** values are what you use to access the **value**. `{key: value}`, or in our case, `{emotion: value}`. If we wanted to access `happiness` from the `emotions` JSON, we can use `emotions["happiness"]`, which returns `1`. In this example, we see that `happiness` has the highest value. Here are the steps to do this in code: 1️⃣ We need to create an array with the emotion values (ranging from 0 to 1) so that we can manipulate it and find the dominant emotion. `Object.values()` converts an object's values into an array, with each value in the object stored as a separate element: ```js let objects = Object.values(WHAT_IS_YOUR_JSON); // FILL IT IN // What your array could look like: [0.01, 0.34, .....] ``` > In our example, writing `Object.values(emotions)` would return an array of `[0, 0, 0, 0, 1, 0, 0, 0]`. > 💡 In JSON, the keys are what you use to access the value. {key: value}, or in our case, {emotion: value}. - However, if each value in a JSON object is unique to a key (meaning that if no 2 keys have the same value), we can also use the value to find the corrosponding key. Now, we need to find the dominant emotion in the array objects: 2️⃣ Let's break this line down. ```js const main_emotion = Object.keys(emotions).find(key => emotions[key] === Math.max(...objects)); ``` - `Math.max(...objects)` finds the max value of an array. Let's say it's 1. Here is more [info](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax) on `...` in JavaScript. - `Object.keys(emotions).find(key => emotions[key] === Math.max(...objects));` finds the emotion, or key, that matches the max value of 0.99. Let's say it's happiness. - Similar to `Object.values`, `Object.keys` will return an array of the keys in an object, `[anger, contempt, etc]` - The `.find` [method](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/find) on an array returns the value of the first element in the provided array that satisfies the provided test. - By looking at each key, and checking if the corrosponding value in the JSON is the max value emotion, we are able to see which emotion has the highest value (and is thereby the dominant emotion) 3️⃣ Now, `main_emotion` contains the dominant emotion! All we need to do is output `main_emotion` when the function is called: ```js context.res = { // status: 200, /* Defaults to 200 */ body: main_emo_return }; ```

jacky-mo-1111 / Bit_Project