Update app.py

app.py

@@ -64,7 +64,6 @@ 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
@@ -77,11 +76,11 @@ def adjust_aspect_ratio(clip, option):
 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이면 원본)
+                  resolution_scale):
     """
     동영상을 GIF로 변환하는 함수
     """
@@ -90,7 +89,7 @@ def process_video(video,
 
     add_log("[LOG 1] 비디오 업로드 및 처리 시작")
 
-    # video 파라미터에서 파일 경로 추출 (Gradio에서 반환하는 값이 문자열일 수 있음)
+    # video 파라미터에서 파일 경로 추출
     video_path = video if isinstance(video, str) else video.name
 
     add_log("[LOG 2] 비디오 로드 중...")
@@ -121,11 +120,10 @@ 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)
@@ -135,13 +133,12 @@ def process_video(video,
         add_log(f"[LOG 8] 재생속도 {speed_factor}배로 조절 중...")
         clip = clip.fx(mp.vfx.speedx, speed_factor)
 
-    # 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: 지정 횟수)
+    # 반복 횟수 설정
     add_log(f"[LOG 10] GIF 반복 횟수 설정: {repeat_count} (0이면 무한반복)")
     final_clip = clip
 
@@ -149,19 +146,17 @@ 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로 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)
 
-    # 결과 반환 (미리보기용 경로, 다운로드용 경로, 로그)
     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
 
@@ -188,185 +183,180 @@ def update_thumbnails(video, start_time_str, end_time_str):
 
     return start_thumb, end_thumb
 
+
+# ---------- 커스텀 CSS ----------
+custom_css = """
+/* 전체 배경 */
+body {
+  background-color: #fdfdfd;
+  margin: 0;
+  padding: 0;
+  font-family: 'Noto Sans KR', sans-serif;
+}
+
+/* 상단 제목 영역 */
+.title-container {
+  text-align: center;
+  margin-top: 20px;
+  margin-bottom: 15px;
+}
+.title-container h1 {
+  font-size: 2.2rem;
+  font-weight: bold;
+  color: #333;
+}
+.title-container h1 .emoji {
+  font-size: 1.8rem;
+}
+
+/* 사용 가이드 영역 */
+.guide-container {
+  text-align: center;
+  padding: 0 20px;
+  margin-bottom: 20px;
+}
+.guide-container p {
+  font-size: 1rem;
+  color: #444;
+  line-height: 1.5;
+}
+
+/* 프레임(테두리) 공통 스타일 */
+.frame {
+  border: 2px solid #ccc;
+  border-radius: 15px;
+  padding: 15px;
+  margin: 10px;
+  background-color: #fff;
+}
+.frame h3 {
+  margin-top: 0;
+}
+
+/* 그리디오 컴포넌트의 기본 여백 등을 제거/조정 */
+.gradio-container {
+  padding: 0 !important;
+}
+
+/* 입력부와 출력부 같은 라인 배치 */
+.flex-row {
+  display: flex;
+  justify-content: space-around;
+  gap: 10px;
+  flex-wrap: wrap; /* 화면 좁을 때 자동 줄바꿈 */
+}
+.flex-column {
+  flex: 1;
+  min-width: 300px;
+}
+
+/* 타원형 버튼 */
+.custom-button {
+  border-radius: 25px !important;
+  background-color: #fa8072 !important;
+  color: #fff !important;
+  font-weight: bold !important;
+}
+
+/* 하단 썸네일 영역은 한 줄(전체 폭)로 배�� */
+.full-width-row {
+  display: flex;
+  justify-content: center;
+  margin-top: 10px;
+  gap: 20px;
+  flex-wrap: wrap; /* 화면 좁아지면 줄바꿈 */
+}
+"""
+
 # ------------------------------
 # Gradio 인터페이스 구성 (Blocks)
 # ------------------------------
-with gr.Blocks() as demo:
-    #
-    # 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(
+with gr.Blocks(css=custom_css, theme=None) as demo:
+    # 상단 제목
+    with gr.HTML():
+        html_title = """
+        <div class="title-container">
+            <h1><span class="emoji">🎞️</span> 영상을 GIF로 변화하기 <span class="emoji">✨</span></h1>
+        </div>
         """
-        <h1 class="main-title">🎬 영상을 GIF로 변환하기 🍿</h1>
-        <div class="guide-text">
-        📝 간단 안내: 영상을 업로드하고, 원하는 해상도/비율, 프레임속도, 반복 횟수를 설정한 뒤 GIF 생성하기를 눌러보세요!<br/>
+        print(html_title)  # 이 출력은 실제 UI에는 영향 주지 않음
+    gr.HTML(html_title)
+
+    # 사용 가이드
+    with gr.HTML():
+        html_guide = """
+        <div class="guide-container">
+            <p>🌟 원하는 영상을 업로드하고<br>
+               원하는 해상도/비율, 속도, 프레임 등을 조정하세요.<br>
+               <strong>GIF 생성하기</strong> 버튼을 누르면 변환이 완료됩니다.</p>
         </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)
+
+            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
+            )
+
+        with gr.Column(elem_id="col-output", variant="panel"):
+            custom_output_html = """
+            <div class="frame">
+                <h3>출력부 🎉</h3>
+            </div>
+            """
+            gr.HTML(custom_output_html)
+
+            gif_preview_output = gr.Image(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)
 
-    # 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_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)
+
+    # 썸네일 업데이트
     start_time.change(
         fn=update_thumbnails,
         inputs=[video_input, start_time, end_time],
@@ -383,40 +373,38 @@ with gr.Blocks() as demo:
         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  # 해상도 축소 비율
+            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          # 로그 출력
+            gif_preview_output,
+            download_output,
+            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>
-        """
-    )
+# 간단한 사용 가이드 (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()