Creating the upload.html file

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.