Coding Guideline for an Interactive Setup in Academic Machine Learning Research

Last update was on Jan 3, 2024.

In an interactive setup, a human user can interact with a machine learning model via a website, and get a model response based on some user inputs. This is a short tutorial on how to quickly implement this interactive setup by sending data (e.g., user inputs) from a webpage to Python and sending back some data (e.g., model responses) from Python to the webpage. Specifically, you can deploy a machine learning model by communicating data between JavaScript and Python. This blog is a very brief introduction to get you started, and you could find more tutorials on JavaScript and flask to further configure this setup for your own project.

Tools

• Python
• JavaScript
• flask

Guideline

• The first recommended step is to write an index.html page with js and css files (e.g., main.js and sty.css), and test the implementation without flask.
• Write a Python script app.py to receive and send data. The recommended structure is as follows:

    from flask import Flask, render_template, request
    app = Flask(__name__)
  		
    @app.route('/')
    def index():
        return render_template('index.html')
  		
    @app.route('/', methods=['POST'])
    def foo():
        userque = request.form[‘userque’] 
        …
        return …
  		
    if __name__ == '__main__':
        app.run(debug=True)
  

  • The function foo receives some data (i.e., request in the above code, and data in the code below) from the caller and can return some data to the caller (i.e., response in the code below). For example. this function can receive a user question, and returns a model response.
  • To call the function foo and send data to this function in JavaScript (e.g., main.js), below is an example:

    $.ajax({url: window.location.href,
            type: 'POST',
            data: {userque: …,
                    …,
     		},
          success: function (response) {
            # response is the object returned by the function foo
            …
              }
          })
    

• Organize files based on the following repo structure.

    app.py
    templates/
        index.html
    static/
        [js and css files]
        sty.css
        main.js
  

  • In index.html: include the css file by

    <link rel="stylesheet" type="text/css" href="{ {url_for('static', filename = 'sty.css')} }">

  • In index.html: include the js file by

    <script type="text/javascript" src="{ {url_for('static',filename='main.js')} }"> </script>

• Running python app.py in the terminal will launch the website on localhost:5000.

More

This coding structure is used in our work Continually Improving Extractive QA via Human Feedback, where a user asks a question, receives a model answer highlighted in a context paragraph, and provides feedback to the model answer. We use Firebase as an external database, and Google Cloud to host the website.