Skip to content

Commit 9bdec8c

Browse files
freddyaboultonabidlabsaliabid94Ali Abidgradio-pr-bot
authored
Update Transformers agent demo (#9885)
* update code * modify imports * fix * update notebook * gr.load_chat: Allow loading any openai-compatible server immediately as a ChatInterface (#10222) * changes * add changeset * add changeset * Update gradio/external.py Co-authored-by: Abubakar Abid <[email protected]> * changes * changes * Update guides/05_chatbots/01_creating-a-chatbot-fast.md Co-authored-by: Abubakar Abid <[email protected]> * changes --------- Co-authored-by: Ali Abid <[email protected]> Co-authored-by: gradio-pr-bot <[email protected]> Co-authored-by: Abubakar Abid <[email protected]> * Allow editing chatbot messages (#10203) * changes * add changeset * changes * changes * changes * changes * changes * changes * changes * Update gradio/events.py Co-authored-by: Abubakar Abid <[email protected]> * Update gradio/components/chatbot.py Co-authored-by: Abubakar Abid <[email protected]> * changes --------- Co-authored-by: Ali Abid <[email protected]> Co-authored-by: gradio-pr-bot <[email protected]> Co-authored-by: Abubakar Abid <[email protected]> * Update Guides related to deploying Gradio chatbots to Discord, Slack, and website widgets (#10221) * changes * changes * update * chat history * add changeset * changes * add changeset * changes * guide * changes * changes * changes * guide * add images * slack guide * changes * format * add changeset * finish up slack * changes * improve js guide * update * changes * script * changes * changes * add changeset * Update guides/05_chatbots/01_creating-a-chatbot-fast.md Co-authored-by: Ali Abdalla <[email protected]> * Update guides/05_chatbots/01_creating-a-chatbot-fast.md Co-authored-by: Ali Abdalla <[email protected]> * Update guides/05_chatbots/06_creating-a-discord-bot-from-a-gradio-app.md Co-authored-by: Ali Abdalla <[email protected]> * Update guides/05_chatbots/08_creating-a-website-widget-from-a-gradio-chatbot.md Co-authored-by: Ali Abdalla <[email protected]> * Update guides/05_chatbots/08_creating-a-website-widget-from-a-gradio-chatbot.md Co-authored-by: Ali Abdalla <[email protected]> * gradio * cta --------- Co-authored-by: gradio-pr-bot <[email protected]> Co-authored-by: Ali Abdalla <[email protected]> * Allow editable ChatInterface (#10229) * changes * add changeset * changes * changes * changes --------- Co-authored-by: Ali Abid <[email protected]> Co-authored-by: gradio-pr-bot <[email protected]> * Fix typing for components in `gr.Interface` and docstring in `image.py` (#10235) * changes * add changeset * changes * changes * change * add changeset * image.py * revert msg --------- Co-authored-by: gradio-pr-bot <[email protected]> * Lite: Capture stdout and stderr from the main thread (#9984) * Add stdout and stderr events * add changeset * Refactoring * Format App.tsx * add changeset * Add python-error event to capture Python errors occurring in the running event loop after the initial app launch * Fix <ErrorDisplay />'s close button * Fix <ErrorDisplay /> * Propagate python-error and initialization-error events to the controller * Add init-code|file-run-error events --------- Co-authored-by: gradio-pr-bot <[email protected]> * use chat interface --------- Co-authored-by: Abubakar Abid <[email protected]> Co-authored-by: aliabid94 <[email protected]> Co-authored-by: Ali Abid <[email protected]> Co-authored-by: gradio-pr-bot <[email protected]> Co-authored-by: Ali Abdalla <[email protected]> Co-authored-by: Yuichiro Tachibana (Tsuchiya) <[email protected]>
1 parent 45df1b1 commit 9bdec8c

File tree

5 files changed

+66
-101
lines changed

5 files changed

+66
-101
lines changed

‎demo/agent_chatbot/requirements.txt

+1-1
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
git+https://github.com/huggingface/transformers.git#egg=transformers[agents]
1+
transformers>=4.47.0

‎demo/agent_chatbot/run.ipynb

+1-1
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
{"cells": [{"cell_type": "markdown", "id": "302934307671667531413257853548643485645", "metadata": {}, "source": ["# Gradio Demo: agent_chatbot"]}, {"cell_type": "code", "execution_count": null, "id": "272996653310673477252411125948039410165", "metadata": {}, "outputs": [], "source": ["!pip install -q gradio git+https://github.com/huggingface/transformers.git#egg=transformers[agents]"]}, {"cell_type": "code", "execution_count": null, "id": "288918539441861185822528903084949547379", "metadata": {}, "outputs": [], "source": ["# Downloading files from the demo repo\n", "import os\n", "!wget -q https://github.com/gradio-app/gradio/raw/main/demo/agent_chatbot/utils.py"]}, {"cell_type": "code", "execution_count": null, "id": "44380577570523278879349135829904343037", "metadata": {}, "outputs": [], "source": ["import gradio as gr\n", "from gradio import ChatMessage\n", "from transformers import load_tool, ReactCodeAgent, HfEngine # type: ignore\n", "from utils import stream_from_transformers_agent\n", "\n", "# Import tool from Hub\n", "image_generation_tool = load_tool(\"m-ric/text-to-image\")\n", "\n", "llm_engine = HfEngine(\"meta-llama/Meta-Llama-3-70B-Instruct\")\n", "# Initialize the agent with both tools\n", "agent = ReactCodeAgent(tools=[image_generation_tool], llm_engine=llm_engine)\n", "\n", "def interact_with_agent(prompt, messages):\n", " messages.append(ChatMessage(role=\"user\", content=prompt))\n", " yield messages\n", " for msg in stream_from_transformers_agent(agent, prompt):\n", " messages.append(msg)\n", " yield messages\n", " yield messages\n", "\n", "with gr.Blocks() as demo:\n", " stored_message = gr.State([])\n", " chatbot = gr.Chatbot(label=\"Agent\",\n", " type=\"messages\",\n", " avatar_images=(None, \"https://em-content.zobj.net/source/twitter/53/robot-face_1f916.png\"))\n", " text_input = gr.Textbox(lines=1, label=\"Chat Message\")\n", " text_input.submit(lambda s: (s, \"\"), [text_input], [stored_message, text_input]).then(interact_with_agent, [stored_message, chatbot], [chatbot])\n", "\n", "if __name__ == \"__main__\":\n", " demo.launch()\n"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}
1+
{"cells": [{"cell_type": "markdown", "id": "302934307671667531413257853548643485645", "metadata": {}, "source": ["# Gradio Demo: agent_chatbot"]}, {"cell_type": "code", "execution_count": null, "id": "272996653310673477252411125948039410165", "metadata": {}, "outputs": [], "source": ["!pip install -q gradio transformers>=4.47.0"]}, {"cell_type": "code", "execution_count": null, "id": "288918539441861185822528903084949547379", "metadata": {}, "outputs": [], "source": ["import gradio as gr\n", "from dataclasses import asdict\n", "from transformers import Tool, ReactCodeAgent # type: ignore\n", "from transformers.agents import stream_to_gradio, HfApiEngine # type: ignore\n", "\n", "# Import tool from Hub\n", "image_generation_tool = Tool.from_space(\n", " space_id=\"black-forest-labs/FLUX.1-schnell\",\n", " name=\"image_generator\",\n", " description=\"Generates an image following your prompt. Returns a PIL Image.\",\n", " api_name=\"/infer\",\n", ")\n", "\n", "llm_engine = HfApiEngine(\"Qwen/Qwen2.5-Coder-32B-Instruct\")\n", "# Initialize the agent with both tools and engine\n", "agent = ReactCodeAgent(tools=[image_generation_tool], llm_engine=llm_engine)\n", "\n", "\n", "def interact_with_agent(prompt, history):\n", " messages = []\n", " yield messages\n", " for msg in stream_to_gradio(agent, prompt):\n", " messages.append(asdict(msg))\n", " yield messages\n", " yield messages\n", "\n", "\n", "demo = gr.ChatInterface(\n", " interact_with_agent,\n", " chatbot= gr.Chatbot(\n", " label=\"Agent\",\n", " type=\"messages\",\n", " avatar_images=(\n", " None,\n", " \"https://em-content.zobj.net/source/twitter/53/robot-face_1f916.png\",\n", " ),\n", " ),\n", " examples=[\n", " [\"Generate an image of an astronaut riding an alligator\"],\n", " [\"I am writing a children's book for my daughter. Can you help me with some illustrations?\"],\n", " ],\n", " type=\"messages\",\n", ")\n", "\n", "if __name__ == \"__main__\":\n", " demo.launch()\n"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}

‎demo/agent_chatbot/run.py

+33-17
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,46 @@
11
import gradio as gr
2-
from gradio import ChatMessage
3-
from transformers import load_tool, ReactCodeAgent, HfEngine # type: ignore
4-
from utils import stream_from_transformers_agent
2+
from dataclasses import asdict
3+
from transformers import Tool, ReactCodeAgent # type: ignore
4+
from transformers.agents import stream_to_gradio, HfApiEngine # type: ignore
55

66
# Import tool from Hub
7-
image_generation_tool = load_tool("m-ric/text-to-image")
7+
image_generation_tool = Tool.from_space(
8+
space_id="black-forest-labs/FLUX.1-schnell",
9+
name="image_generator",
10+
description="Generates an image following your prompt. Returns a PIL Image.",
11+
api_name="/infer",
12+
)
813

9-
llm_engine = HfEngine("meta-llama/Meta-Llama-3-70B-Instruct")
10-
# Initialize the agent with both tools
14+
llm_engine = HfApiEngine("Qwen/Qwen2.5-Coder-32B-Instruct")
15+
# Initialize the agent with both tools and engine
1116
agent = ReactCodeAgent(tools=[image_generation_tool], llm_engine=llm_engine)
1217

13-
def interact_with_agent(prompt, messages):
14-
messages.append(ChatMessage(role="user", content=prompt))
18+
19+
def interact_with_agent(prompt, history):
20+
messages = []
1521
yield messages
16-
for msg in stream_from_transformers_agent(agent, prompt):
17-
messages.append(msg)
22+
for msg in stream_to_gradio(agent, prompt):
23+
messages.append(asdict(msg))
1824
yield messages
1925
yield messages
2026

21-
with gr.Blocks() as demo:
22-
stored_message = gr.State([])
23-
chatbot = gr.Chatbot(label="Agent",
24-
type="messages",
25-
avatar_images=(None, "https://em-content.zobj.net/source/twitter/53/robot-face_1f916.png"))
26-
text_input = gr.Textbox(lines=1, label="Chat Message")
27-
text_input.submit(lambda s: (s, ""), [text_input], [stored_message, text_input]).then(interact_with_agent, [stored_message, chatbot], [chatbot])
27+
28+
demo = gr.ChatInterface(
29+
interact_with_agent,
30+
chatbot= gr.Chatbot(
31+
label="Agent",
32+
type="messages",
33+
avatar_images=(
34+
None,
35+
"https://em-content.zobj.net/source/twitter/53/robot-face_1f916.png",
36+
),
37+
),
38+
examples=[
39+
["Generate an image of an astronaut riding an alligator"],
40+
["I am writing a children's book for my daughter. Can you help me with some illustrations?"],
41+
],
42+
type="messages",
43+
)
2844

2945
if __name__ == "__main__":
3046
demo.launch()

‎demo/agent_chatbot/utils.py

-64
This file was deleted.

‎guides/05_chatbots/03_agents-and-tool-usage.md

+31-18
Original file line numberDiff line numberDiff line change
@@ -35,37 +35,50 @@ We'll start by importing the necessary classes from transformers and gradio.
3535
```python
3636
import gradio as gr
3737
from gradio import ChatMessage
38-
from transformers import load_tool, ReactCodeAgent, HfEngine
39-
from utils import stream_from_transformers_agent
38+
from transformers import Tool, ReactCodeAgent # type: ignore
39+
from transformers.agents import stream_to_gradio, HfApiEngine # type: ignore
4040

4141
# Import tool from Hub
42-
image_generation_tool = load_tool("m-ric/text-to-image")
43-
42+
image_generation_tool = Tool.from_space(
43+
space_id="black-forest-labs/FLUX.1-schnell",
44+
name="image_generator",
45+
description="Generates an image following your prompt. Returns a PIL Image.",
46+
api_name="/infer",
47+
)
4448

45-
llm_engine = HfEngine("meta-llama/Meta-Llama-3-70B-Instruct")
46-
# Initialize the agent with both tools
49+
llm_engine = HfApiEngine("Qwen/Qwen2.5-Coder-32B-Instruct")
50+
# Initialize the agent with both tools and engine
4751
agent = ReactCodeAgent(tools=[image_generation_tool], llm_engine=llm_engine)
4852
```
4953

50-
Then we'll build the UI. The bulk of the logic is handled by `stream_from_transformers_agent`. We won't cover it in this guide because it will soon be merged to transformers but you can see its source code [here](https://huggingface.co/spaces/gradio/agent_chatbot/blob/main/utils.py).
54+
Then we'll build the UI:
5155

5256
```python
53-
def interact_with_agent(prompt, messages):
54-
messages.append(ChatMessage(role="user", content=prompt))
57+
def interact_with_agent(prompt, history):
58+
messages = []
5559
yield messages
56-
for msg in stream_from_transformers_agent(agent, prompt):
57-
messages.append(msg)
60+
for msg in stream_to_gradio(agent, prompt):
61+
messages.append(asdict(msg))
5862
yield messages
5963
yield messages
6064

6165

62-
with gr.Blocks() as demo:
63-
stored_message = gr.State([])
64-
chatbot = gr.Chatbot(label="Agent",
65-
type="messages",
66-
avatar_images=(None, "https://em-content.zobj.net/source/twitter/53/robot-face_1f916.png"))
67-
text_input = gr.Textbox(lines=1, label="Chat Message")
68-
text_input.submit(lambda s: (s, ""), [text_input], [stored_message, text_input]).then(interact_with_agent, [stored_message, chatbot], [chatbot])
66+
demo = gr.ChatInterface(
67+
interact_with_agent,
68+
chatbot= gr.Chatbot(
69+
label="Agent",
70+
type="messages",
71+
avatar_images=(
72+
None,
73+
"https://em-content.zobj.net/source/twitter/53/robot-face_1f916.png",
74+
),
75+
),
76+
examples=[
77+
["Generate an image of an astronaut riding an alligator"],
78+
["I am writing a children's book for my daughter. Can you help me with some illustrations?"],
79+
],
80+
type="messages",
81+
)
6982
```
7083

7184
You can see the full demo code [here](https://huggingface.co/spaces/gradio/agent_chatbot/blob/main/app.py).

0 commit comments

Comments
 (0)