Added layout

.gitignore

@@ -1 +1,2 @@
-venv
+venv
+.vscode

README.md

@@ -1,8 +1,8 @@
 ---
 title: Toolkit
 emoji: 😎
-colorFrom: blue
-colorTo: red
+colorFrom: red
+colorTo: blue
 sdk: gradio
 sdk_version: 3.32.0
 app_file: app.py

app.py

@@ -1,20 +1,142 @@
+from abc import ABC, abstractmethod
+
+
 import gradio as gr
 
-demo = None
 
-def component():
-    with gr.Row():
-        gr.Textbox("Hello")
-        gr.Textbox("World")
+MAX_INPUTS = 10
+MAX_TASKS = 50
 
 
-with gr.Blocks() as demo:
-    for c in [component, component]:
-        c()
-    gr.Button("Hey")
+class Component(ABC):
+    def __init__(self, visible: bool = False):
+        self.component = None
+        self.visible = visible
+
+    @abstractmethod
+    def render(self) -> gr.Box:
+        ...
+
+
+class Input(Component):
+    def render(self) -> None:
+        with gr.Box(visible=self.visible) as component:
+            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",
+                )
+        self.component = component
+
+
+class AITask(Component):
+    def render(self) -> None:
+        with gr.Box(visible=self.visible) as component:
+            gr.Markdown(f"AI task")
+            with gr.Row():
+                with gr.Column():
+                    self.prompt = gr.Textbox(
+                        label="Instructions",
+                        lines=15,
+                        interactive=True,
+                        placeholder="What is the AI assistant meant to do?",
+                    )
+                with gr.Column():
+                    with gr.Box():
+                        self.output_name = gr.Textbox(
+                            label="Output name", interactive=True, placeholder="var"
+                        )
+                        self.output = gr.Textbox(
+                            label="",
+                            lines=10,
+                            interactive=False,
+                        )
+            self.component = component
+
+
+all_inputs = [Input() for _ in range(MAX_INPUTS)]
+all_tasks = [AITask() for _ in range(MAX_TASKS)]
+
+all_inputs[0].visible = True
+all_tasks[0].visible = True
+next_input = 1
+next_task = 1
+
+
+def _update_components(i: int, max: int):
+    return [gr.Box.update(visible=True)] * i + [gr.Box.update(visible=False)] * (
+        max - i
+    )
+
+
+def add_input():
+    global next_input
+    if next_input < MAX_INPUTS:
+        next_input += 1
+    return _update_components(next_input, MAX_INPUTS)
+
+
+def remove_input():
+    global next_input
+    if next_input > 0:
+        next_input -= 1
+    return _update_components(next_input, MAX_INPUTS)
+
+
+def add_task():
+    global next_task
+    if next_task < MAX_TASKS:
+        next_task += 1
+    return _update_components(next_task, MAX_TASKS)
+
+
+def remove_task():
+    global next_task
+    if next_task > 0:
+        next_task -= 1
+    return _update_components(next_task, MAX_TASKS)
+
 
-print("heyhey")
 with gr.Blocks() as demo:
-    for c in [component, component]:
-        c()
-    gr.Textbox("World")
+    # Layout
+    for i in all_inputs:
+        i.render()
+    with gr.Row():
+        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:
+        t.render()
+    with gr.Row():
+        add_task_btn = gr.Button("Add task")
+        remove_task_btn = gr.Button("Remove task")
+
+    # Event handling
+    add_input_btn.click(
+        add_input,
+        inputs=[],
+        outputs=[i.component for i in all_inputs],
+    )
+    remove_input_btn.click(
+        remove_input,
+        inputs=[],
+        outputs=[i.component for i in all_inputs],
+    )
+    add_task_btn.click(
+        add_task,
+        inputs=[],
+        outputs=[t.component for t in all_tasks],
+    )
+    remove_task_btn.click(
+        remove_task,
+        inputs=[],
+        outputs=[t.component for t in all_tasks],
+    )
+
+demo.launch()