import gradio as gr from fastapi import FastAPI, Request, Response with open("static/poseEditor.js", "r") as f: file_contents = f.read() app = FastAPI() @app.middleware("http") async def some_fastapi_middleware(request: Request, call_next): path = request.scope['path'] # get the request route response = await call_next(request) if path == "/": response_body = "" async for chunk in response.body_iterator: response_body += chunk.decode() some_javascript = f""" """ response_body = response_body.replace("", some_javascript + "") del response.headers["content-length"] return Response( content=response_body, status_code=response.status_code, headers=dict(response.headers), media_type=response.media_type ) return response def greet(source): print("greet") print(source) return ("Hello ", 768, 768) html_text = f""" """ with gr.Blocks() as demo: with gr.Row(): with gr.Column(scale=1): source = gr.Image(type="pil") btn = gr.Button(value="Fetch pose") width = gr.Slider(label="Width", mininmum=512, maximum=1024, step=64, value=512, key="Width", interactive=True) height = gr.Slider(label="Height", mininmum=512, maximum=1024, step=64, value=512, key="Height", interactive=True) with gr.Column(scale=2): html = gr.HTML(html_text) console = gr.Textbox(label="console") btn.click( fn = None, inputs = source, outputs = [console, width, height], _js="(i) => { console.log(typeof(i)); initializePose(); return [i, 1024, 1024]; }") width.change(fn=None, _js="(i) => { console.log(i); resizeCanvas(i, null); return i; }") height.change(fn=None, _js="(i) => { console.log(i); resizeCanvas(null, i); return i; }") gr.mount_gradio_app(app, demo, path="/")