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

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. 2-1.png

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)

Recommended Posts

Let's make an app that can search similar images with Python and Flask Part1
Let's make an app that can search similar images with Python and Flask Part2
Make a Discord Bot that you can search for and paste images
Create an app that guesses students with python
Let's make a nervous breakdown app with Vue.js and Django-Rest-Framework [Part 2] ~ Vue setup ~
Let's make a nervous breakdown app with Vue.js and Django-Rest-Framework [Part 1] ~ Django setup ~
Let's make a simple game with Python 3 and iPhone
Let's make a Mac app with Tkinter and py2app
Bordering images with python Part 1
An introduction to Python that even monkeys can understand (Part 3)
Let's create an app that authenticates with OIDC with Azure AD
An introduction to Python that even monkeys can understand (Part 1)
An introduction to Python that even monkeys can understand (Part 2)
Let's make a diagram that can be clicked with IPython
Easy deep learning web app with NNC and Python + Flask
[Python] Make a graph that can be moved around with Plotly
Let's make a WEB application for phone book with flask Part 1
Let's make a GUI with python.
Create an automatic grade management app for Tenhou private room with LINE bot and Python Part 1
Let's make a WEB application for phone book with flask Part 2
Create an automatic grade management app for Tenhou private room with LINE bot and Python Part 2
Create an automatic grade management app for Tenhou private room with LINE bot and Python Part ③
Let's make a WEB application for phone book with flask Part 3
Make a scraping app with Python + Django + AWS and change jobs
Let's make a graph with python! !!
Let's make a WEB application for phone book with flask Part 4
Let's make an IoT shirt with Lambda, Kinesis, Raspberry Pi [Part 1]
Solve with Python [100 past questions that beginners and intermediates should solve] (028 --033 breadth-first search)
Web search dialog that can automatically complete and enter keywords [Python] [Gtk]
Let's make an image recognition model with your own data and play!
"Manim" that can draw animation of mathematical formulas and graphs with Python
Explanation of creating an application for displaying images and drawing with Python
Let's make a shiritori game with Python
FM modulation and demodulation with Python Part 3
POST variously with Python and receive with Flask
Capturing images with Pupil, python and OpenCV
Fractal to make and play with Python
Let's make a voice slowly with Python
[Python] Let's make matplotlib compatible with Japanese
Easy web app with Python + Flask + Heroku
FM modulation and demodulation with Python Part 2
[Python] Quickly create an API with Flask
Create an English word app with python
Let's make a web framework with Python! (1)
Importing and exporting GeoTiff images with Python
Make a desktop app with Python with Electron
Let's make a Twitter Bot with Python!
Let's develop an investment algorithm with Python 1
Let's make a web framework with Python! (2)
[Python] Creating a tool that can list, select, and execute python files with tkinter & about the part that got caught
Create an application that inputs, displays, and deletes forms by using an array as a DB with Python / Flask.
Let's make an A to B conversion web application with Flask! From scratch ...
Let's make a nervous breakdown application with Vue.js and Django-Rest-Framework [Part 3] ~ Implementation of nervous breakdown ~
Let's make a nervous breakdown application with Vue.js and Django-Rest-Framework [Part 6] ~ User Authentication 2 ~
Let's make a nervous breakdown application with Vue.js and Django-Rest-Framework [Part 5] ~ User authentication ~
Solve with Python [100 selected past questions that beginners and intermediates should solve] (024 --027 Depth-first search)
Automatically search and download YouTube videos with Python
Create test data like that with Python (Part 1)
[Python] Make a game with Pyxel-Use an editor-
Causal reasoning and causal search with Python (for beginners)
Create an image composition app with Flask + Pillow