Hello, everyone. In the previous video, we have completed our flask application. And we that we made it to the end of our course. But before we start our pipeline, I want to walk you through the HTML pages of our web application. Although we won't write them from scratch, I think it's pretty beneficial for you to see every single part of the code for the final product. Before we start, I just want to say that I'm not a web developer, by all means.
So my HTML code is probably very ugly. I just wrote it for you to have something up and running. If you want to create a better application out of this, please do and share it with us here. I am pretty excited to see what you can build from all things that you learn in this course. Okay, this is our index dot HTML. This is the homepage of the whole application.
In the head of it I included boats Right and jQuery libraries to experiment with design. But I ended up not using them at all in the body of the page in the main form. And the most important one is it has two elements. The first one is HTML input element for the file upload. And the second one is actually our input Submit button that will trigger the upload functionality of the form. And the method here is the post, because we want to send some data from the page to our server.
And the method should be the same as the method one mentioned in the flask application. I've used the simple style, which is just CSS syntax, which moves the whole form 10% from the top of the screen. And now look at the action from this form. You can see some weird syntax that you probably never seen before. The syntax is called Jinja templating language and it is a way to introduce Python language to HTML pages, and it is a form of writing it usually when using flask or Django frameworks. This right here is the main page of Jinja templating language.
Here you can find all the examples that you need. This templating method allows us to dynamically access resources such as images, CSS, and JS files in HTML pages. This approach simplifies the file access for web development. And the only thing to get used to this is weird syntax. At the end of this HTML file, there is a simple JavaScript function that only tracks the extension of the uploaded file. So if the uploaded file is not an image, the user won't be able to upload a file to our server that covers everything about this index page.
The result dot html page is even simpler. Then index dot HTML. At the top we use the header tag To write query image after that, by using Jinja templating language, we access the uploaded image with our helper functions and image. This function dynamically finds the uploaded file and returns its path to the server. You may ask what these image name and result page are, and where are they coming from. When we render the results dot html page from our application, we send two arguments to the method.
Their names our image, name and results pass. This is the way of accessing Python variables inside the HTML page. For the result paths part. We use Jinja templating language to iterate through image paths stored in the result PATH variable. Each item is an absolute path of an image located in a static folder. Because of that, we can easily locate and show an image and that's it.
Whole demo code. In the next video we are going to test the whole pipeline. And if you have any questions or comments, post them in the comment section. Otherwise, I'll see you in the next tutorial.