Add Paddle Serve example, and MNIST client example

mnist-client/.eslintrc

+{
+    "rules": {
+        "indent": [
+            2,
+            4
+        ],
+        "quotes": [
+            2,
+            "single"
+        ],
+        "linebreak-style": [
+            2,
+            "unix"
+        ],
+        "semi": [
+            2,
+            "always"
+        ]
+    },
+    "env": {
+        "es6": true,
+        "node": true,
+        "browser": true
+    },
+    "extends": "eslint:recommended"
+}
\ No newline at end of file

mnist-client/.gitignore

+venv
+*.pyc
+node_modules
+static/js/main.js
+index.html

mnist-client/Procfile

+web: gunicorn main:app --log-file=-

mnist-client/README.md

+# MNIST classification by PaddlePaddle
+
+Forked from https://github.com/sugyan/tensorflow-mnist
+
+![screencast](https://cloud.githubusercontent.com/assets/80381/11339453/f04f885e-923c-11e5-8845-33c16978c54d.gif)
+
+## Build
+
+    $ docker build -t paddle-mnist .
+
+## Usage
+
+
+1. Download `inference_topology.pkl` and `param.tar` to current directory
+1. Run following commands:
+```bash
+docker run -v `pwd`:/data -d -p 8000:80 -e WITH_GPU=0 paddlepaddle/book:serve
+docker run -it -p 5000:5000 paddlepaddle/book:mnist
+```
+1. Visit http://localhost:5000

mnist-client/app.json

+{
+    "name": "paddlepaddle-mnist",
+    "buildpacks": [
+        { "url": "https://github.com/heroku/heroku-buildpack-nodejs" },
+        { "url": "https://github.com/heroku/heroku-buildpack-python" }
+    ]
+}

mnist-client/gulpfile.js

+var gulp = require('gulp');
+var babel = require('gulp-babel');
+var sourcemaps = require('gulp-sourcemaps');
+var uglify = require('gulp-uglify');
+
+gulp.task('build', function() {
+    return gulp.src('src/js/*.js')
+        .pipe(babel({ presets: ['es2015'] }))
+        .pipe(sourcemaps.init({ loadMaps: true }))
+        .pipe(uglify())
+        .pipe(sourcemaps.write())
+        .pipe(gulp.dest('static/js'));
+});
+
+gulp.task('watch', function() {
+    gulp.watch('src/js/*.js', ['build']);
+});
+
+gulp.task('default', ['build']);

mnist-client/main.py

+from flask import Flask, jsonify, render_template, request
+
+# webapp
+app = Flask(__name__)
+
+
+@app.route('/')
+def main():
+    return render_template('index.html')
+
+
+if __name__ == '__main__':
+    app.run(host='0.0.0.0', port=5000, threaded=True)

mnist-client/package.json

+{
+  "name": "paddlepaddle-mnist",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "postinstall": "gulp"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/sugyan/tensorflow-mnist.git"
+  },
+  "engines": {
+    "node": "6.x"
+  },
+  "dependencies": {
+    "babel-preset-es2015": "^6.1.18",
+    "bootstrap": "^3.3.5",
+    "gulp": "^3.9.0",
+    "gulp-babel": "^6.1.0",
+    "gulp-sourcemaps": "^1.6.0",
+    "gulp-uglify": "^1.5.1",
+    "jquery": "^2.1.4"
+  }
+}

mnist-client/requirements.txt

+Flask==0.12

mnist-client/runtime.txt

+python-3.6.0
\ No newline at end of file

mnist-client/src/js/main.js

