Update ui

components.py

@@ -122,16 +122,17 @@ class CodeTask(TaskComponent):
         super().__init__(id_, value, visible)
         self._initial_code_value = code_value
 
-    def _render(self) -> gr.Column:
-        with gr.Column(visible=self._initial_visbility) as gr_component:
-            self.code_prompt = gr.Textbox(
-                label="What would you like to do?",
-                interactive=True,
-                value=self._initial_code_value,
-            )
-            generate_code = gr.Button("Generate code")
+    def _render(self) -> gr.Box:
+        with gr.Box(visible=self._initial_visbility) as gr_component:
             with gr.Row():
                 with gr.Column():
+                    self.code_prompt = gr.Textbox(
+                        label="What would you like to do?",
+                        interactive=True,
+                        value=self._initial_code_value,
+                        lines=3,
+                    )
+                    generate_code = gr.Button("Generate code")
                     with gr.Accordion(label="Generated code", open=False) as accordion:
                         self.accordion = accordion
                         self.raw_output = gr.Textbox(
@@ -158,7 +159,7 @@ class CodeTask(TaskComponent):
                 with gr.Column():
                     self.output = gr.Textbox(
                         label=f"Output: {{{self.vname}{self._id}}}",
-                        lines=10,
+                        lines=13,
                         interactive=True,
                     )
 

examples/authenticate_google.py

@@ -32,20 +32,22 @@ demo_tasks[DEMO_ID] = tasks
 
 def render():
     with gr.Tab("Example: Authenticate to google"):
+        demo_id = gr.Textbox(DEMO_ID, visible=False)
         with gr.Box():
-            demo_id = gr.Textbox(DEMO_ID, visible=False)
             gr.Dropdown(
                 value=CodeTask.name,
                 label="Pick a new Task",
                 interactive=False,
             )
             tasks[0].render()
+        with gr.Box():
             gr.Dropdown(
                 value=CodeTask.name,
                 label="Pick a new Task",
                 interactive=False,
             )
             tasks[1].render()
+        with gr.Box():
             gr.Dropdown(
                 value=AITask.name,
                 label="Pick a new Task",

examples/best_clubs.py

@@ -33,20 +33,22 @@ demo_tasks[DEMO_ID] = tasks
 
 def render():
     with gr.Tab("Example: Nightlife in NYC"):
+        demo_id = gr.Textbox(DEMO_ID, visible=False)
         with gr.Box():
-            demo_id = gr.Textbox(DEMO_ID, visible=False)
             gr.Dropdown(
                 value=CodeTask.name,
                 label="Pick a new Task",
                 interactive=False,
             )
             tasks[0].render()
+        with gr.Box():
             gr.Dropdown(
                 value=CodeTask.name,
                 label="Pick a new Task",
                 interactive=False,
             )
             tasks[1].render()
+        with gr.Box():
             gr.Dropdown(
                 value=AITask.name,
                 label="Pick a new Task",

examples/generate_ad.py

@@ -47,26 +47,29 @@ demo_tasks[DEMO_ID] = tasks
 
 def render():
     with gr.Tab("Example: Generate an ad"):
+        demo_id = gr.Textbox(DEMO_ID, visible=False)
         with gr.Box():
-            demo_id = gr.Textbox(DEMO_ID, visible=False)
             gr.Dropdown(
                 value=CodeTask.name,
                 label="Pick a new Task",
                 interactive=False,
             )
             tasks[0].render()
+        with gr.Box():
             gr.Dropdown(
                 value=AITask.name,
                 label="Pick a new Task",
                 interactive=False,
             )
             tasks[1].render()
+        with gr.Box():
             gr.Dropdown(
                 value=CodeTask.name,
                 label="Pick a new Task",
                 interactive=False,
             )
             tasks[2].render()
+        with gr.Box():
             gr.Dropdown(
                 value=AITask.name,
                 label="Pick a new Task",

examples/summarize_website.py

@@ -19,14 +19,15 @@ demo_tasks[DEMO_ID] = tasks
 
 def render():
     with gr.Tab("Example: Summarize a website"):
+        demo_id = gr.Textbox(DEMO_ID, visible=False)
         with gr.Box():
-            demo_id = gr.Textbox(DEMO_ID, visible=False)
             gr.Dropdown(
                 value=CodeTask.name,
                 label="Pick a new Task",
                 interactive=False,
             )
             tasks[0].render()
+        with gr.Box():
             gr.Dropdown(
                 value=AITask.name,
                 label="Pick a new Task",