organized the size-related aspects

app.py

@@ -49,18 +49,28 @@ with gr.Blocks() as demo:
   with gr.Row():
     with gr.Column(scale=1):
       source = gr.Image(type="pil")
-      btn = gr.Button(value="Fetch pose")
       width = gr.Slider(label="Width", mininmum=512, maximum=1024, step=64, value=512, key="Width", interactive=True)
       height = gr.Slider(label="Height", mininmum=512, maximum=1024, step=64, value=512, key="Height", interactive=True)
+      startBtn = gr.Button(value="Start edit")
     with gr.Column(scale=2):
       html = gr.HTML(html_text)
-      console = gr.Textbox(label="console")
+      with gr.Row():
+        with gr.Column(scale=2):
+          console = gr.Textbox(label="console")
+        with gr.Column(scale=1):
+          saveBtn = gr.Button(value="Save")
 
-  btn.click(
+  source.change(
+    fn=lambda x: x.size,
+    inputs = [source],
+    outputs = [width, height])
+  startBtn.click(
     fn = None,
-    inputs = source, outputs = [console, width, height], 
-    _js="(i) => { console.log(typeof(i)); initializePose(); return [i, 1024, 1024]; }")
-  width.change(fn=None, _js="(i) => { console.log(i); resizeCanvas(i, null); return i; }")
-  height.change(fn=None, _js="(i) => { console.log(i); resizeCanvas(null, i); return i; }")
+    inputs = [width, height], outputs = [], 
+    _js="(w, h) => { initializePose(w,h); return []; }")
+  saveBtn.click(
+    fn = None,
+    inputs = source, outputs = console,
+    _js="() => { savePose(); }")
 
 gr.mount_gradio_app(app, demo, path="/")

static/poseEditor.js

@@ -154,13 +154,26 @@ function handleMouseUp(event) {
   isDragging = false;
 }
 
-function initializePose() {
-    canvas = document.getElementById('canvas');
-    ctx = canvas.getContext('2d');
+function initializePose(w,h) {
+  canvas = document.getElementById('canvas');
+  ctx = canvas.getContext('2d');
 
-    canvas.addEventListener('mousedown', handleMouseDown);
-    canvas.addEventListener('mousemove', handleMouseMove);
-    canvas.addEventListener('mouseup', handleMouseUp);
+  canvas.addEventListener('mousedown', handleMouseDown);
+  canvas.addEventListener('mousemove', handleMouseMove);
+  canvas.addEventListener('mouseup', handleMouseUp);
 
-    resizeCanvas(512, 512);
+  resizeCanvas(w, h);
+}
+
+function savePose() {
+    const canvasUrl = canvas.toDataURL();
+
+    const createEl = document.createElement('a');
+    createEl.href = canvasUrl;
+
+    // This is the name of our downloaded file
+    createEl.download = "pose.png";
+
+    createEl.click();
+    createEl.remove();
 }