+/* global $ */
+class Main {
+    constructor() {
+        this.canvas = document.getElementById('main');
+        this.input = document.getElementById('input');
+        this.canvas.width  = 449; // 16 * 28 + 1
+        this.canvas.height = 449; // 16 * 28 + 1
+        this.ctx = this.canvas.getContext('2d');
+        this.canvas.addEventListener('mousedown', this.onMouseDown.bind(this));
+        this.canvas.addEventListener('mouseup',   this.onMouseUp.bind(this));
+        this.canvas.addEventListener('mousemove', this.onMouseMove.bind(this));
+        this.initialize();
+    }
+    initialize() {
+        this.ctx.fillStyle = '#FFFFFF';
+        this.ctx.fillRect(0, 0, 449, 449);
+        this.ctx.lineWidth = 1;
+        this.ctx.strokeRect(0, 0, 449, 449);
+        this.ctx.lineWidth = 0.05;
+        for (var i = 0; i < 27; i++) {
+            this.ctx.beginPath();
+            this.ctx.moveTo((i + 1) * 16,   0);
+            this.ctx.lineTo((i + 1) * 16, 449);
+            this.ctx.closePath();
+            this.ctx.stroke();
+
+            this.ctx.beginPath();
+            this.ctx.moveTo(  0, (i + 1) * 16);
+            this.ctx.lineTo(449, (i + 1) * 16);
+            this.ctx.closePath();
+            this.ctx.stroke();
+        }
+        this.drawInput();
+        $('#output td').text('').removeClass('success');
+    }
+    onMouseDown(e) {
+        this.canvas.style.cursor = 'default';
+        this.drawing = true;
+        this.prev = this.getPosition(e.clientX, e.clientY);
+    }
+    onMouseUp() {
+        this.drawing = false;
+        this.drawInput();
+    }
+    onMouseMove(e) {
+        if (this.drawing) {
+            var curr = this.getPosition(e.clientX, e.clientY);
+            this.ctx.lineWidth = 16;
+            this.ctx.lineCap = 'round';
+            this.ctx.beginPath();
+            this.ctx.moveTo(this.prev.x, this.prev.y);
+            this.ctx.lineTo(curr.x, curr.y);
+            this.ctx.stroke();
+            this.ctx.closePath();
+            this.prev = curr;
+        }
+    }
+    getPosition(clientX, clientY) {
+        var rect = this.canvas.getBoundingClientRect();
+        return {
+            x: clientX - rect.left,
+            y: clientY - rect.top
+        };
+    }
+    drawInput() {
+        var ctx = this.input.getContext('2d');
+        var img = new Image();
+        img.onload = () => {
+            var inputs = [];
+            var small = document.createElement('canvas').getContext('2d');
+            small.drawImage(img, 0, 0, img.width, img.height, 0, 0, 28, 28);
+            var data = small.getImageData(0, 0, 28, 28).data;
+            for (var i = 0; i < 28; i++) {
+                for (var j = 0; j < 28; j++) {
+                    var n = 4 * (i * 28 + j);
+                    inputs[i * 28 + j] = (data[n + 0] + data[n + 1] + data[n + 2]) / 3;
+                    ctx.fillStyle = 'rgb(' + [data[n + 0], data[n + 1], data[n + 2]].join(',') + ')';
+                    ctx.fillRect(j * 5, i * 5, 5, 5);
+                }
+            }
+            if (Math.min(...inputs) === 255) {
+                return;
+            }
+	    for (var i = 0; i < 784; i++) {
+		if (inputs[i] == 255) {
+		    // background
+		    inputs[i] = -1.0
+		} else {
+		    inputs[i] = 1.0
+		}
+	    }
+            $.ajax({
+                url: 'http://localhost:8000/',
+                method: 'POST',
+                contentType: 'application/json',
+                data: JSON.stringify({"img":inputs}),
+                success: (data) => {
+		    data = data["data"][0]
+                    var max = 0;
+                    var max_index = 0;
+                    for (let j = 0; j < 10; j++) {
+                        var value = Math.round(data[j] * 1000);
+                        if (value > max) {
+                            max = value;
+                            max_index = j;
+                        }
+                        var digits = String(value).length;
+                        for (var k = 0; k < 3 - digits; k++) {
+                            value = '0' + value;
+                        }
+                        var text = '0.' + value;
+                        if (value > 999) {
+                            text = '1.000';
+                        }
+                        $('#output tr').eq(j + 1).find('td').text(text);
+                    }
+                    for (let j = 0; j < 10; j++) {
+                        if (j === max_index) {
+                            $('#output tr').eq(j + 1).find('td').addClass('success');
+                        } else {
+                            $('#output tr').eq(j + 1).find('td').removeClass('success');
+                        }
+                    }
+                }
+            });
+        };
+        img.src = this.canvas.toDataURL();
+    }
+}
+
+$(() => {
+    var main = new Main();
+    $('#clear').click(() => {
+        main.initialize();
+    });
+});

mnist-client/static/css/bootstrap.min.css

+../../node_modules/bootstrap/dist/css/bootstrap.min.css
\ No newline at end of file

mnist-client/static/js/jquery.min.js

+../../node_modules/jquery/dist/jquery.min.js
\ No newline at end of file

mnist-client/templates/index.html

