Update app.py

app.py

@@ -1,173 +1,421 @@
-import cv2
-import numpy as np
-from PIL import Image, ImageEnhance, ImageFilter
 import gradio as gr
-from io import BytesIO
+import os
 import tempfile
-import logging
-
-# 로깅 설정 - INFO 레벨로 변경
-logging.basicConfig(level=logging.INFO)
-logger = logging.getLogger(__name__)
-
-def adjust_brightness(image, value):
-    """이미지 밝기 조절"""
-    value = float(value - 1) * 100  # 0-2 범위를 -100에서 +100으로 변환
-    hsv = cv2.cvtColor(image, cv2.COLOR_BGR2HSV)
-    h, s, v = cv2.split(hsv)
-    v = cv2.add(v, value)
-    v = np.clip(v, 0, 255)
-    final_hsv = cv2.merge((h, s, v))
-    return cv2.cvtColor(final_hsv, cv2.COLOR_HSV2BGR)
-
-def adjust_contrast(image, value):
-    """이미지 대비 조절"""
-    value = float(value)
-    return np.clip(image * value, 0, 255).astype(np.uint8)
-
-def adjust_saturation(image, value):
-    """이미지 채도 조절"""
-    value = float(value - 1) * 100  # 0-2 범위를 -100에서 +100으로 변환
-    hsv = cv2.cvtColor(image, cv2.COLOR_BGR2HSV)
-    h, s, v = cv2.split(hsv)
-    s = cv2.add(s, value)
-    s = np.clip(s, 0, 255)
-    final_hsv = cv2.merge((h, s, v))
-    return cv2.cvtColor(final_hsv, cv2.COLOR_HSV2BGR)
-
-def adjust_temperature(image, value):
-    """이미지 색온도 조절 (색상 밸런스)"""
-    value = float(value) * 30  # 효과 스케일 조절
-    b, g, r = cv2.split(image)
-    if value > 0:  # 따뜻하게
-        r = cv2.add(r, value)
-        b = cv2.subtract(b, value)
-    else:  # 차갑게
-        r = cv2.add(r, value)
-        b = cv2.subtract(b, value)
-    
-    r = np.clip(r, 0, 255)
-    b = np.clip(b, 0, 255)
-    return cv2.merge([b, g, r])
-
-def adjust_tint(image, value):
-    """이미지 색조 조절"""
-    hsv_image = cv2.cvtColor(image, cv2.COLOR_BGR2HSV)
-    h, s, v = cv2.split(hsv_image)
-    h = cv2.add(h, int(value))
-    h = np.clip(h, 0, 179)  # Hue 값은 0-179 범위
-    final_hsv = cv2.merge((h, s, v))
-    return cv2.cvtColor(final_hsv, cv2.COLOR_HSV2BGR)
-
-def adjust_exposure(image, value):
-    """이미지 노출 조절"""
-    enhancer = ImageEnhance.Brightness(Image.fromarray(cv2.cvtColor(image, cv2.COLOR_BGR2RGB)))
-    img_enhanced = enhancer.enhance(1 + float(value) / 5.0)
-    return cv2.cvtColor(np.array(img_enhanced), cv2.COLOR_RGB2BGR)
-
-def adjust_vibrance(image, value):
-    """이미지 활기 조절"""
-    img = Image.fromarray(cv2.cvtColor(image, cv2.COLOR_BGR2RGB))
-    converter = ImageEnhance.Color(img)
-    factor = 1 + (float(value) / 100.0)
-    img = converter.enhance(factor)
-    return cv2.cvtColor(np.array(img), cv2.COLOR_RGB2BGR)
-
-def adjust_color_mixer_blues(image, value):
-    """이미지 컬러 믹서 (블루) 조절"""
-    b, g, r = cv2.split(image)
-    b = cv2.add(b, float(value))
-    b = np.clip(b, 0, 255)
-    return cv2.merge([b, g, r])
-
-def adjust_shadows(image, value):
-    """이미지 그림자 조절"""
-    pil_image = Image.fromarray(cv2.cvtColor(image, cv2.COLOR_BGR2RGB))
-    enhancer = ImageEnhance.Brightness(pil_image)
-    factor = 1 + (float(value) / 100.0)
-    pil_image = enhancer.enhance(factor)
-    return cv2.cvtColor(np.array(pil_image), cv2.COLOR_BGR2RGB)
-
-def process_image(image, brightness, contrast, saturation, temperature, tint, exposure, vibrance, color_mixer_blues, shadows):
-    """모든 조정 사항을 이미지에 적용"""
-    if image is None:
+import base64
+import math
+import traceback
+import numpy as np
+from PIL import Image
+
+from moviepy.editor import VideoFileClip, vfx
+from shutil import copyfile
+from datetime import datetime, timedelta
+
+########################################
+# 1) PIL ANTIALIAS 에러 대응 (Monkey-patch)
+########################################
+try:
+    from PIL import Resampling
+    if not hasattr(Image, "ANTIALIAS"):
+        Image.ANTIALIAS = Resampling.LANCZOS
+except ImportError:
+    pass
+
+########################################
+# 2) 내부 디버그 로깅 (UI에서 미출력)
+########################################
+DEBUG_LOG_LIST = []
+
+def log_debug(msg: str):
+    print("[DEBUG]", msg)
+    DEBUG_LOG_LIST.append(msg)
+
+########################################
+# 3) 시간 형식 변환 유틸리티 함수
+########################################
+END_EPSILON = 0.01
+
+def round_down_to_one_decimal(value: float) -> float:
+    return math.floor(value * 10) / 10
+
+def safe_end_time(duration: float) -> float:
+    tmp = duration - END_EPSILON
+    if tmp < 0:
+        tmp = 0
+    return round_down_to_one_decimal(tmp)
+
+def coalesce_to_zero(val):
+    """
+    None이나 NaN, 문자열 오류 등이 들어오면 0.0으로 변환
+    """
+    if val is None:
+        return 0.0
+    try:
+        return float(val)
+    except:
+        return 0.0
+
+def seconds_to_hms(seconds: float) -> str:
+    """초를 HH:MM:SS 형식으로 변환"""
+    try:
+        seconds = max(0, seconds)
+        td = timedelta(seconds=round(seconds))
+        return str(td)
+    except Exception as e:
+        log_debug(f"[seconds_to_hms] 변환 오류: {e}")
+        return "00:00:00"
+
+def hms_to_seconds(time_str: str) -> float:
+    """HH:MM:SS 형식을 초로 변환"""
+    try:
+        parts = time_str.strip().split(':')
+        parts = [int(p) for p in parts]
+        while len(parts) < 3:
+            parts.insert(0, 0)  # 부족한 부분은 0으로 채움
+        hours, minutes, seconds = parts
+        return hours * 3600 + minutes * 60 + seconds
+    except Exception as e:
+        log_debug(f"[hms_to_seconds] 변환 오류: {e}")
+        return -1  # 오류 시 -1 반환
+
+########################################
+# 4) 업로드된 영상 파일 저장
+########################################
+def save_uploaded_video(video_input):
+    if not video_input:
+        log_debug("[save_uploaded_video] video_input is None.")
         return None
