# Introduction to artificial intelligence lesson 1: handwritten font recognition and visualization project (mnist), using technology (Django+js+tensorflow+html+bootstrap+inspinia framework)

Direct image, project effect

### 1. Training model

Project structure

Using tensorflow
70 lines of code can do the training. First, you need to download the data set of mnist
You can baidu yourself in the form of

Create the file mnist_train.py
Import code

```# -*-coding:utf-8 -*-
import tensorflow as tf
from tensorflow.examples.tutorials.mnist import input_data

learning_rate = 0.001
TRAINING_STEPS = 100000
BATCH_SIZE = 32

def conv_layer(input, in_channel, out_channel):
# Define convolution layer
w = tf.Variable(tf.truncated_normal([5, 5, in_channel, out_channel], stddev=0.1)) #Generate one5x5 Matrix
b = tf.Variable(tf.constant(0.1, shape=[out_channel]))
conv = tf.nn.conv2d(input, w, strides=[1, 1, 1, 1], padding="SAME")
act = tf.nn.relu(conv + b)
return act

def fc_layer(input, size_in, size_out):
# Define full connection layer
w = tf.Variable(tf.truncated_normal([size_in, size_out], stddev=0.1))
b = tf.Variable(tf.constant(0.1, shape=[size_out]))
fc =tf.matmul(input, w)+b
return fc

#converlution_conv
def inference(image, keep_prob):
# conv1
conv1 = conv_layer(image,1, 32)
conv1_pool = tf.nn.max_pool(conv1, ksize=[1,2,2,1], strides=[1,2,2,1], padding="SAME")
# conv2
conv2= conv_layer(conv1_pool, 32, 64)
conv2_pool = tf.nn.max_pool(conv2, ksize=[1,2,2,1], strides=[1,2,2,1], padding="SAME")
conv_flaten = tf.reshape(conv2_pool, shape=[-1, 7*7*64])
# fc1
fc1 = tf.nn.relu(fc_layer(conv_flaten, 7*7*64, 1024))
fc1 = tf.nn.dropout(fc1, keep_prob=keep_prob)
return model_output

def inputs():
# Define input
keep_prob = tf.placeholder(tf.float32, name="keep_prob")
x = tf.placeholder(tf.float32, shape=[None, 784], name="x")
y = tf.placeholder(tf.float32, shape=[None, 10], name="labels")
return x, y, keep_prob

def loss(y_pred, y_real):
# Define cross entropy error
xent = tf.reduce_mean(tf.nn.softmax_cross_entropy_with_logits(
logits=y_pred, labels=y_real))
return xent
def train_optimizer(loss, global_step=None):
# Define training optimizer
return train_step

def accuracy(y_pred, y_real):
# Define forecast accuracy
correct_prediction = tf.equal(tf.argmax(y_pred, 1), tf.argmax(y_real, 1))
acc = tf.reduce_mean(tf.cast(correct_prediction, tf.float32))
return acc

def train(mnist):
x, y, keep_prob = inputs()
x_image = tf.reshape(x, [-1, 28, 28, 1])
global_step = tf.Variable(0, trainable=False)
logits = inference(x_image, keep_prob=keep_prob)   # Definition model
losses = loss(y_pred=logits, y_real=y)
train_step = train_optimizer(losses, global_step=global_step)
acc = accuracy(y_pred=logits, y_real=y)
with tf.Session() as sess:
sess.run(tf.global_variables_initializer())
for i in range(TRAINING_STEPS):
xs, ys = mnist.train.next_batch(BATCH_SIZE)
print('hello')
print(xs.shape)
_, loss_value, step = sess.run([train_step, losses, global_step],
feed_dict={x: xs, y: ys, keep_prob:0.5})
if i % 200 ==0:
print("After %d training step(s), loss on training batch is %g."
% (step, loss_value))
if i % 1000 == 0:
valid_acc = sess.run(acc, feed_dict={x: mnist.validation.images, y: mnist.validation.labels, keep_prob:1.})
print("After %d training step(s), accuracy on validation is %g." % (step, valid_acc))
test_acc = sess.run(acc, feed_dict={x:mnist.test.images, y:mnist.test.labels, keep_prob:1.})
print("After %d training step(s), accuracy on test is %g." % (TRAINING_STEPS, test_acc))
saver=tf.train.Saver()
saver.save(sess,'my_model/mnist_model.ckpt')
if __name__ == "__main__":
train(mnist)
```

Run this file to start training

You should train about 50000 steps
I only train for the convenience of this place. It's about 10000 steps. It's almost 90% accurate

After the training, there will be four files. These four files are the model, which must be saved. Next is the application model

### 2. Visual application of the model

Since it's a handwritten font model, it must be visualized by sketchpad. Here, I use Django to build a web application. The blog before Django has been demonstrated. No more repetition here. Students who don't understand go to https://blog.csdn.net/qq_40947673/article/details/104106573
The project structure is as follows

