Week 3

[github-learning-lab[bot]]

Creating an HTML Page

It's time to begin working on the frontend of the application!

What is happening in this flowchart?

HTML Page: Begin coding the HTML and CSS frontend of the Emotion Reader that will directly interact with the user.

Concepts to know:

• Javascript Events
• HTML attributes
• Frontend vs. Backend

Important: For this week's issues, you must commit your code to this repository to move on to the next step. At each step, you should be completing the task and committing your solution code.

After watching the live demo, you should know the basics of how to create a simple website using the coding language, HTML, and some CSS if you want your webpage to look fancy. Now, your task is to create your own HTML page that inputs an image using a <form> and outputs the image's emotion data.

If you still need some help learning HTML and CSS, checkout these resources:

• W3Schools (HTML): https://www.w3schools.com/html/default.asp
• W3Schools (CSS): https://www.w3schools.com/css/default.asp

Here's a list of HTML items you need to create (please use the id's specified)

1. header element that says anything you want. For example, mine says Example Project
2. div element with id container that will surround all of your elements.
   1. form element with id image-form, with onsubmit="handle(event)". Set the enctype attribute to multipart/form-data. Remember that for forms that receive file uploads, we need to specify this type of encoding.
      • The following three elements are contained within the form element:
        • input element that allows a file upload, where the user will upload an image.
        • This link could be helpful.
        • Set the onChange attribute to "loadFile(event)". Use the accept attribute to only allow image submissions. Finally, set the name attribute to image.
        • img element with id output. This is going to display the image that the user selects.
        • button element with the type attribute set to submit. The text inside should say "Submit Picture" or something similar. This will submit the image.
   2. Empty div with the id emotion. This is where the emotion analysis results will be displayed.

Lastly, make sure to reference jQuery:

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script>

    <script src="config.js" type="text/javascript"></script>

Checkpoint #3

• If you don't have it yet, it is a good idea to install LiveServer, especially if you are using VScode.
• To start a local server, click Go live as shown.
• Test it out, and see what your HTML page looks like! It's OK if it's boring, but as I mentioned before, feel free to style it!

After that, you're done with the frontend. It's time to use JavaScript!

To move on, commit your code and comment a description of what you completed!

[a-padman]

I created an index.html file with options to add and submit an image file, for the front-end

[github-learning-lab[bot]]

Displaying Emotion Data

Javascript: In order to send and receive a request to the Azure Function, we must have Javascript to take these tasks.

Concepts to know:

• Javascript Events
• JSON format
• jQuery

Now that our image has been analyzed by the Face API, we have received emotion data in JSON format. Our task is to read the JSON file and output the emotions in the image (ie. anger, contempt, disgust, etc).

The first thing we need to do is create a function called loadFile(event) {} which creates a variable called image that gets the ID "output" and displays the image the user uploaded. To do this, we need to get the element ID by using document.getElementByID(id):

var image = //Call for element ID here

We also need to call for the image source using .createObjectURL(event.target.files[0]). Use .src on the image variable and call for the first file uploaded using the code above. When it's all put together, it should look something like this:

function loadFile(event) {
    var image = //set div for image output
    image.src = //Load inputted image
};

Checkpoint #4

Quick intermission:

1. Navigate to the HTML page we created
2. Attempt to upload an image
3. Does it display as a thumbnail?

Now we need to create our main function called handle(event) {}. This will take in the response; then, using the data from the Face API, it will create a new form that includes the amount of different emotions. As well, using the data from the Face API, it will display numerical values of emotion.

1. Using jQuery, target the output element ID and change the content to equal "Loading". Then add the line, event.preventDefault(); to disable the ability to reload the page. To event target with jQuery, use this sample:

   console.log ("submitting form...");
   $(/*Add ID here*/).html(/*Add content here*/)
   //make sure to disable reload here...

2. After telling our HTML to show the content "Loading", we need to set a few variables to create a new form with our emotion data. We can do this by adding a variable set to an element ID and creating a new FormData object based on the received information:

   var myform = document.getElementById('myform');
      var payload = new FormData(myform);
   
      const resp = await fetch(/*Add Function URL */, {
          method: 'POST',
          body: payload
   });

3. Next, we have to add a variable for the JSON data. Make a new variable called data and set it to the response JSON like we did earlier. If you need a hint, use the .json() function. We also need another variable, emotion, which will be set to data.result[0].faceAttributes.emotion;. This sets emotion to the first result in our JSON data, and pulls the information out into a value.

