Update app.py

app.py

@@ -11,6 +11,7 @@ from google.genai import types
 from dotenv import load_dotenv
 load_dotenv()
 
+# 기존 코드 유지 (로깅, 함수 등 모든 기능 코드)
 logging.basicConfig(level=logging.INFO, format='%(asctime)s - %(levelname)s - %(message)s')
 logger = logging.getLogger(__name__)
 
@@ -19,11 +20,7 @@ def save_binary_file(file_name, data):
         f.write(data)
 
 def translate_prompt_to_english(prompt):
-    """
-    입력된 프롬프트에 한글이 포함되어 있으면 Gemini‑2.0‑flash 모델을 사용하여 영어로 번역합니다.
-    한글이 없으면 원본 프롬프트를 그대로 반환합니다.
-    중요: #1, #2, #3 태그는 번역 전후에 반드시 보존되어야 합니다.
-    """
+    # 기존 함수 유지
     if not re.search("[가-힣]", prompt):
         return prompt
     
@@ -88,9 +85,7 @@ def translate_prompt_to_english(prompt):
         return prompt
 
 def preprocess_prompt(prompt, image1, image2, image3):
-    """
-    프롬프트를 처리하고 기능 명령을 해석
-    """
+    # 기존 함수 유지
     has_img1 = image1 is not None
     has_img2 = image2 is not None
     has_img3 = image3 is not None
@@ -139,10 +134,7 @@ def preprocess_prompt(prompt, image1, image2, image3):
     return prompt
 
 def generate_with_images(prompt, images, variation_index=0):
-    """
-    API 호출을 통해 이미지를 생성하고 결과 이미지를 반환합니다.
-    variation_index로 다양한 변화를 줍니다.
-    """
+    # 기존 함수 유지
     try:
         api_key = os.environ.get("GEMINI_API_KEY")
         if not api_key:
@@ -204,10 +196,7 @@ def generate_with_images(prompt, images, variation_index=0):
         return None, f"오류 발생: {str(e)}"
 
 def process_images_with_prompt(image1, image2, image3, prompt, variation_index=0, max_retries=3):
-    """
-    3개의 이미지와 프롬프트를 처리하여 최종 영어 프롬프트(final_prompt)를 생성한 후,
-    API를 호출하여 결과 이미지를 반환합니다. 에러 발생 시 최대 max_retries 횟수만큼 재시도합니다.
-    """
+    # 기존 함수 유지
     retry_count = 0
     last_error = None
     
