ONePlace.ipynb

{
  "nbformat": 4,
  "nbformat_minor": 0,
  "metadata": {
    "colab": {
      "name": "ONePlace.ipynb",
      "version": "0.3.2",
      "provenance": [],
      "include_colab_link": true
    },
    "kernelspec": {
      "name": "python3",
      "display_name": "Python 3"
    },
    "accelerator": "GPU"
  },
  "cells": [
    {
      "cell_type": "markdown",
      "metadata": {
        "id": "view-in-github",
        "colab_type": "text"
      },
      "source": [
        "[View in Colaboratory](https://colab.research.google.com/github/zaidalyafeai/Notebooks/blob/master/ONePlace.ipynb)"
      ]
    },
    {
      "metadata": {
        "id": "bSaqAJczA8GS",
        "colab_type": "text"
      },
      "cell_type": "markdown",
      "source": [
        "# Contents"
      ]
    },
    {
      "metadata": {
        "id": "SolX8T8iAnVz",
        "colab_type": "toc"
      },
      "cell_type": "markdown",
      "source": [
        ">[Introduction](#scrollTo=taEElfKSBHge)\n",
        "\n",
        ">[Setup GitHub](#scrollTo=IKr3caNnTCqh)\n",
        "\n",
        ">[Creating the model using keras](#scrollTo=tVqBtdDDPqtM)\n",
        "\n",
        ">[Convert the Model](#scrollTo=glkP5CvySfgK)\n",
        "\n",
        ">[Create a Web Page](#scrollTo=dr8MnQUbUBY7)\n",
        "\n",
        ">[Upload the model to GitHub](#scrollTo=RGI4Lj3IS1kC)\n",
        "\n"
      ]
    },
    {
      "metadata": {
        "id": "taEElfKSBHge",
        "colab_type": "text"
      },
      "cell_type": "markdown",
      "source": [
        "# Introduction \n",
        "In this tutorial we learn how to \n",
        "\n",
        "\n",
        "1.   Train a model with Keras with GPU\n",
        "2.   Convert a model to web format \n",
        "3.   Upload the model to GitHub Pages \n",
        "4.   Prediction using TensorFlow.js \n",
        "\n"
      ]
    },
    {
      "metadata": {
        "id": "IKr3caNnTCqh",
        "colab_type": "text"
      },
      "cell_type": "markdown",
      "source": [
        "# Setup GitHub"
      ]
    },
    {
      "metadata": {
        "id": "Yu-qRz_SOAoQ",
        "colab_type": "text"
      },
      "cell_type": "markdown",
      "source": [
        "Enter your email and user name "
      ]
    },
    {
      "metadata": {
        "id": "mlxScGFrN7PZ",
        "colab_type": "code",
        "colab": {}
      },
      "cell_type": "code",
      "source": [
        "!git config --global user.email \"email\"\n",
        "!git config --global user.name  \"user\""
      ],
      "execution_count": 0,
      "outputs": []
    },
    {
      "metadata": {
        "id": "jBgrC0BCOjnX",
        "colab_type": "text"
      },
      "cell_type": "markdown",
      "source": [
        "Clone the directory of github pages. If you don't have one, check this [GitHub Pages](https://pages.github.com/). For instance mine is\n",
        "\n",
        "`https://github.com/zaidalyafeai/zaidalyafeai.github.io`"
      ]
    },
    {
      "metadata": {
        "id": "U0aQzFskOi4L",
        "colab_type": "code",
        "colab": {}
      },
      "cell_type": "code",
      "source": [
        "!git clone <path-to-page>"
      ],
      "execution_count": 0,
      "outputs": []
    },
    {
      "metadata": {
        "id": "muiepE0p7f46",
        "colab_type": "text"
      },
      "cell_type": "markdown",
      "source": [
        "Change directory "
      ]
    },
    {
      "metadata": {
        "id": "JeFg-o5b7d99",
        "colab_type": "code",
        "colab": {}
      },
      "cell_type": "code",
      "source": [
        "import os\n",
        "os.chdir('<git-directory>')"
      ],
      "execution_count": 0,
      "outputs": []
    },
    {
      "metadata": {
        "id": "qah-8mhPPAiy",
        "colab_type": "text"
      },
      "cell_type": "markdown",
      "source": [
        "Create a new foulder for the project and change the current directory to be inside "
      ]
    },
    {
      "metadata": {
        "id": "O7IIAbu6O4uO",
        "colab_type": "code",
        "colab": {}
      },
      "cell_type": "code",
      "source": [
        "!mkdir XOR\n",
        "os.chdir('XOR')"
      ],
      "execution_count": 0,
      "outputs": []
    },
    {
      "metadata": {
        "id": "GwvM9LncPdh-",
        "colab_type": "text"
      },
      "cell_type": "markdown",
      "source": [
        "Create a directory for saving the keras model and the web model  "
      ]
    },
    {
      "metadata": {
        "id": "wOyiFQOfPWYR",
        "colab_type": "code",
        "colab": {}
      },
      "cell_type": "code",
      "source": [
        "!mkdir web_model \n",
        "!mkdir saved_model"
      ],
      "execution_count": 0,
      "outputs": []
    },
    {
      "metadata": {
        "id": "tVqBtdDDPqtM",
        "colab_type": "text"
      },
      "cell_type": "markdown",
      "source": [
        "# Creating the model using keras "
      ]
    },
    {
      "metadata": {
        "id": "b1JCrGrePvKp",
        "colab_type": "text"
      },
      "cell_type": "markdown",
      "source": [
        "We will create a simple model that models XOR operation. Given two inputs $(x_0, x_1)$ it outputs $y$\n",
        "\n",
        "$$\\left[\\begin{array}{cc|c}  \n",
        " x_0 & x_1 & y\\\\\n",
        " 0 & 0 & 0\\\\  \n",
        " 0 & 1 & 1\\\\\n",
        " 1 & 0 & 1\\\\\n",
        " 1 & 1 & 0\n",
        "\\end{array}\\right]$$"
      ]
    },
    {
      "metadata": {
        "id": "WKYiL-oYR0yk",
        "colab_type": "text"
      },
      "cell_type": "markdown",
      "source": [
        "Imports "
      ]
    },
    {
      "metadata": {
        "id": "a-UbSG-DR3ID",
        "colab_type": "code",
        "colab": {
          "base_uri": "https://localhost:8080/",
          "height": 34
        },
        "outputId": "3c877413-375c-4eca-b7aa-9234cb927538"
      },
      "cell_type": "code",
      "source": [
        "from keras.models import Sequential\n",
        "from keras.layers.core import Dense, Dropout, Activation\n",
        "from keras.optimizers import SGD\n",
        "import numpy as np "
      ],
      "execution_count": 13,
      "outputs": [
        {
          "output_type": "stream",
          "text": [
            "Using TensorFlow backend.\n"
          ],
          "name": "stderr"
        }
      ]
    },
    {
      "metadata": {
        "id": "UvBySAixR4Ca",
        "colab_type": "text"
      },
      "cell_type": "markdown",
      "source": [
        "Initialize the inputs "
      ]
    },
    {
      "metadata": {
        "id": "Hj65iQS6R6pO",
        "colab_type": "code",
        "colab": {}
      },
      "cell_type": "code",
      "source": [
        "X = np.array([[0,0],[0,1],[1,0],[1,1]])\n",
        "y = np.array([[0],[1],[1],[0]])"
      ],
      "execution_count": 0,
      "outputs": []
    },
    {
      "metadata": {
        "id": "TTyQKnEgSBQb",
        "colab_type": "text"
      },
      "cell_type": "markdown",
      "source": [
        "Create the model "
      ]
    },
    {
      "metadata": {
        "id": "ivnpyw3ZSAF9",
        "colab_type": "code",
        "colab": {}
      },
      "cell_type": "code",
      "source": [
        "model = Sequential()\n",
        "model.add(Dense(8, input_dim=2))\n",
        "model.add(Activation('tanh'))\n",
        "model.add(Dense(1))\n",
        "model.add(Activation('sigmoid'))\n",
        "\n",
        "sgd = SGD(lr=0.1)\n",
        "model.compile(loss='binary_crossentropy', optimizer=sgd)"
      ],
      "execution_count": 0,
      "outputs": []
    },
    {
      "metadata": {
        "id": "zzrpHO1XSIeJ",
        "colab_type": "text"
      },
      "cell_type": "markdown",
      "source": [
        "Train the model "
      ]
    },
    {
      "metadata": {
        "id": "jRwYsPJxRrYT",
        "colab_type": "code",
        "colab": {
          "base_uri": "https://localhost:8080/",
          "height": 69
        },
        "outputId": "b6d6e30d-b51f-4266-d468-88af8f7ff384"
      },
      "cell_type": "code",
      "source": [
        "model.fit(X, y, batch_size=1, nb_epoch=1000, verbose= 0)"
      ],
      "execution_count": 16,
      "outputs": [
        {
          "output_type": "stream",
          "text": [
            "/usr/local/lib/python3.6/dist-packages/keras/models.py:981: UserWarning: The `nb_epoch` argument in `fit` has been renamed `epochs`.\n",
            "  warnings.warn('The `nb_epoch` argument in `fit` '\n"
          ],
          "name": "stderr"
        },
        {
          "output_type": "execute_result",
          "data": {
            "text/plain": [
              "<keras.callbacks.History at 0x7f850f0c8ac8>"
            ]
          },
          "metadata": {
            "tags": []
          },
          "execution_count": 16
        }
      ]
    },
    {
      "metadata": {
        "id": "VHlJ2cmpSbZ7",
        "colab_type": "text"
      },
      "cell_type": "markdown",
      "source": [
        "Predict the output "
      ]
    },
    {
      "metadata": {
        "id": "ky1bM2EiSHYt",
        "colab_type": "code",
        "colab": {
          "base_uri": "https://localhost:8080/",
          "height": 86
        },
        "outputId": "c0e91991-4252-4649-99fd-64c044f8148d"
      },
      "cell_type": "code",
      "source": [
        "print(model.predict_proba(X))"
      ],
      "execution_count": 17,
      "outputs": [
        {
          "output_type": "stream",
          "text": [
            "[[0.00199795]\n",
            " [0.99443084]\n",
            " [0.99369615]\n",
            " [0.00691568]]\n"
          ],
          "name": "stdout"
        }
      ]
    },
    {
      "metadata": {
        "id": "vvdWZCRslZUz",
        "colab_type": "text"
      },
      "cell_type": "markdown",
      "source": [
        "Save the model "
      ]
    },
    {
      "metadata": {
        "id": "mxRke-l9lXfY",
        "colab_type": "code",
        "colab": {}
      },
      "cell_type": "code",
      "source": [
        "model.save('saved_model/keras.h5')"
      ],
      "execution_count": 0,
      "outputs": []
    },
    {
      "metadata": {
        "id": "glkP5CvySfgK",
        "colab_type": "text"
      },
      "cell_type": "markdown",
      "source": [
        "# Convert the Model "
      ]
    },
    {
      "metadata": {
        "id": "q30sPc63lbvw",
        "colab_type": "text"
      },
      "cell_type": "markdown",
      "source": [
        "Download the library "
      ]
    },
    {
      "metadata": {
        "id": "-FSJVtS9SiVi",
        "colab_type": "code",
        "colab": {}
      },
      "cell_type": "code",
      "source": [
        "!pip install tensorflowjs"
      ],
      "execution_count": 0,
      "outputs": []
    },
    {
      "metadata": {
        "id": "HWCP02udldLr",
        "colab_type": "text"
      },
      "cell_type": "markdown",
      "source": [
        "Convert the model "
      ]
    },
    {
      "metadata": {
        "id": "DuQP_mkeSkKL",
        "colab_type": "code",
        "colab": {
          "base_uri": "https://localhost:8080/",
          "height": 34
        },
        "outputId": "2ccdd0bd-4536-4923-c973-34df97eb1b87"
      },
      "cell_type": "code",
      "source": [
        "!tensorflowjs_converter --input_format keras saved_model/keras.h5 web_model"
      ],
      "execution_count": 19,
      "outputs": [
        {
          "output_type": "stream",
          "text": [
            "Using TensorFlow backend.\r\n"
          ],
          "name": "stdout"
        }
      ]
    },
    {
      "metadata": {
        "id": "dr8MnQUbUBY7",
        "colab_type": "text"
      },
      "cell_type": "markdown",
      "source": [
        "# Create a Web Page "
      ]
    },
    {
      "metadata": {
        "id": "SC9QaDQreTDr",
        "colab_type": "text"
      },
      "cell_type": "markdown",
      "source": [
        "Import TensorFlow.js "
      ]
    },
    {
      "metadata": {
        "id": "iwJQerK2eA_u",
        "colab_type": "code",
        "colab": {}
      },
      "cell_type": "code",
      "source": [
        "header = '<head><script src=\"https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@0.12.0\"> </script>\\n'"
      ],
      "execution_count": 0,
      "outputs": []
    },
    {
      "metadata": {
        "id": "GE_Y5U3UeW6U",
        "colab_type": "text"
      },
      "cell_type": "markdown",
      "source": [
        "Code for loading the web model. We predict a tensor of zeros and show the result in the page. "
      ]
    },
    {
      "metadata": {
        "id": "kpGEMkjJecBM",
        "colab_type": "code",
        "colab": {}
      },
      "cell_type": "code",
      "source": [
        "script = '\\\n",
        "<script>\\n\\\n",
        "          async function loadModel(){ \\n\\\n",
        "              model = await tf.loadModel(\\'web_model/model.json\\') \\n\\\n",
        "              y = model.predict(tf.zeros([1,2])) \\n\\\n",
        "              document.getElementById(\\'out\\').innerHTML = y.dataSync()[0] \\n\\\n",
        "          } \\n\\\n",
        "          loadModel() \\n\\\n",
        "</script>\\n\\\n",
        "</head> \\n'"
      ],
      "execution_count": 0,
      "outputs": []
    },
    {
      "metadata": {
        "id": "0TDOfXR6f9tp",
        "colab_type": "text"
      },
      "cell_type": "markdown",
      "source": [
        "Body of the page"
      ]
    },
    {
      "metadata": {
        "id": "cf5VErepf9H0",
        "colab_type": "code",
        "colab": {}
      },
      "cell_type": "code",
      "source": [
        "body = '\\\n",
        "<body>\\n\\\n",
        "        <p id =\\'out\\'></p> \\n\\\n",
        "</body>'"
      ],
      "execution_count": 0,
      "outputs": []
    },
    {
      "metadata": {
        "id": "2DaBOiA-jTER",
        "colab_type": "text"
      },
      "cell_type": "markdown",
      "source": [
        "Save the code as html file"
      ]
    },
    {
      "metadata": {
        "id": "pM6JIkRCglMu",
        "colab_type": "code",
        "colab": {}
      },
      "cell_type": "code",
      "source": [
        "with open('index.html','w') as f:\n",
        "  f.write(header+script+body)\n",
        "  f.close()"
      ],
      "execution_count": 0,
      "outputs": []
    },
    {
      "metadata": {
        "id": "RGI4Lj3IS1kC",
        "colab_type": "text"
      },
      "cell_type": "markdown",
      "source": [
        "# Upload the model to GitHub "
      ]
    },
    {
      "metadata": {
        "id": "t9sqGiaOTXpq",
        "colab_type": "text"
      },
      "cell_type": "markdown",
      "source": [
        "Use the following to generate an access token https://github.com/settings/tokens/new\n",
        ". Once you do that you can push the commits to your repository using the following \n",
        "\n",
        "`https://<token>:x-oauth-basic@github.com/<path-to-page> master` \n",
        "\n",
        "For instance \n",
        "\n",
        "`https://7ab3a8fe5742bf829f1a832a5f330a8365820:x-oauth-basic@github.com/zaidalyafeai/zaidalyafeai.github.io master`"
      ]
    },
    {
      "metadata": {
        "id": "-H8rf2agOdGh",
        "colab_type": "code",
        "colab": {}
      },
      "cell_type": "code",
      "source": [
        "!git add . \n",
        "!git commit -m \"create xor project\"\n",
        "!git push <token>:x-oauth-basic@github.com/<path-to-page> master"
      ],
      "execution_count": 0,
      "outputs": []
    }
  ]
}