Update app.py

app.py

@@ -908,159 +908,165 @@ user_manual_html = """
 </div>
 """
 
-# 사용 설명서 탭을 첫 번째로 배치
-with gr.TabItem("📚 사용 설명서", elem_classes="tab-content"):
-    gr.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>
+# 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"):
+            gr.HTML("""
+            <div class="user-manual">
+                <div class="manual-title"><i class="fas fa-book"></i> 사용 설명서</div>
                 
-                <span style="font-size: 1.1rem; font-weight: 600; color: #5561e9;">3️⃣ 이미지 생성</span><br>
-                '이미지 생성 (1장)' 버튼을 클릭하면 1개의 이미지가, '이미지 생성 (4장)' 버튼을 클릭하면 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="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>
+                        '이미지 생성 (1장)' 버튼을 클릭하면 1개의 이미지가, '이미지 생성 (4장)' 버튼을 클릭하면 4가지 버전의 이미지가 생성됩니다.
+                    </p>
+                </div>
                 
-                <div class="tip-box">
-                    <i class="fas fa-lightbulb"></i> <strong>팁:</strong> 예를 들어, "(#1의 여성모델)이 (#2의 선글라스)를 착용한 모습"과 같이 사용할 수 있습니다.
+                <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>
-            </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>
-                        <p style="font-size: 1.1rem; font-weight: 600; color: #ff6b6b;"><i class="fas fa-cut"></i> 부분 지우기</p>
-                        이미지의 특정 부분을 지우고 배경과 자연스럽게 조화되도록 채웁니다.
-                    </div>
-                    
-                    <div>
-                        <p style="font-size: 1.1rem; font-weight: 600; color: #ff6b6b;"><i class="fas fa-wine-glass"></i> 상품들고 있기</p>
-                        모델이 상품을 들고 있는 자연스러운 포즈의 이미지를 생성합니다.
-                    </div>
-                    
-                    <div>
-                        <p style="font-size: 1.1rem; font-weight: 600; color: #ff6b6b;"><i class="fas fa-expand-alt"></i> 이미지 확장</p>
-                        원본 이미지 주변에 자연스럽게 추가 영역을 생성하여 이미지를 확장합니다.
-                    </div>
-                    
-                    <div>
-                        <p style="font-size: 1.1rem; font-weight: 600; color: #ff6b6b;"><i class="fas fa-sliders-h"></i> 이미지 필터</p>
-                        밝기, 대비, 채도 등을 조절하여 이미지를 전문적으로 편집합니다.
+                
+                <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>
+                                <p style="font-size: 1.1rem; font-weight: 600; color: #ff6b6b;"><i class="fas fa-cut"></i> 부분 지우기</p>
+                                이미지의 특정 부분을 지우고 배경과 자연스럽게 조화되도록 채웁니다.
+                            </div>
+                            
+                            <div>
+                                <p style="font-size: 1.1rem; font-weight: 600; color: #ff6b6b;"><i class="fas fa-wine-glass"></i> 상품들고 있기</p>
+                                모델이 상품을 들고 있는 자연스러운 포즈의 이미지를 생성합니다.
+                            </div>
+                            
+                            <div>
+                                <p style="font-size: 1.1rem; font-weight: 600; color: #ff6b6b;"><i class="fas fa-expand-alt"></i> 이미지 확장</p>
+                                원본 이미지 주변에 자연스럽게 추가 영역을 생성하여 이미지를 확장합니다.
+                            </div>
+                            
+                            <div>
+                                <p style="font-size: 1.1rem; font-weight: 600; color: #ff6b6b;"><i class="fas fa-sliders-h"></i> 이미지 필터</p>
+                                밝기, 대비, 채도 등을 조절하여 이미지를 전문적으로 편집합니다.
+                            </div>
+                        </div>
                     </div>
                 </div>
-            </div>
-        </div>
-        
-        <div class="manual-section">
-            <div class="manual-section-title"><i class="fas fa-search-plus"></i> 이미지 업스케일러</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>
                 
-                <div class="tip-box">
-                    <i class="fas fa-lightbulb"></i> <strong>팁:</strong> 이미지의 크기가 작을수록 처리 속도가 빠릅니다. 얼굴이 포함된 이미지에서 가장 좋은 결과를 얻을 수 있습니다.
+                <div class="manual-section">
+                    <div class="manual-section-title"><i class="fas fa-search-plus"></i> 이미지 업스케일러</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>
+                        
+                        <div class="tip-box">
+                            <i class="fas fa-lightbulb"></i> <strong>팁:</strong> 이미지의 크기가 작을수록 처리 속도가 빠릅니다. 얼굴이 포함된 이미지에서 가장 좋은 결과를 얻을 수 있습니다.
+                        </div>
+                    </p>
+                </div>
+                
+                <div class="manual-section">
+                    <div class="manual-section-title"><i class="fas fa-cut"></i> 배경 지우기 기능</div>
+                    <p class="manual-text">
+                        <span style="font-size: 1.1rem; font-weight: 600; color: #5561e9;">자동 배경 제거</span><br>
+                        이미지에서 배경을 자동으로 감지하고 제거하여 투명한 PNG 이미지로 변환합니다.<br>
+                        주요 사용 사례:
+                        <ul>
+                            <li>제품 이미지의 배경 제거</li>
+                            <li>인물 사진에서 배경 분리</li>
+                            <li>여러 이미지 합성을 위한 준비</li>
+                        </ul>
+                        
+                        <div class="tip-box">
+                            <i class="fas fa-lightbulb"></i> <strong>팁:</strong> 배경과 주요 피사체 간의 대비가 뚜렷할수록 더 정확한 결과를 얻을 수 있습니다. 복잡한 배경의 경우 미세 조정이 필요할 수 있습니다.
+                        </div>
+                    </p>
                 </div>
-            </p>
-        </div>
-        
-        <div class="manual-section">
-            <div class="manual-section-title"><i class="fas fa-cut"></i> 배경 지우기 기능</div>
-            <p class="manual-text">
-                <span style="font-size: 1.1rem; font-weight: 600; color: #5561e9;">자동 배경 제거</span><br>
-                이미지에서 배경을 자동으로 감지하고 제거하여 투명한 PNG 이미지로 변환합니다.<br>
-                주요 사용 사례:
-                <ul>
-                    <li>제품 이미지의 배경 제거</li>
-                    <li>인물 사진에서 배경 분리</li>
-                    <li>여러 이미지 합성을 위한 준비</li>
-                </ul>
                 
-                <div class="tip-box">
-                    <i class="fas fa-lightbulb"></i> <strong>팁:</strong> 배경과 주요 피사체 간의 대비가 뚜렷할수록 더 정확한 결과를 얻을 수 있습니다. 복잡한 배경의 경우 미세 조정이 필요할 수 있습니다.
+                <div class="manual-section">
+                    <div class="manual-section-title"><i class="fas fa-sliders-h"></i> 이미지 필터 기능</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>편집 완료 후 JPG 형식으로 저장 가능</li>
+                        </ul>
+                        
+                        <div class="tip-box">
+                            <i class="fas fa-lightbulb"></i> <strong>팁:</strong> 각 슬라이더를 조금씩 조절하며 원하는 효과를 찾아보세요.
+                        </div>
+                    </p>
                 </div>
-            </p>
-        </div>
-        
-        <div class="manual-section">
-            <div class="manual-section-title"><i class="fas fa-sliders-h"></i> 이미지 필터 기능</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>편집 완료 후 JPG 형식으로 저장 가능</li>
-                </ul>
                 
-                <div class="tip-box">
-                    <i class="fas fa-lightbulb"></i> <strong>팁:</strong> 각 슬라이더를 조금씩 조절하며 원하는 효과를 찾아보세요.
+                <div class="manual-section">
+                    <div class="manual-section-title"><i class="fas fa-question-circle"></i> 자주 묻는 질문</div>
+                    <p class="manual-text">
+                        <strong style="font-size: 1.1rem; color: #5561e9;">Q: 어떤 형식의 이미지를 업로드할 수 있나요?</strong><br>
+                        A: JPG, PNG, WEBP 등 대부분의 일반적인 이미지 형식을 지원합니다.<br><br>
+                        
+                        <strong style="font-size: 1.1rem; color: #5561e9;">Q: 이미지 생성 및 처리에 얼마나 시간이 걸리나요?</strong><br>
+                        A: 일반적으로 10-30초 정도 소요되며, 이미지 크기와 복잡도에 따라 달라질 수 있습니다.<br><br>
+                        
+                        <strong style="font-size: 1.1rem; color: #5561e9;">Q: 생성된 이미지를 어떻게 저장할 수 있나요?</strong><br>
+                        A: 생성된 이미지에 마우스 오른쪽 버튼을 클릭하여 '이미지 저장' 옵션을 선택하면 됩니다.
+                    </p>
                 </div>
-            </p>
-        </div>
+            </div>
+            """)
         
