[UNIT] Add draft Gradio bonus module for agents-course #120

yvrjsharma · 2025-02-13T15:05:22Z

This PR is a work-in-progress draft to include the gradio bonus module in the agents-course.

This is based on @burtenshaw's suggestion. We can discuss what to include in this bonus unit. To begin, I have uploaded a tentative plan outlining the chapters and their content. 😄

HuggingFaceDocBuilderDev · 2025-02-13T15:06:30Z

The docs for this PR live here. All of your documentation changes will be reflected on that endpoint. The docs are available until 30 days after the last update.

burtenshaw

I really like the ToC structure and it makes total sense.

Are you looking to get started on this now? If so, I'd recommend smaller PRs for each chapter off this branch.

burtenshaw · 2025-02-13T15:09:53Z

units/en/unit5/README.md

+    - Showing visible thought process of agents
+
+- Hands-on Project: Building a Complete Agent UI
+    - Implementing an Agentic UI : smolagents


It's amazing that you're planning to implement it in 3 libraries. But feel free to pick one, if you think it's difficult to maintain.

This suggestion makes sense, and the team is on board with it as well! I’m excited to focus only on smolagents for this particular chapter.

burtenshaw · 2025-02-13T15:17:30Z

units/en/unit5/README.md

+    - Implementing an Agentic UI : llamaindex
+        - Adding tool usage visualization
+        - Customizing the interface
+    - Bonus Module Final Quiz


Just so you know, I've also made a code quiz space that uses an LLM as a judge. I can help with setting up the questions if you like.

That'll be great, thanks!

burtenshaw · 2025-02-13T15:19:11Z

units/en/unit5/README.md

+- Introduction to Gradio for AI Agents
+    - Why Gradio for Agent UIs?
+    - Understanding the role of UI in Agent interactions
+    - Setting up Gradio


You might want to mention the difference between this and a gradio space being used as a tool for an agent.

Ah, I missed this point in my latest submission, will include the distinction now. Thanks, Ben.

burtenshaw · 2025-02-13T15:19:48Z

units/en/unit5/README.md

+    - Tool usage visualization
+    - Quick Quiz 2
+
+- Advanced Agent UI Features


This will be nice with lot's of examples and embedded gradio spaces.

Jofthomas · 2025-02-13T15:25:25Z

units/en/unit0/introduction.mdx


-*We are also planning to release some bonus units, stay tuned!*
+*We have one bonus unit available for you: Gradio module helps you create interactive interfaces for your agents. More bonus units coming soon!*


I would not change that sentence. As it removes the emphasis on other future bonus Units

Agreed with @Jofthomas. Because we don't have only bonus units with gradio, for instance next week we have one that is not about gradio but fine-tune.

Makes sense. Thanks for the reviews.

Jofthomas · 2025-02-13T15:27:48Z

Sounds exciting.

Adds first three chapter files for Gradio module

yvrjsharma · 2025-02-25T09:56:06Z

I've added the first three chapters for the Gradio module. Third one is still work in progress. Would appreciate feedback on the content while I continue working on the remaining chapters. cc: @dawoodkhan82 for vis.

abidlabs · 2025-03-25T15:14:27Z

units/en/unit5/1_introduction.mdx

