Introduction

From here on, it's just for bragging around, so use it only for those who want to brag.

Preparation

Directory structure

Document root
├ template
│ ├ index.html
│ └ layout.html
├ static
│ └ images
├ eval.py
├ main.py
├ style.css
└ web.py

program

`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

#Instantiate your name as app
app = Flask(__name__)
app.config['DEBUG'] = True

#Where to save the posted image
UPLOAD_FOLDER = '{Document root path}/static/images/'

#routing./When accessing
@app.route('/')
def index():
  return render_template('index.html')

#Action when posting an image
@app.route('/post', methods=['GET','POST'])
def post():
  if request.method == 'POST':
    if not request.files['file'].filename == u'':
      #Save uploaded file
      f = request.files['file']
      img_path = os.path.join(UPLOAD_FOLDER, secure_filename(f.filename))
      f.save(img_path)

      # eval.Pass the uploaded image to py
      result = eval.evaluation(img_path, '{main.py execution directory}path/model2.ckpt')
    else:
      result = []
    return render_template('index.html', result=result)
  else:
    #If you want to redirect due to an error 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;">
AI detects the face of Dir en gray from the face photo.(Compatible with Kyoto, 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>Probability of<span class="red">{{result[0][0]['rate']}}</span>%is. "</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">
                  <Analysis details><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>Probability of<span class="red">{{result[0][0]['rate']}}</span>%is. "</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">
                  <Analysis details><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>Probability of<span class="red">{{result[0][0]['rate']}}</span>%is. "</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">
                    <Analysis details><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;">"Apparently<span class="red">Not likely to be Dir en gray</span>is. "</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">
                <Analysis details><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>Please upload your face photo!</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;">Check out the face of Dir en gray!</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>Dir en gray face checker</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="/">
Dir en gray face checker
          </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">Welcome<a href="#" class="navbar-link">The guests</a>Mr.</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;
}

Apache settings

`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 {Document root}/web.py

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

Supplements and excuses

――I couldn't start it well and made a trial and error. --The image after startup was not taken correctly, and I could only see the image under the static directory. (I haven't searched for the reason)

All page links

-I made a Dir en gray face classifier using TensorFlow --(1) Introduction -I made a face classifier for Dir en gray using TensorFlow-② Environment construction -I made a face classifier for Dir en gray using TensorFlow-③ Image collection -I made a face classifier for Dir en gray using TensorFlow-④ Face extraction -I made a face classifier for Dir en gray using TensorFlow-⑤ Learning data preparation -I made a Dir en gray face classifier using TensorFlow-⑥ Learning program -I made a face classifier for Dir en gray using TensorFlow-⑦ Learning model -I made a face classifier for Dir en gray using TensorFlow-⑧ Learning execution -I made a Dir en gray face classifier using TensorFlow --⑨ Data visualization -I made a Dir en gray face classifier using TensorFlow --⑩ Face classification test -I made a Dir en gray face classifier using TensorFlow-⑪ Web release preparation -I made a Dir en gray face classifier using TensorFlow --⑫ Web release -I tried to make a Dir en gray face classifier using TensorFlow --⑬ Playing (final)

I made a Dir en gray face classifier using TensorFlow --⑪ Web release preparation