Gradio入门到进阶全网最详细教程[一]:快速搭建AI算法可视化部署演示(侧重项目搭建和案例分享)

丰富的线上&线下活动,深入探索云世界

做任务,得社区积分和周边

最真实的开发者用云体验

让每位学生受益于普惠算力

让创作激发创新

资深技术专家手把手带教

遇见技术追梦人

技术交流,直击现场

海量开发者使用工具、手册,免费下载

极速、全面、稳定、安全的开源镜像

开发手册、白皮书、案例集等实战精华

为开发者定制的Chrome浏览器插件

常用的两款AI可视化交互应用比较:

方便调试:gradio可以在jupyter中直接展示页面,更加方便调试。

Python第三方库Gradio快速上手,当前版本V3.27.0

在本地开发时,如果你想将代码作为Python脚本运行,你可以使用GradioCLI在重载模式下启动应用程序,这将提供无缝和快速的开发。

gradioapp.pyNote:你也可以做pythonapp.py,但它不会提供自动重新加载机制。

Gradio可以包装几乎任何Python函数为易于使用的用户界面。从上面例子我们看到,简单的基于文本的函数。但这个函数还可以处理很多类型。Interface类通过以下三个参数进行初始化:

通过这三个参数,我们可以快速创建一个接口并发布他们。

importgradioasgrdefgreet(name):return"Hello"+name+"!"iface=gr.Interface(fn=greet,inputs=gr.inputs.Textbox(lines=2,placeholder="NameHere..."),outputs="text",)if__name__=="__main__":app,local_url,share_url=iface.launch()1.2.2多个输入和输出对于复杂程序,输入列表中的每个组件按顺序对应于函数的一个参数。输出列表中的每个组件按顺序排列对应于函数返回的一个值。

inputs列表里的每个字段按顺序对应函数的每个参数,outputs同理。

Gradio支持许多类型的组件,如image、dataframe、video。使用示例如下:

当使用Image组件作为输入时,函数将收到一个维度为(w,h,3)的numpy数组,按照RGB的通道顺序排列。要注意的是,我们的输入图像组件带有一个编辑按钮,可以对图像进行裁剪和放大。以这种方式处理图像可以帮助揭示机器学习模型中的偏差或隐藏的缺陷。此外对于输入组件有个shape参数,指的设置输入图像大小。但是处理方式是保持长宽比的情况下,将图像最短边缩放为指定长度,然后按照中心裁剪方式裁剪最长边到指定长度。当图像不大的情况,一种更好的方式是不设置shape,这样直接传入原图。输入组件Image也可以设置输入类型type,比如type=filepath设置传入处理图像的路径。具体可以查看官方文档,文档写的很清楚。

在Interface添加live=True参数,只要输入发生变化,结果马上发生改变。

全局变量的好处就是在调用函数后仍然能够保存,例如在机器学习中通过全局变量从外部加载一个大型模型,并在函数内部使用它,以便每次函数调用都不需要重新加载模型。下面就展示了全局变量使用的好处。

Gradio支持的另一种数据持久性是会话状态,数据在一个页面会话中的多次提交中持久存在。然而,数据不会在你模型的不同用户之间共享。会话状态的典型例子就是聊天机器人,你想访问用户之前提交的信息,但你不能将聊天记录存储在一个全局变量中,因为那样的话,聊天记录会在不同的用户之间乱成一团。注意该状态会在每个页面内的提交中持续存在,但如果您在另一个标签页中加载该演示(或刷新页面),该演示将不会共享聊天历史。

要在会话状态下存储数据,你需要做三件事。

在Interface中设置live=True,则输出会跟随输入实时变化。这个时候界面不会有submit按钮,因为不需要手动提交输入。

同1.2.4

在许多情形下,我们的输入是实时视频流或者音频流,那么意味这数据不停地发送到后端,这是可以采用streaming模式处理数据。

Blocks方式需要with语句添加组件,如果不设置布局方式,那么组件将按照创建的顺序垂直出现在应用程序中,运行界面

