Update app.py

app.py

@@ -1,7 +1,6 @@
 import os
 import uuid
 import moviepy.editor as mp
-import numpy as np
 from PIL import Image
 import gradio as gr
 
@@ -11,11 +10,16 @@ import gradio as gr
 global_logs = []
 
 def add_log(message: str):
-    global global_logs
+    """
+    로그 메시지를 저장하는 함수
+    """
     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)
@@ -24,6 +28,9 @@ def parse_time_to_seconds(time_str: str):
         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)
@@ -35,8 +42,12 @@ def generate_thumbnail(video_clip, time_point):
         return thumbnail_img
 
 def adjust_aspect_ratio(clip, option):
+    """
+    영상 클립을 선택한 플랫폼의 권장 비율로 중앙 크롭하여 조정합니다.
+    """
     if option == "원본 유지":
         return clip
+
     if option == "유튜브 (16:9)":
         target_ratio = 16 / 9
     elif option == "쇼츠/릴스 (9:16)":
@@ -53,6 +64,7 @@ def adjust_aspect_ratio(clip, option):
     width, height = clip.size
     current_ratio = width / height
 
+    # 영상이 너무 넓다면 가로를, 너무 높다면 세로를 크롭합니다.
     if current_ratio > target_ratio:
         new_width = int(height * target_ratio)
         new_height = height
@@ -60,28 +72,25 @@ def adjust_aspect_ratio(clip, option):
         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, 
-                  frame_rate_factor,  
+                  platform_option,    # 플랫폼별 비율 선택 (Radio)
+                  frame_rate_factor,  # 프레임 레이트 축소 배율 (1.0이면 원본)
                   speed_factor,
                   repeat_count,
-                  resolution_scale):
+                  resolution_scale):  # 출력 해상도 축소 비율 (1.0이면 원본)
     """
     동영상을 GIF로 변환하는 함수
     """
     global global_logs
-    global_logs = []
+    global_logs = []  # 호출 시마다 로그 초기화
+
     add_log("[LOG 1] 비디오 업로드 및 처리 시작")
 
+    # video 파라미터에서 파일 경로 추출 (Gradio에서 반환하는 값이 문자열일 수 있음)
     video_path = video if isinstance(video, str) else video.name
 
     add_log("[LOG 2] 비디오 로드 중...")
@@ -98,6 +107,7 @@ def process_video(video,
     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:
@@ -111,22 +121,27 @@ def process_video(video,
     add_log("[LOG 6] 영상 자르기 작업 진행...")
     clip = input_video.subclip(start_sec, end_sec)
 
+    # 플랫폼별 해상도(비율) 조정
     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}%")
         clip = clip.resize(resolution_scale)
 
+    # 재생속도 조절: speedx를 적용하면 clip.duration은 줄어들지만 fps는 그대로 유지됨.
     if abs(speed_factor - 1.0) > 1e-3:
         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})")
     clip = clip.set_fps(target_fps)
 
+    # 반복 횟수: 0이면 무한반복, 1~10이면 해당 횟수만큼 반복 (GIF의 loop 메타데이터 사용)
     add_log(f"[LOG 10] GIF 반복 횟수 설정: {repeat_count} (0이면 무한반복)")
     final_clip = clip
 
