feat: add lesson three and flask-api

Author: BolajiAyodeji

README.md

@@ -2,19 +2,18 @@
 
 One essential and last phase of the CRISP-DM data framework is deployment. The key focus in this phase is the usability of the developed model by intended users or customers. Depending on the type of solution and use case, this can involve deploying and integrating the model on any medium like the web, a mobile application, a hardware-embedded system, etc. While this might "sound easy,” many beginner ML engineers find it daunting to deploy their projects on the web for their intended users to test and for their solutions to solve their users' problems.
 
-In this workshop, Bolaji will introduce you to ML model deployment by showing you the steps and processes involved with turning a machine learning model into an API with Python and Flask, testing the API, building a web application, and deploying it to the cloud for global usage. We would also discuss several other alternative JavaScript frameworks and tools you can consider.
+In this workshop, Bolaji will introduce you to machine learning model deployment by showing you the steps and processes involved with turning a machine learning model into an API with Python and Flask,  testing the API with Postman, building a web application, and deploying it to the cloud for global usage. We would also discuss several other alternative Python/JavaScript frameworks and tools to consider.
 
 ---
 
-This repository contains the workshop materials, lesson notes, machine learning model notebook, serilized model, web application code, and links to further resources. You can follow the workshop lessons and build the project yourself or use the materials to learn at your own pace.
+This repository contains the workshop materials, lesson notes, machine learning model notebooks, serilized models, backend API/web application code, and links to further resources. You can follow the workshop lessons and build the project yourself or use the materials to learn at your own pace.
 
 In this workshop, we will build the following:
 
-- A simple machine learning model that predicts the personality type of an individual based off their messages in conversations using Python, Scikit-learn, and other libraries.
-- A web application and API that consumes the model using HTML, CSS, JavaScript, and Flask.
-- A web application and API that consumes the model using HTML, CSS, JavaScript, Nextjs, and Flask.
-- A web application and API that consumes the model using HTML, CSS, JavaScript, and FastAPI.
-- A web application and API that consumes the model using HTML, CSS, JavaScript, Nextjs, and FastAPI.
+- A simple machine learning model that predicts the personality type of an individual using Python, Scikit-learn, and other libraries.
+- A backend and API for the model using Python and Flask.
+- A web application that consumes the model/API using HTML, CSS, JavaScript, and Flask.
+- A web application and API that consumes the model/API using HTML, CSS, JavaScript, Nextjs, and Flask.
 - An AI web application using Nextjs and OpenAPI.
 
 [Demo GIF]
@@ -35,19 +34,19 @@ In this workshop, we will build the following:
 
 ## 🎧 Overview
 
-Workshop duration: three (3) hours.
+Workshop duration: ~three (3) hours.
 
 At the end of this workshop; you should be able to:
 
 - Explain what machine learning and a machine learning model are to your friends and family.
 - Understand how the CRISP-DM data framework works.
 - Understand the fundamentals of building a machine learning model using the Python programming language.
-- Understand how to export and serialize a machine learning model.
+- Understand how to serialize (export/import) a machine learning model.
 - Understand how to turn a machine learning model into an API using the Flask Python framework.
-- Understand how to build a web application using the FastAPI Python framework.
--
+- Understand how to build a web application using the Flask Python framework.
 - Understand how to build a web application using the Nextjs JavaScript framework.
-- Understand how to deploy a web application to the cloud using Fly.
+- Understand how to deploy a Python/Flask application to the cloud using Fly.
+- Understand how to deploy a Nextjs/Flask application to the cloud using Vercel.
 
 ---
 
