Python_Gradio_模型展示yu前端开发

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