Update app.py

app.py

@@ -107,8 +107,6 @@ def process_video(video,
     return output_filename, output_filename, "\n".join(global_logs)
 
 def update_thumbnails(video, start_time_str, end_time_str):
-    if not video:
-        return None, None
     video_path = video if isinstance(video, str) else video.name
     try:
         input_video = mp.VideoFileClip(video_path)
@@ -128,801 +126,120 @@ def update_thumbnails(video, start_time_str, end_time_str):
     end_thumb = generate_thumbnail(input_video, end_sec)
     return start_thumb, end_thumb
 
-def validate_input(video, start_time_str, end_time_str):
-    if not video:
-        return "⚠️ 먼저 영상을 업로드해주세요."
-    try:
-        start_sec = parse_time_to_seconds(start_time_str)
-        end_sec = parse_time_to_seconds(end_time_str)
-        if start_sec >= end_sec:
-            return "⚠️ 종료 시간은 시작 시간보다 커야 합니다."
-    except:
-        return "⚠️ 시간 형식이 올바르지 않습니다. (예: 00:00:10)"
-    return None
-
 # -------------------------------
-# Custom CSS (향상된 디자인)
+# Custom CSS (글자 크기 크게, 회색 제거, 포인트 버튼 등)
 # -------------------------------
 custom_css = """
-/* 기본 스타일 */
 body {
-  font-size: 1.6em;
-  background-color: #f9f9f9;
-  font-family: 'Pretendard', 'Noto Sans KR', sans-serif;
-  color: #333333;
+  font-size: 1.6em; /* 글자 크기 증가 */
+  background-color: #ffffff;
+  font-family: 'Arial', sans-serif;
 }
-
 .gradio-container {
-  width: 90% !important;
-  max-width: 1200px !important;
+  width: 80% !important;
   margin: 0 auto;
-  background-color: #ffffff;
-  border-radius: 15px;
-  box-shadow: 0 5px 30px rgba(0, 0, 0, 0.05);
-  padding: 20px;
-}
-
-/* 앱 헤더 */
-.app-header {
-  border-bottom: 2px solid #f0f0f0;
-  margin-bottom: 25px;
-  padding-bottom: 15px;
+  background-color: #ffffff; /* 회색 제거 */
 }
-
+/* 제목 및 사용가이드 (왼쪽 정렬, 크게) */
 .custom-title {
-  font-size: 3.2em;
-  font-weight: 800;
-  margin: 20px 0 15px 0;
-  color: #1e88e5;
+  font-size: 3.5em; /* 글자 크기 증가 */
+  font-weight: bold;
+  margin: 20px 0;
+  color: #2c3e50;
   text-align: left;
-  line-height: 1.2;
-  letter-spacing: -0.5px;
-  padding-left: 10px;
-  border-left: 8px solid #1e88e5;
 }
-
-.custom-subtitle {
-  font-size: 1.4em;
-  color: #555;
-  margin-bottom: 25px;
-  padding-left: 18px;
+.custom-user-guide {
+  font-size: 1.8em; /* 글자 크기 증가 */
+  margin-bottom: 20px;
+  color: #2c3e50;
+  text-align: left;
 }
-
-/* 사용가이드 박스 */
+/* 사용가이드 박스 스타일 (회색 제거, 흰색 배경) */
 .guide-box {
-  border: none;
-  border-radius: 12px;
-  padding: 25px;
-  background-color: #e3f2fd;
-  margin: 20px 0 30px 0;
+  border: 3px solid #3498db; /* 테두리 두께 증가 */
+  border-radius: 10px;
+  padding: 20px; /* 패딩 증가 */
+  background-color: #ffffff;
+  margin: 20px 0;
   text-align: left;
-  font-size: 1.2em;
-  line-height: 1.6;
-  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
-}
-
-.guide-box strong {
-  font-size: 1.3em;
-  color: #1e88e5;
-  display: block;
-  margin-bottom: 10px;
-}
-
-.guide-step {
-  margin: 10px 0;
-  padding-left: 15px;
-  position: relative;
+  font-size: 1.2em; /* 글자 크기 증가 */
 }
-
-.guide-step:before {
-  content: '';
-  position: absolute;
-  left: 0;
-  top: 10px;
-  width: 8px;
-  height: 8px;
-  background-color: #1e88e5;
-  border-radius: 50%;
-}
-
 /* 프레임 스타일 */
 .frame {
-  border: none;
-  border-radius: 15px;
-  padding: 30px;
+  border: 3px solid #3498db; /* 테두리 두께 증가 */
+  border-radius: 20px;
+  padding: 25px; /* 패딩 증가 */
   background-color: #ffffff;
   margin: 15px;
-  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
-  transition: all 0.3s ease;
+  box-shadow: 3px 3px 10px rgba(0,0,0,0.1);
 }
-
-.frame:hover {
-  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
-  transform: translateY(-2px);
-}
-
-/* 프레임 제목 */
+/* 각 프레임 제목 크게 */
 .frame h3 {
-  font-size: 2.0em;
-  font-weight: 700;
-  margin-bottom: 25px;
+  font-size: 2.2em; /* 글자 크기 증가 */
+  margin-bottom: 20px;
   text-align: left;
-  color: #1e88e5;
-  border-bottom: 2px solid #e3f2fd;
-  padding-bottom: 10px;
-  display: flex;
-  align-items: center;
-}
-
-.frame h3 span {
-  margin-left: 10px;
 }
-
 /* 행 및 컬럼 레이아웃 */
 .row-container {
   display: flex;
   justify-content: space-between;
-  flex-wrap: wrap;
-  gap: 20px;
 }
-
 .column {
   flex: 1;
-  min-width: 45%;
+  margin: 10px;
 }
-
 /* 포인트 버튼 스타일 */
 .gif-button {
   margin-top: 35px;
-  padding: 20px 35px;
-  font-size: 1.8em;
-  background: linear-gradient(45deg, #1e88e5, #039be5);
+  padding: 20px 35px; /* 패딩 증가 */
+  font-size: 1.8em; /* 글자 크기 증가 */
+  background-color: #e67e22;
   color: #fff;
   border: none;
   border-radius: 12px;
   cursor: pointer;
-  box-shadow: 0 4px 15px rgba(30, 136, 229, 0.3);
-  transition: all 0.3s ease;
-  font-weight: bold;
-  text-align: center;
-  width: 100%;
-  max-width: 500px;
-  margin-left: auto;
-  margin-right: auto;
-  display: block;
 }
-
-.gif-button:hover {
-  box-shadow: 0 6px 20px rgba(30, 136, 229, 0.5);
-  transform: translateY(-2px);
-}
-
-.gif-button:active {
-  transform: translateY(1px);
-  box-shadow: 0 2px 10px rgba(30, 136, 229, 0.3);
-}
-
-/* 입력 요소 스타일 */
-.input-element {
-  margin-bottom: 20px;
-}
-
-/* 라디오 버튼 스타일 */
-.radio-group label {
-  font-size: 1.3em;
-  padding: 10px 15px;
-  background-color: #f1f8fe;
-  border-radius: 8px;
-  margin: 5px;
-  transition: all 0.2s ease;
-}
-
-.radio-group input:checked + label {
-  background-color: #1e88e5;
-  color: white;
-}
-
-/* 슬라이더 스타일 */
+/* 슬라이더 스타일 (글자와 바 크게) */
 input[type=range] {
-  height: 30px;
-  -webkit-appearance: none;
-  margin: 10px 0;
-  width: 100%;
-  background: transparent;
-}
-
-input[type=range]::-webkit-slider-runnable-track {
-  width: 100%;
-  height: 12px;
-  cursor: pointer;
-  background: #e3f2fd;
-  border-radius: 10px;
+  height: 30px; /* 높이 증가 */
 }
-
 input[type=range]::-webkit-slider-thumb {
-  height: 30px;
-  width: 30px;
-  border-radius: 50%;
-  background: #1e88e5;
-  cursor: pointer;
-  -webkit-appearance: none;
-  margin-top: -9px;
-  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
-}
-
-.slider-container {
-  margin: 25px 0;
+  height: 30px; /* 높이 증가 */
+  width: 30px; /* 너비 증가 */
 }
-
 .slider-label {
-  font-size: 1.5em;
-  margin-bottom: 10px;
-  color: #333;
-  font-weight: 600;
-}
-
-.slider-value {
-  font-size: 1.3em;
-  color: #1e88e5;
-  font-weight: bold;
-  text-align: right;
-}
-
-/* 입력 필드 스타일 */
-input[type=text], input[type=number], select, textarea {
-  font-size: 1.5em;
-  padding: 15px;
-  border-radius: 8px;
-  border: 2px solid #e3f2fd;
-  transition: all 0.3s ease;
-  width: 100%;
-  box-sizing: border-box;
-  margin-top: 5px;
-}
-
-input[type=text]:focus, input[type=number]:focus, select:focus, textarea:focus {
-  border-color: #1e88e5;
-  outline: none;
-  box-shadow: 0 0 0 3px rgba(30, 136, 229, 0.2);
-}
-
-/* 라벨 스타일 */
-label, .label-wrap span {
-  font-size: 1.4em !important;
-  font-weight: 600;
-  color: #333;
+  font-size: 1.6em; /* 글자 크기 증가 */
   margin-bottom: 8px;
-  display: block;
-}
-
-/* 필수 표시 */
-.required:after {
-  content: '*';
-  color: #e53935;
-  margin-left: 4px;
-}
-
-/* 썸네일 영역 스타일 */
-.thumbnail-container {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  min-height: 200px;
-  border: 2px dashed #e3f2fd;
-  border-radius: 10px;
-  padding: 15px;
-  background-color: #fafafa;
-  margin-top: 10px;
-}
-
-.thumbnail-container img {
-  max-width: 100%;
-  max-height: 100%;
-  object-fit: contain;
-  border-radius: 8px;
-}
-
-.thumbnail-label {
-  font-size: 1.2em;
-  font-weight: bold;
-  margin-bottom: 10px;
-  color: #1e88e5;
-  text-align: center;
-}
-
-/* 상태 메시지 */
-.status-message {
-  padding: 15px;
-  border-radius: 8px;
-  margin: 20px 0;
-  font-size: 1.3em;
-  display: flex;
-  align-items: center;
-}
-
-.status-message.success {
-  background-color: #e8f5e9;
-  color: #2e7d32;
-  border-left: 5px solid #2e7d32;
-}
-
-.status-message.error {
-  background-color: #ffebee;
-  color: #c62828;
-  border-left: 5px solid #c62828;
-}
-
-.status-message.info {
-  background-color: #e3f2fd;
-  color: #1565c0;
-  border-left: 5px solid #1565c0;
-}
-
-.status-message i {
-  margin-right: 10px;
-  font-size: 1.5em;
 }
-
-/* 로딩 상태 */
-.loading {
-  display: inline-block;
-  position: relative;
-  width: 80px;
-  height: 80px;
-}
-
-.loading div {
-  position: absolute;
-  border: 4px solid #1e88e5;
-  opacity: 1;
-  border-radius: 50%;
-  animation: loading 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
-}
-
-.loading div:nth-child(2) {
-  animation-delay: -0.5s;
-}
-
-@keyframes loading {
-  0% {
-    top: 36px;
-    left: 36px;
-    width: 0;
-    height: 0;
-    opacity: 1;
-  }
-  100% {
-    top: 0px;
-    left: 0px;
-    width: 72px;
-    height: 72px;
-    opacity: 0;
-  }
-}
-
-/* 마우스 오버 효과 */
-.hover-effect {
-  transition: all 0.3s ease;
-}
-
-.hover-effect:hover {
-  transform: translateY(-3px);
-  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
-}
-
-/* 결과 영역 스타일 */
-.result-container {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  padding: 20px;
-  border-radius: 10px;
-  background-color: #f5f5f5;
-  margin-top: 20px;
+/* 모든 input, select, button 글자 크기 키움 */
+input, button, select, textarea {
+  font-size: 1.5em; /* 글자 크기 증가 */
 }
-
-.result-title {
-  font-size: 1.6em;
-  font-weight: bold;
-  margin-bottom: 15px;
-  color: #1e88e5;
-}
-
-.result-image {
-  max-width: 100%;
-  border-radius: 8px;
-  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
-}
-
-.download-button {
-  margin-top: 20px;
-  padding: 12px 25px;
-  background-color: #1e88e5;
-  color: white;
-  border: none;
-  border-radius: 8px;
-  font-size: 1.4em;
-  cursor: pointer;
-  transition: all 0.3s ease;
-}
-
-.download-button:hover {
-  background-color: #1565c0;
-}
-
-/* 알림 배너 스타일 */
-.notification-banner {
-  padding: 15px 20px;
-  background-color: #fffde7;
-  border-left: 5px solid #fbc02d;
-  margin: 20px 0;
-  border-radius: 0 8px 8px 0;
-  font-size: 1.3em;
-  display: flex;
-  align-items: center;
-}
-
-.notification-banner i {
-  margin-right: 15px;
-  font-size: 1.6em;
-  color: #fbc02d;
-}
-
-/* 반응형 디자인 */
-@media (max-width: 768px) {
-  .row-container {
-    flex-direction: column;
-  }
-  
-  .column {
-    width: 100%;
-  }
-  
-  .custom-title {
-    font-size: 2.5em;
-  }
-  
-  .frame h3 {
-    font-size: 1.8em;
-  }
-  
-  .gif-button {
-    font-size: 1.5em;
-    padding: 15px 25px;
-  }
-}
-
-/* 포커스 상태 시각 효과 */
-*:focus {
-  outline: none;
-  box-shadow: 0 0 0 3px rgba(30, 136, 229, 0.3);
-}
-
-/* 도움말 툴팁 */
-.tooltip {
-  position: relative;
-  display: inline-block;
-  margin-left: 8px;
-  cursor: help;
-}
-
-.tooltip .tooltip-icon {
-  width: 20px;
-  height: 20px;
-  background-color: #1e88e5;
-  color: white;
-  border-radius: 50%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-weight: bold;
-  font-size: 0.8em;
-}
-
-.tooltip .tooltip-text {
-  visibility: hidden;
-  width: 250px;
-  background-color: #555;
-  color: #fff;
-  text-align: center;
-  border-radius: 6px;
-  padding: 10px;
-  position: absolute;
-  z-index: 1;
-  bottom: 125%;
-  left: 50%;
-  margin-left: -125px;
-  opacity: 0;
-  transition: opacity 0.3s;
-  font-size: 0.9em;
-}
-
-.tooltip:hover .tooltip-text {
-  visibility: visible;
-  opacity: 1;
-}
-
-/* 입출력 영역 구분 */
-.input-section, .output-section {
-  position: relative;
-}
-
-.section-label {
-  position: absolute;
-  top: -15px;
-  left: 30px;
-  padding: 5px 15px;
-  background-color: #1e88e5;
-  color: white;
-  font-size: 1.2em;
-  border-radius: 30px;
-  font-weight: bold;
-  z-index: 1;
-}
-
-/* 파일 업로드 영역 개선 */
-.file-upload {
-  border: 3px dashed #e3f2fd;
-  border-radius: 10px;
-  padding: 30px;
-  text-align: center;
-  cursor: pointer;
-  background-color: #f8fafc;
-  transition: all 0.3s ease;
-}
-
-.file-upload:hover {
-  border-color: #1e88e5;
-  background-color: #f0f7ff;
-}
-
-.file-upload-icon {
-  font-size: 3em;
-  color: #1e88e5;
-  margin-bottom: 15px;
-}
-
-.file-upload-text {
-  font-size: 1.3em;
-  color: #555;
-}
-
-/* 프로그레스 바 스타일 */
-.progress-container {
-  width: 100%;
-  height: 15px;
-  background-color: #e0e0e0;
-  border-radius: 10px;
-  margin: 20px 0;
-  overflow: hidden;
-}
-
-.progress-bar {
-  height: 100%;
-  background: linear-gradient(90deg, #1e88e5, #29b6f6);
-  border-radius: 10px;
-  transition: width 0.5s ease;
-}
-
-/* 단계 진행 표시기 */
-.steps-container {
-  display: flex;
-  justify-content: space-between;
-  margin: 30px 0;
-}
-
-.step {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  width: 33%;
-}
-
-.step-circle {
-  width: 40px;
-  height: 40px;
-  border-radius: 50%;
-  background-color: #e0e0e0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-weight: bold;
-  color: white;
-  margin-bottom: 10px;
-}
-
-.step.active .step-circle {
-  background-color: #1e88e5;
-}
-
-.step.completed .step-circle {
-  background-color: #43a047;
-}
-
-.step-label {
-  font-size: 1.2em;
-  text-align: center;
-  color: #555;
-}
-
-.step.active .step-label {
-  color: #1e88e5;
-  font-weight: bold;
-}
-
-.step-line {
-  flex-grow: 1;
-  height: 3px;
-  background-color: #e0e0e0;
-  margin: 20px 10px;
-}
-
-.step-line.completed {
-  background-color: #43a047;
-}
-
-/* 로그 출력 영역 */
-.log-container {
-  padding: 15px;
-  background-color: #f5f5f5;
-  border-radius: 8px;
-  font-family: 'Courier New', monospace;
-  font-size: 1.2em;
-  max-height: 200px;
-  overflow-y: auto;
-  white-space: pre-wrap;
-  margin-top: 20px;
-}
-
-.log-entry {
-  margin: 5px 0;
-  padding: 3px 0;
-  border-bottom: 1px dashed #e0e0e0;
-}
-
-.log-entry.error {
-  color: #c62828;
-}
-
-.log-entry.success {
-  color: #2e7d32;
-}
-
-/* 애니메이션 효과 */
-@keyframes fadeIn {
-  from { opacity: 0; transform: translateY(20px); }
-  to { opacity: 1; transform: translateY(0); }
-}
-
-.fade-in {
-  animation: fadeIn 0.5s ease forwards;
-}
-
-/* 차트 및 통계 영역 */
-.stats-container {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 15px;
-  margin-top: 20px;
-}
-
-.stat-card {
-  flex: 1;
-  min-width: 200px;
-  background-color: white;
-  border-radius: 10px;
-  padding: 20px;
-  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
-  text-align: center;
-}
-
-.stat-value {
-  font-size: 2em;
+/* 라벨 글자 크기 키움 */
+label, .label-wrap span {
+  font-size: 1.3em !important; /* 글자 크기 증가 */
   font-weight: bold;
-  color: #1e88e5;
-  margin: 10px 0;
 }
-
-.stat-label {
-  font-size: 1.2em;
-  color: #555;
+/* 회색 배경 제거 */
+.gradio-container .prose, 
+.gradio-container .gr-box, 
+.gradio-container .gr-form, 
+.gradio-container .gr-panel {
+  background-color: #ffffff !important;
 }
-
-/* 중요 정보 강조 */
-.highlight-text {
-  background-color: #fff9c4;
-  padding: 3px 5px;
-  border-radius: 3px;
-  font-weight: bold;
+.gradio-container .gr-form, 
+.gradio-container .gr-group {
+  border-color: #3498db;
+  background-color: #ffffff !important;
 }
-
-/* 버튼 그룹 스타일 */
-.button-group {
-  display: flex;
-  gap: 10px;
-  margin: 20px 0;
-}
-
-.button-group button {
-  flex: 1;
-  padding: 12px;
-  border: none;
-  border-radius: 8px;
-  font-size: 1.3em;
-  cursor: pointer;
-  transition: all 0.3s ease;
-}
-
-.primary-button {
-  background-color: #1e88e5;
-  color: white;
-}
-
-.secondary-button {
-  background-color: #e0e0e0;
-  color: #333;
-}
-
-.danger-button {
-  background-color: #e53935;
-  color: white;
-}
-
-/* 입력 요소 오류 스타일 */
-.input-error {
-  border-color: #e53935 !important;
-}
-
-.error-message {
-  color: #e53935;
-  font-size: 1.1em;
-  margin-top: 5px;
-}
-
-.gradio-app.dark {
-  background-color: #1e1e1e !important;
-}
-
-.gradio-app.dark .frame {
-  background-color: #2d2d2d !important;
-  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2) !important;
-}
-
-.gradio-app.dark label, .gradio-app.dark .label-wrap span {
-  color: #e0e0e0 !important;
-}
-
-.gradio-app.dark .guide-box {
-  background-color: #2d3748 !important;
-}
-
-.gradio-app.dark input[type=text], 
-.gradio-app.dark input[type=number], 
-.gradio-app.dark select, 
-.gradio-app.dark textarea {
-  background-color: #1e1e1e !important;
-  border-color: #3d3d3d !important;
-  color: #e0e0e0 !important;
-}
-
-.gradio-app.dark input[type=range]::-webkit-slider-runnable-track {
-  background-color: #3d3d3d !important;
-}
-
-.gradio-app.dark .custom-title,
-.gradio-app.dark .frame h3 {
-  color: #64b5f6 !important;
-}
-
-.gradio-app.dark .gif-button {
-  background: linear-gradient(45deg, #1565c0, #0d47a1) !important;
-}
-
-.gradio-app.dark .slider-value {
-  color: #64b5f6 !important;
+.gradio-container .gr-input, 
+.gradio-container .gr-checkbox, 
+.gradio-container .gr-radio, 
+.gradio-container .gr-dropdown {
+  font-size: 1.4em; /* 글자 크기 증가 */
 }
 """
+
 # -------------------------------
 # Gradio UI 구성 (HTML/CSS 커스터마이징)
 # -------------------------------