Modify your Azure Function so that it determines the user's generation.
[x] 1: Write a function to download the image from the link you parsed in the previous step.
[ ] 2: Use node-fetch to create a POST request to the Face API to receive an age.
[ ] 3: Use vanilla Javascript to determine the generation from the age returned from the Face API using the following:
Generation
Range
GenZ
5 < age < 25
GenY
24 < age < 41
GenX
40 < age < 57
BabyBoomers
56 < age < 76
Unknown
Any other age
[ ] 4: Commit your updated code to song4u/index.js on the song4u branch
[ ] 5: Create a pull request to merge song4u onto main, and only merge the pull request when the bot approves your changes!
🚧 Test Your Work
To test your work, try texting a jpg image to your Twilio number (with a face!). After you text the image, you can context.log(age) or context.log(generation) to verify that your program and the FaceAPI is working!
We use context.log and not console.log, because Azure uses the context object in Functions.
‼️ Twilio does not allow a simple string to be sent. For example, the following code will NOT send a text back, but will still pass the bot's test, and allow you to move on to the next step.
context.res = {
body: generation
};
// THIS CODE WILL NOT RETURN ANYTHING BY TWILIO, but will work on Github!
Downloading image data
Based on the previous step, you should now be able to access your image url. We were able to access it with queryObject.MediaUrl0.
❓ How do I download the image?
Perform a quick GET request with fetch.
> :bulb: Remember that you need to initialize variables for your packages!
```js
let resp = await fetch(YOUR_URL,{
/*The await expression causes async function execution to pause until a Promise is settled
(that is, fulfilled or rejected), and to resume execution of the async function after fulfillment.
When resumed, the value of the await expression is that of the fulfilled Promise*/
method: 'GET',
})
// receive the response
let data = await resp.arrayBuffer()
// we are receiving it as a Buffer since this is binary data
```
Analyzing the image
Recall the analyzeImage() function we wrote in the previous project. This time, you will be calling for age data instead of emotion data.
❓ What's the syntax again?
⭐ Retrieve age data from the Face API.
```js
async function analyzeImage(img){
const subscriptionKey = process.env['subscriptionkey'];
const uriBase = // WHAT'S YOUR ENDPOINT?;
// env variables (similar to .gitignore/.env file) to not expose personal info
let params = new URLSearchParams({
'returnFaceId': 'true',
'returnFaceAttributes': //WHAT GOES HERE?
})
// making the post request
let resp = await fetch(uriBase + '?' + params.toString(),{
method: 'POST',
body: img,
// img is the parameter inputted
headers: {
'Content-Type' : 'application/octet-stream',
// HOW DO YOU AUTHENTICATE?
}
})
// receive the response
let data = await resp.json();
return data;
}
```
However, this code won't work. Fill in the code where needed **using your previous project and the documentation**.
❓ How do I get an age from my analysis function?
Like you've done before, **call the `analyzeImage()` function with your image you downloaded.**
>💡 Tip: Always `context.log()` your output so it's easier to determine how to access object attributes.
The function returns face data formatted in JSON. We can determine the age like so:
```js
let age = result[0].faceAttributes.age
```
This retrieves the **first face**, the `faceAttributes` attribute, and the `age` attribute from the previous object.
Determining and returning Generation
Using the provided names and age ranges, you can use if else logic in Javascript to determine the generation.
❓ Can I get an example?
```js
if (age > 5 && age < 25) {
id = "GenZ"
}
```
`id` is the variable we will return as the final generation.
`&&` means "and". The age needs to be greater than/equal to 5 AND less than/equal to 20 for the `id = "GenZ` to run.
Remember, Twilio will not allow a simple text like GenZ to go through, so all you have to do is return the generation in the body! We will return more data in the next steps, so you will be able to get a text back.
jacky-mo-1111
commented
2 years ago
Week 2 Step 7 ⬤⬤⬤⬤⬤⬤⬤◯ | 🕐 Estimated completion: 15-25 minutes
How old are you??
✅ Task:
Modify your Azure Function so that it determines the user's generation.
node-fetchto create aPOSTrequest to the Face API to receive an age.song4u/index.json thesong4ubranchsong4uontomain, and only merge the pull request when the bot approves your changes!🚧 Test Your Work
To test your work, try texting a jpg image to your Twilio number (with a face!). After you text the image, you can
context.log(age)orcontext.log(generation)to verify that your program and the FaceAPI is working!‼️ Twilio does not allow a simple string to be sent. For example, the following code will NOT send a text back, but will still pass the bot's test, and allow you to move on to the next step.
Downloading image data
Based on the previous step, you should now be able to access your image url. We were able to access it with
queryObject.MediaUrl0.❓ How do I download the image?
Perform a quick GET request with fetch. > :bulb: Remember that you need to initialize variables for your packages! ```js let resp = await fetch(YOUR_URL,{ /*The await expression causes async function execution to pause until a Promise is settled (that is, fulfilled or rejected), and to resume execution of the async function after fulfillment. When resumed, the value of the await expression is that of the fulfilled Promise*/ method: 'GET', }) // receive the response let data = await resp.arrayBuffer() // we are receiving it as a Buffer since this is binary data ```
Analyzing the image
Recall the
analyzeImage()function we wrote in the previous project. This time, you will be calling for age data instead of emotion data.:bulb: Don't forget to read the documentation!
❓ What's the syntax again?
⭐ Retrieve age data from the Face API. ```js async function analyzeImage(img){ const subscriptionKey = process.env['subscriptionkey']; const uriBase = // WHAT'S YOUR ENDPOINT?; // env variables (similar to .gitignore/.env file) to not expose personal info let params = new URLSearchParams({ 'returnFaceId': 'true', 'returnFaceAttributes': //WHAT GOES HERE? }) // making the post request let resp = await fetch(uriBase + '?' + params.toString(),{ method: 'POST', body: img, // img is the parameter inputted headers: { 'Content-Type' : 'application/octet-stream', // HOW DO YOU AUTHENTICATE? } }) // receive the response let data = await resp.json(); return data; } ``` However, this code won't work. Fill in the code where needed **using your previous project and the documentation**.❓ How do I get an age from my analysis function?
Like you've done before, **call the `analyzeImage()` function with your image you downloaded.** >💡 Tip: Always `context.log()` your output so it's easier to determine how to access object attributes. The function returns face data formatted in JSON. We can determine the age like so: ```js let age = result[0].faceAttributes.age ``` This retrieves the **first face**, the `faceAttributes` attribute, and the `age` attribute from the previous object.Determining and returning Generation
Using the provided names and age ranges, you can use if else logic in Javascript to determine the generation.
❓ Can I get an example?
```js if (age > 5 && age < 25) { id = "GenZ" } ``` `id` is the variable we will return as the final generation. `&&` means "and". The age needs to be greater than/equal to 5 AND less than/equal to 20 for the `id = "GenZ` to run.Remember, Twilio will not allow a simple text like
GenZto go through, so all you have to do is return the generation in the body! We will return more data in the next steps, so you will be able to get a text back.📹 Walkthrough Video