Update app.py

app.py

@@ -1,223 +1,181 @@
-import os
-import logging
-from PIL import Image
-import gradio as gr
-from dotenv import load_dotenv
-from db_examples import product_background_examples
-
-# 환경 변수 로드
-load_dotenv()
-
-# 로깅 설정
-logging.basicConfig(level=logging.INFO, format='%(asctime)s - %(levelname)s - %(message)s')
-logger = logging.getLogger(__name__)
-
-# 이미지 캐시
-IMAGE_CACHE = {}
-
-# 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(251, 127, 13, 0.08);
-}
-
-.example-gallery {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
-    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: 80%;
-    height: 80px;
-    object-fit: cover;
-}
-
-.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;
-    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;
-}
-
-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; }
-.gradio-container {
-    padding-bottom: 0 !important;
-    margin-bottom: 0 !important;
-}
-.gr-block, .gr-row, .gr-column {
-    margin: 0 !important;
-    padding: 0 !important;
-}
-html, body, .gradio-container, .gr-block, .gr-row, .gr-column {
-    height: auto !important;
-}
-"""
-
-# 아이콘 링크
-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:
+global SPECIAL_BACKGROUNDS
+    
+    logger.info(f"Backgrounds 디렉토리 경로: {BACKGROUNDS_DIR}")
+    logger.info(f"디렉토리 내 파일 목록: {os.listdir(BACKGROUNDS_DIR)}")
+    
+    SIMPLE_BACKGROUNDS = load_background_json("simple_backgrounds.json")
+    STUDIO_BACKGROUNDS = load_background_json("studio_backgrounds.json")
+    NATURE_BACKGROUNDS = load_background_json("nature_backgrounds.json")
+    INDOOR_BACKGROUNDS = load_background_json("indoor_backgrounds.json")
+    SPECIAL_BACKGROUNDS = load_background_json("special_backgrounds.json")
+    
+    # 기본값 설정 (파일이 없거나 비어있는 경우)
+    if not SIMPLE_BACKGROUNDS:
+        SIMPLE_BACKGROUNDS = {"클래식 화이트": "clean white background with soft even lighting"}
+    if not STUDIO_BACKGROUNDS:
+        STUDIO_BACKGROUNDS = {"미니멀 플랫레이": "minimalist flat lay with clean white background"}
+    if not NATURE_BACKGROUNDS:
+        NATURE_BACKGROUNDS = {"열대 해변": "tropical beach with crystal clear water"}
+    if not INDOOR_BACKGROUNDS:
+        INDOOR_BACKGROUNDS = {"미니멀 스칸디나비안 거실": "minimalist Scandinavian living room"}
+    if not SPECIAL_BACKGROUNDS:
+        SPECIAL_BACKGROUNDS = {"네온 라이트": "neon light background with vibrant glowing elements"}
+    
+    logger.info("모든 배경 옵션 초기화 완료")
+
+# ------------------- 예시 탭을 위한 함수 -------------------
+def load_image_cached(image_path):
+    """이미지를 캐시하여 로드하는 함수"""
+    global IMAGE_CACHE
+    if image_path not in IMAGE_CACHE:
         try:
-            img = Image.open(path)
-            # 최대 크기 1000px로 축소
-            max_dim = max(img.size)
-            if max_dim > 1000:
-                ratio = 1000 / max_dim
-                img = img.resize((int(img.width*ratio), int(img.height*ratio)), Image.Resampling.LANCZOS)
-            IMAGE_CACHE[path] = img
+            img = Image.open(image_path)
+            # 큰 이미지는 미리 리사이즈하여 캐시
+            if max(img.size) > 1000:
+                ratio = 1000 / max(img.size)
+                new_size = (int(img.size[0] * ratio), int(img.size[1] * ratio))
+                img = img.resize(new_size, Image.Resampling.LANCZOS)
+            IMAGE_CACHE[image_path] = img
         except Exception as e:
-            logger.error(f"이미지 로드 실패: {path} - {e}")
+            logger.error(f"이미지 로드 실패: {image_path}, 에러: {e}")
             return None
-    return IMAGE_CACHE[path]
-
-# 예시 미리 로드
+    return IMAGE_CACHE[image_path]
 
 def preload_example_images():
-    for ex in product_background_examples:
-        load_image_cached(ex[0])
-        load_image_cached(ex[5])
-
-# 예시 선택 핸들러
-
-def load_example(evt: gr.SelectData):
-    ex = product_background_examples[evt.index]
-    return ex[0], ex[1], ex[2], ex[3], ex[4] or "(없음)", ex[5]
-
-# 첫 번째 예시 자동 로드
-
-def load_first_example():
-    if product_background_examples:
-        ex = product_background_examples[0]
-        return ex[0], ex[1], ex[2], ex[3], ex[4] or "(없음)", ex[5]
-    return None, "", "", "", "", None
-
-# Gradio 앱 생성
+    """예시 이미지들을 미리 로드하는 함수"""
+    for example in product_background_examples:
+        load_image_cached(example[0])  # 입력 이미지
+        load_image_cached(example[5])  # 결과 이미지
 
 def create_app():
     with gr.Blocks(css=custom_css, theme=gr.themes.Default(
-        primary_hue="orange", secondary_hue="orange",
+        primary_hue="orange",
+        secondary_hue="orange",
         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>')
+        
+        # 상품 배경 이미지 예시 갤러리 섹션
+        with gr.Column(elem_classes="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="입력 이미지",
+                    label="입력 이미지", 
+                    height=400,
+                    width=400,
                     elem_classes="image-container",
-                    interactive=False,
-                    show_download_button=False,
-                    show_share_button=False,
-                    container=False
+                    show_label=True,
+                    show_download_button=True,
+                    container=True,
+                    scale=1
                 )
-                with gr.Column():
+                with gr.Column(elem_classes="example-params"):
                     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="결과 이미지",
+                    label="결과 이미지", 
+                    height=400,
+                    width=400,
                     elem_classes="image-container",
-                    interactive=False,
-                    show_download_button=False,
-                    show_share_button=False,
-                    container=False
+                    show_label=True,
+                    show_download_button=True,
+                    container=True,
+                    scale=1
                 )
-
-        # 갤러리 뷰: 유형별 그룹화
-        with gr.Column(elem_classes="custom-section-group"):
-            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",
-                            interactive=False,
-                            show_download_button=False,
-                            show_share_button=False,
-                            container=False
-                        )
-                        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
-                            ]
-                        )
-
-        # 첫 번째 예시 자동 로드
+        
+        # 배경 유형별 갤러리 섹션
+        with gr.Column(elem_classes="custom-frame"):
+            gr.HTML('<div class="section-title"><img src="https://cdn-icons-png.flaticon.com/512/3068/3068327.png"> 배경 유형별 예시</div>')
+            
+            # 예시들을 배경 유형별로 그룹화
+            examples_by_type = {}
+            for example in product_background_examples:
+                bg_type = example[1]  # 배경 유형
+                if bg_type not in examples_by_type:
+                    examples_by_type[bg_type] = []
+                examples_by_type[bg_type].append(example)
+            
+            # 배경 유형별 갤러리 섹션 생성
+            for bg_type, examples in examples_by_type.items():
+                gr.Markdown(f"### {bg_type}")
+                # 10개씩 한 줄로 표시
+                for i in range(0, len(examples), 10):
+                    with gr.Row():
+                        for j in range(10):
+                            if i + j < len(examples):
+                                example = examples[i + j]
+                                with gr.Column(scale=1, min_width=100):
+                                    # 결과 이미지만 표시
+                                    display_img = gr.Image(
+                                        value=example[5], 
+                                        label=None,  # 레이블 제거
+                                        elem_classes="example-item",
+                                        height=120,  # 크기 축소
+                                        width=120,   # 크기 축소
+                                        show_label=False,  # 레이블 숨기기
+                                        show_download_button=False,  # 다운로드 버튼 숨기기
+                                        show_share_button=False,  # 공유 버튼 숨기기
+                                        container=False  # 컨테이너 테두리 제거
+                                    )
+                                    
+                                    def make_example_handler(ex):
+                                        def handler():
+                                            # 로딩 상태 표시를 위한 중간 업데이트
+                                            yield (
+                                                gr.update(value=None),  # 임시로 이미지 비우기
+                                                gr.update(value="로딩 중..."),
+                                                gr.update(value="로딩 중..."),
+                                                gr.update(value="로딩 중..."),
+                                                gr.update(value="로딩 중..."),
+                                                gr.update(value=None)
+                                            )
+                                            
+                                            # 실제 데이터 로드
+                                            yield (
+                                                ex[0],  # 입력 이미지
+                                                ex[1],  # 배경 유형
+                                                ex[2],  # 배경 선택
+                                                ex[3],  # 상품명
+                                                ex[4] if ex[4] else "(없음)",  # 추가 요청사항
+                                                ex[5]   # 결과 이미지
+                                            )
+                                        return handler
+                                    
+                                    display_img.select(
+                                        fn=make_example_handler(example),
+                                        outputs=[
+                                            example_input_image,
+                                            example_bg_type,
+                                            example_bg_option,
+                                            example_product_name,
+                                            example_additional_info,
+                                            example_output_image
+                                        ],
+                                        queue=True  # 요청을 큐에 넣어 순차적으로 처리
+                                    )
+                            else:
+                                # 빈 공간 유지
+                                with gr.Column(scale=1, min_width=100):
+                                    pass
+        
+        # 페이지 로드 시 첫 번째 예시 자동 표시
+        def load_first_example():
+            if product_background_examples:
+                first_example = product_background_examples[0]
+                return (
+                    first_example[0],  # 입력 이미지
+                    first_example[1],  # 배경 유형
+                    first_example[2],  # 배경 선택
+                    first_example[3],  # 상품명
+                    first_example[4] if first_example[4] else "(없음)",  # 추가 요청사항
+                    first_example[5]   # 결과 이미지
+                )
+            return None, "", "", "", "", None
+        
         demo.load(
             fn=load_first_example,
             outputs=[
@@ -229,9 +187,12 @@ def create_app():
                 example_output_image
             ]
         )
+    
     return demo
 
 if __name__ == "__main__":
-    preload_example_images()
+    initialize_backgrounds()
+    preload_example_images()  # 예시 이미지 미리 로드
     app = create_app()
-    app.launch(share=False, inbrowser=True, width="100%")
+    app.queue(max_size=10)  # 요청을 순차적으로 처리하도록 큐 설정
+    app.launch(share=False, inbrowser=True, width="100%")