Créons une application capable de rechercher des images similaires avec Python et Flask Part2

Aperçu

Dernière fois J'ai fait un dépôt github parce que c'est un gros problème, s'il vous plaît star (mendiant) SSAM-SimilaritySearchAppwithMNIST

Comme le dit le titre. Cette fois, vous pouvez facilement obtenir les données et la taille des données est petite. Si vous mettez l'image MNIST dans le MNIST, vous trouverez une image MNIST similaire. En créant une telle application, vous pouvez parler de la recherche approximative de voisinage et de Flask. J'écrirai également mon propre mémo sur la création d'une application en utilisant. Cette fois, je vais aborder Flask petit à petit.

Flask Tout d'abord, je ne connais pas très bien Flask. J'ai seulement le sentiment qu'il est relativement facile de créer une application web et c'est bon pour la démonstration.

Continuons comme si nous ajoutions au précédent main.py.

Bibliothèque à utiliser

Tout d'abord, ajoutons la bibliothèque à utiliser au main.py précédent

from flask import Flask, render_template
from flask import request

Harova avec flacon

まずapp.run

Écrivons app.run sous la fonction main () qui récupère le MNIST précédent. Up runs. Au fait, si debug = True, chaque fois que vous enregistrez le fichier .py, la page sera rechargée et rechargée. Si vous voulez que .html et .css fassent de même, je pense qu'il y avait un moyen de le faire. Pour plus d'informations, veuillez google dans la case en face de vous.

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

Je vais vraiment le faire

app.run(debug=True)

En fait, juste parce que j'ai écrit ce qui précède, il n'y a pas encore d'application à exécuter. Créons une application à exécuter immédiatement.

Même sous le main () j'ai écrit jusqu'à présent

def main():
    #Fonctions créées jusqu'à présent(Ce qui suit est omis)

#~Ajouter à partir d'ici

app = Flask(__name__)

@app.route('/')
def index(): #Déplacez-vous d'abord
        return render_template('index.html',
                            message='Harova')

Écrivons. Pour l'instant, vous devriez avoir une application qui ouvre index.html. Immédiatement au terminal

python main.py

Voyons voir. Certains caractères apparaîtront. Si vous regardez de près

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

Vous pouvez voir qu'il est écrit. En d'autres termes, l'application s'exécute sur le site http://127.0.0.1:5000/ local. Oups, je vais le regarder en chrome cette fois, alors soyez prudent, il peut se comporter différemment dans d'autres navigateurs. Au fait, j'utilise généralement un renard de feu. Quoi qu'il en soit, allons sur http://127.0.0.1:5000/ avec joie et courage. ... Hmm?

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

... Je pense qu'il y aura une notation peu claire comme celle-ci. Cela devrait être tout, l'application vous ordonne d'ouvrir d'abord index.html, mais index.html n'est pas préparé. J'étais insouciant. Créons donc index.html.

index.html et layout.html

Tout d'abord, créez un dossier appelé templates et créez des fichiers index.html et layout.html en dessous. La structure de fichier actuelle ressemble à ceci.

.
├── blog #Notes comme les articles de blog
├── part1 #Archive de la partie 1
├── part2 #Archive de la partie 2
├── main.py #Fichiers qui fonctionnent réellement
├── static #Celui avec les données de MNIST et d'Annoy fait en partie 1
└── templates #Ce que j'ai fait cette fois
    ├── index.html
    └── layout.html

Qu'est-ce que layout.html?

Tout d'abord, jouez avec le contenu de layout.html. Flask vous permet de définir une mise en page commune. C'est ce qui le définit. Je n'ai pas envie de faire quelque chose de spécial, alors je vais l'écrire à la légère.

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

C'est comme ça. Non trouvé dans le HTML commun

{% block content %}
{% endblock %}

Il existe une telle notation, mais je la laisserai ici pour le moment.

layout.html est un soi-disant modèle. Il est facile d'écrire des paramètres d'en-tête difficiles à écrire ici et de les lire dans d'autres fichiers .html. C'est pratique.

Qu'est-ce que index.html?

Enfin, je jouerai avec le contenu de index.html.

C'est encore plus le cas maintenant, mais je n'ai pas envie de faire des choses élaborées car il s'agit d'une simple démo, et je n'aime pas tellement html, css ou Javascript (je ne suis pas assez familier pour faire le travail). J'aime juste Python. J'écris donc le code dans une atmosphère autre que Python. S'il vous plaît laissez-nous savoir dans les commentaires si vous trouvez quelque chose d'étrange ici. (Cependant, je ne sais pas si cela viendra car je suppose qu'un amateur comme moi est la cible qui lira l'article)

L'introduction est devenue un peu longue. index.html. écrivons.

{% extends "layout.html" %}

{% block content %}
<h3>C'est le titre</h3>
{{ message }}

{% endblock %}

Je pense que c'est normal de commencer par quelque chose comme ça. Ce à quoi je veux faire attention immédiatement

{% extends "layout.html" %}

Regarde ça. C'est la partie qui charge layout.html.

Et c'est écrit en bas,

<h3>C'est le titre</h3>
{{ message }}

Et ainsi de suite, chargé dans layout.html

{% block content %}
{% endblock %}

Ce qui est écrit entre est lu et rendu. {{message}} est la partie qui est exploitée par le moteur de template appelé (tabun) Jinja2, qui sera expliqué plus loin. Rappelons que nous mettons message = 'halowa' comme valeur de retour dans la fonction index () du premier main.py. Ceci est affiché. Autrement dit, si vous passez une chaîne différente à cette variable, elle sera affichée. Il sera important dans l'étude de la programmation de la modifier de manière appropriée et de confirmer que c'est certainement le cas. Veuillez essayer.

Maintenant, si vous copiez et collez les layout.html et index.html ci-dessus, entrez dans l'écran d'édition de main.py et essayez de sauvegarder le fichier sans changer ctl + s ou command + s de toute façon. Ensuite, quelque chose comme ci-dessous se rechargera et essaiera de rafraîchir la page.

 * Restarting with fsevents reloader

Une fois que cela est fait, regardez à nouveau la page.

N'est-il pas affiché comme ça?

Prochain but

À l'heure actuelle, il s'agit déjà d'environ 4000 caractères. Ce n'est pas aussi avancé que je l'avais imaginé avant de penser à dessiner un article, mais quand j'essaie d'écrire la prochaine chose que je veux écrire, cela semble être deux fois plus long d'ici, alors arrêtez-vous ici et continuez la prochaine fois Il semble préférable de se tourner vers. Quand j'ai écrit le manga, j'ai vu quelque part que j'écrivais plusieurs fois le nombre de volumes que j'attendais initialement, mais je me suis rendu compte. J'ai commencé avec une sensation de légèreté, mais cela semble être long.

D'un autre côté, j'avais l'impression de ne pas vous laisser parler des vidéos en direct de slow game que j'ai faites il y a quelques temps, mais est-ce la différence entre le fait que le jeu soit le sujet principal ou non? Quoi qu'il en soit, arrêtons de discuter ici et entrons dans le résumé.

Est-il possible de créer quelque chose d'un peu comme une application Web en utilisant Flask cette fois? Je suis allé à ce point. En fait, je me demande comment procéder après cela, alors je pense qu'il sera tard la prochaine fois. Je serais heureux si je pouvais me revoir ainsi. Veuillez laisser un commentaire ou LGTM. Il m'a fallu 2 heures pour écrire ceci et j'étais fatigué. à plus.

(Si je ne suis pas ennuyé ou occupé) Suite: -> (URL suivante)