Update app.py

app.py

@@ -785,7 +785,84 @@ with gr.Blocks(css=custom_css) as demo:
                                 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"델)이 신체 비율과 포즈는 유치한 체 (#2의 선글라스)와 (#3의 청바지)를 직접 모델이 착용한것 처럼 자연스럽게 이미지를 생성하라.",
+                                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():
+                            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():
+                            gr.HTML('<div class="section-title"><i class="fas fa-download"></i> 결과 이미지</div>')
+                            gfpgan_output = gr.Image(type="numpy", label="업스케일 결과", elem_classes="image-container")
+                    
+                    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
     )