Fix adding/removing

app.py

@@ -1,4 +1,4 @@
-from typing import NamedTuple, Type, Union
+from typing import Dict, List, Optional, NamedTuple, Type, Union
 
 
 import gradio as gr
@@ -9,19 +9,18 @@ MAX_TASKS = 50
 
 
 class Input:
-    def render(self, visible: bool) -> gr.Box:
-        with gr.Box(visible=visible) as gr_component:  # TODO: Remove this
-            with gr.Row():
-                self.output_name = gr.Textbox(
-                    label="Input name (can be referenced with {})",
-                    interactive=True,
-                    placeholder="Variable name",
-                )
-                self.output = gr.Textbox(
-                    label="Input value",
-                    interactive=True,
-                    placeholder="Variable value",
-                )
+    def render(self, visible: bool) -> gr.Row:
+        with gr.Row(visible=visible) as gr_component:
+            self.output_name = gr.Textbox(
+                label="Input name (can be referenced with {})",
+                interactive=True,
+                placeholder="Variable name",
+            )
+            self.output = gr.Textbox(
+                label="Input value",
+                interactive=True,
+                placeholder="Variable value",
+            )
         return gr_component
 
 
@@ -56,21 +55,23 @@ class AITask:
 
 
 class Component:
-    def __init__(self, id_: int, internal: Union[Input, AITask], visible: str = "0"):
+    def __init__(self, id_: int, internal: Union[Input, AITask], visible: bool = False):
+        # Internal state
         self._id = id_
-        self.component_id: gr.Textbox
         self.internal = internal
+        self.visible = visible
+
+        # Gradio state
+        self.component_id: gr.Textbox
+        self.source: gr.Textbox
         self.gr_component = gr.Box
-        self._visible = visible
         self.output_name: gr.Textbox
         self.output: gr.Textbox
-        self.source: gr.Textbox
 
     def render(self) -> None:
         self.component_id = gr.Textbox(value=str(self._id), visible=False)
         self.source = gr.Textbox(value=self.internal.__class__.__name__, visible=False)
-        self.visible = gr.Textbox(value=self._visible, visible=False)
-        self.gr_component = self.internal.render(bool(self._visible))
+        self.gr_component = self.internal.render(bool(self.visible))
         self.output_name = self.internal.output_name
         self.output = self.internal.output
 
@@ -82,56 +83,52 @@ class Variable(NamedTuple):
     value: str
 
 
-all_inputs = [Component(i, Input()) for i in range(MAX_INPUTS)]
-all_tasks = [Component(i, AITask()) for i in range(MAX_TASKS)]
-all_components = all_inputs + all_tasks
-
-all_inputs[0]._visible = "1"
-all_tasks[0]._visible = "1"
-
-
-def _update_components(i: int, max: int):
-    return [gr.Box.update(visible=True)] * i + [gr.Box.update(visible=False)] * (
-        max - i
-    )
-
+all_inputs = {i: Component(i, Input()) for i in range(MAX_INPUTS)}
+all_tasks = {i: Component(i, AITask()) for i in range(MAX_TASKS)}
 
-def add_input():
-    global next_input
-    if next_input < MAX_INPUTS:
-        next_input += 1
-    return _update_components(next_input, MAX_INPUTS)
+all_inputs[0].visible = True
+all_tasks[0].visible = True
 
 
-def remove_input():
-    global next_input
-    if next_input > 0:
-        next_input -= 1
-    return _update_components(next_input, MAX_INPUTS)
+def add_input() -> Optional[List[Dict]]:
+    for i, input_ in all_inputs.items():
+        if not input_.visible:
+            input_.visible = True
+            return [gr.Row.update(visible=True)] * (i + 1) + [
+                gr.Row.update(visible=False)
+            ] * (MAX_INPUTS - i)
 
 
-def add_task():
-    global next_task
-    if next_task < MAX_TASKS:
-        next_task += 1
-    return _update_components(next_task, MAX_TASKS)
+def remove_input() -> Optional[List[Dict]]:
+    for i, input_ in reversed(all_inputs.items()):
+        if input_.visible:
+            input_.visible = False
+            return [gr.Row.update(visible=True)] * i + [
+                gr.Row.update(visible=False)
+            ] * (MAX_INPUTS - i + 1)
 
 
-def remove_task():
-    global next_task
-    if next_task > 0:
-        next_task -= 1
-    return _update_components(next_task, MAX_TASKS)
+def add_task() -> Optional[List[Dict]]:
+    for i, task in all_tasks.items():
+        if not task.visible:
+            task.visible = True
+            return [gr.Box.update(visible=True)] * (i + 1) + [
+                gr.Box.update(visible=False)
+            ] * (MAX_TASKS - i)
 
 
-def execute(output_names, outputs):
-    for output_name in output_names:
-        print(output_name)
+def remove_task() -> Optional[List[Dict]]:
+    for i, task in reversed(all_tasks.items()):
+        if task.visible:
+            task.visible = False
+            return [gr.Box.update(visible=True)] * i + [
+                gr.Box.update(visible=False)
+            ] * (MAX_TASKS - i + 1)
 
 
 with gr.Blocks() as demo:
     # Initial layout
-    for i in all_inputs:
+    for i in all_inputs.values():
         i.render()
     input_error = gr.HighlightedText(
         [("Repeated variable names in inputs. Please pick different names.", "Error")],
@@ -142,7 +139,7 @@ with gr.Blocks() as demo:
         add_input_btn = gr.Button("Add input variable")
         remove_input_btn = gr.Button("Remove input variable")
     execute_btn = gr.Button("Execute")
-    for t in all_tasks:
+    for t in all_tasks.values():
         t.render()
     task_error = gr.HighlightedText(
         [("Repeated variable names in tasks. Please pick different names.", "Error")],
@@ -157,22 +154,22 @@ with gr.Blocks() as demo:
     add_input_btn.click(
         add_input,
         inputs=[],
-        outputs=[i.gr_component for i in all_inputs],
+        outputs=[i.gr_component for i in all_inputs.values()],
     )
     remove_input_btn.click(
         remove_input,
         inputs=[],
-        outputs=[i.gr_component for i in all_inputs],
+        outputs=[i.gr_component for i in all_inputs.values()],
     )
     add_task_btn.click(
         add_task,
         inputs=[],
-        outputs=[t.gr_component for t in all_tasks],
+        outputs=[t.gr_component for t in all_tasks.values()],
     )
     remove_task_btn.click(
         remove_task,
         inputs=[],
-        outputs=[t.gr_component for t in all_tasks],
+        outputs=[t.gr_component for t in all_tasks.values()],
     )
 
 demo.launch()