Refreshing Components with new Dataframe Values

CShorten · June 9, 2022, 5:19pm

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!

CShorten · June 9, 2022, 6:17pm

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)

abidlabs · June 23, 2022, 11:29pm

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!

sophiaabigail · September 1, 2022, 11:07am

I would like to customize the styling of the DataFrame and add buttons that pass the values of their respective rows 192.168.l.254 as arguments to update the … related to “updating values in pandas dataframe … column in dataframe · how to replace elements in pandas and save new values in a new dataframe … Accessing a single value or updating the value of single row is sometime needed in Python Pandas Dataframe when we don’t want to create a …

isanchop · November 19, 2022, 6:31am

Did you find a way for updating the blocks?

Topic		Replies	Views
How can I update the value of my component 🔒 Gradio	0	802	November 3, 2023
Update components 🔒 Gradio	3	2908	September 28, 2023
Update a dropdown 🔒 Gradio	0	467	December 11, 2023
How do I persist component value on reload? 🔒 Gradio	0	542	June 10, 2023
Refresh entire tab on button click 🔒 Gradio	1	877	November 8, 2023

Refreshing Components with new Dataframe Values

Related Topics