app.py

import gradio as gr
import os
import tempfile
from datetime import datetime
from PIL import Image

# 환경변수에서 API 엔드포인트 가져오기 (코드에서는 절대 노출 안됨)
API_ENDPOINT = os.getenv('API_ENDPOINT')

if not API_ENDPOINT:
    print("❌ API_ENDPOINT 환경변수가 설정되지 않았습니다.")
    exit(1)

# 로그 억제된 클라이언트 임포트
try:
    from gradio_client import Client, handle_file
    print("✅ Gradio Client 임포트 성공")
except ImportError as e:
    print(f"❌ Gradio Client 임포트 오류: {e}")
    exit(1)

# 커스텀 CSS 스타일 (기존과 동일)
custom_css = """
/* ============================================
   다크모드 자동 변경 템플릿 CSS
   ============================================ */

/* 1. CSS 변수 정의 (라이트모드 - 기본값) */
:root {
    /* 메인 컬러 */
    --primary-color: #FB7F0D;
    --secondary-color: #ff9a8b;
    --accent-color: #FF6B6B;
    
    /* 배경 컬러 */
    --background-color: #FFFFFF;
    --card-bg: #ffffff;
    --input-bg: #ffffff;
    
    /* 텍스트 컬러 */
    --text-color: #334155;
    --text-secondary: #64748b;
    
    /* 보더 및 구분선 */
    --border-color: #dddddd;
    --border-light: #e5e5e5;
    
    /* 테이블 컬러 */
    --table-even-bg: #f3f3f3;
    --table-hover-bg: #f0f0f0;
    
    /* 그림자 */
    --shadow: 0 8px 30px rgba(251, 127, 13, 0.08);
    --shadow-light: 0 2px 4px rgba(0, 0, 0, 0.1);
    
    /* 기타 */
    --border-radius: 18px;
}

/* 2. 다크모드 색상 변수 (자동 감지) */
@media (prefers-color-scheme: dark) {
    :root {
        /* 배경 컬러 */
        --background-color: #1a1a1a;
        --card-bg: #2d2d2d;
        --input-bg: #2d2d2d;
        
        /* 텍스트 컬러 */
        --text-color: #e5e5e5;
        --text-secondary: #a1a1aa;
        
        /* 보더 및 구분선 */
        --border-color: #404040;
        --border-light: #525252;
        
        /* 테이블 컬러 */
        --table-even-bg: #333333;
        --table-hover-bg: #404040;
        
        /* 그림자 */
        --shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
        --shadow-light: 0 2px 4px rgba(0, 0, 0, 0.2);
    }
}

/* 3. 수동 다크모드 클래스 (Gradio 토글용) */
[data-theme="dark"], 
.dark,
.gr-theme-dark {
    /* 배경 컬러 */
    --background-color: #1a1a1a;
    --card-bg: #2d2d2d;
    --input-bg: #2d2d2d;
    
    /* 텍스트 컬러 */
    --text-color: #e5e5e5;
    --text-secondary: #a1a1aa;
    
    /* 보더 및 구분선 */
    --border-color: #404040;
    --border-light: #525252;
    
    /* 테이블 컬러 */
    --table-even-bg: #333333;
    --table-hover-bg: #404040;
    
    /* 그림자 */
    --shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
    --shadow-light: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* 4. 기본 요소 다크모드 적용 */
body {
    font-family: 'Pretendard', 'Noto Sans KR', -apple-system, BlinkMacSystemFont, sans-serif;
    background-color: var(--background-color) !important;
    color: var(--text-color) !important;
    line-height: 1.6;
    margin: 0;
    padding: 0;
    font-size: 16px;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* 5. Gradio 컨테이너 강제 적용 */
.gradio-container,
.gradio-container *,
.gr-app,
.gr-app *,
.gr-interface {
    background-color: var(--background-color) !important;
    color: var(--text-color) !important;
}

/* 푸터 숨김 설정 추가 */
footer {
    visibility: hidden;
}

.gradio-container {
    width: 100%;
    margin: 0 auto;
    padding: 20px;
    background-color: var(--background-color);
}

/* ── 그룹 래퍼 배경 완전 제거 ── */
.custom-section-group,
.gr-block.gr-group {
    background-color: var(--background-color) !important;
    box-shadow: none !important;
}
.custom-section-group::before,
.custom-section-group::after,
.gr-block.gr-group::before,
.gr-block.gr-group::after {
    display: none !important;
    content: none !important;
}

/* 그룹 컨테이너 배경을 아이보리로, 그림자 제거 */
.custom-section-group {
    background-color: var(--background-color) !important;
    box-shadow: none !important;
}

/* 6. 카드 및 패널 스타일 */
.custom-frame,
.gr-form,
.gr-box,
.gr-panel,
[class*="frame"],
[class*="card"],
[class*="panel"] {
    background-color: var(--card-bg) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: var(--border-radius);
    padding: 20px;
    margin: 10px 0;
    box-shadow: var(--shadow) !important;
    color: var(--text-color) !important;
}

/* 섹션 그룹 스타일 - 회색 배경 완전 제거 */
.custom-section-group {
    margin-top: 20px;
    padding: 0;
    border: none;
    border-radius: 0;
    background-color: var(--background-color);
    box-shadow: none !important;
}

/* 버튼 스타일 - 글자 크기 18px */
.custom-button {
    border-radius: 30px !important;
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)) !important;
    color: white !important;
    font-size: 18px !important;
    padding: 10px 20px !important;
    border: none;
    box-shadow: 0 4px 8px rgba(251, 127, 13, 0.25);
    transition: transform 0.3s ease;
}
.custom-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(251, 127, 13, 0.3);
}

/* 제목 스타일 (모든 항목명이 동일하게 custom-title 클래스로) */
.custom-title {
    font-size: 28px;
    font-weight: bold;
    margin-bottom: 10px;
    color: var(--text-color);
    border-bottom: 2px solid var(--primary-color);
    padding-bottom: 5px;
}

/* 이미지 컨테이너 - 크기 고정 */
.image-container {
    border-radius: var(--border-radius);
    overflow: hidden;
    border: 2px dashed var(--border-color);
    transition: all 0.3s ease;
    background-color: var(--card-bg);
}

/* 이미지 업로드 영역 개선 */
.gradio-container .gr-image {
    border: 2px dashed var(--border-color) !important;
    border-radius: var(--border-radius) !important;
    background-color: var(--card-bg) !important;
    transition: all 0.3s ease !important;
}

.gradio-container .gr-image:hover {
    border-color: var(--primary-color) !important;
    box-shadow: 0 4px 12px rgba(251, 127, 13, 0.15) !important;
}

/* 업로드 영역 내부 텍스트 */
.gradio-container .gr-image .upload-container,
.gradio-container .gr-image [data-testid="upload-container"] {
    background-color: var(--card-bg) !important;
    color: var(--text-color) !important;
    border: none !important;
}

/* 업로드 영역 드래그 안내 텍스트 */
.gradio-container .gr-image .upload-container p,
.gradio-container .gr-image [data-testid="upload-container"] p {
    color: var(--text-color) !important;
    font-size: 14px !important;
}

/* 업로드 버튼 스타일 개선 */
.gradio-container .gr-image .upload-container button,
.gradio-container .gr-image [data-testid="upload-container"] button {
    background-color: var(--primary-color) !important;
    color: white !important;
    border: none !important;
    padding: 8px 16px !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
}

.gradio-container .gr-image .upload-container button:hover,
.gradio-container .gr-image [data-testid="upload-container"] button:hover {
    background-color: var(--secondary-color) !important;
    transform: translateY(-1px) !important;
}

/* 업로드 영역 아이콘 */
.gradio-container .gr-image .upload-container svg,
.gradio-container .gr-image [data-testid="upload-container"] svg {
    color: var(--primary-color) !important;
    width: 32px !important;
    height: 32px !important;
}

/* 이미지가 업로드된 후 표시 영역 */
.gradio-container .gr-image img {
    background-color: var(--card-bg) !important;
    border-radius: var(--border-radius) !important;
}

/* 이미지 제거 버튼 */
.gradio-container .gr-image .image-container button,
.gradio-container .gr-image [data-testid="image"] button {
    background-color: rgba(255, 255, 255, 0.9) !important;
    color: #333 !important;
    border: none !important;
    border-radius: 50% !important;
    width: 28px !important;
    height: 28px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
}

.gradio-container .gr-image .image-container button:hover,
.gradio-container .gr-image [data-testid="image"] button:hover {
    background-color: rgba(255, 255, 255, 1) !important;
    transform: scale(1.1) !important;
}

/* 업로드 이미지 컨테이너 (600x600) */
.upload-image-container {
    width: 600px !important;
    height: 600px !important;
    min-width: 600px !important;
    min-height: 600px !important;
    max-width: 600px !important;
    max-height: 600px !important;
}

/* 출력 이미지 컨테이너 (700x600) */
.output-image-container {
    width: 700px !important;
    height: 600px !important;
    min-width: 700px !important;
    min-height: 600px !important;
    max-width: 700px !important;
    max-height: 600px !important;
}

.image-container:hover {
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.image-container img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
}

/* Gradio 업로드 이미지 컴포넌트 크기 고정 (600x600) */
.gradio-container .gr-image.upload-image {
    width: 600px !important;
    height: 600px !important;
    min-width: 600px !important;
    min-height: 600px !important;
    max-width: 600px !important;
    max-height: 600px !important;
}

/* Gradio 출력 이미지 컴포넌트 크기 고정 (700x600) */
.gradio-container .gr-image.output-image {
    width: 700px !important;
    height: 600px !important;
    min-width: 700px !important;
    min-height: 600px !important;
    max-width: 700px !important;
    max-height: 600px !important;
}

/* 이미지 업로드 영역 크기 고정 */
.gradio-container .gr-image.upload-image > div {
    width: 600px !important;
    height: 600px !important;
    min-width: 600px !important;
    min-height: 600px !important;
    max-width: 600px !important;
    max-height: 600px !important;
}

/* 이미지 출력 영역 크기 고정 */
.gradio-container .gr-image.output-image > div {
    width: 700px !important;
    height: 600px !important;
    min-width: 700px !important;
    min-height: 600px !important;
    max-width: 700px !important;
    max-height: 600px !important;
}

/* 이미지 업로드 드래그 영역 크기 고정 */
.gradio-container .gr-image.upload-image .image-container,
.gradio-container .gr-image.upload-image [data-testid="image"],
.gradio-container .gr-image.upload-image .upload-container {
    width: 600px !important;
    height: 600px !important;
    min-width: 600px !important;
    min-height: 600px !important;
    max-width: 600px !important;
    max-height: 600px !important;
}

/* 이미지 출력 드래그 영역 크기 고정 */
.gradio-container .gr-image.output-image .image-container,
.gradio-container .gr-image.output-image [data-testid="image"],
.gradio-container .gr-image.output-image .upload-container {
    width: 700px !important;
    height: 600px !important;
    min-width: 700px !important;
    min-height: 600px !important;
    max-width: 700px !important;
    max-height: 600px !important;
}

/* 7. 입력 필드 스타일 */
.gr-input, .gr-text-input, .gr-sample-inputs,
input[type="text"],
input[type="number"],
input[type="email"],
input[type="password"],
textarea,
select,
.gr-textarea,
.gr-dropdown {
    border-radius: var(--border-radius) !important;
    border: 1px solid var(--border-color) !important;
    padding: 14px !important;
    font-size: 15px !important;
    background-color: var(--input-bg) !important;
    color: var(--text-color) !important;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05) !important;
    transition: all 0.3s ease !important;
}

.gr-input:focus, .gr-text-input:focus,
input[type="text"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
textarea:focus,
select:focus,
.gr-textarea:focus,
.gr-dropdown:focus {
    border-color: var(--primary-color) !important;
    outline: none !important;
    box-shadow: 0 0 0 2px rgba(251, 127, 13, 0.2) !important;
}

/* 8. 라벨 및 텍스트 요소 */
.gradio-container label,
label,
.gr-label,
.gr-checkbox label,
.gr-radio label,
p, span, div {
    color: var(--text-color) !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    margin-bottom: 8px !important;
}

/* 드롭다운 및 라디오 버튼 폰트 크기 */
.gr-radio label, .gr-dropdown label, .gr-checkbox label {
    font-size: 15px !important;
}

/* 라디오 버튼 선택지 볼드 처리 제거 */
.gr-radio .gr-radio-option label,
.gr-radio input[type="radio"] + label,
.gr-radio .gr-form label {
    font-weight: normal !important;
    font-size: 15px !important;
}

/* 라디오 버튼 그룹 내 모든 라벨 일반 폰트로 설정 */
.gr-radio fieldset label {
    font-weight: normal !important;
}

/* 마크다운 텍스트 크기 증가 */
.gradio-container .gr-markdown {
    font-size: 15px !important;
    line-height: 1.6 !important;
    color: var(--text-color) !important;
}

/* 텍스트박스 내용 폰트 크기 */
.gr-textbox textarea, .gr-textbox input {
    font-size: 15px !important;
    background-color: var(--input-bg) !important;
    color: var(--text-color) !important;
}

/* 아코디언 제목 폰트 크기 */
.gr-accordion summary {
    font-size: 17px !important;
    font-weight: 600 !important;
    background-color: var(--card-bg) !important;
    color: var(--text-color) !important;
}

/* 메인 컨텐츠 스크롤바 */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--card-bg);
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    background: var(--primary-color);
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--secondary-color);
}

/* 애니메이션 스타일 */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.fade-in {
    animation: fadeIn 0.5s ease-out;
}

/* 반응형 */
@media (max-width: 768px) {
    .button-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* 섹션 제목 스타일 */
.section-title {
    display: flex;
    align-items: center;
    font-size: 24px;
    font-weight: 700;
    color: var(--text-color);
    margin-bottom: 15px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--primary-color);
    font-family: 'Pretendard', 'Noto Sans KR', -apple-system, BlinkMacSystemFont, sans-serif;
}

.section-title img {
    margin-right: 12px;
    width: 28px;
    height: 28px;
    /* 다크모드에서 아이콘 필터 적용 */
    filter: brightness(0) saturate(100%) invert(27%) sepia(51%) saturate(2878%) hue-rotate(346deg) brightness(104%) contrast(97%);
}

/* 라이트모드에서는 원래 아이콘 색상 유지 */
@media (prefers-color-scheme: light) {
    .section-title img {
        filter: none;
    }
}

/* 수동 다크모드 클래스에서도 아이콘 색상 적용 */
[data-theme="dark"] .section-title img, 
.dark .section-title img,
.gr-theme-dark .section-title img {
    filter: brightness(0) saturate(100%) invert(27%) sepia(51%) saturate(2878%) hue-rotate(346deg) brightness(104%) contrast(97%);
}

/* 10. 아코디언 및 드롭다운 - 수동설정 영역 회색 배경 제거 */
details,
.gr-accordion,
.gr-accordion details {
    background-color: var(--background-color) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-color) !important;
    border-radius: var(--border-radius) !important;
    margin: 10px 0 !important;
}

details summary,
.gr-accordion summary,
.gr-accordion details summary {
    background-color: var(--card-bg) !important;
    color: var(--text-color) !important;
    padding: 12px 16px !important;
    border-radius: var(--border-radius) !important;
    cursor: pointer !important;
    border: none !important;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
}

details summary:hover,
.gr-accordion summary:hover,
.gr-accordion details summary:hover {
    background-color: var(--table-hover-bg) !important;
}

/* 아코디언 내부 콘텐츠 */
details[open],
.gr-accordion[open],
.gr-accordion details[open] {
    background-color: var(--background-color) !important;
}

details[open] > *:not(summary),
.gr-accordion[open] > *:not(summary),
.gr-accordion details[open] > *:not(summary) {
    background-color: var(--background-color) !important;
    color: var(--text-color) !important;
    padding: 16px !important;
    border-top: 1px solid var(--border-color) !important;
}

/* 그룹 내부 스타일 - 수동설정 내부 그룹들 */
.gr-group,
details .gr-group,
.gr-accordion .gr-group {
    background-color: var(--background-color) !important;
    border: none !important;
    padding: 12px 0 !important;
    margin: 8px 0 !important;
    border-radius: var(--border-radius) !important;
}

/* 그룹 내부 제목 */
.gr-group .gr-markdown h3,
.gr-group h3 {
    color: var(--text-color) !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    margin-bottom: 12px !important;
    padding-bottom: 6px !important;
    border-bottom: 1px solid var(--border-color) !important;
}

/* 11. 추가 Gradio 컴포넌트들 */
.gr-block,
.gr-group,
.gr-row,
.gr-column {
    background-color: var(--background-color) !important;
    color: var(--text-color) !important;
}

/* 12. 버튼은 기존 스타일 유지 (primary-color 사용) */
button:not([class*="custom"]):not([class*="primary"]):not([class*="secondary"]) {
    background-color: var(--card-bg) !important;
    color: var(--text-color) !important;
    border-color: var(--border-color) !important;
}

/* 13. 코드 블록 및 pre 태그 */
code,
pre,
.code-block {
    background-color: var(--table-even-bg) !important;
    color: var(--text-color) !important;
    border-color: var(--border-color) !important;
}

/* 14. 전환 애니메이션 */
* {
    transition: background-color 0.3s ease, 
                color 0.3s ease, 
                border-color 0.3s ease !important;
}
"""