@@ -73,7 +72,7 @@ To make the workshop a smooth process, we will use [Google Colab](https://colab.
 
 But if you prefer local (I strongly advise against this; at least for this workshop), you should install [Anancoda](https://anaconda.com/download?utm_source=ba-deploy-ml-web-workshop) to use Jupyter Notebook on your local computer. You will need to install and import all the required packages yourself too and resolve any conflicts that might arise.
 
-> **Note**
+> [!NOTE]
 >
 > [Jupyter Notebooks](https://jupyter.org?utm_source=ba-deploy-ml-web-workshop) allow you to combine executable code and rich text in a single document, along with images, HTML, LaTeX, and more.
 
@@ -86,9 +85,10 @@ You should have the following software and packages installed on your computer.
 <summary>Git and GitHub</summary>
 <br />
 
-> [Git](https://github.com/pallets/flask?utm_source=ba-deploy-ml-web-workshop) is a free and open-sourced distributed version control system.
->
-> [GitHub](https://github.com?utm_source=ba-deploy-ml-web-workshop) is a code hosting platform for version control and collaboration.
+We will install/use the following packages:
+
+- [Git](https://github.com/pallets/flask?utm_source=ba-deploy-ml-web-workshop): a free and open-sourced distributed version control system.
+- [GitHub](https://github.com?utm_source=ba-deploy-ml-web-workshop): a code hosting platform for version control and collaboration.
 
 Download and install Git from [this website](https://git-scm.com/downloads?utm_source=ba-deploy-ml-web-workshop) for all operating systems or follow this [installation guide](https://git-scm.com/book/en/v2/Getting-Started-Installing-Git?utm_source=ba-deploy-ml-web-workshop).
 
@@ -102,80 +102,80 @@ git --version
 
 Next, create a [free GitHub account](https://github.com/signup?utm_source=ba-deploy-ml-web-workshop) if you don't have one already.
 
-> **Note**
+> [!NOTE]
 >
 > Bonus: If you're a student, you should check out the [GitHub Student Developer Pack](https://education.github.com/pack?utm_source=ba-deploy-ml-web-workshop), which gives students free access to the best developer tools (paid tools/services/courses for free) in one place so they can learn by doing.
 
 </details>
 
 <details>
 
-<summary>Python 3 and PIP</summary>
+<summary>Postman Desktop App or VSCode Extension</summary>
 <br />
 
-> [Python](https://python.org?utm_source=ba-deploy-ml-web-workshop) is a general-purpose programming language that lets you work quickly and integrate systems more effectively.
->
-> [PIP](https://pypi.org/project/pip?utm_source=ba-deploy-ml-web-workshop) is a package manager for installing Python packages or modules.
-
-Download and install Python 3 from [this website](https://python.org/downloads?utm_source=ba-deploy-ml-web-workshop) for all operating systems or follow this [installation guide](https://realpython.com/installing-python?utm_source=ba-deploy-ml-web-workshop).
-
-Once installed successfully, confirm the version using the command:
-
-```bash
-python --version
-
-or
-
-python3 --version
-```
-
-If Python is installed correctly, you should have PIP installed. If it isn't, follow the steps in [this guide](https://pip.pypa.io/en/stable/installation?utm_source=ba-deploy-ml-web-workshop) to install PIP.
+We will install any of the following:
 
-Hint:
+- [Postman Desktop App](https://github.com/pallets/flask?utm_source=ba-deploy-ml-web-workshop): a desktop that allows you use Postman to send API requests.
+- [Postman VSCode Extension](https://github.com?utm_source=ba-deploy-ml-web-workshop): a VSCode extension that allows you use Postman to send API requests from within VS Code.
 
-```bash
-python get-pip.py
-```
+Download and install the Postman Desktop Client or VSCode Extension from [this website](https://www.postman.com/downloads?utm_source=ba-deploy-ml-web-workshop) for all operating systems.
 
 </details>
 
 <details>
 
-<summary>Flask</summary>
+<summary>Python and PIP</summary>
 <br />
 
-> [Flask](https://github.com/pallets/flask?utm_source=ba-deploy-ml-web-workshop) is a lightweight Python micro framework for building web applications.
+We will install the following packages:
 
-Install Flask using the command below:
+- [Python](https://python.org?utm_source=ba-deploy-ml-web-workshop): a general-purpose programming language that lets you work quickly and integrate systems more effectively.
+- [PIP](https://pypi.org/project/pip?utm_source=ba-deploy-ml-web-workshop): a package manager for installing Python packages or modules.
 
-```bash
-pip install -U Flask
-```
+Download and install Python 3 (`>3.10.12`) from [this website](https://python.org/downloads?utm_source=ba-deploy-ml-web-workshop) for all operating systems (this will come with PIP in-built).
+
+> [!IMPORTANT]
+>
+> Please specifically download and install a version `3.10.12` or higher (I'm using `3.11.5`). Google Colab will install version `3.10.12` which we will use to develope a machine learning model and anything less on your local machine will result in errors when using the serilized model.
 
 Once installed successfully, confirm the version using the command:
 
 ```bash
-flask --version
+python3 --version
 ```
 
+If Python is installed correctly, you should have PIP installed. If it isn't, follow the steps in [this guide](https://pip.pypa.io/en/stable/installation?utm_source=ba-deploy-ml-web-workshop) to install PIP.
+
 </details>
 
 <details>
-<summary>FastAPI</summary>
+
+<summary>Other Python Packages</summary>
 <br />
 
-> [FastAPI](https://github.com/tiangolo/fastapi?utm_source=ba-deploy-ml-web-workshop) is a a modern, fast (high-performance), web framework for building APIs with Python 3.7+ based on standard Python type hints.
+We will install the following packages:
 
-Install FastAPI and the required [Uvicorn](https://uvicorn.org?utm_source=ba-deploy-ml-web-workshop) ASGI server using the command below:
+- [Python Dotenv](https://pypi.org/project/python-dotenv?utm_source=ba-deploy-ml-web-workshop): a package that reads key-value pairs from a `.env` file and can set them as environment variables.
+- [Scikit-Learn](https://scikit-learn.org/stable?utm_source=ba-deploy-ml-web-workshop): a free software machine learning library for the Python programming language, including various classification, regression, and clustering algorithms.
+- [Flask](https://github.com/pallets/flask?utm_source=ba-deploy-ml-web-workshop): a lightweight Python micro framework for building web applications.
+- [FastAPI](https://github.com/tiangolo/fastapi?utm_source=ba-deploy-ml-web-workshop): a modern and fast web framework for building APIs with Python 3.7+ (with the required [Uvicorn](https://uvicorn.org?utm_source=ba-deploy-ml-web-workshop) ASGI server).
+
+Install all of them using the command below:
 
 ```bash
-pip install fastapi "uvicorn[standard]"
+pip3 install python-dotenv scikit-learn flask fastapi "uvicorn[standard]"
 ```
 
 Once installed successfully, confirm the version using the command:
 
 ```bash
-pip show fastapi
+pip3 show python-dotenv
+
+pip3 show scikit-learn
+
+pip3 show flask
+
+pip3 show fastapi
 
 uvicorn --version
 ```
@@ -187,9 +187,10 @@ uvicorn --version
 <summary>Nodejs and NPM</summary>
 <br />
 
-> [Nodejs](https://nodejs.org?utm_source=ba-deploy-ml-web-workshop) is an open-source, cross-platform JavaScript runtime environment.
->
-> [NPM](https://npmjs.com?utm_source=ba-deploy-ml-web-workshop) is a package manager for installing JavaSript packages or modules.
+We will install the following packages:
+
+- [Nodejs](https://nodejs.org?utm_source=ba-deploy-ml-web-workshop): an open-source, cross-platform JavaScript runtime environment.
+- [NPM](https://npmjs.com?utm_source=ba-deploy-ml-web-workshop): a package manager for installing JavaSript packages or modules.
 
 Download and install Nodejs and NPM from [this website](https://nodejs.org/en/download?utm_source=ba-deploy-ml-web-workshop) for all operating systems or follow this [installation guide](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm?utm_source=ba-deploy-ml-web-workshop).
 
@@ -205,14 +206,15 @@ npm --version
 
 <details>
 
-<summary>Reactjs 18 and Nextjs 13</summary>
+<summary>Reactjs and Nextjs</summary>
 <br />
 
-> [Reactjs](https://react.dev?utm_source=ba-deploy-ml-web-workshop) is an open-source web and native JavaScript library for building user interfaces.
->
-> [Nextjs](https://nextjs.org?utm_source=ba-deploy-ml-web-workshop) is an open-source React web development framework.
+We will install the following packages:
+
+- [Reactjs](https://react.dev?utm_source=ba-deploy-ml-web-workshop): an open-source web and native JavaScript library for building user interfaces.
+- [Nextjs](https://nextjs.org?utm_source=ba-deploy-ml-web-workshop): an open-source React web development framework.
 
-Automatically create a project with the latest version of Reactjs and Nextjs using the `create-next-app` command below:
+Automatically create a project with the latest version of Reactjs18 and Nextjs13 using the `create-next-app` command below:
 
 ```bash
 npx create-next-app@latest
@@ -225,15 +227,13 @@ Consider reading Reactjs's [installation guide](https://react.dev/learn/installa
 ## 👨🏾‍🏫 Workshop Lessons
 
 1. [Introduction to Machine Learning](./lessons/01.md)
-2. [Building a ML Model with Python]()
-3. [Turning a ML Model into an API —Flask]()
-4. [Turning a ML Model into an API —FastAPI]()
-5. [Overview of Alternative Frameworks]()
-6. [Building a Web Application for the ML Model —Flask/FastAPI]()
-7. [Building a Web Application for the ML Model —JavaScript/Nextjs]()
-8. [Deploying the Web Application to the Cloud]()
-9. Bonus: [Building a ML Model with JavaScript/Tensorflow]()
-10. Bonus: [Building Web AI Applications with Pre-trained Models (LLMs) and Vercel AI SDK]()
+2. [Building a ML Model with Python](./lessons/02.md)
+3. [Building an API for the ML Model](./lessons/03.md)
+4. [Building a Web Application for the API]()
+4. [Overview of Alternative Frameworks]()
+5. [Building a Nextjs Web Application for the ML Model]()
+6. [Deploying the API and Web Application to the Cloud]()
+7. Bonus: [Building Web AI Applications with Pre-trained Models (LLMs) and Vercel AI SDK]()
 
 ## 🚀 What's Next?
 
@@ -248,6 +248,8 @@ Consider reading Reactjs's [installation guide](https://react.dev/learn/installa
 - [How to Deploy a Machine Learning Model to the Web](https://blog.bolajiayodeji.com/how-to-deploy-a-machine-learning-model-to-the-web?utm_source=ba-deploy-ml-web-workshop)
 - [Google's Machine Learning Crash Course](https://developers.google.com/machine-learning/crash-course?utm_source=ba-deploy-ml-web-workshop)
 - [Google's Machine Learning Glossary](https://developers.google.com/machine-learning/glossary?utm_source=ba-deploy-ml-web-workshop)
+- [Flask Quickstart Guide](https://flask.palletsprojects.com/en/2.3.x/quickstart?utm_source=ba-deploy-ml-web-workshop)
+- [Handling Flask Application Errors](https://flask.palletsprojects.com/en/2.3.x/errorhandling?utm_source=ba-deploy-ml-web-workshop)
 
 ## 👩🏽‍💻 Contributors Guide
 

app/flask-api/__pycache__/app.cpython-311.pyc

@@ -0,0 +1,65 @@
+from flask import Flask, request, render_template, jsonify
+import pickle
+
+# Create an instance of the Flask class
+# with the name of the application’s modules
+app = Flask(__name__, template_folder='templates')
+
+# Create the / API route and render the root HTML page
+@app.route('/', methods=['GET'])
+def main():
+    return(render_template('main.html'))
+
+# Create the /predict API route
+@app.route('/predict', methods=['GET', 'POST'])
+def predict():
+    # Use pickle to load in vectorizer
+    with open(f'../../model/two/vectorizer.pkl', 'rb') as f:
+        vectorizer = pickle.load(f)
+
+    # Use pickle to load in the pre-trained model
+    with open(f'../../model/two/model.pkl', 'rb') as f:
+        model = pickle.load(f)
+    
+    # Get the message from the API request
+    message = request.args.get('message')
+
+    if request.method == 'GET' and message != None:
+        mbpti_types = {
+            0: "ENFJ (Extroversion, Intuition, Feeling, Judging)",
+            1: "ENFP (Extroversion, Intuition, Feeling, Perceiving)",
+            2: "ENTJ (Extroversion, Intuition, Thinking, Judging)",
+            3: "ENTP (Extroversion, Intuition, Thinking, Perceiving)",
+            4: "ESFJ (Extroversion, Sensing, Feeling, Judging)",
+            5: "ESFP (Extroversion, Sensing, Feeling, Perceiving)",
+            6: "ESTJ (Extroversion, Sensing, Thinking, Judging)",
+            7: "ESTP (Extroversion, Sensing, Thinking, Perceiving)",
+            8: "INFJ (Introversion, Intuition, Feeling, Judging)",
+            9: "INFP (Introversion, Intuition, Feeling, Perceiving)",
+            10: "INTJ (Introversion, Intuition, Thinking, Judging)",
+            11: "INTP (Introversion, Intuition, Thinking, Perceiving)",
+            12: "ISFJ (Introversion, Sensing, Feeling, Judging)",
+            13: "ISFP (Introversion, Sensing, Feeling, Perceiving)",
+            14: "ISTJ (Introversion, Sensing, Thinking, Judging)",
+            15: "ISTP (Introversion, Sensing, Thinking, Perceiving)"
+            }
+
+        prediction = model.predict(vectorizer.transform([message]))
+        result = mbpti_types[prediction[0]]
+
+        data = {
+            "message": message,
+            "prediction": result
+        }
+        return jsonify(data)
+    
+    else :
+        data = {
+            "code": 400,
+            "description": "Bad Request. No message was provided.",
+            "message": "Use the message parameter to make a GET request."
+        }
+        return jsonify(data), 400
+
+if __name__ == '__main__':
+    app.run()

app/flask-api/__pycache__/app.cpython-39.pyc

@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>MBPTI Personality Test Checker API</title>
+    <link
+      rel="shortcut icon"
+      type="image/png"
+      href="https://bolajiayodeji.com/favicon.png"
+    />
+    <link
+      href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css"
+      rel="stylesheet"
+    />
+  </head>
+
+  <body class="font-mono">
+    <div class="flex items-center justify-center h-screen">
+      <div
+        class="p-12 max-w-xl bg-gray-200 rounded-lg overflow-hidden shadow-lg"
+      >
+        <div class="font-bold text-xl mb-2 text-center">
+          MBPTI Personality Test Checker API
+        </div>
+        <hr class="border-1 border-black mb-8" />
+
+          <div class="mt-12 text-center">
+            <p>
+            Use the /predict API route to make a GET request and pass in the data with a ?message=
+            parmeter like so:
+          </p>
+          <br /><br />
+          <a
+            class="text-gray-700 text-center"
+            href="http://127.0.0.1:5000/predict?message=The last time you considered giving up on your dreams but didn't… what kept you going?"
+            >http://127.0.0.1:5000/predict?message=The last time you considered
+            giving up on your dreams but didn't… what kept you going?</a
+          >
+        </div>
+    </div>
+  </body>
+</html>