Update app.py

app.py

@@ -5,7 +5,7 @@ from PIL import Image
 import gradio as gr
 
 # -------------------------------
-# 내부 함수들 (동영상 처리 등)
+# 내부 처리 함수들
 # -------------------------------
 global_logs = []
 
@@ -16,7 +16,7 @@ def add_log(message: str):
 def parse_time_to_seconds(time_str: str):
     try:
         h, m, s = time_str.split(":")
-        return int(h) * 3600 + int(m) * 60 + float(s)
+        return int(h)*3600 + int(m)*60 + float(s)
     except Exception:
         return 0.0
 
@@ -44,7 +44,6 @@ def adjust_aspect_ratio(clip, option):
         target_ratio = 4/3
     else:
         return clip
-
     width, height = clip.size
     current_ratio = width/height
     if current_ratio > target_ratio:
@@ -65,7 +64,7 @@ def process_video(video,
                   resolution_scale):
     global global_logs
     global_logs = []
-    add_log("🎥 [LOG 1] 비디오 업로드 및 처리 시작")
+    add_log("🎥 [LOG] 영상 처리 시작")
     video_path = video if isinstance(video, str) else video.name
     try:
         input_video = mp.VideoFileClip(video_path)
@@ -73,7 +72,7 @@ def process_video(video,
         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(f"[LOG] 영상 재생시간: {duration:.2f}초")
     start_sec = parse_time_to_seconds(start_time_str)
     end_sec = parse_time_to_seconds(end_time_str)
     if start_sec < 0:
@@ -82,28 +81,26 @@ def process_video(video,
         end_sec = duration
     if start_sec >= end_sec:
         start_sec, end_sec = 0, duration
-    add_log(f"[LOG 5] 시간 설정: {start_sec}초 ~ {end_sec}초")
+    add_log(f"[LOG] 시간 설정: {start_sec}초 ~ {end_sec}초")
     clip = input_video.subclip(start_sec, end_sec)
-    add_log(f"[LOG 7] 플랫폼 비율 적용: {platform_option}")
+    add_log(f"[LOG] 플랫폼 비율 적용: {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] 해상도 축소: {resolution_scale*100:.0f}%")
         clip = clip.resize(resolution_scale)
     if abs(speed_factor - 1.0) > 1e-3:
-        add_log(f"[LOG 8] 재생속도 {speed_factor}배 적용")
+        add_log(f"[LOG] 재생속도 {speed_factor}배 적용")
         clip = clip.fx(mp.vfx.speedx, speed_factor)
     original_fps = clip.fps
     target_fps = original_fps * frame_rate_factor
-    add_log(f"[LOG 9] FPS: {target_fps:.2f} (원본 {original_fps})")
+    add_log(f"[LOG] FPS: {target_fps:.2f} (원본 {original_fps})")
     clip = clip.set_fps(target_fps)
-    add_log(f"[LOG 10] GIF 반복 횟수: {repeat_count} (0: 무한)")
-    final_clip = clip
+    add_log(f"[LOG] GIF 반복 횟수: {repeat_count} (0: 무한)")
     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, loop=loop_param)
-        add_log(f"[LOG 12] GIF 생성 완료: {output_filename}, loop={loop_param}")
+        clip.write_gif(output_filename, fps=target_fps, loop=loop_param)
+        add_log(f"[LOG] GIF 생성 완료: {output_filename}, loop={loop_param}")
     except Exception as e:
         add_log(f"[ERROR] GIF 생성 실패: {e}")
         return None, None, "\n".join(global_logs)
@@ -130,26 +127,41 @@ def update_thumbnails(video, start_time_str, end_time_str):
     return start_thumb, end_thumb
 
 # -------------------------------
-# Custom CSS (HTML/CSS 기반 새 UI)
+# Custom CSS
 # -------------------------------
 custom_css = """
-body {
-  font-family: 'Arial', sans-serif;
-  background-color: #eef2f7;
+/* 전체 컨테이너 폭을 70%로 줄임 */
+.gradio-container {
+  width: 70% !important;
+  margin: 0 auto;
 }
+
+/* 제목 및 사용가이드 왼쪽 정렬 및 크기 증가 */
 .custom-title {
   font-size: 2.8em;
-  text-align: center;
   font-weight: bold;
   margin: 20px 0;
   color: #2c3e50;
+  text-align: left;
 }
 .custom-user-guide {
   font-size: 1.2em;
-  text-align: center;
-  margin-bottom: 30px;
+  margin-bottom: 20px;
   color: #34495e;
+  text-align: left;
+}
+
+/* 사용가이드 박스 스타일 */
+.guide-box {
+  border: 2px solid #3498db;
+  border-radius: 10px;
+  padding: 15px;
+  background-color: #d6eaf8;
+  margin: 20px 0;
+  text-align: left;
 }
+
+/* 프레임 스타일 (입력부, 출력부, 썸네일 미리보기) */
 .frame {
   border: 2px solid #888;
   border-radius: 20px;
@@ -158,24 +170,44 @@ body {
   margin: 10px;
   box-shadow: 3px 3px 10px rgba(0,0,0,0.1);
 }
+
+/* 각 프레임 제목 크게 */
+.frame h3 {
+  font-size: 1.8em;
+  margin-bottom: 15px;
+  text-align: left;
+}
+
+/* 행 레이아웃 */
 .row-container {
   display: flex;
   justify-content: space-between;
 }
+
+/* 컬럼 레이아웃 */
 .column {
   flex: 1;
   margin: 10px;
 }
-.full-width {
-  width: 100%;
-  margin: 10px 0;
+
+/* 버튼 여백 */
+.gif-button {
+  margin-top: 30px;
+  padding: 10px 20px;
+  font-size: 1.2em;
 }
-input, button, select {
-  font-size: 1em;
+
+/* 슬라이더 스타일 (글자와 바 크게) */
+input[type=range] {
+  height: 20px;
 }
-.emoji {
+input[type=range]::-webkit-slider-thumb {
+  height: 20px;
+  width: 20px;
+}
+.slider-label {
   font-size: 1.2em;
-  margin-right: 5px;
+  margin-bottom: 5px;
 }
 """
 
@@ -183,11 +215,12 @@ input, button, select {
 # 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>")
+    # 제목과 사용가이드(왼쪽 정렬, 박스형태)
+    gr.HTML("<div class='custom-title'>🎬 영상을 GIF변환하기</div>")
+    gr.HTML("<div class='guide-box'><strong>사용가이드:</strong><br>"
+            "1. 좌측 입력부에서 영상을 업로드하고 옵션을 선택하세요.<br>"
+            "2. 하단 작업 썸네일미리보기에서 시작/종료 시간을 입력해 썸네일을 확인하세요.<br>"
+            "3. ✨ GIF 생성하기 버튼을 눌러 GIF를 생성하고, 우측 출력부에서 결과를 확인 및 다운로드하세요. 😊</div>")
     
     # 첫번째 행: 입력부 (좌측) / 출력부 (우측)
     with gr.Row(elem_classes="row-container"):
@@ -206,7 +239,7 @@ with gr.Blocks(css=custom_css, title="영상 -> GIF 변환 서비스") as demo:
                                               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)", 
+                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"):
@@ -214,7 +247,7 @@ with gr.Blocks(css=custom_css, title="영상 -> GIF 변환 서비스") as demo:
                 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():
@@ -223,12 +256,9 @@ with gr.Blocks(css=custom_css, title="영상 -> GIF 변환 서비스") as demo:
         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)
-
+        generate_button = gr.Button("✨ GIF 생성하기", elem_classes="gif-button")
+    
     # 이벤트 바인딩
-    # 영상 업로드, 시작/종료 시간 변경 시 썸네일 업데이트
     start_time_tb.change(fn=update_thumbnails,
                          inputs=[video_input, start_time_tb, end_time_tb],
                          outputs=[start_thumb_output, end_thumb_output])
@@ -238,11 +268,10 @@ with gr.Blocks(css=custom_css, title="영상 -> GIF 변환 서비스") as demo:
     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])
-
+                          outputs=[gif_preview_output, download_output])
+    
 demo.launch()