gradio初体验

背景

近期随着很多开源大模型的出现,对于其如何落地,或者说充分地去挖掘其实际应用领域和商业价值变得格外重要。于是乎,对于不懂技术的前方市场或销售人员,如何在没有形成AI产品之前向其展示算法模型效果呢?这时候gradio框架应运而生,完美解决了问题。

gradio

gradio是一个用python实现的快速构建AI应用的框架。将前端部件、后端业务和算法推理进行了封装,简单清晰,几行代码就可以搭建一个AI算法的应用,在浏览器上检验算法效果,直观高效,消除了算法到应用之间的鸿沟。

Gradio Interface Docs

安装

gradio已经封装成了python的一个开源库,python3.8及以上版本支持,需注意。pip安装即可,或者需要改源码的,可以下载源码修改后,python setup.sh install 安装。

实践

近期,算法团队在预研多模态大模型GLIP,为了便于产线人员更直观地了解目前开源大模型的实际效果,减少沟通成本,需要搭建一个多模态大模型演示平台。

开源项目:基于语言和图像的预训练模型

GitHub - microsoft/GLIP: Grounded Language-Image Pre-training

根据开源的部署指导部署好后,领导提出了一些定制化的小需求,为了减少开发工作量,未对gradio源码进行二次开发,尽量在开源项目基础上进行改动。 

1、增加用户登录功能

gradio在interface 和blocks的launch方法中提供了一个参数auth,可以方便地增加用户登录功能。

block.launch(
        server_name='0.0.0.0',
        server_port=9090,
        share=True,
        debug=False,
        auth=user_info,
        auth_message='欢迎登录大模型演示平台!'
)
user_info = [
    ("admin", "password"),
    ("guest", "password")
]
2、增加用户反馈信息并保存

前端组件触发事件响应函数中连接数据库并保存数据即可。考虑数据关系较简单,便于搜索,这里采用非关系型数据库elasticsearch。

这里遇到一个问题,对于输入的图片点击“检测”后,创建一条记录,当算法结果出来后,用户根据结果进行评价反馈,这些反馈信息要保存到这条记录中。此时就需要获取都这条记录的id,可这个id如何保存呢? 也不能作为全局变量,因为是多用户执行。

目前实现方法是:将id作为“检测”按钮的输出变量,反馈按钮或组件的输入变量,从而达到值传递。方法比较笨拙,但也算实现了功能。后续有时间看看gradio有没有其它好的机制。

3、页面美化

设置网页标题:Blocks中的title参数设置;

隐藏页脚gradio链接文字,设置背景色:Blocks中的css参数设置;

block = gr.Blocks(
           theme='default',
           title="多模态大模型演示平台",
           css=".gradio-container, .gradio-container button {background-color: #009FCC} footer {visibility: hidden}"
        ).queue(concurrency_count=1)
4、多线程引起的问题

gradio可以通过队列来对用户的请求进行响应,可以通过concurrency_count设置同时响应的请求数量,也就是线程数。当设置成多线程后,当多个用户并发请求,出现了检测结果和输入的检测项不对应的情况,将concurrency_count设置成1,也就是单线程后问题得到解决。当然响应速度会变慢,但可以接受。

后记

gradio Image组件中自带图片编辑功能,裁剪ROI功能可用,但非常不方便。后续有时可以对gradio框架源码研究下,进行二次开发。

要修改Gradio框架自带的登录页面,您需要自己编写一个HTML模板和CSS样式表,然后将它们应用于登录页面。Gradio框架使用Jinja2模板引擎来创建HTML页面,因此您需要了解Jinja2模板语言的基本语法。 下面是一个示例代码,展示了如何使用自定义HTML模板和CSS样式表来修改Gradio框架自带的登录页面: ```python import gradio as gr from jinja2 import Template # 定义自定义HTML模板 login_template = Template(""" <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>{{ title }}</title> <style> {{ css }} </style> </head> <body> <div class="login-container"> <h1>{{ title }}</h1> <form method="POST" action="{{ url_for('login') }}"> <label for="username">Username:</label> <input type="text" name="username" id="username"> <label for="password">Password:</label> <input type="password" name="password" id="password"> <button type="submit">Login</button> </form> </div> </body> </html> """) # 定义自定义CSS样式表 login_css = """ body { background-color: #f2f2f2; font-family: Arial, sans-serif; } .login-container { max-width: 400px; margin: 0 auto; padding: 20px; border: 1px solid #ccc; background-color: #fff; } h1 { text-align: center; } form label { display: block; margin-bottom: 10px; } form input { width: 100%; padding: 10px; margin-bottom: 20px; border: 1px solid #ccc; border-radius: 4px; } form button { display: block; width: 100%; padding: 10px; background-color: #4CAF50; color: #fff; border: none; border-radius: 4px; cursor: pointer; } """ # 定义自定义登录函数 def authenticate(username, password): # 在这里编写您的身份验证代码 if username == "admin" and password == "password": return True else: return False # 创建包含自定义HTML和CSS的auth字典 auth = {"username": "admin", "password": "password", "template": login_template, "css": login_css} iface = gr.Interface(fn=my_function, inputs="text", outputs="text", auth=auth) iface.launch() ``` 在上面的代码中,我们定义了一个名为`login_template`的自定义HTML模板和一个名为`login_css`的自定义CSS样式表。然后,我们创建了一个包含自定义HTML和CSS的`auth`字典,并将其传递给Gradio的`Interface`构造函数。在这个字典中,我们将`template`属性设置为我们定义的自定义HTML模板,将`css`属性设置为我们定义的自定义CSS样式表。 当用户访问应用程序时,Gradio会使用我们定义的HTML模板和CSS样式表来显示登录页面。在这个示例中,我们定义的HTML模板和CSS样式表创建了一个简单的登录页面,其中包括一个用户名和密码输入框和一个登录按钮。您可以根据自己的需要修改这个模板和样式表,以创建适合您应用程序的登录页面。
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值