目录Interface 类Gradio.Net 组件组件属性多个输入和输出组件图像示例示例输入描述性内容Accordion 中的附加输入总结Gradio.Net (https://github.com/feiyun0112/Gradio.Net)是一个开源的 .NET 库它是 Gradio 的 .NET 移植版本允许你为机器学习模型、API 或任何 C# 函数快速构建演示或 Web 应用程序无需任何 JavaScript、CSS 或 Web 开发经验Interface 类如快速入门中提到的gr.Interface类是 Gradio.Net 中的一个高级抽象让你可以通过简单地指定输入类型和输出类型快速为任何 C# 函数创建演示。让我们重新看一下我们的第一个演示using Gradio.Net; string Greet(string name, double intensity) { return 你好 name ! new string(!, (int)intensity - 1); } var demo gr.Interface( fn: Greet, inputs: new object[] { text, slider }, outputs: new[] { text } ); await demo.Launch();我们看到Interface类使用三个必需参数进行初始化‎fn要包装用户界面 (UI) 的函数‎inputs要使用哪个 Gradio.Net 组件作为输入。组件的数量应与函数中的参数数量匹配‎outputs要使用哪个 Gradio.Net 组件作为输出。组件的数量应与函数的返回值数量匹配在本指南中我们将深入了解gr.Interface以及它可以自定义的各种方式。但在此之前让我们更好地了解一下 Gradio.Net 组件。Gradio.Net 组件Gradio.Net 包含超过 30 个预构建组件可用作演示中的输入或输出。这些组件对应于机器学习和数据科学中的常见数据类型例如gr.Image组件用于处理输入或输出图像gr.Label组件显示分类标签和概率gr.LinePlot组件显示折线图等等。组件属性我们使用了gr.Textbox和gr.Slider的默认版本但如果你想改变 UI 组件的外观或行为怎么办假设你想自定义滑块使其值范围从 1 到 10默认值为 2。并且你想自定义输出文本框 - 你希望它更大并且有一个标签。如果你使用gr.Textbox和gr.Slider的实际类而不是字符串快捷方式你可以通过组件属性访问更多的自定义功能。using Gradio.Net; string Greet(string name, double intensity) { return 你好 name ! new string(!, (int)intensity); } var demo gr.Interface( fn: Greet, inputs: new object[] { text, gr.Slider(value: 2, minimum: 1, maximum: 10, step: 1) }, outputs: new[] { gr.Textbox(label: 问候语, lines: 3) } ); await demo.Launch();多个输入和输出组件假设你有一个更复杂的函数具有多个输入和输出。在下面的示例中我们定义一个函数它接受一个字符串、一个布尔值和一个数字并返回一个字符串和一个数字。using Gradio.Net; (string, decimal) Greet(string name, bool isMorning, decimal temperature) { string salutation isMorning ? 早上好 : 晚上好; string greeting ${salutation} {name}。今天的温度是 {temperature} 华氏度; decimal celsius Math.Round((temperature - 32) * 5 / 9, 2); return (greeting, celsius); } var demo gr.Interface( fn: Greet, inputs: new object[] { text, checkbox, gr.Slider(minimum: 0, maximum: 100) }, outputs: new object[] { text, number } ); await demo.Launch();正如inputs列表中的每个组件按顺序对应函数的一个参数一样outputs列表中的每个组件也按顺序对应函数返回的一个值。图像示例Gradio.Net 支持多种类型的组件例如Image、DataFrame、Video或Label。让我们尝试一个图像到图像的函数来感受一下这些using Gradio.Net; using SixLabors.ImageSharp; using SixLabors.ImageSharp.PixelFormats; string Sepia(string inputImg) { // 加载图像 using var image SixLabors.ImageSharp.Image.LoadRgb24(inputImg); // 应用 sepia 滤镜 for (int y 0; y image.Height; y) { for (int x 0; x image.Width; x) { var pixel image[x, y]; // Sepia 滤镜矩阵 int tr (int)(0.393 * pixel.R 0.769 * pixel.G 0.189 * pixel.B); int tg (int)(0.349 * pixel.R 0.686 * pixel.G 0.168 * pixel.B); int tb (int)(0.272 * pixel.R 0.534 * pixel.G 0.131 * pixel.B); // 确保值在有效范围内 pixel.R (byte)Math.Min(255, tr); pixel.G (byte)Math.Min(255, tg); pixel.B (byte)Math.Min(255, tb); image[x, y] pixel; } } // 保存处理后的图像 string outputPath Path.Combine(Path.GetTempPath(), $sepia_{Guid.NewGuid()}.png); image.Save(outputPath); return outputPath; } var demo gr.Interface( fn: Sepia, inputs: gr.Image(), outputs: image ); await demo.Launch();当使用Image组件作为输入时你的函数将接收图像文件的路径。在上面的例子中我们使用 ImageSharp 库来处理图像。我们返回处理后图像的文件路径。示例输入你可以提供示例数据用户可以轻松加载到Interface中。这有助于演示模型期望的输入类型并提供一种与模型一起探索数据集的方法。要加载示例数据你可以为 Interface 构造函数的examples参数提供一个嵌套列表。外部列表中的每个子列表代表一个数据样本子列表中的每个元素代表每个输入组件的一个输入。using Gradio.Net; decimal Calculator(decimal num1, string operation, decimal num2) { if (operation 加) { return num1 num2; } else if (operation 减) { return num1 - num2; } else if (operation 乘) { return num1 * num2; } else if (operation 除) { if (num2 0) { throw new Exception(不能除以零); } return num1 / num2; } return 0; } var demo gr.Interface( fn: Calculator, inputs: new object[] { number, gr.Radio(choices: new[] { 加, 减, 乘, 除 }), number }, outputs: number, examples: new object[] { new object[] { 45, 加, 3 }, new object[] { 3.14, 除, 2 }, new object[] { 144, 乘, 2.5 }, new object[] { 0, 减, 1.2 } }, title: 简易计算器, description: 这是一个示例计算器。 ); await demo.Launch();你可以将大型数据集加载到示例中以通过 Gradio.Net 浏览数据集并与之交互。描述性内容在前面的示例中你可能注意到Interface构造函数中的title和description参数它们帮助用户理解你的应用程序。Interface构造函数中有三个参数用于指定此内容应放置在何处‎title接受文本可以显示在界面的最顶部也会成为页面标题‎description接受文本、Markdown 或 HTML并将其放置在标题下方‎article也接受文本、Markdown 或 HTML并将其放置在界面下方另一个有用的参数是label它存在于每个Component中。这会修改每个Component顶部的标签文本。你还可以在表单元素如Textbox或Radio中添加info参数以提供有关其使用的更多信息。gr.Number(label: 年龄, info: 以年为单位必须大于 0)Accordion 中的附加输入如果你的预测函数接受许多输入你可能希望将其中一些隐藏在折叠的 accordion 中以避免使 UI 混乱。Interface类接受一个additionalInputs参数它类似于inputs但此处包含的任何输入组件默认情况下都不可见。用户必须点击 accordion 才能显示这些组件。附加输入按顺序传递到预测函数中在标准输入之后。你可以使用可选的additionalInputsAccordion参数自定义 accordion 的外观该参数接受一个字符串在这种情况下它成为 accordion 的标签或一个gr.Accordion()类的实例例如这可以让你控制 accordion 默认是打开还是关闭。这里是一个例子using Gradio.Net; (string, string) GenerateFakeImage(string prompt, int seed, string initialImage null) { return ($使用种子{seed}, https://dummyimage.com/300/09f.png); } var demo gr.Interface( fn: GenerateFakeImage, inputs: new object[] { textbox }, outputs: new object[] { textbox, image }, additionalInputs: new object[] { gr.Slider(minimum: 0, maximum: 1000), image } ); await demo.Launch();总结Interface类为任何 C# 函数快速创建演示提供了一种简单而强大的方法。通过正确的组件组合和配置你可以创建适合你的机器学习模型或数据处理函数的精美 Web 界面。下一篇引入地址