Load question and response separately

🔒 Gradio
1

What I would like to do is when the user presses enter I would like the message to be displayed and when the response comes back it just loads the response.

I have listed the original code below that waits until there is a response to load the question and response at the same time.

Any suggestions would be appreciated.

original code that is working

app = gr.Blocks(theme=gr.themes.Glass(),css=""".gradio-container {background-color:#14BD73} footer {visibility: hidden}""")

chat_history = []

# Define the Gradio interface
with app as demo:
    chatbot = gr.Chatbot(label="Ask Savvy")
    msg = gr.components.Textbox(label="Ask questions here")
    clear = gr.ClearButton([msg, chatbot])
    def respond(message, chat_history):

        bot_message = main(message)  # Call the parallelized main function
        chat_history.append((message, bot_message))
        
        return "", chat_history
    
    msg.submit(respond, [msg, chatbot], [msg, chatbot])
# Launch Gradio App
demo.launch(share=True)

New code I am trying to get to work:

chat_history = []
bot_message = []

# Define the Gradio interface
def tempload(message, chat_history):
    chat_history.append((message))
    return "", chat_history

# Define the Gradio interface
def respond(message, chat_history):

    # Asynchronously fetch the response
    async def fetch_response():
        bot_message = tempload(message, chat_history)
        bot_message = main(message)

    # Append the response to the chat history
    chat_history.append((message, bot_message))   
    return "", chat_history

# Define the Gradio interface
with app as demo:
    chatbot = gr.Chatbot(label="Ask Savvy")
    msg = gr.components.Textbox(label="Ask questions here")
    clear = gr.ClearButton([msg, chatbot])

    # Pass dependencies and inputs as separate arguments
    msg.submit(respond, [msg, chatbot], [msg, chatbot])

# Launch Gradio App
demo.launch(share=True)