Spaces:
Running
Running
| import gradio as gr | |
| import requests | |
| from io import BytesIO | |
| from PIL import Image | |
| import base64 | |
| blocks = gr.Blocks() | |
| canvas_html = "<div id='canvas-root'></div>" | |
| load_js = """ | |
| async () => { | |
| const url = "https://huggingface.co/datasets/radames/gradio-components/raw/main/sketch-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_colors = """ | |
| async (canvasData) => { | |
| const canvasEl = document.getElementById("canvas-root"); | |
| return [canvasEl._data] | |
| } | |
| """ | |
| set_canvas_size =""" | |
| async (aspect) => { | |
| if(aspect ==='square'){ | |
| _updateCanvas(512,512) | |
| } | |
| if(aspect ==='horizontal'){ | |
| _updateCanvas(768,512) | |
| } | |
| if(aspect ==='vertical'){ | |
| _updateCanvas(512,768) | |
| } | |
| } | |
| """ | |
| def predict(canvas_data): | |
| colors = canvas_data['colors'] | |
| base64_img = canvas_data['image'] | |
| image_data = base64.b64decode(base64_img.split(',')[1]) | |
| image = Image.open(BytesIO(image_data)) | |
| return colors, image | |
| with blocks: | |
| canvas_data = gr.JSON(value={}, visible=False) | |
| with gr.Row(): | |
| with gr.Column(visible=True) as box_el: | |
| aspect = gr.Radio(choices=["square", "horizontal", "vertical"]) | |
| canvas = gr.HTML(canvas_html) | |
| with gr.Column(visible=True) as box_el: | |
| colors_out = gr.JSON() | |
| image_out = gr.Image() | |
| aspect.change(None, inputs=[aspect], outputs=None, _js = set_canvas_size) | |
| btn = gr.Button("Run") | |
| btn.click(fn=predict, inputs=[canvas_data], outputs=[colors_out, image_out], _js=get_js_colors) | |
| blocks.load(None, None, None, _js=load_js) | |
| blocks.launch(debug=True, inline=True,) | |