@@ -252,9 +241,7 @@ def process_images_with_prompt(image1, image2, image3, prompt, variation_index=0
     return None, f"최대 재시도 횟수({max_retries}회) 초과 후 실패: {last_error}", prompt
 
 def generate_multiple_images(image1, image2, image3, prompt, progress=gr.Progress()):
-    """
-    여러 개의 이미지를 차례대로 생성합니다.
-    """
+    # 기존 함수 유지
     results = []
     statuses = []
     prompts = []
@@ -289,12 +276,7 @@ def generate_multiple_images(image1, image2, image3, prompt, progress=gr.Progres
     
     return results[0], results[1], results[2], results[3], combined_status, combined_prompts
 
-# =====================================================================
-# 아래는 GFPGAN 참조코드를 탭으로 추가한 부분 (기능 구현 및 UI 개선)
-# 기존 GFPGAN 관련 코드에서 version과 Rescaling factor 관련 UI는 제거하고,
-# GFPGANv1.4를 고정으로 사용합니다.
-# =====================================================================
-
+# GFPGAN 관련 코드 유지
 import sys
 from torchvision.transforms import functional
 sys.modules["torchvision.transforms.functional_tensor"] = functional
@@ -306,7 +288,7 @@ from realesrgan.utils import RealESRGANer
 import torch
 import cv2
 
-# 필요한 모델 다운로드 (이미 없으면 다운로드)
+# 필요한 모델 다운로드
 if not os.path.exists('realesr-general-x4v3.pth'):
     os.system("wget https://github.com/xinntao/Real-ESRGAN/releases/download/v0.2.5.0/realesr-general-x4v3.pth -P .")
 if not os.path.exists('GFPGANv1.4.pth'):
@@ -361,153 +343,560 @@ def upscaler(img, version, scale):
         print('전체 예외 발생:', error)
         return None
 
-# GFPGAN 업스케일러 함수 (버전과 스케일은 고정)
 def upscaler_korean(img):
     return upscaler(img, "GFPGANv1.4", 2)
 
-# =====================================================================
-# Gradio Blocks로 탭 UI 구성 (Gradio 5.21 기준)
-# =====================================================================
-
-with gr.Blocks() as demo:
-    with gr.Tabs():
-        with gr.TabItem("이커머스 이미지 생성기"):
-            gr.HTML(
-                """
-                <div style="text-align: center; margin-bottom: 1rem;">
-                    <h1>이커머스용 이미지 생성기</h1>
-                    <p>이미지를 업로드하고 예제를 참가하여 프롬프트를 수정한 후 "이미지 생성" 버튼을 클릭하면 차례로 4장의 이미지가 생성됩니다.</p>
+# 커스텀 CSS 스타일
+custom_css = """
+:root {
+    --primary-color: #5561e9;
+    --secondary-color: #6c8aff;
+    --accent-color: #ff6b6b;
+    --background-color: #f0f5ff;
+    --card-bg: #ffffff;
+    --text-color: #334155;
+    --border-radius: 18px;
+    --shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
+}
+
+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;
+}
+
+/* Gradio 컨테이너 오버라이드 */
+.gradio-container {
+    max-width: 100% !important;
+    margin: 0 auto !important;
+    padding: 0 !important;
+    background-color: var(--background-color) !important;
+}
+
+/* 상단 헤더 */
+.app-header {
+    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
+    color: white;
+    padding: 2rem;
+    border-radius: var(--border-radius);
+    margin-bottom: 1.5rem;
+    box-shadow: var(--shadow);
+    text-align: center;
+}
+
+.app-header h1 {
+    margin: 0;
+    font-size: 2.5rem;
+    font-weight: 700;
+    letter-spacing: -0.5px;
+}
+
+.app-header p {
+    margin: 0.75rem 0 0;
+    font-size: 1.1rem;
+    opacity: 0.9;
+}
+
+/* 패널 스타일링 */
+.panel {
+    background-color: var(--card-bg);
+    border-radius: var(--border-radius);
+    box-shadow: var(--shadow);
+    padding: 1.5rem;
+    margin-bottom: 1.5rem;
+    border: 1px solid rgba(0, 0, 0, 0.04);
+    transition: transform 0.3s ease;
+}
+
+.panel:hover {
+    transform: translateY(-5px);
+}
+
+/* 섹션 제목 */
+.section-title {
+    font-size: 1.5rem;
+    font-weight: 700;
+    color: var(--primary-color);
+    margin-bottom: 1rem;
+    padding-bottom: 0.5rem;
+    border-bottom: 2px solid var(--secondary-color);
+    display: flex;
+    align-items: center;
+}
+
+.section-title i {
+    margin-right: 0.5rem;
+    font-size: 1.4rem;
+}
+
+/* 버튼 스타일링 */
+.custom-button {
+    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
+    color: white !important;
+    border: none !important;
+    border-radius: calc(var(--border-radius) - 5px) !important;
+    padding: 0.8rem 1.2rem !important;
+    font-weight: 600 !important;
+    cursor: pointer !important;
+    transition: all 0.3s ease !important;
+    box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08);
+    text-transform: none !important;
+    display: flex !important;
+    align-items: center !important;
+    justify-content: center !important;
+}
+
+.custom-button:hover {
+    transform: translateY(-2px) !important;
+    box-shadow: 0 7px 14px rgba(50, 50, 93, 0.1), 0 3px 6px rgba(0, 0, 0, 0.08) !important;
+}
+
+.custom-button.primary {
+    background: linear-gradient(135deg, var(--accent-color), #ff9a8b) !important;
+}
+
+.custom-button i {
+    margin-right: 0.5rem;
+}
+
+/* 이미지 컨테이너 */
+.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;
+}
+
+.image-container:hover {
+    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
+}
+
+/* 탭 컨테이너 */
+.custom-tabs {
+    background-color: transparent !important;
+    border: none !important;
+    margin-bottom: 1rem;
+}
+
+.custom-tabs button {
+    background-color: rgba(255, 255, 255, 0.7) !important;
+    border: none !important;
+    border-radius: var(--border-radius) var(--border-radius) 0 0 !important;
+    padding: 0.8rem 1.5rem !important;
+    font-weight: 600 !important;
+    color: var(--text-color) !important;
+    transition: all 0.3s ease !important;
+}
+
+.custom-tabs button[aria-selected="true"] {
+    background-color: var(--primary-color) !important;
+    color: white !important;
+}
+
+/* 입력 필드 */
+.custom-input {
+    border-radius: calc(var(--border-radius) - 5px) !important;
+    border: 1px solid rgba(0, 0, 0, 0.1) !important;
+    padding: 0.8rem 1rem !important;
+    transition: all 0.3s ease !important;
+}
+
+.custom-input:focus {
+    border-color: var(--primary-color) !important;
+    box-shadow: 0 0 0 2px rgba(85, 97, 233, 0.2) !important;
+}
+
+/* 사용자 매뉴얼 */
+.user-manual {
+    background-color: white;
+    padding: 2rem;
+    border-radius: var(--border-radius);
+    box-shadow: var(--shadow);
+    margin-top: 2rem;
+}
+
+.manual-title {
+    font-size: 1.8rem;
+    font-weight: 700;
+    color: var(--primary-color);
+    margin-bottom: 1.5rem;
+    text-align: center;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.manual-title i {
+    margin-right: 0.5rem;
+    font-size: 1.8rem;
+}
+
+.manual-section {
+    margin-bottom: 1.5rem;
+    padding: 1.2rem;
+    background-color: #f8faff;
+    border-radius: calc(var(--border-radius) - 5px);
+}
+
+.manual-section-title {
+    font-size: 1.3rem;
+    font-weight: 700;
+    margin-bottom: 1rem;
+    color: var(--primary-color);
+    display: flex;
+    align-items: center;
+}
+
+.manual-section-title i {
+    margin-right: 0.5rem;
+    font-size: 1.2rem;
+}
+
+.manual-text {
+    font-size: 1rem;
+    line-height: 1.7;
+}
+
+.manual-text strong {
+    color: var(--accent-color);
+}
+
+.tip-box {
+    background-color: rgba(255, 107, 107, 0.1);
+    border-left: 3px solid var(--accent-color);
+    padding: 1rem 1.2rem;
+    margin: 1rem 0;
+    border-radius: 8px;
+}
+
+/* 버튼 그룹 */
+.button-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+    gap: 0.8rem;
+    margin-bottom: 1.2rem;
+}
+
+/* 로딩 애니메이션 */
+.progress-container {
+    background-color: rgba(255, 255, 255, 0.9);
+    border-radius: var(--border-radius);
+    padding: 2rem;
+    box-shadow: var(--shadow);
+    text-align: center;
+}
+
+.progress-bar {
+    height: 8px;
+    border-radius: 4px;
+    background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
+    margin: 1rem 0;
+}
+
+/* 예시 그리드 */
+.examples-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+    gap: 1rem;
+    margin: 1.5rem 0;
+}
+
+.example-card {
+    background: white;
+    border-radius: var(--border-radius);
+    overflow: hidden;
+    box-shadow: var(--shadow);
+    transition: transform 0.3s ease;
+}
+
+.example-card:hover {
+    transform: translateY(-5px);
+}
+
+/* 반응형 */
+@media (max-width: 768px) {
+    .button-grid {
+        grid-template-columns: repeat(2, 1fr);
+    }
+}
+
+/* 전체 인터페이스 둥근 모서리 */
+.block, .prose, .gr-prose, .gr-form, .gr-panel {
+    border-radius: var(--border-radius) !important;
+}
+
+/* 메인 컨텐츠 스크롤바 */
+::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+}
+
+::-webkit-scrollbar-track {
+    background: rgba(0, 0, 0, 0.05);
+    border-radius: 10px;
+}
+
+::-webkit-scrollbar-thumb {
+    background: var(--secondary-color);
+    border-radius: 10px;
+}
+"""
+
+# 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" />
+"""
+
+# 앱 헤더 HTML
+header_html = """
+<div class="app-header">
+    <h1>✨ 이커머스 이미지 마법사 ✨</h1>
+    <p>쉽고 빠르게 상품 이미지를 편집하고 생성하세요! 한 번의 클릭으로 전문적인 이미지를 만들 수 있습니다.</p>
+</div>
+"""
+
+# 사용자 매뉴얼 HTML
+user_manual_html = """
+<div class="user-manual">
+    <div class="manual-title"><i class="fas fa-book"></i> 사용 설명서</div>
+    
+    <div class="manual-section">
+        <div class="manual-section-title"><i class="fas fa-magic"></i> 기본 사용법</div>
+        <p class="manual-text">
+            <span style="font-size: 1.1rem; font-weight: 600; color: #5561e9;">1️⃣ 이미지 업로드</span><br>
+            최대 3개의 이미지를 업로드할 수 있습니다. 첫 번째 이미지는 필수입니다.<br><br>
+            
+            <span style="font-size: 1.1rem; font-weight: 600; color: #5561e9;">2️⃣ 프롬프트 입력 또는 버튼 선택</span><br>
+            변환하고 싶은 내용을 직접 입력하거나, 미리 정의된 버튼 중 하나를 선택하세요.<br><br>
+            
+            <span style="font-size: 1.1rem; font-weight: 600; color: #5561e9;">3️⃣ 이미지 생성</span><br>
+            '이미지 생성' 버튼을 클릭하면 4가지 버전의 이미지가 생성됩니다.
+        </p>
+    </div>
+    
+    <div class="manual-section">
+        <div class="manual-section-title"><i class="fas fa-hashtag"></i> 이미지 참조 방법</div>
+        <p class="manual-text">
+            프롬프트에서 다음 태그를 사용하여 각 이미지를 참조할 수 있습니다:
+            <ul>
+                <li><strong style="font-size: 1.05rem;">#1</strong> - 첫 번째 이미지</li>
+                <li><strong style="font-size: 1.05rem;">#2</strong> - 두 번째 이미지</li>
+                <li><strong style="font-size: 1.05rem;">#3</strong> - 세 번째 이미지</li>
+            </ul>
+            
+            <div class="tip-box">
+                <i class="fas fa-lightbulb"></i> <strong>팁:</strong> 예를 들어, "(#1의 여성모델)이 (#2의 선글라스)를 착용한 모습"과 같이 사용할 수 있습니다.
+            </div>
+        </p>
+    </div>
+    
+    <div class="manual-section">
+        <div class="manual-section-title"><i class="fas fa-tools"></i> 주요 기능</div>
+        <div class="manual-text">
+            <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1rem;">
+                <div>
+                    <p style="font-size: 1.1rem; font-weight: 600; color: #ff6b6b;"><i class="fas fa-exchange-alt"></i> 이미지 변경</p>
+                    포즈나 스타일을 변경하면서 원본의 주요 요소는 유지합니다.
                 </div>
-                """
-            )
+                
+                <div>
+                    <p style="font-size: 1.1rem; font-weight: 600; color: #ff6b6b;"><i class="fas fa-eraser"></i> 글자 지우기/변경</p>
+                    이미지의 텍스트를 자연스럽게 제거하거나 다른 텍스트로 변경합니다.
+                </div>
+                
+                <div>
+                    <p style="font-size: 1.1rem; font-weight: 600; color: #ff6b6b;"><i class="fas fa-tshirt"></i> 가상 상품착용</p>
+                    모델에게 다른 이미지의 상품을 자연스럽게 착용시킵니다.
+                </div>
+                
+                <div>
+                    <p style="font-size: 1.1rem; font-weight: 600; color: #ff6b6b;"><i class="fas fa-image"></i> 배경 바꾸기</p>
+                    주요 피사체는 유지하며 배경만 교체합니다.
+                </div>
+            </div>
+        </div>
+    </div>
+    
+    <div class="manual-section">
+        <div class="manual-section-title"><i class="fas fa-search-plus"></i> GFPGAN 업스케일러</div>
+        <p class="manual-text">
+            <span style="font-size: 1.1rem; font-weight: 600; color: #5561e9;">이미지 개선 기능</span><br>
+            저해상도 이미지를 고해상도로 변환하고, 얼굴을 자연스럽게 복원합니다.<br>
+            특히 다음과 같은 경우에 효과적입니다:
+            <ul>
+                <li>해상도가 낮은 이미지 개선</li>
+                <li>흐릿하거나 노이즈가 있는 얼굴 복원</li>
+                <li>이미지 전반적인 선명도 향상</li>
+            </ul>
             