+Before we dive deeper, let's set up Gradio in your environment:
+
+```bash
+pip install gradio


just in case they have an older version of gradio installed

Suggested change

pip install gradio

pip install --upgrade gradio

abidlabs · 2025-03-25T15:42:16Z

units/en/unit5/1_introduction.mdx

+This creates a complete chat interface:
+
+<need to add an image of the generated ui with an example in the agents-course dataset at https://huggingface.co/datasets/agents-course/course-images>
+


I think we should add a sentence here explaining that while GradioUI(agent) launches a default Gradio UI, it doesn't offer the ability to customize the Gradio interface or to build larger UIs that the agent UI can be a part of, or use other frameworks besides smolagents, etc. which is why we'll understand how to build a UI using Gradio directly.

abidlabs · 2025-03-25T15:43:30Z

units/en/unit5/2_first-agent-interface.mdx

+
+## Your First Agent UI
+
+Let's create a simple Agent that helps with weather information. Here's how to build it:


Perhaps we should mention to isntall lanchgain and langgraph

abidlabs · 2025-03-25T15:44:37Z

units/en/unit5/2_first-agent-interface.mdx

+   - Shows the Agent's thought process and tool-usage in real time
+   - Keeps users engaged while waiting
+
+We are using `type="messages"` in gr.ChatInterface. This passes the history as a list of dictionaries with openai-style "role" and "content" keys.


We should talk about the gr.ChatMessage class briefly here and explain that we'll dive more deeply in the next section

…-interface

yvrjsharma · 2025-04-14T16:37:01Z

I've just wrapped up the final three chapters for the Gradio module! I would really appreciate any feedback on the content. Would be great to get any help/comments in enhancing the course and fix any bugs. Also, I'm cc'ing @dawoodkhan82 for visibility.

abidlabs · 2025-04-14T22:34:36Z

units/en/unit5/1_introduction.mdx

+
+## What is Gradio?
+
+Gradio is a Python library that makes it easy to create **beautiful web interfaces** for your AI models and Agents. Think of it as a bridge between your Agent's capabilities and its users:


Suggested change

Gradio is a Python library that makes it easy to create **beautiful web interfaces** for your AI models and Agents. Think of it as a bridge between your Agent's capabilities and its users:

[Gradio](https://github.com/gradio-app/gradio) is a Python library that makes it easy to create **beautiful web interfaces** for your AI models and Agents. Think of it as a bridge between your Agent's capabilities and its users:

I like "web applications" instead of "web interfaces" personally.

abidlabs · 2025-04-14T22:34:59Z

units/en/unit5/1_introduction.mdx

+- Display your Agent's thought process and tool usage
+- Handle file uploads and multimedia content that can be useful for your AI agents
+- Share your Agent with anyone via a URL
+- Deploy your Agent UI to Hugging Face Spaces


Suggested change

- Deploy your Agent UI to Hugging Face Spaces

- Deploy your Agent UI to [Hugging Face Spaces](https://huggingface.co/spaces/)

abidlabs · 2025-04-14T22:35:23Z

units/en/unit5/1_introduction.mdx

+# Import tool from Hub
+image_generation_tool = load_tool("m-ric/text-to-image", trust_remote_code=True)
+# initialize a model
+model = HfApiModel()
+# Initialize the agent with the image generation tool
+agent = CodeAgent(tools=[image_generation_tool], model=model)
+# launch the gradio agentic ui
+GradioUI(agent).launch(share=True)


Remove inline comments?

Are you referring to all of them? I noticed comments in the code examples from other units, so I just followed that pattern. However, I understand your point, it does appear overcrowded with the number of comments. Perhaps I could eliminate some of the unnecessary ones to reduce the clutter.

abidlabs · 2025-04-14T22:36:23Z

units/en/unit5/2_first-agent-interface.mdx

+
+## Your First Agent UI
+
+We'll start by installing langchain and langgraph for this section. Additionally, set up the environment variable `OPENAI_API_KEY` to store your OpenAI API keys.


Btw it'd be great if we could showcase HF inference providers!

abidlabs · 2025-04-14T22:38:32Z

units/en/unit5/2_first-agent-interface.mdx

+1. **Auto closing the tool usage accordion after the agent is done populating them.**
+
+Using the Metadata dictionary key called `status` to communicate to the gradio ui when the tool usage is complete. 
+This also adds a spinner appears next to the thought title. If the `status` is "done", the thought accordion becomes closed. If not provided, the thought accordion is open and no spinner is displayed.


This first point seems out-of-place, since we haven't introduced ChatMessage. I think it should go in the next chapter. Perhaps in this part, only focus on the UI tweaks listed in point (2) and explain them in a bit more detail?

abidlabs · 2025-04-14T22:40:38Z

units/en/unit5/4_build_with MCPserver_and_client.mdx

@@ -0,0 +1,580 @@
+# Building Agent UIs with Model Context Protocol (MCP)
+
+In previous units, we explored creating basic Agent interfaces with Gradio's ChatInterface and advanced visualization using ChatMessage. Now, let's take your Agent UIs to the next level by integrating with the Model Context Protocol (MCP), which enables seamless communication between Claude and external tools.


Suggested change

In previous units, we explored creating basic Agent interfaces with Gradio's ChatInterface and advanced visualization using ChatMessage. Now, let's take your Agent UIs to the next level by integrating with the Model Context Protocol (MCP), which enables seamless communication between Claude and external tools.

In previous units, we explored creating basic Agent interfaces with Gradio's ChatInterface and advanced visualization using ChatMessage. Now, let's take your Agent UIs to the next level by integrating with the Model Context Protocol (MCP), which enables seamless communication between your chatbot applicaiton and external tools.

abidlabs · 2025-04-14T22:41:34Z

units/en/unit5/4_build_with MCPserver_and_client.mdx

+## What is Model Context Protocol (MCP)?
+The Model Context Protocol (MCP) is an open standard that allows LLMs to connect with external data sources and tools. Think of MCP like a "USB-C port for AI" - it provides a standardized way for AI models to interact with various tools and data sources.
+
+With MCP you can:
+- Connect Claude Desktop to specialized tools that extend its capabilities
+- Create a modular architecture where tools can be easily added or swapped
+- Use an LLM application like Gradio chatbot and use it as a MCP Client 


This intro seems to be written for Claude Desktop? Let's go through and update the references to be for your Gradio-based chatbot. I think this intro coudl also benefit from more concrete examples since it feels a bit abstract to me

abidlabs · 2025-04-14T22:44:44Z

units/en/unit5/5_Advanced_Agentic_UI_features.mdx

I like the second half of this chapter where we extend the smolagents UI, but the purpose of the first half is not clear. Maybe you should be clear at the beginning that the goal of this chapter is to reverse engineer the smolagents UI, show how you would create it with Gradio from scratch, which in turn lets you extend it in specific ways.

I'm not sure we need the first half of this chapter. I like the idea of limiting this chapter to just more advanced gradio features and removing the smolagents UI deep dive.

dawoodkhan82 · 2025-04-16T01:58:42Z

units/en/unit0/introduction.mdx

@@ -72,8 +72,9 @@ Here is the **general syllabus for the course**. A more detailed list of topics
 | 2 | Frameworks | Understand how the fundamentals are implemented in popular libraries : smolagents, LangGraph, LLamaIndex |
 | 3 | Use Cases | Let's build some real life use cases (open to PRs 🤗 from experienced Agent builders) |
 | 4 | Final Assignment | Build an agent for a selected benchmark and prove your understanding of Agents on the student leaderboard  🚀 |
+| 5 | Bonus Gradio Module | Learn to build and deploy interactive AI agents with Gradio interfaces |


dawoodkhan82 · 2025-04-16T02:17:17Z

units/en/unit5/1_introduction.mdx

+Gradio is a Python library that makes it easy to create **beautiful web interfaces** for your AI models and Agents. Think of it as a bridge between your Agent's capabilities and its users:
+
+
+With Gradio, you can:


I think you mentioned adding gifs. Would be nice to have gifs here to show off these features.

Yes, I've been trying to create GIFs for the demos included in the course, but I haven't found any tool that produces good-resolution GIFs from short videos. I've used Windows' native ClipChamp and various free online tools like Ezgif, freeconvert etc, but none have provided satisfactory results. Do you have any recommendations for a free tool? Otherwise, I can also embed short videos.

dawoodkhan82 · 2025-04-16T04:25:01Z

units/en/unit5/6_Conclusion.mdx

+
+## What's Next?
+Now that you have these Gradio skills, consider exploring:
+- Deploying your Agent UIs to Hugging Face Spaces for wider access


Suggested change

- Deploying your Agent UIs to Hugging Face Spaces for wider access

- Deploying your Agent UIs to [Hugging Face Spaces](https://huggingface.co/spaces) for wider access

dawoodkhan82 · 2025-04-16T04:25:51Z

units/en/unit5/6_Conclusion.mdx

+
+
+Finally, we would love **to hear what you think of the course and how we can improve it**. If you have some feedback then, please 👉 [fill this form](https://docs.google.com/forms/d/e/1FAIpQLSe9VaONn0eglax0uTwi29rIn4tM7H2sYmmybmG5jJNlE5v0xA/viewform?usp=dialog)
+


Add a call to action to share demos on twitter and tag @gradio

ah, good call, thanks!

Add draft Gradio bonus module for agents-course

f851589

burtenshaw changed the title ~~Add draft Gradio bonus module for agents-course~~ [UNIT] Add draft Gradio bonus module for agents-course Feb 13, 2025

burtenshaw reviewed Feb 13, 2025

View reviewed changes

Jofthomas reviewed Feb 13, 2025

View reviewed changes

yvrjsharma added 2 commits February 25, 2025 15:00

Add first three chapter files for Gradio module

f475ee3

Merge pull request #1 from yvrjsharma/gradio-chapter1-intro

caf0745

Adds first three chapter files for Gradio module

abidlabs reviewed Mar 25, 2025

View reviewed changes

yvrjsharma added 2 commits March 27, 2025 15:05

Address review comments from abidlabs on introduction and first-agent…

ce7844a

…-interface

Update Gradio module based on feedback and add 3 new chapters

dc44528

yvrjsharma requested review from abidlabs and burtenshaw April 14, 2025 16:33

abidlabs reviewed Apr 14, 2025

View reviewed changes

dawoodkhan82 reviewed Apr 16, 2025

View reviewed changes


		We are also planning to release some bonus units, stay tuned!
		We have one bonus unit available for you: Gradio module helps you create interactive interfaces for your agents. More bonus units coming soon!

		This creates a complete chat interface:

		<need to add an image of the generated ui with an example in the agents-course dataset at https://huggingface.co/datasets/agents-course/course-images>


		## Your First Agent UI

		Let's create a simple Agent that helps with weather information. Here's how to build it:


		## What is Gradio?

		Gradio is a Python library that makes it easy to create beautiful web interfaces for your AI models and Agents. Think of it as a bridge between your Agent's capabilities and its users:

	Gradio is a Python library that makes it easy to create beautiful web interfaces for your AI models and Agents. Think of it as a bridge between your Agent's capabilities and its users:
	[Gradio](https://github.com/gradio-app/gradio) is a Python library that makes it easy to create beautiful web interfaces for your AI models and Agents. Think of it as a bridge between your Agent's capabilities and its users:

	- Deploy your Agent UI to Hugging Face Spaces
	- Deploy your Agent UI to [Hugging Face Spaces](https://huggingface.co/spaces/)


		## Your First Agent UI

		We'll start by installing langchain and langgraph for this section. Additionally, set up the environment variable `OPENAI_API_KEY` to store your OpenAI API keys.

		@@ -0,0 +1,580 @@
		# Building Agent UIs with Model Context Protocol (MCP)

		In previous units, we explored creating basic Agent interfaces with Gradio's ChatInterface and advanced visualization using ChatMessage. Now, let's take your Agent UIs to the next level by integrating with the Model Context Protocol (MCP), which enables seamless communication between Claude and external tools.

	\| 5 \| Bonus Gradio Module \| Learn to build and deploy interactive AI agents with Gradio interfaces \|
	\| 5 \| Bonus Gradio Module \| Learn to build and deploy web applications for AI agents using Gradio \|

		Gradio is a Python library that makes it easy to create beautiful web interfaces for your AI models and Agents. Think of it as a bridge between your Agent's capabilities and its users:


		With Gradio, you can:

	- Deploying your Agent UIs to Hugging Face Spaces for wider access
	- Deploying your Agent UIs to [Hugging Face Spaces](https://huggingface.co/spaces) for wider access



		Finally, we would love to hear what you think of the course and how we can improve it. If you have some feedback then, please 👉 [fill this form](https://docs.google.com/forms/d/e/1FAIpQLSe9VaONn0eglax0uTwi29rIn4tM7H2sYmmybmG5jJNlE5v0xA/viewform?usp=dialog)

[UNIT] Add draft Gradio bonus module for agents-course #120

Are you sure you want to change the base?

[UNIT] Add draft Gradio bonus module for agents-course #120

Conversation

yvrjsharma commented Feb 13, 2025 • edited Loading

HuggingFaceDocBuilderDev commented Feb 13, 2025

burtenshaw left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Jofthomas commented Feb 13, 2025

yvrjsharma commented Feb 25, 2025

Choose a reason for hiding this comment

abidlabs Mar 25, 2025 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

yvrjsharma commented Apr 14, 2025

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

abidlabs Apr 14, 2025 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

yvrjsharma commented Feb 13, 2025 •

edited

Loading

abidlabs Mar 25, 2025 •

edited

Loading

abidlabs Apr 14, 2025 •

edited

Loading