-        
-    # PIL 이미지를 OpenCV 형식으로 변환
-    image = cv2.cvtColor(np.array(image), cv2.COLOR_RGB2BGR)
-    
-    # 조정 사항 순차 적용
-    image = adjust_brightness(image, brightness)
-    image = adjust_contrast(image, contrast)
-    image = adjust_saturation(image, saturation)
-    image = adjust_temperature(image, temperature)
-    image = adjust_tint(image, tint)
-    image = adjust_exposure(image, exposure)
-    image = adjust_vibrance(image, vibrance)
-    image = adjust_color_mixer_blues(image, color_mixer_blues)
-    image = adjust_shadows(image, shadows)
-    
-    # PIL 이미지로 다시 변환
-    return Image.fromarray(cv2.cvtColor(image, cv2.COLOR_BGR2RGB))
 
-def download_image(image, input_image_name):
-    """이미지를 JPG 형식으로 저장하고 경로 반환"""
-    if image is None:
+    if isinstance(video_input, str):
+        log_debug(f"[save_uploaded_video] video_input is str: {video_input}")
+        if os.path.exists(video_input):
+            return video_input
+        else:
+            log_debug("[save_uploaded_video] Path does not exist.")
+            return None
+
+    if isinstance(video_input, dict):
+        log_debug(f"[save_uploaded_video] video_input is dict: {list(video_input.keys())}")
+        if 'data' in video_input:
+            file_data = video_input['data']
+            if isinstance(file_data, str) and file_data.startswith("data:"):
+                base64_str = file_data.split(';base64,')[-1]
+                try:
+                    video_binary = base64.b64decode(base64_str)
+                    tmp = tempfile.NamedTemporaryFile(delete=False, suffix=".mp4")
+                    tmp.write(video_binary)
+                    tmp.flush()
+                    tmp.close()
+                    log_debug(f"[save_uploaded_video] Created temp file: {tmp.name}")
+                    return tmp.name
+                except Exception as e:
+                    log_debug(f"[save_uploaded_video] base64 디코딩 오류: {e}")
+                    return None
+            else:
+                if isinstance(file_data, str) and os.path.exists(file_data):
+                    log_debug("[save_uploaded_video] data 필드가 실제 경로")
+                    return file_data
+                else:
+                    log_debug("[save_uploaded_video] data 필드가 예상치 못한 형태.")
+                    return None
+        else:
+            log_debug("[save_uploaded_video] dict이지만 'data' 키가 없음.")
+        return None
+
+    log_debug("[save_uploaded_video] Unrecognized type.")
+    return None
+
+########################################
+# 5) 영상 길이, 해상도, 스크린샷
+########################################
+def get_video_duration(video_dict):
+    path = save_uploaded_video(video_dict)
+    if not path:
+        return "00:00:00"
+    try:
+        clip = VideoFileClip(path)
+        dur = clip.duration
+        clip.close()
+        log_debug(f"[get_video_duration] duration={dur}")
+        return seconds_to_hms(dur)
+    except Exception as e:
+        log_debug(f"[get_video_duration] 오류: {e}\n{traceback.format_exc()}")
+        return "00:00:00"
+
+def get_resolution(video_dict):
+    path = save_uploaded_video(video_dict)
+    if not path:
+        return "0x0"
+    try:
+        clip = VideoFileClip(path)
+        w, h = clip.size
+        clip.close()
+        log_debug(f"[get_resolution] w={w}, h={h}")
+        return f"{w}x{h}"
+    except Exception as e:
+        log_debug(f"[get_resolution] 오류: {e}\n{traceback.format_exc()}")
+        return "0x0"
+
+def get_screenshot_at_time(video_dict, time_in_seconds):
+    path = save_uploaded_video(video_dict)
+    if not path:
+        return None
+    try:
+        clip = VideoFileClip(path)
+        actual_duration = clip.duration
+
+        # 마지막 프레임 접근 방지
+        if time_in_seconds >= actual_duration - END_EPSILON:
+            time_in_seconds = safe_end_time(actual_duration)
+
+        t = max(0, min(time_in_seconds, clip.duration))
+        log_debug(f"[get_screenshot_at_time] t={t:.3f} / duration={clip.duration:.3f}")
+        frame = clip.get_frame(t)
+        clip.close()
+        return frame  # numpy 배열로 반환
+    except Exception as e:
+        log_debug(f"[get_screenshot_at_time] 오류: {e}\n{traceback.format_exc()}")
+        return None
+
+########################################
+# 6) 업로드 이벤트
+########################################
+def on_video_upload(video_dict):
+    log_debug("[on_video_upload] Called.")
+    dur_hms = get_video_duration(video_dict)
+    w, h = map(int, get_resolution(video_dict).split('x'))
+    resolution_str = f"{w}x{h}"
+
+    start_t = 0.0
+    end_t = safe_end_time(hms_to_seconds(dur_hms))
+
+    start_img = get_screenshot_at_time(video_dict, start_t)
+    end_img = None
+    if end_t > 0:
+        end_img = get_screenshot_at_time(video_dict, end_t)
+
+    # 순서대로: 영상 길이, 해상도(문자열), 시작 시간, 끝 시간, 시작 스크린샷, 끝 스크린샷
+    return dur_hms, resolution_str, seconds_to_hms(start_t), seconds_to_hms(end_t), start_img, end_img
+
+########################################
+# 7) 스크린샷 갱신
+########################################
+def update_screenshots(video_dict, start_time_str, end_time_str):
+    start_time = hms_to_seconds(start_time_str)
+    end_time = hms_to_seconds(end_time_str)
+
+    if start_time < 0 or end_time < 0:
+        return (None, None)
+
+    log_debug(f"[update_screenshots] start={start_time_str}, end={end_time_str}")
+
+    end_time = round_down_to_one_decimal(end_time)
+    img_start = get_screenshot_at_time(video_dict, start_time)
+    img_end = get_screenshot_at_time(video_dict, end_time)
+    return (img_start, img_end)
+
+########################################
+# 8) GIF 생성
+########################################
+def generate_gif(video_dict, start_time_str, end_time_str, fps, resize_factor, speed_factor, duration, resolution_str):
+    # "WxH" 형태 해상도 파싱
+    parts = resolution_str.split("x")
+    if len(parts) == 2:
+        try:
+            orig_w = float(parts[0])
+            orig_h = float(parts[1])
+        except:
+            orig_w = 0
+            orig_h = 0
+    else:
+        orig_w = 0
+        orig_h = 0
+
+    start_time = hms_to_seconds(start_time_str)
+    end_time = hms_to_seconds(end_time_str)
+
+    if start_time < 0 or end_time < 0:
+        return "잘못된 시간 형식입니다. HH:MM:SS 형식으로 입력해주세요."
+
+    fps = coalesce_to_zero(fps)
+    resize_factor = coalesce_to_zero(resize_factor)
+    speed_factor = coalesce_to_zero(speed_factor)
+
+    log_debug("[generate_gif] Called.")
+    log_debug(f"  start_time={start_time}, end_time={end_time}, fps={fps}, resize_factor={resize_factor}, speed_factor={speed_factor}")
+
+    path = save_uploaded_video(video_dict)
+    if not path:
+        err_msg = "[generate_gif] 영상이 업로드되지 않았습니다."
+        log_debug(err_msg)
+        return err_msg
+
+    try:
+        clip = VideoFileClip(path)
+        end_time = round_down_to_one_decimal(end_time)
+
+        st = max(0, start_time)
+        et = max(0, end_time)
+        if et > clip.duration:
+            et = clip.duration
+
+        # 마지막 프레임 접근 방지
+        if et >= clip.duration - END_EPSILON:
+            et = safe_end_time(clip.duration)
+
+        log_debug(f"  subclip range => st={st:.2f}, et={et:.2f}, totalDur={clip.duration:.2f}")
+
+        if st >= et:
+            clip.close()
+            err_msg = "시작 시간이 끝 시간보다 같거나 큽니다."
+            log_debug(f"[generate_gif] {err_msg}")
+            return err_msg
+
+        sub_clip = clip.subclip(st, et)
+
+        # 배속 조정
+        if speed_factor != 1.0:
+            sub_clip = sub_clip.fx(vfx.speedx, speed_factor)
+            log_debug(f"  speed_factor applied: {speed_factor}x")
+
+        # 리사이즈
+        if resize_factor < 1.0 and orig_w > 0 and orig_h > 0:
+            new_w = int(orig_w * resize_factor)
+            new_h = int(orig_h * resize_factor)
+            log_debug(f"  resizing => {new_w}x{new_h}")
+            sub_clip = sub_clip.resize((new_w, new_h))
+
+        # 고유한 파일 이름 생성
+        gif_fd, gif_path = tempfile.mkstemp(suffix=".gif")
+        os.close(gif_fd)  # 파일 디스크립터 닫기
+
+        log_debug(f"  writing GIF to {gif_path}")
+        sub_clip.write_gif(gif_path, fps=int(fps), program='ffmpeg')  # ffmpeg 사용
+
+        clip.close()
+        sub_clip.close()
+
+        if os.path.exists(gif_path):
+            log_debug(f"  GIF 생성 완료! size={os.path.getsize(gif_path)} bytes.")
+            return gif_path
+        else:
+            err_msg = "GIF 생성에 실패했습니다."
+            log_debug(f"[generate_gif] {err_msg}")
+            return err_msg
+
+    except Exception as e:
+        err_msg = f"[generate_gif] 오류 발생: {e}\n{traceback.format_exc()}"
+        log_debug(err_msg)
+        return err_msg
+
+########################################
+# 9) GIF 다운로드 파일 이름 변경 함수
+########################################
+def prepare_download_gif(gif_path, input_video_dict):
+    """GIF 파일의 다운로드 이름을 변경하고 경로를 반환"""
+    if gif_path is None:
         return None
 
     # 한국 시간 타임스탬프 생성 함수
