Deploying TensorFlow Models on Flask Part 2 - Setting up Flask application

gcptutorials.com Python

Note: This tutorial has been updated follow the updated version of this tutorial at Deploying TensorFlow ML model using Flask for Beginners

In the Part 1 on this series we have set up and tested the trained model, in Part 2 we will set up Flask application.

This is a multi part tuorials series, we will cover end-to-end process in below parts

Part 2: Set up Flask application

Install flask module with pip install flask

Create a new file app.py inside root directory flask-ml and write below code in app.py


from flask import Flask, render_template, request, render_template_string

app = Flask(__name__)

@app.route("/")
def index():
    return render_template_string("Hello from flask")

if __name__ == "__main__":
    app.run(debug=True)

You should see "Hello from flask" in browser on navigating to http://127.0.0.1:5000/

Develop front-end using Bootstrap and HTML

Create two new directories templates and static inside flask-ml.

In templates directory create a file index.html

In static directory create css directory and in css create a file main.css

Write following code in index.html

after these steps you should have directory structure as show below


└───flask-ml
    │   app.py
    │   test.py
    │   tf2-preview_nnlm-en-dim50_1.tar
    │   tf2-preview_nnlm-en-dim50_1.tar.gz
    │
    ├───pre_trained_model
    │   │   saved_model.pb
    │   │
    │   ├───assets
    │   │       tokens.txt
    │   │
    │   └───variables
    │           variables.data-00000-of-00001
    │           variables.index
    │
    ├───static
    │   └───css
    │           main.css
    │
    └───templates
            index.html

Write below code inside index.html


<!DOCTYPE html>
  <html lang="en" dir="ltr">

  <head>
      <!-- <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> -->
      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
          integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
      <link href="{{ url_for('static', filename='css/main.css') }}" rel="stylesheet">
  </head>

  <body>
      <div class="container">
          <div class="row">
              <div class="col-lg-6">
                  <div class="form_main">
                      <h4 class="heading"><strong>Sentence </strong> Similarity <span></span></h4>
                      <div class="form">
                          <form action="{{ url_for('index', ) }}" method="post" id="contactFrm" name="contactFrm">
                              <input type="text" required="" placeholder="First Sentence" value="" name="sentence-1"
                                  class="txt">
                              <input type="text" required="" placeholder="Second Sentence" value="" name="sentence-2"
                                  class="txt">
                              <input type="submit" value="Check Similarity" name="Sumbit" class="txt2">
                          </form>
                      </div>
                  </div>
              </div>
          </div>

      </div>
      <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
          integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous">
      </script>
      <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
          integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous">
      </script>
      <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
          integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous">
      </script>
  </body>

  </html>

Write below code inside main.css


  form_main {
      width: 100%;
  }
  .form_main h4 {
      font-family: roboto;
      font-size: 20px;
      font-weight: 300;
      margin-bottom: 15px;
      margin-top: 20px;
      text-transform: uppercase;
  }
  .heading {
      border-bottom: 1px solid #fcab0e;
      padding-bottom: 9px;
      position: relative;
  }
  .heading span {
      background: #9e6600 none repeat scroll 0 0;
      bottom: -2px;
      height: 3px;
      left: 0;
      position: absolute;
      width: 75px;
  }
  .form {
      border-radius: 7px;
      padding: 6px;
  }
  .txt[type="text"] {
      border: 1px solid #ccc;
      margin: 10px 0;
      padding: 10px 0 10px 5px;
      width: 100%;
  }
  .txt_3[type="text"] {
      margin: 10px 0 0;
      padding: 10px 0 10px 5px;
      width: 100%;
  }
  .txt2[type="submit"] {
      background: #242424 none repeat scroll 0 0;
      border: 1px solid #4f5c04;
      border-radius: 25px;
      color: #fff;
      font-size: 16px;
      font-style: normal;
      line-height: 35px;
      margin: 10px 0;
      padding: 0;
      text-transform: uppercase;
      width: 30%;
  }
  .txt2:hover {
      background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
      color: #5793ef;
      transition: all 0.5s ease 0s;
  }

  .notice {
      padding: 15px;
      background-color: #fafafa;
      border-left: 6px solid #7f7f84;
      margin-bottom: 10px;
      -webkit-box-shadow: 0 5px 8px -6px rgba(0,0,0,.2);
         -moz-box-shadow: 0 5px 8px -6px rgba(0,0,0,.2);
              box-shadow: 0 5px 8px -6px rgba(0,0,0,.2);
  }
  .notice-sm {
      padding: 10px;
      font-size: 80%;
  }
  .notice-lg {
      padding: 35px;
      font-size: large;
  }
  .notice-success {
      border-color: #80D651;
  }
  .notice-success>strong {
      color: #80D651;
  }
  .notice-info {
      border-color: #45ABCD;
  }
  .notice-info>strong {
      color: #45ABCD;
  }
  .notice-warning {
      border-color: #FEAF20;
  }
  .notice-warning>strong {
      color: #FEAF20;
  }
  .notice-danger {
      border-color: #d73814;
  }
  .notice-danger>strong {
      color: #d73814;
  }

Change the code in app.py as shown below


  from flask import Flask, render_template, request, render_template_string

  app = Flask(__name__)


  @app.route("/")
  def index():
      return render_template("index.html")


  if __name__ == "__main__":
      app.run(debug=True)

Run the app.py and you should see below output in browser.