-            with gr.Row():
+            <div class="tip-box">
+                <i class="fas fa-lightbulb"></i> <strong>팁:</strong> 이미지의 크기가 작을수록 처리 속도가 빠릅니다. 얼굴이 포함된 이미지에서 가장 좋은 결과를 얻을 수 있습니다.
+            </div>
+        </p>
+    </div>
+</div>
+"""
+
+# UI 구성
+with gr.Blocks(css=custom_css) as demo:
+    gr.HTML(fontawesome_link)
+    gr.HTML(header_html)
+    
+    with gr.Tabs(elem_classes="custom-tabs") as tabs:
+        with gr.TabItem("✨ 이커머스 이미지 생성기", elem_classes="tab-content"):
+            with gr.Row(equal_height=True):
                 with gr.Column(scale=1):
-                    with gr.Row():
-                        image1_input = gr.Image(type="pil", label="#1", image_mode="RGB", height=300, width=200)
-                        image2_input = gr.Image(type="pil", label="#2", image_mode="RGB", height=300, width=200)
-                        image3_input = gr.Image(type="pil", label="#3", image_mode="RGB", height=300, width=200)
-                    prompt_input = gr.Textbox(
-                        lines=3,
-                        placeholder="프롬프트를 입력하거나 비워두면 자동 합성됩니다.",
-                        label="프롬프트 (선택 사항)"
-                    )
-                    with gr.Row():
-                        image_change_btn1 = gr.Button("이미지 변경-1")
-                        image_change_btn2 = gr.Button("이미지 변경-2")
-                        text_remove_btn = gr.Button("글자 지우기")
-                        text_change_btn = gr.Button("글자 변경하기")
-                        clothes_change_btn1 = gr.Button("가상 상품착용-1")
-                        clothes_change_btn2 = gr.Button("가상 상품착용-2")
-                        holding_product_btn = gr.Button("상품들고 있기")
-                        background_change_btn = gr.Button("배경 바꾸기")
-                        composite_product_btn = gr.Button("부분 지우기")
-                    submit_btn = gr.Button("이미지 생성 (4장)", variant="primary")
-                    
-                    gr.Markdown(
-                        """
-                        ### 사용 방법:
+                    with gr.Box(elem_classes="panel"):
+                        gr.HTML('<div class="section-title"><i class="fas fa-upload"></i> 이미지 업로드</div>')
+                        with gr.Row():
+                            image1_input = gr.Image(type="pil", label="#1", image_mode="RGB", elem_classes="image-container", height=220)
+                            image2_input = gr.Image(type="pil", label="#2", image_mode="RGB", elem_classes="image-container", height=220)
+                            image3_input = gr.Image(type="pil", label="#3", image_mode="RGB", elem_classes="image-container", height=220)
                         
