Update app.py

app.py

@@ -136,12 +136,9 @@ with gr.Blocks() as demo:
     datasets = gr.State({})
     current_dataset_name = gr.State("")
     current_page_number = gr.State(0)
-    # Place top-level components in a Column
-    with gr.Column():
-        dataset_selector = gr.Dropdown(label="Select Dataset", interactive=True)
-        message_box = gr.Textbox(interactive=False, label="Message")
-    # Define entry_selector but do not place it in the interface yet
-    entry_selector = gr.Dropdown(label="Select Entry to Edit/Delete")
+    # Only the dataset_selector and message_box are at the top
+    dataset_selector = gr.Dropdown(label="Select Dataset", interactive=True)
+    message_box = gr.Textbox(interactive=False, label="Message")
 
     # Tabs as before
     with gr.Tabs():
@@ -211,20 +208,20 @@ with gr.Blocks() as demo:
                 html_content = display_dataset_html(dataset, page_number=page_number)
                 # Update entry_selector options
                 entry_options = [f"{idx}: {entry['prompt'][:30]}" for idx, entry in enumerate(dataset)]
-                return datasets, page_number, gr.update(value=html_content), gr.update(choices=entry_options), f"Entry added to dataset '{current_dataset_name}'."
+                return datasets, page_number, gr.update(value=html_content), entry_options, f"Entry added to dataset '{current_dataset_name}'."
 
             add_button.click(
                 add_entry,
                 inputs=[image_input, prompt_input, current_dataset_name, datasets],
-                outputs=[datasets, current_page_number, gr.HTML(), entry_selector, message_box]
+                outputs=[datasets, current_page_number, gr.HTML(), gr.Variable(), message_box]
             )
 
         with gr.TabItem("Edit / Delete Entry"):
             with gr.Column():
                 selected_image = gr.Image(label="Selected Image", interactive=False, type="numpy")
                 selected_prompt = gr.Textbox(label="Current Prompt", interactive=False)
-                # Include entry_selector in the layout
-                entry_selector
+                # Define entry_selector here
+                entry_selector = gr.Dropdown(label="Select Entry to Edit/Delete")
                 new_prompt_input = gr.Textbox(label="New Prompt (for Edit)")
                 with gr.Row():
                     edit_button = gr.Button("Edit Entry")
@@ -324,14 +321,14 @@ with gr.Blocks() as demo:
             html_content = display_dataset_html(dataset, page_number=0)
             # Update entry_selector options
             entry_options = [f"{idx}: {entry['prompt'][:30]}" for idx, entry in enumerate(dataset)]
-            return dataset_name, 0, gr.update(value=html_content), gr.update(choices=entry_options), ""
+            return dataset_name, 0, gr.update(value=html_content), entry_options, ""
         else:
-            return "", 0, gr.update(value="<div>Select a dataset.</div>"), gr.update(choices=[]), ""
+            return "", 0, gr.update(value="<div>Select a dataset.</div>"), [], ""
 
     dataset_selector.change(
         select_dataset,
         inputs=[dataset_selector, datasets],
-        outputs=[current_dataset_name, current_page_number, dataset_html, entry_selector, message_box]
+        outputs=[current_dataset_name, current_page_number, dataset_html, gr.Variable(), message_box]
     )
 
     def change_page(action, current_page_number, datasets, current_dataset_name):
@@ -360,14 +357,35 @@ with gr.Blocks() as demo:
         outputs=[current_page_number, dataset_html, message_box]
     )
 
-    # Initialize dataset_selector and entry_selector
+    # Initialize dataset_selector
     def initialize_components(datasets):
-        return gr.update(choices=list(datasets.keys())), gr.update(choices=[])
+        return gr.update(choices=list(datasets.keys()))
 
     demo.load(
         initialize_components,
         inputs=[datasets],
-        outputs=[dataset_selector, entry_selector]
+        outputs=[dataset_selector]
+    )
+
+    # Function to update entry_selector options
+    def update_entry_selector(entry_options):
+        entry_selector.update(choices=entry_options)
+
+    # Use gr.Variable to pass entry_options between functions
+    gr.Variable(name="entry_options_var")
+
+    # Update entry_selector options when dataset is selected
+    dataset_selector.change(
+        lambda entry_options: update_entry_selector(entry_options),
+        inputs=[gr.Variable("entry_options_var")],
+        outputs=[]
+    )
+
+    # Update entry_selector options when an entry is added
+    add_button.click(
+        lambda entry_options: update_entry_selector(entry_options),
+        inputs=[gr.Variable("entry_options_var")],
+        outputs=[]
     )
 
 demo.launch()