Update app.py

app.py

@@ -4,174 +4,119 @@ import moviepy.editor as mp
 from PIL import Image
 import gradio as gr
 
-# ----------------------------------
-# 공통적으로 사용할 로그 리스트
-# ----------------------------------
+# -------------------------------
+# 내부 함수들 (동영상 처리 등)
+# -------------------------------
 global_logs = []
 
 def add_log(message: str):
-    """
-    로그 메시지를 저장하는 함수
-    """
     global_logs.append(message)
     print(message)
 
 def parse_time_to_seconds(time_str: str):
-    """
-    시:분:초 형태의 문자열(예: '00:00:10' 또는 '00:01:02')을 초 단위(float)로 변환
-    """
     try:
         h, m, s = time_str.split(":")
-        total_seconds = int(h) * 3600 + int(m) * 60 + float(s)
-        return total_seconds
+        return int(h) * 3600 + int(m) * 60 + float(s)
     except Exception:
         return 0.0
 
 def generate_thumbnail(video_clip, time_point):
-    """
-    특정 시점의 프레임을 썸네일로 생성하여 PIL.Image로 반환
-    """
     try:
         frame = video_clip.get_frame(time_point)
-        thumbnail_img = Image.fromarray(frame)
-        return thumbnail_img
+        return Image.fromarray(frame)
     except Exception as e:
         add_log(f"[ERROR] 썸네일 생성 실패: {e}")
         frame = video_clip.get_frame(0)
-        thumbnail_img = Image.fromarray(frame)
-        return thumbnail_img
+        return Image.fromarray(frame)
 
 def adjust_aspect_ratio(clip, option):
-    """
-    영상 클립을 선택한 플랫폼의 권장 비율로 중앙 크롭하여 조정합니다.
-    """
     if option == "원본 유지":
         return clip
-
     if option == "유튜브 (16:9)":
-        target_ratio = 16 / 9
+        target_ratio = 16/9
     elif option == "쇼츠/릴스 (9:16)":
-        target_ratio = 9 / 16
+        target_ratio = 9/16
     elif option == "정사각형 (1:1)":
         target_ratio = 1.0
     elif option == "인스타그램 (4:5)":
-        target_ratio = 4 / 5
+        target_ratio = 4/5
     elif option == "클래식 (4:3)":
-        target_ratio = 4 / 3
+        target_ratio = 4/3
     else:
         return clip
 
     width, height = clip.size
-    current_ratio = width / height
-
-    # 영상이 너무 넓다면 가로를, 너무 높다면 세로를 크롭합니다.
+    current_ratio = width/height
     if current_ratio > target_ratio:
         new_width = int(height * target_ratio)
         new_height = height
     else:
         new_width = width
         new_height = int(width / target_ratio)
-
-    return clip.crop(x_center=width / 2, y_center=height / 2, width=new_width, height=new_height)
+    return clip.crop(x_center=width/2, y_center=height/2, width=new_width, height=new_height)
 
 def process_video(video,
                   start_time_str,
                   end_time_str,
-                  platform_option,    # 플랫폼별 비율 선택 (Radio)
-                  frame_rate_factor,  # 프레임 레이트 축소 배율 (1.0이면 원본)
+                  platform_option,
+                  frame_rate_factor,
                   speed_factor,
                   repeat_count,
-                  resolution_scale):  # 출력 해상도 축소 비율 (1.0이면 원본)
-    """
-    동영상을 GIF로 변환하는 함수
-    """
+                  resolution_scale):
     global global_logs
-    global_logs = []  # 호출 시마다 로그 초기화
-
-    add_log("[LOG 1] 비디오 업로드 및 처리 시작")
-
-    # video 파라미터에서 파일 경로 추출 (Gradio에서 반환하는 값이 문자열일 수 있음)
+    global_logs = []
+    add_log("🎥 [LOG 1] 비디오 업로드 및 처리 시작")
     video_path = video if isinstance(video, str) else video.name
