Update app.py

app.py

@@ -1,5 +1,4 @@
 import os
-import json
 import logging
 from PIL import Image
 import gradio as gr
@@ -16,13 +15,17 @@ logger = logging.getLogger(__name__)
 # 캐시된 이미지 저장소
 IMAGE_CACHE = {}
 
-# CSS 및 아이콘 링크 (예시 탭 전용)
+# 커스텀 CSS 스타일 (원본과 완전 동일)
 custom_css = """
 :root {
+    --primary-color: #FB7F0D;
+    --secondary-color: #ff9a8b;
+    --accent-color: #FF6B6B;
     --background-color: #FFFFFF;
+    --card-bg: #ffffff;
     --text-color: #334155;
     --border-radius: 18px;
-    --shadow: 0 8px 30px rgba(0,0,0,0.08);
+    --shadow: 0 8px 30px rgba(251, 127, 13, 0.08);
 }
 
 .example-gallery {
@@ -31,30 +34,75 @@ custom_css = """
     gap: 20px;
     padding: 20px;
 }
+.example-item {
+    cursor: pointer;
+    border: 1px solid rgba(0, 0, 0, 0.1);
+    border-radius: var(--border-radius);
+    overflow: hidden;
+    transition: all 0.3s ease;
+    background: white;
+}
+.example-item:hover {
+    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
+    transform: translateY(-2px);
+}
 .example-item img {
     width: 100%;
     height: 120px;
     object-fit: cover;
-    border-radius: var(--border-radius);
 }
 
 .image-container {
     border-radius: var(--border-radius);
     overflow: hidden;
+    border: 1px solid rgba(0, 0, 0, 0.08);
+    transition: all 0.3s ease;
     background-color: white;
-    transition: box-shadow 0.3s;
+    aspect-ratio: 1 / 1;
 }
 .image-container:hover {
     box-shadow: var(--shadow);
 }
+.image-container img {
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+}
+
+.section-title {
+    display: flex;
+    align-items: center;
+    font-size: 20px;
+    font-weight: 700;
+    color: #333333;
+    margin-bottom: 10px;
+    padding-bottom: 5px;
+    border-bottom: 2px solid #FB7F0D;
+    font-family: 'Pretendard', 'Noto Sans KR', -apple-system, BlinkMacSystemFont, sans-serif;
+}
+.section-title img {
+    margin-right: 10px;
+    width: 24px;
+    height: 24px;
+}
 
-.footer { visibility: hidden; }
+body {
+    font-family: 'Pretendard', 'Noto Sans KR', -apple-system, BlinkMacSystemFont, sans-serif;
+    background-color: var(--background-color);
+    color: var(--text-color);
+    line-height: 1.6;
+    margin: 0;
+    padding: 0;
+}
+footer { visibility: hidden; }
 """
+
+# FontAwesome 링크
 fontawesome_link = """
 <link rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css\" crossorigin=\"anonymous\" referrerpolicy=\"no-referrer\" />
 """
 
-# 예시 이미지 캐싱 및 로드
+# 예시 이미지 캐싱 및 로드 함수
 
 def load_image_cached(path):
     if path not in IMAGE_CACHE:
@@ -94,43 +142,51 @@ def create_app():
         font=[gr.themes.GoogleFont("Noto Sans KR"), "ui-sans-serif", "system-ui"]
     )) as demo:
         gr.HTML(fontawesome_link)
-        with gr.Tabs():
-            with gr.TabItem("예시 결과 보기"):
-                # 메인 뷰 컴포넌트 먼저 정의
-                with gr.Row():
-                    example_input_image = gr.Image(label="입력 이미지", elem_classes="image-container")
-                    with gr.Column():
-                        example_bg_type = gr.Textbox(label="배경 유형", interactive=False)
-                        example_bg_option = gr.Textbox(label="배경 선택", interactive=False)
-                        example_product_name = gr.Textbox(label="상품명", interactive=False)
-                        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 custom-frame"):
+            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():
-                    gr.HTML('<div class="section-title"><img src="https://cdn-icons-png.flaticon.com/512/681/681443.png"> 상품 배경 이미지 예시 갤러리</div>')
-                    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])
-
-                # 첫 번째 예시 ��동 로드
-                demo.load(fn=load_first_example,
-                          outputs=[example_input_image,
-                                   example_bg_type,
-                                   example_bg_option,
-                                   example_product_name,
-                                   example_additional_info,
-                                   example_output_image])
+                    example_bg_type = gr.Textbox(label="배경 유형", interactive=False)
+                    example_bg_option = gr.Textbox(label="배경 선택", interactive=False)
+                    example_product_name = gr.Textbox(label="상품명", interactive=False)
+                    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
+                        ]
+                    )
+
+        # 첫 번째 예시 자동 로드
+        demo.load(
+            fn=load_first_example,
+            outputs=[
+                example_input_image,
+                example_bg_type,
+                example_bg_option,
+                example_product_name,
+                example_additional_info,
+                example_output_image
+            ]
+        )
     return demo
 
 if __name__ == "__main__":
     preload_example_images()
     app = create_app()
-    app.launch(share=False, inbrowser=True)
+    app.launch(share=False, inbrowser=True, width="100%")