Create app.py

app.py

@@ -0,0 +1,48 @@
+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)