Skip to content

Conversation

yvrjsharma
Copy link
Member

Changes made:

  • Added session-specific agent creation/storage
  • UI Layout:
  1. Added a sidebar layout with dedicated sections
  2. Added a Submit button with proper state management
  3. Added branding and improved input area
  4. Added code to disable submit button during processing. Re-enable buttons when processing is complete.
  5. loading animation while the chatbot ui awaits next agent step

All these changes are inspired by the open-deep-research implementation while maintaining compatibility with the original API.

@albertvillanova albertvillanova changed the title Added sidebar layout and sessiosn state management for agent Added sidebar layout and session state management for agent Feb 26, 2025
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!

I have just fixed the style by running make style.

Please note that when launching the application:

GradioUI(agent).launch()

I get an error:

ERROR: Exception in ASGI application

and more concretely:

AttributeError: 'NoneType' object has no attribute 'wait'

Here, the complete stack trace:

ERROR:    Exception in ASGI application
Traceback (most recent call last):
  File "/huggingface/smolagents/examples/open_deep_research/venv/lib/python3.12/site-packages/starlette/responses.py", line 268, in __call__
    await wrap(partial(self.listen_for_disconnect, receive))
  File "/huggingface/smolagents/examples/open_deep_research/venv/lib/python3.12/site-packages/starlette/responses.py", line 264, in wrap
    await func()
  File "/huggingface/smolagents/examples/open_deep_research/venv/lib/python3.12/site-packages/starlette/responses.py", line 233, in listen_for_disconnect
    message = await receive()
              ^^^^^^^^^^^^^^^
  File "/huggingface/smolagents/examples/open_deep_research/venv/lib/python3.12/site-packages/uvicorn/protocols/http/h11_impl.py", line 531, in receive
    await self.message_event.wait()
  File "/home/albert/.pyenv/versions/3.12.7/lib/python3.12/asyncio/locks.py", line 212, in wait
    await fut
asyncio.exceptions.CancelledError: Cancelled by cancel scope 7f9d063544a0

