vertical align

app.py

@@ -501,55 +501,56 @@ with gr.Blocks(css=css) as demo:
                 ''')
 
     #Very hacky approach to emulate dynamically created Gradio components
-    with gr.Row() as upload_your_concept:
+    with gr.Column() as upload_your_concept:
         with gr.Column():
             thing_description = gr.Markdown("You are going to train an object or style, please upload 10-20 images of the object you are planning on training on from different angles/perspectives. You must have the right to do so and you are liable for the images you use, example")
             thing_experimental = gr.Checkbox(label="Improve faces (prior preservation) - can take longer training but can improve faces", visible=False, value=False)
-            thing_image_example = gr.HTML('''<img src="file/cat-toy.png" />''')
+            thing_image_example = gr.HTML('''<div style="display:flex;justify-content:center"><img src="file/cat-toy.png" /></div>''')
             things_naming = gr.Markdown("You should name your concept with a unique made up word that has low chance of the model already knowing it (e.g.: `fantasy_world` here). Images will be automatically cropped to 512x512.")
 
-        with gr.Column():
-            file_collection = []
-            concept_collection = []
-            buttons_collection = []
-            delete_collection = []
-            is_visible = []
-
-            row = [None] * maximum_concepts
-            for x in range(maximum_concepts):
-                ordinal = lambda n: "%d%s" % (n, "tsnrhtdd"[(n // 10 % 10 != 1) * (n % 10 < 4) * n % 10::4])
-                if(x == 0):
-                    visible = True
-                    is_visible.append(gr.State(value=True))
-                else:
-                    visible = False
-                    is_visible.append(gr.State(value=False))
-
-                file_collection.append(gr.File(label=f'''Upload the images for your {ordinal(x+1) if (x>0) else ""} concept''', file_count="multiple", interactive=True, visible=visible))
-                with gr.Column(visible=visible) as row[x]:
-                    concept_collection.append(gr.Textbox(label=f'''{ordinal(x+1) if (x>0) else ""} concept prompt - use a unique, made up word to avoid collisions'''))
-                    # with gr.Row():
-                    #     if(x < maximum_concepts-1):
-                    #         buttons_collection.append(gr.Button(value="Add +1 concept", visible=visible))
-                    #     if(x > 0):
-                    #         delete_collection.append(gr.Button(value=f"Delete {ordinal(x+1)} concept"))
-
-            counter_add = 1
-            for button in buttons_collection:
-                if(counter_add < len(buttons_collection)):
-                    button.click(lambda:
-                    [gr.update(visible=True),gr.update(visible=True), gr.update(visible=False), gr.update(visible=True), True, None],
-                    None,
-                    [row[counter_add], file_collection[counter_add], buttons_collection[counter_add-1], buttons_collection[counter_add], is_visible[counter_add], file_collection[counter_add]], queue=False)
-                else:
-                    button.click(lambda:[gr.update(visible=True),gr.update(visible=True), gr.update(visible=False), True], None, [row[counter_add], file_collection[counter_add], buttons_collection[counter_add-1], is_visible[counter_add]], queue=False)
-                counter_add += 1
-
-            counter_delete = 1
-            for delete_button in delete_collection:
-                if(counter_delete < len(delete_collection)+1):
-                    delete_button.click(lambda:[gr.update(visible=False),gr.update(visible=False), gr.update(visible=True), False], None, [file_collection[counter_delete], row[counter_delete], buttons_collection[counter_delete-1], is_visible[counter_delete]], queue=False)
-                counter_delete += 1
+
+        file_collection = []
+        concept_collection = []
+        buttons_collection = []
+        delete_collection = []
+        is_visible = []
+
+        row = [None] * maximum_concepts
+        for x in range(maximum_concepts):
+            ordinal = lambda n: "%d%s" % (n, "tsnrhtdd"[(n // 10 % 10 != 1) * (n % 10 < 4) * n % 10::4])
+            if(x == 0):
+                visible = True
+                is_visible.append(gr.State(value=True))
+            else:
+                visible = False
+                is_visible.append(gr.State(value=False))
+
+            file_collection.append(gr.File(label=f'''Upload the images for your {ordinal(x+1) if (x>0) else ""} concept''', file_count="multiple", interactive=True, visible=visible))
+            with gr.Column(visible=visible) as row[x]:
+                concept_collection.append(gr.Textbox(label=f'''{ordinal(x+1) if (x>0) else ""} concept prompt - use a unique, made up word to avoid collisions'''))
+                # with gr.Row():
+                #     if(x < maximum_concepts-1):
+                #         buttons_collection.append(gr.Button(value="Add +1 concept", visible=visible))
+                #     if(x > 0):
+                #         delete_collection.append(gr.Button(value=f"Delete {ordinal(x+1)} concept"))
+
+        counter_add = 1
+        for button in buttons_collection:
+            if(counter_add < len(buttons_collection)):
+                button.click(lambda:
+                [gr.update(visible=True),gr.update(visible=True), gr.update(visible=False), gr.update(visible=True), True, None],
+                None,
+                [row[counter_add], file_collection[counter_add], buttons_collection[counter_add-1], buttons_collection[counter_add], is_visible[counter_add], file_collection[counter_add]], queue=False)
+            else:
+                button.click(lambda:[gr.update(visible=True),gr.update(visible=True), gr.update(visible=False), True], None, [row[counter_add], file_collection[counter_add], buttons_collection[counter_add-1], is_visible[counter_add]], queue=False)
+            counter_add += 1
+
+        counter_delete = 1
+        for delete_button in delete_collection:
+            if(counter_delete < len(delete_collection)+1):
+                delete_button.click(lambda:[gr.update(visible=False),gr.update(visible=False), gr.update(visible=True), False], None, [file_collection[counter_delete], row[counter_delete], buttons_collection[counter_delete-1], is_visible[counter_delete]], queue=False)
+            counter_delete += 1
+
 
     with gr.Accordion("Custom Settings", open=False):
         with gr.Row() as what_are_you_training: