Update app.py

app.py

@@ -1,45 +1,117 @@
 import gradio as gr
 from PIL import Image, ImageEnhance, ImageOps, ImageFilter
+import io
+import base64
 
-def convert_to_moody_bw(image):
+def image_to_base64(img):
     """
-    이미지를 흑백으로 변환하고 분위기를 더합니다.
+    PIL 이미지를 base64 인코딩된 문자열로 변환합니다.
     """
-    # 이미지를 흑백으로 변환
+    buffered = io.BytesIO()
+    img.save(buffered, format="JPEG")
+    img_bytes = buffered.getvalue()
+    img_base64 = base64.b64encode(img_bytes).decode()
+    return img_base64
+
+def transform_image(image, contrast, brightness, blur):
+    """
+    이미지를 흑백으로 변환하고, 사용자가 조절한 대비, 밝기, 흐림 효과를 적용합니다.
+    """
+    # 흑백 변환
     bw_image = ImageOps.grayscale(image)
     
     # 대비 향상
     enhancer = ImageEnhance.Contrast(bw_image)
-    bw_image = enhancer.enhance(1.5)
+    bw_image = enhancer.enhance(contrast)
     
     # 밝기 조절
     enhancer = ImageEnhance.Brightness(bw_image)
-    bw_image = enhancer.enhance(0.9)
+    bw_image = enhancer.enhance(brightness)
     
-    # 약간의 흐림 효과 추가
-    bw_image = bw_image.filter(ImageFilter.GaussianBlur(radius=1))
+    # 흐림 효과 추가
+    bw_image = bw_image.filter(ImageFilter.GaussianBlur(radius=blur))
     
     return bw_image
 
+def generate_comparison_html(original_base64, transformed_base64):
+    """
+    원본 이미지와 변환된 이미지를 비교할 수 있는 슬라이더 HTML을 생성합니다.
+    """
+    html = f"""
+    <div style="position: relative; width: 100%; max-width: 600px; margin: auto;">
+      <img src="data:image/jpeg;base64,{original_base64}" style="width: 100%;">
+      <div id="overlay" style="position: absolute; top:0; left:0; width:50%; overflow: hidden;">
+        <img src="data:image/jpeg;base64,{transformed_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%;">
+      <div style="text-align: center; margin-top: 10px;">
+        <span>변환 전</span> <span style="float: right;">변환 후</span>
+      </div>
+    </div>
+    """
+    return html
+
+def process_image(image, contrast, brightness, blur):
+    """
+    사용자가 업로드한 이미지를 변환하고, 비교 슬라이드와 다운로드 링크를 생성합니다.
+    """
+    # 이미지 변환
+    transformed = transform_image(image, contrast, brightness, blur)
+    
+    # 이미지를 base64로 변환
+    original_base64 = image_to_base64(image)
+    transformed_base64 = image_to_base64(transformed)
+    
+    # 비교 슬라이드 HTML 생성
+    comparison_html = generate_comparison_html(original_base64, transformed_base64)
+    
+    # 변환된 이미지를 다운로드할 수 있도록 준비
+    buf = io.BytesIO()
+    transformed.save(buf, format="JPEG")
+    buf.seek(0)
+    transformed_bytes = buf.read()
+    
+    return comparison_html, ("transformed.jpg", transformed_bytes)
+
 with gr.Blocks() as demo:
-    gr.Markdown("## 분위기 있는 흑백 사진 변환기")
+    gr.Markdown("## 📸 분위기 있는 흑백 사진 변환기")
+    gr.Markdown("원본 이미지와 변환된 이미지를 슬라이더로 비교하고, 변환된 이미지를 다운로드할 수 있습니다.")
     
     with gr.Row():
         with gr.Column():
-            input_image = gr.Image(type="pil", label="원본 이미지 업로드")
-            convert_button = gr.Button("변환하기")
-        with gr.Column():
-            output_image = gr.Image(
-                type="pil", 
-                label="변환된 이미지", 
-                interactive=False, 
-                download=True  # 다운로드 기능 활성화
+            input_image = gr.Image(type="pil", label="📥 원본 이미지 업로드")
+            contrast_slider = gr.Slider(
+                minimum=0.5, 
+                maximum=3.0, 
+                step=0.1, 
+                value=1.5, 
+                label="🔍 대비 조절"
             )
+            brightness_slider = gr.Slider(
+                minimum=0.5, 
+                maximum=3.0, 
+                step=0.1, 
+                value=0.9, 
+                label="💡 밝기 조절"
+            )
+            blur_slider = gr.Slider(
+                minimum=0, 
+                maximum=5, 
+                step=0.5, 
+                value=1, 
+                label="🌫️ 흐림 효과"
+            )
+            convert_button = gr.Button("🔄 변환하기")
+        with gr.Column():
+            comparison = gr.HTML(label="🔍 변환 전후 비교")
+            download_link = gr.File(label="⬇️ JPG로 다운로드")
     
     convert_button.click(
-        fn=convert_to_moody_bw, 
-        inputs=input_image, 
-        outputs=output_image
+        fn=process_image,
+        inputs=[input_image, contrast_slider, brightness_slider, blur_slider],
+        outputs=[comparison, download_link]
     )
     
+    gr.Markdown("©️ 2024 분위기 있는 흑백 사진 변환기 by OpenAI")
+    
 demo.launch()