During handling of the above exception, another exception occurred:

  + Exception Group Traceback (most recent call last):
  |   File "/huggingface/smolagents/examples/open_deep_research/venv/lib/python3.12/site-packages/uvicorn/protocols/http/h11_impl.py", line 403, in run_asgi
  |     result = await app(  # type: ignore[func-returns-value]
  |              ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  |   File "/huggingface/smolagents/examples/open_deep_research/venv/lib/python3.12/site-packages/uvicorn/middleware/proxy_headers.py", line 60, in __call__
  |     return await self.app(scope, receive, send)
  |            ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  |   File "/huggingface/smolagents/examples/open_deep_research/venv/lib/python3.12/site-packages/fastapi/applications.py", line 1054, in __call__
  |     await super().__call__(scope, receive, send)
  |   File "/huggingface/smolagents/examples/open_deep_research/venv/lib/python3.12/site-packages/starlette/applications.py", line 112, in __call__
  |     await self.middleware_stack(scope, receive, send)
  |   File "/huggingface/smolagents/examples/open_deep_research/venv/lib/python3.12/site-packages/starlette/middleware/errors.py", line 187, in __call__
  |     raise exc
  |   File "/huggingface/smolagents/examples/open_deep_research/venv/lib/python3.12/site-packages/starlette/middleware/errors.py", line 165, in __call__
  |     await self.app(scope, receive, _send)
  |   File "/huggingface/smolagents/examples/open_deep_research/venv/lib/python3.12/site-packages/gradio/route_utils.py", line 789, in __call__
  |     await self.app(scope, receive, send)
  |   File "/huggingface/smolagents/examples/open_deep_research/venv/lib/python3.12/site-packages/starlette/middleware/exceptions.py", line 62, in __call__
  |     await wrap_app_handling_exceptions(self.app, conn)(scope, receive, send)
  |   File "//huggingface/smolagents/examples/open_deep_research/venv/lib/python3.12/site-packages/starlette/_exception_handler.py", line 53, in wrapped_app
  |     raise exc
  |   File "/huggingface/smolagents/examples/open_deep_research/venv/lib/python3.12/site-packages/starlette/_exception_handler.py", line 42, in wrapped_app
  |     await app(scope, receive, sender)
  |   File "/huggingface/smolagents/examples/open_deep_research/venv/lib/python3.12/site-packages/starlette/routing.py", line 715, in __call__
  |     await self.middleware_stack(scope, receive, send)
  |   File "/huggingface/smolagents/examples/open_deep_research/venv/lib/python3.12/site-packages/starlette/routing.py", line 735, in app
  |     await route.handle(scope, receive, send)
  |   File "/huggingface/smolagents/examples/open_deep_research/venv/lib/python3.12/site-packages/starlette/routing.py", line 288, in handle
  |     await self.app(scope, receive, send)
  |   File "/huggingface/smolagents/examples/open_deep_research/venv/lib/python3.12/site-packages/starlette/routing.py", line 76, in app
  |     await wrap_app_handling_exceptions(app, request)(scope, receive, send)
  |   File "/huggingface/smolagents/examples/open_deep_research/venv/lib/python3.12/site-packages/starlette/_exception_handler.py", line 53, in wrapped_app
  |     raise exc
  |   File "/huggingface/smolagents/examples/open_deep_research/venv/lib/python3.12/site-packages/starlette/_exception_handler.py", line 42, in wrapped_app
  |     await app(scope, receive, sender)
  |   File "/huggingface/smolagents/examples/open_deep_research/venv/lib/python3.12/site-packages/starlette/routing.py", line 74, in app
  |     await response(scope, receive, send)
  |   File "/huggingface/smolagents/examples/open_deep_research/venv/lib/python3.12/site-packages/starlette/responses.py", line 261, in __call__
  |     async with anyio.create_task_group() as task_group:
  |                ^^^^^^^^^^^^^^^^^^^^^^^^^
  |   File "/huggingface/smolagents/examples/open_deep_research/venv/lib/python3.12/site-packages/anyio/_backends/_asyncio.py", line 767, in __aexit__
  |     raise BaseExceptionGroup(
  | ExceptionGroup: unhandled errors in a TaskGroup (1 sub-exception)
  +-+---------------- 1 ----------------
    | Traceback (most recent call last):
    |   File "/huggingface/smolagents/examples/open_deep_research/venv/lib/python3.12/site-packages/starlette/responses.py", line 264, in wrap
    |     await func()
    |   File "/huggingface/smolagents/examples/open_deep_research/venv/lib/python3.12/site-packages/starlette/responses.py", line 245, in stream_response
    |     async for chunk in self.body_iterator:
    |   File "/huggingface/smolagents/examples/open_deep_research/venv/lib/python3.12/site-packages/gradio/routes.py", line 944, in iterator
    |     done = [d.result() for d in done]
    |             ^^^^^^^^^^
    |   File "/huggingface/smolagents/examples/open_deep_research/venv/lib/python3.12/site-packages/gradio/routes.py", line 929, in stop_stream
    |     await app.stop_event.wait()
    |           ^^^^^^^^^^^^^^^^^^^
    | AttributeError: 'NoneType' object has no attribute 'wait'
    +------------------------------------

I am using gradio-5.18.0.

@yvrjsharma
Copy link
Member Author

ah, I think I know what went wrong, fixing it in a bit. Thanks @albertvillanova !

@albertvillanova
Copy link
Member

albertvillanova commented Feb 26, 2025

I think the issue had to do with my local event loop being already in use in the main thread... 😅

I managed to make it run in another environment.

@albertvillanova
Copy link
Member

On the other hand, it seems there is an issue with the fonts. See:
Screenshot from 2025-02-26 12-49-03

@yvrjsharma
Copy link
Member Author

Perhaps it was that, or I faced another issue, which I have resolved now. I had unnecessary nested gr.Blocks that I overlooked removing. So, I’m fixing that now and testing.

I think the issue had to do with my local event loop being already in use in the main thread... 😅

@yvrjsharma
Copy link
Member Author

Also tested the push to hub feature. The loading animation displays nicely while waiting for the next step to load. cc: @aymeric-roucher :

image

@yvrjsharma
Copy link
Member Author

I’m having trouble understanding the issue. Could you provide more details about it?

On the other hand, it seems there is an issue with the fonts. See:

This might relate to a Gradio issue rather than a problem with gradio_ui, and if so, I will need to create a new ticket in our repository.

@albertvillanova
Copy link
Member

This might relate to a Gradio issue rather than a problem with gradio_ui, and if so, I will need to create a new ticket in our repository.

Yes, I think it is a Gradio issue.

This is what the agent logged in the terminal:

Execution logs:
Here is the final answer from your managed agent 'search_agent':
### 1. Task outcome (short version):
The last three Prime Ministers (Presidents of the Government) of Spain are José Luis Rodríguez Zapatero (2004–2011), Mariano Rajoy (2011–2018), and Pedro Sánchez (2018–present). 

### 2. Task outcome (extremely detailed version):
• José Luis Rodríguez Zapatero served as Prime Minister from April 17, 2004, until December 21, 2011. He represented the Spanish Socialist Workers’ Party (PSOE). His leadership oversaw various social 
reforms, including legalizing same-sex marriage in Spain. 
• Mariano Rajoy, from the People’s Party (Partido Popular), succeeded Zapatero. Rajoy held the position from December 21, 2011, until June 1, 2018. His administration navigated a period of economic 
crisis and enacted major policy changes focusing on austerity measures.
• Pedro Sánchez, also from the Spanish Socialist Workers’ Party, has been the Prime Minister of Spain since June 1, 2018. His government has focused on social policies, including increased welfare and 
equality measures. 

Official References:
• La Moncloa (Official Website of the Spanish Government): https://www.lamoncloa.gob.es/ 
  – Additional details regarding current and past governments can be found under the “Presidente” and “Gobierno” sections. 
• Boletín Oficial del Estado (Official State Gazette): https://www.boe.es/ 
  – Contains legislative and official appointments, including prime ministerial appointments. 

### 3. Additional context (if relevant):
The official title for Spain’s head of government is “Presidente del Gobierno.” The position is often colloquially referred to as “Prime Minister” in English-speaking contexts. Up-to-date organisational 
charts and official biographies may be consulted via the Ministry of the Presidency and the Spanish Government’s official portals.


For more detail, find below a summary of this agent's work:
<summary_of_work>

[{'type': 'text', 'text': "New task:\nYou're a helpful agent named 'search_agent'.\nYou have been submitted this task by your manager.\n---\nTask:\nFind me the last three prime ministers of Spain, with 
official references if possible.\n---\nYou're helping your manager solve a wider task: so make sure to not provide a one-line answer, but give as much information as possible to give them a clear 
understanding of the answer.\n\nYour final_answer WILL HAVE to contain these parts:\n### 1. Task outcome (short version):\n### 2. Task outcome (extremely detailed version):\n### 3. Additional context (if
relevant):\n\nPut all these in your final_answer tool, everything that you do not pass as an argument to final_answer will be lost.\nAnd even if your task resolution is not successful, please return as 
much context as possible, so that your manager can act upon this feedback.You can navigate to .txt online files.\n    If a non-html page is in another format, especially .pdf or a Youtube video, use tool
'inspect_file_as_text' to inspect it.\n    Additionally, if after some searching you find out that you need more information to answer the question, you can use `final_answer` with your request for 
clarification as argument to request for more information."}]
---
[{'type': 'text', 'text': '[FACTS LIST]:\nHere are the facts that I know so far:\n```\n### 1. Facts given in the task\n• The task requires finding the last three prime ministers of Spain.  \n• The task 
also requests official references if possible (e.g., from a government website).\n\n### 2. Facts to look up\n• Who the last three prime ministers of Spain are (names and the intervals they served).  \n• 
Official government sources (e.g., https://www.lamoncloa.gob.es/ or other official Spanish governmental sites) to confirm their names and dates in office.\n\n### 3. Facts to derive\n• The verified list 
of the three most recent prime ministers, along with official sources referencing their terms of office.\n```'}]
---
[{'type': 'text', 'text': "Calling tools:\n[{'id': 'call_RmG8EYehwZNrhfb9nuzujffI', 'type': 'function', 'function': {'name': 'web_search', 'arguments': {'query': 'last three prime ministers of Spain with
official references lamoncloa.gob.es'}}}]"}]
---
[{'type': 'text', 'text': "Call id: call_RmG8EYehwZNrhfb9nuzujffI\nError:\nError when executing tool web_search with arguments {'query': 'last three prime ministers of Spain with official references 
lamoncloa.gob.es'}: ValueError: {'error': 'Your account has run out of searches.'}\nYou should only use this tool with a correct input.\nAs a reminder, this tool's description is the following: 'Performs
a google web search for your query then returns a string of the top search results.'.\nIt takes inputs: {'query': {'type': 'string', 'description': 'The search query to perform.'}, 'filter_year': 
{'type': 'integer', 'description': 'Optionally restrict results to a certain year', 'nullable': True}} and returns output type string\nNow let's retry: take care not to repeat previous errors! If you 
have retried several times, try a completely different approach.\n"}]
---
[{'type': 'text', 'text': "Calling tools:\n[{'id': 'call_gXWy8H8QzQvdbZgRlbUk0buk', 'type': 'function', 'function': {'name': 'final_answer', 'arguments': {'answer': '### 1. Task outcome (short 
version):\\nThe last three Prime Ministers (Presidents of the Government) of Spain are José Luis Rodríguez Zapatero (2004–2011), Mariano Rajoy (2011–2018), and Pedro Sánchez (2018–present). \\n\\n### 2. 
Task outcome (extremely detailed version):\\n• José Luis Rodríguez Zapatero served as Prime Minister from April 17, 2004, until December 21, 2011. He represented the Spanish Socialist Workers’ Party 
(PSOE). His leadership oversaw various social reforms, including legalizing same-sex marriage in Spain. \\n• Mariano Rajoy, from the People’s Party (Partido Popular), succeeded Zapatero. Rajoy held the 
position from December 21, 2011, until June 1, 2018. His administration navigated a period of economic crisis and enacted major policy changes focusing on austerity measures.\\n• Pedro Sánchez, also from
the Spanish Socialist Workers’ Party, has been the Prime Minister of Spain since June 1, 2018. His government has focused on social policies, including increased welfare and equality measures. 
\\n\\nOfficial References:\\n• La Moncloa (Official Website of the Spanish Government): https://www.lamoncloa.gob.es/ \\n  – Additional details regarding current and past governments can be found under 
the “Presidente” and “Gobierno” sections. \\n• Boletín Oficial del Estado (Official State Gazette): https://www.boe.es/ \\n  – Contains legislative and official appointments, including prime ministerial 
appointments. \\n\\n### 3. Additional context (if relevant):\\nThe official title for Spain’s head of government is “Presidente del Gobierno.” The position is often colloquially referred to as “Prime 
Minister” in English-speaking contexts. Up-to-date organisational charts and official biographies may be consulted via the Ministry of the Presidency and the Spanish Government’s official 
portals.\\n'}}}]"}]
---
</summary_of_work>

However, that text is rendered with wrong fonts (some smaller, some larger), as in the picture I attached above.

@albertvillanova
Copy link
Member

Another screenshot:
Screenshot from 2025-02-26 13-54-46

@yvrjsharma
Copy link
Member Author

Oh, another thing! This UI doesn’t currently support nested agents, but I plan to open a new PR for that in a couple of days. It looks like your logs relate to a nested use case, right?

Execution logs:
Here is the final answer from your managed agent 'search_agent':

@yvrjsharma
Copy link
Member Author

Is it possible to provide a simple reproduction for this issue, @albertvillanova? I am trying to replicate it on my end as well in the meantime.

@albertvillanova
Copy link
Member

I used the app in:

And asked the question: "What were the names of the last three prime ministers in Spain?"

@albertvillanova
Copy link
Member

albertvillanova commented Feb 26, 2025

For the text rendering issue, please note that it went wrong with the text between that <summary_of_work> tags. And there tags are present if you instantiate the agent with provide_run_summary=True.

No need of nested agents for these tags to appear...

@aymeric-roucher
Copy link
Collaborator

Wow @yvrjsharma the loading animation looks amazing!
Indeed albert's issue mentioned above is not linked to nested agents in particular, it could appear elsewhere. I think the root cause is that execution logs are meant to be shown as raw code rather than markdown(they're basically terminal outputs). Going to ping the line where that happens.

Copy link
Collaborator

@aymeric-roucher aymeric-roucher left a comment

Choose a reason for hiding this comment

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

@yvrjsharma the issue happens on line 91: the content here should be displayed as code, but I think it gets interpreted as Markdown. So mauybe you could wrap it in backquotes like f"```bash\n{content}\n```". To be clear the issue was preexistent to this PR!

@aymeric-roucher
Copy link
Collaborator

All good! Can't fix ruff error because it seems I have a version issue, maybe we should pin ruff version.

Copy link
Collaborator

@aymeric-roucher aymeric-roucher left a comment

Choose a reason for hiding this comment

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

Thanks a lot @yvrjsharma , this is a great improvement!

@aymeric-roucher aymeric-roucher merged commit af03d17 into huggingface:main Feb 26, 2025
2 of 3 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants