docs/Lectures/Theme_4-Model_Deployment/Lecture_25-Deploying_to_Web/Lecture_25-Deploying_to_Web.ipynb

{
 "cells": [
  {
   "cell_type": "markdown",
   "id": "fbe026a0-1dad-40ef-a202-791e9ab53609",
   "metadata": {},
   "source": [
    "# Lecture 25 - Deploying Projects as Web Applications "
   ]
  },
  {
   "cell_type": "markdown",
   "id": "53cbf24f-8ea2-4098-bace-c1f6b6bab870",
   "metadata": {},
   "source": [
    "[![View notebook on Github](https://img.shields.io/static/v1.svg?logo=github&label=Repo&message=View%20On%20Github&color=lightgrey)](https://github.com/avakanski/Fall-2023-Python-Programming-for-Data-Science/blob/main/docs/Lectures/Theme_4-Model_Deployment/Lecture_25-Deploying_to_Web/Lecture_25-Deploying_to_Web.ipynb)\n",
    "[![Open In Collab](https://colab.research.google.com/assets/colab-badge.svg)](https://colab.research.google.com/github/avakanski/Fall-2023-Python-Programming-for-Data-Science/blob/main/docs/Lectures/Theme_4-Model_Deployment/Lecture_25-Deploying_to_Web/Lecture_25-Deploying_to_Web.ipynb) "
   ]
  },
  {
   "cell_type": "markdown",
   "id": "7b64cd51-b95b-4403-988d-63160beaddf7",
   "metadata": {},
   "source": [
    "<a id='top'></a>"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "54c93718",
   "metadata": {},
   "source": [
    "- [25.1 Introduction to Web APIs for Model Serving](#25.1-introduction-to-web-apis-for-model-serving)\n",
    "    - [25.1.1 REST Architecture](#25.1.1-rest-architecture)\n",
    "    - [25.1.2 RESTful APIs](#25.1.2-restful-apis)\n",
    "- [25.2 Deploying a Model for Iris Flowers Classification](#25.2-deploying-a-model-for-iris-flowers-classification)\n",
    "    - [25.2.1 Model Training and Prediction](#25.2.1-model-training-and-prediction)\n",
    "    - [25.2.2 Creating an HTML Webpage](#25.2.2-creating-an-html-webpage)\n",
    "    - [25.2.3 Creating a Flask App](#25.2.3-creating-a-flask-app)\n",
    "    - [25.2.4 Output Webpage](#25.2.4-output-webpage)\n",
    "    - [25.2.5 Run the Web Application](#25.2.5-run-the-web-application)\n",
    "- [25.3 Deploying a Model for MNIST Digits Classification](#25.3-deploying-a-model-for-mnist-digits-classification)\n",
    "    - [25.3.1 Model Training and Saving](#25.3.1-model-training-and-saving)\n",
    "    - [25.3.2 Creating a Flask App](#25.3.2-creating-a-flask-app)\n",
    "    - [25.3.3 Run the Web Application](#25.3.3-run-the-web-application)\n",
    "- [Appendix](#appendix)\n",
    "- [References](#references)"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "41835941-845f-4488-88e3-a99755e2ab03",
   "metadata": {},
   "source": [
    "## 25.1 Introduction to Web APIs for Model Serving <a id=\"25.1-introduction-to-web-apis-for-model-serving\"/>"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "3794018b-c61c-4131-9ed9-0a60854463c1",
   "metadata": {},
   "source": [
    "After a predictive model for a Data Science (DS) project is developed, the next steps in the project life cycle include deploying the model and serving the model to the end-users. One approach to serving the model is via a web API where the end-users can submit requests to query the model, and obtain the model's predictions as responses to their queries. \n",
    "\n",
    "In general, an **API (Application Programming Interface)** enables software applications to communicate with each other and exchange data. In the context of web APIs, the terms client and server are typically used to refer to the two main components that are involved in the communication between software applications over the web. The **client** is typically a front-end application that runs in a web browser and allows to access data or services from the server. The client sends a *request* to the server, usually in the form of an HTTP request. The **server** is the application that receives and processes requests from clients. The server performs actions based on the requests, and sends a *response* back to the client. When a response is received from the server, the client presents the data to the end-users and/or it may take other actions based on the response from the server.\n",
    "\n",
    "<img src=\"images/web_API.png\" width=\"700\">\n",
    "\n",
    "*Figure: Web API.* Source: [4].\n",
    "\n",
    "An example of usage of a web API in Data Science is for accessing predictions from a model that is deployed on a server. The end-user interacts with a front-end application that runs in a web browser and submits a request to initiate an API call (e.g., submit an image for classification or submit tabular data inputs for classification). The API calls the server to obtain predictions from the model. After the model makes the prediction, the API transfers the prediction to the end-user in the form of JSON, XML, CSV, or another format. \n",
    "\n",
    "Similarly, another use of web APIs in Data Science is for accessing data from a database that is hosted on a server, and afterward using the retrieved data to train a predictive model.  "
   ]
  },
  {
   "cell_type": "markdown",
   "id": "f499483c-bd8c-48a7-9275-67c492dfc261",
   "metadata": {},
   "source": [
    "### 25.1.1 REST Architecture <a id=\"25.1.1-rest-architecture\"/>"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "557e8163-dceb-4e95-994e-5aa218ef6114",
   "metadata": {},
   "source": [
    "Two common approaches for building web APIs are SOAP (Service Object Access Protocol) and REST (REpresentational State Transfer). Whereas SOAP is a protocol for communication between computer systems, REST is an architecture that defines a set of constraints for communication over a network and promotes simplicity, scalability, and reliability. Because of that, REST has been very popular, since it introduces guidelines regarding the architecture of an API, instead of defining rules of specifications for the data exchange.\n",
    "\n",
    "**REST (REpresentational State Transfer)** defines the following architectural constraints:\n",
    "\n",
    "- **Stateless**: The server won’t maintain any state between requests from the client, and every request must contain all necessary information. I.e., the server cannot use information from previous requests by the client.\n",
    "- **Client-server design**: The client and server must be decoupled from each other. The decoupling helps them to evolve independently.\n",
    "- **Cacheable**: The response from the server should be cacheable, and it can be reused later by the client, if needed.\n",
    "- **Uniform interface**: The data transfer from the server to the client will be in a standardized format, instead of a format that is specific to one application.  \n",
    "- **Layered system**: The client may access the resources on the server indirectly through other layers. Also, the server can have multiple layers, such as security, application, business logic, and these layers must remain invisible to the client.\n",
    "- **Code on demand**: The client may extend functionalities by downloading code blocks from the server.\n",
    "\n",
    "An API that adheres to the REST guidelines is referred to as **RESTful API** or simply REST API. \n",
    "\n",
    "RESTful APIs provide access to web services through public web URLs, referred to as request endpoints. The client sends an HTTP request to the specific URL, and the RESTful API uses HTTP methods to manage the resources in the web service. Although there are many HTTP methods, the most commonly used methods with RESTful APIs include: `GET` (retrieve resources), `POST` (create a new resource), `PUT` (update an existing resource),` PATCH` (partially update an existing resource), and `DELETE` (delete a resource). "
   ]
  },
  {
   "cell_type": "markdown",
   "id": "b5bed47f",
   "metadata": {},
   "source": [
    "### 25.1.2 RESTful APIs<a id=\"25.1.2-restful-apis\"/>"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "9adbe56c-b063-40a6-ba7a-411afb93848c",
   "metadata": {},
   "source": [
    "RESTful APIs can be developed in different programming languages. Examples of libraries include Node.js in Javascript, Roda and Sinatra in Ruby, Spring Boot in Java, etc.\n",
    "\n",
    "In Python, the most popular libraries for developing RESTful APIs are Flask, Fast API, and Django.  \n",
    "\n",
    "**Flask** is a micro framework for developing RESTful APIs, which means that it is lightweight and provides the basic components for serving predictive models as web services. Flask is the easiest to learn and use in comparison to the other frameworks, and it is known for its simplicity and flexibility. However, it also has limitations in terms of functionality, since it is designed for low-volume APIs, and does not scale well to large applications. Also, Flask is a general-purpose web framework and may require importing additional libraries for specific functionalities.\n",
    "\n",
    "**Fast API** is also a lightweight framework, but it is designed specifically for building web APIs quickly and efficiently. Fast API was introduced in 2018 and it is a newer framework, but it has quickly gained popularity among developers. Its unique characteristic is its speed, as it is the fastest Python framework. FastAPI is explicitly designed for building APIs, and offers many features for automating the building of APIs. \n",
    "\n",
    "**Django** is a full-stack web framework, that has many built-in features and a specific project structure. This makes it more difficult to learn than Flask and Fast API. On the other hand, Django is a powerful framework that has been used in many large-scale projects as it offers various features for building APIs. This is considered advantageous by developers who want a more structured framework or who prefer a comprehensive solution without relying on many third-party packages.\n",
    "\n",
    "There are also other similar Python libraries for developing RESTful APIs. As well as, numerous frameworks for developing RESTful APIs as cloud services are available by the cloud providers such as Amazon SageMaker, Azure ML, Google Cloud ML, IBM Watson Cloud, and others. These cloud frameworks provide access to pretrained models, deployment of custom models, and allow easy integration of predictive models into users' applications.\n",
    "\n",
    "In this lecture we will demonstrate  building a web API for Data Science projects with Flask, due to its ease of use."
   ]
  },
  {
   "cell_type": "markdown",
   "id": "e5fbf9c2",
   "metadata": {},
   "source": [
    "## 25.2 Deploying a Model for Iris Flowers Classification <a id=\"25.2-deploying-a-model-for-iris-flowers-classification\"/>"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "9db493fb",
   "metadata": {},
   "source": [
    "This section was inspired by the article [Deploying Machine Learning Models using Flask](https://www.section.io/engineering-education/deploying-machine-learning-models-using-flask/).\n",
    "\n",
    "The goal is to deploy a simple Machine Learning model for classification of the Iris dataset, which we used in Lecture 13. Recall that the dataset consists of measurements of three different species of irises:\n",
    "\n",
    "  1. Iris Setosa\n",
    "  2. Iris Versicolour\n",
    "  3. Iris Virginica\n",
    "  \n",
    "Each data point has 4 features, which include:\n",
    "\n",
    "  1. Sepal length in cm\n",
    "  2. Sepal width in cm\n",
    "  3. Petal length in cm\n",
    "  4. Petal width in cm\n",
    "  \n",
    "Let's load the dataset using Pandas, and display the dataframe."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 1,
   "id": "d210eb83",
   "metadata": {
    "tags": []
   },
   "outputs": [],
   "source": [
    "# Importing libraries\n",
    "import pandas as pd\n",
    "import numpy as np\n",
    "from sklearn.linear_model import LogisticRegression\n",
    "from sklearn.preprocessing import LabelEncoder\n",
    "\n",
    "import warnings\n",
    "warnings.filterwarnings('ignore')\n",
    "\n",
    "# Load the dataset\n",
    "data = pd.read_csv('Iris-API/iris.csv')"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 2,
   "id": "39a23804",
   "metadata": {
    "tags": []
   },
   "outputs": [
    {
     "data": {
      "text/html": [
       "<div>\n",
       "<style scoped>\n",
       "    .dataframe tbody tr th:only-of-type {\n",
       "        vertical-align: middle;\n",
       "    }\n",
       "\n",
       "    .dataframe tbody tr th {\n",
       "        vertical-align: top;\n",
       "    }\n",
       "\n",
       "    .dataframe thead th {\n",
       "        text-align: right;\n",
       "    }\n",
       "</style>\n",
       "<table border=\"1\" class=\"dataframe\">\n",
       "  <thead>\n",
       "    <tr style=\"text-align: right;\">\n",
       "      <th></th>\n",
       "      <th>sepal.length</th>\n",
       "      <th>sepal.width</th>\n",
       "      <th>petal.length</th>\n",
       "      <th>petal.width</th>\n",
       "      <th>variety</th>\n",
       "    </tr>\n",
       "  </thead>\n",
       "  <tbody>\n",
       "    <tr>\n",
       "      <th>0</th>\n",
       "      <td>5.1</td>\n",
       "      <td>3.5</td>\n",
       "      <td>1.4</td>\n",
       "      <td>0.2</td>\n",
       "      <td>Setosa</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>1</th>\n",
       "      <td>4.9</td>\n",
       "      <td>3.0</td>\n",
       "      <td>1.4</td>\n",
       "      <td>0.2</td>\n",
       "      <td>Setosa</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>2</th>\n",
       "      <td>4.7</td>\n",
       "      <td>3.2</td>\n",
       "      <td>1.3</td>\n",
       "      <td>0.2</td>\n",
       "      <td>Setosa</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>3</th>\n",
       "      <td>4.6</td>\n",
       "      <td>3.1</td>\n",
       "      <td>1.5</td>\n",
       "      <td>0.2</td>\n",
       "      <td>Setosa</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>4</th>\n",
       "      <td>5.0</td>\n",
       "      <td>3.6</td>\n",
       "      <td>1.4</td>\n",
       "      <td>0.2</td>\n",
       "      <td>Setosa</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>...</th>\n",
       "      <td>...</td>\n",
       "      <td>...</td>\n",
       "      <td>...</td>\n",
       "      <td>...</td>\n",
       "      <td>...</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>145</th>\n",
       "      <td>6.7</td>\n",
       "      <td>3.0</td>\n",
       "      <td>5.2</td>\n",
       "      <td>2.3</td>\n",
       "      <td>Virginica</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>146</th>\n",
       "      <td>6.3</td>\n",
       "      <td>2.5</td>\n",
       "      <td>5.0</td>\n",
       "      <td>1.9</td>\n",
       "      <td>Virginica</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>147</th>\n",
       "      <td>6.5</td>\n",
       "      <td>3.0</td>\n",
       "      <td>5.2</td>\n",
       "      <td>2.0</td>\n",
       "      <td>Virginica</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>148</th>\n",
       "      <td>6.2</td>\n",
       "      <td>3.4</td>\n",
       "      <td>5.4</td>\n",
       "      <td>2.3</td>\n",
       "      <td>Virginica</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>149</th>\n",
       "      <td>5.9</td>\n",
       "      <td>3.0</td>\n",
       "      <td>5.1</td>\n",
       "      <td>1.8</td>\n",
       "      <td>Virginica</td>\n",
       "    </tr>\n",
       "  </tbody>\n",
       "</table>\n",
       "<p>150 rows × 5 columns</p>\n",
       "</div>"
      ],
      "text/plain": [
       "     sepal.length  sepal.width  petal.length  petal.width    variety\n",
       "0             5.1          3.5           1.4          0.2     Setosa\n",
       "1             4.9          3.0           1.4          0.2     Setosa\n",
       "2             4.7          3.2           1.3          0.2     Setosa\n",
       "3             4.6          3.1           1.5          0.2     Setosa\n",
       "4             5.0          3.6           1.4          0.2     Setosa\n",
       "..            ...          ...           ...          ...        ...\n",
       "145           6.7          3.0           5.2          2.3  Virginica\n",
       "146           6.3          2.5           5.0          1.9  Virginica\n",
       "147           6.5          3.0           5.2          2.0  Virginica\n",
       "148           6.2          3.4           5.4          2.3  Virginica\n",
       "149           5.9          3.0           5.1          1.8  Virginica\n",
       "\n",
       "[150 rows x 5 columns]"
      ]
     },
     "execution_count": 2,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "data"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "f1330df9",
   "metadata": {},
   "source": [
    "In the dataframe, the `variety` column contains the target labels. First, we will convert the labels from categorical values to numerical values by applying the scikit-learn `LabelEncoder`."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 3,
   "id": "8c61febc",
   "metadata": {
    "tags": []
   },
   "outputs": [
    {
     "data": {
      "text/html": [
       "<div>\n",
       "<style scoped>\n",
       "    .dataframe tbody tr th:only-of-type {\n",
       "        vertical-align: middle;\n",
       "    }\n",
       "\n",
       "    .dataframe tbody tr th {\n",
       "        vertical-align: top;\n",
       "    }\n",
       "\n",
       "    .dataframe thead th {\n",
       "        text-align: right;\n",
       "    }\n",
       "</style>\n",
       "<table border=\"1\" class=\"dataframe\">\n",
       "  <thead>\n",
       "    <tr style=\"text-align: right;\">\n",
       "      <th></th>\n",
       "      <th>sepal.length</th>\n",
       "      <th>sepal.width</th>\n",
       "      <th>petal.length</th>\n",
       "      <th>petal.width</th>\n",
       "      <th>variety</th>\n",
       "    </tr>\n",
       "  </thead>\n",
       "  <tbody>\n",
       "    <tr>\n",
       "      <th>0</th>\n",
       "      <td>5.1</td>\n",
       "      <td>3.5</td>\n",
       "      <td>1.4</td>\n",
       "      <td>0.2</td>\n",
       "      <td>0</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>1</th>\n",
       "      <td>4.9</td>\n",
       "      <td>3.0</td>\n",
       "      <td>1.4</td>\n",
       "      <td>0.2</td>\n",
       "      <td>0</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>2</th>\n",
       "      <td>4.7</td>\n",
       "      <td>3.2</td>\n",
       "      <td>1.3</td>\n",
       "      <td>0.2</td>\n",
       "      <td>0</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>3</th>\n",
       "      <td>4.6</td>\n",
       "      <td>3.1</td>\n",
       "      <td>1.5</td>\n",
       "      <td>0.2</td>\n",
       "      <td>0</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>4</th>\n",
       "      <td>5.0</td>\n",
       "      <td>3.6</td>\n",
       "      <td>1.4</td>\n",
       "      <td>0.2</td>\n",
       "      <td>0</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>...</th>\n",
       "      <td>...</td>\n",
       "      <td>...</td>\n",
       "      <td>...</td>\n",
       "      <td>...</td>\n",
       "      <td>...</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>145</th>\n",
       "      <td>6.7</td>\n",
       "      <td>3.0</td>\n",
       "      <td>5.2</td>\n",
       "      <td>2.3</td>\n",
       "      <td>2</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>146</th>\n",
       "      <td>6.3</td>\n",
       "      <td>2.5</td>\n",
       "      <td>5.0</td>\n",
       "      <td>1.9</td>\n",
       "      <td>2</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>147</th>\n",
       "      <td>6.5</td>\n",
       "      <td>3.0</td>\n",
       "      <td>5.2</td>\n",
       "      <td>2.0</td>\n",
       "      <td>2</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>148</th>\n",
       "      <td>6.2</td>\n",
       "      <td>3.4</td>\n",
       "      <td>5.4</td>\n",
       "      <td>2.3</td>\n",
       "      <td>2</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>149</th>\n",
       "      <td>5.9</td>\n",
       "      <td>3.0</td>\n",
       "      <td>5.1</td>\n",
       "      <td>1.8</td>\n",
       "      <td>2</td>\n",
       "    </tr>\n",
       "  </tbody>\n",
       "</table>\n",
       "<p>150 rows × 5 columns</p>\n",
       "</div>"
      ],
      "text/plain": [
       "     sepal.length  sepal.width  petal.length  petal.width  variety\n",
       "0             5.1          3.5           1.4          0.2        0\n",
       "1             4.9          3.0           1.4          0.2        0\n",
       "2             4.7          3.2           1.3          0.2        0\n",
       "3             4.6          3.1           1.5          0.2        0\n",
       "4             5.0          3.6           1.4          0.2        0\n",
       "..            ...          ...           ...          ...      ...\n",
       "145           6.7          3.0           5.2          2.3        2\n",
       "146           6.3          2.5           5.0          1.9        2\n",
       "147           6.5          3.0           5.2          2.0        2\n",
       "148           6.2          3.4           5.4          2.3        2\n",
       "149           5.9          3.0           5.1          1.8        2\n",
       "\n",
       "[150 rows x 5 columns]"
      ]
     },
     "execution_count": 3,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "# Convert the label column into ordinal format\n",
    "label_feature = data[['variety']]\n",
    "label_encoder = LabelEncoder()\n",
    "label_encoded = label_encoder.fit_transform(label_feature)\n",
    "data['variety'] = pd.DataFrame(label_encoded, columns=label_feature.columns, index=label_feature.index)\n",
    "\n",
    "data"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "d0960c63",
   "metadata": {},
   "source": [
    "### 25.2.1 Model Training and Prediction <a id=\"25.2.1-model-training-and-prediction\"/>"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "e5bba6b6",
   "metadata": {},
   "source": [
    "Let's extract the training features from the dataframe into variable `X` and the training labels into variable `y`. \n",
    "\n",
    "In the following cell, we use a Logistic Regression model from scikit-learn to train a classification model. "
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 4,
   "id": "5c2b674d",
   "metadata": {
    "tags": []
   },
   "outputs": [],
   "source": [
    "# Extract the features X and target y variables\n",
    "X = data.drop(['variety'], axis=1)\n",
    "y = data['variety']"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 5,
   "id": "36ea6aff-2795-46ab-a674-1622de748d82",
   "metadata": {
    "tags": []
   },
   "outputs": [
    {
     "data": {
      "text/html": [
       "<style>#sk-container-id-1 {color: black;}#sk-container-id-1 pre{padding: 0;}#sk-container-id-1 div.sk-toggleable {background-color: white;}#sk-container-id-1 label.sk-toggleable__label {cursor: pointer;display: block;width: 100%;margin-bottom: 0;padding: 0.3em;box-sizing: border-box;text-align: center;}#sk-container-id-1 label.sk-toggleable__label-arrow:before {content: \"▸\";float: left;margin-right: 0.25em;color: #696969;}#sk-container-id-1 label.sk-toggleable__label-arrow:hover:before {color: black;}#sk-container-id-1 div.sk-estimator:hover label.sk-toggleable__label-arrow:before {color: black;}#sk-container-id-1 div.sk-toggleable__content {max-height: 0;max-width: 0;overflow: hidden;text-align: left;background-color: #f0f8ff;}#sk-container-id-1 div.sk-toggleable__content pre {margin: 0.2em;color: black;border-radius: 0.25em;background-color: #f0f8ff;}#sk-container-id-1 input.sk-toggleable__control:checked~div.sk-toggleable__content {max-height: 200px;max-width: 100%;overflow: auto;}#sk-container-id-1 input.sk-toggleable__control:checked~label.sk-toggleable__label-arrow:before {content: \"▾\";}#sk-container-id-1 div.sk-estimator input.sk-toggleable__control:checked~label.sk-toggleable__label {background-color: #d4ebff;}#sk-container-id-1 div.sk-label input.sk-toggleable__control:checked~label.sk-toggleable__label {background-color: #d4ebff;}#sk-container-id-1 input.sk-hidden--visually {border: 0;clip: rect(1px 1px 1px 1px);clip: rect(1px, 1px, 1px, 1px);height: 1px;margin: -1px;overflow: hidden;padding: 0;position: absolute;width: 1px;}#sk-container-id-1 div.sk-estimator {font-family: monospace;background-color: #f0f8ff;border: 1px dotted black;border-radius: 0.25em;box-sizing: border-box;margin-bottom: 0.5em;}#sk-container-id-1 div.sk-estimator:hover {background-color: #d4ebff;}#sk-container-id-1 div.sk-parallel-item::after {content: \"\";width: 100%;border-bottom: 1px solid gray;flex-grow: 1;}#sk-container-id-1 div.sk-label:hover label.sk-toggleable__label {background-color: #d4ebff;}#sk-container-id-1 div.sk-serial::before {content: \"\";position: absolute;border-left: 1px solid gray;box-sizing: border-box;top: 0;bottom: 0;left: 50%;z-index: 0;}#sk-container-id-1 div.sk-serial {display: flex;flex-direction: column;align-items: center;background-color: white;padding-right: 0.2em;padding-left: 0.2em;position: relative;}#sk-container-id-1 div.sk-item {position: relative;z-index: 1;}#sk-container-id-1 div.sk-parallel {display: flex;align-items: stretch;justify-content: center;background-color: white;position: relative;}#sk-container-id-1 div.sk-item::before, #sk-container-id-1 div.sk-parallel-item::before {content: \"\";position: absolute;border-left: 1px solid gray;box-sizing: border-box;top: 0;bottom: 0;left: 50%;z-index: -1;}#sk-container-id-1 div.sk-parallel-item {display: flex;flex-direction: column;z-index: 1;position: relative;background-color: white;}#sk-container-id-1 div.sk-parallel-item:first-child::after {align-self: flex-end;width: 50%;}#sk-container-id-1 div.sk-parallel-item:last-child::after {align-self: flex-start;width: 50%;}#sk-container-id-1 div.sk-parallel-item:only-child::after {width: 0;}#sk-container-id-1 div.sk-dashed-wrapped {border: 1px dashed gray;margin: 0 0.4em 0.5em 0.4em;box-sizing: border-box;padding-bottom: 0.4em;background-color: white;}#sk-container-id-1 div.sk-label label {font-family: monospace;font-weight: bold;display: inline-block;line-height: 1.2em;}#sk-container-id-1 div.sk-label-container {text-align: center;}#sk-container-id-1 div.sk-container {/* jupyter's `normalize.less` sets `[hidden] { display: none; }` but bootstrap.min.css set `[hidden] { display: none !important; }` so we also need the `!important` here to be able to override the default hidden behavior on the sphinx rendered scikit-learn.org. See: https://github.com/scikit-learn/scikit-learn/issues/21755 */display: inline-block !important;position: relative;}#sk-container-id-1 div.sk-text-repr-fallback {display: none;}</style><div id=\"sk-container-id-1\" class=\"sk-top-container\"><div class=\"sk-text-repr-fallback\"><pre>LogisticRegression()</pre><b>In a Jupyter environment, please rerun this cell to show the HTML representation or trust the notebook. <br />On GitHub, the HTML representation is unable to render, please try loading this page with nbviewer.org.</b></div><div class=\"sk-container\" hidden><div class=\"sk-item\"><div class=\"sk-estimator sk-toggleable\"><input class=\"sk-toggleable__control sk-hidden--visually\" id=\"sk-estimator-id-1\" type=\"checkbox\" checked><label for=\"sk-estimator-id-1\" class=\"sk-toggleable__label sk-toggleable__label-arrow\">LogisticRegression</label><div class=\"sk-toggleable__content\"><pre>LogisticRegression()</pre></div></div></div></div></div>"
      ],
      "text/plain": [
       "LogisticRegression()"
      ]
     },
     "execution_count": 5,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "# Train a Logistic Regression model\n",
    "logreg_model = LogisticRegression()\n",
    "logreg_model.fit(X, y) "
   ]
  },
  {
   "cell_type": "markdown",
   "id": "5e898607",
   "metadata": {},
   "source": [
    "Finally, let's define a function `classify` that takes 4 input arguments, and predicts the class of the iris flowers. The four inputs `a`, `b`, `c`, and `d` correspond to the sepal length and width, and petal length and width. The 'classify' function first converts the inputs to a numpy array, and reshapes the array to represent a batch with 1 data instance. Afterward, the trained Logistic Regression classifier is used to predict the variety of an iris flower."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 6,
   "id": "0ed35dc2",
   "metadata": {
    "tags": []
   },
   "outputs": [],
   "source": [
    "# Predict the iris class based on inputs a, b, c, d\n",
    "def classify(a, b, c, d):\n",
    "    arr = np.array([a, b, c, d], dtype=np.float64) # Convert to numpy array\n",
    "    query = arr.reshape(1, -1) # Reshape the array\n",
    "    prediction = logreg_model.predict(query)[0] # Make a prediction \n",
    "    variety = variety_mappings[prediction] # Map the prediction to iris variety\n",
    "    return variety # Return the iris variety\n",
    "\n",
    "# Dictionary containing the mapping\n",
    "variety_mappings = {0: 'Setosa', 1: 'Versicolor', 2: 'Virginica'}"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "5de63575",
   "metadata": {},
   "source": [
    "To make sure that the function `classify` works, in the following cell a set of four input values is passed to `classify`. We can see that the output is the iris target label, as expected."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 7,
   "id": "eab6f3a1",
   "metadata": {
    "tags": []
   },
   "outputs": [
    {
     "data": {
      "text/plain": [
       "'Setosa'"
      ]
     },
     "execution_count": 7,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "classify(1.0, 1.0, 2.0, 2.0)"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "56d7d0b9",
   "metadata": {},
   "source": [
    "The above code for classifying iris flowers is saved as `model.py` under the directory `IRIS-API/model.py`."
   ]
  },
  {
   "cell_type": "markdown",
   "id": "f90a5e50",
   "metadata": {},
   "source": [
    "### 25.2.2 Creating an HTML Webpage<a id=\"25.2.2-creating-an-html-webpage\"/>"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "f4e7cbd1",
   "metadata": {},
   "source": [
    "Next, we will build the following simple HTML page to accept inputs from the end-users. \n",
    "\n",
    "<img src=\"images/home_page.png\" width=\"500\">\n",
    "\n",
    "*Figure: Home webpage to accept inputs from end-users.*\n",
    "\n",
    "The HTML code for the input form is shown below, containing head and body sections. The `head` defines metadata and styles with the tags `<meta>` and `<style>`. \n",
    "\n",
    "The `body` contains `<div>` tags with `class='field'` for each of the 4 inputs: sepal/petal lengths/widths. Each input tag has `class=\"input\"`, and `type=\"number\"` to accept numerical values from the end-users. All the `<div>` tags are enclosed within a form with `action=\"predict\"` and `method=\"GET\"`. The `GET` method is used to transport the data from the HTML form to the Flask app.\n",
    "\n",
    "The HTML code is saved as `index.html` file under the directory `Iris-API/templates/index.html`."
   ]
  },
  {
   "cell_type": "markdown",
   "id": "3b1ceaef",
   "metadata": {},
   "source": [
    "<img src=\"images/home_head.png\" width=\"700\">\n",
    "<img src=\"images/home_body.png\" width=\"800\">\n",
    "\n",
    "*Figure: Head and Body of the home HTML page.*"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "db941ecf",
   "metadata": {},
   "source": [
    "### 25.2.3 Creating a Flask App <a id=\"25.2.3-creating-a-flask-app\"/>"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "d6bd6f0b",
   "metadata": {},
   "source": [
    "Next, we will use the Flask framework to deploy the Machine Learning model locally. Note that Flask is not typically run from Jupyter Notebooks, and therefore we will save the code from this section as a Python script `app.py` and we will run the script from the command line in a terminal.\n",
    "\n",
    "Let's first import the `model` module that we created in the previous section. Next, we import the `flask` library, as well as the related libraries `request` (for accessing data sent with HTTP requests), and `render_template` (for generating HTML pages by combining templates with data). \n",
    "\n",
    "Building the Flask server begins with creating an instance of the Flask application, which we assigned to the name `app`. The argument `__name__` associates the instance with the name of the current module, and Flask uses it to locate the root path of the application. The `template_folder` argument specifies the directory where Flask will look for HTML templates for rendering the webpages for input parameters and model output. "
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "f4c1f1d5",
   "metadata": {},
   "outputs": [],
   "source": [
    "import model # Import the python file containing the ML model\n",
    "from flask import Flask, request, render_template # Import flask libraries\n",
    "\n",
    "# Initialize the flask class and specify the templates directory\n",
    "app = Flask(__name__, template_folder=\"templates\")"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "2ab21130",
   "metadata": {},
   "source": [
    "In Flask, **routes** define the actions that the web API should take when a specific URL is accessed by the end-user in a web browser. Routes in Flask are defined using the `@app.route` decorator. This decorator is associated with a function that specifies the actions to a particular URL. In this example, we will define two routes: route `'/'` that corresponds to the home page where the end-user enters the input values for iris flowers, and route `'/predict'` that sends the input values to the model for inference and displays the model's prediction.  \n",
    "\n",
    "Therefore, in the next cell we set the default route of the Flask application using `@app.route('/')`. The route `'/'` in Flask is the root or home route. When we access the root URL of the application (e.g., `http://127.0.01:5000/`), the function `index_view` will be called, and it will render the HTML page `'index.html'` in the web browser. The `render_template()` is a Flask function that takes an HTML file as an argument and processes it for sending as the response to the end-user's request. This is a common way of creating a simple home page for a web API. "
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "52ea8f98",
   "metadata": {},
   "outputs": [],
   "source": [
    "# Default route set as 'index'\n",
    "@app.route('/')\n",
    "def index_view():\n",
    "    return render_template('index.html') # Render index.html"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "5bff7f0d",
   "metadata": {},
   "source": [
    "Similarly, in the next cell we create a separate Flask route for the Machine Learning model, that accepts inputs for the model, makes a prediction, and renders the results in a webpage. \n",
    "\n",
    "Specifically, we use the `/predict` route with the method `'GET'`. This route will retrieve the data from the fields on the `index.html` webpage through a GET request. For this purpose, we use `request.args.get()` to extract the data from each of the input fields in the form, using the name attributes for the petal and sepal dimensions.\n",
    "\n",
    "The retrieved inputs `sepal_len`, `sepal_wid`, `petal_len`, `petal_wid` are then passed to the `classify()` method of the Machine Learning model to make a prediction about the variety of the iris flower. The result from the model's prediction is assigned to the variable `variety`.\n",
    "\n",
    "The variable `variety` is next passed to the HTML file `output.html` to render the predicted variety of flowers and display it in a new webpage. For this, we used the function `render_template(filename, arguments)` where we specified the HTML file along with the predicted variable `variety`.\n",
    "\n",
    "Finally, if an exception occurs during the execution of the `try` block (e.g., an error in model prediction or input parameters), the message `'Error'` will be returned."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "c9a50cab",
   "metadata": {},
   "outputs": [],
   "source": [
    "# Route 'predict' accepts GET request\n",
    "@app.route('/predict', methods=['GET'])\n",
    "def predict_class():\n",
    "    try:\n",
    "        sepal_len = request.args.get('slen') # Get parameters for sepal length\n",
    "        sepal_wid = request.args.get('swid') # Get parameters for sepal width\n",
    "        petal_len = request.args.get('plen') # Get parameters for petal length\n",
    "        petal_wid = request.args.get('pwid') # Get parameters for petal width\n",
    "\n",
    "        # Get the output from the classification model\n",
    "        variety = model.classify(sepal_len, sepal_wid, petal_len, petal_wid)\n",
    "\n",
    "        # Render the output in new HTML page\n",
    "        return render_template('output.html', variety=variety)\n",
    "    except:\n",
    "        return 'Error'"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "ab5530f2",
   "metadata": {},
   "source": [
    "To run the Flask webserver, we use the `app.run()` method as shown below. The `debug=True` argument enables the debug mode, which provides additional information in case of errors."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "cb015f91",
   "metadata": {},
   "outputs": [],
   "source": [
    "# Run the Flask server\n",
    "if(__name__=='__main__'):\n",
    "    app.run(debug=True)  "
   ]
  },
  {
   "cell_type": "markdown",
   "id": "462bb07e",
   "metadata": {},
   "source": [
    "The code for Flask is saved as `app.py` under the directory `IRIS-API/app.py`. We will use it later to run the web application. "
   ]
  },
  {
   "cell_type": "markdown",
   "id": "b3c057bd",
   "metadata": {},
   "source": [
    "### 25.2.4 Output Webpage <a id=\"25.2.4-output-webpage\"/>"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "45bc63b7",
   "metadata": {},
   "source": [
    "We need to also create another even simpler HTML page to display the output of the classification. \n",
    "\n",
    "<img src=\"images/output_page.png\" width=\"500\">\n",
    "\n",
    "*Figure: Output webpage to present the model's prediction to end-users.*\n",
    "\n",
    "The body of the code is shown below, and it is saved as `output.html` in the directory `./templates/output.html`. In the code `{{ variety }}` specifies the argument that was passed to get rendered in the new HTML file."
   ]
  },
  {
   "cell_type": "markdown",
   "id": "5bbcfac7",
   "metadata": {},
   "source": [
    "<img src=\"images/output_body.png\" width=\"800\">\n",
    "\n",
    "*Figure: Body of HTML file for the output webpage.*"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "53c5884c",
   "metadata": {},
   "source": [
    "### 25.2.5 Run the Web Application <a id=\"25.2.5-run-the-web-application\"/>"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "289dbfa5",
   "metadata": {},
   "source": [
    "To deploy the application, we will execute the command `python app.py` from the terminal. Don't forget to first change the directory to `Iris-API` where the file `app.py` is saved. \n",
    "\n",
    "The output is shown in the figure below. We can see that there are warning messages with recommendations for changes in the code, but these warnings do not affect the functionality of the app. There is also a warning that this is a development server, which is primarily intended fro testing and debugging purposes. If we would like to deploy the web application in production, we will need to use WSGI (Web Server Gateway Interface) server that is designed to handle a large number of requests and is optimized fro performance and scalability. \n",
    "\n",
    "We can also see that the server is running in debug mode on `http://127.0.01:5000/` (given with the IP Address:Port). \n",
    "\n",
    "To start the application on the local machine, we can either click on the URL `http://127.0.01:5000/`, or we can copy and paste the URL into a web browser."
   ]
  },
  {
   "cell_type": "markdown",
   "id": "53e02a32",
   "metadata": {},
   "source": [
    "<img src=\"images/run_server.png\" width=\"1000\">\n",
    "\n",
    "*Figure: Run the application.*"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "4ff97b17",
   "metadata": {},
   "source": [
    "The following are screenshots of the application for one example and the predicted iris class is Setosa."
   ]
  },
  {
   "cell_type": "markdown",
   "id": "d5aea743",
   "metadata": {},
   "source": [
    "<img src=\"images/sample_1.png\" width=\"350\">\n",
    "\n",
    "<img src=\"images/sample_2.png\" width=\"350\">\n",
    "\n",
    "*Figure: Entered inputs and predicted class.*"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "5f922827",
   "metadata": {},
   "source": [
    "The folder structure is as follows:\n",
    "```\n",
    "Iris-API\n",
    "    ├── iris.csv\n",
    "    ├── model.py\n",
    "    ├── app.py\n",
    "    ├── templates\n",
    "    │   ├── index.html\n",
    "    │   ├── output.html\n",
    "```\n"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "0c667d90-6a92-4db8-b1f0-0f7826606102",
   "metadata": {},
   "source": [
    "## 25.3 Deploying a Model for MNIST Digits Classification <a id=\"25.3-deploying-a-model-for-mnist-digits-classification\"/>"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "53c2572c-0064-47b6-8db8-cc7ed4856d35",
   "metadata": {},
   "source": [
    "In this section we will create another web API for classification of MNIST digits. Differently from the previous section, we will use a Convolutional Neural Network model, as well as we will save the trained model and use it for prediction. The code in mostly based on this section from the following blog: [Deploying Deep Learning Models Part 1: Preparing the Model](https://blog.paperspace.com/deploying-deep-learning-models-flask-web-python/)."
   ]
  },
  {
   "cell_type": "markdown",
   "id": "adbebcbb-10a6-4ac7-b451-82c792c56bed",
   "metadata": {},
   "source": [
    "### 25.3.1 Model Training and Saving <a id=\"25.3.1-model-training-and-saving\"/>"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "144a03e6-97ed-4a8e-a102-86fcaa0ef196",
   "metadata": {},
   "source": [
    "We will first load the MNIST dataset, and we will create a simple Convolutional Neural Network for classification of the digit images in the dataset."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 1,
   "id": "15c3791f-474c-4707-9764-67acf84f3fab",
   "metadata": {
    "tags": []
   },
   "outputs": [],
   "source": [
    "import tensorflow\n",
    "from tensorflow import keras\n",
    "from keras.datasets import mnist\n",
    "from keras.models import Model\n",
    "from keras.layers import Input, Dense, Dropout, Flatten, Conv2D, MaxPooling2D"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 2,
   "id": "02b6fed1-2695-43d8-8f44-95f70b5c0e1f",
   "metadata": {
    "tags": []
   },
   "outputs": [],
   "source": [
    "# Load the data\n",
    "(x_train, y_train), (x_test, y_test) = mnist.load_data()"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 3,
   "id": "f4954509-4f76-4bfc-8651-94507a74a410",
   "metadata": {
    "tags": []
   },
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "x_train shape: (60000, 28, 28)\n",
      "60000 train samples\n",
      "10000 test samples\n"
     ]
    }
   ],
   "source": [
    "# Scale the images to the range [0,1]\n",
    "x_train = x_train.astype('float32')\n",
    "x_test = x_test.astype('float32')\n",
    "x_train /= 255\n",
    "x_test /= 255\n",
    "\n",
    "# Print the shape and number of samples\n",
    "print('x_train shape:', x_train.shape)\n",
    "print(x_train.shape[0], 'train samples')\n",
    "print(x_test.shape[0], 'test samples')"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 5,
   "id": "ccc163fd-af4f-4859-87b2-245bb214392a",
   "metadata": {
    "tags": []
   },
   "outputs": [],
   "source": [
    "# Define the layers in the model\n",
    "inputs = Input(shape=(28, 28, 1))\n",
    "conv1a = Conv2D(filters=32, kernel_size=3, padding='same')(inputs)\n",
    "conv1b = Conv2D(filters=64, kernel_size=3, padding='same')(conv1a)\n",
    "pool1 = MaxPooling2D()(conv1b)\n",
    "flat = Flatten()(pool1)\n",
    "dense1 = Dense(128, activation='relu')(flat)\n",
    "dropout1 = Dropout(0.5)(dense1)\n",
    "outputs = Dense(10, activation='softmax')(dropout1)\n",
    "\n",
    "# Define the model with inputs and outputs\n",
    "model = Model(inputs, outputs)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 6,
   "id": "1cb5d03c-9755-4fc6-93fb-b879f239946b",
   "metadata": {
    "tags": []
   },
   "outputs": [
    {
     "data": {
      "text/plain": [
       "<keras.src.callbacks.History at 0x1bcccb76090>"
      ]
     },
     "execution_count": 6,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "# Compile and train the model\n",
    "model.compile(loss='sparse_categorical_crossentropy',\n",
    "              optimizer='adam',\n",
    "              metrics=['accuracy'])\n",
    "\n",
    "model.fit(x_train, y_train, batch_size=128, epochs=5, verbose=0)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 7,
   "id": "a6735f8f-4d38-494d-b512-c9b423c46190",
   "metadata": {
    "tags": []
   },
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "Test accuracy: 0.9840999841690063\n"
     ]
    }
   ],
   "source": [
    "# Evaluate on test dataset\n",
    "score = model.evaluate(x_test, y_test, verbose=0)\n",
    "print('Test accuracy:', score[1])"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "0281b24b-9238-4e98-b1c3-519ca41e6320",
   "metadata": {},
   "source": [
    "Next, we will save the model using the Keras-TensorFlow SaveModel format. We will use the saved model to make predictions in the web application without retraining the model, since training the model takes time and there is no need to train a new model every time the end-users need to make predictions."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 8,
   "id": "933d1adb-83c4-47c6-8305-167d585d681b",
   "metadata": {
    "tags": []
   },
   "outputs": [],
   "source": [
    "# save the model to a file\n",
    "model.save(\"mnist_model.keras\")"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "b4ad318b-f87c-40c4-9858-d1e3956983d8",
   "metadata": {},
   "source": [
    "To make predictions, we can load the model and compile it, as in the following cell. "
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 9,
   "id": "2d8132eb-1d1b-4fe1-9392-8de85c9a084e",
   "metadata": {
    "tags": []
   },
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "Test accuracy: 0.9840999841690063\n"
     ]
    }
   ],
   "source": [
    "from tensorflow.keras.models import load_model\n",
    "\n",
    "# load the weights into new model\n",
    "loaded_model = load_model(\"mnist_model.keras\")\n",
    "\n",
    "# Compile and evaluate loaded model\n",
    "loaded_model.compile(loss='sparse_categorical_crossentropy', optimizer='adam', metrics=['accuracy'])\n",
    "\n",
    "# Evaluate on test dataset\n",
    "score = loaded_model.evaluate(x_test, y_test, verbose=0)\n",
    "print('Test accuracy:', score[1])"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "f86fe080-7b20-4c38-b48c-6682923d1939",
   "metadata": {},
   "source": [
    "### 25.3.2 Creating a Flask App <a id=\"25.3.2-creating-a-flask-app\"/>"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "d5601a2c-1324-4ad1-81c7-28f6133b8c21",
   "metadata": {},
   "source": [
    "To deploy the model we will create the `app.py` file, similarly to the Flask file in the previous section.\n",
    "\n",
    "We will define again two routes in the Flask app:\n",
    "\n",
    "- An index (home) page route `'/'`, for the users to draw a digit image.\n",
    "- A predict route `'/predict'`, to predict the class of the digit with the saved model.\n",
    "\n",
    "In the next cell, we first import the required libraries, and an `app` object is created that is an instance of the Flask class. "
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "a9cac46b-81bb-4c28-a6cd-c4bb1c15e404",
   "metadata": {},
   "outputs": [],
   "source": [
    "from flask import Flask, render_template, request\n",
    "from tensorflow.keras.models import load_model\n",
    "from PIL import Image\n",
    "import numpy as np\n",
    "import re\n",
    "import base64\n",
    "\n",
    "# Initialize the flask class and specify the templates directory\n",
    "app = Flask(__name__, template_folder=\"templates\")"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "a0c63693-8165-4225-8089-31e3184ed85f",
   "metadata": {},
   "source": [
    "Similar to the previous example, we define the home page route using the `@app.route` decorator, and pass the URL of the main page of the web application `index.html`. "
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "20768f4c-1418-443c-86f5-82808832b980",
   "metadata": {},
   "outputs": [],
   "source": [
    "# Default route set as 'index'\n",
    "@app.route('/')\n",
    "def index_view():\n",
    "    return render_template('index.html')"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "8edb8053-e532-43ac-a67b-31aee639fa64",
   "metadata": {},
   "source": [
    "The `'/predict'` route is shown next, which gets the image of a digit drawn by the user, and it first applies image resizing and reshaping, and afterward the saved model is used to predict the digit class. Output is the `response` variable that returns a string of the predicted class. "
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "1c3c00d8-d99b-433f-8398-6bad30f4581c",
   "metadata": {},
   "outputs": [],
   "source": [
    "# Route 'predict' \n",
    "@app.route('/predict', methods=['GET', 'POST'])\n",
    "def predict_class():\n",
    "    \n",
    "    # Get the drawn image\n",
    "    imgData = request.get_data()\n",
    "    \n",
    "    # Convert the image into a png file\n",
    "    convertImage(imgData)\n",
    "\n",
    "    # Open the png file    \n",
    "    x = Image.open('output.png')\n",
    "\n",
    "    # Resize the image to 28x28 pixels      \n",
    "    x = x.resize((28,28))\n",
    "\n",
    "    # Invert the image into black background and white foreground    \n",
    "    x = np.invert(x)\n",
    "\n",
    "    # Reshape into a batch with one image    \n",
    "    x = x[:,:,0].reshape(1, 28, 28, 1)\n",
    "    \n",
    "    # Scale to the range [0,1]\n",
    "    x = x/255\n",
    "    \n",
    "    # Make a prediction\n",
    "    out = model.predict(x)\n",
    "    \n",
    "    # Get the predicted digit\n",
    "    response = np.array_str(np.argmax(out, axis=1))\n",
    "    \n",
    "    return response\t"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "2ae1f07a-a4f2-49e5-9766-c23c64f8b29f",
   "metadata": {},
   "source": [
    "And finally, we run the app in debug mode. "
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "32132bef-0b02-423f-a680-e1da1e3257ba",
   "metadata": {},
   "outputs": [],
   "source": [
    "# Run the Flask server\n",
    "if __name__ == '__main__':\n",
    "    app.run(debug=True)"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "e7321f8c-a7f5-4d4b-a690-81acd4f315cd",
   "metadata": {},
   "source": [
    "The organization of the directory of the web application is shown below. Beside the `app.py`, the main directory also contains the saved model `mnist_model.keras` and the image drawn by the users saved as `output.png`. The `templates` sub-directory contains the `index.html` and `draw.html` pages. In the `static` folder, a JavaScript file `index.js` is used to render a canvas for drawing digits by the users, and `style.css` is a stylesheet for the web application.  \n",
    "\n",
    "```\n",
    "MNIST-API\n",
    "    ├── app.py\n",
    "    ├── mnist_model.keras\n",
    "    ├── output.png\n",
    "    ├── templates\n",
    "    │   ├── index.html\n",
    "    │   ├── draw.html\n",
    "    ├── static\n",
    "    │   ├── index.js\n",
    "    │   ├── style.css\n",
    "```"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "d29cfef9-feb7-4469-a340-119a17412190",
   "metadata": {},
   "source": [
    "### 25.3.3 Run the Web Application <a id=\"25.3.3-run-the-web-application\"/>"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "e9b80d7f-b20b-4fe9-913a-a7d2c6ad2791",
   "metadata": {},
   "source": [
    "We can run the application using `python app.py`, and we will click on the URL `http://127.0.0.1:5000/` to access the web API shown below. We can use the mouse pointer to draw digits, and the `Predict` button will display the Predicted Output by the model. The `Clear` button allows to draw again and make a new prediction."
   ]
  },
  {
   "cell_type": "markdown",
   "id": "288b5c11-859a-439e-9666-41e6d36c8748",
   "metadata": {},
   "source": [
    "<img src=\"images/mnist_run.png\" width=\"1000\">\n",
    "\n",
    "<img src=\"images/mnist_prediction.png\" width=\"400\">\n",
    "\n",
    "*Figure: Run the web application.*"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "29589d6a-33b0-4161-b4d4-59d02d134814",
   "metadata": {},
   "source": [
    "## Appendix  <a id=\"appendix\"/>"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "f3221988-fe04-4e04-b128-bee3e93b2155",
   "metadata": {},
   "source": [
    "**The material in the Appendix is not required for quizzes and assignments.**"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "56bc7218-5bbe-4097-b758-3e03bba31bd4",
   "metadata": {},
   "source": [
    "### Deploying a Model with Fast API"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "a8a97bb1-9c6f-4d2e-99e8-8046728d3401",
   "metadata": {},
   "source": [
    "This section explains how to develop a RESTful API for classification of Iris flowers with the Fast API library. \n",
    "\n",
    "Before we try to develop the API, we need to install the required libraries with `pip install, fastapi, python-multipart, uvicorn`.\n",
    "\n",
    "The code for the `app.py` server in Fast API is shown below.\n",
    "\n",
    "First, we import modules from Fast API for handling HTTP requests and exceptions, and for template rendering. \n",
    "\n",
    "Next, we instantiate the `app` web application from the `FastAPI()` class. And we define the directory with the HTML templates. Fast API uses Jinja2 for template rendering, allowing to create dynamic HTML pages.\n",
    "\n",
    "Similar to the Flask app, in Fast API we use the `@app.get('/')` decorator to associate the HTTP GET method with the default home page of the application. In Fast API, the `Request` class is used to handle the incoming requests, where `request` is an instance that contains the information about the HTTP request. The `index_view` function will render a template of the `index.html` file and will pass the `request` object to it.  \n",
    "\n",
    "The `'/predict'` route will handle the GET request. The `predict_class` function retrieves the input values `slen`, `swid`, `plen`, and `pwid` and calls `model.classify()` to predict the variety of the Iris flower. If there are no errors, the function will render a template of the `output.html` file and will pass the `variety` to be displayed to the user.\n",
    "\n",
    "Finally, the web application is run using the `uvicorn` server. UVicorn is the default server for Fast API in Python. \n",
    "\n",
    "The code for the Fast API app is similar to the Flask app, but there are several differences in the syntax and the implementation. "
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "0e0743e8-12e2-40ad-b64b-96c6a6e21054",
   "metadata": {},
   "outputs": [],
   "source": [
    "# Import libraries\n",
    "from fastapi import FastAPI, Request, Depends, Form, HTTPException\n",
    "from fastapi.templating import Jinja2Templates\n",
    "from typing import Optional\n",
    "import model\n",
    "\n",
    "# Initialize the FastAPI class and specify the templates directory\n",
    "app = FastAPI()\n",
    "templates = Jinja2Templates(directory=\"templates\")\n",
    "\n",
    "# Default route set as 'index'\n",
    "@app.get('/')\n",
    "def index_view(request: Request):\n",
    "    return templates.TemplateResponse(\"index.html\", {\"request\": request})\n",
    "\n",
    "# Route 'predict' accepts GET request\n",
    "@app.get('/predict')\n",
    "def predict_class(request: Request, \n",
    "                  slen: Optional[float] = None, \n",
    "                  swid: Optional[float] = None, \n",
    "                  plen: Optional[float] = None, \n",
    "                  pwid: Optional[float] = None):\n",
    "    try:\n",
    "        # Get the output from the classification model\n",
    "        variety = model.classify(slen, swid, plen, pwid)\n",
    "\n",
    "        # Render the output in a new HTML page\n",
    "        return templates.TemplateResponse(\"output.html\", {\"request\": request, \"variety\": variety})\n",
    "    except Exception as e:\n",
    "        raise HTTPException(status_code=500, detail=f\"An error occurred: {str(e)}\")\n",
    "\n",
    "# Run the FastAPI server\n",
    "if __name__ == '__main__':\n",
    "    import uvicorn\n",
    "    uvicorn.run(app)"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "f9a59b56-de67-44a7-a6f8-28813ff34cd0",
   "metadata": {},
   "source": [
    "### Deploying a Model with Django"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "708c34bc-b71e-48a1-a457-790d97aea288",
   "metadata": {},
   "source": [
    "The corresponding code for developing a RESTful API for classification of Iris flowers with the Django library is shown below.\n",
    "\n",
    "The code is similar to the apps in Flask and Fast API. The functions `index_view` and `predict_class` define the rendering of the home page and the predicted outputs by the model. \n",
    "\n",
    "The URL patterns define that the root path maps to the `index_view` function, and the `'predict'` path maps to the `predict_class` function.\n",
    "\n",
    "The last part of the code defines the configuration settings and the execution of the server with `app.py runserver`."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "95c09cb1-2999-41e7-a7c1-9d034c2e6b91",
   "metadata": {},
   "outputs": [],
   "source": [
    "from django.shortcuts import render\n",
    "from django.http import HttpResponse\n",
    "from django.urls import path\n",
    "import model\n",
    "\n",
    "# Default route set as 'index'\n",
    "def index_view(request):\n",
    "    return render(request, 'index.html')\n",
    "\n",
    "# Route 'predict' accepts GET request\n",
    "def predict_class(request):\n",
    "    try:\n",
    "        slen = float(request.GET.get('slen'))\n",
    "        swid = float(request.GET.get('swid'))\n",
    "        plen = float(request.GET.get('plen'))\n",
    "        pwid = float(request.GET.get('pwid'))\n",
    "\n",
    "        # Get the output from the classification model\n",
    "        variety = model.classify(slen, swid, plen, pwid)\n",
    "\n",
    "        # Render the output in a new HTML page\n",
    "        return render(request, 'output.html', {'variety': variety})\n",
    "    except Exception as e:\n",
    "        return HttpResponse(f\"An error occurred: {str(e)}\", status=500)\n",
    "\n",
    "# URL patterns define which function is called for specific URL paths\n",
    "urlpatterns = [path('', index_view),\n",
    "    path('predict/', predict_class)]\n",
    "\n",
    "# Django settings and execution\n",
    "if __name__ == '__main__':\n",
    "    from django.conf import settings\n",
    "\n",
    "    # Define the templates directory and debug mode    \n",
    "    settings.configure(\n",
    "        DEBUG=True,\n",
    "        ROOT_URLCONF=__name__,\n",
    "        TEMPLATES=[\n",
    "            {\n",
    "                'BACKEND': 'django.template.backends.django.DjangoTemplates',\n",
    "                'DIRS': ['templates'],\n",
    "                'APP_DIRS': True,\n",
    "            },\n",
    "        ],\n",
    "    )\n",
    "\n",
    "    # Execute the server from the command line    \n",
    "    import django\n",
    "    django.setup()\n",
    "\n",
    "    from django.core.management import execute_from_command_line\n",
    "\n",
    "    execute_from_command_line(['app.py', 'runserver'])"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "389368f9",
   "metadata": {},
   "source": [
    "## References <a id=\"references\"/>\n",
    "\n",
    "1. Deploying Machine Learning Models using Flask, by Srishilesh P S, available at [https://www.section.io/engineering-education/deploying-machine-learning-models-using-flask/](https://www.section.io/engineering-education/deploying-machine-learning-models-using-flask/).\n",
    "2. Deploying Deep Learning Models Part 1: Preparing the Model, by Vihar Kurama, available at: [https://blog.paperspace.com/deploying-deep-learning-models-flask-web-python/](https://blog.paperspace.com/deploying-deep-learning-models-flask-web-python/).\n",
    "3. Python and REST APIs: Interacting With Web Service, by Jason Van Schooneveld, available at [https://realpython.com/api-integration-in-python/](https://realpython.com/api-integration-in-python/).\n",
    "4. Getting Started with RESTful APIs and Fast API, by Sunil Kumar Dash, available at [https://www.analyticsvidhya.com/blog/2022/08/getting-started-with-restful-apis-and-fast-api/](https://www.analyticsvidhya.com/blog/2022/08/getting-started-with-restful-apis-and-fast-api/)."
   ]
  },
  {
   "cell_type": "markdown",
   "id": "3e12fc40",
   "metadata": {},
   "source": [
    "[BACK TO TOP](#top)"
   ]
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Python 3 (ipykernel)",
   "language": "python",
   "name": "python3"
  },
  "language_info": {
   "codemirror_mode": {
    "name": "ipython",
    "version": 3
   },
   "file_extension": ".py",
   "mimetype": "text/x-python",
   "name": "python",
   "nbconvert_exporter": "python",
   "pygments_lexer": "ipython3",
   "version": "3.11.5"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 5
}