Checkpoint #5

Just like we tested the Azure Function earlier by printing out something into our log, we will do the same with our JavaScript.

Objective: Check if the code successfully makes a request to the Azure Function and receives emotion data by logging the value in the variable emotion.

Tip: Check the log using "Inspect element" or F12 and clicking on Console:

Stuck?

`console.log(emotion)`

Lastly, we have to create the HTML that will actually be displayed:

​ i. First, create an <h3> tag for the title labelled emotions in this image: (make sure to add <br /> at the end to skip a line)

​ ii. Now create 8 <p> tags that each show data for a different emotion. The list of emotions are anger, contempt, disgust, fear, happiness, neutral, sadness, and surprise.

​ iii. To get the data, remember we set var emotion to pull the first value. All we have to do is use jQuery and use this formatting. I've done the first one for you:

   var resultString = `
   <h3> Emotions in the image: </h3><br />
   <p> anger: ${emotion.anger}</p>

   `;
   // Finish for other data types using the same format (i.e. ${emotion.contempt}, and etc)

The last thing we need to do is to use jQuery to change the emotion div, emotion.

   $('#emotion').html(/* Emotion Data should go here */);

To move on to the last step, commit your code and comment a description of what you completed!

[a-padman]

Updated the index.js file to call and display results from my Azure function

[github-learning-lab[bot]]

Deploying through Azure Static Web Apps

Concepts to know:

• Web Deployment
• Azure Static Web Apps

Now that we can display emotion data and run our function locally, let's try deploying it onto the web so that everyone can access your website remotely. We'll be doing this through Azure Static Web Apps.

Web Deployment is the process of deploying our code (in our case, our HTML, CSS, and JS) from the local computer to a remote hosting platform. When deployed, a website will be able to be accessed by other computers, and not just your own.

Azure Static Web Apps is a service that automatically builds and deploys full stack web apps to Azure from a GitHub repository. That means we can simply commit our code to GitHub, and Azure will take the code from the repo and deploy it in a custom domain.

Let's get started.

The first step would be to commit your code as a repo in GitHub, but in your case, your code should already be committed. Thus, we'll simply move on to deployment.

Installing Azure Static Web Apps VSCode Extension

1. In Visual Studio Code, open your GitHub repo.

2. Select the Extensions icon in the Activity Bar on the left. It should look like four squares, with the top right square separated from everyone else, like this:

   

3. Search for 'Azure Static Web Apps', and you should see the extension 'Azure Static Web Apps (Preview)'. Install this extension.

Creating an Azure Static Web App

1. Now, select the Azure logo in the Activity Bar on the left to open the Azure extensions window. It should look something like:

   

   Note: Make sure you're signed into Azure and GitHub from Visual Studio Code. You should receive a prompt to sign in if you are not.

2. Hover over the STATIC WEB APPS (PREVIEW) label and click the plus sign to create a new one.

   1. Enter a name for your new web app.

      

   2. Select the master branch.

      

   3. You will then see "Select the location of your application code". This is searching for the location of the API in your application, but we will not have one in our case. Click the "/", and then select "Skip for now" should appear. However, if you plan to add an API, you can read more about it here.

      

   4. Now, you should see "Enter the path of your build output relative to your app's location". This is relevant if you are using certain frontend frameworks, but since we are using vanilla JS, we can simply clear the field and press Enter. However, if you are using a framework, such as Angular, React, or Vue, you can read more about its implementation at this link.

      

   5. Select a location nearest you and press Enter.

3. Once your app has been created, a confirmation notification will appear in Visual Studio Code that says "Successfully created new static web app...".

4. Go back to the STATIC WEB APPS (PREVIEW) label and expand your subscription name underneath. You should see the name of your app. Right click and select Open in Portal to view the app in the Azure portal.

   

5. The portal should open in a new browser window with your web app displayed. Click the "URL" to see your web app now deployed remotely!

   

Congratulations, you've just deployed a web app using Azure Static Web Apps!

The End

• Navigate to your custom URL
• Go through your project as if you were an user trying to use your product.
• You should see emotion data printed out in the correct location!

To officially complete this learning lab, please comment what you did this lesson.

[a-padman]

Created a static web app in the portal and created an api folder for all trigger code

[github-learning-lab[bot]]

