Update app.py

app.py

@@ -127,23 +127,22 @@ def update_thumbnails(video, start_time_str, end_time_str):
     return start_thumb, end_thumb
 
 # -------------------------------
-# Custom CSS (HTML/CSS 기반 새 UI)
+# Custom CSS (글자 크기 크게, 회색 제거, 포인트 버튼 등)
 # -------------------------------
 custom_css = """
-/* 전체 컨테이너 폭을 70%로 줄임 */
+body {
+  font-size: 1.2em;
+  background-color: #ffffff;
+  font-family: 'Arial', sans-serif;
+}
 .gradio-container {
   width: 70% !important;
   margin: 0 auto;
 }
 
-/* 기본 폰트 크기 증가 */
-body {
-  font-size: 1.3em;
-}
-
-/* 제목 및 사용가이드 왼쪽 정렬, 글자 크게 */
+/* 제목 및 사용가이드 (왼쪽 정렬, 크게) */
 .custom-title {
-  font-size: 3em;
+  font-size: 3.2em;
   font-weight: bold;
   margin: 20px 0;
   color: #2c3e50;
@@ -152,36 +151,38 @@ body {
 .custom-user-guide {
   font-size: 1.5em;
   margin-bottom: 20px;
-  color: #34495e;
+  color: #2c3e50;
   text-align: left;
 }
 
-/* 사용가이드 박스 스타일 (배경 채우기 제거하고 테두리만) */
+/* 사용가이드 박스 스타일 (회색 제거, 흰색 배경) */
 .guide-box {
   border: 2px solid #3498db;
   border-radius: 10px;
   padding: 15px;
+  background-color: #ffffff;
   margin: 20px 0;
   text-align: left;
 }
 
-/* 프레임 스타일 - 배경 제거, 테두리만 */
+/* 프레임 스타일 */
 .frame {
-  border: 2px solid #888;
+  border: 2px solid #3498db;
   border-radius: 20px;
   padding: 20px;
+  background-color: #ffffff;
   margin: 10px;
-  background-color: transparent;
+  box-shadow: 3px 3px 10px rgba(0,0,0,0.1);
 }
 
 /* 각 프레임 제목 크게 */
-.frame h3, .frame > h3 {
+.frame h3 {
   font-size: 2em;
   margin-bottom: 15px;
   text-align: left;
 }
 
-/* 행 및 열 레이아웃 */
+/* 행 및 컬럼 레이아웃 */
 .row-container {
   display: flex;
   justify-content: space-between;
@@ -191,10 +192,10 @@ body {
   margin: 10px;
 }
 
-/* GIF 생성하기 버튼 스타일 (포인트색 적용) */
+/* 포인트 버튼 스타일 */
 .gif-button {
   margin-top: 30px;
-  padding: 15px 25px;
+  padding: 15px 30px;
   font-size: 1.5em;
   background-color: #e67e22;
   color: #fff;
@@ -203,7 +204,7 @@ body {
   cursor: pointer;
 }
 
-/* 슬라이더 및 선택 영역 스타일 (글자와 바 크게, 두껍게) */
+/* 슬라이더 스타일 (글자와 바 크게) */
 input[type=range] {
   height: 25px;
 }
@@ -212,11 +213,13 @@ input[type=range]::-webkit-slider-thumb {
   width: 25px;
 }
 .slider-label {
-  font-size: 1.5em;
+  font-size: 1.4em;
   margin-bottom: 5px;
 }
-.gradio-radio label {
-  font-size: 1.5em !important;
+
+/* 모든 input, select, button 글자 크기 키움 */
+input, button, select, textarea {
+  font-size: 1.2em;
 }
 """
 
@@ -224,14 +227,14 @@ input[type=range]::-webkit-slider-thumb {
 # 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"):
@@ -256,7 +259,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"):
         gr.Markdown("### 🖼️ 작업 썸네일미리보기")
         with gr.Row():