Let's make an app that can search similar images with Python and Flask Part2

Overview

Last time I made a github repository because it's a big deal, please star (beggar) SSAM-SimilaritySearchAppwithMNIST

As the title says. This time, you can easily get the data and the data size is small. If you put the MNIST image into the MNIST you know, you will find a similar MNIST image. I will write a story about making an application using MNIST as my own memo. This time, I will touch on Flask little by little.

Flask First of all, I'm not very familiar with Flask. I only have the feeling that it is relatively easy to create a web application and it is good for demos.

Let's proceed as if we were adding to the previous main.py.

Library to use

First, let's add the library to be used to the previous main.py

from flask import Flask, render_template
from flask import request

Hello Work in Flask

まずapp.run

Let's write app.run under the main () function that fetches the previous MNIST. Up runs. By the way, if you set debug = True, every time you save the .py file, the page will be reloaded and reloaded. If you want .html and .css to do that too, I think there was a way to do that. For more information, please google in the box in front of you.

if __name__ == "__main__":
    main()
    
    app.run(debug=True)

I will actually make it

app.run(debug=True)

Actually, just because I wrote the above, there is no app to run yet. Let's make an app to run immediately.

Even under the main () I wrote so far

def main():
    #Functions created so far(The following is omitted)

#~Add from here

app = Flask(__name__)

@app.route('/')
def index(): #Move first
        return render_template('index.html',
                            message='Hello Work')

Let's write. For now, you should have an app that opens index.html. Immediately at the terminal

python main.py

Let's see. Some characters will appear. If you look closely

 * Debug mode: on
 * Running on http://127.0.0.1:5000/ (Press CTRL+C to quit)

You can see that it is written. In other words, the app is running on the local http://127.0.0.1:5000/. Oops, for the time being, I'll look at it in chrome this time, so be careful as it may behave differently in other browsers. By the way, I usually use Firefox. Anyway, let's go to http://127.0.0.1:5000/ with joy and courage. ... Hmm?

jinja2.exceptions.TemplateNotFound
jinja2.exceptions.TemplateNotFound: index.html

... I think there will be some unclear notation like this. That should be that, the app first orders you to open index.html, but index.html is not prepared. I was careless. So let's create index.html.

index.html and layout.html

First, create a folder called templates and create files index.html and layout.html under it. The current file structure looks like this.

.
├── blog #Notes like blog posts
├── part1 #Archive of part1
├── part2 #Archive of part2
├── main.py #Files that actually work
├── static #The one with MNIST and Annoy data created in part1
└── templates #What I made this time
    ├── index.html
    └── layout.html

What is layout.html?

First, play with the contents of layout.html. Flask allows you to define a common layout. That's what defines it. I don't feel like doing anything special, so I'll write it lightly.

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="utf-8">
        <title>SAMPLE</title>
    </head>
    <body>
        <hr>
        {% block content %}
        {% endblock %}
    </body>
</html>

It is like this. Not found in common html

{% block content %}
{% endblock %}

There is such a notation, but I will leave it here for the time being.

layout.html is a so-called template. It's easy to write header settings that are troublesome to write many times here and read them in other .html files. It's convenient.

What is index.html?

Finally, I will play with the contents of index.html.

It's even more so now, but I'm not going to make anything fancy because it's meant to be a simple demo, and I don't really like html, css, or Javascript (I'm not familiar enough to get the job done). I just like Python. So, except for Python, I write the code in an atmosphere. Please let us know in the comments if you find something strange here. (However, I don't know if it will come because I am assuming an amateur like myself as the target who will read the article)

The introduction has become a little long. index.html. let's write.

{% extends "layout.html" %}

{% block content %}
<h3>It's the title</h3>
{{ message }}

{% endblock %}

I think it's okay to start with something like this. What I want to pay attention to immediately

{% extends "layout.html" %}

Look at this. This is the part that loads layout.html.

And it is written in the bottom,

<h3>It's the title</h3>
{{ message }}

And so on, loaded into layout.html

{% block content %}
{% endblock %}

What is written between is read and rendered. {{message}} is the part that is driven by the template engine (tabun) Jinja2, which will be explained later. Recall that we put message ='Hello Work' as the return value in the index () function of the first main.py. This is displayed. That is, if you pass a different string to this variable, it will be displayed. It will be important in programming study to change it appropriately and confirm that it is true. Please give it a try.

Now, if you copy and paste the layout.html and index.html above, enter the edit screen of main.py and try to save the file without changing ctl + s or command + s anyway. Then, something like below will reload and try to refresh the page.

 * Restarting with fsevents reloader

Once this is done, take a look at the page again.

Isn't it displayed like this?

Next goal

By now, it's already about 4000 characters. I haven't made much progress than I had imagined before I thought about drawing an article, but when I try to write what I want to write next, it seems to be twice as long from here, so stop here and continue next time. It seems better to turn it to. When I wrote out the manga, I saw somewhere that I was writing many times the number of volumes I expected at first, but I realized. I started with a light feeling, but it seems to be a long time.

On the other hand, I felt like I wouldn't let you talk about the slow game live videos I made a few times ago, but is it the difference between whether the game is the main subject or not? Anyway, let's stop chatting here and get into the summary.

Is it possible to make something a bit like a web application using Flask this time? I went to that point. Actually, I'm wondering how to proceed after this, so I think it will be late next time. I would be happy if I could meet again like that. Please leave a comment or LGTM. It took me 2 hours just to write this and I was tired. see you.

(If I'm not bored or busy) Continued:-> (Next URL)