[feat] Add tabs to the UI, change descripiton to title only in ImageOutput

src/reagentai/models/output.py

@@ -7,8 +7,8 @@ class ImageOutput(BaseModel):
 
     Attributes:
         file_path (str): The file path to the image output.
-        description (str): A description or title for the image output.
+        title (str): A title for the image output.
     """
 
     file_path: str
-    description: str
+    title: str

src/reagentai/tools/image.py

@@ -12,15 +12,13 @@
 logger = logging.getLogger(__name__)
 
 
-def smiles_to_image(
-    smiles: str, image_description: str, size: tuple[int, int] = (600, 300)
-) -> ImageOutput:
+def smiles_to_image(smiles: str, title: str, size: tuple[int, int] = (600, 300)) -> ImageOutput:
     """
     Generate an image from a SMILES string.
 
     Args:
         smiles (str): The SMILES string to convert to an image.
-        image_description (str): A description or title for the generated image.
+        title (str): A title for the generated image.
         size (tuple[int, int]): The size of the image in pixels. Default is (600, 300).
 
     Returns:
@@ -41,16 +39,16 @@ def smiles_to_image(
         temp_file_path = tmp_file.name
 
     logger.info(f"Generated image for SMILES: {smiles}, saved to {temp_file_path}")
-    return ImageOutput(file_path=temp_file_path, description=image_description)
+    return ImageOutput(file_path=temp_file_path, title=title)
 
 
-def route_to_image(route: Route, image_description: str) -> ImageOutput:
+def route_to_image(route: Route, title: str) -> ImageOutput:
     """
     Generate an image from a retrosynthesis route.
 
     Args:
         route (Route): The retrosynthesis route to convert to an image.
-        image_description (str): A description or title for the generated image.
+        title (str): A title for the generated image.
 
     Returns:
         ImageOutput: An object containing the file path to the generated image and its description.
@@ -64,4 +62,4 @@ def route_to_image(route: Route, image_description: str) -> ImageOutput:
         temp_file_path = tmp_file.name
 
     logger.info(f"Generated image for route, saved to {temp_file_path}")
-    return ImageOutput(file_path=temp_file_path, description=image_description)
+    return ImageOutput(file_path=temp_file_path, title=title)

src/reagentai/ui/app.py

@@ -23,33 +23,35 @@ def create_settings_panel(
         tuple: A tuple containing the model dropdown, usage counter, and tool display components.
     """
     with gr.Column(scale=2, elem_id="col"):
-        gr.Markdown("### Model Settings")
-        model_dropdown = gr.Dropdown(
-            label="Select LLM Model",
-            choices=AVAILABLE_LLM_MODELS,
-            value=AVAILABLE_LLM_MODELS[0],
-        )
-        usage_counter = gr.Number(
-            label="Total Token Usage",
-            value=0,
-            precision=0,
-            interactive=False,
-            visible=True,
-        )
-
-        gr.Examples(
-            examples=EXAMPLE_PROMPTS,
-            inputs=chat_input_component,
-            label="Example Prompts",
-        )
-
-        gr.Markdown("### Tool Usage History")
-        tool_display = gr.Chatbot(
-            type="messages",
-            label="Tool Usage",
-            layout="panel",
-            elem_id="tool_display",
-        )
+        with gr.Tab("Settings"):
+            gr.Markdown("### Model Settings")
+            model_dropdown = gr.Dropdown(
+                label="Select LLM Model",
+                choices=AVAILABLE_LLM_MODELS,
+                value=AVAILABLE_LLM_MODELS[0],
+            )
+            usage_counter = gr.Number(
+                label="Total Token Usage",
+                value=0,
+                precision=0,
+                interactive=False,
+                visible=True,
+            )
+
+            gr.Examples(
+                examples=EXAMPLE_PROMPTS,
+                inputs=chat_input_component,
+                label="Example Prompts",
+                examples_per_page=4,
+            )
+        with gr.Tab("Tool Usage"):
+            gr.Markdown("### Tool Usage History")
+            tool_display = gr.Chatbot(
+                type="messages",
+                label="Tool Usage",
+                layout="panel",
+                elem_id="tool_display",
+            )
 
     return model_dropdown, usage_counter, tool_display
 
@@ -180,7 +182,7 @@ def run_agent(
                     if call.tool_name in ["smiles_to_image", "route_to_image"]:
                         output: ImageOutput = call.content
                         metadata = {
-                            "title": output.description,
+                            "title": output.title,
                             "status": "done",
                         }
                         gr_message = {