How can I move a button before a box that the button uses or changes in Gradio?

Question

Example: I have the following Gradio UI:

import gradio as gr

def dummy(a):
    return 'hello', {'hell': 'o'}

with gr.Blocks() as demo:
    txt = gr.Textbox(value="test", label="Query", lines=1)
    answer = gr.Textbox(value="", label="Answer")
    answerjson = gr.JSON()
    btn = gr.Button(value="Submit")
    btn.click(dummy, inputs=[txt], outputs=[answer, answerjson])
    gr.ClearButton([answer, answerjson])

demo.launch()

How can I change the code so that the "Submit" and "Clear" buttons are shown between the answer and JSON boxes, i.e.:

I can't just move the line gr.ClearButton([answer, answerjson]) before answerjson = gr.JSON(), since answerjson needs to be defined in gr.ClearButton([answer, answerjson]).

Answer 1

You can add the components of clear button after initialization. This way, you are able to decouple the component creation order:

import gradio as gr


def dummy(a):
    return "hello", {"hell": "o"}


with gr.Blocks() as demo:
    txt = gr.Textbox(value="test", label="Query", lines=1)
    answer = gr.Textbox(value="", label="Answer")
    btn = gr.Button(value="Submit")
    clear_btn = gr.ClearButton()
    answerjson = gr.JSON()
    
    btn.click(dummy, inputs=[txt], outputs=[answer, answerjson])
    clear_btn.add([answer, answerjson])

demo.launch(share=True)