app.py

import gradio as gr
from PIL import Image, ImageEnhance, ImageOps, ImageFilter
import io
import base64
import tempfile
import os

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(contrast)
    
    # 밝기 조절
    enhancer = ImageEnhance.Brightness(bw_image)
    bw_image = enhancer.enhance(brightness)
    
    # 흐림 효과 추가
    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,{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.width = this.value + '%';" 
             style="
                position: absolute;
                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

    # 이미지 변환
    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)
    
    # 변환된 이미지를 임시 파일로 저장
    with tempfile.NamedTemporaryFile(suffix=".jpg", delete=False, prefix="transformed_", dir="/tmp") as tmp_file:
        transformed.save(tmp_file, format="JPEG")
        tmp_file_path = tmp_file.name
    
    return comparison_html, tmp_file_path

with gr.Blocks() as demo:
    gr.Markdown("## 📸 분위기 있는 흑백 사진 변환기")
    gr.Markdown("원본 이미지와 변환된 이미지를 슬라이더로 비교하고, 변환된 이미지를 다운로드할 수 있습니다.")
    
    with gr.Row():
        with gr.Column():
            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=process_image,
        inputs=[input_image, contrast_slider, brightness_slider, blur_slider],
        outputs=[comparison, download_link]
    )
    
    gr.Markdown("©️ 2024 분위기 있는 흑백 사진 변환기 by OpenAI")

demo.launch()