-    from datetime import datetime, timedelta
     def get_korean_timestamp():
         korea_time = datetime.utcnow() + timedelta(hours=9)
         return korea_time.strftime('%Y%m%d_%H%M%S')
 
     timestamp = get_korean_timestamp()
-    if input_image_name and hasattr(input_image_name, 'name'):
-        base_name = input_image_name.name.split('.')[0]  # 파일 객체에서 이름 추출
+    
+    # 입력된 GIF 이름에서 기본 이름 추출
+    if input_video_dict and isinstance(input_video_dict, dict) and 'data' in input_video_dict:
+        file_data = input_video_dict['data']
+        if isinstance(file_data, str) and file_data.startswith("data:"):
+            base_name = "GIF"  # base64 데이터에서는 원본 파일 이름을 알 수 없으므로 기본 이름 사용
+        elif isinstance(file_data, str) and os.path.exists(file_data):
+            base_name = os.path.splitext(os.path.basename(file_data))[0]
+        else:
+            base_name = "GIF"
     else:
-        base_name = "이미지"
+        base_name = "GIF"
 
-    file_name = f"[끝장AI]끝장필터_{base_name}_{timestamp}.jpg"
+    # 새로운 파일 이름 생성
+    file_name = f"[끝장AI]끝장GIF_{base_name}_{timestamp}.gif"
 
