import gradio as gr
from fastapi import FastAPI, Request, Response

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>
console.log("middleware");
        </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>
    """

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="/")