Update app.py

app.py

@@ -1160,14 +1160,28 @@ with gr.Blocks(css=custom_css) as demo:
         
         # 이미지 필터 탭 UI 개선
         with gr.TabItem("🖌️ 이미지 필터", elem_classes="tab-content"):
-            with gr.Row(equal_height=True):
-                # 왼쪽 열: 입력 이미지와 슬라이더
-                with gr.Column(scale=1, elem_classes="panel"):
-                    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", height=400)
+            with gr.Row():
+                with gr.Column(elem_classes="panel"):
+                    gr.HTML('<div class="section-title"><i class="fas fa-sliders-h"></i> 이미지 필터</div>')
+                    gr.HTML("""
+                    <p style="margin-bottom: 1rem; font-size: 1.05rem;">
+                         이미지 필터를 적용하여 색상과 톤을 조절합니다.
+                    </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>')
+                            filter_input_image = gr.Image(type="pil", label="업로드", elem_classes="image-container")
+                        
+                        with gr.Column():
+                            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")
                     
-                    # 조정 슬라이더
+                    gr.HTML('<div class="section-title"><i class="fas fa-sliders-h"></i> 필터 조절</div>')
                     with gr.Group():
                         brightness_slider = gr.Slider(0.0, 2.0, value=1.0, step=0.1, label="밝기 조절")
                         contrast_slider = gr.Slider(0.5, 1.5, value=1.0, step=0.1, label="대비 조절")
@@ -1177,13 +1191,7 @@ with gr.Blocks(css=custom_css) as demo:
                         exposure_slider = gr.Slider(-5.0, 5.0, value=0.0, step=0.1, label="노출 조절")
                         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="그림자 조절")
-                
-                # 오른쪽 열: 처리된 이미지
-                with gr.Column(scale=1, 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", height=400)           
+                        shadows_slider = gr.Slider(-100.0, 100.0, value=0.0, step=1.0, label="그림자 조절")         
 
             # 이미지 처리 함수 연결
             inputs = [