Update app.py

app.py

@@ -1,6 +1,7 @@
 import os
 import uuid
 import moviepy.editor as mp
+import numpy as np
 from PIL import Image
 import gradio as gr
 
@@ -10,16 +11,11 @@ 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)
@@ -28,9 +24,6 @@ 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)
@@ -42,12 +35,8 @@ 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)":
@@ -71,13 +60,18 @@ 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, 
+                  frame_rate_factor,  
                   speed_factor,
                   repeat_count,
                   resolution_scale):
@@ -85,11 +79,9 @@ def process_video(video,
     동영상을 GIF로 변환하는 함수
     """
     global global_logs
-    global_logs = []  # 호출 시마다 로그 초기화
-
+    global_logs = []
     add_log("[LOG 1] 비디오 업로드 및 처리 시작")
 
-    # video 파라미터에서 파일 경로 추출
     video_path = video if isinstance(video, str) else video.name
 
     add_log("[LOG 2] 비디오 로드 중...")
@@ -106,7 +98,6 @@ 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:
@@ -123,12 +114,10 @@ def process_video(video,
     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)
 
-    # 재생속도 조절
     if abs(speed_factor - 1.0) > 1e-3:
         add_log(f"[LOG 8] 재생속도 {speed_factor}배로 조절 중...")
         clip = clip.fx(mp.vfx.speedx, speed_factor)
@@ -138,7 +127,6 @@ def process_video(video,
     add_log(f"[LOG 9] 최종 출력 FPS: {target_fps:.2f} (원본 FPS: {original_fps})")
     clip = clip.set_fps(target_fps)
 
-    # 반복 횟수 설정
     add_log(f"[LOG 10] GIF 반복 횟수 설정: {repeat_count} (0이면 무한반복)")
     final_clip = clip
 
@@ -146,6 +134,7 @@ 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}")
     except Exception as e:
@@ -155,11 +144,7 @@ def process_video(video,
     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:
@@ -180,129 +165,141 @@ 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 ----------
+# ------------------------------
+# 커스텀 CSS (Gradio 기본 스타일 감추고, 모서리를 둥글게, 배경색 등)
+# ------------------------------
 custom_css = """
-/* 전체 배경 */
+/* 전체 배경 및 기본 글��� 설정 */
 body {
-  background-color: #fdfdfd;
-  margin: 0;
-  padding: 0;
-  font-family: 'Noto Sans KR', sans-serif;
+    background: linear-gradient(145deg, #fcfcfc, #eef4f7);
+    font-family: 'Helvetica', 'Arial', sans-serif;
+    margin: 0;
+    padding: 0;
 }
 
-/* 상단 제목 영역 */
-.title-container {
-  text-align: center;
-  margin-top: 20px;
-  margin-bottom: 15px;
+/* 숨겨야 하는 Gradio의 기본 요소들 */
+.gradio-container {
+    max-width: 1100px; /* 폭 조절 */
+    margin: 0 auto;
+    padding: 0px;
+    box-shadow: none !important;
+    border-radius: 0 !important;
+    background-color: transparent !important;
 }
-.title-container h1 {
-  font-size: 2.2rem;
-  font-weight: bold;
-  color: #333;
+
+/* 각 섹션을 감쌀 카드 디자인 */
+.my-frame {
+    background-color: #ffffffcc;
+    border-radius: 25px;
+    padding: 20px;
+    margin: 10px;
+    box-shadow: 0 0 10px rgba(0,0,0,0.1);
 }
-.title-container h1 .emoji {
-  font-size: 1.8rem;
+
+.my-frame h2 {
+    font-size: 1.5em;
+    margin-bottom: 10px;
 }
 
-/* 사용 가이드 영역 */
-.guide-container {
-  text-align: center;
-  padding: 0 20px;
-  margin-bottom: 20px;
+.my-frame h3 {
+    font-size: 1.3em;
+    margin-bottom: 8px;
 }
-.guide-container p {
-  font-size: 1rem;
-  color: #444;
-  line-height: 1.5;
+
+/* 이모티콘 포함한 타이틀 */
+#title {
+    text-align: center;
+    font-size: 2rem;
+    font-weight: bold;
+    margin: 20px 0 10px 0;
 }
 
-/* 프레임(테두리) 공통 스타일 */
-.frame {
-  border: 2px solid #ccc;
-  border-radius: 15px;
-  padding: 15px;
-  margin: 10px;
-  background-color: #fff;
+/* 사용 가이드 */
+#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;
 }
-.frame h3 {
-  margin-top: 0;
+
+/* 라벨 텍스트 살짝 크게 */
+label {
+    font-size: 1rem;
+    font-weight: 500;
 }
 
-/* 그리디오 컴포넌트의 기본 여백 등을 제거/조정 */
-.gradio-container {
-  padding: 0 !important;
+/* 버튼 디자인 */
+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;
 }
 
-/* 입력부와 출력부 같은 라인 배치 */
-.flex-row {
-  display: flex;
-  justify-content: space-around;
-  gap: 10px;
-  flex-wrap: wrap; /* 화면 좁을 때 자동 줄바꿈 */
+/* 이미지(썸네일, 결과 미리보기) 디자인 */
+img {
+    border-radius: 15px;
+    max-width: 100%;
 }
-.flex-column {
-  flex: 1;
-  min-width: 300px;
+
+/* 그리드 배치 컨테이너 */
+.row-container {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    gap: 10px;
 }
 
-/* 타원형 버튼 */
-.custom-button {
-  border-radius: 25px !important;
-  background-color: #fa8072 !important;
-  color: #fff !important;
-  font-weight: bold !important;
+.column-container {
+    flex: 1;
 }
 
-/* 하단 썸네일 영역은 한 줄(전체 폭)로 배치 */
-.full-width-row {
-  display: flex;
-  justify-content: center;
-  margin-top: 10px;
-  gap: 20px;
-  flex-wrap: wrap; /* 화면 좁아지면 줄바꿈 */
+/* 이모티콘용 강조 */
+.emoji {
+    font-size: 1.4em;
+    margin-right: 8px;
 }
 """
 
 # ------------------------------
 # Gradio 인터페이스 구성 (Blocks)
 # ------------------------------
-with gr.Blocks(css=custom_css, theme=None) as demo:
+with gr.Blocks(css=custom_css) as demo:
     # 상단 제목
-    with gr.HTML():
-        html_title = """
-        <div class="title-container">
-            <h1><span class="emoji">🎞️</span> 영상을 GIF로 변화하기 <span class="emoji">✨</span></h1>
-        </div>
-        """
-        print(html_title)  # 이 출력은 실제 UI에는 영향 주지 않음
-    gr.HTML(html_title)
+    gr.HTML("<div id='title'>🎉 영상을 GIF로 변환하기 🎉</div>")
 
     # 사용 가이드
-    with gr.HTML():
-        html_guide = """
-        <div class="guide-container">
-            <p>🌟 원하는 영상을 업로드하고<br>
-               원하는 해상도/비율, 속도, 프레임 등을 조정하세요.<br>
-               <strong>GIF 생성하기</strong> 버튼을 누르면 변환이 완료됩니다.</p>
+    gr.HTML(
+        """
+        <div id='guide'>
+            <strong>📌 사용 가이드</strong><br><br>
+            1) 영상을 업로드 후, 원하는 해상도와 옵션을 설정합니다.<br>
+            2) [GIF 생성하기] 버튼을 클릭하면 변환이 시작됩니다.<br>
+            3) 썸네일(시작/끝), 완성된 GIF 미리보기, 다운로드 링크를 확인할 수 있습니다.<br>
+            <br>
+            🏆 Tips: 프레임 레이트/해상도를 낮추면 GIF 용량을 줄일 수 있습니다.
         </div>
         """
-        print(html_guide)
-    gr.HTML(html_guide)
-
-    # 1) 입력부 - 출력부 (같은 행에 배치)
-    with gr.Row(elem_id="row-input-output"):
-        with gr.Column(elem_id="col-input", variant="panel"):
-            custom_input_html = """
-            <div class="frame">
-                <h3>입력부 🚀</h3>
-            </div>
-            """
-            gr.HTML(custom_input_html)
+    )
+
+    # 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(
@@ -310,53 +307,42 @@ with gr.Blocks(css=custom_css, theme=None) as demo:
                 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
-            )
+            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_id="col-output", variant="panel"):
-            custom_output_html = """
-            <div class="frame">
-                <h3>출력부 🎉</h3>
-            </div>
-            """
-            gr.HTML(custom_output_html)
+            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 다운로드")
+            download_output = gr.File(label="GIF 다운로드 링크")
 
-    # 2) 썸네일 미리보기 (두 번째 줄 전체)
-    with gr.Row(elem_id="row-thumbnail"):
-        custom_thumb_html = """
-        <div class="frame">
-            <h3>작업 썸네일 미리보기 🔍</h3>
-        </div>
-        """
-        gr.HTML(custom_thumb_html)
+            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="종료 썸네일")
-        generate_button = gr.Button("GIF 생성하기", elem_classes="custom-button")
-        logs_output = gr.Textbox(label="로그 출력", lines=8)
 
-    # 이벤트 로직
-    start_time = gr.Textbox(label="시작 시간 (예: 00:00:05)", value="00:00:00", visible=False)
-    end_time = gr.Textbox(label="종료 시간 (예: 00:00:10)", value="00:00:05", visible=False)
+        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],
@@ -373,17 +359,16 @@ with gr.Blocks(css=custom_css, theme=None) as demo:
         outputs=[start_thumb_output, end_thumb_output]
     )
 
-    # GIF 생성 버튼 이벤트
     generate_button.click(
         fn=process_video,
         inputs=[
-            video_input, 
-            start_time, 
+            video_input,
+            start_time,
             end_time,
-            platform_option, 
-            frame_rate_slider, 
-            speed_slider, 
-            repeat_slider, 
+            platform_option,
+            frame_rate_slider,
+            speed_slider,
+            repeat_slider,
             resolution_scale_slider
         ],
         outputs=[
@@ -393,18 +378,6 @@ with gr.Blocks(css=custom_css, theme=None) as demo:
         ]
     )
 
-# 간단한 사용 가이드 (HTML로 표시, 실제 앱 내부에 표시하려면 gr.HTML(...)에 넣어도 됨)
-guide_text = """
-<h2>간단 사용 가이드 📝</h2>
-<ol>
-    <li>영상 파일을 업로드하세요.</li>
-    <li>원하는 해상도/비율 옵션을 선택하세요.</li>
-    <li>출력 해상도 축소 비율, 프레임 레이트, 재생 속도, GIF 반복 횟수를 조절하세요.</li>
-    <li><strong>GIF 생성하기</strong> 버튼을 누르면 변환이 완료됩니다.</li>
-    <li>출력된 GIF를 미리보기로 확인하고, 다운로드할 수 있습니다.</li>
-</ol>
-"""
-print(guide_text)
 
 if __name__ == "__main__":
     demo.launch()