To setup a simple html front-end and python flask back- Create a html script (index.html) and save D:Projectstest_backgroundtasktemplatesviews Create a python script and save D:Projectstest_backgroundtask: Code To create a background task, flask has a package called flask_executor Updated python script using excutor to create a background Required Output: Once the results are completed, the table containing test_val should be displayed.

Python

To setup a simple html front-end and python flask back-

Create a html script (index.html) and save D:Projectstest_backgroundtasktemplatesviews

<html>
    <section>
      <div>
        <h>Test background task</h>
      </div>
    </section>
</html>

JavaScript
​x
 
<html>
    <section>
      <div>
        <h>Test background task</h>
      </div>
    </section>
</html>

Create a python script and save D:Projectstest_backgroundtask:

Code

import pandas as pd
from flask import Flask, render_template, request
    
    
    app = Flask(__name__)
    
    
        
    @app.route('/', methods=['GET'])
    def index():
        return render_template('views/index.html')
    
    @app.route('/post', methods=['POST'])
    def post():
        return "recived: {}".format(request.form)
    
    if __name__ == "__main__":
        app.run( port = '5004')

JavaScript
 
import pandas as pd
from flask import Flask, render_template, request
    
    
    app = Flask(__name__)
    
    
        
    @app.route('/', methods=['GET'])
    def index():
        return render_template('views/index.html')
    
    @app.route('/post', methods=['POST'])
    def post():
        return "recived: {}".format(request.form)
    
    if __name__ == "__main__":
        app.run( port = '5004')
​

To create a background task, flask has a package called flask_executor Updated python script using excutor to create a background

    from flask import Flask, render_template, request
    import pandas as pd
    from flask_executor import Executor
    global input_val
    
    app = Flask(__name__)
    
    def background_task_func(input_val):
        if input_val==1:
            data = {'Name': ['Tom', 'Joseph', 'Krish', 'John'], 'Age': [20, 21, 19, 18]}  
            test_val= pd.DataFrame(data)
        print(test_val)
        
    @app.route('/', methods=['GET'])
    def index():
        global input_val
        input_val=1
        executor.submit(background_task_func,input_val)
        return render_template('views/index.html')
    
    @app.route('/post', methods=['POST'])
    def post():
        return "recived: {}".format(request.form)
    
    if __name__ == "__main__":
        executor = Executor(app)
        app.run( port = '5004')

JavaScript
 
    from flask import Flask, render_template, request
    import pandas as pd
    from flask_executor import Executor
    global input_val
    
    app = Flask(__name__)
    
    def background_task_func(input_val):
        if input_val==1:
            data = {'Name': ['Tom', 'Joseph', 'Krish', 'John'], 'Age': [20, 21, 19, 18]}  
            test_val= pd.DataFrame(data)
        print(test_val)
        
    @app.route('/', methods=['GET'])
    def index():
        global input_val
        input_val=1
        executor.submit(background_task_func,input_val)
        return render_template('views/index.html')
    
    @app.route('/post', methods=['POST'])
    def post():
        return "recived: {}".format(request.form)
    
    if __name__ == "__main__":
        executor = Executor(app)
        app.run( port = '5004')
​

Required Output:

Once the results are completed, the table containing test_val should be displayed.

NB: the html page index.html is currently being viewed by the user and it has other tables already displayed. The user is also interacting with other buttons on this page.

Additional Info

NB: I use Django within <script>...</script> in my html script.

An example of how I used it to toggle a table or button:

  <script>
    function myFunctionDemoFeat() {
      var x = document.getElementById("demofeatDIV");
      if (x.style.display === "none") {
        x.style.display = "block";
      } else {
        x.style.display = "none";
      }
    }
   </script>

JavaScript
 
  <script>
    function myFunctionDemoFeat() {
      var x = document.getElementById("demofeatDIV");
      if (x.style.display === "none") {
        x.style.display = "block";
      } else {
        x.style.display = "none";
      }
    }
   </script>
​

Answer

Python script

from flask import Flask, render_template, request
import pandas as pd
from flask_executor import Executor
global input_val
global test_val
app = Flask(__name__)

def background_task_func(input_val):
    global test_val
    data = {'Name': ['Tom', 'Joseph', 'Krish', 'John'], 'Age': [20, 21, 19, 18]}  
    test_val= pd.DataFrame(data)
    if test_val.shape[0]>1:
        print(test_val)
        return render_template('views/index.html',tables=[test_val.to_html(classes='data')])
    
@app.route('/', methods=['GET'])
def index():
    executor.submit(background_task_func,input_val)
    return render_template('views/index.html',tables=[test_val.to_html(classes='data')])

@app.route('/post', methods=['POST'])
def post():
    return "recived: {}".format(request.form)

if __name__ == "__main__":
    data ={'Name': [], 'Age': []}  
    test_val= pd.DataFrame(data)
    input_val=1
    executor = Executor(app)
    
    app.run( port = '5004')

JavaScript
 
from flask import Flask, render_template, request
import pandas as pd
from flask_executor import Executor
global input_val
global test_val
app = Flask(__name__)
​
def background_task_func(input_val):
    global test_val
    data = {'Name': ['Tom', 'Joseph', 'Krish', 'John'], 'Age': [20, 21, 19, 18]}  
    test_val= pd.DataFrame(data)
    if test_val.shape[0]>1:
        print(test_val)
        return render_template('views/index.html',tables=[test_val.to_html(classes='data')])
    
@app.route('/', methods=['GET'])
def index():
    executor.submit(background_task_func,input_val)
    return render_template('views/index.html',tables=[test_val.to_html(classes='data')])
​
@app.route('/post', methods=['POST'])
def post():
    return "recived: {}".format(request.form)
​
if __name__ == "__main__":
    data ={'Name': [], 'Age': []}  
    test_val= pd.DataFrame(data)
    input_val=1
    executor = Executor(app)
    
    app.run( port = '5004')
​

Html code

<html>
    <section>
      <div>
        <h>Test background task</h>
      </div>
      
      <div id="demofeatDIV" class="w3-container">
        <table class="w3-table-all w3-tiny">
            <tbody>
            <tr><th>Results</th></tr>
            {% for table in tables %}
                 {{ table|safe }}
            {% endfor %}
            </tbody>
       </table>
       <br>
     </div> 
    </section>
</html>

JavaScript
 
<html>
    <section>
      <div>
        <h>Test background task</h>
      </div>
      
      <div id="demofeatDIV" class="w3-container">
        <table class="w3-table-all w3-tiny">
            <tbody>
            <tr><th>Results</th></tr>
            {% for table in tables %}
                 {{ table|safe }}
            {% endfor %}
            </tbody>
       </table>
       <br>
     </div> 
    </section>
</html>
​

For a simple test example , this method will be fine. However, if there are other data being displayed, the disadvantage of using this method is that I need to refresh the entire page, this results in reloading the previous tables. The alternative solution is to use sockets. My solution in Flask socketio | Emitting a pandas dataframe from a background task using Flask executor to an Html script resolve this issue.

Python Flask Executor | How to pass results from a background task to a currently active html page

Advertisement

Answer