Add hello world example

actions.py

@@ -1,5 +1,3 @@
-import re
-
 import gradio as gr
 
 from components import MAX_TASKS, all_tasks, Task

app.py

@@ -1,6 +1,7 @@
 import gradio as gr
 
 import actions as a
+from examples import hello
 from components import all_tasks, Tasks
 
 
@@ -23,43 +24,46 @@ with gr.Blocks() as demo:
     <br>2. AI Task: Summarize {t0}.
     """
     )
-    for t in all_tasks.values():
-        t.render()
-    with gr.Row():
-        add_task_btn = gr.Button("Add task")
-        remove_task_btn = gr.Button("Remove task")
-    error_message = gr.HighlightedText(value=None, visible=False)
-    execute_btn = gr.Button("Execute")
+    with gr.Tab("Toolkit"):
+        for t in all_tasks.values():
+            t.render()
+        with gr.Row():
+            add_task_btn = gr.Button("Add task")
+            remove_task_btn = gr.Button("Remove task")
+        error_message = gr.HighlightedText(value=None, visible=False)
+        execute_btn = gr.Button("Execute")
 
-    # Edit layout
-    add_task_btn.click(
-        a.add_task,
-        inputs=Tasks.visibilities(),
-        outputs=Tasks.gr_components() + Tasks.visibilities(),
-    )
-    remove_task_btn.click(
-        a.remove_task,
-        inputs=Tasks.visibilities(),
-        outputs=Tasks.gr_components() + Tasks.visibilities(),
-    )
+        # Edit layout
+        add_task_btn.click(
+            a.add_task,
+            inputs=Tasks.visibilities(),
+            outputs=Tasks.gr_components() + Tasks.visibilities(),
+        )
+        remove_task_btn.click(
+            a.remove_task,
+            inputs=Tasks.visibilities(),
+            outputs=Tasks.gr_components() + Tasks.visibilities(),
+        )
 
-    # Sequential execution
-    execution_event = execute_btn.click(
-        # Clear error message
-        lambda: gr.HighlightedText.update(value=None, visible=False),
-        inputs=[],
-        outputs=[error_message],
-    )
-    prev_tasks = []
-    for i, task in all_tasks.items():
-        execution_event = execution_event.then(
-            a.execute_task,
-            inputs=[task.component_id, task.active_index, error_message]
-            + task.inputs
-            + [t.active_index for t in prev_tasks]
-            + [o for t in prev_tasks for o in t.outputs],
-            outputs=task.outputs + [error_message],
+        # Sequential execution
+        execution_event = execute_btn.click(
+            # Clear error message
+            lambda: gr.HighlightedText.update(value=None, visible=False),
+            inputs=[],
+            outputs=[error_message],
         )
-        prev_tasks.append(task)
+        prev_tasks = []
+        for i, task in all_tasks.items():
+            execution_event = execution_event.then(
+                a.execute_task,
+                inputs=[task.component_id, task.active_index, error_message]
+                + task.inputs
+                + [t.active_index for t in prev_tasks]
+                + [o for t in prev_tasks for o in t.outputs],
+                outputs=task.outputs + [error_message],
+            )
+            prev_tasks.append(task)
+    with gr.Tab("Example: Hello world"):
+        hello.render()
 
 demo.launch()

components.py

@@ -24,19 +24,19 @@ class Component(ABC):
     def render(self) -> None:
         self.component_id = gr.Number(value=self._id, visible=False)
         self.visible = gr.Number(0, visible=False)
-        self.gr_component = self._render(self._id)
+        self.gr_component = self._render()
 
     @abstractmethod
-    def _render(self, id_: int) -> Union[gr.Box, gr.Textbox]:
+    def _render(self) -> Union[gr.Box, gr.Textbox]:
         ...
 
 
 class Input(Component):
     vname = "v"
 
-    def _render(self, id_: int) -> gr.Textbox:
+    def _render(self) -> gr.Textbox:
         self.output = gr.Textbox(
-            label=f"Input: {{{self.vname}{id_}}}",
+            label=f"Input: {{{self.vname}{self._id}}}",
             interactive=True,
             placeholder="Variable value",
             visible=False,
@@ -44,15 +44,15 @@ class Input(Component):
         return self.output
 
 
-class TaskComponent(ABC):
+class TaskComponent(Component, ABC):
     vname = "t"
 
-    def __init__(self):
+    def __init__(self, id_: int, value: str = "", visible: bool = False):
+        super().__init__(id_)
+        self._initial_value = value
+        self._initial_visbility = visible
         self.name: str
-        self.gr_component: gr.Box
         self.input: gr.Textbox
-        self.output: gr.Textbox
-        self._source = self.__class__.__name__
 
     def format_input(self, input: str, vars_in_scope: Dict[str, Any]) -> str:
         input = input.strip()
@@ -64,13 +64,6 @@ class TaskComponent(ABC):
             )
         return input.format(**vars_in_scope)
 
-    def render(self, id_: int) -> None:
-        self.gr_component = self._render(id_)
-
-    @abstractmethod
-    def _render(self, id_) -> gr.Box:
-        ...
-
     @property
     def n_inputs(self) -> int:
         return len(self.inputs)
@@ -88,17 +81,18 @@ class TaskComponent(ABC):
 class AITask(TaskComponent):
     name = "AI Task"
 
-    def _render(self, id_: int) -> gr.Box:
-        with gr.Box(visible=False) as gr_component:
+    def _render(self) -> gr.Box:
+        with gr.Box(visible=self._initial_visbility) as gr_component:
             with gr.Row():
                 self.input = gr.Textbox(
                     label="Instructions",
                     lines=10,
                     interactive=True,
                     placeholder="What would you like ChatGPT to do?",
+                    value=self._initial_value,
                 )
                 self.output = gr.Textbox(
-                    label=f"Output: {{{self.vname}{id_}}}",
+                    label=f"Output: {{{self.vname}{self._id}}}",
                     lines=10,
                     interactive=True,
                 )
@@ -116,11 +110,12 @@ class AITask(TaskComponent):
 class CodeTask(TaskComponent):
     name = "Code Task"
 
-    def _render(self, id_: int) -> gr.Column:
-        with gr.Column(visible=False) as gr_component:
+    def _render(self) -> gr.Column:
+        with gr.Column(visible=self._initial_visbility) as gr_component:
             code_prompt = gr.Textbox(
                 label="What would you like to do?",
                 interactive=True,
+                value=self._initial_value,
             )
             generate_code = gr.Button("Generate code")
             with gr.Row():
@@ -148,7 +143,7 @@ class CodeTask(TaskComponent):
                     )
                 with gr.Column():
                     self.output = gr.Textbox(
-                        label=f"Output: {{{self.vname}{id_}}}",
+                        label=f"Output: {{{self.vname}{self._id}}}",
                         lines=10,
                         interactive=True,
                     )
@@ -287,10 +282,10 @@ class Task(Component):
 
     def __init__(self, id_: int):
         super().__init__(id_)
-        self._inner_tasks = [t() for t in self.available_tasks]
+        self._inner_tasks = [t(id_) for t in self.available_tasks]
         self.gr_component: gr.Box
 
-    def _render(self, id_: int) -> gr.Box:
+    def _render(self) -> gr.Box:
         with gr.Box(visible=False) as gr_component:
             self.active_index = gr.Dropdown(
                 [AITask.name, CodeTask.name],
@@ -298,7 +293,7 @@ class Task(Component):
                 type="index",
             )
             for t in self._inner_tasks:
-                t.render(id_)
+                t.render()
 
             self.active_index.select(
                 self.pick_task,

examples/actions.py

@@ -0,0 +1,45 @@
+import gradio as gr
+
+from components import Task
+
+demo_tasks = {}
+
+
+def execute_task(demo_id: str, task_id: int, error_value, *args):
+    error_update = gr.HighlightedText.update(
+        value=error_value, visible=error_value is not None
+    )
+
+    if error_value:
+        return ["", error_update]
+
+    task_id = int(task_id)
+    n_inputs = demo_tasks[demo_id][task_id].n_inputs
+
+    task_inputs = args[:n_inputs]
+    prev_task_outputs = args[n_inputs:]
+
+    non_empty_inputs = [i for i in task_inputs if i]
+    if not non_empty_inputs:
+        return ["", error_update]
+
+    # Put task outputs in a dictionary with names.
+    vars_in_scope = {f"{Task.vname}{i}": o for i, o in enumerate(prev_task_outputs)}
+
+    try:
+        # Task logic gets inserted into the right index
+        output = demo_tasks[demo_id][task_id].execute(
+            *task_inputs, vars_in_scope=vars_in_scope
+        )
+        return [output, error_update]
+    except Exception as e:
+        import traceback
+
+        print(traceback.format_tb(e.__traceback__))
+        return [
+            "ERROR",
+            gr.HighlightedText.update(
+                value=[(f"Error in Task {task_id} :: {e}", "ERROR")],
+                visible=True,
+            ),
+        ]

examples/hello.py

@@ -0,0 +1,38 @@
+import gradio as gr
+from components import AITask, CodeTask
+
+import examples.actions as ea
+
+
+DEMO_ID = "hello"
+tasks = [
+    CodeTask(0, "Say hello world", visible=True),
+    AITask(1, "Explain this to me: {t0}", visible=True),
+]
+ea.demo_tasks[DEMO_ID] = tasks
+
+
+def render():
+    demo_id = gr.Textbox(DEMO_ID, visible=False)
+    tasks[0].render()
+    tasks[1].render()
+    error_message = gr.HighlightedText(value=None, visible=False)
+    execute_btn = gr.Button("Execute")
+
+    # Sequential execution
+    execution_event = execute_btn.click(
+        # Clear error message
+        lambda: gr.HighlightedText.update(value=None, visible=False),
+        inputs=[],
+        outputs=[error_message],
+    )
+    prev_tasks = []
+    for task in tasks:
+        execution_event = execution_event.then(
+            ea.execute_task,
+            inputs=[demo_id, task.component_id, error_message]
+            + task.inputs
+            + [t.output for t in prev_tasks],
+            outputs=[task.output, error_message],
+        )
+        prev_tasks.append(task)