Skip to content

Adding duration, step number, token counts, and nested structure to gradio UI #270

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Closed
wants to merge 1 commit into from
Closed

Adding duration, step number, token counts, and nested structure to gradio UI #270

wants to merge 1 commit into from

Conversation

yvrjsharma
Copy link
Member

@yvrjsharma yvrjsharma commented Jan 19, 2025 •
edited
Loading

New Feature: Enhanced Gradio Agent UI with Nested Thoughts and Step metrics

Motivation

The current Gradio UI for displaying agent outputs doesn't take full advantage of Gradio's new agentic UI features, which makes it harder to understand agent reasoning and track performance. Specifically:

  1. Tool calls and their results (execution logs, errors) are displayed as separate messages instead of being properly nested
  2. There's no clear display of time taken by each step
  3. Important metrics like token counts and step numbers are not visible

Feature Description

This PR enhances the Gradio UI to:

  1. Properly nest execution logs and errors under their parent tool calls using Gradio's parent_id metadata
  2. Display duration for each agent step/tool call
  3. Show step numbers and token counts for tracking
  4. add full height mode and share mode by default
  5. Improve overall readability of agent outputs

Layout Example

Before this PR, agent outputs looked like:

🛠️ Used tool python_interpreter
Code execution failed...

After this PR, outputs are properly nested with metrics:

🛠️ Used tool python_interpreter (Step 3 | Input-tokens: 1,234 Output-tokens: 567) 1.6s
└─ 📝 Execution Logs
└─ 💥 Error (if any)

albertvillanova
albertvillanova reviewed Jan 20, 2025
View reviewed changes
Copy link
Member

@albertvillanova albertvillanova left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for the enhancement, @yvrjsharma.

Please note there are some conflicts with the main branch that need to be addressed.

@yvrjsharma
Add enhanced gradio UI with nested agents calls, execution-logs, errors
d8e7091 
- Add virtual separation between steps
- Highlight final answer as required in internal discussion
- Show step numbers and token counts
- Include step duration tracking
- Improve message display sturucture

Adding duration, step number, token counts, and nested structure to agents response
@yvrjsharma
Copy link
Member Author

Yes, looking into this now, thanks for pointing it out @albertvillanova

Please note there are some conflicts with the main branch that need to be addressed.

@yvrjsharma
Copy link
Member Author

yvrjsharma commented Jan 21, 2025 •
edited
Loading

I observed that the latest code updates lack input_token_count and output_token_count in the step_log. Is my observation accurate, @aymeric-roucher? I'm a bit confused because I can still find the token counts in the generated logs, but they're absent in the ActionStepLog.

@yvrjsharma yvrjsharma force-pushed the add-new-gradio-agentic-ui branch from dcc7611 to d8e7091 Compare January 21, 2025 19:58
@matthewcarbone matthewcarbone mentioned this pull request Jan 22, 2025
Closed
abidlabs
abidlabs reviewed Jan 28, 2025
View reviewed changes
src/smolagents/gradio_ui.py
@@ -58,14 +107,21 @@ def stream_to_gradio(
additional_args: Optional[dict] = None,
):
"""Runs an agent with the given task and streams the messages from the agent as gradio ChatMessages."""
if not _is_package_available("gradio"):
raise ModuleNotFoundError(
"Please install 'gradio' extra to use the GradioUI: `pip install 'smolagents[audio]'`"
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We should keep this message here, no? But there's a typo: smolagents[audio] -> smolagents[gradio]

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thank you @abidlabs! Changing this in #384

@aymeric-roucher
Copy link
Collaborator

Closing this PR since #384 merges it! thanks a lot @yvrjsharma !

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@abidlabs abidlabs abidlabs left review comments

@albertvillanova albertvillanova albertvillanova left review comments

@aymeric-roucher aymeric-roucher Awaiting requested review from aymeric-roucher

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
4 participants
@yvrjsharma @aymeric-roucher @abidlabs @albertvillanova