相信有小伙伴已经注意到,输出框下有个Flag按钮。当测试您的模型的用户看到某个输入导致输出错误或意外的模型行为,他们可以标记这个输入让开发者知道。这个文件夹由Interface的flagging_dir参数指定,默认为’flagged’。将这些会导致错误的输入保存到一个csv文件。如果Interface包含文件数据,文件夹也会创建来保存这些标记数据。

打开log.csv展示如下:

在Gradio官方文档,搜索不同的组件加.style(如image.style),可以获取该组件的样式参数设置样例。例如image组件的设置如下:

demo=gr.Interface(...).queue()demo.launch()#或withgr.Blocks()asdemo:#...demo.queue()demo.launch()在某些情况下,你可能想显示一连串的输出,而不是单一的输出。例如,你可能有一个图像生成模型,如果你想显示在每个步骤中生成的图像,从而得到最终的图像。在这种情况下,你可以向Gradio提供一个生成器函数,而不是一个常规函数。下面是一个生成器的例子,每隔1秒返回1张图片。

importgradioasgrimportnumpyasnpimporttime#生成steps张图片,每隔1秒钟返回deffake_diffusion(steps):for_inrange(steps):time.sleep(1)image=np.random.randint(255,size=(300,600,3))yieldimagedemo=gr.Interface(fake_diffusion,#设置滑窗,最小值为1,最大值为10,初始值为3,每次改动增减1位inputs=gr.Slider(1,10,value=3,step=1),outputs="image")#生成器必须要queue函数demo.queue()demo.launch()2.4Blocks进阶使用2.4.1Blocks事件可交互设置任何输入的组件内容都是可编辑的,而输出组件默认是不能编辑的。如果想要使得输出组件内容可编辑,设置interactive=True即可。

importgradioasgrdefgreet(name):return"Hello"+name+"!"withgr.Blocks()asdemo:name=gr.Textbox(label="Name")#不可交互#output=gr.Textbox(label="OutputBox")#可交互output=gr.Textbox(label="Output",interactive=True)greet_btn=gr.Button("Greet")greet_btn.click(fn=greet,inputs=name,outputs=output)demo.launch()事件设置我们可以为不同的组件设置不同事件,如为输入组件添加change事件。可以进一步查看官方文档,看看组件还有哪些事件。

importgradioasgrdefwelcome(name):returnf"WelcometoGradio,{name}!"withgr.Blocks()asdemo:gr.Markdown("""#HelloWorld!Starttypingbelowtoseetheoutput.""")inp=gr.Textbox(placeholder="Whatisyourname")out=gr.Textbox()#设置change事件inp.change(fn=welcome,inputs=inp,outputs=out)demo.launch()多个数据流如果想处理多个数据流,只要设置相应的输入输出组件即可。

事件监听器函数的返回值通常是相应的输出组件的更新值。有时我们也想更新组件的配置,比如说可见性。在这种情况下,我们可以通过返回update函数更新组件的配置。

Blocks应用的是html中的flexbox模型布局,默认情况下组件垂直排列。

使用Row函数会将组件按照水平排列,但是在Row函数块里面的组件都会保持同等高度。

importgradioasgrwithgr.Blocks()asdemo:withgr.Row():img1=gr.Image()text1=gr.Text()btn1=gr.Button("button")demo.launch()组件垂直排列与嵌套组件通常是垂直排列,我们可以通过Row函数和Column函数生成不同复杂的布局。

importgradioasgrwithgr.Blocks()asdemo:withgr.Row():text1=gr.Textbox(label="t1")slider2=gr.Textbox(label="s2")drop3=gr.Dropdown(["a","b","c"],label="d3")withgr.Row():#scale与相邻列相比的相对宽度。例如,如果列A的比例为2,列B的比例为1,则A的宽度将是B的两倍。#min_width设置最小宽度,防止列太窄withgr.Column(scale=2,min_width=600):text1=gr.Textbox(label="prompt1")text2=gr.Textbox(label="prompt2")inbtw=gr.Button("Between")text4=gr.Textbox(label="prompt1")text5=gr.Textbox(label="prompt2")withgr.Column(scale=1,min_width=600):img1=gr.Image("test.jpg")btn=gr.Button("Go")demo.launch()组件可视化:输出可视化从无到有如下所示,我们可以通过visible和update函数构建更为复杂的应用。

