Update app.py

app.py

@@ -1,2 +1,1073 @@
+import gradio as gr
 import os
-exec(os.environ.get('APP'))
+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)