📝 Week 3 Livestream Feedback

Please complete after you've viewed the Week 3 livestream! If you haven't yet watched it but want to move on, just close this issue and come back to it later.

Help us improve BitCamp Serverless - thank you for your feedback! Here are some questions you may want to answer:

• How was the content? Did it help you? Was it too challenging or too easy? Did it help you complete the week's homework?
• How was the pace? Was it hard to follow along? Did we go too slow?
• If you could add/improve something to/in the livestream, what would it be?

[a-padman]

I wish there was more specifications with the file structure of the HTTP code vs the front-end code in the learning lab Github repo. I ran into issues when I deploying because of my file hierarchy structure and ended up needing to create an api folder to distinguish the two. Otherwise, everything went smoothly.

[github-learning-lab[bot]]

Week 3

Below is a written format of the livestream for this week, included for future reference. To move on, close this issue.

Last week, you learned how to retrieve data from the Face API, make HTTP requests using fetch, and install and use npm dependencies.

Learning Objectives

• create an HTML page
• display facial hair data
• deploy using Azure Static Web Apps

Livestream

In the livestream, we're going to create an HTML file that displays our facial hair data.

• For the full video, look in the video folder.
• For the full code, look in the code folder.

We'll be going over how to:

1. work with Javascript events
2. use HTML attributes
3. connect the front and back end
4. read in JSON data and output it onto a page
5. deploy a web app using Azure Static Web Apps

---

📝 Review: Using HTML and CSS

After watching the live demo, you should know the basics of how to create a simple website using the coding language, HTML, and some CSS if you want your webpage to look fancy. Now, we want to create our own HTML page that inputs an image using a <form> and outputs the image's facial hair data.

If you still need some help learning HTML and CSS, checkout these resources:

• W3Schools (HTML)
• W3Schools (CSS)

💻 Creating an HTML Page

We need to create the following HTML items. (Important: please use the exact same ID's specified, as we'll be referencing these in our JS code)

1. header element that says anything you want. For example, mine says Example Project
2. div element with id container that will surround all of your elements.
   1. form element with id image-form, with onsubmit="handle(event)". Set the enctype attribute to multipart/form-data. Remember that for forms that receive file uploads, we need to specify this type of encoding.
      • The following three elements are contained within the form element:
        • input element that allows a file upload, where the user will upload an image.
          • This link could be helpful.
          • Set the onChange attribute to "loadFile(event)". Use the accept attribute to only allow image submissions. Finally, set the name attribute to image.
        • img element with id output. This is going to display the image that the user selects.
        • button element with the type attribute set to submit. The text inside should say "Submit Picture" or something similar. This will submit the image.
   2. Empty div with the id facial-hair. This is where the facial hair analysis results will be displayed.

Finally, we'll reference jQuery.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script>

<script src="config.js" type="text/javascript"></script>

To test your page out locally, first make sure you have LiveServer installed in VSCode. To start a local server, click Go live as shown below.

😊 Displaying Facial Hair Data

Now we'll need to read in the JSON file and output the facial hair onto our page.

The first thing we need to do is create a function called loadFile(event) {} which creates a variable called image that gets the ID "output" and displays the image the user uploaded. To do this, we need to get the element ID by using document.getElementByID(id).

We also need to call for the image source using .createObjectURL(event.target.files[0]). Use .src on the image variable and call for the first file uploaded using the code above. When it's all put together, it should look something like this:

function loadFile(event) {
    var image = document.getElementById('output')
    image.src = URL.createObjectURL(event.target.files[0])
}

Now we need to create our main function called handle(event) {}. This will take in the response; then, using the data from the Face API, it will create a new form that includes the various facial hair and their corresponding numerical values.

1. Using jQuery, target the output element ID and change the content to equal "Loading". Then add the line, event.preventDefault(); to disable the ability to reload the page. To event target with jQuery, use this sample:

   console.log("submitting...")
   $('#facial-hair').html('Loading...');
   event.preventDefault();

2. After telling our HTML to show the content "Loading", we need to set a few variables to create a new form with our facial hair data. We can do this by adding a variable set to an element ID and creating a new FormData object based on the received information:

   var myForm = document.getElementById('image-form');
   var payload = new FormData(myForm);
   
   const resp = await fetch(functionURL, {
      method: 'POST',
      body: payload,
   });

