refine json-import ui

app.py

@@ -100,15 +100,20 @@ with gr.Blocks(css="""button { min-width: 80px; }""") as demo:
           with gr.Column(min_width=80):
             importBtn = gr.Button(value="Import")
       with gr.Accordion(label="Json", open=False):
+        with gr.Row():
+          with gr.Column(min_width=80):
+            replaceWithJsonBtn = gr.Button(value="Replace")
+          with gr.Column(min_width=80):
+            importJsonBtn = gr.Button(value="Import")
         gr.Markdown("""
 | inout            | how to                                                                               |
 | -----------------| ----------------------------------------------------------------------------------------- |
-| Import | Paste json to "Json source" and click "Import Json", edit the width/height, then click "Start edit". |
+| Import | Paste json to "Json source" and click "Read", edit the width/height, then click "Replace" or "Import". |
 | Export | click "Save" and "Copy to clipboard" of "Json" section.                                             |
 """)
         json = gr.JSON(label="Json")
-        jsonInput = gr.Textbox(label="Json source", lines=10)
-        jsonInputBtn = gr.Button(value="Import Json")
+        jsonSource = gr.Textbox(label="Json source", lines=10)
+        jsonReadBtn = gr.Button(value="Read")
       with gr.Accordion(label="Notes", open=False):
         gr.Markdown("""
 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.
@@ -163,9 +168,19 @@ When using Q, X, C, R, pressing and dont release until the operation is complete
     fn = None,
     inputs = [], outputs = [json],
     _js="() => { return [savePose()]; }")
-  jsonInputBtn.click(
+  jsonReadBtn.click(
     fn = lambda x: x,
-    inputs = [jsonInput], outputs = [json])
+    inputs = [jsonSource], outputs = [json])
+  replaceWithJsonBtn.click(
+    fn = None,
+    inputs = [json],
+    outputs = [],
+    _js="(json) => { initializeEditor(); importPose(json); return []; }")
+  importJsonBtn.click(
+    fn = None,
+    inputs = [json],
+    outputs = [],
+    _js="(json) => { importPose(json); return []; }")
   demo.load(fn=None, inputs=[], outputs=[], _js="() => { initializeEditor(); importPose(); return []; }")
     
 gr.mount_gradio_app(app, demo, path="/")