# 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 create_download_filename(keyword):
    """한국시간 기준으로 다운로드 파일명 생성"""
    from datetime import datetime, timezone, timedelta
    
    # 한국 시간대 설정 (UTC+9)
    kst = timezone(timedelta(hours=9))
    now = datetime.now(kst)
    
    # 파일명에 사용할 수 없는 문자 제거
    import re
    safe_keyword = re.sub(r'[<>:"/\\|?*]', '_', keyword) if keyword else "상품"
    safe_keyword = safe_keyword[:30]  # 길이 제한 30자로 변경
    
    # YYMMDD_시간분 형식
    time_str = now.strftime("%y%m%d_%H%M")
    filename = f"{safe_keyword}_{time_str}.jpg"
    
    return filename

def prepare_download_file(image, keyword):
    """다운로드용 임시 파일 생성 (올바른 파일명 포함)"""
    if image is None:
        return None
    
    try:
        # 한국시간 기준 파일명 생성
        filename = create_download_filename(keyword)
        
        # 임시 디렉토리에 원하는 파일명으로 저장
        import tempfile
        import os
        
        # 임시 디렉토리 생성
        temp_dir = tempfile.mkdtemp()
        file_path = os.path.join(temp_dir, filename)
        
        # PIL Image를 RGB로 변환 후 저장
        if isinstance(image, Image.Image):
            # RGBA를 RGB로 변환
            if image.mode == 'RGBA':
                background = Image.new('RGB', image.size, (255, 255, 255))
                background.paste(image, mask=image.split()[-1])
                image_to_save = background
            else:
                image_to_save = image.convert('RGB')
        else:
            image_to_save = image
        
        # JPG로 저장 (원하는 파일명으로)
        image_to_save.save(file_path, 'JPEG', quality=95)
        
        print(f"✅ 다운로드 파일 준비: {filename}")
        return file_path
        
    except Exception as e:
        print(f"❌ 다운로드 파일 준비 실패: {e}")
        return None

