Creating the index.html File

Now inside the templates directory, we will proceed to create the index.html file.
This is the home page, where the user is asked to upload the image whose class should be predicted using our pre-trained model.

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 index.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 index.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 %}
<center>
    <div class="centered">
        <p><b>Upload an image to predict its class</b></p>
        <div class="upload-form">
          <form action = "/uploader" method = "POST" enctype = "multipart/form-data">
            <input type = "file" name = "file" />
            <input type = "submit"/>
          </form>
        </div>
 </div>
</center> 
{% endblock %}

Observe the following lines from the above code:

{% extends "layout.html" %}

This is the way we import/link the layout.html file that we have previously created. By doing this, we are applying the layout (as defined in the layout.html file) to our index.html.

{% 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 the form for uploading an image and submit it.

This is what is written inside the {% block content %} and {% endblock %}, as follows:

{% block content %}
<center>
    <div class="centered">
        <p><b>Upload an image to predict its class</b></p>
        <div class="upload-form">
          <form action = "/uploader" method = "POST" enctype = "multipart/form-data">
            <input type = "file" name = "file" />
            <input type = "submit"/>
          </form>
        </div>
 </div>
</center> 
{% endblock %}

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.

Get Hint See Answer

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

Project - How to Deploy an Image Classification Model using Flask

Creating the index.html File

XP

Loading comments...