在某些情况下,您可能希望在实际在UI中呈现组件之前定义组件。例如,您可能希望在相应的gr.Textbox输入上方显示使用gr.examples的示例部分。由于gr.Examples需要输入组件对象作为参数,因此您需要先定义输入组件,然后在定义gr.Exmples对象后再进行渲染。解决方法是在gr.Blocks()范围外定义gr.Textbox,并在UI中希望放置的任何位置使用组件的.render()方法。

要获得额外的样式功能,您可以设置行内css属性将任何样式给应用程序。如下所示。

您可以向任何组件添加HTML元素。通过elem_id选择对应的css元素。

如果运行环境能够连接互联网,在launch函数中设置share参数为True,那么运行程序后。Gradio的服务器会提供XXXXX.gradio.app地址。通过其他设备,比如手机或者笔记本电脑,都可以访问该应用。这种方式下该链接只是本地服务器的代理,不会存储通过本地应用程序发送的任何数据。这个链接在有效期内是免费的,好处就是不需要自己搭建服务器,坏处就是太慢了,毕竟数据经过别人的服务器。

demo.launch(share=True)3.2huggingface托管为了便于向合作伙伴永久展示我们的模型App,可以将gradio的模型部署到HuggingFace的Space托管空间中,完全免费的哦。

方法如下:

3,创建好的项目有一个Readme文档,可以根据说明操作,也可以手工编辑app.py和requirements.txt文件。

#show_error为True表示在控制台显示错误信息。demo.launch(server_name='0.0.0.0',server_port=8080,show_error=True)这里host地址可以自行在电脑查询,C:\Windows\System32\drivers\etc\hosts修改一下即可127.0.0.1再制定端口号

在首次打开网页前,可以设置账户密码。比如auth参数为(账户,密码)的元组数据。这种模式下不能够使用queue函数。

demo.launch(auth=("admin","pass1234"))如果想设置更为复杂的账户密码和密码提示,可以通过函数设置校验规则。

例如:数据分析展示dashboard,数据标注工具,制作一个小游戏界面等等。

本范例我们将应用gradio来构建一个图片筛选器,从百度爬取的一堆猫咪表情包中刷选一些我们喜欢的出来。

