Update app.py

app.py

@@ -1,2 +1,746 @@
 import os
-exec(os.environ.get('APP'))
+import tempfile
+from PIL import Image, ImageEnhance, ImageFilter
+import gradio as gr
+import logging
+import re
+import time
+import cv2
+import numpy as np
+from io import BytesIO
+from datetime import datetime, timedelta
+import random
+from dotenv import load_dotenv
+from gradio_client import Client, handle_file
+
+load_dotenv()
+
+# 로깅 설정
+logging.basicConfig(level=logging.INFO, format='%(asctime)s - %(levelname)s - %(message)s')
+logger = logging.getLogger(__name__)
+
+
+# API 엔드포인트 설정 (환경변수에서만 설정)
+API_ENDPOINT = os.environ.get("API_ENDPOINT", "")
+
+if not API_ENDPOINT:
+    raise ValueError("API_ENDPOINT 환경변수가 설정되지 않았습니다.")
+
+# 클라이언트 초기화
+try:
+    client = Client(API_ENDPOINT)
+    logger.info("클라이언트 초기화 완료")
+except Exception as e:
+    logger.error(f"클라이언트 초기화 실패: {e}")
+    raise
+
+def safe_client_call(api_name, **kwargs):
+    """안전한 클라이언트 호출 함수"""
+    try:
+        return client.predict(api_name=api_name, **kwargs)
+    except Exception as e:
+        logger.error(f"API 호출 실패 ({api_name}): {e}")
+        return None
+
+def convert_image_to_file(image):
+    """PIL Image 객체를 임시 파일로 변환"""
+    if image is None:
+        return None
+    
+    try:
+        # PIL Image 객체인 경우
+        if hasattr(image, 'save'):
+            # 임시 파일 생성
+            temp_file = tempfile.NamedTemporaryFile(suffix='.png', delete=False)
+            image.save(temp_file.name, format='PNG')
+            temp_file.close()
+            return temp_file.name
+        # 이미 파일 경로인 경우
+        elif isinstance(image, str):
+            return image
+        # 기타 경우
+        else:
+            return image
+    except Exception as e:
+        logger.error(f"이미지 파일 변환 실패: {e}")
+        return None
+
+# ========== 이미지 생성기 관련 함수 (클라이언트 API 활용) ==========
+def generate_single_image(image1, image2, image3, prompt):
+    """단일 이미지 생성 - 원본 함수명 유지"""
+    try:
+        # 이미지 파일 처리 - PIL Image를 임시 파일로 변환
+        image1_path = convert_image_to_file(image1)
+        image2_path = convert_image_to_file(image2)
+        image3_path = convert_image_to_file(image3)
+        
+        # handle_file로 처리
+        image1_file = handle_file(image1_path) if image1_path else None
+        image2_file = handle_file(image2_path) if image2_path else None
+        image3_file = handle_file(image3_path) if image3_path else None
+        
+        result = safe_client_call(
+            "/generate_single_image",
+            image1=image1_file,
+            image2=image2_file,
+            image3=image3_file,
+            prompt=prompt
+        )
+        
+        if result:
+            return result[0], result[1], result[2]
+        else:
+            return None, "API 호출 실패", ""
+            
+    except Exception as e:
+        logger.error(f"단일 이미지 생성 실패: {e}")
+        return None, f"오류 발생: {str(e)}", ""
+
+def generate_multiple_images(image1, image2, image3, prompt, progress=gr.Progress()):
+    """다중 이미지 생성 - 원본 함수명 유지"""
+    try:
+        progress(0, desc="이미지 생성 준비 중...")
+        
+        # 이미지 파일 처리 - PIL Image를 임시 파일로 변환
+        image1_path = convert_image_to_file(image1)
+        image2_path = convert_image_to_file(image2)
+        image3_path = convert_image_to_file(image3)
+        
+        # handle_file로 처리
+        image1_file = handle_file(image1_path) if image1_path else None
+        image2_file = handle_file(image2_path) if image2_path else None
+        image3_file = handle_file(image3_path) if image3_path else None
+        
+        progress(0.5, desc="이미지 생성 중...")
+        
+        result = safe_client_call(
+            "/generate_multiple_images",
+            image1=image1_file,
+            image2=image2_file,
+            image3=image3_file,
+            prompt=prompt
+        )
+        
+        progress(1.0, desc="이미지 생성 완료!")
+        
+        if result:
+            return result[0], result[1], result[2], result[3]
+        else:
+            return None, None, "API 호출 실패", ""
+            
+    except Exception as e:
+        logger.error(f"다중 이미지 생성 실패: {e}")
+        return None, None, f"오류 발생: {str(e)}", ""
+
+# ========== 프롬프트 템플릿 함수들 - 클라이언트 API 활용 ==========
+def get_prompt_template_1():
+    """프롬프트 템플릿 1 - 부분변경-1"""
+    return "(#1의 여성)이 살짝 뒤로 돌아보는 모습으로 최대한 이전 seed를 유지한테 자연스럽게 변경하라."
+
+def get_prompt_template_2():
+    """프롬프트 템플릿 2 - 부분변경-2"""
+    return "(#1 레모모형)��서 청색상어레고만 검은색 고래레고로 변경하고 나머지 부분은 seed를 변경을 하지마라."
+
+def get_prompt_template_3():
+    """프롬프트 템플릿 3 - 부분변경-3"""
+    return "(#1 여행용 얼음박스)앞에 얼음이 담긴 3잔의 콜라가 놓여있는 이미지를 생성하라."
+
+def get_prompt_template_4():
+    """프롬프트 템플릿 4 - 글자지우기"""
+    return "(#1 이미지)에 있는 중국어를 모두 제거하라."
+
+def get_prompt_template_5():
+    """프롬프트 템플릿 5 - 글자변경"""
+    return '(#1의 텍스트)를 스타일을 유지한체 텍스트만 "Hello"로 바꿔라'
+
+def get_prompt_template_6():
+    """프롬프트 템플릿 6 - 상품착용-1"""
+    return "(#1의 여성모델)이 신체 비율과 포즈는 유지한 체 (#2의 선글라스)와 (#3의 청바지)를 직접 모델이 착용한것 처럼 자연스럽게 모습을 생성하라."
+
+def get_prompt_template_7():
+    """프롬프트 템플릿 7 - 상품착용-2"""
+    return "(#1의 여성모델)이 (#2의 선글라스)을 착용하고 (#3의 뒷배경의 카페전체가 보이며) 의자에 앉아 있는 모습을 생성하라."
+
+def get_prompt_template_8():
+    """프롬프트 템플릿 8 - 상품들고"""
+    return "(#1의 여성모델)이(#2의 와인잔)을 들고 있는 자연스러운 모습을 생성하라."
+
+def get_prompt_template_9():
+    """프롬프트 템플릿 9 - 배경바꾸기"""
+    return "(#1의 여성모델)이 (#2 카페)에서 자연스럽게 있는 모습을 생성하라."
+
+def get_prompt_template_10():
+    """프롬프트 템플릿 10 - 부분지우기"""
+    return "(#1의 레고모형)에서 청색상어레고를 제거한 후, 그 자리를 주변 배경과 자연스럽게 어우러지도록 채워주세요. 단, 이미지의 다른 부분의 주요 요소는 동일하게 유지 해야한다."
+
+def get_prompt_template_11():
+    """프롬프트 템플릿 11 - 이미지확장"""
+    return "(#1 이미지)를 원본그대로 중앙에 두고 비율로 유지한 체 위아래 및 좌우로 크게 확장하라."
+
+def get_prompt_template_12():
+    """프롬프트 템플릿 12 - 플레이팅-1"""
+    return "(#1셀러드)에 담은 용기는 버리고 넓고 흰 예쁜 접시에 (#1셀러드)음식만 가득 채워서 상업적인 각도로 어울리는 소품과 함께 플레이팅 한 모습을 이미지로 생성하라. "
+
+def get_prompt_template_13():
+    """프롬프트 템플릿 13 - 플레이팅-2"""
+    return "(#2 플레이팅한 이미지)에 담긴 음식을  (#1 샐러드)로 바꾸고 나머지는 시드를 유지한 체 이미지를 생성하라."
+
+def get_prompt_template_14():
+    """프롬프트 템플릿 14 - 플레이팅-3"""
+    return "(#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;
+    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;
+}
+
+/* Gradio 컨테이너 오버라이드 */
+.gradio-container {
+    max-width: 100% !important;
+    width: 100% !important;
+    margin: 0 auto !important;
+    padding: 0 !important;
+    background-color: var(--background-color) !important;
+    box-sizing: border-box !important;
+}
+
+/* 추가: 내부 컨테이너도 100% 너비로 설정 */
+.contain {
+    max-width: 100% !important;
+    width: 100% !important;
+}
+
+/* 추가: 각 행(Row)도 100% 너비로 설정 */
+.gr-padded {
+    padding: 0 !important;
+    width: 100% !important;
+    max-width: 100% !important;
+}
+
+/* 6. 카드 및 패널 스타일 */
+.gr-group,
+.gr-form,
+.gr-box,
+.gr-panel,
+.custom-frame,
+[class*="frame"],
+[class*="card"],
+[class*="panel"] {
+    background-color: var(--card-bg) !important;
+    border-radius: var(--border-radius) !important;
+    box-shadow: var(--shadow) !important;
+    padding: 1.5rem !important;
+    margin-bottom: 1.5rem !important;
+    border: 1px solid var(--border-color) !important;
+    transition: transform 0.3s ease, background-color 0.3s ease;
+    color: var(--text-color) !important;
+}
+
+.gr-group:hover {
+    transform: translateY(-5px);
+}
+
+/* 7. 입력 필드 스타일 */
+input[type="text"],
+input[type="number"],
+input[type="email"],
+input[type="password"],
+textarea,
+select,
+.gr-input,
+.gr-text-input,
+.gr-textarea,
+.gr-dropdown {
+    background-color: var(--input-bg) !important;
+    color: var(--text-color) !important;
+    border: 1px solid var(--border-color) !important;
+    border-radius: var(--border-radius) !important;
+    padding: 12px !important;
+    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05) !important;
+    transition: all 0.3s ease !important;
+}
+
+input[type="text"]:focus,
+input[type="number"]:focus,
+input[type="email"]:focus,
+input[type="password"]:focus,
+textarea:focus,
+select:focus,
+.gr-input:focus,
+.gr-text-input: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. 라벨 및 텍스트 요소 */
+label,
+.gr-label,
+.gr-checkbox label,
+.gr-radio label,
+p, span, div {
+    color: var(--text-color) !important;
+}
+
+/* 9. 섹션 제목 */
+.section-title {
+    font-size: 22px !important;
+    font-weight: 700 !important;
+    color: var(--text-color) !important;
+    margin-bottom: 1rem !important;
+    padding-bottom: 0.5rem !important;
+    border-bottom: 2px solid var(--primary-color) !important;
+    display: flex;
+    align-items: center;
+}
+
+.section-title span {
+    color: var(--primary-color);
+}
+
+/* 10. 버튼 스타일링 */
+.custom-button {
+    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)) !important;
+    color: white !important;
+    font-weight: 600 !important;
+    border: none !important;
+    border-radius: 30px !important;
+    padding: 12px 24px !important;
+    box-shadow: 0 4px 8px rgba(251, 127, 13, 0.25) !important;
+    transition: all 0.3s ease !important;
+    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 6px 12px rgba(251, 127, 13, 0.3) !important;
+}
+
+.custom-button.primary {
+    background: linear-gradient(135deg, var(--accent-color), #ff9a8b) !important;
+}
+
+button:not([class*="custom"]):not([class*="primary"]):not([class*="secondary"]) {
+    background-color: var(--card-bg) !important;
+    color: var(--text-color) !important;
+    border: 1px solid var(--border-color) !important;
+    border-radius: var(--border-radius) !important;
+    transition: all 0.3s ease !important;
+}
+
+/* 11. 이미지 컨테이너 */
+.image-container {
+    border-radius: var(--border-radius);
+    overflow: hidden;
+    border: 1px solid var(--border-color);
+    transition: all 0.3s ease;
+    background-color: var(--card-bg);
+}
+
+.image-container:hover {
+    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
+}
+
+/* 12. 테이블 스타일 */
+table {
+    background-color: var(--card-bg) !important;
+    color: var(--text-color) !important;
+    border-color: var(--border-color) !important;
+}
+
+table th {
+    background-color: var(--primary-color) !important;
+    color: white !important;
+    border-color: var(--border-color) !important;
+}
+
+table td {
+    background-color: var(--card-bg) !important;
+    color: var(--text-color) !important;
+    border-color: var(--border-color) !important;
+}
+
+table tbody tr:nth-child(even) {
+    background-color: var(--table-even-bg) !important;
+}
+
+table tbody tr:hover {
+    background-color: var(--table-hover-bg) !important;
+}
+
+/* 13. 체크박스 및 라디오 버튼 */
+input[type="checkbox"],
+input[type="radio"] {
+    accent-color: var(--primary-color) !important;
+}
+
+/* 14. 버튼 그룹 */
+.button-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+    gap: 0.8rem;
+    margin-bottom: 1.2rem;
+}
+
+/* 15. 스크롤바 스타일 */
+::-webkit-scrollbar-thumb:hover {
+    background: var(--secondary-color);
+}
+
+/* 16. 아코디언 및 드롭다운 */
+details {
+    background-color: var(--card-bg) !important;
+    border-color: var(--border-color) !important;
+    color: var(--text-color) !important;
+}
+
+details summary {
+    background-color: var(--card-bg) !important;
+    color: var(--text-color) !important;
+}
+
+/* 17. 툴팁 및 팝업 */
+[data-tooltip]:hover::after,
+.tooltip,
+.popup {
+    background-color: var(--card-bg) !important;
+    color: var(--text-color) !important;
+    border-color: var(--border-color) !important;
+    box-shadow: var(--shadow-light) !important;
+}
+
+/* 18. 모달 및 오버레이 */
+.modal,
+.overlay,
+[class*="modal"],
+[class*="overlay"] {
+    background-color: var(--card-bg) !important;
+    color: var(--text-color) !important;
+    border-color: var(--border-color) !important;
+}
+
+/* 19. 추가 Gradio 컴포넌트들 */
+.gr-block,
+.gr-group,
+.gr-row,
+.gr-column {
+    background-color: var(--background-color) !important;
+    color: var(--text-color) !important;
+}
+
+/* 20. 코드 블록 및 pre 태그 */
+code,
+pre,
+.code-block {
+    background-color: var(--table-even-bg) !important;
+    color: var(--text-color) !important;
+    border-color: var(--border-color) !important;
+}
+
+/* 21. 알림 및 메시지 */
+.alert,
+.message,
+.notification,
+[class*="alert"],
+[class*="message"],
+[class*="notification"] {
+    background-color: var(--card-bg) !important;
+    color: var(--text-color) !important;
+    border-color: var(--border-color) !important;
+}
+
+/* 22. 애니메이션 스타일 */
+@keyframes fadeIn {
+    from { opacity: 0; transform: translateY(10px); }
+    to { opacity: 1; transform: translateY(0); }
+}
+
+.fade-in {
+    animation: fadeIn 0.5s ease-out;
+}
+
+/* 23. Examples 섹션 스타일 */
+.examples-section {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+    gap: 1.5rem;
+    margin-top: 1rem;
+}
+
+.example-item {
+    background-color: var(--card-bg);
+    border-radius: var(--border-radius);
+    overflow: hidden;
+    box-shadow: var(--shadow);
+    transition: transform 0.3s ease, background-color 0.3s ease;
+}
+
+.example-item:hover {
+    transform: translateY(-5px);
+}
+
+/* 24. 전환 애니메이션 */
+* {
+    transition: background-color 0.3s ease, 
+                color 0.3s ease, 
+                border-color 0.3s ease !important;
+}
+
+/* 25. 반응형 */
+@media (max-width: 768px) {
+    .button-grid {
+        grid-template-columns: repeat(2, 1fr);
+    }
+    .examples-section {
+        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+    }
+}
+"""
+
+# 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" />
+"""
+
+# 제목과 사용 가이드 제거
+header_html = ""
+image_generator_guide_html = ""
+
+# UI 구성
+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"]
+)) as demo:
+    gr.HTML(fontawesome_link)
+    
+    with gr.Row(equal_height=True):
+        with gr.Column(scale=1):
+            # ======== 이미지 업로드 및 설정 섹션 ========
+            with gr.Group():
+                gr.HTML('<div class="section-title"><i class="fas fa-upload"></i> <span>이미지 업로드 및 설정</span></div>')
+                with gr.Row():
+                    image1_input = gr.Image(type="pil", label="#1", image_mode="RGB", elem_classes="image-container", height=400)
+                    image2_input = gr.Image(type="pil", label="#2", image_mode="RGB", elem_classes="image-container", height=400)
+                    image3_input = gr.Image(type="pil", label="#3", image_mode="RGB", elem_classes="image-container", height=400)
+                
+                # 프롬프트 입력 필드 추가
+                prompt_input = gr.Textbox(
+                    lines=3,
+                    placeholder="프롬프트를 입력하거나 비워두면 자동 합성됩니다. '#1', '#2', '#3'으로 각 이미지를 참조할 수 있습니다.",
+                    label="프롬프트 (선택 사항)",
+                    elem_classes="gr-text-input"
+                )
+            
+            # ======== 변환 옵션 섹션 ========
+            with gr.Group():
+                gr.HTML('<div class="section-title"><i class="fas fa-sliders-h"></i> <span>프롬프트 템플릿</span></div>')
+                with gr.Column(elem_classes="button-grid"):
+                    image_change_btn1 = gr.Button('🔄 부분변경-1', elem_classes="custom-button")
+                    image_change_btn2 = gr.Button('🔄 부분변경-2', elem_classes="custom-button")
+                    image_change_btn3= gr.Button('🔄 부분변경-3', elem_classes="custom-button")
+                    text_remove_btn = gr.Button('🧹 글자지우기', elem_classes="custom-button")
+                    text_change_btn = gr.Button('🔤 글자변경', elem_classes="custom-button")
+                    clothes_change_btn1 = gr.Button('👕 상품착용-1', elem_classes="custom-button")
+                    clothes_change_btn2 = gr.Button('👓 상품착용-2', elem_classes="custom-button")
+                    holding_product_btn = gr.Button('🍷 상품들고', elem_classes="custom-button")
+                    background_change_btn = gr.Button('🖼️ 배경바꾸기', elem_classes="custom-button")
+                    composite_product_btn = gr.Button('✂️ 부분지우기', elem_classes="custom-button")
+                    outpainting_btn = gr.Button('🔍 이미지확장', elem_classes="custom-button")
+                    food_btn_1 = gr.Button('🍽️ 플레이팅-1', elem_classes="custom-button")
+                    food_btn_2 = gr.Button('🍽️ 플레이팅-2', elem_classes="custom-button")
+                    food_btn_3 = gr.Button('🍽️ 플레이팅-3', elem_classes="custom-button")
+            
+            # ======== 이미지 생성 섹션 ========
+            with gr.Group():
+                gr.HTML('<div class="section-title"><i class="fas fa-image"></i> <span>이미지 생성</span></div>')
+                submit_single_btn = gr.Button('✨ 이미지 생성 (1장)', elem_classes="custom-button primary")
+                submit_btn = gr.Button('✨ 이미지 생성 (2장)', elem_classes="custom-button primary")
+                
+        with gr.Column(scale=1):
+            # ======== 생성된 이미지 섹션 ========
+            with gr.Group():
+                gr.HTML('<div class="section-title"><i class="fas fa-images"></i> <span>생성된 이미지</span></div>')
+                with gr.Row():
+                    with gr.Column():
+                        output_image1 = gr.Image(label="이미지 #1", elem_classes="image-container", height=400)
+                    with gr.Column():
+                        output_image2 = gr.Image(label="이미지 #2", elem_classes="image-container", height=400)
+            
+            # ======== 결과 정보 섹션 ========
+            with gr.Group():
+                gr.HTML('<div class="section-title"><i class="fas fa-info-circle"></i> <span>결과 정보</span></div>')
+                output_text = gr.Textbox(label="상태 메시지", lines=2, elem_classes="gr-text-input")
+                prompt_display = gr.Textbox(label="사용된 프롬프트 (영어)", visible=True, lines=2, elem_classes="gr-text-input")
+    
+    # ======== 예제 이미지 섹션 ========
+    gr.HTML('<div class="section-title"><i class="fas fa-lightbulb"></i> <span>예제 이미지</span></div>')
+    
+    # 모든 예제 한 페이지에 표시
+    examples = [
+        ["down/모델.jpg", None, None, "(#1의 여성)이 살짝 뒤로 돌아보는 모습으로 최대한 이전 seed를 유지한체 자연스럽게 변경하라."],
+        ["down/상어레고모형.png", None, None, "(#1 레모모형)에서 청색상어레고만 검은색 고래레고로 변경하고 나머지 부분은 seed를 변경을 하지마라."],
+        ["down/얼음가방.png", None, None, "(#1 여행용 얼음박스)앞에 얼음이 담긴 3잔의 콜라가 놓여있는 이미지를 생성하라."],
+        ["down/중국어.png", None, None, "(#1 이미지)에 있는 중국어를 모두 제거하라."],
+        ["down/텍스트.webp", None, None, '(#1의 텍스트)를 스타일을 유지한체 텍스트만 "Hello"로 바꿔라'],
+        ["down/모델2.png", "down/선글라스.png", "down/청바지.png", "(#1의 여성모델)이 신체 비율과 포즈는 유지한 체 (#2의 선글라스)와 (#3의 청바지)를 직접 모델이 착용한것 처럼 자연스럽게 모습을 생성하라."],
+        ["down/모델2.png", "down/선글라스.png", "down/카페전경.png", "(#1의 여성모델)이 (#2의 선글라스)을 착용하고 (#3의 뒷배경의 카페전체가 보이며) 의자에 앉아 있는 모습을 생성하라."],
+        ["down/모델2.png", "down/와인잔.png", None, "(#1의 여성모델)이(#2의 와인잔)을 들고 있는 자연스러운 모습을 생성하���."],
+        ["down/모델2.png", "down/카페전경.png", None, "(#1의 여성모델)이 (#2 카페)에서 자연스럽게 있는 모습을 생성하라."],
+        ["down/상어레고모형.png", None, None, "(#1의 레고모형)에서 청색상어레고를 제거한 후, 그 자리를 주변 배경과 자연스럽게 어우러지도록 채워주세요. 단, 이미지의 다른 부분의 주요 요소는 동일하게 유지해야한다."],
+        ["down/카페전경.png", None, None, "(#1 이미지)를 원본그대로 중앙에 두고 비율로 유지한 체 위아래 및 좌우로 크게 확장하라."],
+        ["down/샐러드.png", None, None, "(#1셀러드)에 담은 용기는 버리고 넓고 흰 예쁜 접시에  (#1셀러드)음식만 가득 채워서 상업적인 각도로 어울리는 소품과 함께 플레이팅 한 모습을 이미지로 생성하라. "],
+        ["down/샐러드.png", "down/플레이팅.png", None, "(#2 플레이팅한 이미지)에 담긴 음식을  (#1 샐러드)로 바꾸고 나머지는 시드를 유지한 체 이미지를 생성하라."],
+        ["down/컵.png", None, None, "(#1컵)에 딸기, 바닐라, 초코 아이스크림을 담고 그 위에 초코 시럽이 흐르게 이미지를 생성하라."]
+    ]
+    
+    # 모든 예제를 한 페이지에 표시하도록 수정된 부분
+    gr.Examples(
+        examples=examples,
+        inputs=[image1_input, image2_input, image3_input, prompt_input],
+        examples_per_page=len(examples)  # 모든 예제를 한 페이지에 표시
+    )
+    
+    # ========== 이미지 생성기 이벤트 연결 ==========
+    # 버튼 이벤트 연결 - 프롬프트 템플릿
+    image_change_btn1.click(fn=get_prompt_template_1, outputs=prompt_input)
+    image_change_btn2.click(fn=get_prompt_template_2, outputs=prompt_input)
+    image_change_btn3.click(fn=get_prompt_template_3, outputs=prompt_input)
+    text_remove_btn.click(fn=get_prompt_template_4, outputs=prompt_input)
+    text_change_btn.click(fn=get_prompt_template_5, outputs=prompt_input)
+    clothes_change_btn1.click(fn=get_prompt_template_6, outputs=prompt_input)
+    clothes_change_btn2.click(fn=get_prompt_template_7, outputs=prompt_input)
+    holding_product_btn.click(fn=get_prompt_template_8, outputs=prompt_input)
+    background_change_btn.click(fn=get_prompt_template_9, outputs=prompt_input)
+    composite_product_btn.click(fn=get_prompt_template_10, outputs=prompt_input)
+    outpainting_btn.click(fn=get_prompt_template_11, outputs=prompt_input)
+    food_btn_1.click(fn=get_prompt_template_12, outputs=prompt_input)
+    food_btn_2.click(fn=get_prompt_template_13, outputs=prompt_input)
+    food_btn_3.click(fn=get_prompt_template_14, outputs=prompt_input)
+    
+    # 단일 이미지 생성 버튼 이벤트 연결
+    submit_single_btn.click(
+        fn=generate_single_image,
+        inputs=[image1_input, image2_input, image3_input, prompt_input],
+        outputs=[output_image1, output_text, prompt_display],
+    )
+    
+    # 2장 이미지 생성 버튼 이벤트 연결
+    submit_btn.click(
+        fn=generate_multiple_images,
+        inputs=[image1_input, image2_input, image3_input, prompt_input],
+        outputs=[output_image1, output_image2, output_text, prompt_display],
+    )
+
+# 애플리케이션 실행
+demo.queue()
+demo.launch(share=False, inbrowser=True, width="100%")