(1):踏上旅程

(2):引入 Semantic Kernel 框架

在本章中，我们将探索如何利用 .NET 开拓我们的第一个人工智能运用程序。

在之前的章节里，我们紧张通过掌握台界面与用户进行交互，但在实际运用中，一个清晰且都雅的图形用户界面（GUI）对付提升用户体验至关主要。

运用 NET 开拓 AI 应用3 创建第一个 AI 应用

图形用户界面（GUI）通过图形元素如图标、按钮和菜单，供应了一种直不雅观的交互办法。
在GUI中，视觉工具不仅传达信息，还指示用户可以实行的操作。

一样平常情形下，AI 运用采取 Web 页面供应GUI，这常日须要前端开拓知识，如HTML、JavaScript和CSS，以及对Vue等专业前端框架的理解。

为了降落这些技能门槛，我们选择利用Gradio.Net来开拓AI运用。
Gradio.Net是一个开源的.NET库，它简化了为机器学习模型创建定制用户界面的过程。
开拓者可以利用它快速构建和支配基于Web的交互式界面，让用户能够与模型互动并实时查当作果。

Gradio.Net抽象了Web开拓的繁芜性，使得无需任何前端开拓履历的开拓者也能专注于模型及其功能的开拓。

第一个 AI 运用

现在，让我们利用Gradio.Net来为我们之前的代码实现一个用户界面。

首先，通过Visual Studio 2022创建一个新的ASP.NET Core Web API运用程序，并利用NuGet包管理器添加Gradio.Net.AspNetCore库。

接着，编写以下代码来启动运用程序并创建页面配置：

App.Launch(await CreateBlocks(kernel));static async Task<Blocks> CreateBlocks(Kernel kernel){ using (var blocks = gr.Blocks()) { Textbox inputTextbox, outputTextbox; using (gr.Row()) { inputTextbox = gr.Textbox(label: \"大众提问\"大众, placeholder: \"大众你的问题?\"大众); outputTextbox = gr.Textbox(label: \公众回答\公众); } var btn = gr.Button(\"大众提交\公众); await btn.Click(fn: async (input) => gr.Output(await AskAi(input, kernel)), inputs: new[] { inputTextbox }, outputs: new[] { outputTextbox });return blocks; }}

在这段代码中，App.Launch是Gradio.Net运用的入口点，而CreateBlocks方法则卖力创建页面布局和组件。
我们利用gr.Blocks来定义根组件，由它来掌握其他组件放置的位置，以及定义用于交互式用户体验的事宜处理程序。

有几点须要把稳：

定义 Gradio Blocks 须要利用 “using” 子句。
using 子句中的组件才会添加到运用中。
组件将按照定义的顺序垂直呈现。

如果想改变组件的呈现办法，可以在内部连续利用 “using” 子句定义其他布局组件。
比如gr.Row, using 子句中的组件将在同一行呈现。
布局组件的详细先容请查看 https://github.com/feiyun0112/Gradio.Net/blob/main/readme_files/layout_demo.md。
此外，我们还创建了一个按钮，并为其定义了点击事宜，Click方法包含 3 个参数：fn事宜处理、inputs输入组件数组、outputs输出组件数组。

当按钮被点击时，输入组件对应的值将作为参数通报给fn，而fn的返回值将通报给输出组件。

static async Task<string> AskAi(Input input, Kernel kernel){ var result = await kernel.InvokePromptAsync(Textbox.Payload(input.Data[0]));return result.ToString();}

终极运行效果如图：

结论

通过实际的代码示例，我们展示了如何利用Gradio.Net构建一个大略的问答系统。
纵然是没有前端开拓履历的开拓者也能够创建直不雅观、交互式的GUI，从而使得AI运用程序更加用户友好。

Gradio.NET(https://github.com/feiyun0112/Gradio.Net/)的目标是成为用于开拓 Web 运用的 .NET 开拓者的首选框架。
它的设计理念是让开发变得更加大略，让每个人都能够参与到Web运用的创造中来。

添加微信GradioDotNet，通过加入技能谈论群，开拓者们可以分享履历，办理问题，并共同推动.NET的发展。

完全源代码:

using Gradio.Net;using Microsoft.SemanticKernel;string endpoint = Environment.GetEnvironmentVariable(\"大众AZURE_OPENAI_ENDPOINT\"大众);string deploymentName = Environment.GetEnvironmentVariable(\公众AZURE_OPENAI_GPT_NAME\公众);string apiKey = Environment.GetEnvironmentVariable(\"大众AZURE_OPENAI_API_KEY\公众);var kernel = Kernel.CreateBuilder() .AddAzureOpenAIChatCompletion( deploymentName: deploymentName, endpoint: endpoint, apiKey: apiKey) .Build();App.Launch(await CreateBlocks(kernel));static async Task<Blocks> CreateBlocks(Kernel kernel){ using (var blocks = gr.Blocks()) { Textbox inputTextbox, outputTextbox; using (gr.Row()) { inputTextbox = gr.Textbox(label: \"大众提问\公众, placeholder: \"大众你的问题?\"大众); outputTextbox = gr.Textbox(label: \"大众回答\"大众); } var btn = gr.Button(\"大众提交\公众); await btn.Click(fn: async (input) => gr.Output(await AskAi(input, kernel)), inputs: new[] { inputTextbox }, outputs: new[] { outputTextbox });return blocks; }}static async Task<string> AskAi(Input input, Kernel kernel){ var result = await kernel.InvokePromptAsync(Textbox.Payload(input.Data[0]));return result.ToString();}