Update app.py

app.py

@@ -127,7 +127,7 @@ def update_thumbnails(video, start_time_str, end_time_str):
     return start_thumb, end_thumb
 
 # -------------------------------
-# Custom CSS
+# Custom CSS (HTML/CSS 기반 새 UI)
 # -------------------------------
 custom_css = """
 /* 전체 컨테이너 폭을 70%로 줄임 */
@@ -136,93 +136,102 @@ custom_css = """
   margin: 0 auto;
 }
 
-/* 제목 및 사용가이드 왼쪽 정렬 및 크기 증가 */
+/* 기본 폰트 크기 증가 */
+body {
+  font-size: 1.3em;
+}
+
+/* 제목 및 사용가이드 왼쪽 정렬, 글자 크게 */
 .custom-title {
-  font-size: 2.8em;
+  font-size: 3em;
   font-weight: bold;
   margin: 20px 0;
   color: #2c3e50;
   text-align: left;
 }
 .custom-user-guide {
-  font-size: 1.2em;
+  font-size: 1.5em;
   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;
   padding: 20px;
-  background-color: #fff;
   margin: 10px;
-  box-shadow: 3px 3px 10px rgba(0,0,0,0.1);
+  background-color: transparent;
 }
 
 /* 각 프레임 제목 크게 */
-.frame h3 {
-  font-size: 1.8em;
+.frame h3, .frame > h3 {
+  font-size: 2em;
   margin-bottom: 15px;
   text-align: left;
 }
 
-/* 행 레이아웃 */
+/* 행 및 열 레이아웃 */
 .row-container {
   display: flex;
   justify-content: space-between;
 }
-
-/* 컬럼 레이아웃 */
 .column {
   flex: 1;
   margin: 10px;
 }
 
-/* 버튼 여백 */
+/* GIF 생성하기 버튼 스타일 (포인트색 적용) */
 .gif-button {
   margin-top: 30px;
-  padding: 10px 20px;
-  font-size: 1.2em;
+  padding: 15px 25px;
+  font-size: 1.5em;
+  background-color: #e67e22;
+  color: #fff;
+  border: none;
+  border-radius: 10px;
+  cursor: pointer;
 }
 
-/* 슬라이더 스타일 (글자와 바 크게) */
+/* 슬라이더 및 선택 영역 스타일 (글자와 바 크게, 두껍게) */
 input[type=range] {
-  height: 20px;
+  height: 25px;
 }
 input[type=range]::-webkit-slider-thumb {
-  height: 20px;
-  width: 20px;
+  height: 25px;
+  width: 25px;
 }
 .slider-label {
-  font-size: 1.2em;
+  font-size: 1.5em;
   margin-bottom: 5px;
 }
+.gradio-radio label {
+  font-size: 1.5em !important;
+}
 """
 
 # -------------------------------
 # 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='guide-box'><strong>사용가이드:</strong><br>"
             "1. 좌측 입력부에서 영상을 업로드하고 옵션을 선택하세요.<br>"
             "2. 하단 작업 썸네일미리보기에서 시작/종료 시간을 입력해 썸네일을 확인하세요.<br>"
             "3. ✨ GIF 생성하기 버튼을 눌러 GIF를 생성하고, 우측 출력부에서 결과를 확인 및 다운로드하세요. 😊</div>")
     
-    # 첫번째 행: 입력부 (좌측) / 출력부 (우측)
+    # 첫 번째 행: 입력부 (좌측) / 출력부 (우측)
     with gr.Row(elem_classes="row-container"):
         with gr.Column(elem_classes="column"):
             with gr.Group(elem_classes="frame"):
@@ -247,8 +256,8 @@ 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"):
+    # 두 번째 행: 작업 썸네일미리보기 (전체 너비)
+    with gr.Group(elem_classes="frame"):
         gr.Markdown("### 🖼️ 작업 썸네일미리보기")
         with gr.Row():
             start_time_tb = gr.Textbox(label="시작 시간 (예: 00:00:05)", value="00:00:00")