-
-    add_log("[LOG 2] 비디오 로드 중...")
     try:
         input_video = mp.VideoFileClip(video_path)
     except Exception as e:
         add_log(f"[ERROR] 비디오 로드 실패: {e}")
         return None, None, "\n".join(global_logs)
-
     duration = input_video.duration
-    add_log(f"[LOG 3] 업로드된 영상의 재생시간: {duration:.2f}초")
-
-    add_log("[LOG 4] 시작/끝 시간 파싱 중...")
+    add_log(f"[LOG 3] 영상 재생시간: {duration:.2f}초")
     start_sec = parse_time_to_seconds(start_time_str)
     end_sec = parse_time_to_seconds(end_time_str)
-
-    # 시간 범위 보정
     if start_sec < 0:
         start_sec = 0
     if end_sec <= 0 or end_sec > duration:
         end_sec = duration
     if start_sec >= end_sec:
-        start_sec = 0
-        end_sec = duration
-
-    add_log(f"[LOG 5] 적용된 시작 시간: {start_sec}초, 종료 시간: {end_sec}초")
-
-    add_log("[LOG 6] 영상 자르기 작업 진행...")
+        start_sec, end_sec = 0, duration
+    add_log(f"[LOG 5] 시간 설정: {start_sec}초 ~ {end_sec}초")
     clip = input_video.subclip(start_sec, end_sec)
-
-    # 플랫폼별 해상도(비율) 조정
-    add_log(f"[LOG 7] 플랫폼 비율 조정: {platform_option}")
+    add_log(f"[LOG 7] 플랫폼 비율 적용: {platform_option}")
     clip = adjust_aspect_ratio(clip, platform_option)
-
-    # 출력 해상도 축소 옵션 적용
     if abs(resolution_scale - 1.0) > 1e-3:
-        add_log(f"[LOG 7-1] 출력 해상도 축소: {resolution_scale*100:.0f}%")
+        add_log(f"[LOG 7-1] 해상도 축소: {resolution_scale*100:.0f}%")
         clip = clip.resize(resolution_scale)
-
-    # 재생속도 조절: speedx를 적용하면 clip.duration은 줄어들지만 fps는 그대로 유지됨.
     if abs(speed_factor - 1.0) > 1e-3:
-        add_log(f"[LOG 8] 재생속도 {speed_factor}배로 조절 중...")
+        add_log(f"[LOG 8] 재생속도 {speed_factor}배 적용")
         clip = clip.fx(mp.vfx.speedx, speed_factor)
-
-    # FPS 조절: 최종 출력 FPS는 프레임 레이트 배율만 반영 (speed_factor는 이미 duration에 반영됨)
     original_fps = clip.fps
     target_fps = original_fps * frame_rate_factor
-    add_log(f"[LOG 9] 최종 출력 FPS: {target_fps:.2f} (원본 FPS: {original_fps})")
+    add_log(f"[LOG 9] FPS: {target_fps:.2f} (원본 {original_fps})")
     clip = clip.set_fps(target_fps)
-
-    # 반복 횟수: 0이면 무한반복, 1~10이면 해당 횟수만큼 반복 (GIF의 loop 메타데이터 사용)
-    add_log(f"[LOG 10] GIF 반복 횟수 설정: {repeat_count} (0이면 무한반복)")
+    add_log(f"[LOG 10] GIF 반복 횟수: {repeat_count} (0: 무한)")
     final_clip = clip
-
-    add_log("[LOG 11] GIF 생성 중...")
     output_filename = f"temp_{uuid.uuid4().hex}.gif"
     try:
+        # ImageMagick으로 생성 시 loop 파라미터가 적용됨.
         loop_param = 0 if int(repeat_count) == 0 else int(repeat_count)
