目录简介简单聊天机器人示例为聊天机器人添加流式响应添加 Markdown、图片、音频或视频总结上一篇Gradio.Net (https://github.com/feiyun0112/Gradio.Net)是一个开源的 .NET 库它是 Gradio 的 .NET 移植版本允许你为机器学习模型、API 或任何 C# 函数快速构建演示或 Web 应用程序无需任何 JavaScript、CSS 或 Web 开发经验简介重要提示如果您刚入门建议使用ChatInterface来创建聊天机器人——这是一个高级抽象可以快速创建精美的聊天机器人应用通常只需一行代码即可完成。本教程将展示如何使用 Gradio.Net 低级 Blocks API 从零开始构建聊天机器人 UI。这将让您完全掌控聊天机器人的界面。您将从创建一个简单的文字聊天机器人开始然后添加流式文字响应最后构建一个能处理媒体文件的聊天机器人。简单聊天机器人示例让我们从一个简单的示例开始。机器人随机回复你好吗、今天是美好的一天或我非常饿等消息。以下是 Gradio.Net 的实现代码using Gradio.Net; using Gradio.Net.Components; // Simple chatbot that randomly responds with preset messages using var demo gr.Blocks(); using (demo) { var chatbot gr.Chatbot(); var msg gr.Textbox(); var clear gr.ClearButton(new ListComponent { msg, chatbot }); static (object, object) Respond(object message, object chatHistory) { var history (chatHistory as ListDictionarystring, object ?? new()).ToList(); string botMessage new[] { How are you?, Today is a great day, Im very hungry }[new Random().Next(3)]; history.Add(new Dictionarystring, object { [role] user, [content] message?.ToString() ?? }); history.Add(new Dictionarystring, object { [role] assistant, [content] botMessage }); Thread.Sleep(2000); return (, history); } Funcobject, object, (object, object) fn Respond; msg.Submit(fn: fn, inputs: new ListComponent { msg, chatbot }, outputs: new ListComponent { msg, chatbot }); } await demo.Launch();这里有三个 Gradio.Net 组件Chatbot其值存储整个对话历史为用户和机器人之间的响应列表。Textbox用户输入消息并按回车/提交以触发聊天机器人响应。ClearButton清除文本框和整个聊天历史的按钮。我们有一个Respond()函数接受整个聊天历史追加一条随机消息等待 2 秒然后返回更新后的聊天历史。为聊天机器人添加流式响应有几种方式可以改善上述聊天机器人的用户体验流式传输响应让用户不必等太久让用户消息立即显示在聊天历史中同时生成机器人响应以下是实现代码using Gradio.Net; using Gradio.Net.Components; // Streaming chatbot with user message appearing immediately using var demo gr.Blocks(); using (demo) { var chatbot gr.Chatbot(); var msg gr.Textbox(); var clear gr.Button(Clear); static (object, object) User(object userMessage, object history) { var hist (history as ListDictionarystring, object ?? new()).ToList(); hist.Add(new Dictionarystring, object { [role] user, [content] userMessage?.ToString() ?? }); return (, hist); } static IEnumerableobject Bot(object history) { var hist (history as ListDictionarystring, object ?? new()).ToList(); string botMessage new[] { How are you?, I love you, Im very hungry }[new Random().Next(3)]; hist.Add(new Dictionarystring, object { [role] assistant, [content] }); foreach (char ch in botMessage) { hist[^1][content] hist[^1][content]?.ToString() ch; Thread.Sleep(50); yield return hist.ToList(); } } Funcobject, object, (object, object) userFn User; Funcobject, IEnumerableobject botFn Bot; msg.Submit(fn: userFn, inputs: new ListComponent { msg, chatbot }, outputs: new ListComponent { msg, chatbot }, queue: false) .Then(fn: botFn, inputs: chatbot, outputs: chatbot); clear.Click(fn: (object _) (object)null!, inputs: null, outputs: chatbot, queue: false); } await demo.Launch();您会注意到当用户提交消息时我们通过.Then()链式绑定了两个事件第一个方法 User()使用用户消息更新聊天机器人并清除输入字段。由于我们希望这立即发生设置 queue: false。第二个方法 Bot()逐字符构建消息并 yield中间输出。Gradio.Net 会自动将任何带有 yield关键字的函数转换为流式输出接口。添加 Markdown、图片、音频或视频gr.Chatbot组件支持 Markdown 子集包括粗体、斜体和代码块。例如static ListDictionarystring, object Bot(ListDictionarystring, object history) { var response new Dictionarystring, object { [role] assistant, [content] **很酷** }; history.Add(response); return history; }此外它还可以处理媒体文件如图片、音频和视频。您可以使用MultimodalTextbox组件轻松上传各类媒体文件。要传入媒体文件必须传入一个包含path键指向本地文件的字典using Gradio.Net; using Gradio.Net.Components; using Gradio.Net.Events; // Multimodal streaming chatbot with image/file upload support and like/dislike buttons static void PrintLikeDislike(LikeData likeData) { Console.WriteLine($Index: {likeData.Index}, Value: {likeData.Value}, Liked: {likeData.Liked}); } static (object, object) AddMessage(object history, object message) { var hist (history as ListDictionarystring, object ?? new()).ToList(); var msgDict message as Dictionarystring, object ?? new(); var userContent new Listobject(); if (msgDict.TryGetValue(files, out var files) files is System.Collections.IEnumerable fileEnum files is not string) foreach (var f in fileEnum) userContent.Add(new Dictionarystring, object { [path] f?.ToString() ?? }); if (msgDict.TryGetValue(text, out var text) text ! null) userContent.Add(text.ToString() ?? ); hist.Add(new Dictionarystring, object { [role] user, [content] userContent }); return (hist, gr.MultimodalTextbox(value: null, interactive: false)); } static IEnumerableobject Bot(object history) { var hist (history as ListDictionarystring, object ?? new()).ToList(); string response **Thats cool!**; hist.Add(new Dictionarystring, object { [role] assistant, [content] }); foreach (char ch in response) { hist[^1][content] hist[^1][content]?.ToString() ch; Thread.Sleep(50); yield return hist.ToList(); } } using var demo gr.Blocks(); using (demo) { var chatbot gr.Chatbot(elemId: chatbot, likeUserMessage: true); var chatInput gr.MultimodalTextbox( interactive: true, fileCount: multiple, placeholder: Enter message or upload file..., showLabel: false, sources: new Liststring { microphone, upload } ); Funcobject, object, (object, object) addFn AddMessage; Funcobject, IEnumerableobject botFn Bot; ActionLikeData likeFn PrintLikeDislike; var chatMsg chatInput.Submit(fn: addFn, inputs: new ListComponent { chatbot, chatInput }, outputs: new ListComponent { chatbot, chatInput }); var botMsg chatMsg.Then(fn: botFn, inputs: chatbot, outputs: chatbot, apiName: bot_response); botMsg.Then(fn: () gr.MultimodalTextbox(interactive: true), inputs: null, outputs: chatInput); chatbot.Like(fn: likeFn, inputs: null, outputs: null); } await demo.Launch();总结本章介绍了如何使用 Gradio.Net Blocks API 从零开始构建自定义聊天机器人使用 gr.Chatbot、gr.Textbox和 gr.ClearButton构建简单聊天界面通过事件链.Then()和 yield实现流式响应使用 gr.MultimodalTextbox支持文字和媒体文件输入使用 chatbot.Like()为消息添加点赞/踩功能支持 Markdown、图片、音频和视频等富内容展示引入地址 Gradio.Net 开发指南 -- 如何使用 Gradio.Net Blocks 创建自定义聊天机器人
目录简介简单聊天机器人示例为聊天机器人添加流式响应添加 Markdown、图片、音频或视频总结上一篇Gradio.Net (https://github.com/feiyun0112/Gradio.Net)是一个开源的 .NET 库它是 Gradio 的 .NET 移植版本允许你为机器学习模型、API 或任何 C# 函数快速构建演示或 Web 应用程序无需任何 JavaScript、CSS 或 Web 开发经验简介重要提示如果您刚入门建议使用ChatInterface来创建聊天机器人——这是一个高级抽象可以快速创建精美的聊天机器人应用通常只需一行代码即可完成。本教程将展示如何使用 Gradio.Net 低级 Blocks API 从零开始构建聊天机器人 UI。这将让您完全掌控聊天机器人的界面。您将从创建一个简单的文字聊天机器人开始然后添加流式文字响应最后构建一个能处理媒体文件的聊天机器人。简单聊天机器人示例让我们从一个简单的示例开始。机器人随机回复你好吗、今天是美好的一天或我非常饿等消息。以下是 Gradio.Net 的实现代码using Gradio.Net; using Gradio.Net.Components; // Simple chatbot that randomly responds with preset messages using var demo gr.Blocks(); using (demo) { var chatbot gr.Chatbot(); var msg gr.Textbox(); var clear gr.ClearButton(new ListComponent { msg, chatbot }); static (object, object) Respond(object message, object chatHistory) { var history (chatHistory as ListDictionarystring, object ?? new()).ToList(); string botMessage new[] { How are you?, Today is a great day, Im very hungry }[new Random().Next(3)]; history.Add(new Dictionarystring, object { [role] user, [content] message?.ToString() ?? }); history.Add(new Dictionarystring, object { [role] assistant, [content] botMessage }); Thread.Sleep(2000); return (, history); } Funcobject, object, (object, object) fn Respond; msg.Submit(fn: fn, inputs: new ListComponent { msg, chatbot }, outputs: new ListComponent { msg, chatbot }); } await demo.Launch();这里有三个 Gradio.Net 组件Chatbot其值存储整个对话历史为用户和机器人之间的响应列表。Textbox用户输入消息并按回车/提交以触发聊天机器人响应。ClearButton清除文本框和整个聊天历史的按钮。我们有一个Respond()函数接受整个聊天历史追加一条随机消息等待 2 秒然后返回更新后的聊天历史。为聊天机器人添加流式响应有几种方式可以改善上述聊天机器人的用户体验流式传输响应让用户不必等太久让用户消息立即显示在聊天历史中同时生成机器人响应以下是实现代码using Gradio.Net; using Gradio.Net.Components; // Streaming chatbot with user message appearing immediately using var demo gr.Blocks(); using (demo) { var chatbot gr.Chatbot(); var msg gr.Textbox(); var clear gr.Button(Clear); static (object, object) User(object userMessage, object history) { var hist (history as ListDictionarystring, object ?? new()).ToList(); hist.Add(new Dictionarystring, object { [role] user, [content] userMessage?.ToString() ?? }); return (, hist); } static IEnumerableobject Bot(object history) { var hist (history as ListDictionarystring, object ?? new()).ToList(); string botMessage new[] { How are you?, I love you, Im very hungry }[new Random().Next(3)]; hist.Add(new Dictionarystring, object { [role] assistant, [content] }); foreach (char ch in botMessage) { hist[^1][content] hist[^1][content]?.ToString() ch; Thread.Sleep(50); yield return hist.ToList(); } } Funcobject, object, (object, object) userFn User; Funcobject, IEnumerableobject botFn Bot; msg.Submit(fn: userFn, inputs: new ListComponent { msg, chatbot }, outputs: new ListComponent { msg, chatbot }, queue: false) .Then(fn: botFn, inputs: chatbot, outputs: chatbot); clear.Click(fn: (object _) (object)null!, inputs: null, outputs: chatbot, queue: false); } await demo.Launch();您会注意到当用户提交消息时我们通过.Then()链式绑定了两个事件第一个方法 User()使用用户消息更新聊天机器人并清除输入字段。由于我们希望这立即发生设置 queue: false。第二个方法 Bot()逐字符构建消息并 yield中间输出。Gradio.Net 会自动将任何带有 yield关键字的函数转换为流式输出接口。添加 Markdown、图片、音频或视频gr.Chatbot组件支持 Markdown 子集包括粗体、斜体和代码块。例如static ListDictionarystring, object Bot(ListDictionarystring, object history) { var response new Dictionarystring, object { [role] assistant, [content] **很酷** }; history.Add(response); return history; }此外它还可以处理媒体文件如图片、音频和视频。您可以使用MultimodalTextbox组件轻松上传各类媒体文件。要传入媒体文件必须传入一个包含path键指向本地文件的字典using Gradio.Net; using Gradio.Net.Components; using Gradio.Net.Events; // Multimodal streaming chatbot with image/file upload support and like/dislike buttons static void PrintLikeDislike(LikeData likeData) { Console.WriteLine($Index: {likeData.Index}, Value: {likeData.Value}, Liked: {likeData.Liked}); } static (object, object) AddMessage(object history, object message) { var hist (history as ListDictionarystring, object ?? new()).ToList(); var msgDict message as Dictionarystring, object ?? new(); var userContent new Listobject(); if (msgDict.TryGetValue(files, out var files) files is System.Collections.IEnumerable fileEnum files is not string) foreach (var f in fileEnum) userContent.Add(new Dictionarystring, object { [path] f?.ToString() ?? }); if (msgDict.TryGetValue(text, out var text) text ! null) userContent.Add(text.ToString() ?? ); hist.Add(new Dictionarystring, object { [role] user, [content] userContent }); return (hist, gr.MultimodalTextbox(value: null, interactive: false)); } static IEnumerableobject Bot(object history) { var hist (history as ListDictionarystring, object ?? new()).ToList(); string response **Thats cool!**; hist.Add(new Dictionarystring, object { [role] assistant, [content] }); foreach (char ch in response) { hist[^1][content] hist[^1][content]?.ToString() ch; Thread.Sleep(50); yield return hist.ToList(); } } using var demo gr.Blocks(); using (demo) { var chatbot gr.Chatbot(elemId: chatbot, likeUserMessage: true); var chatInput gr.MultimodalTextbox( interactive: true, fileCount: multiple, placeholder: Enter message or upload file..., showLabel: false, sources: new Liststring { microphone, upload } ); Funcobject, object, (object, object) addFn AddMessage; Funcobject, IEnumerableobject botFn Bot; ActionLikeData likeFn PrintLikeDislike; var chatMsg chatInput.Submit(fn: addFn, inputs: new ListComponent { chatbot, chatInput }, outputs: new ListComponent { chatbot, chatInput }); var botMsg chatMsg.Then(fn: botFn, inputs: chatbot, outputs: chatbot, apiName: bot_response); botMsg.Then(fn: () gr.MultimodalTextbox(interactive: true), inputs: null, outputs: chatInput); chatbot.Like(fn: likeFn, inputs: null, outputs: null); } await demo.Launch();总结本章介绍了如何使用 Gradio.Net Blocks API 从零开始构建自定义聊天机器人使用 gr.Chatbot、gr.Textbox和 gr.ClearButton构建简单聊天界面通过事件链.Then()和 yield实现流式响应使用 gr.MultimodalTextbox支持文字和媒体文件输入使用 chatbot.Like()为消息添加点赞/踩功能支持 Markdown、图片、音频和视频等富内容展示引入地址