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

gcptutorials.com TensorFlow

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

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