layout changes

app.py

@@ -227,61 +227,83 @@ def retrieve_video(retrieve_text):
     text_annot = all_mots[top_mot]['annotation']
     return curvid, text_annot
 
-
-with gr.Blocks(css="style.css") as demo:
+with gr.Blocks(css="""
+    .gradio-row {
+        display: flex;
+        gap: 20px;
+    }
+    .gradio-column {
+        flex: 1;
+    }
+    .gradio-container {
+        display: flex;
+        flex-direction: column;
+        gap: 10px;
+    }
+    .gradio-button-row {
+        display: flex;
+        gap: 10px;
+    }
+    .gradio-textbox-row {
+        display: flex;
+        gap: 10px;
+        align-items: center;
+    }
+    .gradio-edit-row {
+        gap: 10px;
+        align-items: center;
+    }
+    .gradio-textbox-with-button {
+        display: flex;
+        align-items: center;
+    }
+    .gradio-textbox-with-button input {
+        flex-grow: 1;
+    }
+""") as demo:
     gr.Markdown(WEBSITE)
     
-    with gr.Row():
-        with gr.Column(scale=7):
+    with gr.Row(elem_id="gradio-row"):
+        with gr.Column(scale=7, elem_id="gradio-column"):
             gr.Markdown(WEB_source)
-            with gr.Row():
-                iterative_button = gr.Button("Iterative", scale=0)
-                retrieve_button = gr.Button("TMRetrieve", scale=0)
-                random_button = gr.Button("Random", scale=0)
-                clear_button_retrieval = gr.Button("Clear", 
-                                                   scale=0)
-
-            with gr.Row():
-                retrieve_text = gr.Textbox(placeholder="Type the text for the motion you want to Retrieve:",
-                                        show_label=True, label="Retrieval Text", 
-                                        value=DEFAULT_TEXT, scale=5)
-                # clear_button_retrieval = gr.Button("Clear Retrieval Text", 
-                #                                    scale=1)
-
-            with gr.Row():
+            with gr.Row(elem_id="gradio-button-row"):
+                iterative_button = gr.Button("Iterative")
+                retrieve_button = gr.Button("TMRetrieve")
+                random_button = gr.Button("Random")
+
+            with gr.Row(elem_id="gradio-textbox-row"):
+                with gr.Column(scale=5, elem_id="gradio-textbox-with-button"):
+                    retrieve_text = gr.Textbox(placeholder="Type the text for the motion you want to Retrieve:",
+                                               show_label=True, label="Retrieval Text", 
+                                               value=DEFAULT_TEXT)
+                    clear_button_retrieval = gr.Button("Clear", scale=0)
+
+            with gr.Row(elem_id="gradio-textbox-row"):
                 suggested_edit_text = gr.Textbox(placeholder="Texts likely to edit the motion:",
-                                                show_label=True, label="Suggested Edit Text", 
-                                                value='', scale=1)
+                                                 show_label=True, label="Suggested Edit Text", 
+                                                 value='')
+
             xxx = 'https://motion-editing.s3.eu-central-1.amazonaws.com/collection_wo_walks_runs/rendered_pairs/011327_120_240-002682_120_240.mp4'
             set_to_pick = gr.Radio(['all', 'train', 'test'],
                                    value='all', 
                                    label="Set to pick from", 
                                    info="Motion will be picked from whole dataset or test or train data.")
-            # Number of videos to retrieve --> Not Supported YET.
-            # how_many_videos = gr.Radio([1, 3, 5, 7], 
-            #                            value=3, 
-            #                            label="# Videos", 
-            #                            info="# Videos to be retrieved in each case.")
 
             retrieved_video_output = gr.Video(label="Retrieved Motion",
                                               value=xxx,
                                               height=360, width=480)
 
-        with gr.Column(scale=5):
+        with gr.Column(scale=5, elem_id="gradio-column"):
             gr.Markdown(WEB_target)
-            with gr.Row():
-
-                input_text = gr.Textbox(placeholder="Type the edit text you want:",
-                                    show_label=False, label="Input Text", 
-                                    value=DEFAULT_TEXT, scale=1)
-            # with gr.Column(scale=1):
-                edit_button = gr.Button("Edit", scale=0)
+            with gr.Row(elem_id="gradio-edit-row"):
                 clear_button_edit = gr.Button("Clear", scale=0)
-                # input_text = gr.Textbox(placeholder="Type the edit text you want:",
-                #                     show_label=False, label="Input Text", 
-                #                     value=DEFAULT_TEXT, scale=10)
-                # edit_button = gr.Button("Edit")
-                # clear_button_edit = gr.Button("Clear Edit Text")
+                edit_button = gr.Button("Edit", scale=0)
+    
+            with gr.Row(elem_id="gradio-textbox-row"):
+                input_text = gr.Textbox(placeholder="Type the edit text you want:",
+                                        show_label=False, label="Input Text", 
+                                        value=DEFAULT_TEXT)
+                
             video_output = gr.Video(label="Generated Video", height=360, 
                                     width=480)
 

style.css

@@ -2,4 +2,25 @@
 #center-column {
     display: flex;
     justify-content: center;
-}
+}
+.gradio-row {
+    display: flex;
+    gap: 20px;
+}
+.gradio-column {
+    flex: 1;
+}
+.gradio-container {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+}
+.gradio-button-row {
+    display: flex;
+    gap: 10px;
+}
+.gradio-textbox-row {
+    display: flex;
+    gap: 10px;
+    align-items: center;
+}