Le jour où un débutant qui a commencé à programmer pendant deux mois et demi a créé une application web avec Flask

introduction

Merci d'avoir lu cet article en premier!

Cela fait environ deux semaines que j'ai publié un article sur l'analyse des données.

Cette fois, j'ai fini de suivre le cours sur l'application AI d'Aidemy, alors j'aimerais créer une application Web.

L'application est une application qui trie les images.

A qui est destiné l'article?

Ceux qui commencent ou viennent de commencer la programmation. Surtout pour les adultes qui travaillent pour apprendre la programmation

Si vous le lisez à ceux qui sont intéressés, ce sera l'une des références. Parce que j'ai créé l'application pour le travail

C'est un peu de temps à la fin et le temps passé en vacances. Par conséquent, "Quel est le meilleur lors de la programmation en travaillant?

Pouvez-vous programmer un diplôme? À la question qui inquiète les travailleurs et les débutants en programmation

Je pense que je peux fournir l'un des exemples de réponses.

Précautions pour les lecteurs

Je n'ai pas une compréhension stricte de ce qu'est le code parce que je me concentre sur la sortie elle-même.

Il peut ne pas être possible de donner une explication détaillée. Je suis désolé.

Cet article dit que vous pouvez sortir en programmation sans avoir une compréhension stricte du code.

Je veux l'envoyer. C'est l'une des choses les plus importantes que j'ai remarquées récemment. Exprimez-le autant que possible,

J'espère qu'il sera communiqué à tout le monde.

environnement

MacBookAir macOS : Catalina 10.15.5 Atom : 1.53.0 JupyterNotebook

Texte

0. Définition du thème et objectif final

Cette application est une application qui utilise la reconnaissance d'image. Si la machine peut facilement distinguer des choses similaires de l'œil humain,

Je pensais que c'était bien, donc pour le moment, j'ai pensé à deux choses qui étaient assez similaires. Au beurre, margarine, curry

Hirame, Kai Ato et Ai Kato. Après avoir réfléchi à diverses choses, j'ai fait du chou et de la laitue. Il était facile de collecter des données d'image

Car.

Implémentez une application sur le Web qui peut déterminer s'il s'agit de chou ou de laitue C'est le but ultime.

Cette fois, j'utiliserai un éditeur de texte appelé Atom, mais la structure du répertoire final créé sur Atom

Je vais le mettre à l'avance.

cabbage_lettuce/ 　├ image/ 　│ 　└ additional_image 　│　├ cabbage 　│　└ lettuce 　├ model.h5/ 　│　└ my_model 　├ static/ 　│　└ stylesheet.css 　├ template/ 　│　└ index.html 　├ exe.py 　└ imagenet.py

1. Collecte de données

Commencez par créer un répertoire nommé cabbage_lettuce. En dessous se trouve un fichier appelé imagenet.py

faire. Dans cette section, nous allons créer imagenet.py. Les données d'image proviennent d'une source de données appelée ImageNet

Charge 　 Le contenu de imagenet.py est principalement copié à partir des références suivantes, veuillez donc consulter la page suivante pour plus de détails.

J'ai hâte de travailler avec vous.

(Référence) ImageNet Comment télécharger ImageNet

Après avoir écrit imagenet.py, utilisez la ligne de commande. Apprenez à utiliser la ligne de commande avec Progate

Fait. Le cours d'étude en ligne de commande est gratuit, donc si vous ne le connaissez pas, essayez-le. beaucoup

C'est facile à comprendre.

Puisque j'utilise un Mac, j'utilise une ligne de commande appelée Terminal. Utilisez le terminal pour obtenir imagenet.py

Vous pouvez le démarrer avec "python imagenet.py", mais pour cela vous pouvez le faire à l'emplacement où se trouve imagenet.py.

Vous devez vous déplacer vers un répertoire d'un niveau supérieur. Jetez un œil à la structure de répertoires écrite ci-dessus

Et, à partir du répertoire cabbage_lettuce, les répertoires et fichiers sont branchés, mais c'est

Si vous suivez la direction opposée, vous montez dans la hiérarchie. Selon cette description, c'est un niveau au-dessus de imagenet.py.