+<!DOCTYPE html>
+<html>
+  <head>
+    <title>MNIST</title>
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/bootstrap.min.css') }}">
+    <script type="text/javascript" src="{{ url_for('static', filename='js/jquery.min.js') }}"></script>
+    <script type="text/javascript" src="{{ url_for('static', filename='js/main.js') }}"></script>
+  </head>
+  <body>
+    <a href="https://github.com/sugyan/tensorflow-mnist"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/a6677b08c955af8400f44c6298f40e7d19cc5b2d/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f677261795f3664366436642e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_gray_6d6d6d.png"></a>
+    <div class="container">
+      <h1>MNIST</h1>
+      <div class="row">
+        <div class="col-md-6">
+          <p>draw a digit here!</p>
+          <canvas id="main"></canvas>
+          <p>
+            <button id="clear" class="btn btn-default">clear</button>
+          </p>
+        </div>
+        <div class="col-md-6">
+          <p>input:</p>
+          <canvas id="input" style="border:1px solid" width="140" height="140"></canvas>
+          <hr>
+          <p>output:</p>
+          <table id="output" class="table">
+            <tr>
+              <th class="col-md-1">class</th>
+              <th class="col-md-2">confidence</th>
+            </tr>
+            <tr>
+              <th>0</th>
+              <td></td>
+            </tr>
+            <tr>
+              <th>1</th>
+              <td></td>
+            </tr>
+            <tr>
+              <th>2</th>
+              <td></td>
+            </tr>
+            <tr>
+              <th>3</th>
+              <td></td>
+            </tr>
+            <tr>
+              <th>4</th>
+              <td></td>
+            </tr>
+            <tr>
+              <th>5</th>
+              <td></td>
+            </tr>
+            <tr>
+              <th>6</th>
+              <td></td>
+            </tr>
+            <tr>
+              <th>7</th>
+              <td></td>
+            </tr>
+            <tr>
+              <th>8</th>
+              <td></td>
+            </tr>
+            <tr>
+              <th>9</th>
+              <td></td>
+            </tr>
+          </table>
+        </div>
+      </div>
+    </div>
+  </body>
+</html>

serve/.gitignore

+*~
+.idea
+index.html

serve/README.md

+# PaddlePaddle Serving Example
+
+
+## Build
+
+    $ docker build -t serve .
+
+## Run
+
+    $ docker run -v `pwd`:/data -it -p 8000:80 -e WITH_GPU=0 paddlepaddle/book:serve
+    $ curl -H "Content-Type: application/json" -X POST -d '{"img":[0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0]}' http://localhost:8000/

serve/main.py

+import os
+import traceback
+
+import paddle.v2 as paddle
+from flask import Flask, jsonify, request
+from flask_cors import CORS
+
+tarfn = os.getenv('PARAMETER_TAR_PATH', None)
+
+if tarfn is None:
+    raise ValueError(
+        "please specify parameter tar file path with environment variable PARAMETER_TAR_PATH"
+    )
+
+topology_filepath = os.getenv('TOPOLOGY_FILE_PATH', None)
+
+if topology_filepath is None:
+    raise ValueError(
+        "please specify topology file path with environment variable TOPOLOGY_FILE_PATH"
+    )
+
+with_gpu = os.getenv('WITH_GPU', '0') != '0'
+
+port = int(os.getenv('PORT', '80'))
+
+app = Flask(__name__)
+CORS(app)
+
+
+def errorResp(msg):
+    return jsonify(code=-1, message=msg)
+
+
+def successResp(data):
+    return jsonify(code=0, message="success", data=data)
+
+
+@app.route('/', methods=['POST'])
+def infer():
+    global inferer
+    try:
+        feeding = {}
+        d = []
+        for i, key in enumerate(request.json):
+            d.append(request.json[key])
+            feeding[key] = i
+        r = inferer.infer([d], feeding=feeding)
+    except:
+        trace = traceback.format_exc()
+        return errorResp(trace)
+    return successResp(r.tolist())
+
+
+if __name__ == '__main__':
+    paddle.init(use_gpu=with_gpu)
+    with open(tarfn) as param_f, open(topology_filepath) as topo_f:
+        params = paddle.parameters.Parameters.from_tar(param_f)
+        inferer = paddle.inference.Inference(parameters=params, fileobj=topo_f)
+    print 'serving on port', port
+    app.run(host='0.0.0.0', port=port, threaded=True)

serve/requirements.txt

+Flask==0.12.2
+Flask-CORS==3.0.3