[PYTHON] J'ai créé un classificateur de visage Dir en gray en utilisant TensorFlow - Préparation de la version Web

introduction

À partir de maintenant, c'est juste pour se vanter, alors ne l'utilisez que pour ceux qui veulent se vanter.

Préparation

Structure du répertoire

Racine du document
├ template
│ ├ index.html
│ └ layout.html
├ static
│ └ images
├ eval.py
├ main.py
├ style.css
└ web.py

programme

web.py

#!/usr/local/bin/python
#! -*- coding: utf-8 -*-

import tensorflow as tf
import multiprocessing as mp
from flask import Flask, render_template, request, redirect, url_for
import numpy as np
from werkzeug import secure_filename
import os
import eval

#Instanciez votre nom en tant qu'application
app = Flask(__name__)
app.config['DEBUG'] = True

#Où enregistrer l'image publiée
UPLOAD_FOLDER = '{Chemin de la racine du document}/static/images/'

#routage./Lors de l'accès
@app.route('/')
def index():
  return render_template('index.html')

#Action lors de la publication d'une image
@app.route('/post', methods=['GET','POST'])
def post():
  if request.method == 'POST':
    if not request.files['file'].filename == u'':
      #Enregistrez le fichier téléchargé
      f = request.files['file']
      img_path = os.path.join(UPLOAD_FOLDER, secure_filename(f.filename))
      f.save(img_path)

      # eval.Transmettez l'image téléchargée à py
      result = eval.evaluation(img_path, '{main.répertoire d'exécution py}chemin/model2.ckpt')
    else:
      result = []
    return render_template('index.html', result=result)
  else:
    #Si vous souhaitez rediriger en raison d'une erreur, etc.
    return redirect(url_for('index'))

if __name__ == '__main__':
  app.debug = True
  app.run(host='127.0.0.1')

index.html

{% extends "layout.html" %}
{% block content %}
<div class="form">
  <div class="container">
    <div class="row">
      <div class="col-md-12">
        <p style="margin-left:15px;">
L'IA détecte le visage de Dir en gray sur la photo du visage.(Compatible avec Kyo, Kaoru, Shinya)
        </p>
        {% if result %}
          {% if result[0][0]['rate'] > 90 %}
            {% if result[0][0]['label'] == 0 %}
              <h2 style="margin-left:10px;">「<span class="red">{{result[0][0]['name']}}</span>Probabilité de<span class="red">{{result[0][0]['rate']}}</span>%est. "</h2>
              <div class="col-md-7">
                <img src="./static/images/{{result[1]}}" class="detect_img">
              </div>
              <div class="col-md-5">
                <p class="logo_container">
                  <img src='./static/images/kyo.jpg' class="logo">
                </p>
                <p><img src="./static/images/{{result[2]}}" class="cut_image"></p>
                <p class="detail_container">
                  <Détails de l'analyse><br>
                  {{result[0][0]['name']}}：{{result[0][0]['rate']}}%<br>
                  {{result[0][1]['name']}}：{{result[0][1]['rate']}}%<br>
                  {{result[0][2]['name']}}：{{result[0][2]['rate']}}%<br>
                </p>
              </div>
            {% elif result[0][0]['label'] == 1 %}
              <h2 style="margin-left:10px;">「<span class="red">{{result[0][0]['name']}}</span>Probabilité de<span class="red">{{result[0][0]['rate']}}</span>%est. "</h2>
              <div class="col-md-7">
                <img src="./static/images/{{result[1]}}" class="detect_img">
              </div>
              <div class="col-md-5">
                <p class="logo_container">
                  <img src='./static/images/kaoru.jpg' class="logo">
                </p>
                <p><img src="./static/images/{{result[2]}}" class="cut_image"></p>
                <p class="detail_container">
                  <Détails de l'analyse><br>
                  {{result[0][0]['name']}}：{{result[0][0]['rate']}}%<br>
                  {{result[0][1]['name']}}：{{result[0][1]['rate']}}%<br>
                  {{result[0][2]['name']}}：{{result[0][2]['rate']}}%<br>
                </p>
              </div>
            {% elif result[0][0]['label'] == 2 %}
              <h2 style="margin-left:10px;">「<span class="red">{{result[0][0]['name']}}</span>Probabilité de<span class="red">{{result[0][0]['rate']}}</span>%est. "</h2>
              <div class="col-md-7">
                <img src="./static/images/{{result[1]}}" class="detect_img">
              </div>
              <div class="col-md-5">
                <div>
                  <p class="logo_container"><img src='./static/images/shinya.jpg' class="logo"></p>
                  <p><img src="./static/images/{{result[2]}}" class="cut_image"></p>
                  <p class="detail_container">
                    <Détails de l'analyse><br>
                    {{result[0][0]['name']}}：{{result[0][0]['rate']}}%<br>
                    {{result[0][1]['name']}}：{{result[0][1]['rate']}}%<br>
                    {{result[0][2]['name']}}：{{result[0][2]['rate']}}%<br>
                  </p>
                </div>
              </div>
            {% endif %}
          {% else %}
            <h2 style="margin-left:10px;">"Apparemment<span class="red">Pas susceptible d'être Dir en gris</span>est. "</h2>
            <div class="col-md-7">
              <img src="./static/images/{{result[1]}}" class="detect_img">
            </div>
            <div class="col-md-5">
              <p style="margin-top:70px;">
                　　　Who I am?<br>
                <img src="./static/images/{{result[2]}}" class="cut_image"></p>
              <p class="detail_container">
                <Détails de l'analyse><br>
                {{result[0][0]['name']}}:{{result[0][0]['rate']}}%<br>
                {{result[0][1]['name']}}:{{result[0][1]['rate']}}%<br>
                {{result[0][2]['name']}}：{{result[0][2]['rate']}}%<br>
              </p>
            </div>
          {% endif %}
        {% else %}
          <div class="col-md-12">
            <h3>Veuillez télécharger votre photo de visage!</h3>
          </div>
        {% endif %}
        <div class="col-md-12" style="margin-top:10px; margin-bottom:20px;">
          <form action="/post" method="post" class="form-inline" enctype = "multipart/form-data">
            <input type = "file" name = "file" />
            <button type="submit" class="btn btn-primary" style="margin-top:5px;">Vérifiez le visage de Dir en gris!</button>
          </form>
        </div>
      </div>
    </div>
  </div>