Le répertoire est le répertoire cabbage_lettuce.

Utilisez la commande cd pour passer à un autre répertoire. Si vous êtes un niveau au-dessus de cabbage_lettuce,

Vous pouvez accéder à cabbage_lettuce en exécutant le code sur le terminal. La hiérarchie au-dessus de cabbage_lettuce est

Sur Mac, vous pouvez le vérifier à partir d'une application existante appelée Finder.

Terminal

cd cabbage_lettuce

Si "username cabbage_lettuce%" est affiché, il réussit. En cas de succès, procédez comme suit pour la laitue et le chou

Téléchargez l'image.

Terminal

python imagenet.py

2. Construction du modèle

Le modèle sera réalisé avec Jupyter Notebook. C'est très pratique lorsque vous souhaitez modifier les données en détail.

JupyterNotebook

from sklearn.model_selection import train_test_split
from keras.callbacks import ModelCheckpoint
from keras.layers import Conv2D, MaxPooling2D, Dense, Dropout, Flatten
from keras.models import Sequential
from keras.utils import np_utils
from keras import optimizers
from keras.preprocessing.image import img_to_array, load_img
import keras
import glob
import numpy as np
import matplotlib.pyplot as plt


#Chemin du répertoire d'images
root_dir = '/cabbage_lettuce/image/'
#Nom du répertoire d'images
veg = ['cabbage', 'lettuce']

X = []  #Liste qui stocke les données 2D des images
y = []  #étiquette(Bonne réponse)Liste pour stocker des informations sur

for label, img_title in enumerate(veg):
    file_dir = root_dir + img_title
    img_file = glob.glob(file_dir + '/*')
    for i in img_file:
        try:

            img = img_to_array(load_img(i, target_size=(128, 128)))
            X.append(img)
            y.append(label)
        except:
            print(i + "Échec de lecture")
#Liste en 4 dimensions de tableaux Numpy(*, 244, 224, 3)
X = np.asarray(X)
y = np.asarray(y)

#Convertir les valeurs de pixel de 0 à 1
X = X.astype('float32') / 255.0
#Étiquette un-Convertir en étiquette à chaud
y = np_utils.to_categorical(y, 2)

#Divisez les données
X_train, X_test, y_train, y_test = train_test_split(X, y, test_size=0.2, random_state=0)
xy = (X_train, X_test, y_train, y_test)

model = Sequential()
#Couche d'entrée,Couche cachée(Fonction d'activation:relu)
model.add ( Conv2D ( 32, (3, 3), activation='relu', padding='same', input_shape=X_train.shape[1:]) )
model.add ( MaxPooling2D ( pool_size=(2, 2) ) )

model.add ( Conv2D ( 32, (3, 3), activation='relu', padding='same' ) )
model.add ( MaxPooling2D ( pool_size=(2, 2) ) )

model.add ( Conv2D ( 64, (3, 3), activation='relu' ) )
model.add ( MaxPooling2D ( pool_size=(2, 2) ) )

model.add ( Conv2D ( 128, (3, 3), activation='relu' ) )
model.add ( MaxPooling2D ( pool_size=(2, 2) ) )

model.add ( Flatten () )
model.add ( Dense ( 512, activation='relu' ) )
model.add ( Dropout ( 0.5 ) )

#Couche de sortie(Classement 2 classes)(Fonction d'activation:softmax)
model.add ( Dense ( 2, activation='softmax' ) )

#Compiler (taux d'apprentissage:1e-3, fonction de perte: catégorique_crossentropy, algorithme d'optimisation: RMSprop, fonction d'évaluation: précision(Taux de réponse correct)）
rms = optimizers.RMSprop ( lr=1e-3 )
model.compile ( loss='categorical_crossentropy',
                optimizer=rms,
                metrics=['accuracy'] )

#Époque du modèle d'apprentissage
epoch = 10

#Apprenez avec le modèle construit
model.fit (X_train,y_train,batch_size=64,epochs=epoch,validation_data=(X_test, y_test) )

model.save('/cabbage_lettuce/model.h5/my_model')

scores = model.evaluate(X_test, y_test, verbose=1)

