Registrations Closing Soon for DevOps Certification Training by CloudxLab | Registrations Closing in

  Enroll Now

Creating the upload.html file

  • Now inside the templates directory, we will proceed to create the upload.html file.

  • This page displays the uploaded image along with the predicted classes and the probabilities.

Note:

  • vi is used to:

    • create and edit the file, if the file doesn't exist.
    • edit the file, if the file already exists.

    If we want to create and/or edit the file named myFile, we use vi myFile.

  • To exit from the file, we click esc key and type :wq and hit on enter key. In :wq, w means save, and q means quit.

INSTRUCTIONS
  • This file upload.html should be created inside Image-Classification-App/templates. So make sure you are in the Image-Classification-App/templates. You could check your present working directory using the command:

    pwd
    

    This command should output the path:

    /home/$USER/Image-Classification-App/templates
    

    If the path displayed is not the same as the above, switch to the Image-Classification-App using

    cd ~
    cd Image-Classification-App/templates
    
  • Create the file named upload.html using the vi command inside the Image-Classification-App/templates/ directory.

  • Press i key on your keyboard, to switch to insert mode in the file.

  • Copy-paste the below HTML code:

    {% extends "layout.html" %}
    
    {% block content %}
    <div class="centered">
        <div class="row">
            <div class="col-md-5"> 
                <div class="image-container">
                    <figure>
                      <img src="/static/uploads/{{display_image}}" style="width:400px;height:250px;">
                    </figure>
                </div>
            </div>
        </div>
        <div class="row">
            <p style="color:red"> {{predictions}}</p>
        </div>
    
        </br>
    
        <div class="row">
            <div class="col-md-5">
                <div class="upload-form">
                    <p><b>Upload another?</b></p>
                    <form action = "/uploader" method = "POST" 
                              enctype = "multipart/form-data">
                        <input type = "file" name = "file" />
                        <input type = "submit"/>
                    </form>
                </div>      
            </div>
        </div>
    </div>
    {% endblock %}
    

    Observe the following lines from the above code:

    • We again write

      {% extends "layout.html" %}

      to import/link the layout.html file that we have previously created.

    • {% block content %}
      
            << some HTML code >>
      
      {% endblock %}
      

      This is the place where we display the content which is exclusive to this HTML file( or more simply, this page).

      The content that is exclusive to this page is (1) to display the input image we uploaded along with the top 3 predictions given by the classifier for this input image, and (2) to show the form to upload and submit another input image.

    These 2 functioalities are coded within the 2 snippets of code as shown below:

    • The following code displays the input image we uploaded along with the top 3 predictions given by the classifier for this input image:

                <div class="row">
                      <div class="col-md-5"> 
                          <div class="image-container">
                              <figure>
                                <img src="/static/uploads/{{display_image}}" 
                                    style="width:400px;height:250px;">
                              </figure>
                          </div>
                      </div>
                 </div>
      
                 <div class="row">
                         <p style="color:red"> {{predictions}}</p>
                 </div>
      

      In the above, observe <img src="/static/uploads/{{display_image}}" style="width:400px;height:250px;">. This line displays the image which will be uploaded. The uploaded image is stored in /static/uploads/upload.html.

      Also in the above, observe <p style="color:red"> {{predictions}}</p>. This line displays the predictions given by the model. The text will be displayed in red color.

    • The following code displays the form to upload and submit an image again:

         <div class="row">
            <div class="col-md-5">
              <div class="upload-form">
                  <p><b>Upload another?</b></p>
                  <form action = "/uploader" method = "POST" 
                            enctype = "multipart/form-data">
                      <input type = "file" name = "file" />
                      <input type = "submit"/>
                  </form>
              </div>     
            </div>
         </div>
      
  • Now, click on esc button on your keyboard.

  • Then, type :wq and then hit on enter key on your keyboard. This returns you to your console.


No hints are availble for this assesment

Answer is not availble for this assesment


Note - Having trouble with the assessment engine? Follow the steps listed here

Loading comments...