gradio组件
输入组件-输出组件
输入输出组件
多输入和多输出组件
gr.State是一个不可见的组件，目的是在后台存储一些变量方便访问和交互
Block components
Textbox : interactive interactive=True
Event listener
change() event listener play() event listener
method input output
multiple input components pass data to the function
Function-method
single data flow
many data flows multi-step ( pipeline
.select() can be type hinted by a gradio.SelectData argument.
函数：
生成器函数，常规函数
全局变量
Gradio支持的另一种数据持久性是会话状态，数据在一个页面会话中的多次提交中持久存在
在添加输入和输出时添加state组件
gr.update(visible = state), state
网络设置
通过设置server_name=‘0.0.0.0’（表示使用本机ip）,server_port（可不改，默认值是7860）。那么可以通过本机ip:端口号在局域网内分享应用。
# show_error为True表示在控制台显示错误信息。
demo.launch(server_name='0.0.0.0', server_port=8080, show_error=True)
Gradio
Blocks是Gradio的低级API，它允许你创建比Interfaces更多的自定义web应用程序和演示。
简单来说就是比Interfaces更灵活。
一般使用上下文管理，示例代码如下：
代码
import gradio as gr
with gr.Blocks() as demo:
gr.Image("lion.jpg", scale=2)
gr.Image("tiger.jpg", scale=1)
demo.launch()
基本概念
高阶 high-level class
# 最主要的类函数，注意大小写
demo = gradio.Interface(fn, inputs, outputs, title，description)
Gradio component--组件--输入组件要和输入参数数目保持一致
可交互 Event 事件 listener 监听 triggered 触发 ---user data browser user actions
preprocessing steps
postprocessing steps
输入组件
inputs (Textbox, Number, and Image)
输出组件
outputs (Number and Gallery)
demo.launch(share=True, auth=("username", "password"))
share
from_pipeline integrate queue
load方法是一个类方法，用于从Hugging Face的仓库中构建Blocks
from_pipeline方法是一个类方法，用于从Hugging Face的transformers.Pipeline对象构建Interface
queue方法允许您创建一个队列，用于控制请求的处理速率。通过设置一次处理的请求数量，
队列可以实现同时处理多个请求，并让用户了解他们在队列中的位置
api_open：如果为True，将开放后端的REST路由，允许直接向这些端点发出请求，跳过队列
底层 low-level API
Blocks
不同的组件支持不同的事件监听器
布尔值的 interactive 关键字参数直接配置组件的可交互性
.select()` 的事件数据可以通过 gradio.SelectData 参数进行类型提示。
当用户选择触发组件的某部分时，将触发此事件，并且事件数据包含有关用户具体选择的信息
evt.value target index
示例代码-版本问题
from PIL import Image
import gradio as gr
def input_handler(evt: gr.SelectData):
clicked_coords = evt.index
x, y = clicked_coords
print(evt.__dict__)
return x, y
with gr.Blocks(title="Demo App") as demo:
with gr.Row():
input_x_cord = gr.Textbox(label="X Cord")
input_y_cord = gr.Textbox(label="Y Cord")
with Image.open("./cheetah_temp.jpg") as img:
image = gr.Image(img, type="pil")
image.select(input_handler,inputs=None,outputs=[input_x_cord, input_y_cord],show_progress=True,)
if __name__ == "__main__":
demo.launch(server_name='0.0.0.0',server_port=1010,share=False)
说明
ASGI(Asynchronous Server Gateway Interface)
Starlette 是一个轻量级的 ASGI 框架和工具包，特别适合用来构建高性能的 asyncio 服务
ASGI通常用于FastAPI、Starlette、Tornado等异步框架，而WSGI通常用于Django、Flask、Bottle等同步框架
Sanic 称自己为Web服务器和Web框架
Starlette 是一个轻量级的[ASGI]（https://asgi.readthedocs.io/en/latest/）框架，是构建高性能`asyncio`服务的理想之选
FastAPI是一个现代的高性能Web框架，用于基于标准Python类型提示使用Python 3.6+构建API。它建立在Starlette的基础上
应用基于框架
gradio 基于 svelte
streamit 基于 React
dash 基于 React 、 Plotly.js和 Flask，因此相对于前两者，它的启动和编码方式更“像”一个 python 后端，也因此代码会稍微多一些
内网穿透
服务端，是指具有公网ip的服务器，运行frps 客户端，是指需要被访问的服务器，运行frpc
低廉的本地服务器配上低价买的公网ip的组合
前端开发
起始阶段： HTML/CSS/Javascript 三剑客的各种开发 jQuery
解析 JS，可通过 DOM API 和 CSS API 来操作 DOM 结构树和 CSS 规则树
依赖管理工具、自动化工具、代码规范工具、测试工具等等，层出不穷的新工具加快了前端工程化的步伐
now：
React.js
Vue.js 是一种轻量级、开源的 JavaScript 框架
Angular.js 是谷歌开源、基于脚本的框架，用于创建单页 Web 应用的客户端 最核心的依赖注入模式
svelte(web开发框架) --轻量级前端框架
Svelte 是一种全新的构建用户界面的方法。
传统框架如 React 和 Vue 在浏览器中需要做大量的工作，而 Svelte 将这些工作放到构建应用程序的编译阶段来处理。
Svelte 编写的代码在应用程序的状态更改时就能像做外科手术一样更新 DOM
Ember.js
事件驱动和数据驱动两种编码思维模式
事件驱动
前端是页面交互出身的，运作模式也是基于 I/O 模式 事件驱动思维是从事件响应出发，来完成应用的设计和编程
用户输入 => 事件响应 => 代码运行 => 刷新页面状态
事件驱动的思维方式都是围绕“操作”（在前端语言中，也就是“事件”），我们跟随着“操作”的链路来实现代码编写
数据驱动
组件、事件、逻辑处理、样式都是一份数据，我们只需要把数据的状态和转换设计好，剩下的实现则由具现方式（模版引擎、事件机制等）来实现
(1) 设计数据结构 (2) 完成静态页面，同时把数据和事件绑定到页面中 (3) 事件绑定的方法（methods）中，补充相应的逻辑处理
思考数据状态的维护和处理
Node.Js- . RESTful API（目前比较流行的接口开发风格）
可视化组件： Echarts
后端开发框架
Java后端开发框架
springMVC
Springboot+Mybatis——兴起
微服务框架——springboot+dubbo、springcloud—— 前沿
Python 后端开发框架
JavaScript 后端开发框架
Node.js
Express.js
C#
面向.Net 开发者的http://ASP.NET
Ruby
Ruby on Rails
参考
https://www.gradio.app/docs/blocks#blocks-launch
https://godbasin.github.io/vue-ebook/vue-ebook/9.html#_9-1-%E7%BC%96%E7%A0%81%E6%80%9D%E7%BB%B4%E8%BD%AC%E5%8F%98
https://gitcode.com/fatedier/frp/blob/dev/README_zh.md
Python_web开发基础内容 https://www.cnblogs.com/ytwang/p/17808011.html
Uses event data gradio.SelectData to carry value referring to the label of the Image, and selected to refer to state of the Image
https://github.com/gradio-app/gradio/issues/5945
基本工具 | Gradio展示算法效果 https://zhuanlan.zhihu.com/p/629248426
https://www.gradio.app/docs/components
