当前位置：首页 > news >正文

Gradio.Net 开发指南 -- 如何使用 Gradio.Net Blocks 创建自定义聊天机器人

news 2026/8/15 16:13:49

简介

简单聊天机器人示例

为聊天机器人添加流式响应

添加 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 List<Component> { msg, chatbot }); static (object, object) Respond(object message, object chatHistory) { var history = (chatHistory as List<Dictionary<string, object>> ?? new()).ToList(); string botMessage = new[] { "How are you?", "Today is a great day", "I'm very hungry" }[new Random().Next(3)]; history.Add(new Dictionary<string, object> { ["role"] = "user", ["content"] = message?.ToString() ?? "" }); history.Add(new Dictionary<string, object> { ["role"] = "assistant", ["content"] = botMessage }); Thread.Sleep(2000); return ("", history); } Func<object, object, (object, object)> fn = Respond; msg.Submit(fn: fn, inputs: new List<Component> { msg, chatbot }, outputs: new List<Component> { 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 List<Dictionary<string, object>> ?? new()).ToList(); hist.Add(new Dictionary<string, object> { ["role"] = "user", ["content"] = userMessage?.ToString() ?? "" }); return ("", hist); } static IEnumerable<object> Bot(object history) { var hist = (history as List<Dictionary<string, object>> ?? new()).ToList(); string botMessage = new[] { "How are you?", "I love you", "I'm very hungry" }[new Random().Next(3)]; hist.Add(new Dictionary<string, object> { ["role"] = "assistant", ["content"] = "" }); foreach (char ch in botMessage) { hist[^1]["content"] = hist[^1]["content"]?.ToString() + ch; Thread.Sleep(50); yield return hist.ToList(); } } Func<object, object, (object, object)> userFn = User; Func<object, IEnumerable<object>> botFn = Bot; msg.Submit(fn: userFn, inputs: new List<Component> { msg, chatbot }, outputs: new List<Component> { 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 List<Dictionary<string, object>> Bot(List<Dictionary<string, object>> history) { var response = new Dictionary<string, 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 List<Dictionary<string, object>> ?? new()).ToList(); var msgDict = message as Dictionary<string, object> ?? new(); var userContent = new List<object>(); 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 Dictionary<string, object> { ["path"] = f?.ToString() ?? "" }); if (msgDict.TryGetValue("text", out var text) && text != null) userContent.Add(text.ToString() ?? ""); hist.Add(new Dictionary<string, object> { ["role"] = "user", ["content"] = userContent }); return (hist, gr.MultimodalTextbox(value: null, interactive: false)); } static IEnumerable<object> Bot(object history) { var hist = (history as List<Dictionary<string, object>> ?? new()).ToList(); string response = "**That's cool!**"; hist.Add(new Dictionary<string, 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 List<string> { "microphone", "upload" } ); Func<object, object, (object, object)> addFn = AddMessage; Func<object, IEnumerable<object>> botFn = Bot; Action<LikeData> likeFn = PrintLikeDislike; var chatMsg = chatInput.Submit(fn: addFn, inputs: new List<Component> { chatbot, chatInput }, outputs: new List<Component> { 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();