Refreshing Components with new Dataframe Values

How do I loop through a Python list to create Gradio Components? – the data of these components are attached to buttons. These buttons then can access the internal state of the local component to modify a global memory store.

I would like to customize the styling of the DataFrame and add buttons that pass the values of their respective rows as arguments to update the DataFrame.

Similar to the idea of the this reference in JavaScript.

Anyways, this is what I tried – it successfully updates the DataFrame but doesn’t bother updating / re-rendering the updated papers.

for arxiv_paper in papers.value:

import gradio as gr
with gr.Blocks() as demo:
  gr.Markdown("<center><h1>My ArXiv</h1></center>")
  query = gr.Textbox("Main Topic: Biology")
  paper_data = Weaviate_nearText(query.value) # returns a list of lists
  papers = gr.DataFrame(
      headers = ["title", "abstract"],
      datatype = ["str", "str"],
      value = paper_data,
      visible = True   
  )

# this part refuses to re-render :frowning: 

  with gr.Column():
    for arxiv_paper in papers.value:
      with gr.Column():
        title = gr.Markdown(arxiv_paper[0])
        gr.Markdown(arxiv_paper[1])
      with gr.Row():
        more_button = gr.Button("More like this!")
        more_button.click(fn=update_papers, inputs=[title, query], outputs=[query, papers])

demo.launch(debug=True)

Thanks for your help!

Well this looks silly haha, but it achieves the functionality I want and hopefully communicates the question further

– the idea works by doing it like this:

def update_papers(added_data, query):
  new_query = query + ". Something similar to " + added_data[3:]
  new_query = new_query[:-5]
  new_search_results = Weaviate_nearText(new_query) # returns list of lists
  return new_query, parsed_results[0][0], parsed_results[0][1], \
                    parsed_results[1][0], parsed_results[1][1], \
                    parsed_results[2][0], parsed_results[2][1], \
                    parsed_results[3][0], parsed_results[3][1], \
                    parsed_results[4][0], parsed_results[4][1], \
                    parsed_results[5][0], parsed_results[5][1], \
                    parsed_results[6][0], parsed_results[6][1], \
                    parsed_results[7][0], parsed_results[7][1], \
                    parsed_results[8][0], parsed_results[8][1], \
                    parsed_results[9][0], parsed_results[9][1]

import gradio as gr
with gr.Blocks() as demo:
  gr.Markdown("<center><h1>My ArXiv</h1></center>")
  query = gr.Textbox("Main Topic: Biology")
  paper_data = list_of_dicts_TO_list_of_lists(nearText_wrapper(query.value)[:10])
  papers = gr.DataFrame(
      headers = ["title", "abstract"],
      datatype = ["str", "str"],
      value = paper_data,
      visible = False   
  )

  with gr.Column():
    title1 = gr.Markdown(papers.value[0][0])
    abstract1 = gr.Markdown(papers.value[0][1])
    button1 = gr.Button("More like this!")
    
    title2 = gr.Markdown(papers.value[1][0])
    abstract2 = gr.Markdown(papers.value[1][1])
    button2 = gr.Button("More like this!")

    title3 = gr.Markdown(papers.value[2][0])
    abstract3 = gr.Markdown(papers.value[2][1])
    button3 = gr.Button("More like this!")

    title4 = gr.Markdown(papers.value[3][0])
    abstract4 = gr.Markdown(papers.value[3][1])
    button4 = gr.Button("More like this!")

    title5 = gr.Markdown(papers.value[4][0])
    abstract5 = gr.Markdown(papers.value[4][1])
    button5 = gr.Button("More like this!")

    title6 = gr.Markdown(papers.value[5][0])
    abstract6 = gr.Markdown(papers.value[5][1])
    button6 = gr.Button("More like this!")

    title7 = gr.Markdown(papers.value[6][0])
    abstract7 = gr.Markdown(papers.value[6][1])
    button7 = gr.Button("More like this!")
  
    title8 = gr.Markdown(papers.value[7][0])
    abstract8 = gr.Markdown(papers.value[7][1])
    button8 = gr.Button("More like this!")
   
    title9 = gr.Markdown(papers.value[8][0])
    abstract9 = gr.Markdown(papers.value[8][1])
    button9 = gr.Button("More like this!")

    button1.click(fn=update_papers, inputs=[title1, query], outputs=[query, title1, abstract1, title2, abstract2, title3, abstract3, title4, abstract4, title5, abstract5, title6, abstract6, title7, abstract7, title8, abstract8, title9, abstract9])
    button2.click(fn=update_papers, inputs=[title2, query], outputs=[query, title1, abstract1, title2, abstract2, title3, abstract3, title4, abstract4, title5, abstract5, title6, abstract6, title7, abstract7, title8, abstract8, title9, abstract9])
    button3.click(fn=update_papers, inputs=[title3, query], outputs=[query, title1, abstract1, title2, abstract2, title3, abstract3, title4, abstract4, title5, abstract5, title6, abstract6, title7, abstract7, title8, abstract8, title9, abstract9])
    button4.click(fn=update_papers, inputs=[title4, query], outputs=[query, title1, abstract1, title2, abstract2, title3, abstract3, title4, abstract4, title5, abstract5, title6, abstract6, title7, abstract7, title8, abstract8, title9, abstract9])
    button5.click(fn=update_papers, inputs=[title5, query], outputs=[query, title1, abstract1, title2, abstract2, title3, abstract3, title4, abstract4, title5, abstract5, title6, abstract6, title7, abstract7, title8, abstract8, title9, abstract9])
    button6.click(fn=update_papers, inputs=[title6, query], outputs=[query, title1, abstract1, title2, abstract2, title3, abstract3, title4, abstract4, title5, abstract5, title6, abstract6, title7, abstract7, title8, abstract8, title9, abstract9])
    button7.click(fn=update_papers, inputs=[title7, query], outputs=[query, title1, abstract1, title2, abstract2, title3, abstract3, title4, abstract4, title5, abstract5, title6, abstract6, title7, abstract7, title8, abstract8, title9, abstract9])
    button8.click(fn=update_papers, inputs=[title8, query], outputs=[query, title1, abstract1, title2, abstract2, title3, abstract3, title4, abstract4, title5, abstract5, title6, abstract6, title7, abstract7, title8, abstract8, title9, abstract9])
    button9.click(fn=update_papers, inputs=[title9, query], outputs=[query, title1, abstract1, title2, abstract2, title3, abstract3, title4, abstract4, title5, abstract5, title6, abstract6, title7, abstract7, title8, abstract8, title9, abstract9])
   
demo.launch(debug=True)

Hi @CShorten the code you’ve provided should work. I wasn’t able to run it because there are some undefined variables, but here’s an example of rendering components and attaching event listeners in a loop that works perfectly fine:

import random 
import gradio as gr

with gr.Blocks() as demo:
    
    val = gr.Textbox()
    for i in range(5):
        btn = gr.Button(f"Button {i}")
        btn.click(lambda :random.random(), None, val) 
        
demo.launch()

If you can share a minimum working example that doesn’t work, then happy to take a another look!