A digit that is written on HTML Canvas is predictted by a Conv model that learned MNIST. https://github.com/uchidama/HandWriteDigitOnHtmlCanvasPrediction

hand_write_digit_on_html_canvas_prediction.ipynb

{
 "cells": [
  {
   "cell_type": "code",
   "execution_count": 2,
   "metadata": {},
   "outputs": [
    {
     "name": "stderr",
     "output_type": "stream",
     "text": [
      "Using TensorFlow backend.\n"
     ]
    }
   ],
   "source": [
    "'''\n",
    "IMPORT MODULES\n",
    "'''\n",
    "from __future__ import print_function\n",
    "import keras\n",
    "from keras.datasets import mnist\n",
    "from keras.models import Sequential\n",
    "from keras.layers import Dense, Dropout, Flatten\n",
    "from keras.layers import Conv2D, MaxPooling2D\n",
    "from keras import backend as K\n",
    "from keras.models import load_model\n",
    "\n",
    "import numpy as np\n",
    "\n",
    "import matplotlib.pyplot as plt\n",
    "from matplotlib import cm\n",
    "%matplotlib inline\n",
    "\n",
    "import random\n",
    "\n",
    "from IPython.core.display import HTML"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# Create a canvas to write a digit\n",
    "1. Write a digit and push \"Save image to variable\".\n",
    "2. Strings that are written on base64 are used on Python."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 4,
   "metadata": {
    "scrolled": false
   },
   "outputs": [
    {
     "data": {
      "text/html": [
       "\n",
       "<canvas id=\"canvas\" height=\"300px\" width=\"300px\" style=\"border: 1px solid;\"></canvas>\n",
       "<p>\n",
       "    <button id=\"clear\">Clear</button>\n",
       "    <button id=\"submit\">Save image to variable</button>\n",
       "</p>\n",
       "<p id=\"msg\"></p>\n",
       "<script>\n",
       "    var kernel = IPython.notebook.kernel;\n",
       "\n",
       "    var config = {\n",
       "        \"linesize\": 7,\n",
       "        \"linecolor\": \"#000000\"\n",
       "    }\n",
       "\n",
       "    var mouse = {\n",
       "        \"X\": null,\n",
       "        \"Y\": null,\n",
       "    }\n",
       "\n",
       "    var clear = document.getElementById(\"clear\");\n",
       "    var submit = document.getElementById(\"submit\");\n",
       "    var canvas = document.getElementById(\"canvas\");\n",
       "    var ctx = canvas.getContext(\"2d\");\n",
       "\n",
       "    clear.addEventListener(\"click\", function(){\n",
       "        ctx.clearRect(0, 0, canvas.width, canvas.height);\n",
       "    });\n",
       "\n",
       "    submit.addEventListener(\"click\", function(){\n",
       "        var variable_value = 'base64_img';\n",
       "        kernel.execute(variable_value + \" = '\" + canvas.toDataURL() + \"'\");\n",
       "        msg.textContent = \"Success: \" + \"image -> \" + variable_value;\n",
       "    });\n",
       "\n",
       "    canvas.addEventListener(\"mouseup\", drawEnd, false);\n",
       "    canvas.addEventListener(\"mouseout\", drawEnd, false);\n",
       "    \n",
       "    canvas.addEventListener(\"mousemove\", function(e){\n",
       "        if (e.buttons === 1 || e.witch === 1) {\n",
       "            var rect = e.target.getBoundingClientRect();\n",
       "            var X = e.clientX - rect.left;\n",
       "            var Y = e.clientY - rect.top;\n",
       "            draw(X, Y);\n",
       "        };\n",
       "    });\n",
       " \n",
       "    canvas.addEventListener(\"mousedown\", function(e){\n",
       "        if (e.button === 0) {\n",
       "            var rect = e.target.getBoundingClientRect();\n",
       "            var X = e.clientX - rect.left;\n",
       "            var Y = e.clientY - rect.top;\n",
       "            draw(X, Y);\n",
       "        }\n",
       "    });\n",
       "\n",
       "    function draw(X, Y) {\n",
       "        ctx.beginPath();\n",
       "        if (mouse.X === null) {\n",
       "            ctx.moveTo(X, Y);\n",
       "        } else {\n",
       "            ctx.moveTo(mouse.X, mouse.Y);\n",
       "        }\n",
       "        ctx.lineTo(X, Y);\n",
       "        \n",
       "        ctx.lineCap = \"round\";\n",
       "        ctx.lineWidth = config.linesize * 2;\n",
       "        ctx.strokeStyle = config.linecolor;\n",
       "        ctx.stroke();\n",
       "\n",
       "        mouse.X = X;\n",
       "        mouse.Y = Y;\n",
       "    };\n",
       " \n",
       "    function drawEnd() {\n",
       "        mouse.X = null;\n",
       "        mouse.Y = null;\n",
       "    }\n",
       "</script>\n"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "execution_count": 4,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "HTML('''\n",
    "<canvas id=\"canvas\" height=\"300px\" width=\"300px\" style=\"border: 1px solid;\"></canvas>\n",
    "<p>\n",
    "    <button id=\"clear\">Clear</button>\n",
    "    <button id=\"submit\">Save image to variable</button>\n",
    "</p>\n",
    "<p id=\"msg\"></p>\n",
    "<script>\n",
    "    var kernel = IPython.notebook.kernel;\n",
    "\n",
    "    var config = {\n",
    "        \"linesize\": 7,\n",
    "        \"linecolor\": \"#000000\"\n",
    "    }\n",
    "\n",
    "    var mouse = {\n",
    "        \"X\": null,\n",
    "        \"Y\": null,\n",
    "    }\n",
    "\n",
    "    var clear = document.getElementById(\"clear\");\n",
    "    var submit = document.getElementById(\"submit\");\n",
    "    var canvas = document.getElementById(\"canvas\");\n",
    "    var ctx = canvas.getContext(\"2d\");\n",
    "\n",
    "    clear.addEventListener(\"click\", function(){\n",
    "        ctx.clearRect(0, 0, canvas.width, canvas.height);\n",
    "    });\n",
    "\n",
    "    submit.addEventListener(\"click\", function(){\n",
    "        var variable_value = 'base64_img';\n",
    "        kernel.execute(variable_value + \" = '\" + canvas.toDataURL() + \"'\");\n",
    "        msg.textContent = \"Success: \" + \"image -> \" + variable_value;\n",
    "    });\n",
    "\n",
    "    canvas.addEventListener(\"mouseup\", drawEnd, false);\n",
    "    canvas.addEventListener(\"mouseout\", drawEnd, false);\n",
    "    \n",
    "    canvas.addEventListener(\"mousemove\", function(e){\n",
    "        if (e.buttons === 1 || e.witch === 1) {\n",
    "            var rect = e.target.getBoundingClientRect();\n",
    "            var X = e.clientX - rect.left;\n",
    "            var Y = e.clientY - rect.top;\n",
    "            draw(X, Y);\n",
    "        };\n",
    "    });\n",
    " \n",
    "    canvas.addEventListener(\"mousedown\", function(e){\n",
    "        if (e.button === 0) {\n",
    "            var rect = e.target.getBoundingClientRect();\n",
    "            var X = e.clientX - rect.left;\n",
    "            var Y = e.clientY - rect.top;\n",
    "            draw(X, Y);\n",
    "        }\n",
    "    });\n",
    "\n",
    "    function draw(X, Y) {\n",
    "        ctx.beginPath();\n",
    "        if (mouse.X === null) {\n",
    "            ctx.moveTo(X, Y);\n",
    "        } else {\n",
    "            ctx.moveTo(mouse.X, mouse.Y);\n",
    "        }\n",
    "        ctx.lineTo(X, Y);\n",
    "        \n",
    "        ctx.lineCap = \"round\";\n",
    "        ctx.lineWidth = config.linesize * 2;\n",
    "        ctx.strokeStyle = config.linecolor;\n",
    "        ctx.stroke();\n",
    "\n",
    "        mouse.X = X;\n",
    "        mouse.Y = Y;\n",
    "    };\n",
    " \n",
    "    function drawEnd() {\n",
    "        mouse.X = null;\n",
    "        mouse.Y = null;\n",
    "    }\n",
    "</script>\n",
    "''')"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# To use on Python\n",
    "Base64 strings are used on Python.  \n",
    "Python codes split base64 strings and create image by it.   "
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 5,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "image/png": "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\n",
      "text/plain": [
       "<matplotlib.figure.Figure at 0x11d89ee10>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    },
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "I think this digit is a  4\n"
     ]
    }
   ],
   "source": [
    "import base64\n",
    "import numpy as np\n",
    "from io import BytesIO\n",
    "from PIL import Image\n",
    "from PIL import ImageOps\n",
    "import matplotlib.pyplot as plt\n",
    "\n",
    "\n",
    "def CreateMnistDataArray(image):\n",
    "    ret = np.zeros(28*28).reshape((1,28,28,1))\n",
    "    width, height = image.size\n",
    "    for y in range(height):\n",
    "        \n",
    "        for x in range(width):\n",
    "            r, g, b,a = image.getpixel((x, y))\n",
    "            if a == 0:\n",
    "                ret[0][y][x][0] = 0.0\n",
    "            else:\n",
    "                ret[0][y][x][0] = 1.0\n",
    "                \n",
    "    return ret\n",
    "            \n",
    "\n",
    "base64_img = base64_img.split(\",\")[-1]\n",
    "\n",
    "img = Image.open(BytesIO(base64.b64decode(base64_img))).resize((28,28))\n",
    "\n",
    "plt.imshow(np.asarray(img))\n",
    "plt.show()\n",
    "\n",
    "#print(type(img))  # <class 'PIL.PngImagePlugin.PngImageFile'>\n",
    "#print(img.size)   # (320, 240) \n",
    "#print(img.mode)   # RGBA\n",
    "\n",
    "mnist_type_data = CreateMnistDataArray(img)\n",
    "\n",
    "'''\n",
    "LOAD MODEL AND PREDICT\n",
    "'''\n",
    "model = load_model('model_mnist_cnn.h5')\n",
    "\n",
    "ret = model.predict(mnist_type_data, batch_size=1)   # OK\n",
    "#print(\"predict ret:\", ret)\n",
    "\n",
    "bestnum = 0.0\n",
    "bestclass = 0\n",
    "for n in [0,1,2,3,4,5,6,7,8,9]:\n",
    "    if bestnum < ret[0][n]:\n",
    "        bestnum = ret[0][n]\n",
    "        bestclass = n\n",
    "\n",
    "print(\"I think this digit is a \", bestclass)\n"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": true
   },
   "outputs": [],
   "source": []
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Python 3",
   "language": "python",
   "name": "python3"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 2
}