gradio初体验——JS代码注入及fastapi挂载

概述

Gradio官网：Gradio

gradio是个Python框架，适合写个简单页面，用Python代码生成前端控件，有点PyQt5的意思，不定制化样式的话，还是比较方便的。

关于路由

该框架源码用的是FastApi，路由好像是写死的，总之我没有成功开发一个新接口。

---

Gradio Interface Docs

挂载FastApi

官方文档：Gradio mount_gradio_app Docs

from fastapi import FastAPI
import uvicorn
import gradio as gr
app = FastAPI()
@app.get("/gradio")
def read_main():
    return {"message": "This is your main app"}
io = gr.Interface(lambda x: "Hello, " + x + "!", "textbox", "textbox")
app = gr.mount_gradio_app(app, io, path="/")

if __name__ == '__main__':
    uvicorn.run("webui:app", host="0.0.0.0", port=7869)

demo版本：

from fastapi import FastAPI
import uvicorn
import gradio as gr
app = FastAPI()
@app.get("/gradio")
def read_main():
    return {"message": "This is your main app"}

with gr.Blocks() as demo:
    gr.Interface(lambda x: "Hello, " + x + "!", "textbox", "textbox")
    demo.queue(concurrency_count=3)
app = gr.mount_gradio_app(app, demo, path="/")
if __name__ == '__main__':
#     app = gr.mount_gradio_app(app, demo, path="/")
    uvicorn.run("webui:app", host="0.0.0.0", port=7869
                # , reload=True
               )

两个踩坑要点：

1. 把app = gr.mount_gradio_app(app, demo, path="/")写到代码末尾，不能写到if __name__ == '__main__':下面，否则挂载是失败的。
2. fastapi的 reload=True关了，gradio自身会产生很多文件，会被fastapi读取到

JS代码注入

注入一段JS代码费大劲了。

with gr.Blocks(css=block_css, theme=gr.themes.Default(**default_theme_args)) as demo:
    ...
    demo.load(
        ...
        _js=custom_js,
    )

主要代码就是demo.load(_js=custom_js)这段代码了。

custom_js：

custom_js = """
function my_func(){
let script = document.createElement('script');
script.innerHTML = "function my_func(params){...}";
document.head.appendChild(script);
}
"""

特别说明script.innerHTML = "function my_func(params){...}";：

function my_func(params){...}是特意压缩的，展开的话，换行貌似会失效，我没多测了，压缩了没什么逼bug了。
双引号改单引号，再放到script.innerHTML = ""这个双引号里面是可以注入进去的。

这段代码是在页面内容生成之前运行的，所以一些变量尽量写在函数里面，这样调动该JS函数的时候才能刷新，被window对象捕获到。

JavaScript代码在线压缩：在线Javascript压缩工具 - js在线格式化 (bchrt.com)