@@ -134,17 +149,21 @@ def process_video(video,
     output_filename = f"temp_{uuid.uuid4().hex}.gif"
     try:
         loop_param = 0 if int(repeat_count) == 0 else int(repeat_count)
-        # ImageMagick로 생성 (기본값), loop=0 => 무한
-        final_clip.write_gif(output_filename, fps=target_fps, loop=loop_param)
-        add_log(f"[LOG 12] GIF 생성 완료! 파일명: {output_filename}, loop={loop_param}")
+        final_clip.write_gif(output_filename, fps=target_fps, program='ffmpeg', loop=loop_param)
+        add_log("[LOG 12] GIF 생성 완료! 파일명: " + output_filename)
     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:
@@ -165,219 +184,72 @@ def update_thumbnails(video, start_time_str, end_time_str):
 
     start_thumb = generate_thumbnail(input_video, start_sec)
     end_thumb = generate_thumbnail(input_video, end_sec)
-    return start_thumb, end_thumb
 
-# ------------------------------
-# 커스텀 CSS (Gradio 기본 스타일 감추고, 모서리를 둥글게, 배경색 등)
-# ------------------------------
-custom_css = """
-/* 전체 배경 및 기본 글꼴 설정 */
-body {
-    background: linear-gradient(145deg, #fcfcfc, #eef4f7);
-    font-family: 'Helvetica', 'Arial', sans-serif;
-    margin: 0;
-    padding: 0;
-}
-
-/* 숨겨야 하는 Gradio의 기본 요소들 */
-.gradio-container {
-    max-width: 1100px; /* 폭 조절 */
-    margin: 0 auto;
-    padding: 0px;
-    box-shadow: none !important;
-    border-radius: 0 !important;
-    background-color: transparent !important;
-}
-
-/* 각 섹션을 감쌀 카드 디자인 */
-.my-frame {
-    background-color: #ffffffcc;
-    border-radius: 25px;
-    padding: 20px;
-    margin: 10px;
-    box-shadow: 0 0 10px rgba(0,0,0,0.1);
-}
-
-.my-frame h2 {
-    font-size: 1.5em;
-    margin-bottom: 10px;
-}
-
-.my-frame h3 {
-    font-size: 1.3em;
-    margin-bottom: 8px;
-}
-
-/* 이모티콘 포함한 타이틀 */
-#title {
-    text-align: center;
-    font-size: 2rem;
-    font-weight: bold;
-    margin: 20px 0 10px 0;
-}
-
-/* 사용 가이드 */
-#guide {
-    text-align: center;
-    margin-bottom: 25px;
-    font-size: 1rem;
-    line-height: 1.5;
-    background-color: #fffcf7cc;
-    padding: 15px;
-    border-radius: 15px;
-    display: inline-block;
-}
-
-/* 라벨 텍스트 살짝 크게 */
-label {
-    font-size: 1rem;
-    font-weight: 500;
-}
-
-/* 버튼 디자인 */
-button {
-    font-size: 1rem;
-    font-weight: bold;
-    padding: 10px 15px;
-    border-radius: 25px;
-    background: linear-gradient(135deg, #81ecec, #74b9ff);
-    color: #fff;
-    border: none;
-    cursor: pointer;
-}
-button:hover {
-    opacity: 0.9;
-}
-
-/* 이미지(썸네일, 결과 미리보기) 디자인 */
-img {
-    border-radius: 15px;
-    max-width: 100%;
-}
-
-/* 그리드 배치 컨테이너 */
-.row-container {
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    gap: 10px;
-}
-
-.column-container {
-    flex: 1;
-}
-
-/* 이모티콘용 강조 */
-.emoji {
-    font-size: 1.4em;
-    margin-right: 8px;
-}
-"""
+    return start_thumb, end_thumb
 
 # ------------------------------
 # Gradio 인터페이스 구성 (Blocks)
 # ------------------------------
-with gr.Blocks(css=custom_css) as demo:
-    # 상단 제목
-    gr.HTML("<div id='title'>🎉 영상을 GIF로 변환하기 🎉</div>")
-
-    # 사용 가이드
-    gr.HTML(
-        """
-        <div id='guide'>
-            <strong>📌 사용 가이드</strong><br><br>
-            1) 영상을 업로드 후, 원하는 해상도와 옵션을 설정합니다.<br>
-            2) [GIF 생성하기] 버튼을 클릭하면 변환이 시작됩니다.<br>
-            3) 썸네일(시작/끝), 완성된 GIF 미리보기, 다운로드 링크를 확인할 수 있습니다.<br>
-            <br>
-            🏆 Tips: 프레임 레이트/해상도를 낮추면 GIF 용량을 줄일 수 있습니다.
-        </div>
-        """
-    )
-
-    # 1) 입력부 + 출력부 (한 줄)
-    with gr.Row():
-        with gr.Column():
-            # 입력부
-            gr.HTML("<div class='my-frame'><h2 class='emoji'>💻 입력부</h2>", elem_id="input-start")
-
-            video_input = gr.Video(label="영상 업로드")
-            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)
-
-            gr.HTML("</div>", elem_id="input-end")
-
-        with gr.Column():
-            # 출력부
-            gr.HTML("<div class='my-frame'><h2 class='emoji'>✅ 출력부</h2>", elem_id="output-start")
-
-            gif_preview_output = gr.Image(label="GIF 결과 미리보기")
-            download_output = gr.File(label="GIF 다운로드 링크")
-
-            gr.HTML("</div>", elem_id="output-end")
-
-    # 2) 작업 썸네일 미리보기 (하단 한 줄)
-    with gr.Column():
-        gr.HTML("<div class='my-frame'><h2 class='emoji'>🔍 작업 썸네일 미리보기</h2>", elem_id="thumb-start")
-
-        start_thumb_output = gr.Image(label="시작 썸네일")
-        end_thumb_output = gr.Image(label="종료 썸네일")
-
+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 생성하기")
-        logs_output = gr.Textbox(label="처리 로그", lines=6)
-
-        gr.HTML("</div>", elem_id="thumb-end")
-
-    # 로직 연결
-    start_time = gr.Textbox(label="", visible=False, value="00:00:00")  # 숨김
-    end_time = gr.Textbox(label="", visible=False, value="00:00:05")   # 숨김
-
-    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_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를 확인할 수 있습니다."
     )
 
-    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
-        ]
-    )
-
-
 if __name__ == "__main__":
-    demo.launch()
+    demo.launch()