无前端经验也能创造专业Web应用：Gradio.NET是什么，怎么用以及工作原理

目录

Gradio.Net 是什么

Gradio.Net 适用场景

Gradio.Net 使用方法

Gradio.Net 工作原理

结论

---

 

首先感受一下，不写任何前端代码的前提下，能够实现怎样的页面效果！

视频时长00:47

Gradio.Net 是什么

Gradio 是一个功能强大且用户友好的开源 Python 库，旨在简化为机器学习模型创建自定义用户界面的过程。凭借其直观的界面和强大的功能，Gradio允许开发人员和数据科学家轻松地为其模型构建和部署基于Web的交互式界面。

Gradio 作为一个开源的 Python 库，已经在机器学习领域证明了其强大的用户界面创建能力。

现在，这一技术的 .NET 移植版本——Gradio.NET，为.NET开发者提供了同样的强大功能，同时保留了.NET环境的舒适性和熟悉感。

这意味着即使没有传统的前端 Web 开发经验，开发者也能够利用 .NET 的优势，快速构建和部署基于Web的交互式界面，从而让用户通过浏览器以前所未有的方式与应用程序互动。

Gradio.Net 适用场景

如果你没有前端 Web 开发经验，但是又需要创建 Web 应用，Gradio.Net 可以让你全程不写任何前端代码，只需基本的 .NET 知识就可完成。

Gradio.Net 特别适合那些需要快速创建 Web 应用来展示其功能的场景，无论是给客户、合作伙伴、用户还是学生。但是 Gradio 的设计初衷是为机器学习模型提供界面，你的应用如果只是做普通的增删改查，可能需要考虑其他解决方案。

另外，如果你希望通过一个直观的界面来调试 .NET 功能，Gradio.Net 提供了一套内置的操作和工具，使得交互式调试变得简单。

Gradio.Net 使用方法

使用 Gradio.Net 的过程非常简单直接。

• 首先，创建一个 ASP.NET Core Web API 项目

• 然后，安装 NuGet 包 Gradio.Net。

• 接着，在Program.cs中加入几行代码：

App.Launch(await CreateBlocks());

async Task<Blocks> CreateBlocks()
{
    using (var blocks = gr.Blocks())
    {
        gr.Markdown("Start typing below and then click **Run** to see the output.");
        Textbox input, output;
        using (gr.Row())
        {
            input = gr.Textbox(placeholder: "What is your name?");
            output = gr.Textbox();
        }
        var btn = gr.Button("Run");
        await btn.Click(fn: async (input) => gr.Output($"Welcome to Gradio.Net, {Textbox.Payload(input.Data[0])}!"), inputs: new[] { input }, outputs: new[] { output });

        return blocks;
    }
}

一个美观且直观的界面就会呈现在你的眼前，无需编写任何额外的前端代码。

Gradio.Net 工作原理

Gradio.Net 的工作原理同样简洁明了。它由两部分组成：一个内置的静态 Web 应用，包含了丰富的前端组件；以及一个与 Web 应用协同工作的 API 服务。

当 Gradio.Net 运行时，它会提供一个完整的前后端功能网站：

用户访问你的Web应用时，浏览器会加载Gradio.Net的前端，就像加载用 Vue 等前端框架开发的网站一样。

Gradio.Net 的前端会调用后端服务，获取页面配置信息并渲染页面：

{
    "components": []//组件数组
    "layout": {}//布局
    "dependencies": []//事件数组
}

这些配置信息，都是由你编写的 C# 代码生成的：

using (var blocks = gr.Blocks())
{
    gr.Markdown("Start typing below and then click **Run** to see the output.");
    Textbox input, output;
    using (gr.Row())
    {
        input = gr.Textbox(placeholder: "What is your name?");
        output = gr.Textbox();
    }
    var btn = gr.Button("Run");
    await btn.Click(fn: async (input) => gr.Output($"Welcome to Gradio.Net, {Textbox.Payload(input.Data[0])}!"), inputs: new[] { input }, outputs: new[] { output });

    return blocks;
}

• components：页面需要展示的全部组件，通常使用gr.**快捷方法创建，例如 Blocks、Row、Textbox、Button 等

• layout: 组件间的层次关系，使用using块进行区分，例如 Blocks 包含所有其他组件，Row 包含 2 个文本框（可以让文本框在同一行展示）

• dependencies：使用组件实例的事件方法进行绑定，例如btn.Click, 方法包括 3 个主要参数：fn（事件处理代码）、inputs（传入事件处理数据的组件数组）、outputs（接受事件处理结果的组件数组）

当用户触发组件的事件时，例如点击了按钮btn.Click，前端会向后端发起 API 请求，而后端会调用fn中定义的事件处理代码，并返回数据。

值得注意的是，Gradio.Net 使用的不是传统的 HTTP 协议，而是SSE（Server-Sent Events服务器推送事件），这是一种服务端实时主动向浏览器推送消息的技术。

这种技术的优势在于它可以处理耗时较长的代码，并且能够实现类似 ChatGPT 那样逐段返回答案的效果，从而提供更好的用户体验。

结论

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

添加微信GradioDotNet，通过加入技术讨论群，开发者们可以分享经验，解决问题，并共同推动.NET的发展。

Gradio.NET和它的社区将继续成长，推动.NET生态系统的发展，帮助开发者们实现他们的创意和梦想。

如果你是.NET开发者，不妨考虑加入Gradio.NET的行列，体验这个框架带来的变革。

引入地址