Update app.py

app.py

@@ -908,171 +908,156 @@ user_manual_html = """
 </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"):
-            gr.HTML("""
-            <div class="user-manual">
-                <div class="manual-title"><i class="fas fa-book"></i> 사용 설명서</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>
                 
-                <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>
+                <span style="font-size: 1.1rem; font-weight: 600; color: #5561e9;">2️⃣ 프롬프트 입력 또는 버튼 선택</span><br>
+                변환하고 싶은 내용을 직접 입력하거나, 미리 정의된 버튼 중 하나를 선택하세요.<br><br>
                 
-                <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>
+                <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-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>
+                <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>
+                        <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 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="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 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="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 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-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="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 class="tip-box">
+                    <i class="fas fa-lightbulb"></i> <strong>팁:</strong> 각 슬라이더를 조금씩 조절하며 원하는 효과를 찾아보세요.
                 </div>
-            </div>
-    
-    # 사용 설명서 탭의 HTML에 이미지 필터 기능 설명 추가
-    # 기존 <div class="manual-section"> 패턴과 동일하게 작성했습니다
-    
-    # 이 부분을 사용 설명서 HTML의 적절한 위치 (다른 섹션 다음)에 추가
-    """
-    <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>
-    """
-    
-    # 또한 "주요 기능" 섹션의 그리드에 이미지 필터 항목 추가
-    # 기존 그리드 항목들 다음에 이 항목을 추가하세요
-    """
-    <div>
-        <p style="font-size: 1.1rem; font-weight: 600; color: #ff6b6b;"><i class="fas fa-sliders-h"></i> 이미지 필터</p>
-        밝기, 대비, 채도 등을 조절하여 이미지를 전문적으로 편집합니다.
+            </p>
+        </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>
     """)