</div>
{% endblock %}

layout.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Vérificateur de visage Dir en gris</title>
    <link rel=stylesheet type=text/css href="{{ url_for('static', filename='style.css') }}">
    <!-- Bootstrap -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css" integrity="sha384-aUGj/X2zp5rLCbBxumKTCw2Z50WgIr1vs/PFN4praOTvYXWlVyh2UtNUU0KAUhAX" crossorigin="anonymous">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js" integrity="sha512-K1qjQ+NcF2TYO/eI3M6v8EiNYZfA95pQumfvcVrTHtwQVDG+aHRqLi/ETn2uB+1JqwYqVG3LIvdm9lj6imS/pQ==" crossorigin="anonymous"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular-animate.min.js"></script>
    <script src="https://use.fontawesome.com/83341aec39.js"></script>
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <nav class="navbar navbar-inverse">
      <div class="container-fluid">
        <div class="navbar-header" style="padding-left:120px;">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbarEexample7">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="/">
Vérificateur de visage Dir en gris
          </a>
        </div>
        <div class="collapse navbar-collapse" id="navbarEexample7">
          <ul class="nav navbar-nav">
          <!-- <li><a href="#">Menu A</a></li>
          <li class="active"><a href="#">Menu B</a></li>
          <li><a href="#">Menu C</a></li> -->
          </ul>
          <p class="navbar-text navbar-right">Bienvenue<a href="#" class="navbar-link">Les invités</a>M.</p>
        </div>
      </div>
    </nav>
    {% block content %}{% endblock %}
  </body>
</html>

style.css

.red {
  color: red;
}
.detect_img {
  width: 100%;
  height:400px;
  border: 1px solid #808080;
}
.cut_image {
  width: 150px;
  height: 150px;
}
.logo {
  width:150px;
  height:35px;
}
.logo_container {
  margin-top:50px;
}
.detail_container {
  background-color:#dcdcdc;
  padding:5px; width:200px;
  border:1px solid #a9a9a9;
}

Paramètres Apache

python.conf

LoadModule wsgi_module /usr/local/lib/python2.7/site-packages/mod_wsgi/server/mod_wsgi-py27.so

<VirtualHost *:80>
    ServerName localhost:80
    WSGIScriptAlias /dir {Racine du document}/web.py

    <Directory "{Racine du document}">
      Options Indexes FollowSymLinks ExecCGI
      SetHandler wsgi-script
      AddHandler wsgi-script .wsgi
      AddHandler wsgi-script .py
      Require all granted
      AllowOverride all
    </Directory>
</VirtualHost>

Suppléments et excuses

«Je n'ai pas pu bien démarrer et j'ai fait un essai et une erreur.

• L'image après le démarrage n'a pas été prise correctement, et je n'ai pu voir que les images sous le répertoire statique. (Je n'ai pas cherché la raison)

Tous les liens de page

• J'ai créé un classificateur de visage Dir en gris en utilisant TensorFlow - (1) Introduction
• J'ai créé un classificateur de visage pour Dir en gray en utilisant la construction de l'environnement TensorFlow-②
• J'ai créé un classificateur de visage Dir en gris avec la collection d'images TensorFlow-③
• J'ai créé un classificateur de visage pour Dir en gray en utilisant l'extraction de visage TensorFlow-④
• J'ai créé un classificateur de visage Dir en gris en utilisant TensorFlow-⑤ Préparation des données d'apprentissage
• J'ai créé un classificateur de visage pour Dir en gray à l'aide du programme d'apprentissage TensorFlow-⑥
• J'ai créé un classificateur de visage pour Dir en gray en utilisant le modèle d'apprentissage TensorFlow-⑦
• J'ai créé un classificateur de visage pour Dir en gray en utilisant TensorFlow --⑧ Exécution d'apprentissage
• J'ai créé un classificateur de visage pour Dir en gray en utilisant la visualisation de données TensorFlow-⑨
• J'ai créé un classificateur de visage Dir en gris en utilisant TensorFlow --⑩ Test de classification de visage
• J'ai créé un classificateur de visage Dir en gray en utilisant la préparation de la version Web de TensorFlow-⑪
• J'ai créé un classificateur de visage Dir en gris en utilisant TensorFlow --⑫ Version Web
• J'ai créé un classificateur de visage Dir en gris en utilisant TensorFlow --⑬ Jouer (final)