# 🎯 핵심: 클라이언트 연결 함수 (로그 최소화)
def get_client():
    """환경변수 기반 클라이언트 연결"""
    try:
        client = Client(API_ENDPOINT)
        return client
    except Exception as e:
        print(f"❌ 연결 실패: {str(e)[:50]}...")
        return None

def main():
    with gr.Blocks(
        css=custom_css, 
        theme=gr.themes.Default(
            primary_hue="orange",
            secondary_hue="orange",
            font=[gr.themes.GoogleFont("Noto Sans KR"), "ui-sans-serif", "system-ui"]
        ),
        title="UHP 이미지생성기"
    ) as app:
        
        # FontAwesome 링크 추가
        gr.HTML(fontawesome_link)
        
        # 상태 관리
        copy_suggestions_state = gr.State({})
        current_keyword_state = gr.State("")
        
        with gr.Row():
            # 왼쪽: 1단계 AI 카피 생성
            with gr.Column(scale=1):
                # AI 카피 생성 섹션
                with gr.Column(elem_classes="custom-frame"):
                    gr.HTML('<div class="section-title"><img src="https://cdn-icons-png.flaticon.com/512/3097/3097412.png"> 1단계: AI 카피 생성</div>')
                    
                    product_keyword = gr.Textbox(
                        label="상품 키워드", 
                        placeholder="예: 바나바잎 추출물, 프리미엄 텀블러, 천연 스킨케어"
                    )
                    
                    copy_type_selection = gr.Radio(
                        choices=[
                            "장점요약형", "문제제시형", "사회적증거형", "긴급성유도형",
                            "가격경쟁력형", "매인변화형", "충동구매유도형", "공포소구형"
                        ],
                        label="📋 1. 카피 타입 선택",
                        value="장점요약형",
                        visible=True
                    )
                    
                    copy_type_description = gr.Markdown(
                        "**장점요약형**: 제품의 장점을 한눈에 강조 - 핵심 기능과 혜택을 간결하게 요약하여 제시",
                        visible=True
                    )
                    
                    generate_copy_btn = gr.Button("메인카피 생성", elem_classes="custom-button")
                    
                    # 카피 출력 영역
                    copy1_display = gr.Textbox(label="추천1", interactive=False, show_label=True)
                    copy2_display = gr.Textbox(label="추천2", interactive=False, show_label=True)
                    copy3_display = gr.Textbox(label="추천3", interactive=False, show_label=True)
                    copy4_display = gr.Textbox(label="추천4", interactive=False, show_label=True)
                    copy5_display = gr.Textbox(label="추천5", interactive=False, show_label=True)
                    
                    copy_selection = gr.Radio(
                        choices=["추천 1", "추천 2", "추천 3", "추천 4", "추천 5"],
                        label="📝 2. 카피 선택",
                        value="추천 1",
                        visible=True
                    )
                    
                    with gr.Row():
                        main_text = gr.Textbox(
                            label="메인카피", 
                            placeholder="위에서 카피를 선택하면 자동으로 입력됩니다",
                            interactive=True
                        )
                        sub_text = gr.Textbox(
                            label="서브카피", 
                            placeholder="위에서 카피를 선택하면 자동으로 입력됩니다",
                            interactive=True
                        )
                    
                    # 예시
                    gr.Examples(
                        examples=[
                            ["통굽슬리퍼"], ["바나바잎 추출물"], ["프리미엄 텀블러"],
                            ["천연 스킨케어"], ["유기농 원두"], ["무선 이어폰"]
                        ],
                        inputs=[product_keyword]
                    )

            # 오른쪽: 2단계 이미지생성
            with gr.Column(scale=1):
                # 이미지 업로드 및 설정 섹션
                with gr.Column(elem_classes="custom-frame"):
                    gr.HTML('<div class="section-title"><img src="https://cdn-icons-png.flaticon.com/512/4297/4297825.png"> 2단계: 이미지생성</div>')
                    
                    input_image = gr.Image(
                        type="filepath", 
                        label="상품 이미지 업로드",
                        elem_classes="image-container upload-image-container"
                    )
                    
                    color_mode = gr.Radio(
                        choices=["추천배경", "흰색배경", "수동 설정배경"],
                        value="추천배경",
                        label="배경색 설정"
                    )
                    
                    generate_image_btn = gr.Button("이미지생성", elem_classes="custom-button")
                    
                    # 수동설정 아코디언
                    with gr.Accordion("수동설정", open=False):
                        with gr.Group():
                            gr.Markdown("### 폰트 선택")
                            with gr.Row():
                                main_font_choice = gr.Dropdown(
                                    choices=[
                                        "프리텐다드-Bold", "에스코어드림-Bold", "노토산스-Bold",
                                        "배달의민족 도현체", "배달의민족 주아체", "여기어때 잘난체",
                                        "온글잎 콘콘체", "온글잎 박다현체", "이사만루-Bold",
                                        "카페24 아네모네-Bold", "어그로체-Bold", "SF함박눈", "페이퍼로지-Bold"
                                    ],
                                    value="프리텐다드-Bold",
                                    label="메인 카피 폰트"
                                )
                                sub_font_choice = gr.Dropdown(
                                    choices=[
                                        "프리텐다드-Regular", "에스코어드림-Regular", "노토산스-Regular",
                                        "배달의민족 도현체", "배달의민족 주아체", "여기어때 잘난체",
                                        "온글잎 콘콘체", "온글잎 박다현체", "이사만루-Light",
                                        "카페24 아네모네-Regular", "어그로체-Light", "SF함박눈", "페이퍼로지-Regular"
                                    ],
                                    value="프리텐다드-Regular",
                                    label="서브 카피 폰트"
                                )
                        
                        with gr.Group():
                            gr.Markdown("### 수동 색상 설정")
                            with gr.Row():
                                manual_bg_color = gr.ColorPicker(label="배경색", value="#FFFFFF", interactive=True)
                            with gr.Row():
                                manual_main_text_color = gr.ColorPicker(label="메인 텍스트색", value="#000000", interactive=True)
                                manual_sub_text_color = gr.ColorPicker(label="서브 텍스트색", value="#000000", interactive=True)
                        
                        with gr.Group():
                            gr.Markdown("### 수동 폰트 크기 설정")
                            with gr.Row():
                                manual_main_font_size = gr.Slider(
                                    minimum=20, maximum=200, value=100, step=5,
                                    label="메인 폰트 크기 (px)", interactive=True
                                )
                                manual_sub_font_size = gr.Slider(
                                    minimum=15, maximum=120, value=55, step=5,
                                    label="서브 폰트 크기 (px)", interactive=True
                                )
                        
                        with gr.Group():
                            gr.Markdown("### 📏 여백 및 간격 조정")
                            with gr.Row():
                                top_bottom_margin = gr.Slider(
                                    minimum=50, maximum=800, value=450, step=10,
                                    label="상하 여백 (px)", 
                                    info="여백-카피-여백의 여백 크기",
                                    interactive=True
                                )
                            with gr.Row():
                                text_gap = gr.Slider(
                                    minimum=5, maximum=100, value=30, step=5,
                                    label="메인↔서브 간격 (px)", 
                                    info="메인카피와 서브카피 사이 간격",
                                    interactive=True
                                )
                            
                            # 현재 적용된 여백 정보 표시
                            margin_info = gr.Markdown(
                                "💡 **현재 여백 정보:** 이미지 생성 후 실제 적용된 수치가 표시됩니다.",
                                visible=True
                            )
                
                # 생성된 이미지 섹션
                with gr.Column(elem_classes="custom-frame"):
                    gr.HTML('<div class="section-title"><img src="https://cdn-icons-png.flaticon.com/512/1375/1375106.png"> 생성된 이미지</div>')
                    
                    # 🎯 핵심: Gradio 기본 이미지 출력 (다운로드 버튼 자동 포함)
                    output_image = gr.Image(
                        label="생성된 이미지",
                        show_download_button=True,  # 다운로드 버튼 표시
                        show_share_button=False,    # 공유 버튼 숨김
                        interactive=False,
                        type="pil",  # PIL Image 타입으로 설정
                        elem_classes="image-container output-image-container"
                    )
                    
                    # 🎯 핵심: Gradio 기본 파일 다운로드 컴포넌트
                    download_file = gr.File(
                        label="📥 이미지 다운로드",
                        visible=True,
                        interactive=False
                    )
        
        # 🎯 핵심: 엔드포인트 기반 이벤트 핸들러들
        
        def update_copy_type_description(selected_type):
            """원본과 동일한 카피 타입 선택시 설명 업데이트"""
            try:
                client = get_client()
                if not client:
                    return "❌ 서버 연결 실패"
                
                result = client.predict(
                    selected_type=selected_type,
                    api_name="/update_copy_type_description"
                )
                return result
            except Exception as e:
                print(f"❌ 카피 타입 설명 업데이트 실패: {str(e)[:50]}...")
                return f"❌ 오류: 설명 업데이트 실패"
        
        def handle_copy_generation(keyword, selected_type):
            """원본과 동일한 카피 생성 처리"""
            try:
                client = get_client()
                if not client:
                    return ("❌ 서버 연결 실패", {}, "", "", "", "", "", "", "", keyword.strip() if keyword else "")
                
                result = client.predict(
                    keyword=keyword,
                    selected_type=selected_type,
                    api_name="/handle_copy_generation"
                )
                
                # 원본과 동일한 튜플 반환 (10개 요소)
                # [0] 상태메시지, [1] copy_suggestions_state, [2-6] 카피1-5, [7-8] 메인/서브, [9] current_keyword_state
                if len(result) >= 8:
                    # API에서 8개를 받으면 추가 상태값들을 로컬에서 처리
                    return (result[0], {}, result[1], result[2], result[3], result[4], result[5], result[6], result[7], keyword.strip() if keyword else "")
                else:
                    return result
                
            except Exception as e:
                print(f"❌ 카피 생성 실패: {str(e)[:50]}...")
                error_msg = "❌ 카피 생성 중 오류가 발생했습니다"
                return (error_msg, {}, "", "", "", "", "", "", "", keyword.strip() if keyword else "")
        
        def handle_copy_selection(copy_suggestions_state, selected_type, selected_copy):
            """원본과 동일한 카피 선택시 메인/서브 텍스트박스 업데이트"""
            try:
                client = get_client()
                if not client:
                    return ("", "")
                
                result = client.predict(
                    selected_type=selected_type,
                    selected_copy=selected_copy,
                    api_name="/handle_copy_selection"
                )
                
                # 튜플 반환 (2개 요소)
                return result
                
            except Exception as e:
                print(f"❌ 카피 선택 실패: {str(e)[:50]}...")
                return ("", "")
        
        def handle_image_generation(input_image, main_text, sub_text, color_mode, 
                                  main_font_choice, sub_font_choice, manual_bg_color, manual_main_text_color, 
                                  manual_sub_text_color, manual_main_font_size, manual_sub_font_size, 
                                  top_bottom_margin, text_gap, current_keyword):
            """원본과 동일한 이미지 생성 처리 (여백 조정 기능 포함)"""
            try:
                client = get_client()
                if not client:
                    return (None, color_mode, manual_bg_color, manual_main_text_color, 
                           manual_sub_text_color, manual_main_font_size, manual_sub_font_size, 
                           None, "❌ 서버 연결 실패")
                
                # 이미지 파일 핸들링
                image_file = None
                if input_image:
                    image_file = handle_file(input_image)
                
                result = client.predict(
                    input_image=image_file,
                    main_text=main_text,
                    sub_text=sub_text,
                    color_mode=color_mode,
                    main_font_choice=main_font_choice,
                    sub_font_choice=sub_font_choice,
                    manual_bg_color=manual_bg_color,
                    manual_main_text_color=manual_main_text_color,
                    manual_sub_text_color=manual_sub_text_color,
                    manual_main_font_size=manual_main_font_size,
                    manual_sub_font_size=manual_sub_font_size,
                    top_bottom_margin=top_bottom_margin,
                    text_gap=text_gap,
                    api_name="/handle_image_generation"
                )
                
                # 원본과 동일한 튜플 반환 (9개 요소)
                # [0] 이미지, [1] 색상모드, [2] 배경색, [3] 메인텍스트색, [4] 서브텍스트색,
                # [5] 메인폰트크기, [6] 서브폰트크기, [7] 다운로드파일, [8] 여백정보
                return result
                
            except Exception as e:
                print(f"❌ 이미지 생성 실패: {str(e)[:50]}...")
                return (None, color_mode, manual_bg_color, manual_main_text_color, 
                       manual_sub_text_color, manual_main_font_size, manual_sub_font_size, 
                       None, "❌ 이미지 생성 중 오류가 발생했습니다")
        
        # 원본과 동일한 이벤트 연결
        copy_type_selection.change(
            fn=update_copy_type_description,
            inputs=[copy_type_selection],
            outputs=[copy_type_description]
        )
        
        generate_copy_btn.click(
            fn=handle_copy_generation,
            inputs=[product_keyword, copy_type_selection],
            outputs=[copy_type_description, copy_suggestions_state,
                    copy1_display, copy2_display, copy3_display, copy4_display, copy5_display,
                    main_text, sub_text, current_keyword_state]
        )
        
        copy_selection.change(
            fn=handle_copy_selection,
            inputs=[copy_suggestions_state, copy_type_selection, copy_selection],
            outputs=[main_text, sub_text]
        )
        
        generate_image_btn.click(
            fn=handle_image_generation,
            inputs=[input_image, main_text, sub_text, color_mode, 
                   main_font_choice, sub_font_choice, manual_bg_color, manual_main_text_color, manual_sub_text_color,
                   manual_main_font_size, manual_sub_font_size, top_bottom_margin, text_gap, current_keyword_state],
            outputs=[output_image, color_mode, manual_bg_color, manual_main_text_color, manual_sub_text_color,
                    manual_main_font_size, manual_sub_font_size, download_file, margin_info]
        )
    
    return app

if __name__ == "__main__":
    app = main()
    app.launch(share=False, inbrowser=True)