Merge pull request #231 from sergiopaniego/add-notebooks-media-smolag…

…ents

[UNIT] Unit 2.1 smolagents adding final notebooks and media - release 25/2/25

units/en/unit2/smolagents/code_agents.mdx

@@ -59,7 +59,7 @@ At the end of each step, if the agent includes any function calls (in `agent.ste
 ## Let's See Some Examples
 
 <Tip>
-The following code can be followed in <a href="https://colab.research.google.com/github/huggingface/agents-course/blob/main/notebooks/unit2/smolagents/code_agents.ipynb" target="_blank">this notebook</a> that you can run using Google Colab.
+You can follow the code in <a href="https://huggingface.co/agents-course/notebooks/blob/main/unit2/smolagents/code_agents.ipynb" target="_blank">this notebook</a> that you can run using Google Colab.
 </Tip>
 
 Alfred is planning a party at the Wayne family mansion and needs your help to ensure everything goes smoothly. To assist him, we'll apply what we've learned about how a multi-step `CodeAgent` operates.

units/en/unit2/smolagents/multi_agent_systems.mdx

@@ -6,6 +6,11 @@
 
 # Multi-Agent Systems
 
+<Tip warning={true}>
+The examples in this section require access to some powerful models. We tested them using the GPT-4o API and Together AI.  
+However, <a href="./why_use_smolagents">Why use smolagents</a> discusses alternative solutions supported by smolagents and Hugging Face. If you'd like to explore other options, be sure to check that section.
+</Tip>
+
 Multi-agent systems enable **specialized agents to collaborate on complex tasks**, improving modularity, scalability, and robustness. Instead of relying on a single agent, tasks are distributed among agents with distinct capabilities.  
 
 In **smolagents**, different agents can be combined to generate Python code, call external tools, perform web searches, and more. By orchestrating these agents, we can create powerful workflows.
@@ -33,7 +38,7 @@ All of these agents operate under an orchestrator that manages task delegation a
 ## Solving a complex task with a multi-agent hierarchy
 
 <Tip>
-The following code can be followed in <a href="https://colab.research.google.com/github/huggingface/agents-course/blob/main/notebooks/unit2/smolagents/multiagent_notebook.ipynb" target="_blank">this notebook</a> that you can run using Google Colab.
+You can follow the code in <a href="https://huggingface.co/agents-course/notebooks/blob/main/unit2/smolagents/multiagent_notebook.ipynb" target="_blank">this notebook</a> that you can run using Google Colab.
 </Tip>
 
 The reception is approaching! With your help, Alfred is now nearly finished with the preparations.
@@ -162,6 +167,29 @@ result = agent.run(task)
 result
 ```
 
+In our case, it generates this output:
+
+```python
+|  | Location                                             | Travel Time to Gotham (hours) |
+|--|------------------------------------------------------|------------------------------|
+| 0  | Necropolis Cemetery, Glasgow, Scotland, UK         | 8.60                         |
+| 1  | St. George's Hall, Liverpool, England, UK         | 8.81                         |
+| 2  | Two Temple Place, London, England, UK             | 9.17                         |
+| 3  | Wollaton Hall, Nottingham, England, UK           | 9.00                         |
+| 4  | Knebworth House, Knebworth, Hertfordshire, UK    | 9.15                         |
+| 5  | Acton Lane Power Station, Acton Lane, Acton, UK  | 9.16                         |
+| 6  | Queensboro Bridge, New York City, USA            | 1.01                         |
+| 7  | Wall Street, New York City, USA                  | 1.00                         |
+| 8  | Mehrangarh Fort, Jodhpur, Rajasthan, India       | 18.34                        |
+| 9  | Turda Gorge, Turda, Romania                      | 11.89                        |
+| 10 | Chicago, USA                                     | 2.68                         |
+| 11 | Hong Kong, China                                 | 19.99                        |
+| 12 | Cardington Studios, Northamptonshire, UK        | 9.10                         |
+| 13 | Warner Bros. Leavesden Studios, Hertfordshire, UK | 9.13                         |
+| 14 | Westwood, Los Angeles, CA, USA                  | 6.79                         |
+| 15 | Woking, UK (McLaren)                             | 9.13                         |
+```
+
 We could already improve this a bit by throwing in some dedicated planning steps, and adding more prompting.
 
 ```python
@@ -182,6 +210,16 @@ print(detailed_report)
 detailed_report
 ```
 
+In our case, it generates this output:
+
+```python
+|  | Location                                         | Travel Time (hours) |
+|--|--------------------------------------------------|---------------------|
+| 0  | Bridge of Sighs, Glasgow Necropolis, Glasgow, UK | 8.6                 |
+| 1  | Wishart Street, Glasgow, Scotland, UK         | 8.6                 |
+```
+
+
 Thanks to these quick changes, we obtained a much more concise report by simply providing our agent a detailed prompt, and giving it planning capabilities!
 
 💸 But as you can see, the context window is quickly filling up. So **if we ask our agent to combine the results of detailed search with another, it will be slower and quickly ramp up tokens and costs**.
@@ -369,7 +407,7 @@ manager_agent.python_executor.state["fig"]
 
 This will output the map:
 
-![Multiagent system example output map](../output_map.png)
+![Multiagent system example output map](https://huggingface.co/datasets/agents-course/course-images/resolve/main/en/unit2/smolagents/output_map.png)
 
 ## Resources
 

units/en/unit2/smolagents/quiz2.mdx

@@ -4,27 +4,27 @@ It's time to test your understanding of the *Code Agents*, *Tool Calling Agents*
 
 ---
 
-### Q1: What is the key difference between creating a tool with the `@tool` decorator versus creating a subclass of `Tool` in SmolAgents?
+### Q1: What is the key difference between creating a tool with the `@tool` decorator versus creating a subclass of `Tool` in smolagents?
 
 Which statement best describes the distinction between these two approaches for defining tools?
 
 <Question
 choices={[
   {
-    text: "Using the `@tool` decorator is mandatory for retrieval-based tools, while subclasses of `Tool` are only for text-generation tasks",
+    text: "Using the <code>@tool</code> decorator is mandatory for retrieval-based tools, while subclasses of <code>Tool</code> are only for text-generation tasks",
     explain: "Both approaches can be used for any type of tool, including retrieval-based or text-generation tools.",
   },
   {
-    text: "The `@tool` decorator is recommended for simple function-based tools, while subclasses of `Tool` offer more flexibility for complex functionality or custom metadata",
+    text: "The <code>@tool</code> decorator is recommended for simple function-based tools, while subclasses of <code>Tool</code> offer more flexibility for complex functionality or custom metadata",
     explain: "This is correct. The decorator approach is simpler, but subclassing allows more customized behavior.",
     correct: true
   },
   {
-    text: "`@tool` can only be used in multi-agent systems, while creating a `Tool` subclass is for single-agent scenarios",
+    text: "<code>@tool</code> can only be used in multi-agent systems, while creating a <code>Tool</code> subclass is for single-agent scenarios",
     explain: "All agents (single or multi) can use either approach to define tools; there is no such restriction.",
   },
   {
-    text: "Decorating a function with `@tool` replaces the need for a docstring, whereas subclasses must not include docstrings",
+    text: "Decorating a function with <code>@tool</code> replaces the need for a docstring, whereas subclasses must not include docstrings",
     explain: "Both methods benefit from clear docstrings. The decorator doesn't replace them, and a subclass can still have docstrings.",
   }
 ]}
@@ -71,7 +71,7 @@ choices={[
     explain: "Sharing a tool doesn't automatically set up retrieval or multi-step logic. It's just making the tool available.",
   },
   {
-    text: "It allows others to discover, reuse, and integrate your tool in their SmolAgents without extra setup",
+    text: "It allows others to discover, reuse, and integrate your tool in their smolagents without extra setup",
     explain: "Yes. Sharing on the Hub makes tools accessible for anyone to download and incorporate quickly.",
     correct: true
   },
@@ -116,9 +116,9 @@ choices={[
 
 ---
 
-### Q5: What is included in the SmolAgents default toolbox, and why might you use it?
+### Q5: What is included in the smolagents default toolbox, and why might you use it?
 
-Which statement best captures the purpose and contents of the default toolbox in SmolAgents?
+Which statement best captures the purpose and contents of the default toolbox in smolagents?
 
 <Question
 choices={[
@@ -144,4 +144,4 @@ choices={[
 
 ---
 
-Congratulations on completing this quiz! 🎉 If any questions gave you trouble, revisit the *Code Agents*, *Tool Calling Agents*, or *Tools* sections to strengthen your understanding. If you aced it, you're well on your way to building robust SmolAgents applications!
+Congratulations on completing this quiz! 🎉 If any questions gave you trouble, revisit the *Code Agents*, *Tool Calling Agents*, or *Tools* sections to strengthen your understanding. If you aced it, you're well on your way to building robust smolagents applications!

units/en/unit2/smolagents/retrieval_agents.mdx

@@ -7,7 +7,7 @@
 # Building Agentic RAG Systems
 
 <Tip>
-The following code can be followed in <a href="https://colab.research.google.com/github/huggingface/agents-course/blob/main/notebooks/unit2/smolagents/retrieval_agents.ipynb" target="_blank">this notebook</a> that you can run using Google Colab.
+You can follow the code in <a href="https://huggingface.co/agents-course/notebooks/blob/main/unit2/smolagents/retrieval_agents.ipynb" target="_blank">this notebook</a> that you can run using Google Colab.
 </Tip>
 
 Retrieval Augmented Generation (RAG) systems combine the capabilities of data retrieval and generation models to provide context-aware responses. For example, a user's query is passed to a search engine, and the retrieved results are given to the model with the query. The model then generates a response based on the query and retrieved information.

units/en/unit2/smolagents/tool_calling_agents.mdx

@@ -7,7 +7,7 @@
 # Integrating Agents With Tools
 
 <Tip>
-The following code can be followed in <a href="https://colab.research.google.com/github/huggingface/agents-course/blob/main/notebooks/unit2/smolagents/tool_calling_agents.ipynb" target="_blank">this notebook</a> that you can run using Google Colab.
+You can follow the code in <a href="https://huggingface.co/agents-course/notebooks/blob/main/unit2/smolagents/tool_calling_agents.ipynb" target="_blank">this notebook</a> that you can run using Google Colab.
 </Tip>
 
 Tool Calling Agents are the second type of agent available in `smolagents`. Unlike Code Agents that use Python snippets, these agents **use the built-in tool-calling capabilities of LLM providers** to generate tool calls as **JSON structures**. This is the standard approach used by OpenAI, Anthropic, and many other providers.

units/en/unit2/smolagents/tools.mdx

@@ -49,7 +49,7 @@ Using this approach, we define a function with:
 <img src="https://huggingface.co/datasets/agents-course/course-images/resolve/main/en/unit2/smolagents/alfred-catering.jpg" alt="Alfred Catering"/>
 
 <Tip>
-The following code can be followed in <a href="https://colab.research.google.com/github/huggingface/agents-course/blob/main/notebooks/unit2/smolagents/tools.ipynb" target="_blank">this notebook</a> that you can run using Google Colab.
+You can follow the code in <a href="https://huggingface.co/agents-course/notebooks/blob/main/unit2/smolagents/tools.ipynb" target="_blank">this notebook</a> that you can run using Google Colab.
 </Tip>
 
 Let's imagine that Alfred has already decided on the menu for the party, but now he needs help preparing food for such a large number of guests. To do so, he would like to hire a catering service and needs to identify the highest-rated options available. Alfred can leverage a tool to search for the best catering services in his area. 

units/en/unit2/smolagents/vision_agents.mdx

@@ -20,7 +20,7 @@ But first, let's dive into a bit of theory.
 ## Providing Images at the Start of the Agent's Execution
 
 <Tip>
-The following code can be followed in <a href="https://colab.research.google.com/github/huggingface/agents-course/blob/main/notebooks/unit2/smolagents/vision_agents.ipynb" target="_blank">this notebook</a> that you can run using Google Colab.
+You can follow the code in <a href="https://huggingface.co/agents-course/notebooks/blob/main/unit2/smolagents/vision_agents.ipynb" target="_blank">this notebook</a> that you can run using Google Colab.
 </Tip>
 
 In this approach, images are passed to the agent at the start and stored as `task_images` alongside the task prompt. The agent then processes these images throughout its execution.  
@@ -94,7 +94,7 @@ In this case, the output reveals that the person is impersonating someone else,
 ## Providing Images with Dynamic Retrieval
 
 <Tip>
-The following code can be followed in <a href="https://colab.research.google.com/github/huggingface/agents-course/blob/main/notebooks/unit2/smolagents/vision_web_browser.ipynb" target="_blank">this Python file</a>
+You can follow the code in <a href="https://huggingface.co/agents-course/notebooks/blob/main/unit2/smolagents/vision_web_browser.py" target="_blank">this Python file</a>
 </Tip>
 
 The previous approach is valuable and has many potential use cases. However, in situations where the guest is not in the database, we need to explore other ways of identifying them. One possible solution is dynamically retrieving images and information from external sources, such as browsing the web for details.
@@ -204,9 +204,8 @@ You can see that we include `helium_instructions` as part of the task. This spec
 
 Let's see how this works in the video below:
 
-<video width="600" controls>
-  <source src="./VisionBrowserAgent.mp4" type="video/mp4">
-  Your browser does not support the video tag.
+<video controls>
+  <source src="https://huggingface.co/datasets/agents-course/course-images/resolve/main/en/unit2/smolagents/VisionBrowserAgent.mp4" type="video/mp4">
 </video>
 
 This is the final output: