目录快速创建聊天机器人简介定义聊天函数流式聊天机器人自定义聊天 UI额外输入额外输出返回复杂响应直接修改聊天机器人值通过 API 使用聊天机器人Using Your Chatbot via API聊天历史收集用户反馈总结上一篇Gradio.Net (https://github.com/feiyun0112/Gradio.Net)是一个开源的 .NET 库它是 Gradio 的 .NET 移植版本允许你为机器学习模型、API 或任何 C# 函数快速构建演示或 Web 应用程序无需任何 JavaScript、CSS 或 Web 开发经验快速创建聊天机器人简介聊天机器人是大型语言模型LLM的热门应用。使用 Gradio.Net你可以轻松构建聊天应用并分享给用户或通过直观的 UI 自行体验。本教程使用ChatInterface类这是一个高级抽象允许你快速创建聊天机器人 UI通常只需几行 C# 代码。它还可以轻松扩展以支持多模态聊天机器人或需要进一步定制的聊天机器人。定义聊天函数要使用ChatInterface创建聊天应用首先需要定义聊天函数。最简单的情况下你的聊天函数应该接受两个参数message和history参数可以任意命名但必须保持此顺序。message表示用户最新消息的字符串。history包含 role和 content键的 openai 格式字典列表表示之前的对话历史。history的格式如下[ {role: user, content: What is the capital of France?}, {role: assistant, content: Paris} ]你的聊天函数只需返回一个字符串值即聊天机器人基于聊天历史和最新消息的响应。示例1随机回复 Yes 或 Nousing Gradio.Net; string RandomResponse(object message, object history) { return new Random().Next(2) 0 ? Yes : No; } Funcobject, object, string fn RandomResponse; var demo new ChatInterface(fn: fn); await demo.Launch();示例2交替同意和不同意using Gradio.Net; string AlternatinglyAgree(object message, object history) { var histList history as ListDictionarystring, object ?? new(); int assistantCount histList.Count(h h.ContainsKey(role) h[role]?.ToString() assistant); if (assistantCount % 2 0) return $Yes, I do think that: {message}; else return I dont think so; } Funcobject, object, string fn AlternatinglyAgree; var demo new ChatInterface(fn: fn); await demo.Launch();流式聊天机器人在聊天函数中可以使用IAsyncEnumerableobject生成一系列部分响应每个响应替换前一个。这样就实现了流式聊天机器人using Gradio.Net; async IAsyncEnumerableobject SlowEcho(object message, object history) { var msg message?.ToString() ?? ; for (int i 0; i msg.Length; i) { await Task.Delay(300); yield return You typed: msg[..i]; } } Funcobject, object, IAsyncEnumerableobject fn SlowEcho; var demo new ChatInterface(fn: fn); await demo.Launch();响应流式传输时Submit 按钮会变成 Stop 按钮可以用来停止生成。自定义聊天 UI如果你熟悉 Gradio.Net 的Interface类ChatInterface包含许多相同的参数可用于自定义聊天机器人的外观和行为使用 title和 description参数在聊天机器人上方添加标题和描述使用 examples参数添加预设示例并可以通过 cacheExamples进行缓存自定义聊天机器人如更改高度或添加占位符或文本框如设置最大字符数添加示例可以通过examples参数为ChatInterface添加预设示例这些示例会以按钮形式显示在聊天机器人中using Gradio.Net; using Gradio.Net.Components; string YesMan(object message, object history) { var msg message?.ToString() ?? ; if (msg.EndsWith(?)) return Yes; else return Ask me anything!; } Funcobject, object, string fn YesMan; var demo new ChatInterface( fn: fn, chatbot: gr.Chatbot(height: 300), textbox: gr.Textbox(placeholder: Ask me a yes or no question, scale: 7), title: Yes Man, description: Ask Yes Man any question, examples: new Liststring { Hello, Am I cool?, Are tomatoes vegetables? }); await demo.Launch();额外输入你可能希望为聊天函数添加额外的输入并通过聊天 UI 向用户展示。例如可以添加一个系统提示文本框或一个设置响应 token 数量的滑块。ChatInterface类支持additionalInputs参数using Gradio.Net; using Gradio.Net.Components; async IAsyncEnumerableobject Echo(object message, object history, string systemPrompt, double tokens) { string response $System prompt: {systemPrompt}\nMessage: {message}.; int maxTokens (int)tokens; for (int i 0; i Math.Min(response.Length, maxTokens); i) { await Task.Delay(50); yield return response[..(i 1)]; } } Funcobject, object, string, double, IAsyncEnumerableobject fn Echo; var demo new ChatInterface( fn: fn, additionalInputs: new ListComponent { gr.Textbox(You are helpful AI., label: System Prompt), gr.Slider(minimum: 10, maximum: 100) }); await demo.Launch();额外输出同样你也可以从聊天函数返回额外的输出。只需向additionalOutputs参数传入组件列表并从聊天函数中返回这些组件的额外值using Gradio.Net; using Gradio.Net.Components; (string, Code?) Chat(object message, object history) { var msg message?.ToString()?.ToLower() ?? ; if (msg.Contains(python)) return (Heres the Python code., gr.Code(language: python, value: def fib(n): return n if n 1 else fib(n-1)fib(n-2))); else if (msg.Contains(csharp) || msg.Contains(c#)) return (Heres the C# code., gr.Code(language: csharp, value: int Fib(int n) n 1 ? n : Fib(n-1) Fib(n-2);)); else return (Please ask about Python or C#., null); } using var demo gr.Blocks(); var code gr.Code(render: false); using (gr.Row()) { using (gr.Column()) { gr.Markdown(centerh1Write Python or C#/h1/center); var chat new ChatInterface( fn: (Funcobject, object, (string, Code?))Chat, examples: new Liststring { Python, C# }, additionalOutputs: new ListComponent { code }); chat.Render(); } using (gr.Column()) { gr.Markdown(centerh1Code Artifacts/h1/center); code.Render(); } } await demo.Launch();返回复杂响应返回文件或 Gradio.Net 组件以下 Gradio.Net 组件可以在聊天界面中显示gr.Image、gr.Plot、gr.Audio、gr.HTML、gr.Video、gr.Gallery、gr.File。从聊天函数中返回这些组件即可使用它们using Gradio.Net; using Gradio.Net.Components; object Music(object message, object history) { var msg message?.ToString()?.Trim() ?? ; if (!string.IsNullOrEmpty(msg)) return gr.Audio(https://github.com/gradio-app/gradio/raw/main/test/test_files/audio_sample.wav); else return Please provide the name of an artist; } Funcobject, object, object fn Music; var demo new ChatInterface( fn: fn, textbox: gr.Textbox(placeholder: Which artists music do you want to listen to?, scale: 7)); await demo.Launch();显示中间思考过程或工具调用ChatInterface支持显示中间思考过程或工具调用。要实现这一点需要从聊天函数中返回ChatMessage对象并在metadata中设置title键using Gradio.Net; async IAsyncEnumerableobject SimulateThinking(object message, object history) { var response new ChatMessage( content: , metadata: new Dictionarystring, object { [title] _Thinking_ step-by-step, [id] 0, [status] pending }); yield return response; var thoughts new[] { First, understanding the query..., Considering broader context..., Analyzing approaches..., Structuring the response... }; string accumulated ; foreach (var thought in thoughts) { await Task.Delay(500); accumulated $- {thought}\n\n; response.Content accumulated.Trim(); yield return response; } response.Metadata[status] done; yield return response; yield return new ChatMessage(content: Based on my analysis, here is my response.); } Funcobject, object, IAsyncEnumerableobject fn SimulateThinking; var demo new ChatInterface(fn: fn, title: Thinking LLM Chat Interface ); await demo.Launch();直接修改聊天机器人值可以通过ChatInterface.chatbot_value作为事件的输入或输出来直接修改聊天机器人的值。下面的例子用一个Radio组件预填充聊天历史using Gradio.Net; using Gradio.Net.Components; ListDictionarystring, object? PrefillChatbot(string choice) { return choice switch { Greeting new ListDictionarystring, object { new() { [role] user, [content] Hi there! }, new() { [role] assistant, [content] Hello! How can I assist you today? } }, Complaint new ListDictionarystring, object { new() { [role] user, [content] Im not happy with the service. }, new() { [role] assistant, [content] Im sorry to hear that. Can you tell me more? } }, _ new ListDictionarystring, object() }; } string RandomResponse(object message, object history) { return new Random().Next(2) 0 ? Yes : No; } using var demo gr.Blocks(); var radio gr.Radio(new Liststring { Greeting, Complaint, Blank }, label: Prefill); var chat new ChatInterface( fn: (Funcobject, object, string)RandomResponse, apiName: chat); chat.Render(); radio.Change(fn: PrefillChatbot, inputs: radio, outputs: chat.ChatbotValue); await demo.Launch();通过 API 使用聊天机器人Using Your Chatbot via API一旦你构建了 Gradio.Net 聊天界面并将其托管就可以通过简单的 API 查询它。API 路由将是你传递给ChatInterface的函数名称例如gr.ChatInterface(fn: respond)则 API 路由为/respond。聊天历史通过设置saveHistory: true可以为ChatInterface启用持久化聊天历史允许用户维护多个对话并轻松切换。对话会存储在用户浏览器的本地存储中私密且不会与其他用户共享var demo new ChatInterface(fn: fn, saveHistory: true); await demo.Launch();收集用户反馈通过设置flaggingMode: manual用户可以对助手的响应点赞或点踩。每个被标记的响应以及整个聊天历史都将保存到工作目录中的 CSV 文件中async IAsyncEnumerableobject SlowEcho(object message, object history) { var msg message?.ToString() ?? ; for (int i 0; i msg.Length; i) { await Task.Delay(50); yield return You typed: msg[..i]; } } Funcobject, object, IAsyncEnumerableobject fn SlowEcho; var demo new ChatInterface( fn: fn, flaggingMode: manual, flaggingOptions: new Liststring { Like, Spam, Inappropriate, Other }, saveHistory: true); await demo.Launch();总结本章介绍了如何使用ChatInterface类快速创建聊天机器人基础聊天函数接受 message和 history两个参数返回字符串响应流式响应使用 IAsyncEnumerableobject实现打字机效果自定义 UI通过 title、description、examples、chatbot、textbox等参数定制界面额外输入通过 additionalInputs添加系统提示、滑块等额外控件额外输出通过 additionalOutputs输出代码、图像等内容复杂响应返回 Gradio.Net 组件或 ChatMessage对象实现富文本展示聊天历史通过 saveHistory: true持久化存储对话用户反馈通过 flaggingMode收集用户反馈引入地址 Gradio.Net 开发指南 -- 快速创建聊天机器人
目录快速创建聊天机器人简介定义聊天函数流式聊天机器人自定义聊天 UI额外输入额外输出返回复杂响应直接修改聊天机器人值通过 API 使用聊天机器人Using Your Chatbot via API聊天历史收集用户反馈总结上一篇Gradio.Net (https://github.com/feiyun0112/Gradio.Net)是一个开源的 .NET 库它是 Gradio 的 .NET 移植版本允许你为机器学习模型、API 或任何 C# 函数快速构建演示或 Web 应用程序无需任何 JavaScript、CSS 或 Web 开发经验快速创建聊天机器人简介聊天机器人是大型语言模型LLM的热门应用。使用 Gradio.Net你可以轻松构建聊天应用并分享给用户或通过直观的 UI 自行体验。本教程使用ChatInterface类这是一个高级抽象允许你快速创建聊天机器人 UI通常只需几行 C# 代码。它还可以轻松扩展以支持多模态聊天机器人或需要进一步定制的聊天机器人。定义聊天函数要使用ChatInterface创建聊天应用首先需要定义聊天函数。最简单的情况下你的聊天函数应该接受两个参数message和history参数可以任意命名但必须保持此顺序。message表示用户最新消息的字符串。history包含 role和 content键的 openai 格式字典列表表示之前的对话历史。history的格式如下[ {role: user, content: What is the capital of France?}, {role: assistant, content: Paris} ]你的聊天函数只需返回一个字符串值即聊天机器人基于聊天历史和最新消息的响应。示例1随机回复 Yes 或 Nousing Gradio.Net; string RandomResponse(object message, object history) { return new Random().Next(2) 0 ? Yes : No; } Funcobject, object, string fn RandomResponse; var demo new ChatInterface(fn: fn); await demo.Launch();示例2交替同意和不同意using Gradio.Net; string AlternatinglyAgree(object message, object history) { var histList history as ListDictionarystring, object ?? new(); int assistantCount histList.Count(h h.ContainsKey(role) h[role]?.ToString() assistant); if (assistantCount % 2 0) return $Yes, I do think that: {message}; else return I dont think so; } Funcobject, object, string fn AlternatinglyAgree; var demo new ChatInterface(fn: fn); await demo.Launch();流式聊天机器人在聊天函数中可以使用IAsyncEnumerableobject生成一系列部分响应每个响应替换前一个。这样就实现了流式聊天机器人using Gradio.Net; async IAsyncEnumerableobject SlowEcho(object message, object history) { var msg message?.ToString() ?? ; for (int i 0; i msg.Length; i) { await Task.Delay(300); yield return You typed: msg[..i]; } } Funcobject, object, IAsyncEnumerableobject fn SlowEcho; var demo new ChatInterface(fn: fn); await demo.Launch();响应流式传输时Submit 按钮会变成 Stop 按钮可以用来停止生成。自定义聊天 UI如果你熟悉 Gradio.Net 的Interface类ChatInterface包含许多相同的参数可用于自定义聊天机器人的外观和行为使用 title和 description参数在聊天机器人上方添加标题和描述使用 examples参数添加预设示例并可以通过 cacheExamples进行缓存自定义聊天机器人如更改高度或添加占位符或文本框如设置最大字符数添加示例可以通过examples参数为ChatInterface添加预设示例这些示例会以按钮形式显示在聊天机器人中using Gradio.Net; using Gradio.Net.Components; string YesMan(object message, object history) { var msg message?.ToString() ?? ; if (msg.EndsWith(?)) return Yes; else return Ask me anything!; } Funcobject, object, string fn YesMan; var demo new ChatInterface( fn: fn, chatbot: gr.Chatbot(height: 300), textbox: gr.Textbox(placeholder: Ask me a yes or no question, scale: 7), title: Yes Man, description: Ask Yes Man any question, examples: new Liststring { Hello, Am I cool?, Are tomatoes vegetables? }); await demo.Launch();额外输入你可能希望为聊天函数添加额外的输入并通过聊天 UI 向用户展示。例如可以添加一个系统提示文本框或一个设置响应 token 数量的滑块。ChatInterface类支持additionalInputs参数using Gradio.Net; using Gradio.Net.Components; async IAsyncEnumerableobject Echo(object message, object history, string systemPrompt, double tokens) { string response $System prompt: {systemPrompt}\nMessage: {message}.; int maxTokens (int)tokens; for (int i 0; i Math.Min(response.Length, maxTokens); i) { await Task.Delay(50); yield return response[..(i 1)]; } } Funcobject, object, string, double, IAsyncEnumerableobject fn Echo; var demo new ChatInterface( fn: fn, additionalInputs: new ListComponent { gr.Textbox(You are helpful AI., label: System Prompt), gr.Slider(minimum: 10, maximum: 100) }); await demo.Launch();额外输出同样你也可以从聊天函数返回额外的输出。只需向additionalOutputs参数传入组件列表并从聊天函数中返回这些组件的额外值using Gradio.Net; using Gradio.Net.Components; (string, Code?) Chat(object message, object history) { var msg message?.ToString()?.ToLower() ?? ; if (msg.Contains(python)) return (Heres the Python code., gr.Code(language: python, value: def fib(n): return n if n 1 else fib(n-1)fib(n-2))); else if (msg.Contains(csharp) || msg.Contains(c#)) return (Heres the C# code., gr.Code(language: csharp, value: int Fib(int n) n 1 ? n : Fib(n-1) Fib(n-2);)); else return (Please ask about Python or C#., null); } using var demo gr.Blocks(); var code gr.Code(render: false); using (gr.Row()) { using (gr.Column()) { gr.Markdown(centerh1Write Python or C#/h1/center); var chat new ChatInterface( fn: (Funcobject, object, (string, Code?))Chat, examples: new Liststring { Python, C# }, additionalOutputs: new ListComponent { code }); chat.Render(); } using (gr.Column()) { gr.Markdown(centerh1Code Artifacts/h1/center); code.Render(); } } await demo.Launch();返回复杂响应返回文件或 Gradio.Net 组件以下 Gradio.Net 组件可以在聊天界面中显示gr.Image、gr.Plot、gr.Audio、gr.HTML、gr.Video、gr.Gallery、gr.File。从聊天函数中返回这些组件即可使用它们using Gradio.Net; using Gradio.Net.Components; object Music(object message, object history) { var msg message?.ToString()?.Trim() ?? ; if (!string.IsNullOrEmpty(msg)) return gr.Audio(https://github.com/gradio-app/gradio/raw/main/test/test_files/audio_sample.wav); else return Please provide the name of an artist; } Funcobject, object, object fn Music; var demo new ChatInterface( fn: fn, textbox: gr.Textbox(placeholder: Which artists music do you want to listen to?, scale: 7)); await demo.Launch();显示中间思考过程或工具调用ChatInterface支持显示中间思考过程或工具调用。要实现这一点需要从聊天函数中返回ChatMessage对象并在metadata中设置title键using Gradio.Net; async IAsyncEnumerableobject SimulateThinking(object message, object history) { var response new ChatMessage( content: , metadata: new Dictionarystring, object { [title] _Thinking_ step-by-step, [id] 0, [status] pending }); yield return response; var thoughts new[] { First, understanding the query..., Considering broader context..., Analyzing approaches..., Structuring the response... }; string accumulated ; foreach (var thought in thoughts) { await Task.Delay(500); accumulated $- {thought}\n\n; response.Content accumulated.Trim(); yield return response; } response.Metadata[status] done; yield return response; yield return new ChatMessage(content: Based on my analysis, here is my response.); } Funcobject, object, IAsyncEnumerableobject fn SimulateThinking; var demo new ChatInterface(fn: fn, title: Thinking LLM Chat Interface ); await demo.Launch();直接修改聊天机器人值可以通过ChatInterface.chatbot_value作为事件的输入或输出来直接修改聊天机器人的值。下面的例子用一个Radio组件预填充聊天历史using Gradio.Net; using Gradio.Net.Components; ListDictionarystring, object? PrefillChatbot(string choice) { return choice switch { Greeting new ListDictionarystring, object { new() { [role] user, [content] Hi there! }, new() { [role] assistant, [content] Hello! How can I assist you today? } }, Complaint new ListDictionarystring, object { new() { [role] user, [content] Im not happy with the service. }, new() { [role] assistant, [content] Im sorry to hear that. Can you tell me more? } }, _ new ListDictionarystring, object() }; } string RandomResponse(object message, object history) { return new Random().Next(2) 0 ? Yes : No; } using var demo gr.Blocks(); var radio gr.Radio(new Liststring { Greeting, Complaint, Blank }, label: Prefill); var chat new ChatInterface( fn: (Funcobject, object, string)RandomResponse, apiName: chat); chat.Render(); radio.Change(fn: PrefillChatbot, inputs: radio, outputs: chat.ChatbotValue); await demo.Launch();通过 API 使用聊天机器人Using Your Chatbot via API一旦你构建了 Gradio.Net 聊天界面并将其托管就可以通过简单的 API 查询它。API 路由将是你传递给ChatInterface的函数名称例如gr.ChatInterface(fn: respond)则 API 路由为/respond。聊天历史通过设置saveHistory: true可以为ChatInterface启用持久化聊天历史允许用户维护多个对话并轻松切换。对话会存储在用户浏览器的本地存储中私密且不会与其他用户共享var demo new ChatInterface(fn: fn, saveHistory: true); await demo.Launch();收集用户反馈通过设置flaggingMode: manual用户可以对助手的响应点赞或点踩。每个被标记的响应以及整个聊天历史都将保存到工作目录中的 CSV 文件中async IAsyncEnumerableobject SlowEcho(object message, object history) { var msg message?.ToString() ?? ; for (int i 0; i msg.Length; i) { await Task.Delay(50); yield return You typed: msg[..i]; } } Funcobject, object, IAsyncEnumerableobject fn SlowEcho; var demo new ChatInterface( fn: fn, flaggingMode: manual, flaggingOptions: new Liststring { Like, Spam, Inappropriate, Other }, saveHistory: true); await demo.Launch();总结本章介绍了如何使用ChatInterface类快速创建聊天机器人基础聊天函数接受 message和 history两个参数返回字符串响应流式响应使用 IAsyncEnumerableobject实现打字机效果自定义 UI通过 title、description、examples、chatbot、textbox等参数定制界面额外输入通过 additionalInputs添加系统提示、滑块等额外控件额外输出通过 additionalOutputs输出代码、图像等内容复杂响应返回 Gradio.Net 组件或 ChatMessage对象实现富文本展示聊天历史通过 saveHistory: true持久化存储对话用户反馈通过 flaggingMode收集用户反馈引入地址