Update app.py

app.py

@@ -64,7 +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
@@ -130,48 +130,33 @@ def process_video(video,
         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에 반영됨)
+    # FPS 조절
     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 메타데이터 사용)
-    loop_param = 0 if int(repeat_count) == 0 else int(repeat_count)
-    add_log(f"[LOG 10] GIF 반복 횟수 설정: {repeat_count} (0이면 무한반복, 적용값: {loop_param})")
-    
+    # 반복 횟수(0: 무한, 1~10: 지정 횟수)
+    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:
-        # MoviePy의 write_gif 대신 직접 imageio를 사용하여 GIF 생성
-        import imageio
-        
-        # 프레임 추출
-        frames = []
-        for t in range(int(clip.duration * target_fps)):
-            frame_time = t / target_fps
-            frame = clip.get_frame(frame_time)
-            frames.append(frame)
-        
-        # imageio를 사용하여 GIF 저장 (loop 파라미터 적용)
-        imageio.mimsave(
-            output_filename,
-            frames,
-            fps=target_fps,
-            loop=loop_param  # 여기서 반복 횟수 설정
-        )
-        
-        add_log("[LOG 12] GIF 생성 완료! 파일명: " + output_filename)
+        loop_param = 0 if int(repeat_count) == 0 else int(repeat_count)
+        # ImageMagick로 GIF 생성 (loop 적용)
+        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):
@@ -207,78 +192,230 @@ def update_thumbnails(video, start_time_str, end_time_str):
 # 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,  # 완성된 GIF 미리보기
