Update app.py

app.py

@@ -319,6 +319,10 @@ def select_frame(v, evt: gr.SelectData):
     #print(v)
     return v, frame_selected
 
+def align_rows(evt: gr.EventData):
+    global masks
+    return gr.Gallery(columns=int(len(masks)))
+
 
 css = """
 #img-display-container {
@@ -365,7 +369,8 @@ with gr.Blocks(css=css) as demo:
             input_url = gr.Textbox(value="./examples/streetview.mp4", label="URL")
             input_video = gr.Video(label="Input Video", format="mp4")
             input_url.change(fn=loadurl, inputs=[input_url], outputs=[input_video])
-            output_frame = gr.Gallery(label="Frames", type='numpy', preview=True, rows=2, columns=6)
+            output_frame = gr.Gallery(label="Frames", type='numpy', preview=True, columns=6)
+            output_frame.change(fn=align_rows, inputs=None, outputs=[output_frame])
             output_mask = gr.ImageEditor(interactive=True, transforms=(None,), eraser=gr.Eraser(), brush=gr.Brush(colors=['black', 'darkgray', 'gray', 'lightgray', 'white']), layers=True)
             submit = gr.Button("Submit")
         with gr.Column():
@@ -537,7 +542,7 @@ with gr.Blocks(css=css) as demo:
                       break;
                     case \"i\":
                       BABYLON.Engine.LastCreatedScene.getNodes()[parseInt(document.getElementById(\"fnum\").getElementsByTagName(\"input\")[0].value)+1].scaling.y *= 256/255;
-                      this.value = \"i ↕ ,\"; 
+                      this.value = \"i ↕ ,\";
                       break;
                     case \",\":
                       BABYLON.Engine.LastCreatedScene.getNodes()[parseInt(document.getElementById(\"fnum\").getElementsByTagName(\"input\")[0].value)+1].scaling.y /= 256/255;