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

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.

    flask_tf

    In next final Part 3 we will integrate ML model with Flask application.

    Part 1: Set up trained TF model < Prev Next >Part 3: Integrate ML model with flask

    Categories: Python