Update app.py

app.py

@@ -142,9 +142,9 @@ def create_app():
         font=[gr.themes.GoogleFont("Noto Sans KR"), "ui-sans-serif", "system-ui"]
     )) as demo:
         gr.HTML(fontawesome_link)
-        # 메인 뷰
+        # 메인 뷰: 첫 번째 예시
         with gr.Column(elem_classes="custom-section-group custom-frame"):
-            gr.HTML('<div class="section-title"><img src="https://cdn-icons-png.flaticon.com/512/681/681443.png"> 상품 배경 이미지 예시 갤러리</div>')
+            gr.HTML('<div class="section-title"><img src="https://cdn-icons-png.flaticon.com/512/681/681443.png"> 배경 유형별 예시</div>')
             with gr.Row():
                 example_input_image = gr.Image(label="입력 이미지", elem_classes="image-container")
                 with gr.Column():
@@ -154,23 +154,32 @@ def create_app():
                     example_additional_info = gr.Textbox(label="추가 요청사항", interactive=False)
                 example_output_image = gr.Image(label="결과 이미지", elem_classes="image-container")
 
-        # 갤러리 뷰
+        # 배경 유형별 갤러리 뷰
         with gr.Column(elem_classes="custom-section-group"):
-            with gr.Row(elem_classes="example-gallery"):
-                for idx, ex in enumerate(product_background_examples):
-                    item = gr.Image(value=ex[5], show_label=False, elem_classes="example-item")
-                    item.select(
-                        fn=load_example,
-                        inputs=None,
-                        outputs=[
-                            example_input_image,
-                            example_bg_type,
-                            example_bg_option,
-                            example_product_name,
-                            example_additional_info,
-                            example_output_image
-                        ]
-                    )
+            # 유형별 그룹핑
+            bg_groups = {}
+            for idx, ex in enumerate(product_background_examples):
+                bg_groups.setdefault(ex[1], []).append((idx, ex))
+            for bg_type, items in bg_groups.items():
+                # 그룹 헤더
+                gr.HTML(f'<div class="section-title">{bg_type}</div>')
+                # 그룹 아이템
+                with gr.Row(elem_classes="example-gallery"):
+                    for idx, ex in items:
+                        item = gr.Image(value=ex[5], show_label=False, elem_classes="example-item")
+                        item.select(
+                            fn=load_example,
+                            inputs=None,
+                            outputs=[
+                                example_input_image,
+                                example_bg_type,
+                                example_bg_option,
+                                example_product_name,
+                                example_additional_info,
+                                example_output_image
+                            ],
+                            _js=None
+                        )
 
         # 첫 번째 예시 자동 로드
         demo.load(