From here on, it's just for bragging around, so use it only for those who want to brag.
Document root
├ template
│ ├ index.html
│ └ layout.html
├ static
│ └ images
├ eval.py
├ main.py
├ style.css
└ web.py
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;
}
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>
――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)
-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)
Recommended Posts