3. Next, we have to add a variable for the JSON data. Make a new variable called data and set it to the response JSON like we did earlier. We also need another variable, beard, which will be set to data.result[0].faceAttributes.facialHair;. This sets beard to the first result in our JSON data, and pulls the information out into a value.

   var data = await resp.json();
   var beard = data.analysis[0].faceAttributes.facialHair;

Lastly, we have to create the HTML that will actually be displayed:

i. First, create an <h3> tag for the title labelled Facial Hair in image: (make sure to add <br /> at the end to skip a line)

ii. Now create 3 <p> tags that each show data for a different facial hair type. The list of types are moustache, sideburns, and beard.

iii. To get the data, remember we set var beard to pull the first value. All we have to do is use jQuery and use this formatting.

var resultString = `
<h3> Facial Hair in image:</h3> <br />
<p> Moustache: ${beard.moustache}</p>
<p> Sideburns: ${beard.sideburns}</p>
<p> Beard: ${beard.beard}</p>
`

The last thing we need to do is to use jQuery to change the facial hair div, facial-hair.

$('#facial-hair').html(resultString);

In the end, your handle function should look like this:

async function handle(event) {
    console.log("submitting...")
    $('#facial-hair').html('Loading...');
    event.preventDefault();

    var myForm = document.getElementById('image-form');
    var payload = new FormData(myForm);

    const resp = await fetch(functionURL, {
        method: 'POST',
        body: payload,
    });

    var data = await resp.json();

    var beard = data.analysis[0].faceAttributes.facialHair;

    var resultString = `
    <h3> Facial Hair in image: </h3> <br />
    <p> Moustache: ${beard.moustache}</p>
    <p> Sideburns: ${beard.sideburns}</p>
    <p> Beard: ${beard.beard}</p>
    `

    $('#facial-hair').html(resultString);
}

😄 Deploying using Azure Static Web Apps

Now that we can display facial hair data and run our function locally, let's try deploying it onto the web so that everyone can access your website remotely. We'll be doing this through Azure Static Web Apps.

First, make sure:

1. All of your code is committed to GitHub.
2. The Azure Static Web Apps VSCode Extension is installed.

Installing Azure Static Web Apps VSCode Extension

1. In Visual Studio Code, open your GitHub repo.

2. Select the Extensions icon in the Activity Bar on the left. It should look like four squares, with the top right square separated from everyone else, like this:

   

3. Search for 'Azure Static Web Apps', and you should see the extension 'Azure Static Web Apps (Preview)'. Install this extension.

Creating an Azure Static Web App

1. Now, select the Azure logo in the Activity Bar on the left to open the Azure extensions window. It should look something like:

   

   Note: Make sure you're signed into Azure and GitHub from Visual Studio Code. You should receive a prompt to sign in if you are not.

2. Hover over the STATIC WEB APPS (PREVIEW) label and click the plus sign to create a new one.

   1. Enter a name for your new web app.

      

   2. Select the master branch.

      

   3. You will then see "Select the location of your application code". This is searching for the location of the API in your application, but we will not have one in our case. Click the "/", and then select "Skip for now" should appear. However, if you plan to add an API, you can read more about it here.

      

   4. Now, you should see "Enter the path of your build output relative to your app's location". This is relevant if you are using certain frontend frameworks, but since we are using vanilla JS, we can simply clear the field and press Enter. However, if you are using a framework, such as Angular, React, or Vue, you can read more about its implementation at this link.

      

   5. Select a location nearest you and press Enter.

3. Once your app has been created, a confirmation notification will appear in Visual Studio Code that says "Successfully created new static web app...".

4. Go back to the STATIC WEB APPS (PREVIEW) label and expand your subscription name underneath. You should see the name of your app. Right click and select Open in Portal to view the app in the Azure portal.

   

5. The portal should open in a new browser window with your web app displayed. Click the "URL" to see your web app now deployed remotely!

   

Congratulations, you've just deployed a web app using Azure Static Web Apps!

Congratulations, you've just deployed a web app using Azure Static Web Apps!

• Navigate to your custom URL
• Go through your project as if you were an user trying to use your product.
• You should see facial hair data printed out in the correct location!

🎉 That's the Week 3 Livestream! Reach out to your mentors if you're having trouble.

To move on, comment any questions you have. If you have no questions, comment Done.

[a-padman]

Done

[github-learning-lab[bot]]

Great job completing week 3! Click here to start your final project!