首页 > 其他分享 >Gradio.NET 8 简化 Web 应用开发

Gradio.NET 8 简化 Web 应用开发

时间：2024-09-01 21:25:03浏览次数：10  
标签：Web gr Gradio new var input NET

Gradio.NET 支持 .NET 8 简化 Web 应用开发

  合集 - .NET 开源工具(7)   1..NET 开源快捷的数据库文档查询和生成工具07-312..NET 结果与错误处理利器 FluentResults08-013..NET+WPF 桌面快速启动工具 GeekDesk08-19 4.Gradio.NET 支持 .NET 8 简化 Web 应用开发08-26 5..NET 开源实时监控系统 - WatchDog08-276.实用接地气的 .NET 微服务框架08-287..NET 开源报表神器 Seal-Report08-30 收起  

前言

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聊天，有需要的朋友们可以参考学习。

最后

如果你觉得这篇文章对你有帮助，不妨点个赞支持一下！你的支持是我继续分享知识的动力。如果有任何疑问或需要进一步的帮助，欢迎随时留言。

标签：Web,gr,Gradio,new,var,input,NET
From： https://www.cnblogs.com/Leo_wl/p/18391762

相关文章

  • FIT1047 Introduction to computer systems, networks and security
    FIT1047 Introductiontocomputersystems, networksand security-S2 2024Assignment2– Processesand MARIE ProgrammingPurposeProcessesandprogramsarewhatmakescomputers do what we want them to do. Inthefirst partofthisassig......
  • webUtils
    importjavax.servlet.http.HttpServletRequest;importjavax.servlet.http.HttpServletResponse;importjava.io.IOException;publicclassWebUtils{/***将字符串渲染到客户端**@paramresponse渲染对象*@paramstring待渲染的字符串*/publicstaticvoidre......
  • Kubernetes利用Volume挂载ConfigMap与Secret
    1、概述在Kubernetes集群中，应用的配置管理是一个关键且复杂的任务。随着应用的扩展和微服务架构的普及，传统的配置文件管理方式已经难以满足动态、灵活的配置需求。幸运的是，Kubernetes提供了强大的配置管理能力，其中ConfigMap和Secret结合Volume挂载的方式是实现这一目标的重要......
  • 大厂面试官：你真的了解WebSocket么？
    希望大家能关注点赞，创作不易且没收益，您的小小举动却能给予我大大的鼓励，会激励我继续创作出高质量文章......
  • Go - Web application
    WebapplicationbasicsThefirstthingweneedisahandler.Ifyou’vepreviouslybuiltwebapplicationsusinga MVCpattern,youcanthinkofhandlersasbeingabitlikecontrollers.They’reresponsible forexecutingyourapplicationlogicandforwrit......
  • Magnet Acquire 2.71 Windows - 适用于智能手机和计算机的数字取证采集工具
    MagnetAcquire2.71Windows-适用于智能手机和计算机的数字取证采集工具DigitalForensicSoftware请访问原文链接：https://sysin.org/blog/magnet-acquire/，查看最新版。原创作品，转载请保留出处。作者主页：sysin.org免费工具MagnetAcquireMagnetAcquire可以让数字取证......
  • [python][selenium][web自动化]元素定位方式
    8种方式：1、id2、class_name3、name4、link_text5、partial_link_text6、tag_name7、css_selector8、XPath1、2、3：元素属性，通常跟7、8去组合使用比较多。4、5：是用可点击的链接的文本去定位。6：是根据元素标签去定位。7、8：最常用的方式，能结合前面6种方式组合去定位，我个人觉得理解后......
  • .net程序找不到DLL最有效方式?
    原理：当程序启动加载程序集找不到时，会触发OnAssemblyResolve事件，再递归判断dll文件是否存在，如果存在则返回加载后的Assembly。不用注册全局程序集，也不用强签名，非常有效。publicApp(){LoadEnvPaths();//对引用C++有效AppDomain.CurrentDomain.AssemblyResolve+=O......
  • 【运维系列】如何为Telnet开放安全策略
    常见的管理协议，如Telnet、SSH、FTP，具有相似的业务模型。先看Telnet。如图1-1所示，网络中可能有三种业务访问关系。【入方向（Inbound）流量】：从管理终端Telnet防火墙的接口地址，是访问防火墙的流量。【出方向（Outbound）流量】：从防火墙Telnet服务器的地址，属于从防火墙发出的流量。【穿墙......
  • 【运维系列】如何为NETCONF开放安全策略
    NETCONF（NetworkConfigurationProtocol，网络配置协议）是一种基于XML的网络管理协议，它提供了一种对网络设备进行配置和管理的可编程方法。NETCONF协议的传输层可以是BEEP、SSH、TLS或SOAP。由于RFC协议规定必须支持SSH，所以目前SSH是NETCONF使用最广泛的传输层协议，当前华为防火墙产......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99