notebooks/Online prediction example.ipynb

{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "This creates a canvas where you can draw a handwritten digit."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 1,
   "metadata": {
    "collapsed": false
   },
   "outputs": [
    {
     "data": {
      "text/html": [
       "\n",
       "<table>\n",
       "<td style=\"border-style: none;\">\n",
       "<div style=\"border: solid 2px #666; width: 143px; height: 144px;\">\n",
       "<canvas width=\"140\" height=\"140\"></canvas>\n",
       "</div></td>\n",
       "<td style=\"border-style: none;\">\n",
       "<button onclick=\"clear_value()\">Clear</button>\n",
       "</td>\n",
       "</table>\n",
       "\n",
       "<script type=\"text/Javascript\">\n",
       "    var pixels = [];\n",
       "    for (var i = 0; i < 28*28; i++) pixels[i] = 0;\n",
       "    var click = 0;\n",
       "\n",
       "    var canvas = document.querySelector(\"canvas\");\n",
       "    canvas.addEventListener(\"mousemove\", function(e){\n",
       "        if (e.buttons == 1) {\n",
       "            click = 1;\n",
       "            canvas.getContext(\"2d\").fillStyle = \"rgb(0,0,0)\";\n",
       "            canvas.getContext(\"2d\").fillRect(e.offsetX, e.offsetY, 8, 8);\n",
       "            x = Math.floor(e.offsetY * 0.2);\n",
       "            y = Math.floor(e.offsetX * 0.2) + 1;\n",
       "            for (var dy = 0; dy < 2; dy++){\n",
       "                for (var dx = 0; dx < 2; dx++){\n",
       "                    if ((x + dx < 28) && (y + dy < 28)){\n",
       "                        pixels[(y+dy)+(x+dx)*28] = 1;\n",
       "                    }\n",
       "                }\n",
       "            }\n",
       "        } else {\n",
       "            if (click == 1) set_value();\n",
       "            click = 0;\n",
       "        }\n",
       "    });\n",
       "    \n",
       "    function set_value(){\n",
       "        var result = \"\"\n",
       "        for (var i = 0; i < 28*28; i++) result += pixels[i] + \",\"\n",
       "        var kernel = IPython.notebook.kernel;\n",
       "        kernel.execute(\"image = [\" + result + \"]\");\n",
       "        kernel.execute(\"f = open('request.json', 'w')\");\n",
       "        kernel.execute(\"f.write('{\\\"inputs\\\":%s}' % image)\");\n",
       "        kernel.execute(\"f.close()\");\n",
       "    }\n",
       "    \n",
       "    function clear_value(){\n",
       "        canvas.getContext(\"2d\").fillStyle = \"rgb(255,255,255)\";\n",
       "        canvas.getContext(\"2d\").fillRect(0, 0, 140, 140);\n",
       "        for (var i = 0; i < 28*28; i++) pixels[i] = 0;\n",
       "    }\n",
       "</script>\n"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "execution_count": 1,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "input_form = \"\"\"\n",
    "<table>\n",
    "<td style=\"border-style: none;\">\n",
    "<div style=\"border: solid 2px #666; width: 143px; height: 144px;\">\n",
    "<canvas width=\"140\" height=\"140\"></canvas>\n",
    "</div></td>\n",
    "<td style=\"border-style: none;\">\n",
    "<button onclick=\"clear_value()\">Clear</button>\n",
    "</td>\n",
    "</table>\n",
    "\"\"\"\n",
    "\n",
    "javascript = '''\n",
    "<script type=\"text/Javascript\">\n",
    "    var pixels = [];\n",
    "    for (var i = 0; i < 28*28; i++) pixels[i] = 0;\n",
    "    var click = 0;\n",
    "\n",
    "    var canvas = document.querySelector(\"canvas\");\n",
    "    canvas.addEventListener(\"mousemove\", function(e){\n",
    "        if (e.buttons == 1) {\n",
    "            click = 1;\n",
    "            canvas.getContext(\"2d\").fillStyle = \"rgb(0,0,0)\";\n",
    "            canvas.getContext(\"2d\").fillRect(e.offsetX, e.offsetY, 8, 8);\n",
    "            x = Math.floor(e.offsetY * 0.2);\n",
    "            y = Math.floor(e.offsetX * 0.2) + 1;\n",
    "            for (var dy = 0; dy < 2; dy++){\n",
    "                for (var dx = 0; dx < 2; dx++){\n",
    "                    if ((x + dx < 28) && (y + dy < 28)){\n",
    "                        pixels[(y+dy)+(x+dx)*28] = 1;\n",
    "                    }\n",
    "                }\n",
    "            }\n",
    "        } else {\n",
    "            if (click == 1) set_value();\n",
    "            click = 0;\n",
    "        }\n",
    "    });\n",
    "    \n",
    "    function set_value(){\n",
    "        var result = \"\"\n",
    "        for (var i = 0; i < 28*28; i++) result += pixels[i] + \",\"\n",
    "        var kernel = IPython.notebook.kernel;\n",
    "        kernel.execute(\"image = [\" + result + \"]\");\n",
    "        kernel.execute(\"f = open('request.json', 'w')\");\n",
    "        kernel.execute(\"f.write('{\\\\\"inputs\\\\\":%s}' % image)\");\n",
    "        kernel.execute(\"f.close()\");\n",
    "    }\n",
    "    \n",
    "    function clear_value(){\n",
    "        canvas.getContext(\"2d\").fillStyle = \"rgb(255,255,255)\";\n",
    "        canvas.getContext(\"2d\").fillRect(0, 0, 140, 140);\n",
    "        for (var i = 0; i < 28*28; i++) pixels[i] = 0;\n",
    "    }\n",
    "</script>\n",
    "'''\n",
    "\n",
    "from IPython.display import HTML\n",
    "HTML(input_form + javascript)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Now you can send a request to make a prediction."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 2,
   "metadata": {
    "collapsed": false
   },
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "CLASSES  PROBABILITIES\n",
      "3        [3.178637535018992e-29, 5.019398958601389e-18, 2.553775243286402e-22, 1.0, 1.6729859155339614e-23, 1.6934683392340924e-16, 3.5852181235363655e-26, 1.1448885891453676e-15, 3.574062965565033e-18, 1.5919192670572453e-20]\n"
     ]
    }
   ],
   "source": [
    "%%bash\n",
    "MODEL_NAME=\"MNIST\"\n",
    "gcloud ai-platform predict --model ${MODEL_NAME} --json-instances request.json | tee predict.txt"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "You can also draw a bar chart with the prediction result."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 3,
   "metadata": {
    "collapsed": false
   },
   "outputs": [
    {
     "data": {
      "text/plain": [
       "<Container object of 10 artists>"
      ]
     },
     "execution_count": 3,
     "metadata": {},
     "output_type": "execute_result"
    },
    {
     "data": {
      "image/png": "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\n",
      "text/plain": [
       "<matplotlib.figure.Figure at 0x7f66169d27d0>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "import matplotlib.pyplot as plt\n",
    "import re\n",
    "\n",
    "with open('predict.txt') as prediction:\n",
    "  head = prediction.readline()\n",
    "  result = prediction.readline()\n",
    "r = re.compile(\"\\[(.+)\\]\")\n",
    "pred = r.search(result).group(1).split(',')\n",
    "pred = map(lambda x: float(x), pred)\n",
    "\n",
    "fig = plt.figure(figsize=(4,2))\n",
    "subplot = fig.add_subplot(1,1,1)\n",
    "subplot.set_xticks(range(10))\n",
    "subplot.set_xlim(-0.5,9.5)\n",
    "subplot.set_ylim(0,1)\n",
    "subplot.bar(range(10), pred, align='center')"
   ]
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Python 2",
   "language": "python",
   "name": "python2"
  },
  "language_info": {
   "codemirror_mode": {
    "name": "ipython",
    "version": 2
   },
   "file_extension": ".py",
   "mimetype": "text/x-python",
   "name": "python",
   "nbconvert_exporter": "python",
   "pygments_lexer": "ipython2",
   "version": "2.7.9"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 2
}