Deploying TensorFlow Models on Flask Part 3 - Integrate ML model with Flask

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 2 of this series we have set flask application, in Part 3 we will integrate TensorFlow Model with our Flask application.

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

Part 3: Integrating TensorFlow ML model with Flask application

Create a file utils.py inside flask-ml and write below code in utils.py


import tensorflow as tf
import tensorflow_hub as hub


def similarity_value(s1, s2):
    embed = hub.load("./pre_trained_model")
    embeddings = embed([s1, s2])
    sim = tf.keras.losses.cosine_similarity(
        embeddings[0], embeddings[1], axis=0)

    print(sim.numpy())

    if sim.numpy() <= -0.6:
        msg = f"Cosine Similary is {sim.numpy()}, this indicates high similarity"
    elif sim.numpy() >= 0.6:
        msg = f"Cosine Similary is {sim.numpy()}, this indicates high dissimilarity"
    else:
        msg = f"Cosine Similary is {sim.numpy()}, can't decide much with this value"
    return msg


After this step you should have directory structure as shown below


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

Replace code in app.py with the below code


from flask import Flask, render_template, request, redirect
import utils

app = Flask(__name__)


@app.route("/", methods=['GET', 'POST'])
def index():

    if request.method == 'GET':
        return render_template("index.html")

    if request.method == 'POST':
        result = request.form.to_dict(flat=True)
        sentence_1 = result.get("sentence-1")
        sentence_2 = result.get("sentence-2")
        sim_msg = utils.similarity_value(sentence_1, sentence_2)
        result["sim_msg"] = sim_msg
        return render_template("index.html", result=result)


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


Replace code in index.html with the below code


  <!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>

          {% if result %}

          <div class="row">
              <div class="col-lg-6">
                  <div class="form_main">
                      <h4 class="heading"><strong>Cosine </strong> Similarity Value<span></span></h4>

                      <div class="notice notice-info">
                          <strong>Sentence 1</strong> : {{result["sentence-1"]}}
                      </div>

                      <div class="notice notice-info">
                          <strong>Sentence 2</strong> : {{result["sentence-2"]}}
                      </div>


                      <div class="notice notice-success">
                          <strong>Similarity</strong> {{result["sim_msg"]}}
                      </div>

                  </div>
              </div>
          </div> {% endif %}
      </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>

Run the app.py, provide input sentences and click on CHECK SIMILARITY, you should see output similar to as shown below

flask_tf

So with this we have successfully deployed sentence similarity ML model and served using Flask application that is using Bootstrap and Jinja 2 for the front-end.This is final Part 3 of series Deploying TensorFlow Models on Flask, let us know your feedback in the comment section or any issues you faced while following these three articles.

Part 2: Setting up Flask Application< Prev

Category: TensorFlow