-                        1. **자동 합성**: 이미지를 업로드하고 프롬프트를 비워두면 자동으로 합성됩니다.
-                        2. **이미지 참조**: #1, #2, #3으로 각 이미지를 참조할 수 있습니다.
-                        3. **선택 옵션**: 위의 버튼을 클릭하면 프롬프트 입력란에 한국어 문구로 입력하시면 됩니다.
-                        4. **다양한 이미지**: "이미지 생성" 버튼을 클릭하면 차례로 4장의 이미지가 생성됩니다.
-                        5. **예제 선택**: 다양한 예제를 통해 미리 테스트해보세요.
+                        gr.HTML('<div class="section-title"><i class="fas fa-keyboard"></i> 프롬프트 입력</div>')
+                        prompt_input = gr.Textbox(
+                            lines=3,
+                            placeholder="프롬프트를 입력하거나 비워두면 자동 합성됩니다. '#1', '#2', '#3'으로 각 이미지를 참조할 수 있습니다.",
+                            label="프롬프트 (선택 사항)",
+                            elem_classes="custom-input"
+                        )
                         
-                        > **팁**: 프롬프트를 직접 수정할 수도 있습니다.
-                        """
-                    )
-                    
-                    gr.Markdown("## 예제 이미지")
-                    examples = [
-                        ["down/모델.jpg", None, None, "(#1의 여성)이 살짝 뒤로 돌아보는 모습으로 최대한 이전 seed를 유지한테 자연스럽게 변경하라."],
-                        ["down/상어레고모형.png", None, None, "(#1 레모모형)에서 청색상어레고만 검은색 고래레고로 변경하고 나머지 부분은 seed를 변경을 하지마라."],
-                        ["down/중국어.png", None, None, "(#1 이미지)에 있는 중국어를 모두 제거하라."],
-                        ["down/텍스트.webp", None, None, '(#1의 텍스트)를 스타일을 유지한체 텍스트만 "Hello"로 바꿔라'],
-                        ["down/모델.jpg", "down/선글라스.png", "down/청바지.png", "(#1의 여성모델)이 신체 비율과 포즈는 유치한 체 (#2의 선글라스)와 (#3의 청바지)를 직접 모델이 착용한것 처럼 자연스럽게 이미지를 생성하라."],
-                        ["down/모델.jpg", "down/선글라스.png", "down/카페전경.png", "(#1의 여성모델)이 신체 비율과 포즈는 유치한 체 (#2의 선글라스)를 직접 모델이 착용한 것처럼 (#3의 장소)에서 의자에 앉아 있는 자연스러운 이미지를 생성하라."],
-                        ["down/모델.jpg", "down/와인잔.png", None, "(#1의 여성모델)이 신체 비율과 포즈는 유치한 체 (#2의 와인잔)을 여성모델이 홍보할 와인잔을 돋보이게 들고 있는 자연스러운 모습으로 이미지를 생성하라."],
-                        ["down/모델.jpg", "down/카페전경.png", None, "(#1의 여성모델)이 (#2 이미지의 배경)을 주요 피사체는 그대로 유지하여 이미지의 분위기가 자연스럽게 어우러지도록 생성하라."],
-                        ["down/상어레고모형.png", None, None, "(#1의 레고모형)에서 청색상어레고를 제거한 후, 그 자리를 주변 배경과 자연스럽게 어우러지도록 채워주세요. 단, 이미지의 다른 부분의 주요 요소는 동일하게 유지해 해야한다."]
-                    ]
-                    
-                    gr.Examples(
-                        examples=examples,
-                        inputs=[image1_input, image2_input, image3_input, prompt_input],
-                        elem_id="examples-grid"
-                    )
-                    
+                        gr.HTML('<div class="section-title"><i class="fas fa-sliders-h"></i> 변환 옵션</div>')
+                        with gr.Column(elem_classes="button-grid"):
+                            image_change_btn1 = gr.Button('<i class="fas fa-sync-alt"></i> 이미지 변경-1', elem_classes="custom-button")
+                            image_change_btn2 = gr.Button('<i class="fas fa-sync-alt"></i> 이미지 변경-2', elem_classes="custom-button")
+                            text_remove_btn = gr.Button('<i class="fas fa-eraser"></i> 글자 지우기', elem_classes="custom-button")
+                            text_change_btn = gr.Button('<i class="fas fa-font"></i> 글자 변경', elem_classes="custom-button")
+                            clothes_change_btn1 = gr.Button('<i class="fas fa-tshirt"></i> 상품착용-1', elem_classes="custom-button")
+                            clothes_change_btn2 = gr.Button('<i class="fas fa-glasses"></i> 상품착용-2', elem_classes="custom-button")
+                            holding_product_btn = gr.Button('<i class="fas fa-wine-glass"></i> 상품들고 있기', elem_classes="custom-button")
+                            background_change_btn = gr.Button('<i class="fas fa-image"></i> 배경 바꾸기', elem_classes="custom-button")
+                            composite_product_btn = gr.Button('<i class="fas fa-cut"></i> 부분 지우기', elem_classes="custom-button")
+                        
+                        submit_btn = gr.Button('<i class="fas fa-magic"></i> 이미지 생성 (4장)', elem_classes="custom-button primary")
+                
                 with gr.Column(scale=1):
+                    with gr.Box(elem_classes="panel"):
+                        gr.HTML('<div class="section-title"><i class="fas fa-images"></i> 생성된 이미지</div>')
+                        with gr.Row():
+                            with gr.Column():
+                                output_image1 = gr.Image(label="이미지 #1", elem_classes="image-container")
+                                output_image3 = gr.Image(label="이미지 #3", elem_classes="image-container")
+                            with gr.Column():
+                                output_image2 = gr.Image(label="이미지 #2", elem_classes="image-container")
+                                output_image4 = gr.Image(label="이미지 #4", elem_classes="image-container")
+                        
+                        gr.HTML('<div class="section-title"><i class="fas fa-info-circle"></i> 결과 정보</div>')
+                        output_text = gr.Textbox(label="상태 메시지", lines=2, elem_classes="custom-input")
+                        prompt_display = gr.Textbox(label="사용된 프롬프트 (영어)", visible=True, lines=2, elem_classes="custom-input")
+            
+            gr.HTML('<div class="section-title"><i class="fas fa-lightbulb"></i> 예제 이미지</div>')
+            with gr.Box(elem_classes="panel"):
+                examples = [
+                    ["down/모델.jpg", None, None, "(#1의 여성)이 살짝 뒤로 돌아보는 모습으로 최대한 이전 seed를 유지한테 자연스럽게 변경하라."],
+                    ["down/상어레고모형.png", None, None, "(#1 레모모형)에서 청색상어레고만 검은색 고래레고로 변경하고 나머지 부분은 seed를 변경을 하지마라."],
+                    ["down/중국어.png", None, None, "(#1 이미지)에 있는 중국어를 모두 제거하라."],
+                    ["down/텍스트.webp", None, None, '(#1의 텍스트)를 스타일을 유지한체 텍스트만 "Hello"로 바꿔라'],
+                    ["down/모델.jpg", "down/선글라스.png", "down/청바지.png", "(#1의 여성모델)이 신체 비율과 포즈는 유치한 체 (#2의 선글라스)와 (#3의 청바지)를 직접 모델이 착용한것 처럼 자연스럽게 이미지를 생성하라."],
+                    ["down/모델.jpg", "down/선글라스.png", "down/카페전경.png", "(#1의 여성모델)이 신체 비율과 포즈는 유치한 체 (#2의 선글라스)를 직접 모델이 착용한 것처럼 (#3의 장소)에서 의자에 앉아 있는 자연스러운 이미지를 생성하라."],
+                    ["down/모델.jpg", "down/와인잔.png", None, "(#1의 여성모델)이 신체 비율과 포즈는 유치한 체 (#2의 와인잔)을 여성모델이 홍보할 와인잔을 돋보이게 들고 있는 자연스러운 모습으로 이미지를 생성하라."],
+                    ["down/모델.jpg", "down/카페전경.png", None, "(#1의 여성모델)이 (#2 이미지의 배경)을 주요 피사체는 그대로 유지하여 이미지의 분위기가 자연스럽게 어우러지도록 생성하라."],
+                    ["down/상어레고모형.png", None, None, "(#1의 레고모형)에서 청색상어레고를 제거한 후, 그 자리를 주변 배경과 자연스럽게 어우러지도록 채워주세요. 단, 이미지의 다른 부분의 주요 요소는 동일하게 유지해 해야한다."]
+                ]
+                
+                gr.Examples(
+                    examples=examples,
+                    inputs=[image1_input, image2_input, image3_input, prompt_input],
+                    elem_id="examples-grid",
+                    elem_classes="examples-grid"
+                )
+            
+            # 사용자 매뉴얼
+            gr.HTML(user_manual_html)
+            
+        with gr.TabItem("🔍 GFPGAN 업스케일러", elem_classes="tab-content"):
+            with gr.Row():
+                with gr.Column(elem_classes="panel"):
+                    gr.HTML('<div class="section-title"><i class="fas fa-search-plus"></i> 이미지 업스케일 & 복원</div>')
+                    gr.HTML("""
+                    <p style="margin-bottom: 1rem; font-size: 1.05rem;">
+                        GFPGANv1.4 모델을 사용하여 이미지를 고해상도로 변환하고 얼굴을 복원합니다.
+                    </p>
+                    <div class="tip-box">
+                        <i class="fas fa-lightbulb"></i> <strong>팁:</strong> 해상도가 낮거나 품질이 떨어지는 이미지, 특히 얼굴 이미지에 효과적입니다.
+                    </div>
+                    """)
+                    
                     with gr.Row():
                         with gr.Column():
-                            output_image1 = gr.Image(label="생성된 이미지 #1", height=600, width=450)
-                            output_image3 = gr.Image(label="생성된 이미지 #3", height=600, width=450)
+                            gr.HTML('<div class="section-title"><i class="fas fa-upload"></i> 입력 이미지</div>')
+                            gfpgan_input = gr.Image(type="filepath", label="업로드", elem_classes="image-container")
+                        
                         with gr.Column():
-                            output_image2 = gr.Image(label="생성된 이미지 #2", height=600, width=450)
-                            output_image4 = gr.Image(label="생성된 이미지 #4", height=600, width=450)
+                            gr.HTML('<div class="section-title"><i class="fas fa-download"></i> 결과 이미지</div>')
+                            gfpgan_output = gr.Image(type="numpy", label="업스케일 결과", elem_classes="image-container")
                     
-                    output_text = gr.Textbox(label="상태 메시지", lines=4)
-                    prompt_display = gr.Textbox(label="사용된 프롬프트 (영어)", visible=True, lines=4)
-            
-            image_change_btn1.click(
-                fn=lambda: "(#1의 여성)이 살짝 뒤로 돌아보는 모습으로 최대한 이전 seed를 유지한테 자연스럽게 변경하라.",
-                inputs=[],
-                outputs=prompt_input
-            )
-            image_change_btn2.click(
-                fn=lambda: "(#1 레모모형)에서 청색상어레고만 검은색 고래레고로 변경하고 나머지 부분은 seed를 변경을 하지마라.",
-                inputs=[],
-                outputs=prompt_input
-            )
-            text_remove_btn.click(
-                fn=lambda: "(#1 이미지)에 있는 중국어를 모두 제거하라.",
-                inputs=[],
-                outputs=prompt_input
-            )
-            text_change_btn.click(
-                fn=lambda: '(#1의 텍스트)를 스타일을 유지한체 텍스트만 "Hello"로 바꿔라',
-                inputs=[],
-                outputs=prompt_input
-            )
-            clothes_change_btn1.click(
-                fn=lambda: "(#1의 여성모겔)이 신체 비율과 포즈는 유치한 체 (#2의 선글라스)와 (#3의 청바지)를 직접 모델이 착용한것 처럼 자연스럽게 이미지를 생성하라.",
-                inputs=[],
-                outputs=prompt_input
-            )
-            clothes_change_btn2.click(
-                fn=lambda: "(#1의 여성모델)이 신체 비율과 포즈는 유치한 체 (#2의 선글라스)를 직접 모델이 착용한 것처럼 (#3의 장소)에서 의자에 앉아 있는 자연스러운 이미지를 생성하라.",
-                inputs=[],
-                outputs=prompt_input
-            )
-            holding_product_btn.click(
-                fn=lambda: "(#1의 여성모델)이 신체 비율과 포즈는 유치한 체 (#2의 와인잔)을 여성모델이 홍보할 와인잔을 돋보이게 들고 있는 자연스러운 모습으로 이미지를 생성하라.",
-                inputs=[],
-                outputs=prompt_input
-            )
-            background_change_btn.click(
-                fn=lambda: "(#1의 여성모델)이 (#2 이미지의 배경)을 주요 피사체는 그대로 유지하여 두 이미지의 분위기가 자연스럽게 어우러지도록 생성하라.",
-                inputs=[],
-                outputs=prompt_input
-            )
-            composite_product_btn.click(
-                fn=lambda: "(#1의 레고모형)에서 청색상어레고를 제거한 후, 그 자리를 주변 배경과 자연스럽게 어우러지도록 채워주세요. 단, 이미지의 다른 부분의 주요 요소는 동일하게 유지해 해야한다.",
-                inputs=[],
-                outputs=prompt_input
-            )
-            submit_btn.click(
-                fn=generate_multiple_images,
-                inputs=[image1_input, image2_input, image3_input, prompt_input],
-                outputs=[output_image1, output_image2, output_image3, output_image4, output_text, prompt_display],
-            )
-        
-        with gr.TabItem("GFPGAN 업스케일러"):
-            gr.Markdown("<h1 style='text-align: center;'>GFPGAN 업스케일러 및 복원</h1>")
-            gr.Markdown("입력 이미지를 업로드하면 GFPGANv1.4 모델을 사용하여 얼굴 복원 및 업스케일링을 수행합니다.")
-            with gr.Row():
-                gfpgan_input = gr.Image(type="filepath", label="입력 이미지", image_mode="RGB")
-                gfpgan_output = gr.Image(type="numpy", label="출력 이미지")
-            gfpgan_btn = gr.Button("업스케일 및 복원")
-            gfpgan_btn.click(fn=upscaler_korean, inputs=gfpgan_input, outputs=gfpgan_output)
-            
-    demo.queue()
-    demo.launch()
+                    gfpgan_btn = gr.Button('<i class="fas fa-magic"></i> 업스케일 및 복원', elem_classes="custom-button primary")
+    
+    # 버튼 이벤트 연결
+    image_change_btn1.click(
+        fn=lambda: "(#1의 여성)이 살짝 뒤로 돌아보는 모습으로 최대한 이전 seed를 유지한테 자연스럽게 변경하라.",
+        inputs=[],
+        outputs=prompt_input
+    )
+    image_change_btn2.click(
+        fn=lambda: "(#1 레모모형)에서 청색상어레고만 검은색 고래레고로 변경하고 나머지 부분은 seed를 변경을 하지마라.",
+        inputs=[],
+        outputs=prompt_input
+    )
+    text_remove_btn.click(
+        fn=lambda: "(#1 이미지)에 있는 중국어를 모두 제거하라.",
+        inputs=[],
+        outputs=prompt_input
+    )
+    text_change_btn.click(
+        fn=lambda: '(#1의 텍스트)를 스타일을 유지한체 텍스트만 "Hello"로 바꿔라',
+        inputs=[],
+        outputs=prompt_input
+    )
+    clothes_change_btn1.click(
+        fn=lambda: "(#1의 여성모겔)이 신체 비율과 포즈는 유치한 체 (#2의 선글라스)와 (#3의 청바지)를 직접 모델이 착용한것 처럼 자연스럽게 이미지를 생성하라.",
+        inputs=[],
+        outputs=prompt_input
+    )
+    clothes_change_btn2.click(
+        fn=lambda: "(#1의 여성모델)이 신체 비율과 포즈는 유치한 체 (#2의 선글라스)를 직접 모델이 착용한 것처럼 (#3의 장소)에서 의자에 앉아 있는 자연스러운 이미지를 생성하라.",
+        inputs=[],
+        outputs=prompt_input
+    )
+    holding_product_btn.click(
+        fn=lambda: "(#1의 여성모델)이 신체 비율과 포즈는 유치한 체 (#2의 와인잔)을 여성모델이 홍보할 와인잔을 돋보이게 들고 있는 자연스러운 모습으로 이미지를 생성하라.",
+        inputs=[],
+        outputs=prompt_input
+    )
+    background_change_btn.click(
+        fn=lambda: "(#1의 여성모델)이 (#2 이미지의 배경)을 주요 피사체는 그대로 유지하여 두 이미지의 분위기가 자연스럽게 어우러지도록 생성하라.",
+        inputs=[],
+        outputs=prompt_input
+    )
+    composite_product_btn.click(
+        fn=lambda: "(#1의 레고모형)에서 청색상어레고를 제거한 후, 그 자리를 주변 배경과 자연스럽게 어우러지도록 채워주세요. 단, 이미지의 다른 부분의 주요 요소는 동일하게 유지해 해야한다.",
+        inputs=[],
+        outputs=prompt_input
+    )
+    submit_btn.click(
+        fn=generate_multiple_images,
+        inputs=[image1_input, image2_input, image3_input, prompt_input],
+        outputs=[output_image1, output_image2, output_image3, output_image4, output_text, prompt_display],
+    )
+    
+    gfpgan_btn.click(
+        fn=upscaler_korean, 
+        inputs=gfpgan_input, 
+        outputs=gfpgan_output
+    )
+
+demo.queue()
+demo.launch()