app.py

import gradio as gr
import requests 
from io import BytesIO
from PIL import Image
import base64

canvas_html = "<face-canvas id='canvas-root' style='display:flex;max-width: 500px;margin: 0 auto;'></face-canvas>"
load_js = """
async () => {
  const url = "https://huggingface.co/datasets/radames/gradio-components/raw/main/face-canvas.js"
  fetch(url)
    .then(res => res.text())
    .then(text => {
      const script = document.createElement('script');
      script.type = "module"
      script.src = URL.createObjectURL(new Blob([text], { type: 'application/javascript' }));
      document.head.appendChild(script);
    });
}
"""
get_js_image = """
async (canvasData) => {
  const canvasEl = document.getElementById("canvas-root");
  const data = canvasEl? canvasEl._data : null;
  return data
}
"""

def predict(canvas_data):
  base64_img = canvas_data['image']
  image_data = base64.b64decode(base64_img.split(',')[1])
  image = Image.open(BytesIO(image_data))
  return image

blocks = gr.Blocks()
with blocks:
  canvas_data = gr.JSON(value={}, visible=False)
  with gr.Row():
    with gr.Column(visible=True) as box_el:
        canvas = gr.HTML(canvas_html,elem_id="canvas_html")
    with gr.Column(visible=True) as box_el:
        image_out = gr.Image()

  btn = gr.Button("Run")
  btn.click(fn=predict, inputs=[canvas_data], outputs=[image_out], _js=get_js_image)
  blocks.load(None, None, None, _js=load_js)

blocks.launch(debug=True, inline=True)