print('Test accuracy:', scores[1])

Ce code est presque comme un modèle, il est donc préférable de lire les articles écrits par d'autres personnes pour des explications détaillées.

J'espère que vous comprendrez comment le faire. S'il n'y a qu'une seule explication, les instructions try and except dans l'instruction for

Il est possible d'identifier des données d'image défectueuses qui ne peuvent pas être lues et qui sont mélangées dans les données d'image. pour ça

Par conséquent, l'édition des données d'image est devenue un peu plus facile.

Le code ci-dessus génère le taux de réponse correct pour ce modèle. Le résultat est

Test accuracy: 0.3184931506849315

31%!? C'est une précision terrible, c'est à peu près la même précision que moi car je ne peux pas distinguer tant que je ne l'ai pas mordu (rires)

Étant donné que l'objectif cette fois-ci est de créer une application, il n'y a pas de problème avec l'objectif sans le travail d'amélioration de la précision. Pas plus de temps

Je ne veux pas l'accrocher, alors je vais passer à autre chose.

3. Exprimez l'application sur le Web

Nous allons créer Flask, un outil de création d'applications Web, et HTML et CSS, qui créent l'apparence de l'application.

exe.py

import os
from flask import Flask, request, redirect, url_for, render_template, flash
from werkzeug.utils import secure_filename
from tensorflow.keras.models import Sequential, load_model
from tensorflow.keras.preprocessing import image
import numpy as np

classes = ["cabbage","lettuce"]
num_classes = len(classes)
image_size = 128

UPLOAD_FOLDER = "./image/additional_image"
ALLOWED_EXTENSIONS = set(['png', 'jpg', 'jpeg', 'gif'])

app = Flask(__name__)

def allowed_file(filename):
    return '.' in filename and filename.rsplit('.', 1)[1].lower() in ALLOWED_EXTENSIONS

model = load_model('./model.h5/my_model')#Charger le modèle entraîné

@app.route('/', methods=['GET', 'POST'])
def upload_file():
    if request.method == 'POST':
        if 'file' not in request.files:
            flash('Pas de fichier')
            return redirect(request.url)
        file = request.files['file']
        if file.filename == '':
            flash('Pas de fichier')
            return redirect(request.url)
        if file and allowed_file(file.filename):
            filename = secure_filename(file.filename)
            file.save(os.path.join(UPLOAD_FOLDER, filename))
            filepath = os.path.join(UPLOAD_FOLDER, filename)

            #Lisez l'image reçue et convertissez-la au format np
            img = image.load_img(filepath,grayscale=False,target_size=(image_size,image_size))
            img = image.img_to_array(img)
            data = np.array([img])
            #Transmettez les données transformées au modèle pour la prédiction
            result = model.predict(data)[0]
            predicted = result.argmax()
            pred_answer = "c'est" + classes[predicted] + "est"

            return render_template("index.html",answer=pred_answer)

    return render_template("index.html",answer="")


if __name__ == "__main__":
    port = int(os.environ.get('PORT', 8080))
    app.run(host ='0.0.0.0',port = port)

Permettre aux utilisateurs de soumettre des fichiers image, mettre les données soumises dans le modèle de reconnaissance d'image créé précédemment,

Le contenu est de renvoyer la sortie.

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>CL_Discriminator</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="./static/stylesheet.css">
</head>
<body>
    <header>


    </header>

    <div class="main">
        <h2>Identifie si l'image transmise est du chou ou de la laitue</h2>
        <p>Veuillez envoyer l'image</p>
        <form method="POST" enctype="multipart/form-data">
            <input class="file_choose" type="file" name="file">
            <input class="btn" value="remettre" type="submit">
        </form>
        <div class="answer">{{answer}}</div>
    </div>



</body>
</html>

stylesheet.css

header {
    background-color: #76B55B;
    height: 60px;
    margin: -8px;
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
}

.main {
    height: 370px;
}

h2 {
    color: #444444;
    margin: 90px 0px;
    text-align: center;
}

p {
    color: #444444;
    margin: 70px 0px 30px 0px;
    text-align: center;
}

.answer {
    color: #444444;
    margin: 70px 0px 30px 0px;
    text-align: center;
}

