Refactor UI in app.py to enhance layout and styling of sections, improving organization and accessibility. Adjust padding and margins for better visual consistency, and update accordion titles for clarity on prefix/suffix functionality in image uploads.

app.py

@@ -664,25 +664,32 @@ def run_training(
 def build_ui() -> gr.Blocks:
     css = """
     .pad-section {
-      padding: 12px;
+      padding: 6px;
+      margin-bottom: 12px;
+      border: 1px solid var(--color-border, #e5e7eb);
+      border-radius: 8px;
+      background: var(--color-background-secondary, #ffffff);
+    }
+    .pad-section_0 {
+      padding: 6px;
       margin-bottom: 12px;
       border: 1px solid var(--color-border, #e5e7eb);
       border-radius: 8px;
       background: var(--color-background-secondary, #fafafa);
     }
+    .pad-section_1 {
+      padding: 6px;
+      margin-bottom: 12px;
+      border: 1px solid var(--color-border, #e5e7eb);
+      border-radius: 8px;
+      background: var(--color-background-secondary, #eaeaea);
+    }
     """
     with gr.Blocks(title="Qwen-Image-Edit: Trainer", css=css) as demo:
         gr.Markdown("""
         # Qwen-Image-Edit Trainer
-        このページでは、学習に使う画像をアップロードし、必要ならファイル名の前後にある共通の文字（prefix/suffix）を指定して、
+        学習に使う画像をアップロードし、必要ならファイル名の前後にある共通の文字（prefix/suffix）を指定して、
         自動でデータセットを作成し学習を開始します。難しい操作は不要です。
-
-        画像と名前の対応づけ
-        - prefix/suffix: ファイルの同名判定のため、画像のファイル名から共通の先頭/末尾文字を取り除く指定（例: IMG_ や _v2）
-        - まずターゲット画像のファイル名（拡張子なし）から、指定した Target prefix/suffix を取り除いたものを key とします。
-        - 各コントロールは「付加」規則で、期待名 = control_prefix_i + key + control_suffix_i + ".png" を探して対応付けます。
-        - アップロード時に画像は自動で .png に変換して保存します（元のファイル名のベースは維持）。
-        - Control 0 は必須、Control 1〜7 は任意。コントロール画像が1枚だけのときは、すべてのターゲット画像に適用します。
         """)
 
         with gr.Accordion("Settings", elem_classes=["pad-section"]):
@@ -698,7 +705,16 @@ def build_ui() -> gr.Blocks:
                     max_epochs = gr.Number(label="Max epochs", value=100, precision=0)
                     save_every = gr.Number(label="Save every N epochs", value=10, precision=0)
 
-        with gr.Accordion("Target Image", elem_classes=["pad-section"]):
+        with gr.Accordion("prefix/sufixについて", open=False):
+            gr.Markdown("""
+            ファイルの同名判定のため、画像のファイル名から共通の先頭/末尾文字を取り除く指定（例: IMG_ や _v2）
+            - まずターゲット画像のファイル名（拡張子なし）から、指定した Target prefix/suffix を取り除いたものを key とします。
+            - 各コントロールは「付加」規則で、期待名 = control_prefix_i + key + control_suffix_i + ".png" を探して対応付けます。
+            - アップロード時に画像は自動で .png に変換して保存します（元のファイル名のベースは維持）。
+            - Control 0 は必須、Control 1〜7 は任意。コントロール画像が1枚だけのときは、すべてのターゲット画像に適用します。
+            """)
+
+        with gr.Accordion("Target Image", elem_classes=["pad-section_0"]):
             with gr.Group():
                 with gr.Column():
                     with gr.Row():
@@ -709,7 +725,7 @@ def build_ui() -> gr.Blocks:
                         main_gallery = gr.Gallery(label="Target preview", columns=4, height=220, object_fit='contain', preview=True)
 
             # control_0 is required and shown outside the accordion
-        with gr.Accordion("Control 0", elem_classes=["pad-section"]):
+        with gr.Accordion("Control 0", elem_classes=["pad-section_1"]):
             with gr.Group():
                 with gr.Column():
                     with gr.Row():
@@ -720,7 +736,7 @@ def build_ui() -> gr.Blocks:
                         ctrl0_gallery = gr.Gallery(label="control_0 preview", columns=4, height=220, object_fit='contain', preview=True)
 
             # Optional controls start from 1, accordion closed by default
-        with gr.Accordion("Control 1", open=False, elem_classes=["pad-section"]):
+        with gr.Accordion("Control 1", open=False, elem_classes=["pad-section_0"]):
             with gr.Group():
                 with gr.Column():
                     with gr.Row():
@@ -729,7 +745,7 @@ def build_ui() -> gr.Blocks:
                     with gr.Row():
                         ctrl1_files = gr.File(label="Upload control_1 images", file_count="multiple", type="filepath", height=220)
                         ctrl1_gallery = gr.Gallery(label="control_1 preview", columns=4, height=220, object_fit='contain', preview=True)
-        with gr.Accordion("Control 2", open=False, elem_classes=["pad-section"]):
+        with gr.Accordion("Control 2", open=False, elem_classes=["pad-section_1"]):
             with gr.Group():
                 with gr.Column():
                     with gr.Row():
@@ -738,7 +754,7 @@ def build_ui() -> gr.Blocks:
                     with gr.Row():
                         ctrl2_files = gr.File(label="Upload control_2 images", file_count="multiple", type="filepath", height=220)
                         ctrl2_gallery = gr.Gallery(label="control_2 preview", columns=4, height=220, object_fit='contain', preview=True)
-        with gr.Accordion("Control 3", open=False, elem_classes=["pad-section"]):
+        with gr.Accordion("Control 3", open=False, elem_classes=["pad-section_0"]):
             with gr.Group():
                 with gr.Column():
                     with gr.Row():
@@ -747,7 +763,7 @@ def build_ui() -> gr.Blocks:
                     with gr.Row():
                         ctrl3_files = gr.File(label="Upload control_3 images", file_count="multiple", type="filepath", height=220)
                         ctrl3_gallery = gr.Gallery(label="control_3 preview", columns=4, height=220, object_fit='contain', preview=True)
-        with gr.Accordion("Control 4", open=False, elem_classes=["pad-section"]):
+        with gr.Accordion("Control 4", open=False, elem_classes=["pad-section_1"]):
             with gr.Group():
                 with gr.Column():
                     with gr.Row():
@@ -756,7 +772,7 @@ def build_ui() -> gr.Blocks:
                     with gr.Row():
                         ctrl4_files = gr.File(label="Upload control_4 images", file_count="multiple", type="filepath", height=220)
                         ctrl4_gallery = gr.Gallery(label="control_4 preview", columns=4, height=220, object_fit='contain', preview=True)
-        with gr.Accordion("Control 5", open=False, elem_classes=["pad-section"]):
+        with gr.Accordion("Control 5", open=False, elem_classes=["pad-section_0"]):
             with gr.Group():
                 with gr.Column():
                     with gr.Row():
@@ -765,7 +781,7 @@ def build_ui() -> gr.Blocks:
                     with gr.Row():
                         ctrl5_files = gr.File(label="Upload control_5 images", file_count="multiple", type="filepath", height=220)
                         ctrl5_gallery = gr.Gallery(label="control_5 preview", columns=4, height=220, object_fit='contain', preview=True)
-        with gr.Accordion("Control 6", open=False, elem_classes=["pad-section"]):
+        with gr.Accordion("Control 6", open=False, elem_classes=["pad-section_1"]):
             with gr.Group():
                 with gr.Column():
                     with gr.Row():
@@ -774,7 +790,7 @@ def build_ui() -> gr.Blocks:
                     with gr.Row():
                         ctrl6_files = gr.File(label="Upload control_6 images", file_count="multiple", type="filepath", height=220)
                         ctrl6_gallery = gr.Gallery(label="control_6 preview", columns=4, height=220, object_fit='contain', preview=True)
-        with gr.Accordion("Control 7", open=False, elem_classes=["pad-section"]):
+        with gr.Accordion("Control 7", open=False, elem_classes=["pad-section_0"]):
             with gr.Group():
                 with gr.Column():
                     with gr.Row():