Create app.py

app.py

@@ -0,0 +1,67 @@
+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,)