Week 2: Getting Emotional Calling the Giphy API

[counselorbot[bot]]

Week 2 Step 5 ⬤⬤⬤⬤⬤◯◯◯ | 🕐 Estimated completion: 20-30 minutes

Getting Emotional ~ Calling the Giphy API

✅ Task:

Call the GIPHY API with the dominant emotion of a picture

• [ ] 1: Create a GIPHY account and save your API key as a Function App Secret
• [ ] 2: In emotionalgifs, call the GIPHY API in a GET request with the dominant emotion
• [ ] 3: Commit your updated function code to emotionalgifs/index.js on the emotionalgifs branch
• [ ] 4: Create a pull request to merge emotionalgifs onto main, and only merge the pull request when the bot approves your changes!

:construction: Test your work

Create a POST request in Postman. Use the function URL as the request URL, and send an image in the body of the request:

:white_check_mark: Expected Output

The link outputted by the function should look something like this:

`https://giphy.com/gifs/happy-spongebob-squarepants-happiness-brHaCdJqCXijm`

1. Using the GIPHY API

We're going to connect the your first Azure function, emotionalgifs, with the GIPHY API.

Creating a GIPHY Account

Set up an account by clicking here and enter an email address, username, and password.

Generating an API Key

According to the documentation, an API key is a required parameters in a call to GIPHY's translate endpoint. The link (for gifs) that is listed in the documentation is the endpoint we will be using in this project.

❓ How do I create an API key?

To create an **API key** click [here](https://developers.giphy.com/dashboard/) and click Create an App.
Select API, **not** SDK!
Then, enter the required information.
Click **Create App**, and your key should be given. Next, store your API key in your Azure Function's environment secrets.

2. Modifying the Azure Function

We will be calling the GIPHY API in the same function that analyzes inputted images.

Create another async function in emotionalgifs called findGifs. It needs a parameter through which we can pass the dominant emotion of an image. Call this parameter emotion.

:bulb: Use the documentation to create a request to the Giphy API in the function.

:question: How do you call the GIPHY API?

We're going to call the GIPHY API inside our new async function using `fetch`. Use the **translate endpoint** from the [documentation](https://developers.giphy.com/docs/api/endpoint#translate). HINT: we want the dominant emotion from the image to be the **search term**, and we only want **1 gif** to be returned. ```js //COMPLETE THE CODE const apiResult = await fetch ("https://api.giphy.com/v1/gifs/translate?//WHAT GOES HERE?"); ``` > **Hint**: If you read the documentation correctly, you should see that you need to use your API key in the request. Remember to access your environment secrets, you can use `process.env['the secret name']` We need to convert the content of `apiResult` into **JSON format**. Remember, we're using the `await` keyword because `fetch` (which we used to call the GIPHY API) returns a Promise, and a Promise is a **proxy** for a value that isn't currently known. ```js const jsonResult = await //WHAT GOES HERE?.json(); ``` Finally, we need to return a specific link from the JSON file stored in `jsonResult`: ```js return //WHAT GOES HERE.data.url; ```

Now that you have a async function that can can the Giphy API with an emotion and return a gif link, you need to incorporate it in the main module.exports function.

TIP: Use await to receive a response from the function since it is async!

❓ How should I call the findGifs function we wrote?

Let's call findGifs in the first async function in emotionalgifs. Currently, our first async function looks like this:

module.exports = async function (context, req) {
    context.log('JavaScript HTTP trigger function processed a request.');

    const boundary = multipart.getBoundary(req.headers['content-type']);
    const body = req.body;
    const parts = multipart.Parse(body, boundary);

    let result = await analyzeImage(parts[0].data);

    let emotions = result[0].faceAttributes.emotion;
    let objects = Object.values(emotions);
    const main_emotion = Object.keys(emotions).find(key => emotions[key] === Math.max(...objects));

    context.res = {
        // status: 200, /* Defaults to 200 */
        body: main_emotion
    };
    console.log(result)
    context.done();
}

We need to declare another variable, gif. It needs to store the link returned when our new async function, findGifs, is called. Also, the dominant emotion from our analyzed image needs to be passed through the emotion parameter.

let gif = await //WHAT GOES HERE?

Finally, we need our new variable gif to be the output of emotionalgifs rather than main_emotion:

context.res = {
    // status: 200, /* Defaults to 200 */
    body: //WHAT GOES HERE?
};

📹 Walkthrough Video

[counselorbot[bot]]

⚡️ You're ready for Serverless!

Move on to the next issue.

[counselorbot[bot]]

⏰ Time to merge!

Go ahead and merge this branch to main to move on. Great work finishing this section!

⚠️ If you receive a Conflicts error, simply press Resolve conflicts and you should be good to merge!