improve page ui

app.py

@@ -80,32 +80,31 @@ html_text = f"""
     """
 
 with gr.Blocks() as demo:
-  gr.Markdown("""### Usage
-
-Choose one of the following methods to edit the pose:
-
-| Style            | Description                                                                               |
-| -----------------| ----------------------------------------------------------------------------------------- |
-| Pose recognition | Upload an image and click "Start edit".                                               |
-| Input json       | Input json to "Json source" and click "Input Json", edit the width/height, then click "Start edit".    |
-| Free style       | Edit the width/height, then click "Start edit".                                        |
-
-To save the pose image, click "Save".  
-To export the pose data, click "Save" and "Copy to clipboard" of "Json" section.
-""")
   with gr.Row():
     with gr.Column(scale=1):
-      source = gr.Image(type="pil")
+      startBtn = gr.Button(value="Start edit")
       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")
-      json = gr.JSON(label="Json", lines=10)
-      jsonInput = gr.Textbox(label="Json source", lines=10)
-      jsonInputBtn = gr.Button(value="Input Json")
+      with gr.Accordion(label="Pose estimation", open=False):
+        source = gr.Image(type="pil")
+        gr.Markdown("""push "Start edit" after estimation done.""")
+      with gr.Accordion(label="Json", open=False):
+        gr.Markdown("""
+| inout            | how to                                                                               |
+| -----------------| ----------------------------------------------------------------------------------------- |
+| Import | Paste json to "Json source" and click "Import Json", edit the width/height, then click "Start edit". |
+| Export | click "Save" and "Copy to clipboard" of "Json" section.                                             |
+""")
+        json = gr.JSON(label="Json", lines=10)
+        jsonInput = gr.Textbox(label="Json source", lines=10)
+        jsonInputBtn = gr.Button(value="Import Json")
     with gr.Column(scale=2):
       html = gr.HTML(html_text)
-      saveBtn = gr.Button(value="Save")
-      gr.Markdown("""
+      with gr.Row():
+        with gr.Column(scale=1):
+          saveBtn = gr.Button(value="Save")
+        with gr.Column(scale=7):
+          gr.Markdown("""
 - "ctrl + drag" to scale
 - "alt + drag" to translate
 - "shift + drag" to rotate(move right first, then up or down)