-        final_clip.write_gif(output_filename, fps=target_fps, program='ffmpeg', loop=loop_param)
-        add_log("[LOG 12] GIF 생성 완료! 파일명: " + output_filename)
+        final_clip.write_gif(output_filename, fps=target_fps, loop=loop_param)
+        add_log(f"[LOG 12] GIF 생성 완료: {output_filename}, loop={loop_param}")
     except Exception as e:
         add_log(f"[ERROR] GIF 생성 실패: {e}")
         return None, None, "\n".join(global_logs)
-
-    # 미리보기: 완성된 GIF 파일 경로를 그대로 반환하면 gr.Image에서 애니메이션 미리보기가 가능합니다.
     return output_filename, output_filename, "\n".join(global_logs)
 
 def update_thumbnails(video, start_time_str, end_time_str):
-    """
-    시작/끝 썸네일을 업데이트하는 함수
-    """
     video_path = video if isinstance(video, str) else video.name
-
     try:
         input_video = mp.VideoFileClip(video_path)
     except Exception as e:
         add_log(f"[ERROR] 비디오 로드 실패: {e}")
         return None, None
-
     duration = input_video.duration
-
     start_sec = parse_time_to_seconds(start_time_str)
     end_sec = parse_time_to_seconds(end_time_str)
     if start_sec < 0:
@@ -179,77 +124,125 @@ def update_thumbnails(video, start_time_str, end_time_str):
     if end_sec <= 0 or end_sec > duration:
         end_sec = duration
     if start_sec >= end_sec:
-        start_sec = 0
-        end_sec = duration
-
+        start_sec, end_sec = 0, duration
     start_thumb = generate_thumbnail(input_video, start_sec)
     end_thumb = generate_thumbnail(input_video, end_sec)
-
     return start_thumb, end_thumb
 
