{"id":8895,"date":"2023-09-06T14:08:53","date_gmt":"2023-09-06T06:08:53","guid":{"rendered":"\/?p=8895"},"modified":"2023-09-06T15:45:05","modified_gmt":"2023-09-06T07:45:05","slug":"gradio%e5%88%9d%e4%bd%93%e9%aa%8c-js%e4%bb%a3%e7%a0%81%e6%b3%a8%e5%85%a5%e5%8f%8afastapi%e6%8c%82%e8%bd%bd","status":"publish","type":"post","link":"\/?p=8895","title":{"rendered":"gradio\u521d\u4f53\u9a8c\u2014\u2014JS\u4ee3\u7801\u6ce8\u5165\u53cafastapi\u6302\u8f7d"},"content":{"rendered":"

\u6982\u8ff0<\/h2>\n

Gradio\u5b98\u7f51\uff1aGradio<\/a><\/p>\n

gradio\u662f\u4e2aPython\u6846\u67b6\uff0c\u9002\u5408\u5199\u4e2a\u7b80\u5355\u9875\u9762\uff0c\u7528Python\u4ee3\u7801\u751f\u6210\u524d\u7aef\u63a7\u4ef6\uff0c\u6709\u70b9PyQt5\u7684\u610f\u601d\uff0c\u4e0d\u5b9a\u5236\u5316\u6837\u5f0f\u7684\u8bdd\uff0c\u8fd8\u662f\u6bd4\u8f83\u65b9\u4fbf\u7684\u3002<\/p>\n

\u5173\u4e8e\u8def\u7531<\/h2>\n

\u8be5\u6846\u67b6\u6e90\u7801\u7528\u7684\u662fFastApi\uff0c\u8def\u7531\u597d\u50cf\u662f\u5199\u6b7b\u7684\uff0c\u603b\u4e4b\u6211\u6ca1\u6709\u6210\u529f\u5f00\u53d1\u4e00\u4e2a\u65b0\u63a5\u53e3\u3002<\/p>\n

\"image-20230906135118755\"<\/p>\n

\n

Gradio Interface Docs<\/a><\/p>\n

\"image-20230906135243506\"<\/p>\n

\u6302\u8f7dFastApi<\/h2>\n

\u5b98\u65b9\u6587\u6863\uff1aGradio mount_gradio_app Docs<\/a><\/p>\n

from fastapi import FastAPI\nimport uvicorn\nimport gradio as gr\napp = FastAPI()\n@app.get("\/gradio")\ndef read_main():\n    return {"message": "This is your main app"}\nio = gr.Interface(lambda x: "Hello, " + x + "!", "textbox", "textbox")\napp = gr.mount_gradio_app(app, io, path="\/")\n\nif __name__ == '__main__':\n    uvicorn.run("webui:app", host="0.0.0.0", port=7869)<\/code><\/pre>\n
demo\u7248\u672c\uff1a<\/p>\n
from fastapi import FastAPI\nimport uvicorn\nimport gradio as gr\napp = FastAPI()\n@app.get("\/gradio")\ndef read_main():\n    return {"message": "This is your main app"}\n\nwith gr.Blocks() as demo:\n    gr.Interface(lambda x: "Hello, " + x + "!", "textbox", "textbox")\n    demo.queue(concurrency_count=3)\napp = gr.mount_gradio_app(app, demo, path="\/")\nif __name__ == '__main__':\n#     app = gr.mount_gradio_app(app, demo, path="\/")\n    uvicorn.run("webui:app", host="0.0.0.0", port=7869\n                # , reload=True\n               )<\/code><\/pre>\n
\u4e24\u4e2a\u8e29\u5751\u8981\u70b9\uff1a<\/strong><\/p>\n
    \n
  1. \u628aapp = gr.mount_gradio_app(app, demo, path="\/")<\/code>\u5199\u5230\u4ee3\u7801\u672b\u5c3e\uff0c\u4e0d\u80fd\u5199\u5230if __name__ == '__main__':<\/code>\u4e0b\u9762\uff0c\u5426\u5219\u6302\u8f7d\u662f\u5931\u8d25\u7684\u3002<\/li>\n
  2. fastapi\u7684 reload=True<\/code>\u5173\u4e86\uff0cgradio\u81ea\u8eab\u4f1a\u4ea7\u751f\u5f88\u591a\u6587\u4ef6\uff0c\u4f1a\u88abfastapi\u8bfb\u53d6\u5230<\/li>\n<\/ol>\n
    JS\u4ee3\u7801\u6ce8\u5165<\/h2>\n
    \u6ce8\u5165\u4e00\u6bb5JS\u4ee3\u7801\u8d39\u5927\u52b2\u4e86\u3002<\/p>\n
    with gr.Blocks(css=block_css, theme=gr.themes.Default(**default_theme_args)) as demo:\n    ...\n    demo.load(\n        ...\n        _js=custom_js,\n    )<\/code><\/pre>\n
    \u4e3b\u8981\u4ee3\u7801\u5c31\u662fdemo.load(_js=custom_js)<\/code>\u8fd9\u6bb5\u4ee3\u7801\u4e86\u3002<\/p>\n
    custom_js\uff1a<\/p>\n
    custom_js = """\nfunction my_func(){\nlet script = document.createElement('script');\nscript.innerHTML = "function my_func(params){...}";\ndocument.head.appendChild(script);\n}\n"""<\/code><\/pre>\n
    \u7279\u522b\u8bf4\u660escript.innerHTML = "function my_func(params){...}";<\/code>\uff1a<\/p>\n
    function my_func(params){...}\u662f\u7279\u610f\u538b\u7f29\u7684\uff0c\u5c55\u5f00\u7684\u8bdd\uff0c\u6362\u884c\u8c8c\u4f3c\u4f1a\u5931\u6548\uff0c\u6211\u6ca1\u591a\u6d4b\u4e86\uff0c\u538b\u7f29\u4e86\u6ca1\u4ec0\u4e48\u903cbug\u4e86\u3002
    \n\u53cc\u5f15\u53f7\u6539\u5355\u5f15\u53f7\uff0c\u518d\u653e\u5230script.innerHTML = ""<\/code>\u8fd9\u4e2a\u53cc\u5f15\u53f7\u91cc\u9762\u662f\u53ef\u4ee5\u6ce8\u5165\u8fdb\u53bb\u7684\u3002<\/p>\n
    \u8fd9\u6bb5\u4ee3\u7801\u662f\u5728\u9875\u9762\u5185\u5bb9\u751f\u6210\u4e4b\u524d\u8fd0\u884c\u7684\uff0c\u6240\u4ee5\u4e00\u4e9b\u53d8\u91cf\u5c3d\u91cf\u5199\u5728\u51fd\u6570\u91cc\u9762\uff0c\u8fd9\u6837\u8c03\u52a8\u8be5JS\u51fd\u6570\u7684\u65f6\u5019\u624d\u80fd\u5237\u65b0\uff0c\u88abwindow\u5bf9\u8c61\u6355\u83b7\u5230\u3002<\/p>\n
    JavaScript\u4ee3\u7801\u5728\u7ebf\u538b\u7f29\uff1a\u5728\u7ebfJavascript\u538b\u7f29\u5de5\u5177 - js\u5728\u7ebf\u683c\u5f0f\u5316 (bchrt.com)<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
    \u6982\u8ff0 Gradio\u5b98\u7f51\uff1aGradio gradio\u662f\u4e2aPython\u6846\u67b6\uff0c\u9002\u5408\u5199\u4e2a\u7b80\u5355\u9875\u9762\uff0c\u7528Python\u4ee3\u7801\u751f\u6210\u524d\u7aef\u63a7\u4ef6\uff0c\u6709\u70b9PyQt5   \u2026 …<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"ngg_post_thumbnail":0},"categories":[198],"tags":[199],"_links":{"self":[{"href":"\/index.php?rest_route=\/wp\/v2\/posts\/8895"}],"collection":[{"href":"\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=8895"}],"version-history":[{"count":4,"href":"\/index.php?rest_route=\/wp\/v2\/posts\/8895\/revisions"}],"predecessor-version":[{"id":8899,"href":"\/index.php?rest_route=\/wp\/v2\/posts\/8895\/revisions\/8899"}],"wp:attachment":[{"href":"\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=8895"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=8895"},{"taxonomy":"post_tag","embeddable":true,"href":"\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=8895"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}