THE END
1.2024年中国互联网价值榜揭晓:美图产品包揽影像赛道冠军垂直赛道互联网价值榜揭晓,垂直赛道头部效应越来越明显。 以即时通讯为例,腾讯微信位列第一。以影像与设计为例,美图秀秀连续9年夺得中国图片美化赛道用户规模第一名,美颜相机连续9年夺得中国拍照摄影赛道用户规模第一名。 自QuestMobile于2016年发布系列榜单以来,美图公司旗下产品始终是中国图片美化赛道、中国拍照摄影赛道的冠军https://m.163.com/dy/article/JJMNNEF5053469RG.html
2.分享图片#精准扶贫典型案例#互联网+教育来自上海合作交流发布分享图片#精准扶贫典型案例#“互联网+”教育帮扶开启新模式 ?收藏 转发 评论 ?2 评论 o p 同时转发到我的微博 按热度 按时间 正在加载,请稍候上海市人民政府合作交流办公室官方微博 查看更多 a 6关注 45931粉丝 2559微博 微关系 他的关注(6) 乐游上海 微博数据助手https://weibo.com/2662694093/GbSHp0X3W
3.快速搭建AI算法可视化部署演示(侧重项目搭建和案例分享GradioGradio的优势在于易用性,代码结构相比Streamlit简单,只需简单定义输入和输出接口即可快速构建简单的交互页面,更轻松部署模型。适合场景相对简单,想要快速部署应用的开发者。便于分享:gradio可以在启动应用时设置share=True参数创建外部分享链接,可以直接在微信中分享给用户使用。 https://cloud.tencent.com/developer/article/2277060
4.隐私条款我们收集您的信息主要是为了您和其他用户能够更容易和更满意地使用菠萝包服务。菠萝包的目标是向所有的互联网用户提供安全、刺激、有趣及有教益的上网经历。而这些信息有助于我们实现这一目标。 请注意,如您在菠萝包服务中其他用户可见的公开区域内上传或发布的信息中、您对其他人上传或发布的信息作出的回应中公开您https://pages.sfacg.com/h5/app/about/novel/Privacy.html
5.直接启动零配置实现微信分享公网分享内网穿透,包含项目搭建和案部署到Web Gradio库支持将您的交互式应用程序部署到Web上,以便用户可以通过互联网访问它们。您可以使用Gradio库提供的API密钥将您的应用程序部署到Gradio官方网站上,也可以将它们部署到自己的Web服务器上。 Gradio(现在称为gr.Interface)是一个开源的Python库,它允许开发者快速创建可与机器学习模型交互的Web应用程序。Grhttps://blog.csdn.net/u014374009/article/details/136480308
6.各美其美,美美与共!学校网络教育优秀作品与大家见面啦!01微视频已关注关注重播分享赞关闭观看更多更多退出全屏视频加载失败,请刷新页面再试刷新视频详情我秀沈绣作者李燕 马力指导老师李燕作品简介沈绣是南通非遗园圃中的一支奇葩,她以其独特的工艺,绚丽的色彩,历经百年,在中国各类绣品中独占鳌头。本视频作者https://mp.weixin.qq.com/s?__biz=MzA4MTg4MzQxMg==&mid=2651070152&idx=1&sn=b12150460b7b8d988c9110dc1e7f7285&chksm=852c606d75c4038213c618f96dd3154f68144948c29baa9d05f710d443b3e0352fe9ad39b80d&scene=27
7.知乎推特脸书和youtube视频分享网站:如B站、YouTube等视频分享网站,允许用户在上传视频时添加描述和注释,其中包含外部链接,引导观众访问其他相关网站或资源。 这些外链平台的作用不仅在于提供便利的导航和资源共享功能,还在于通过链接的传递,帮助构建和扩展互联网上的信息网络。同时,它们也促进了不同网站之间的流量互通和互动,增强了网络生态的https://www.liedaoshou.com/blog/archives/39791
8.美图看看2.1.3版优化图片网络分享功能美图看看是一款小巧又全能的看图工具,很早版本即提供有图片一键分享至新浪微博/人人网相册功能,也得到了众多用户的肯定。此次2.1.3新版,进一步优化了图片网络分享功能,可将整个图片文件夹一键上传至人人网相册;而且新版软件在使用的方便性、易用性等方面,也有许多细节的优化更新。下面就一起来看看新版美图看看的一些功能https://m.zol.com.cn/article/2483258.html
9.高级互联网营销师分享当下适合各种型号手机的最火手机封面唯美图片然而很多人都有这样的一个烦恼,那就是找不到一张符合自己个性的、自己喜欢的、可以根据不同季节或心情更换的手机封面图,今天高级互联网营销师就为大家分享一组当下最火最唯美的手机封面图片给到大家,适合各种机型,废话不多说,上传。https://m.sohu.com/a/592443069_120811516
10.92天寒窗苦学,泪谈京东三面+交叉面经历,终获30K*14薪菜就要查漏补缺,不知道自己菜的人才最可怕,这次金九银十我已经跃跃欲试了在家也没少准备,下面分享下我的金九银十备战资源库, 有需要的直接转发本文后,东西直接拿走不谢:面试资料pdf---传送门! 1,2020年最新最全的一线互联网大厂面试题及详析,帮助你更快更稳地拿下心仪offer! 编辑切换https://maimai.cn/article/detail?fid=1739594445&efid=GTSi88uhMTyIchV0Sr0u4Q
11.5家互联网大厂组织架构图分享,免费领取模板!以上就是为本文为大家分享的5个互联网大厂的组织架构图,在boardmix资源社区都可以获取其完整模板,组织架构图一般有直线制组织架构、职能制组织架构、直线职能制组织架构、事业部制组织架构和矩阵制组织架构等类型,使用boardmix博思白板能够帮助轻松绘制组织架构图。 https://boardmix.cn/article/organizationalstructure/
12.高清图库SD分享导航站SD分享导航站国内最良心的ACG类图片网站,所有资源免费下载;网站内容涵盖了游戏原画、日系插画、二 SD分享高清图库 艺图语_高质量高清美图图库 艺图语是一个好看的图片大全,美图图库,超高清大图分享网站。艺图语是一家提供超高清大图 SD分享图片搜索小工具 https://home.designshidai.com/nav_image?amp=1
13.大咖云集,共探未来——2023地理信息技术创新大会完整议程揭晓1场主题大会,5大主题展区,21场平行论坛,48小时探索之旅,50+展位、150+技术讲座,邀请您与全国IT技术、信息化、GIS、遥感以及互联网等领域的领导、院士、业界学者、企业领袖、教育及科研工作者以及各行业专业人士,以多维度、多层次、多方位,深度探讨地理信息技术在人工智能、物联网、大数据、云计算、数字孪生、大模https://i.ifeng.com/c/8TlnTpS8ScL
14.网络红页操作指南打开一个互联网浏览器窗口(推荐使用IE7.0以上版本),在地址栏中输入http://hy.conac.cn,直接进入“网络红页”支持管理平台,输入账号密码,填写正确的验证码后,进入内容编辑页面。如图1: (图1) 第二步 页面设置 直接进入 “网络红页”编辑页面,使用编辑页面顶端的工具栏,可自主设置网络模版、栏目条颜色和网站背景https://eeds.nmgbb.gov.cn/eedss/bszn/ymzc/201603/t20160330_51558.html
15.央视网央视网(www.cctv.com)由中央广播电视总台主办,是以视频为特色的中央重点新闻网站,是央视的融合传播平台,是拥有全牌照业务资质的大型互联网文化企业。秉承“融合创新、一体发展”的理念,以新闻为龙头,以视频为重点,以用户为中心,建成“一网一端多平台多渠道”融媒体http://cctv.com/
16.水果手机添加义项 收藏 分享 水果手机(1) 水果手机是水果公司旗下产品,公司正式成立于2010年8月,总部位于中国广东省深圳市,是一家专注于高端智能手机研发的移动互联网公司。 快速导航 词条图册 中文名 水果手机 出品公司 水果公司 总部位于 中国广东省深圳市 外文名 Fruit cell phone 公司成立 2010年8月目录 1简介 2详细https://baike.sogou.com/v47473058.htm
17.妮是老虎陈妮妮UNI图片合集分享,她的微密WEME圈付费内容是什么抖音上出现了一位名为陈妮妮(妮是老虎)的主播,昵称:陈妮妮uni,她以微密和weme圈为平台,发布了一系列XG的图片和视频,而这些作品都是收费的,引起了众多网友的关注和争议,陈妮妮微密付费内容一时间就吸引了无数网友的寻找,这些照片和视频的CD之大,让人不禁思考,背后是什么原因让她决定采取这种方式来吸引观众。 https://www.heiliaofuli.com/7535.html
18.隐私政策5.4 互联网并非绝对安全的环境,我们强烈建议您不要使用非爱问医生推荐的通信方式发送个人信息。您可以通过我们的服务建立联系和相互分享。当您通过我们的服务创建交流、交易或分享时,您可以自主选择沟通、交易或分享的对象,作为能够看到您的交易内容、联络方式、交流信息或分享内容等相关信息的第三方。 https://www.wenwo.com/h5/app/chart/doctor/agreement/privacy
19.HUAWEI华为P50Pocket艺术定制版用户指南说明书江阴雨辰互联互联网 11 已连接至 WLAN6 网络 基础使用 已连接至 WLAN6+ 网络 飞行模式已开启闹钟已开启 电池无电量电池电量低 正在充电正在使用快充 正在使用超级快充无线超级快充 基础使用 控制中心简介 控制中心将常用的音频播控、快捷开关、超级终端等功能集合在一起,让您操作更便捷。 https://www.yc00.com/num/1701274552a1066242.html