fix import

app.py

@@ -70,24 +70,35 @@ def estimate_body(source):
     
 def image_changed(image):
   if (image == None):
-    return {}, 512, 512
-  json = estimate_body(image)
-  return json, image.width, image.height
+    return "estimation", {}
+
+  #json = estimate_body(image)
+  candidate, subset = body_estimation(pil2cv(image))
+  print(subset.shape)
+  json = "{ \"candidate\": " + candidate_to_json_string(candidate) + ", \"subset\": " + subset_to_json_string(subset) + " }"
+
+  return f"""{image.width}px x {image.height}px, {subset.shape[0]} indivisual(s)""", json
 
 html_text = f"""
     <canvas id="canvas" width="512" height="512"></canvas>
     <script type="text/javascript" defer>{file_contents}</script>
     """
 
-with gr.Blocks() as demo:
+with gr.Blocks(css="""button { min-width: 80px; }""") as demo:
   with gr.Row():
     with gr.Column(scale=1):
-      startBtn = gr.Button(value="Start edit")
       width = gr.Slider(label="Width", minimum=512, maximum=1024, step=64, value=512, interactive=True)
       height = gr.Slider(label="Height", minimum=512, maximum=1024, step=64, value=512, interactive=True)
       with gr.Accordion(label="Pose estimation", open=False):
         source = gr.Image(type="pil")
-        gr.Markdown("""push "Start edit" after estimation done.""")
+        estimationResult = gr.Markdown("""estimation""")
+        with gr.Row():
+          with gr.Column(min_width=80):
+            applySizeBtn = gr.Button(value="Apply size")
+          with gr.Column(min_width=80):
+            replaceBtn = gr.Button(value="Replace")
+          with gr.Column(min_width=80):
+            importBtn = gr.Button(value="Import")
       with gr.Accordion(label="Json", open=False):
         gr.Markdown("""
 | inout            | how to                                                                               |
@@ -101,7 +112,7 @@ with gr.Blocks() as demo:
     with gr.Column(scale=2):
       html = gr.HTML(html_text)
       with gr.Row():
-        with gr.Column(scale=1):
+        with gr.Column(scale=1, min_width=60):
           saveBtn = gr.Button(value="Save")
         with gr.Column(scale=7):
           gr.Markdown("""
@@ -119,15 +130,28 @@ with gr.Blocks() as demo:
 Points to note for pseudo-3D rotation: When performing pseudo-3D rotation on the X and Y axes, the projection is converted to 2D and Z-axis information is lost when the mouse button is released. This means that if you finish dragging while the shape is collapsed, you may not be able to restore it to its original state. In such a case, please use the "undo" function.
 """)
 
+  width.change(fn=None, inputs=[width], _js="(w) => { resizeCanvas(w,null); }")
+  height.change(fn=None, inputs=[height], _js="(h) => { resizeCanvas(null,h); }")
+
   source.change(
     fn = image_changed,
     inputs = [source],
-    outputs = [json, width, height])
-  startBtn.click(
+    outputs = [estimationResult, json])
+  applySizeBtn.click(
+    fn = lambda x: (x.width, x.height),
+    inputs = [source], 
+    outputs = [width, height])
+  replaceBtn.click(
     fn = None,
-    inputs = [json, width, height], 
+    inputs = [json],
     outputs = [],
-    _js="(json, w, h) => { initializePose(json,w,h); return []; }")
+    _js="(json) => { initializeEditor(); importPose(json); return []; }")
+  importBtn.click(
+    fn = None,
+    inputs = [json],
+    outputs = [],
+    _js="(json) => { importPose(json); return []; }")
+
   saveBtn.click(
     fn = None,
     inputs = [], outputs = [json],
@@ -135,5 +159,6 @@ Points to note for pseudo-3D rotation: When performing pseudo-3D rotation on the
   jsonInputBtn.click(
     fn = lambda x: x,
     inputs = [jsonInput], outputs = [json])
+  demo.load(fn=None, inputs=[], outputs=[], _js="() => { initializeEditor(); importPose(); return []; }")
     
 gr.mount_gradio_app(app, demo, path="/")

static/poseEditor.js

@@ -40,7 +40,7 @@ function makePoseFromCandidateAndSubsetElement(candidate, subsetElement) {
   var pose = [];
   for (let j = 0 ; j < 18; j++) {
     let i = subsetElement[j];
-    pose.push(i < 0 ? null : candidate[i]);
+    pose.push(i < 0 ? null : candidate[i].map((x)=>x));
   }
   return pose;
 }
@@ -87,14 +87,15 @@ function clearCanvas() {
 function resizeCanvas(width, height) {
   canvas.width = width ? width : canvas.width;
   canvas.height = height ? height : canvas.height;
-  clearCanvas();
-  drawBodyPose();
+  Redraw();
 }
 
 function calculateCenter(shape) {
   var center = shape.reduce(function(acc, point) {
-    acc[0] += point[0];
-    acc[1] += point[1];
+    if (point === null) {
+      acc[0] += point[0];
+      acc[1] += point[1];
+    }
     return acc;
   }, [0, 0]);
   center[0] /= shape.length;
@@ -169,7 +170,6 @@ function drawBodyPose() {
 
   for (let i = 0; i < poseData.length; i++) {
     const pose = poseData[i];
-    const center = calculateCenter(pose);
 
     // edge
     for (let j = 0; j < 17; j++) {
@@ -264,6 +264,11 @@ let rotateBaseVector = null;
 let history = [];
 let historyIndex = 0;
 
+function clearHistory() {
+  history = [];
+  historyIndex = 0;  
+}
+
 function addHistory() {
   history = history.slice(0, historyIndex);
   history.push(JSON.parse(JSON.stringify(poseData)));
@@ -456,14 +461,8 @@ document.addEventListener("keyup", (event) => {
   Redraw();
 });
 
-function initializePose(jsonData,w,h) {
-  console.log("initializePose");
-  if (jsonData != null) {
-    poseData = makePoseDataFromCandidateAndSubset(jsonData.candidate, jsonData.subset);
-  } else {
-    poseData = makePoseDataFromCandidateAndSubset(sampleCandidateSource, [sampleSubsetElementSource]);
-  }
-  addHistory();
+function initializeEditor() {
+  console.log("initializeEditor");
 
   canvas = document.getElementById('canvas');
   ctx = canvas.getContext('2d');
@@ -471,10 +470,19 @@ function initializePose(jsonData,w,h) {
   canvas.addEventListener('mousedown', handleMouseDown);
   canvas.addEventListener('mousemove', handleMouseMove);
   canvas.addEventListener('mouseup', handleMouseUp);
+  poseData = [];
+  clearHistory();
+}
 
-  resizeCanvas(w, h);
-
-  // setInterval(Redraw, 1000 / 30);
+function importPose(jsonData) {
+  if (jsonData != null) {
+    newPoseData = makePoseDataFromCandidateAndSubset(jsonData.candidate, jsonData.subset);
+  } else {
+    newPoseData = makePoseDataFromCandidateAndSubset(sampleCandidateSource, [sampleSubsetElementSource]);
+  }
+  poseData = poseData.concat(newPoseData);
+  addHistory();
+  Redraw();
 }
 
 function savePose() {