Spaces:
Running
Running
File size: 1,775 Bytes
79410c2 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 |
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,)
|