app.py

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"""
        <script type="text/javascript" defer>
{file_contents}
        </script>
        """

        response_body = response_body.replace("</body>", some_javascript + "</body>")

        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"""
    <canvas id="canvas" width="512" height="512"></canvas>
    <script type="text/javascript" defer>{file_contents}</script>
    """

with gr.Blocks() as demo:
  with gr.Row():
    with gr.Column(scale=1):
      source = gr.Image(type="pil")
      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)
      startBtn = gr.Button(value="Start edit")
    with gr.Column(scale=2):
      gr.HTML("<ul><li>ctrl + drag to scale</li><li>alt + drag to translate</li><li>shift + drag to rotate(move right first, then up or down)</li></ul>")
      html = gr.HTML(html_text)
      saveBtn = gr.Button(value="Save")

  source.change(
    fn=lambda x: x.size,
    inputs = [source],
    outputs = [width, height])
  startBtn.click(
    fn = None,
    inputs = [width, height], outputs = [], 
    _js="(w, h) => { initializePose(w,h); return []; }")
  saveBtn.click(
    fn = None,
    inputs = [], outputs = [],
    _js="() => { savePose(); }")

gr.mount_gradio_app(app, demo, path="/")