Update app.py

app.py

@@ -36,16 +36,29 @@ def transform_image(image, contrast, brightness, blur):
 
 def generate_comparison_html(original_base64, transformed_base64):
     """
-    변환된 이미지와 원본 이미지를 비교할 수 있는 슬라이더 HTML을 생성합니다.
+    변환된 이미지와 원본 이미지를 비교할 수 있는 수직 슬라이더 HTML을 생성합니다.
     변환된 이미지를 기준으로 슬라이더를 움직여 원본 이미지를 확인할 수 있습니다.
     """
     html = f"""
     <div style="position: relative; width: 100%; max-width: 600px; margin: auto;">
       <img src="data:image/jpeg;base64,{transformed_base64}" style="width: 100%;">
-      <div id="overlay" style="position: absolute; top:0; left:0; width:50%; overflow: hidden;">
+      <div id="overlay" style="position: absolute; top:0; left:0; height:50%; overflow: hidden; width:100%;">
         <img src="data:image/jpeg;base64,{original_base64}" style="width: 100%;">
       </div>
-      <input type="range" min="0" max="100" value="50" oninput="document.getElementById('overlay').style.width = this.value + '%';" style="position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); width: 80%;">
+      <input type="range" min="0" max="100" value="50" 
+             oninput="document.getElementById('overlay').style.height = this.value + '%';" 
+             style="
+                position: absolute;
+                top: 10px;
+                right: 10px;
+                transform: rotate(270deg);
+                transform-origin: center;
+                width: 300px;
+                height: 80px;
+                -webkit-appearance: slider-vertical;
+                writing-mode: bt-lr; /* IE */
+                background: transparent;
+             ">
       <div style="text-align: center; margin-top: 10px;">
         <span>변환 후</span> <span style="float: right;">변환 전</span>
       </div>
@@ -79,7 +92,7 @@ def process_image(image, contrast, brightness, blur):
 
 with gr.Blocks() as demo:
     gr.Markdown("## 📸 분위기 있는 흑백 사진 변환기")
-    gr.Markdown("원본 이미지와 변환된 이미지를 슬라이더로 비교하고, 변환된 이미지를 다운로드할 수 있습니다.")
+    gr.Markdown("원본 이미지와 변환된 이미지를 수직 슬라이더로 비교하고, 변환된 이미지를 다운로드할 수 있습니다.")
     
     with gr.Row():
         with gr.Column():