feat: improves ui

tdagent/grchat.py

@@ -550,8 +550,15 @@ def _read_markdown_body_as_html(path: str = "README.md") -> str:
 
 
 ## UI components ##
-
-
+custom_css = """
+.main-header {
+    background: linear-gradient(135deg, #00a388 0%, #ffae00 100%);
+    padding: 30px;
+    border-radius: 5px;
+    margin-bottom: 20px;
+    text-align: center;
+}
+"""
 with (
     gr.Blocks(
         theme=gr_themes.Origin(
@@ -562,177 +569,193 @@ with (
         title="TDAgent",
         fill_height=True,
         fill_width=True,
+        css=custom_css,
     ) as gr_app,
-    gr.Tabs(),
 ):
-    with gr.TabItem("About"):
-        html_content = _read_markdown_body_as_html("README.md")
-        gr.Markdown(html_content, elem_id="about-content")
-
-    with gr.TabItem("TDAgent"), gr.Row():
-        with gr.Column(scale=1):
-            with gr.Accordion("🔌  MCP Servers", open=False):
-                mcp_list = MutableCheckBoxGroup(
-                    values=[
-                        MutableCheckBoxGroupEntry(
-                            name="TDAgent tools",
-                            value="https://agents-mcp-hackathon-tdagenttools.hf.space/gradio_api/mcp/sse",
-                        ),
-                    ],
-                    label="MCP Servers",
-                    new_value_label="MCP endpoint",
-                    new_name_label="MCP endpoint name",
-                    new_value_placeholder="https://my-cool-mcp-server.com/mcp/sse",
-                    new_name_placeholder="Swiss army knife of MCPs",
-                )
-
-            with gr.Accordion("⚙️  Provider Configuration", open=True):
-                model_provider = gr.Dropdown(
-                    choices=list(MODEL_OPTIONS.keys()),
-                    value=None,
-                    label="Select Model Provider",
-                )
-
-                ## Amazon Bedrock Configuration ##
-                with gr.Group(visible=False) as aws_bedrock_conf_group:
-                    aws_access_key_textbox = gr.Textbox(
-                        label="AWS Access Key ID",
-                        type="password",
-                        placeholder="Enter your AWS Access Key ID",
-                    )
-                    aws_secret_key_textbox = gr.Textbox(
-                        label="AWS Secret Access Key",
-                        type="password",
-                        placeholder="Enter your AWS Secret Access Key",
-                    )
-                    aws_region_dropdown = gr.Dropdown(
-                        label="AWS Region",
-                        choices=[
-                            "us-east-1",
-                            "us-west-2",
-                            "eu-west-1",
-                            "eu-central-1",
-                            "ap-southeast-1",
+    gr.HTML(
+        """
+    <div class="main-header">
+        <h1>👩‍💻 TDAgentTools & TDAgent 👨‍💻</h1>
+        <p style="font-size: 1.2em; margin: 10px 0 0 0;">
+            Empowering Cybersecurity with Agentic AI
+        </p>
+    </div>
+    """,
+    )
+    with gr.Tabs():
+        with gr.TabItem("About"), gr.Row():
+            html_content = _read_markdown_body_as_html("README.md")
+            gr.Markdown(html_content)
+
+        with gr.TabItem("TDAgent"), gr.Row():
+            with gr.Column(scale=1):
+                with gr.Accordion("🔌  MCP Servers", open=False):
+                    mcp_list = MutableCheckBoxGroup(
+                        values=[
+                            MutableCheckBoxGroupEntry(
+                                name="TDAgent tools",
+                                value="https://agents-mcp-hackathon-tdagenttools.hf.space/gradio_api/mcp/sse",
+                            ),
                         ],
-                        value="eu-west-1",
-                    )
-                    aws_session_token_textbox = gr.Textbox(
-                        label="AWS Session Token",
-                        type="password",
-                        placeholder="Enter your AWS session token",
+                        label="MCP Servers",
+                        new_value_label="MCP endpoint",
+                        new_name_label="MCP endpoint name",
+                        new_value_placeholder="https://my-cool-mcp-server.com/mcp/sse",
+                        new_name_placeholder="Swiss army knife of MCPs",
                     )
 
-                ## Huggingface Configuration ##
-                with gr.Group(visible=False) as hf_conf_group:
-                    hf_token = gr.Textbox(
-                        label="HuggingFace Token",
-                        type="password",
-                        placeholder="Enter your Hugging Face Access Token",
+                with gr.Accordion("⚙️  Provider Configuration", open=True):
+                    model_provider = gr.Dropdown(
+                        choices=list(MODEL_OPTIONS.keys()),
+                        value=None,
+                        label="Select Model Provider",
                     )
 
-                ## Azure Configuration ##
-                with gr.Group(visible=False) as azure_conf_group:
-                    azure_endpoint = gr.Textbox(
-                        label="Azure OpenAI Endpoint",
+                    ## Amazon Bedrock Configuration ##
+                    with gr.Group(visible=False) as aws_bedrock_conf_group:
+                        aws_access_key_textbox = gr.Textbox(
+                            label="AWS Access Key ID",
+                            type="password",
+                            placeholder="Enter your AWS Access Key ID",
+                        )
+                        aws_secret_key_textbox = gr.Textbox(
+                            label="AWS Secret Access Key",
+                            type="password",
+                            placeholder="Enter your AWS Secret Access Key",
+                        )
+                        aws_region_dropdown = gr.Dropdown(
+                            label="AWS Region",
+                            choices=[
+                                "us-east-1",
+                                "us-west-2",
+                                "eu-west-1",
+                                "eu-central-1",
+                                "ap-southeast-1",
+                            ],
+                            value="eu-west-1",
+                        )
+                        aws_session_token_textbox = gr.Textbox(
+                            label="AWS Session Token",
+                            type="password",
+                            placeholder="Enter your AWS session token",
+                        )
+
+                    ## Huggingface Configuration ##
+                    with gr.Group(visible=False) as hf_conf_group:
+                        hf_token = gr.Textbox(
+                            label="HuggingFace Token",
+                            type="password",
+                            placeholder="Enter your Hugging Face Access Token",
+                        )
+
+                    ## Azure Configuration ##
+                    with gr.Group(visible=False) as azure_conf_group:
+                        azure_endpoint = gr.Textbox(
+                            label="Azure OpenAI Endpoint",
+                            type="text",
+                            placeholder="Enter your Azure OpenAI Endpoint",
+                        )
+                        azure_api_token = gr.Textbox(
+                            label="Azure Access Token",
+                            type="password",
+                            placeholder="Enter your Azure OpenAI Access Token",
+                        )
+                        azure_api_version = gr.Textbox(
+                            label="Azure OpenAI API Version",
+                            type="text",
+                            placeholder="Enter your Azure OpenAI API Version",
+                            value="2024-12-01-preview",
+                        )
+
+                with gr.Accordion("🧠  Model Configuration", open=True):
+                    model_id_dropdown = gr.Dropdown(
+                        label="Select known model id or type your own below",
+                        choices=[],
+                        visible=False,
+                    )
+                    model_id_textbox = gr.Textbox(
+                        label="Model ID",
                         type="text",
-                        placeholder="Enter your Azure OpenAI Endpoint",
+                        placeholder="Enter the model ID",
+                        visible=False,
+                        interactive=True,
                     )
-                    azure_api_token = gr.Textbox(
-                        label="Azure Access Token",
-                        type="password",
-                        placeholder="Enter your Azure OpenAI Access Token",
+
+                    # Agent configuration options
+                    with gr.Group():
+                        agent_system_message_radio = gr.Radio(
+                            choices=list(AGENT_SYSTEM_MESSAGES.keys()),
+                            value=next(iter(AGENT_SYSTEM_MESSAGES.keys())),
+                            label="Agent type",
+                            info=(
+                                "Changes the system message to pre-condition the agent"
+                                " to act in a desired way."
+                            ),
+                        )
+                        agent_trace_tools_checkbox = gr.Checkbox(
+                            value=False,
+                            label="Trace tool calls",
+                            info=(
+                                "Add the invoked tools trace at the end of the"
+                                " message"
+                            ),
+                        )
+
+                    # Initialize the temperature and max tokens based on model specs
+                    temperature = gr.Slider(
+                        label="Temperature",
+                        minimum=0.0,
+                        maximum=1.0,
+                        value=0.8,
+                        step=0.1,
                     )
-                    azure_api_version = gr.Textbox(
-                        label="Azure OpenAI API Version",
-                        type="text",
-                        placeholder="Enter your Azure OpenAI API Version",
-                        value="2024-12-01-preview",
+                    max_tokens = gr.Slider(
+                        label="Max Tokens",
+                        minimum=128,
+                        maximum=8192,
+                        value=2048,
+                        step=64,
                     )
 
-            with gr.Accordion("🧠  Model Configuration", open=True):
-                model_id_dropdown = gr.Dropdown(
-                    label="Select known model id or type your own below",
-                    choices=[],
+                connect_aws_bedrock_btn = gr.Button(
+                    "🔌  Connect to Bedrock",
+                    variant="primary",
                     visible=False,
                 )
-                model_id_textbox = gr.Textbox(
-                    label="Model ID",
-                    type="text",
-                    placeholder="Enter the model ID",
+                connect_hf_btn = gr.Button(
+                    "🔌  Connect to Huggingface 🤗",
+                    variant="primary",
                     visible=False,
-                    interactive=True,
                 )
-
-                # Agent configuration options
-                with gr.Group():
-                    agent_system_message_radio = gr.Radio(
-                        choices=list(AGENT_SYSTEM_MESSAGES.keys()),
-                        value=next(iter(AGENT_SYSTEM_MESSAGES.keys())),
-                        label="Agent type",
-                        info=(
-                            "Changes the system message to pre-condition the agent"
-                            " to act in a desired way."
-                        ),
-                    )
-                    agent_trace_tools_checkbox = gr.Checkbox(
-                        value=False,
-                        label="Trace tool calls",
-                        info="Add the invoked tools trace at the end of the message",
-                    )
-
-                # Initialize the temperature and max tokens based on model specs
-                temperature = gr.Slider(
-                    label="Temperature",
-                    minimum=0.0,
-                    maximum=1.0,
-                    value=0.8,
-                    step=0.1,
+                connect_azure_btn = gr.Button(
+                    "🔌  Connect to Azure",
+                    variant="primary",
+                    visible=False,
                 )
-                max_tokens = gr.Slider(
-                    label="Max Tokens",
-                    minimum=128,
-                    maximum=8192,
-                    value=2048,
-                    step=64,
+
+                status_textbox = gr.Textbox(
+                    label="Connection Status",
+                    interactive=False,
                 )
 
-            connect_aws_bedrock_btn = gr.Button(
-                "🔌  Connect to Bedrock",
-                variant="primary",
-                visible=False,
-            )
-            connect_hf_btn = gr.Button(
-                "🔌  Connect to Huggingface 🤗",
-                variant="primary",
-                visible=False,
-            )
-            connect_azure_btn = gr.Button(
-                "🔌  Connect to Azure",
-                variant="primary",
-                visible=False,
+            with gr.Column(scale=2):
+                chat_interface = gr.ChatInterface(
+                    fn=gr_chat_function,
+                    type="messages",
+                    examples=[],  # Add examples if needed
+                    description="A simple threat analyst agent with MCP tools.",
+                )
+        with gr.TabItem("Demo"):
+            gr.Markdown(
+                """
+            This is a demo of TDAgent, a simple threat analyst agent with MCP tools.
+            You can configure the agent to use different LLM providers and connect to
+            various MCP servers to access tools.
+            """,
             )
-
-            status_textbox = gr.Textbox(label="Connection Status", interactive=False)
-
-        with gr.Column(scale=2):
-            chat_interface = gr.ChatInterface(
-                fn=gr_chat_function,
-                type="messages",
-                examples=[],  # Add examples if needed
-                title="👩‍💻 TDAgent 👨‍💻",
-                description="A simple threat analyst agent with MCP tools.",
+            gr.HTML(
+                """<iframe width="560" height="315" src="https://youtu.be/C6Z9EOW-3lE?feature=shared" frameborder="0" allowfullscreen></iframe>""",  # noqa: E501
             )
-    with gr.TabItem("Demo"):
-        gr.Markdown(
-            """
-        This is a demo of TDAgent, a simple threat analyst agent with MCP tools.
-        You can configure the agent to use different LLM providers and connect to
-        various MCP servers to access tools.
-        """,
-        )
-        gr.HTML(
-            """<iframe width="560" height="315" src="https://youtu.be/C6Z9EOW-3lE?feature=shared" frameborder="0" allowfullscreen></iframe>""",  # noqa: E501
-        )
 
     ## UI Events ##