-        <div class="manual-section">
-            <div class="manual-section-title"><i class="fas fa-question-circle"></i> 자주 묻는 질문</div>
-            <p class="manual-text">
-                <strong style="font-size: 1.1rem; color: #5561e9;">Q: 어떤 형식의 이미지를 업로드할 수 있나요?</strong><br>
-                A: JPG, PNG, WEBP 등 대부분의 일반적인 이미지 형식을 지원합니다.<br><br>
-                
-                <strong style="font-size: 1.1rem; color: #5561e9;">Q: 이미지 생성 및 처리에 얼마나 시간이 걸리나요?</strong><br>
-                A: 일반적으로 10-30초 정도 소요되며, 이미지 크기와 복잡도에 따라 달라질 수 있습니다.<br><br>
-                
-                <strong style="font-size: 1.1rem; color: #5561e9;">Q: 생성된 이미지를 어떻게 저장할 수 있나요?</strong><br>
-                A: 생성된 이미지에 마우스 오른쪽 버튼을 클릭하여 '이미지 저���' 옵션을 선택하면 됩니다.
-            </p>
-        </div>
-    </div>
-    """)
-            
         with gr.TabItem("✨ 이커머스 이미지 생성기", elem_classes="tab-content"):
             with gr.Row(equal_height=True):
                 with gr.Column(scale=1):
@@ -1129,7 +1135,7 @@ with gr.TabItem("📚 사용 설명서", elem_classes="tab-content"):
                     examples=examples,
                     inputs=[image1_input, image2_input, image3_input, prompt_input]
                 )
-            
+        
         with gr.TabItem("🔍 이미지 업스케일러", elem_classes="tab-content"):
             with gr.Row():
                 with gr.Column(elem_classes="panel"):
@@ -1180,9 +1186,8 @@ with gr.TabItem("📚 사용 설명서", elem_classes="tab-content"):
                     with gr.Row():
                         bg_remove_status = gr.Textbox(label="상태", lines=2, elem_classes="custom-input")
                         bg_remove_btn = gr.Button('✂️ 배경 제거하기', elem_classes="custom-button primary")
-                        
-
-        # UI 구성에 이미지 필터 탭 추가 (기존 탭 다음에 추가)
+        
+        # 이미지 필터 탭
         with gr.TabItem("🖌️ 이미지 필터", elem_classes="tab-content"):
             with gr.Row(equal_height=True):
                 # 왼쪽 열: 비율 3
@@ -1190,7 +1195,7 @@ with gr.TabItem("📚 사용 설명서", elem_classes="tab-content"):
                     gr.HTML('<div class="section-title"><i class="fas fa-sliders-h"></i> 이미지 필터 설정</div>')
                     # 이미지 업로드
                     filter_input_image = gr.Image(type="pil", label="이미지 업로드", elem_classes="image-container")
-        
+                
                     # 조정 슬라이더
                     with gr.Group():
                         brightness_slider = gr.Slider(0.0, 2.0, value=1.0, step=0.1, label="밝기 조절")
@@ -1202,19 +1207,19 @@ with gr.TabItem("📚 사용 설명서", elem_classes="tab-content"):
                         vibrance_slider = gr.Slider(-100.0, 100.0, value=0.0, step=1.0, label="활기 조절")
                         color_mixer_blues_slider = gr.Slider(-100.0, 100.0, value=0.0, step=1.0, label="컬러 믹서 (블루)")
                         shadows_slider = gr.Slider(-100.0, 100.0, value=0.0, step=1.0, label="그림자 조절")
-        
+                
                 # 오른쪽 열: 비율 7
                 with gr.Column(scale=7, elem_classes="panel"):
                     gr.HTML('<div class="section-title"><i class="fas fa-image"></i> 필터 적용 결과</div>')
                     # 처리된 이미지 출력
                     filter_output_image = gr.Image(type="pil", label="처리된 이미지", elem_classes="image-container")
-        
+                
                     # 변환된 이미지 다운로드 버튼
                     with gr.Row():
                         gr.HTML('<div class="section-title"><i class="fas fa-download"></i> 이미지 저장</div>')
                         download_button = gr.Button("JPG로 변환하기", elem_classes="custom-button primary")
                         download_output = gr.File(label="JPG 이미지 다운로드")
-        
+            
             # 이미지 처리 함수 연결
             inputs = [
                 filter_input_image,
@@ -1228,7 +1233,7 @@ with gr.TabItem("📚 사용 설명서", elem_classes="tab-content"):
                 color_mixer_blues_slider,
                 shadows_slider
             ]
-        
+            
             input_components = [
                 brightness_slider,
                 contrast_slider,
@@ -1240,20 +1245,20 @@ with gr.TabItem("📚 사용 설명서", elem_classes="tab-content"):
                 color_mixer_blues_slider,
                 shadows_slider
             ]
-        
+            
             for input_component in input_components:
                 input_component.change(
                     fn=process_image,
                     inputs=inputs,
                     outputs=filter_output_image
                 )
-        
+            
             filter_input_image.change(
                 fn=lambda x, *args: process_image(x, *args) if x is not None else None,
                 inputs=inputs,
                 outputs=filter_output_image
             )
-        
+            
             # 다운로드 버튼 기능
             download_button.click(
                 fn=download_image,