Gradio.NET 支持 .NET 8 简化 Web 应用开发
前言
Gradio.NET 是 Gradio 在 .NET 平台上的移植版本。Gradio 是一个开源的 Python 包,用于快速构建机器学习模型、API 或任意 Python 函数的演示或 Web 应用程序。
Gradio.NET 继承了 Gradio 的核心理念,以.NET 开发习惯和熟悉的方式进行Web应用开发,其主要特点包括:
易用性:只需几行 .NET 代码即可创建功能完善的用户界面。
灵活性:支持多种类型的输入和输出,包括文本、图像、音频等。
一键分享:轻松生成访问链接,方便进行测试和使用。
集成支持:能够无缝集成到主流的 .NET 框架和库中,如 ASP.NET Core 和 Entity Framework,加速开发和部署流程。
总而言之,Gradio.NET 是一个强大的工具,极大地简化了创建和分享界面的过程,使我们能够专注于业务逻辑而无需担心复杂的前端开发工作。
Gradio.NET
Gradio.NET 是一个基于 Gradio 的 .NET 实现,我们无需掌握任何前端技术(如 JavaScript、CSS 或 HTML),仅用几行 .NET 代码就能快速构建机器学习模型、API 或任意函数的演示或 Web 应用程序。
通过 Gradio.NET,可以轻松创建美观的交互式 Web 界面,无需前端开发经验。
Gradio.NET 使用
1、创建项目
创建一个新的 .NET 8 WebAPI 标准项目,选择启用 OpenAPI 支持和使用控制器;
dotnet new webapi -n ManageCore.Api
cd ManageCore.Api
2、安装 Gradio.Net
安装 NuGet 包 Gradio.Net.AspNetCore
这个包。
3、示例代码
在 Program.cs 中输入以下示例代码:
App.Launch(await CreateBlocks());
async Task<Blocks> CreateBlocks()
{
using (var blocks = gr.Blocks())
{
gr.Markdown("开始在下面键入,然后点击**运行** 查看输出结果.");
Textbox input, output;
using (gr.Row())
{
input = gr.Textbox(placeholder: "你叫什么名字?");
output = gr.Textbox();
}
var btn = gr.Button("运行");
await btn.Click(fn: async (input) => gr.Output($"欢迎使用 Gradio.Net, {input.Data[0]}!"), inputs: new[] { input }, outputs: new[] { output });
return blocks;
}
}
运行结果如下图所示:
如果想在现有项目中使用 Gradio.NET
可以使用AddGradio
和 UseGradio
扩展方法:
var builder = WebApplication.CreateBuilder(args);
builder.Services.AddGradio();
var app = builder.Build();
app.UseGradio(await CreateBlocks());
app.Run();
Gradio.NET 示例
1、Layout
Gradio.NET 常用的布局方式都包括:Row/Column、Tab、Group、Accordion等。
示例代码
App.Launch(await CreateBlocks());
async Task<Blocks> CreateBlocks()
{
using (var blocks = gr.Blocks())
{
gr.Markdown("# Layout Demo");
gr.Markdown("## Row/Column");
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("Button 1");
var btn2 = gr.Button("Button 2");
}
}
gr.Markdown("## Tab");
using (gr.Tab("Lion"))
{
gr.Textbox("lion");
gr.Button("New Lion");
}
using (gr.Tab("Tiger"))
{
gr.Textbox("tiger");
gr.Button("New Tiger");
}
gr.Markdown("## Group");
using (gr.Group())
{
gr.Textbox(label: "First");
gr.Textbox(label: "Last");
}
gr.Markdown("## Accordion");
using (gr.Accordion("See Details"))
{
gr.Markdown("lorem ipsum");
}
return blocks;
}
}
示例效果
2、Form
表单示例代码,具体如下:
App.Launch(await CreateBlocks());
async Task<Blocks> CreateBlocks()
{
using (var blocks = gr.Blocks())
{
using (gr.Column())
{
var text1 = gr.Textbox();
var dropdown1 = gr.Dropdown(choices: new[] { "First Choice", "Second Choice", "Third Choice" });
var checkbox1 = gr.Checkbox();
var checkboxGroup1 = gr.CheckboxGroup(choices: new[] { "First Choice", "Second Choice", "Third Choice" });
var multimodalTextbox1 = gr.MultimodalTextbox(interactive:true);
var number1 = gr.Number();
var radio1 = gr.Radio(choices: ["First Choice", "Second Choice", "Third Choice"]);
var slider1 = gr.Slider();
var text_Result = gr.Textbox(label:"Form Value", interactive:false);
var btn = gr.Button("Run");
await btn.Click(fn: async (input) => gr.Output($@"
Textbox: {Textbox.Payload(input.Data[0])}
Dropdown: {string.Join(", ",Dropdown.Payload(input.Data[1]))}
Checkbox: {Checkbox.Payload(input.Data[2])}
CheckboxGroup: {string.Join(", ", CheckboxGroup.Payload(input.Data[3]))}
MultimodalTextbox: {MultimodalTextbox.Payload(input.Data[4]).Files.FirstOrDefault()?.OrigName}
Number: {Number.Payload(input.Data[5])}
Radio: {string.Join(", ", Radio.Payload(input.Data[6]))}
Slider: {Slider.Payload(input.Data[7])}
"), inputs: new Component[] { text1, dropdown1, checkbox1, checkboxGroup1, multimodalTextbox1, number1, radio1, slider1 }, outputs: new[] { text_Result });
}
return blocks;
}
}
示例效果
3、Media
多媒体控件,具体参考代码
App.Launch(await CreateBlocks());
async Task<Blocks> CreateBlocks()
{
using (var blocks = gr.Blocks())
{
gr.Markdown("**Image Demo** upload a image and click button");
Gradio.Net.Image input, output;
using (gr.Row())
{
input = gr.Image(); output = gr.Image();
}
var btn = gr.Button("Submit");
await btn.Click(fn: async (input) => gr.Output(DrawWaterMarkOnImage(Gradio.Net.Image.Payload(input.Data[0]))), inputs: new[] { input }, outputs: new[] { output });
return blocks;
}
}
static string DrawWaterMarkOnImage(string inputImageFilePath)
{
using (var img = SixLabors.ImageSharp.Image.Load(inputImageFilePath))
{
var outputFilePath = Path.Combine(Path.GetTempPath(), Guid.NewGuid().ToString() + ".png");
Font font = SystemFonts.CreateFont("Arial", 10); // for scaling water mark size is largely ignored.
using (var img2 = img.Clone(ctx => ApplyScalingWaterMarkSimple(ctx, font, "Gradio.Net", Color.HotPink, 5)))
{
img2.Save(outputFilePath);
}
return outputFilePath;
}
}
static IImageProcessingContext ApplyScalingWaterMarkSimple(IImageProcessingContext processingContext,
Font font,
string text,
Color color,
float padding)
{
Size imgSize = processingContext.GetCurrentSize();
float targetWidth = imgSize.Width - (padding * 2);
float targetHeight = imgSize.Height - (padding * 2);
// Measure the text size
FontRectangle size = TextMeasurer.MeasureSize(text, new TextOptions(font));
// Find out how much we need to scale the text to fill the space (up or down)
float scalingFactor = Math.Min(targetWidth / size.Width, targetHeight / size.Height);
// Create a new font
Font scaledFont = new Font(font, scalingFactor * font.Size);
var center = new PointF(imgSize.Width / 2, imgSize.Height / 2);
var textOptions = new RichTextOptions(scaledFont)
{
Origin = center,
HorizontalAlignment = HorizontalAlignment.Center,
VerticalAlignment = VerticalAlignment.Center
};
return processingContext.DrawText(textOptions, text, color);
}
示例效果
4、Chatbot
示例代码
App.Launch(await CreateBlocks());
async Task<Blocks> CreateBlocks()
{
using (var blocks = gr.Blocks())
{
gr.Markdown("# Chatbot Demo");
var chatbot = gr.Chatbot();
var msg = gr.Textbox(placeholder:"Enter to Submit");
await msg.Submit(streamingFn: (input) => Respond(Textbox.Payload(input.Data[0]), Chatbot.Payload(input.Data[1])),
inputs: new Component[] { msg, chatbot }, outputs: new Component[] { msg, chatbot }); return blocks;
}
}
static async IAsyncEnumerable<Output> Respond(string message, IList<ChatbotMessagePair> chatHistory)
{
chatHistory.Add(new ChatbotMessagePair(message, "You typed: "));
for (int i = 0; i < message.Length; i++)
{
await Task.Delay(500);
chatHistory.Last().AiMessage.TextMessage += message[i];
yield return gr.Output("", chatHistory);
}
}
示例效果
5、Progress
根据自己的需求,调整进度条代码,参考代码如下:
App.Launch(await CreateBlocks());
async Task<Blocks> CreateBlocks()
{
using (var blocks = gr.Blocks())
{
gr.Markdown("# Progress Demo");
var load = gr.Button("Load");
var label = gr.Label(label: "Loader");
load.Click(LoadSet, outputs: new[] { label });
return blocks;
}
}
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: "Loading...");
await Task.Delay(100);
}
return gr.Output("Loaded");
}
示例效果
还有更多示例代码,可以查看官方文档进行学习。
Gradio.NET 应用
对于 AI 的爱好者来说,Gradio.NET 提供了一个绝佳的机会,通过访问 https://qwen.starworks.cc:88/,让他们能够与通义千问开源模型进行互动。
使用 Gradio.NET 打造你的 通义千问 AI 聊天机器人,具体如下图所示:
这个 Web 应用不仅用户体验流畅,还能够记住会话历史,轻松识别语义,这一切都得益于其背后的先进技术。
该项目已开源,源代码地址:https://github.com/sdcb/Sdcb.DashScope
具体代码讲解,可以查看源码。
项目地址
Github:https://github.com/feiyun0112/Gradio.Net
Demo:https://github.com/feiyun0112/Gradio.Net/blob/main/readme_files
AI聊天:https://github.com/sdcb/Sdcb.DashScope
总结
Gradio.NET 致力于成为 .NET 开发者 构建Web 应用的首选框架。它的设计理念是简化开发过程,让每个人都能轻松参与到 Web 应用的开发中来。
如果你对创建聊天机器人感兴趣,可以试试上面这个开源项目,结合 Gradio.NET 开发自己的AI聊天,有需要的朋友们可以参考学习。
最后
如果你觉得这篇文章对你有帮助,不妨点个赞支持一下!你的支持是我继续分享知识的动力。如果有任何疑问或需要进一步的帮助,欢迎随时留言。
也可以加入微信公众号[DotNet技术匠] 社区,与其他热爱技术的同行一起交流心得,共同成长!
Gradio.NET 支持 .NET 8 简化 Web 应用开发的更多相关文章
- 【ASP.NET Web API教程】2.1 创建支持CRUD操作的Web API
原文 [ASP.NET Web API教程]2.1 创建支持CRUD操作的Web API 2.1 Creating a Web API that Supports CRUD Operations2.1 ...
- Spring Boot Web应用开发 CORS 跨域请求支持:
Spring Boot Web应用开发 CORS 跨域请求支持: 一.Web开发经常会遇到跨域问题,解决方案有:jsonp,iframe,CORS等等CORS与JSONP相比 1. JSONP只能实现 ...
- 【转】Yeoman:Web 应用开发流程与工具
原文转自:http://blog.jobbole.com/62098/ 随着 Web 2.0 和 HTML 5 的流行,现在的 Web 应用所能提供的功能和交互能力比之前传统的 Web 应用要强大很多 ...
- 基于Spring框架的Web应用开发笔记 - Outline
Motivation 最近的工作涉及Web框架搭建,在了解公司原有采用框架基础上对Web开发技术栈做了一次升级,在次做记录. Audience J2EE Web Application Develop ...
- 20个可以帮你简化iOS app开发流程的工具
这里推荐20个可以帮你简化iOS app开发流程的工具.很多开发者都使用过这些工具,涉及原型和设计.编程.测试以及最后的营销,基本上涵盖了整个开发过程. 原型和设计 有了一个很好的创意后,你要做的不是 ...
- Java Web应用开发中的一些概念
最近在学习Java Web,发现Java Web的概念很多,而且各个概念之间的关系也挺复杂,本篇博客把这些关系总结于此,主要参考的博客附在文章末尾. 概念 服务器 服务器,硬件角度上说就是一台高性能的 ...
- Web图形开发
Web项目开发过程中要找到完美的图形解决方案比较困难,只能根据自己的需要,选择自己最合适的画图方案. Web图表一般有以下几种做法: (1)使用客户端控件技术 (2)使用服务器端生成图片 (3)使用富 ...
- Web前端开发推荐阅读书籍、学习课程下载
转自http://www.xuanfengge.com/fe-books.html 前言 学校里没有前端的课程,那如何学习JavaScript,又如何使自己成为一个合格的前端工程师呢? 除了在项目中学 ...
- Web前端开发最佳实践(3):前端代码和资源的压缩与合并
一般在网站发布时,会压缩前端HTML.CSS.JavaScript代码及用到的资源文件(主要是图片文件),目的是加快文件在网络中的传输,让网页更快的展现.当然,CDN分发.缓存等方式也是加快代码或资源 ...
- iOS Web应用开发:运用HTML5、CSS3与JavaScript
<iOS Web应用开发:运用HTML5.CSS3与JavaScript> 基本信息 原书名:Pro iOS web design and development:HTML5, CSS3, ...
随机推荐
- opengauss Need repair修复
问题描述:opengauss集群在做切换的时候,或者增删节点的时候,很容易发生节点repair,找不到主库的情况,这种情况需要把主库使用primary角色启动,然后build重建从库,就可以恢复集群 ...
- Linux基本编程环境安装
前言 可以采用组合式安装,如:https://oneinstack.com/ 选择好要安装的,然后复制安装命令就可以一键搞定很多东西了 VMware安装Centos7 按照物理机CPU实际情况,选择处 ...
- fpga是什么
FPGA(Field Programmable Gate Array) 现场可编程门阵列
- vulnhub - hackme1
vulnhub - hackme1 信息收集 端口扫描 详细扫描 目录扫描跟漏洞探测没发现什么可用信息,除了登录还有一个uploads目录应该是进入后台之后才能使用 web主页是个登录注册页面,爆了一 ...
- Mac部署Tomcat8.5
官网下载 点我直达 启动 将Tomcat包解压后并放到这个目录下:/Users/chenyanbin/plus/tomcat8.5/bin 切换目录: cd /Users/chenyanbin/plu ...
- yb课堂实战之订单和播放记录事务控制 《十六》
开启事务控制 启动类:@EnableTransactionManagement 业务类,或者业务方法@Transactional 默认事务的隔离级别和传播属性 启动类上加注解 Service层加注解
- P1681
和上一道题差不多,要注意一些细节 #include<iostream> #include<utility> using namespace std; typedef long ...
- 基于Java:流浪动物领养信息系统设计实现(源码+lw+部署文档+讲解等)
\n文末获取源码联系 感兴趣的可以先收藏起来,大家在毕设选题,项目以及论文编写等相关问题都可以给我加好友咨询 系统介绍: 现代经济快节奏发展以及不断完善升级的信息化技术,让传统数据信息的管理升级为软件 ...
- 入门到精通rsync和inotify
rsync 作用: 实现文件的备份 备份位置可以是当前主机,也可以是远程主机 备份过程可以是完全备份,也可以是增量备份 功能: 1)类似于cp的复制功能 将本地主机的一个文件复制到另一个位置下 2)将 ...
- 把python中的列表转化为字符串
怎么把python中的列表转换为字符串: 1,列表中非字符串的元素的转换 方法一: 使用列表推导式进行转换 1 list=['hello',6,9,'beizhi'] 2 list=[str(i) f ...