做众筹网站有哪些做网站推广前途

Gradio.NET 是 Gradio 的 .NET 移植版，允许你用 C#/.NET 快速为机器学习模型、API 或任意函数生成交互式 Web 应用，无需前端经验。下面是简明的中文介绍和常用用法整理，适合初学者和开发者快速上手。

---

1. 快速开始

步骤

1. 创建 ASP.NET Core Web API 项目

2. 安装 NuGet 包

   dotnet add package Gradio.Net.AspNetCore
   

3. 在 Program.cs 中添加如下代码：

   App.Launch(await CreateBlocks(), config => {// 可自定义字体等config.Stylesheets = new string[] {"https://fonts.font.im/css2?family=Source+Sans+Pro:wght@400;600&display=swap","https://fonts.font.im/css2?family=IBM+Plex+Mono:wght@400;600&display=swap"};
   });async Task<Blocks> CreateBlocks()
   {using (var blocks = gr.Blocks()){gr.Markdown("请输入内容后点击 **Run** 查看输出。");Textbox input, output;using (gr.Row()){input = gr.Textbox(placeholder: "你的名字？");output = gr.Textbox();}var btn = gr.Button("Run");await btn.Click(fn: async (input) => gr.Output($"欢迎来到 Gradio.Net, {input.Data[0]}!"), inputs: new[] { input }, outputs: new[] { output });return blocks;}
   }
   

---

2. 集成到现有 ASP.NET Core 项目

var builder = WebApplication.CreateBuilder(args);
builder.Services.AddGradio();var app = builder.Build();app.UseGradio(await CreateBlocks());app.Run();

---

3. 常用组件与布局

布局示例

using (gr.Row())
{using (gr.Column(scale: 1)){var text1 = gr.Textbox();var text2 = gr.Textbox();}using (gr.Column(scale: 4)){var btn1 = gr.Button("按钮1");var btn2 = gr.Button("按钮2");}
}

Tab、Group、Accordion

using (gr.Tab("Lion"))
{gr.Textbox("lion");gr.Button("新建Lion");
}
using (gr.Group())
{gr.Textbox(label: "姓");gr.Textbox(label: "名");
}
using (gr.Accordion("查看更多"))
{gr.Markdown("详细内容...");
}

---

4. 表单与事件

组件属性获取与事件绑定

Textbox text1 = gr.Textbox();
Dropdown dropdown1 = gr.Dropdown(choices: ["选项1", "选项2"]);
Checkbox checkbox1 = gr.Checkbox();
Button btn = gr.Button("提交");await btn.Click(fn: async (input) => gr.Output($"文本框: {Textbox.Payload(input.Data[0])}\n下拉: {Dropdown.Payload(input.Data[1])}"
), inputs: [text1, dropdown1], outputs: [text_Result]);

组件属性联动

var category_dropdown = gr.Dropdown(choices: categories, label: "类别");
var symbol_dropdown = gr.Dropdown(label: "代码", choices: []);category_dropdown.Change(update_symbols, inputs: [category_dropdown], outputs: [symbol_dropdown]);

---

5. 多媒体组件

图片

Gradio.Net.Image input, outputFilePath, outputUrl;
input = gr.Image();
outputFilePath = gr.Image();
outputUrl = gr.Image();Button btnImage = gr.Button("提交");
await btnImage.Click(fn: async (input) => gr.Output(DrawWaterMarkOnImage(Gradio.Net.Image.Payload(input.Data[0])), "https://xxx.com/xxx.png"), inputs: [input], outputs: [outputFilePath, outputUrl]);

视频、音频

支持上传、播放、暂停、录音等事件，详见文档和上方示例。

---

6. 进度条

var load = gr.Button("加载");
var label = gr.Label(label: "加载器");
load.Click(LoadSet, outputs: new[] { label });static async Task<Output> LoadSet(Input input)
{const int count = 24;input.Progress = gr.Progress(count);for (int i = 0; i < count; i++){input.Progress.Report(i, desc: "加载中...");await Task.Delay(100);}return gr.Output("已加载");
}

---

7. 主题美化

使用内置主题

App.Launch(await CreateBlocks(), config =>
{config.Theme = Themes.Citrus;
});

自定义主题变量

App.Launch(await CreateBlocks(), config =>
{config.Theme = Themes.Default.Set(overrideStyles: new Dictionary<string, string> {{ nameof(Theme.ButtonSecondaryBackgroundFill), "#FF0000" }});
});

加载外部主题文件

App.Launch(await CreateBlocks(), config =>
{config.Theme = Theme.Load("miku_theme.json");
});

---

8. 参考资料

• NuGet: Gradio.Net.AspNetCore

• GitHub: Gradio.NET

• Gradio 官方文档（Python）

---

常见问题

• Q: 支持哪些 .NET 版本？
  A: 推荐 .NET 6 及以上。

• Q: 支持热重载吗？
  A: 支持，推荐开发时使用。

• Q: 可以和 ML.NET、ONNX 等模型结合吗？
  A: 可以，直接在 Click 事件中调用模型推理代码即可。

---

如需更详细的组件用法、事件绑定、样式自定义等，请参考 Gradio.NET GitHub 文档 或在此提问！

更多AIGC文章