Update app.py

app.py

@@ -770,25 +770,129 @@ with gr.Blocks(css=custom_css) as demo:
     with gr.Tabs(elem_classes="custom-tabs") as tabs:
         # 사용 설명서 탭을 첫 번째로 배치
         with gr.TabItem("📚 사용 설명서", elem_classes="tab-content"):
-            gr.HTML(user_manual_html)
-            
-            # 추가적인 사용 설명 내용이 필요하다면 여기에 작성할 수 있습니다
             gr.HTML("""
-            <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="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>
+                        '이미지 생성 (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="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>
+                    </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>
+                        
+                        <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>
+                
+                <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):
@@ -819,7 +923,9 @@ with gr.Blocks(css=custom_css) as demo:
                             background_change_btn = gr.Button('🖼️ 배경 바꾸기', elem_classes="custom-button")
                             composite_product_btn = gr.Button('✂️ 부분 지우기', elem_classes="custom-button")
                         
-                        submit_btn = gr.Button('✨ 이미지 생성 (4장)', elem_classes="custom-button primary")
+                        with gr.Row():
+                            submit_single_btn = gr.Button('✨ 이미지 생성 (1장)', elem_classes="custom-button primary")
+                            submit_btn = gr.Button('✨ 이미지 생성 (4장)', elem_classes="custom-button primary")
                 
                 with gr.Column(scale=1):
                     with gr.Group(elem_classes="panel"):
@@ -952,6 +1058,15 @@ with gr.Blocks(css=custom_css) as demo:
         inputs=[],
         outputs=prompt_input
     )
+    
+    # 단일 이미지 생성 버튼 이벤트 연결
+    submit_single_btn.click(
+        fn=lambda image1, image2, image3, prompt: process_images_with_prompt(image1, image2, image3, prompt, 0),
+        inputs=[image1_input, image2_input, image3_input, prompt_input],
+        outputs=[output_image1, output_text, prompt_display],
+    )
+    
+    # 4장 이미지 생성 버튼 이벤트 연결
     submit_btn.click(
         fn=generate_multiple_images,
         inputs=[image1_input, image2_input, image3_input, prompt_input],