import gradio as gr import requests from io import BytesIO from PIL import Image import base64 canvas_html = "" 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)