丰富的线上&线下活动，深入探索云世界
做任务，得社区积分和周边
最真实的开发者用云体验
让每位学生受益于普惠算力
让创作激发创新
资深技术专家手把手带教
遇见技术追梦人
技术交流，直击现场
海量开发者使用工具、手册，免费下载
极速、全面、稳定、安全的开源镜像
开发手册、白皮书、案例集等实战精华
为开发者定制的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来构建一个图片筛选器，从百度爬取的一堆猫咪表情包中刷选一些我们喜欢的出来。