How to get progress data from flask for Progress Bar?

Question

Python

Hello.
I've searched all over the internet, but either I'm not formulating the question correctly, or I'm just too stupid to miss it.

In general, the essence of the issue is this. There is a flask application, I need to make an indication of the execution of requests on the pages. I have no question how to make it layout and make it move, blink, glow, etc. through js.
But I can’t understand how I can do this logic:
1) The user fills in the form data
2) A post request flies to the backend via JS
3) The backend receives the data and starts executing the my_func1 function, where it already starts processing the data received from the web, walking for different databases, collect new data, build a bunch of useful information from all this, which it will then display on the page.
4) While the back is busy executing the my_func1 function, a progress bar should appear on the page, which will display the progress of the function.

So now I have it implemented as follows:
After the user clicks on the "Send data" button, the entire page is darkened and I just show the GIF with a spinning strip until the response from the back comes.
But this process can be quite lengthy and sometimes the user thinks that something is broken.
And if you show a normal progress bar that fills up as the function executes, it will be better.

But I can’t understand how I can get the process of executing the my_func1 function from the back ...

I hope I explained it normally and intelligibly. If something is not clear - ask, I will clarify.

Answer 1

Web applications don't work that way. The handler should return a response as quickly as possible. To perform long-running operations, you need to start background processes using something like Celery. The progress of their execution could be given via websocket, but synchronous Flask is not suitable for this. We'll have to do with polling through AJAX.

Answer 2

You need to create a child process with an ID and return the ID, then make periodic requests with the ID and get the state of that process from it.

Answer 3

You can do this:
1. Connect libraries at the beginning of the page:

spoiler

<script src="../static/js/bootstrap.js"></script>
  <script src="../static/js/bootstrap.bundle.js"></script>
  <script src="../static/js/bootstrap.bundle.min.js"></script>
  <script src="../static/jquery/jquery-3.6.0.js"></script>

2. Insert a progress bar in the main part of the page:

spoiler

<div class="progress" style="height: 23px;">
            <div id="r3c1" class="progress-bar progress-bar-striped progress-bar-animated bg-info" role="progressbar" style="width: 0%">0</div>
          </div>

3. At the end of the page, insert a script that will take the value for the progress bar every 0.5 seconds:

spoiler

<script>
        setInterval(
            function()
            {
                $.getJSON('/get_form',{},function(data){
                    $("#r3c1").text(data.result[2][0]);
                    $("#r3c1").css({'width':data.result[2][0]+'%'});
                });
            },
            500);
    </script>

4. Add a decorator to Flask:

spoiler

@app.route('/get_form')
    def get_form():
    pass
    return jsonify(result=data_form)

5. And in some function, recalculate the value for the progress bar:

spoiler

def my_func(pause):
    percent = 100 / pause
     while pause != 0:
        time.sleep(1)
        pause -= 1
        data_form[2][0] = int( 100 - (pause * percent))
        return

Please note: the progress bar requires two parameters - the inscription in numbers on the scale and the scale itself.
The function in paragraph 5 is useless and is indicated stupidly as an example.