app.py

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,)