-    # 파일 저장
-    temp_file_path = tempfile.gettempdir() + "/" + file_name
-    image.save(temp_file_path, format="JPEG")
+    # 임시 디렉토리에 파일 저장
+    temp_file_path = os.path.join(tempfile.gettempdir(), file_name)
+    
+    try:
+        # 기존 GIF 파일을 새로운 이름으로 복사
+        copyfile(gif_path, temp_file_path)
+    except Exception as e:
+        log_debug(f"[prepare_download_gif] 파일 복사 오류: {e}")
+        return gif_path  # 복사에 실패하면 원본 경로 반환
+    
     return temp_file_path
 
-def create_interface():
-    css = """
-    footer {
-        visibility: hidden;
-    }
-    .download-button, .download-output {
-        width: 100%;
-    }
-    .download-container {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        width: 100%;
-    }
-    #gradio-app {
-        margin: 0 !important; /* 모든 방향 여백 제거 */
-        text-align: left !important; /* 왼쪽 정렬 강제 */
-        padding: 20px !important; /* 패딩 추가 */
-    }
-    .gradio-container {
-        max-width: 100% !important; /* 가로 폭 전체 사용 */
-        margin-left: 0 !important; /* 왼쪽 정렬 */
-        padding: 20px !important; /* 패딩 추가 */
-    }
-    .download-button {
-        background-color: black !important;
-        color: white !important;
-        border: none !important;
-        padding: 10px !important;
-        font-size: 16px !important;
-    }
+########################################
+# 10) 콜백 함수
+########################################
+def on_any_change(video_dict, start_time_str, end_time_str):
+    # 스크린샷만 업데이트
+    start_img, end_img = update_screenshots(video_dict, start_time_str, end_time_str)
+    return (start_img, end_img)
+
+def on_generate_click(video_dict, start_time_str, end_time_str, fps, resize_factor, speed_factor, duration, resolution_str):
+    """GIF 생성 후:
+       - 성공시: (생성된 GIF 경로, 파일 용량 문자열, 파일 다운로드 경로)
+       - 실패시: (None, 에러 메시지, None)
     """
+    # Convert duration from hms to seconds for internal use if needed
+    # duration는 현재 사용되지 않으므로 무시하거나 필요 시 처리할 수 있음
+
+    result = generate_gif(video_dict, start_time_str, end_time_str, fps, resize_factor, speed_factor, duration, resolution_str)
 
-    with gr.Blocks(theme=gr.themes.Soft(
+    if isinstance(result, str) and os.path.exists(result):
+        # GIF 생성 성공
+        size_bytes = os.path.getsize(result)
+        size_mb = size_bytes / (1024 * 1024)
+        file_size_str = f"{size_mb:.2f} MB"
+
+        # 다운로드 파일 이름 변경
+        download_path = prepare_download_gif(result, video_dict)
+
+        # Gradio가 자동으로 파일을 처리하도록 `download_path`를 반환
+        return (result, file_size_str, download_path)
+    else:
+        # GIF 생성 실패, 에러 메시지 반환
+        err_msg = result if isinstance(result, str) else "GIF 생성에 실패했습니다."
+        return (None, err_msg, None)
+
+########################################
+# 11) Gradio UI
+########################################
+
+# 스타일 적용을 위한 CSS 및 테마 설정
+css = """
+footer {
+    visibility: hidden;
+}
+.left-column, .right-column {
+    border: 2px solid #ccc;
+    border-radius: 8px;
+    padding: 20px;
+    background-color: #f9f9f9;
+}
+.left-column {
+    margin-right: 10px;
+}
+.right-column {
+    margin-left: 10px;
+}
+.section-border {
+    border: 1px solid #ddd;
+    border-radius: 6px;
+    padding: 10px;
+    margin-bottom: 15px;
+    background-color: #ffffff;
+}
+"""
+
+with gr.Blocks(
+    theme=gr.themes.Soft(
         primary_hue=gr.themes.Color(
             c50="#FFF7ED",  # 가장 밝은 주황
             c100="#FFEDD5",
@@ -184,81 +432,132 @@ def create_interface():
         secondary_hue="zinc",  # 모던한 느낌의 회색 계열
         neutral_hue="zinc",
         font=("Pretendard", "sans-serif")
-    ), css=css) as interface:
-
-        with gr.Row():
-            # 왼쪽 열: 비율 3
-            with gr.Column(scale=3):
-                # 이미지 업로드
-                input_image = gr.Image(type="pil", label="이미지 업로드")
-
-                # 조정 슬라이더
-                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="대비 조절")
-                saturation_slider = gr.Slider(0.0, 2.0, value=1.0, step=0.1, label="채도 조절")
-                temperature_slider = gr.Slider(-1.0, 1.0, value=0.0, step=0.1, label="색온도 조절")
-                tint_slider = gr.Slider(-100, 100, value=0, step=1, label="색조 조절")
-                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="그림자 조절")
-
-            # 오른쪽 열: 비율 7
-            with gr.Column(scale=7):
-                # 처리된 이미지 출력
-                output_image = gr.Image(type="pil", label="처리된 이미지")
-
-                # 변환된 이미지 다운로드 버튼
-                with gr.Row(elem_classes="download-container"):
-                    download_button = gr.Button("JPG로 변환하기", elem_classes="download-button")
-                with gr.Row(elem_classes="download-container"):
-                    download_output = gr.File(label="JPG 이미지 다운로드", elem_classes="download-output")
-
-        # 이미지 처리 함수 연결
-        inputs = [
-            input_image,
-            brightness_slider,
-            contrast_slider,
-            saturation_slider,
-            temperature_slider,
-            tint_slider,
-            exposure_slider,
-            vibrance_slider,
-            color_mixer_blues_slider,
-            shadows_slider
-        ]
+    ),
+    css=css
+) as demo:
+    gr.Markdown("## GIF 생성기")
+
+    with gr.Row():
+        # 왼쪽 컬럼: 영상 업로드 및 정보
+        with gr.Column(elem_classes="left-column"):
+            # 영상 업로드 섹션
+            with gr.Row(elem_classes="section-border"):
+                video_input = gr.Video(label="영상 업로드")
+
+            # 영상 길이 및 해상도 섹션
+            with gr.Row(elem_classes="section-border"):
+                duration_box = gr.Textbox(label="영상 길이", interactive=False, value="00:00:00")
+                resolution_box = gr.Textbox(label="해상도", interactive=False, value="0x0")
+
+        # 오른쪽 컬럼: 결과 GIF 및 다운로드
+        with gr.Column(elem_classes="right-column"):
+            # 결과 GIF 섹션
+            with gr.Row(elem_classes="section-border"):
+                output_gif = gr.Image(label="결과 GIF")
 
-        input_components = [
-            brightness_slider,
-            contrast_slider,
-            saturation_slider,
-            temperature_slider,
-            tint_slider,
-            exposure_slider,
-            vibrance_slider,
-            color_mixer_blues_slider,
-            shadows_slider
+            # 파일 용량 및 다운로드 섹션
+            with gr.Row(elem_classes="section-border"):
+                file_size_text = gr.Textbox(label="파일 용량", interactive=False, value="0 MB")
+                download_gif_component = gr.File(label="GIF 다운로드")  # 이름 변경하여 충돌 방지
+
+    # 추가 설정 섹션 (시간 설정, 스크린샷, 슬라이더 등)
+    with gr.Row():
+        with gr.Column():
+            # 시간 설정 섹션
+            with gr.Row(elem_classes="section-border"):
+                start_time_input = gr.Textbox(label="시작 시간 (HH:MM:SS)", value="00:00:00")
+                end_time_input = gr.Textbox(label="끝 시간 (HH:MM:SS)", value="00:00:00")
+
+            # 스크린샷 섹션
+            with gr.Row(elem_classes="section-border"):
+                start_screenshot = gr.Image(label="시작 지점 캡쳐본")
+                end_screenshot = gr.Image(label="끝 지점 캡쳐본")
+
+            # 설정 슬라이더 섹션
+            with gr.Row(elem_classes="section-border"):
+                # 배속 조절 슬라이더 추가
+                speed_slider = gr.Slider(
+                    label="배속",
+                    minimum=0.5,
+                    maximum=2.0,
+                    step=0.1,
+                    value=1.0,
+                    info="0.5x: 절반 속도, 1.0x: 원래 속도, 2.0x: 두 배 속도"
+                )
+
+                # FPS 슬라이더
+                fps_slider = gr.Slider(
+                    label="FPS",
+                    minimum=1,
+                    maximum=30,
+                    step=1,
+                    value=10,
+                    info="프레임 수를 조절하여 애니메이션의 부드러움을 변경합니다."
+                )
+
+                # 해상도 배율 슬라이더
+                resize_slider = gr.Slider(
+                    label="해상도 배율",
+                    minimum=0.1,
+                    maximum=1.0,
+                    step=0.05,
+                    value=1.0,
+                    info="GIF의 해상도를 조절합니다."
+                )
+
+            # GIF 생성 버튼 섹션
+            with gr.Row(elem_classes="section-border"):
+                generate_button = gr.Button("GIF 생성")
+
+    # 이벤트 콜백 설정
+    # 업로드 시 → 영상 길이, 해상도 업데이트
+    video_input.change(
+        fn=on_video_upload,
+        inputs=[video_input],
+        outputs=[
+            duration_box,    # 영상 길이
+            resolution_box,  # 해상도("WxH")
+            start_time_input,
+            end_time_input,
+            start_screenshot,
+            end_screenshot
         ]
+    )
 
-        for input_component in input_components:
-            input_component.change(
-                fn=process_image,
-                inputs=inputs,
-                outputs=output_image
-            )
-
-        # 다운로드 버튼 기능
-        download_button.click(
-            fn=download_image,
-            inputs=[output_image, input_image],
-            outputs=download_output
+    # 시작/끝 시간 변경 시 → 스크린샷 업데이트
+    for c in [start_time_input, end_time_input]:
+        c.change(
+            fn=on_any_change,
+            inputs=[video_input, start_time_input, end_time_input],
+            outputs=[start_screenshot, end_screenshot]
         )
 
-    return interface
+    # 배속, FPS, 해상도 배율 변경 시 → 스크린샷 업데이트
+    for c in [speed_slider, fps_slider, resize_slider]:
+        c.change(
+            fn=on_any_change,
+            inputs=[video_input, start_time_input, end_time_input],
+            outputs=[start_screenshot, end_screenshot]
+        )
+
+    # GIF 생성 버튼 클릭 시 → GIF 생성 및 결과 업데이트
+    generate_button.click(
+        fn=on_generate_click,
+        inputs=[
+            video_input,
+            start_time_input,
+            end_time_input,
+            fps_slider,
+            resize_slider,
+            speed_slider,      # 배속 슬라이더 추가
+            duration_box,
+            resolution_box
+        ],
+        outputs=[
+            output_gif,            # 생성된 GIF 미리보기
+            file_size_text,        # 파일 용량 표시
+            download_gif_component # 다운로드 링크
+        ]
+    )
 
-# 인터페이스 생성 및 실행
-if __name__ == "__main__":
-    logger.info("애플리케이션 시작")
-    interface = create_interface()
-    interface.queue()
-    interface.launch()
+demo.launch()