form {
    text-align: center;
}

Vous êtes maintenant prêt à partir.

Sur le terminal, accédez au répertoire un niveau au-dessus de exe.py (en cabbage_lettuce), puis exécutez ce qui suit.

Terminal

python exe.py

L'URL est incluse dans le résultat de sortie, donc lorsque je suis passé à elle, l'application était affichée sur le Web.

Je vais soumettre une image de laitue ramassée sur le filet à titre d'essai.

Je suis revenu calmement, mais j'ai fait une erreur.

Eh bien, je voudrais terminer le rapport livrable ici.

en conclusion

Enfin, j'aimerais réfléchir à mon apprentissage et à l'application. Accélérez l'apprentissage depuis environ un mois

J'apprends consciemment la programmation et j'ai des opinions cohérentes sur l'apprentissage.

J'écrirai à ce sujet. Si vous voulez de la vitesse dans l'apprentissage, c'est comme si vous alliez à l'école

Je pensais que je devais échapper au paradigme de l'apprentissage des extrants. Donc, sortie → imp

Apprendre, c'est-à-dire d'abord décider de ce que vous voulez faire, et si vous trébuchez dans le processus de fabrication, que diriez-vous de vérifier (saisir) à chaque fois?

J'ai pris la méthode de finition comme un produit. C'est assez difficile à cause de ma propre expérience d'étudier par moi-même.

Il ya un problème. En fréquentant une école en ligne, je crée un environnement où je peux poser des questions à des personnes ayant une expérience pratique.

Maintenant, il est possible d'établir l'apprentissage de sortie → entrée. Plusieurs fois dans la production de cette application

Je suis tombé dessus et à chaque fois, le mentor m'a aidé à plusieurs reprises. Bien sûr, vous pouvez demander à quelqu'un et obtenir le bon feedback

Si c'est un environnement qui revient, même les débutants peuvent apprendre rapidement par tous les moyens. Cependant, il y a aussi des problèmes

Je vais. J'ai appris qu'il n'y a pas de problème car cela fonctionnait comme prévu même avec une compréhension vague sans être familier avec le contenu du code.

C'est un point qui avance. Comme vous pouvez le voir dans cet article, à mesure que l'apprentissage de la programmation devient plus sophistiqué

Nous pouvons nous attendre à ce que des problèmes plus complexes surgissent et à la nécessité d’une compétence globale. Procédez avec une compréhension superficielle telle qu'elle est maintenant

Si vous continuez, il y aura trop de points à trébucher, et au contraire, l'efficacité se détériorera. C'est le futur

Je pense que c'est un problème. Enfin, les mots que j'ai appris récemment conviennent aux débutants en programmation, y compris moi-même.

J'ai pensé, alors j'aimerais terminer la rédaction de l'article en citant ce mot.

La fin de toutes nos quêtes Pour revenir au lieu d'origine, C'est la première fois de connaître le lieu. --T.S. Elliott

À l'avenir, je prévois d'apprendre la programmation sous différents angles. Après cela, analysez à nouveau les données et créez à nouveau l'application

À ce moment-là, je pense avoir une compréhension approfondie de ma situation et être en mesure de produire des livrables de haute qualité.

Je suis vraiment excité.

Si l'un des lecteurs est débutant comme moi, faisons de notre mieux ensemble!

Merci beaucoup d'avoir lu l'article jusqu'au bout! !!

Références

Cours sur l'application Aidemy AI Les débutants 2 mois après le début de la programmation ont essayé l'analyse des séries chronologiques du PIB réel du Japon avec le modèle SARIMA ImageNet [Comment télécharger ImageNet] (http://murayama.hatenablog.com/entry/2017/11/18/160818) [Reconnaissance d'image à l'aide du cheval et du cerf CNN](https://qiita.com/nuhsodnok/items/a3fb71bba4e0148e782f#%E8%A9%A6%E3%81%97%E3%81%9F%E3%81%93 % E3% 81% A8% E3% 81% 9D% E3% 81% AE1) Résumé de la rédaction des informations environnementales Mémorandum du débutant de la méthode de création d'article Qiita