-                download_output,     # GIF 다운로드 링크
-                logs_output          # 로그 출력
-            ]
-        )
-
-    gr.Markdown(
-        "### [사용 가이드]\n"
-        "1. 동영상을 업로드하세요.\n"
-        "2. 시작/끝 시간을 입력하세요.\n"
-        "3. 플랫폼별 권장 해상도/비율(원본 유지, 유튜브, 쇼츠/릴스, 정사각형, 인스타그램, 클래식)과 출력 해상도 축소 비율을 선택하고,\n"
-        "   프레임 레이트 배율, 재생 속도, 반복 횟수를 조절한 후 `GIF 생성하기` 버튼을 누르면 GIF가 생성됩니다.\n"
-        "   - 반복 횟수(0: 무한반복, 1~10: 지정 횟수). 예) 1이면 1회 재생 후 멈춤, 2이면 2회 재생, 0이면 무한반복.\n"
-        "4. 결과 미리보기와 다운로드 링크를 통해 GIF를 확인할 수 있습니다.\n"
-        "※ 무한반복이 아닌 특정 반복 횟수를 원할 경우, ImageMagick이 설치되어 있어야 합니다."
+    #
+    # 1) CSS 스타일: 최대한 Gradio 느낌을 숨기고, 커스텀 디자인 적용
+    #
+    custom_css = """
+    <style>
+    /* 기본적인 리셋 */
+    body, h1, h2, h3, h4, p, div, span {
+      margin: 0; padding: 0; box-sizing: border-box;
+      font-family: "Noto Sans", sans-serif;
+    }
+
+    /* 배경색, 마진 등 기본 설정 */
+    body {
+      background: #fefefe;
+      color: #333;
+      padding: 20px;
+    }
+
+    /* 큰 타이틀 */
+    .main-title {
+      font-size: 2.0rem;
+      text-align: center;
+      margin: 0.5em 0;
+      color: #e67e22; /* 오렌지 톤 */
+      font-weight: bold;
+    }
+
+    /* 안내 문구 (사용 가이드 등) */
+    .guide-text {
+      font-size: 1rem;
+      color: #555;
+      margin-bottom: 1.5em;
+      text-align: center;
+      line-height: 1.4em;
+    }
+
+    .emoji-title {
+      font-size: 1.3rem;
+      margin-bottom: 0.5em;
+      text-align: center;
+      color: #2ecc71; /* 그린 톤 */
+    }
+
+    /* 컨테이너를 좌우로 배치 */
+    .row-container {
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      margin-bottom: 1.5em;
+      gap: 1em;
+    }
+
+    /* 2개의 박스를 각각 반으로 나누어 배치 */
+    .box {
+      width: 50%;
+      background-color: #ffffff;
+      border: 2px solid #ddd;
+      border-radius: 15px;
+      padding: 1em;
+      box-shadow: 0 2px 5px rgba(0,0,0,0.1);
+    }
+
+    /* 1개의 박스 전체 너비 */
+    .single-box {
+      width: 100%;
+      background-color: #ffffff;
+      border: 2px solid #ddd;
+      border-radius: 15px;
+      padding: 1em;
+      box-shadow: 0 2px 5px rgba(0,0,0,0.1);
+      margin-bottom: 1.5em;
+    }
+
+    /* 섹션 내부 헤더 스타일 */
+    .section-title {
+      font-size: 1.2rem;
+      margin-bottom: 0.5em;
+      font-weight: bold;
+      color: #3498db; /* 블루 톤 */
+    }
+
+    /* 컴포넌트 배치 위한 내부 래퍼 */
+    .component-wrapper {
+      margin-bottom: 0.8em;
+    }
+
+    /* "GIF 생성하기" 버튼 스타일(약간 크게) */
+    .big-button {
+      display: block;
+      width: 100%;
+      padding: 0.8em;
+      background-color: #e74c3c; 
+      color: #fff;
+      border: none;
+      border-radius: 8px;
+      font-size: 1.1rem;
+      font-weight: bold;
+      cursor: pointer;
+      margin-top: 1em;
+    }
+    .big-button:hover {
+      background-color: #c0392b;
+    }
+    </style>
+    """
+
+    gr.HTML(custom_css)  # 커스텀 CSS를 삽입
+
+    # 2) 제목 및 간단 설명
+    gr.HTML(
+        """
+        <h1 class="main-title">🎬 영상을 GIF로 변환하기 🍿</h1>
+        <div class="guide-text">
+        📝 간단 안내: 영상을 업로드하고, 원하는 해상도/비율, 프레임속도, 반복 횟수를 설정한 뒤 GIF 생성하기를 눌러보세요!<br/>
+        </div>
+        """
+    )
+
+    # 3) 첫 번째 줄: 입력부(좌측) + 출력부(우측)
+    gr.HTML("<div class='row-container'>")
+    gr.HTML("<div class='box'>")  # 좌측 입력부 박스 시작
+    gr.HTML("<div class='emoji-title'>⚙️ 입력부</div>")
+    # 영상 업로드
+    video_input = gr.Video(label="영상 업로드", elem_id="video_input", show_label=True)
+    platform_option = gr.Radio(
+        label="해상도/비율 선택",
+        choices=["원본 유지", "유튜브 (16:9)", "쇼츠/릴스 (9:16)", "정사각형 (1:1)", "인스타그램 (4:5)", "클래식 (4:3)"],
+        value="원본 유지",
+        elem_id="platform_option"
+    )
+    resolution_scale_slider = gr.Slider(
+        label="출력 해상도 축소 비율 (0.1 ~ 1.0)",
+        minimum=0.1, maximum=1.0, step=0.1, value=1.0,
+        elem_id="resolution_scale"
+    )
+    frame_rate_slider = gr.Slider(
+        label="프레임 레이트 배율 조절 (0.1 ~ 1.0)",
+        minimum=0.1, maximum=1.0, step=0.1, value=1.0,
+        elem_id="frame_rate"
+    )
+    speed_slider = gr.Slider(
+        label="재생 속도 조절 (0.5 ~ 5.0)",
+        minimum=0.5, maximum=5.0, step=0.1, value=1.0,
+        elem_id="speed_factor"
+    )
+    repeat_slider = gr.Slider(
+        label="GIF 반복 횟수 (0: 무한반복, 1~10: 반복 횟수)",
+        minimum=0, maximum=10, step=1, value=0,
+        elem_id="repeat_count"
+    )
+    gr.HTML("</div>")  # 좌측 입력부 박스 끝
+
+    gr.HTML("<div class='box'>")  # 우측 출력부 박스 시작
+    gr.HTML("<div class='emoji-title'>🚀 출력부</div>")
+    gif_preview_output = gr.Image(label="GIF 결과 미리보기", elem_id="gif_preview")
+    download_output = gr.File(label="GIF 다운로드", elem_id="gif_download")
+    gr.HTML("</div>")  # 우측 출력부 박스 끝
+    gr.HTML("</div>")  # 첫 번째 줄(row-container) 종료
+
+    # 4) 두 번째 줄: 썸네일 미리보기
+    gr.HTML("<div class='single-box'>")
+    gr.HTML("<div class='emoji-title'>🔎 작업 썸네일 미리보기</div>")
+    start_thumb_output = gr.Image(label="시작 썸네일", elem_id="start_thumb")
+    end_thumb_output = gr.Image(label="종료 썸네일", elem_id="end_thumb")
+    # GIF 생성 버튼
+    generate_button = gr.Button("💡 GIF 생성하기", elem_id="generate_btn", css="", variant="primary").style(full_width=False)
+    logs_output = gr.Textbox(label="작업 로그", lines=6)
+    gr.HTML("</div>")
+
+    # 5) 이벤트 & 로직 연결
+    start_time = gr.Textbox(label="시작 시간 (예: 00:00:05)", value="00:00:00")
+    end_time = gr.Textbox(label="종료 시간 (예: 00:00:10)", value="00:00:05")
+
+    # 화면상에는 표시되지 않지만, 로직 처리를 위해 위치만 잡아둠 (elem_id 없이)
+    # -> 필요하다면 style="display:none;"로 숨겨도 됨.
+    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]
+    )
+
+    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,  # 완성된 GIF 미리보기
+            download_output,     # GIF 다운로드 링크
+            logs_output          # 로그 출력
+        ]
+    )
+
+    # 6) 사용자 가이드(하단)
+    gr.HTML(
+        """
+        <div class="single-box" style="text-align:center;">
+          <h2 class="section-title">📢 간단 사용 가이드</h2>
+          <p style="font-size:1rem; margin-bottom:0.5em;">
+            1) <strong>영상을 업���드</strong>합니다.<br/>
+            2) <strong>시작/끝 시간</strong>과 <strong>해상도/비율</strong>을 설정합니다.<br/>
+            3) <strong>출력 해상도 축소, 프레임 레이트, 재생 속도, 반복 횟수</strong>를 조절합니다.<br/>
+            4) <strong>GIF 생성하기</strong> 버튼을 눌러 변환을 진행하세요.<br/>
+            5) 결과 미리보기와 다운로드를 통해 GIF를 확인하세요!<br/>
+          </p>
+        </div>
+        """
     )
 
 if __name__ == "__main__":