| import gradio as gr | |
| import requests | |
| from io import BytesIO | |
| from PIL import Image | |
| import base64 | |
| canvas_html = "<pose-canvas id='canvas-root' style='display:flex;max-width: 500px;margin: 0 auto;'></pose-canvas>" | |
| load_js = """ | |
| async () => { | |
| const url = "https://huggingface.co/datasets/radames/gradio-components/raw/main/pose-gradio.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) |