-# ------------------------------
-# Gradio 인터페이스 구성 (Blocks)
-# ------------------------------
-with gr.Blocks() as demo:
-    gr.Markdown("## 동영상을 GIF로 변환하기 데모")
-
-    with gr.Tab("GIF 변환"):
-        # 동영상 업로드
-        video_input = gr.Video(label="동영상 업로드")
-        # 시작/끝 시간 입력
-        start_time = gr.Textbox(label="시작 시간 (예: 00:00:05)", value="00:00:00")
-        end_time = gr.Textbox(label="종료 시간 (예: 00:00:10)", value="00:00:05")
-        # 썸네일 미리보기
-        start_thumb_output = gr.Image(label="시작 썸네일 미리보기")
-        end_thumb_output = gr.Image(label="종료 썸네일 미리보기")
-        # 플랫폼별 해상도(비율) 선택 (Radio 버튼)
-        platform_option = gr.Radio(
-            label="해상도/비율 선택",
-            choices=["원본 유지", "유튜브 (16:9)", "쇼츠/릴스 (9:16)", "정사각형 (1:1)", "인스타그램 (4:5)", "클래식 (4:3)"],
-            value="원본 유지"
-        )
-        # 출력 해상도 축소 옵션 (1.0이면 원본, 0.1 ~ 1.0 범위)
-        resolution_scale_slider = gr.Slider(label="출력 해상도 축소 비율 (0.1 ~ 1.0)", 
-                                            minimum=0.1, maximum=1.0, step=0.1, value=1.0)
-        # 프레임 레이트, 재생 속도, 반복 횟수 조절
-        frame_rate_slider = gr.Slider(label="프레임 레이트 배율 조절 (0.1 ~ 1.0)", 
-                                      minimum=0.1, maximum=1.0, step=0.1, value=1.0)
-        speed_slider = gr.Slider(label="재생 속도 조절 (0.5 ~ 5.0)", 
-                                 minimum=0.5, maximum=5.0, step=0.1, value=1.0)
-        repeat_slider = gr.Slider(label="GIF 반복 횟수 (0: 무한반복, 1~10: 반복 횟수)", 
-                                  minimum=0, maximum=10, step=1, value=0)
-        # GIF 생성 버튼 및 결과 출력
-        generate_button = gr.Button("GIF 생성하기")
-        gif_preview_output = gr.Image(label="완성된 GIF 미리보기")
-        download_output = gr.File(label="GIF 다운로드 링크")
-        logs_output = gr.Textbox(label="로그 출력", lines=10)
-
-        # 썸네일 업데이트 이벤트 (동영상 또는 시간 입력 변경 시)
-        start_time.change(fn=update_thumbnails,
-                          inputs=[video_input, start_time, end_time],
-                          outputs=[start_thumb_output, end_thumb_output])
-        end_time.change(fn=update_thumbnails,
-                        inputs=[video_input, start_time, end_time],
-                        outputs=[start_thumb_output, end_thumb_output])
-        video_input.change(fn=update_thumbnails,
-                           inputs=[video_input, start_time, end_time],
-                           outputs=[start_thumb_output, end_thumb_output])
-        # GIF 생성 버튼 이벤트
-        generate_button.click(fn=process_video,
-                              inputs=[video_input, start_time, end_time,
-                                      platform_option, frame_rate_slider, speed_slider, repeat_slider,
-                                      resolution_scale_slider],
-                              outputs=[gif_preview_output, download_output, logs_output])
-
-    gr.Markdown(
-        "### [사용 가이드]\n"
-        "1. 동영상을 업로드하세요.\n"
-        "2. 시작/끝 시간을 입력하세요.\n"
-        "3. 플랫폼별 권장 해상도/비율(원본 유지, 유튜브, 쇼츠/릴스, 정사각형, 인스타그램, 클래식)과 출력 해상도 축소 비율을 선택하고,\n"
-        "   프레임 레이트 배율, 재생 속도, 반복 횟수를 조절한 후 `GIF 생성하기` 버튼을 누르면 GIF가 생성됩니다.\n"
-        "   - 반복 횟수: 0을 선택하면 무한반복, 1~10은 해당 횟수만큼 반복됩니다.\n"
-        "4. 결과 미리보기와 다운로드 링크를 통해 GIF를 확인할 수 있습니다."
-    )
-
-if __name__ == "__main__":
-    demo.launch()
+# -------------------------------
+# Custom CSS (HTML/CSS 기반 새 UI)
+# -------------------------------
+custom_css = """
+body {
+  font-family: 'Arial', sans-serif;
+  background-color: #eef2f7;
+}
+.custom-title {
+  font-size: 2.8em;
+  text-align: center;
+  font-weight: bold;
+  margin: 20px 0;
+  color: #2c3e50;
+}
+.custom-user-guide {
+  font-size: 1.2em;
+  text-align: center;
+  margin-bottom: 30px;
+  color: #34495e;
+}
+.frame {
+  border: 2px solid #888;
+  border-radius: 20px;
+  padding: 20px;
+  background-color: #fff;
+  margin: 10px;
+  box-shadow: 3px 3px 10px rgba(0,0,0,0.1);
+}
+.row-container {
+  display: flex;
+  justify-content: space-between;
+}
+.column {
+  flex: 1;
+  margin: 10px;
+}
+.full-width {
+  width: 100%;
+  margin: 10px 0;
+}
+input, button, select {
+  font-size: 1em;
+}
+.emoji {
+  font-size: 1.2em;
+  margin-right: 5px;
+}
+"""
+
+# -------------------------------
+# Gradio UI 구성 (HTML/CSS 커스터마이징)
+# -------------------------------
+with gr.Blocks(css=custom_css, title="영상 -> GIF 변환 서비스") as demo:
+    # 제목 & 사용자 가이드
+    gr.HTML("<div class='custom-title'>🎬 영상을 GIF변환하기 🎞️</div>")
+    gr.HTML("<div class='custom-user-guide'>👉 사용가이드: 좌측 '입력부'에서 영상을 업로드하고 옵션을 선택한 후,<br>"
+            "하단 '작업 썸네일미리보기'에서 시작/종료 시간을 설정하고 썸네일을 확인하세요. <br>"
+            "우측 '출력부'에서 생성된 GIF를 미리 보고 다운로드할 수 있습니다. 😊</div>")
+    
+    # 첫번째 행: 입력부 (좌측) / 출력부 (우측)
+    with gr.Row(elem_classes="row-container"):
+        with gr.Column(elem_classes="column"):
+            with gr.Group(elem_classes="frame"):
+                gr.Markdown("### 📥 입력부")
+                video_input = gr.Video(label="영상 업로드", show_label=True)
+                platform_option = gr.Radio(
+                    label="해상도/비율 선택",
+                    choices=["원본 유지", "유튜브 (16:9)", "쇼츠/릴스 (9:16)", "정사각형 (1:1)", "인스타그램 (4:5)", "클래식 (4:3)"],
+                    value="원본 유지"
+                )
+                resolution_scale_slider = gr.Slider(label="출력 해상도 축소 비율 (0.1 ~ 1.0)", 
+                                                    minimum=0.1, maximum=1.0, step=0.1, value=1.0)
+                frame_rate_slider = gr.Slider(label="프레임 레이트 배율 조절 (0.1 ~ 1.0)", 
+                                              minimum=0.1, maximum=1.0, step=0.1, value=1.0)
+                speed_slider = gr.Slider(label="재생 속도 조절 (0.5 ~ 5.0)", 
+                                         minimum=0.5, maximum=5.0, step=0.1, value=1.0)
+                repeat_slider = gr.Slider(label="GIF 반복 횟수 (0: 무한반복, 1~10)", 
+                                          minimum=0, maximum=10, step=1, value=0)
+        with gr.Column(elem_classes="column"):
+            with gr.Group(elem_classes="frame"):
+                gr.Markdown("### 📤 출력부")
+                gif_preview_output = gr.Image(label="GIF 결과 미리보기")
+                download_output = gr.File(label="GIF 다운로드")
+    
+    # 두번째 행: 작업 썸네일미리보기 영역 (전체 너비)
+    with gr.Group(elem_classes="frame full-width"):
+        gr.Markdown("### 🖼️ 작업 썸네일미리보기")
+        with gr.Row():
+            start_time_tb = gr.Textbox(label="시작 시간 (예: 00:00:05)", value="00:00:00")
+            end_time_tb = gr.Textbox(label="종료 시간 (예: 00:00:10)", value="00:00:05")
+        with gr.Row():
+            start_thumb_output = gr.Image(label="시작 썸네일")
+            end_thumb_output = gr.Image(label="종료 썸네일")
+        generate_button = gr.Button("✨ GIF 생성하기")
+
+    logs_output = gr.Textbox(label="📝 작업 로그", lines=10)
+
+    # 이벤트 바인딩
+    # 영상 업로드, 시작/종료 시간 변경 시 썸네일 업데이트
+    start_time_tb.change(fn=update_thumbnails,
+                         inputs=[video_input, start_time_tb, end_time_tb],
+                         outputs=[start_thumb_output, end_thumb_output])
+    end_time_tb.change(fn=update_thumbnails,
+                       inputs=[video_input, start_time_tb, end_time_tb],
+                       outputs=[start_thumb_output, end_thumb_output])
+    video_input.change(fn=update_thumbnails,
+                       inputs=[video_input, start_time_tb, end_time_tb],
+                       outputs=[start_thumb_output, end_thumb_output])
+    # GIF 생성 버튼 클릭 시 전체 처리 (입력부 + 작업 썸네일미리보기)
+    generate_button.click(fn=process_video,
+                          inputs=[video_input, start_time_tb, end_time_tb,
+                                  platform_option, frame_rate_slider, speed_slider, repeat_slider,
+                                  resolution_scale_slider],
+                          outputs=[gif_preview_output, download_output, logs_output])
+
+demo.launch()