Run two API requests asynchronously, but display results one at a time

[reuip]

Hello community, I'm hoping you can help me understand how to adapt my code.

I am working on a chatbot in Flask using the OpenAI API.

Because of speed issues, I wanted to use websockets and gevent to run two API requests in parallel, rather than one after the oher.
Essentially, what I am trying to do is the following:

1. When user sends an input to the chatbot (e.g. a question), a Moderator API ensures it's not offensive.
2. In parallel, already send the user input to the Completion API to get a response from the chatbot.
3. If the Moderator comes back OK, instantly display the text the user wrote on the screen, much like in a normal texting app.
4. When the response comes back from the Completion API, display the chatbot's response on the screen as well.

What happens now:
Both API requests are sent in parallel, which is what I want, but the result of the emit's are displayed in the convo-window only once both are received

What I want to happen:
Both API requests to still be sent asynchronously, but for the Moderator result to display the second it arrives, even if the Completion result isn't ready yet

Here are some snippets of my code to show you how it looks now. I tried to leave out anything irrelevant:
In my HTML file

var socket = io();
socket.emit('moderate_and_completion', user_input);   // This is part of a form event that triggers when the user input is submitted

# In my routes.py

@socketio.event
def moderate_and_completion(user_response):
    g1 = gevent.spawn(get_moderator_response, user_response)   # Calls moderator API and emits user_response if OK
    g2 = gevent.spawn(get_completion_response, user_response)  # Calls Completion API and emits ai_response
    gevent.wait([g1])  # These waits were written separately in an attempt to get g1 to produce a result first, but this doesn't work as intended
    gevent.wait([g2])


def get_moderator_response(user_response):
    with gevent.Timeout(15):
        with app.test_request_context():
            # code that checks the moderator API. Assume no offensive language
            socketio.emit('moderator_result',{'result': user_response}) 

def get_completion_response(user_response):
    with gevent.Timeout(15):
        with app.test_request_context():
            # code that gets completion response
            socketio.emit('completion_result',{'result': ai_response}) 

Finally, the html that receives the emits

socket.on('moderator_result', function(response) {
            // Display the moderate result in the chat window. The result is html formatted.
                $('#convo-window').html(response.result);
            // Some other cleanup code after user response is received
container.scrollTop = container.scrollHeight;

socket.on('completion_result', function(response) {
            // Display the moderate result in the chat window. The result is html formatted.
                $('#convo-window').html(response.result);
           // Some other cleanup code after AI response is received
                container.scrollTop = container.scrollHeight;

Thank you in advance for any advice that you have for me!

[miguelgrinberg]

You are using a test request context, which only makes sense in unit tests. Probably not what's causing your problem, but that needs to be removed.

def get_moderator_response(user_response):
    with gevent.Timeout(15):
        # code that checks the moderator API. Assume no offensive language
        socketio.emit('moderator_result',{'result': user_response}, namespace='/')  # <-- add namespace here, since it cannot be obtained from the request context

You also need to make sure you don't block when you connect to these 3rd party APIs.

Besides that I'm not sure what else to suggest.