Update app.py

app.py

@@ -3,6 +3,7 @@ from PIL import Image, ImageEnhance, ImageOps, ImageFilter
 import io
 import base64
 import tempfile
+import os
 
 def image_to_base64(img):
     """
@@ -36,39 +37,75 @@ 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; height:50%; overflow: hidden; width:100%;">
+      <!-- 변환된 이미지 (배경) -->
+      <img src="data:image/jpeg;base64,{transformed_base64}" style="width: 100%; display: block;">
+      
+      <!-- 원본 이미지 (오버레이) -->
+      <div id="overlay" style="position: absolute; top:0; left:0; width:50%; overflow: hidden; height: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.height = this.value + '%';" 
+             oninput="document.getElementById('overlay').style.width = 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 */
+                bottom: 10px;
+                left: 50%;
+                transform: translateX(-50%);
+                width: 80%;
+                -webkit-appearance: none;
                 background: transparent;
              ">
+      
+      <!-- 슬라이더 레이블 -->
       <div style="text-align: center; margin-top: 10px;">
         <span>변환 후</span> <span style="float: right;">변환 전</span>
       </div>
+      
+      <!-- 슬라이더 스타일링 -->
+      <style>
+        input[type=range] {
+          -webkit-appearance: none;
+          width: 100%;
+          height: 5px;
+          background: #ddd;
+          outline: none;
+          opacity: 0.7;
+          -webkit-transition: .2s;
+          transition: opacity .2s;
+        }
+
+        input[type=range]::-webkit-slider-thumb {
+          -webkit-appearance: none;
+          appearance: none;
+          width: 15px;
+          height: 15px;
+          background: #4CAF50;
+          cursor: pointer;
+          border-radius: 50%;
+        }
+
+        input[type=range]::-moz-range-thumb {
+          width: 15px;
+          height: 15px;
+          background: #4CAF50;
+          cursor: pointer;
+          border-radius: 50%;
+        }
+      </style>
     </div>
     """
     return html
 
 def process_image(image, contrast, brightness, blur):
     """
-    사용자가 업로드한 이미지를 변환하고, 비교 슬라이드와 다운로드 링크를 생성합니다.
+    사용자가 업로드한 이미지를 변환하고, 비교 슬라이더와 다운로드 링크를 생성합니다.
     """
     if image is None:
         return "이미지가 업로드되지 않았습니다.", None
@@ -92,7 +129,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():