Image not loading before Javascript+Python function ends

Question

I'm using python with eel to communicate with a local website as frontend. My code should display an image on a web page while in the middle of a long python function. The image only appears after the python function is executed, even though <img> is present in the HTML at the correct time.

Here's my Javascript code:

eel.expose(set_image);

function set_image() {
    document.getElementById("zoom-animate").innerHTML = '<img src="temp.png">';
}



function generate() {
    let source = document.getElementById("source").value;
    let keyword = document.getElementById("keyword").value;
    eel.generate(source, keyword);
}

And my Python code:

@eel.expose
def generate(source, keyword):
    # code that takes a long time to execute 1
    eel.set_image()
    # code that takes a long time to execute 2

Answer 1

Your generate() function should call set_image() and immediately return. That way the WSGI server can immediately send a 200 document to the web client. As it stands, the web server is patiently waiting for your function to return.

Use a celery worker to complete the "long time to execute 2" task in the background.