The most important thing is front-end interaction
Front end

```{% extends "index.html" %}
{% block details %}

![Insert picture description here](https://img-blog.csdnimg.cn/20200206163744844.gif)

<div class="col-sm-3">
<h2>Handwriting font model test</h2>
<small>mnist model test.</small>
<ul class="list-group clear-list m-t">
<li class="list-group-item fist-item">
<span class="label label-success">1</span> Number on right panel
</li>
<li class="list-group-item">
<span class="label label-info">2</span> Click recognition
</li>
<li class="list-group-item">
<span class="label label-info">3</span> Display result
</li>
<li class="list-group-item">
<span class="label label-primary">4</span> Click Clear
</li>
</ul>
</div>

<div class="col-sm-6">
<canvas id="canvas" width="500" height="500">
</canvas>
<div class="row text-left">
<div class="col-xs-4">
<button onclick="shibie()" class="btn btn-primary  m-t">Distinguish</button>
<button onclick="qingkong()" class="btn btn-primary  m-t" >empty</button>
</div>

</div>
</div>

<div class="col-sm-3">
<div class="statistic-box">
<div class="row text-center">

<div class="col-lg-6">
<h2>Recognition result</h2>

<table id="tbl" border="1">
<tbody id="body"></tbody>
</table>
</div>
</div>
</div>
</div>

<style>
#canvas {
background: #fff;
cursor: crosshair;
margin-left: 10px;
margin-top: 10px;
-webkit-box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.5);
box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.5);
}

</style>

<script>
var canvas = document.querySelector("canvas");
var cobj = canvas.getContext("2d");

var data = [];
var s = "pen";
var c = "#000";
var w = "8";

function drawGrid(stepX, stepY, color, lineWidth) {
cobj.beginPath();
// Create a vertical grid path
for (var i = 0.5 + stepX; i < canvas.width; i += stepX) {
cobj.moveTo(i, 0);
cobj.lineTo(i, canvas.height);
}
// Create a horizontal grid path
for (var j = 0.5 + stepY; j < canvas.height; j += stepY) {
cobj.moveTo(0, j);
cobj.lineTo(canvas.width, j);
}
// Set paint color
cobj.strokeStyle = color;
// Set the width of the drawn line segment
cobj.lineWidth = lineWidth;
// Grid drawing
cobj.stroke();
// Clear path
cobj.beginPath();
}

drawGrid(10, 10, 'lightgray', 0.5);

canvas.onmousedown = function (e) {
var ox = e.offsetX;
var oy = e.offsetY;
var draw = new Draw(cobj, {
color: c,
width: w
});

cobj.beginPath();
cobj.moveTo(ox, oy);

canvas.onmousemove = function (e) {
var mx = e.offsetX;
var my = e.offsetY;
if (s != "eraser") {
if (data.length != 0) {

cobj.putImageData(data[data.length - 1], 0, 0, 0, 0, 500, 500); //Four parameters can be omitted after an image data is placed on the position specified by the canvas

}
}
//            cobj.strokeRect(ox,oy,mx-ox,my-oy);
// cobj.beginPath()

draw[s](ox, oy, mx, my);
};
document.onmouseup = function () {
data.push(cobj.getImageData(0, 0, 500, 500)); //Get all the graphic data in the specified area of the canvas
canvas.onmousemove = null;
document.onmouseup = null;
}
};

function qingkong() {
cobj.clearRect(0, 0, 500, 500);
data = [];
drawGrid(10, 10, 'lightgray', 0.5);

}

class Draw {
constructor(cobj, option) {
this.cobj = cobj;
this.color = option.color;
this.width = option.width;
this.style = option.style;
}

init() { //Initialization
this.cobj.strokeStyle = this.color;
this.cobj.fillStyle = this.color;
this.cobj.lineWidth = this.width;
}

pen(ox, oy, mx, my) {
this.init();
this.cobj.lineTo(mx, my);
this.cobj.stroke();
}
}
</script>

<script>
function shibie() {
var img = document.getElementById("canvas").toDataURL("image/png");
img = img.replace(/^data:image\/(png|jpg);base64,/, "");
sendData = {
"img": img,
};
\$.ajax({
url: "/mnist/",
type: 'get',
data: sendData,
dataType: "json",
success: function (data) {
var html = data["res"];
var html3 = document.createElement("h1");
html3.innerHTML = html;
\$("#body").append(html3);
}
})
}
</script>
</div>

{% endblock %}
```

Final result

Because there are too many details to describe one by one, git: https://github.com/kulinbin/mnist_web

Published 3 original articles, won praise 1, visited 1374

Tags: Django Session JSON git

Posted on Thu, 06 Feb 2020 04:57:36 -0500 by andychurchill