Update app.py

app.py

@@ -107,6 +107,8 @@ 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)
@@ -126,120 +128,801 @@ 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: #ffffff;
-  font-family: 'Arial', sans-serif;
+  font-size: 1.6em;
+  background-color: #f9f9f9;
+  font-family: 'Pretendard', 'Noto Sans KR', sans-serif;
+  color: #333333;
 }
+
 .gradio-container {
-  width: 80% !important;
+  width: 90% !important;
+  max-width: 1200px !important;
   margin: 0 auto;
-  background-color: #ffffff; /* 회색 제거 */
+  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;
 }
-/* 제목 및 사용가이드 (왼쪽 정렬, 크게) */
+
 .custom-title {
-  font-size: 3.5em; /* 글자 크기 증가 */
-  font-weight: bold;
-  margin: 20px 0;
-  color: #2c3e50;
+  font-size: 3.2em;
+  font-weight: 800;
+  margin: 20px 0 15px 0;
+  color: #1e88e5;
   text-align: left;
+  line-height: 1.2;
+  letter-spacing: -0.5px;
+  padding-left: 10px;
+  border-left: 8px solid #1e88e5;
 }
-.custom-user-guide {
-  font-size: 1.8em; /* 글자 크기 증가 */
-  margin-bottom: 20px;
-  color: #2c3e50;
-  text-align: left;
+
+.custom-subtitle {
+  font-size: 1.4em;
+  color: #555;
+  margin-bottom: 25px;
+  padding-left: 18px;
 }
-/* 사용가이드 박스 스타일 (회색 제거, 흰색 배경) */
+
+/* 사용가이드 박스 */
 .guide-box {
-  border: 3px solid #3498db; /* 테두리 두께 증가 */
-  border-radius: 10px;
-  padding: 20px; /* 패딩 증가 */
-  background-color: #ffffff;
-  margin: 20px 0;
+  border: none;
+  border-radius: 12px;
+  padding: 25px;
+  background-color: #e3f2fd;
+  margin: 20px 0 30px 0;
   text-align: left;
-  font-size: 1.2em; /* 글자 크기 증가 */
+  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;
 }
+
+.guide-step:before {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 10px;
+  width: 8px;
+  height: 8px;
+  background-color: #1e88e5;
+  border-radius: 50%;
+}
+
 /* 프레임 스타일 */
 .frame {
-  border: 3px solid #3498db; /* 테두리 두께 증가 */
-  border-radius: 20px;
-  padding: 25px; /* 패딩 증가 */
+  border: none;
+  border-radius: 15px;
+  padding: 30px;
   background-color: #ffffff;
   margin: 15px;
-  box-shadow: 3px 3px 10px rgba(0,0,0,0.1);
+  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
+  transition: all 0.3s ease;
 }
-/* 각 프레임 제목 크게 */
+
+.frame:hover {
+  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
+  transform: translateY(-2px);
+}
+
+/* 프레임 제목 */
 .frame h3 {
-  font-size: 2.2em; /* 글자 크기 증가 */
-  margin-bottom: 20px;
+  font-size: 2.0em;
+  font-weight: 700;
+  margin-bottom: 25px;
   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;
-  margin: 10px;
+  min-width: 45%;
 }
+
 /* 포인트 버튼 스타일 */
 .gif-button {
   margin-top: 35px;
-  padding: 20px 35px; /* 패딩 증가 */
-  font-size: 1.8em; /* 글자 크기 증가 */
-  background-color: #e67e22;
+  padding: 20px 35px;
+  font-size: 1.8em;
+  background: linear-gradient(45deg, #1e88e5, #039be5);
   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; /* 높이 증가 */
+  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;
 }
+
 input[type=range]::-webkit-slider-thumb {
-  height: 30px; /* 높이 증가 */
-  width: 30px; /* 너비 증가 */
+  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;
 }
+
 .slider-label {
-  font-size: 1.6em; /* 글자 크기 증가 */
-  margin-bottom: 8px;
+  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, select, button 글자 크기 키움 */
-input, button, select, textarea {
-  font-size: 1.5em; /* 글자 크기 증가 */
+
+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.3em !important; /* 글자 크기 증가 */
+  font-size: 1.4em !important;
+  font-weight: 600;
+  color: #333;
+  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;
 }
-/* 회색 배경 제거 */
-.gradio-container .prose, 
-.gradio-container .gr-box, 
-.gradio-container .gr-form, 
-.gradio-container .gr-panel {
-  background-color: #ffffff !important;
+
+/* 상태 메시지 */
+.status-message {
+  padding: 15px;
+  border-radius: 8px;
+  margin: 20px 0;
+  font-size: 1.3em;
+  display: flex;
+  align-items: center;
 }
-.gradio-container .gr-form, 
-.gradio-container .gr-group {
-  border-color: #3498db;
-  background-color: #ffffff !important;
+
+.status-message.success {
+  background-color: #e8f5e9;
+  color: #2e7d32;
+  border-left: 5px solid #2e7d32;
 }
-.gradio-container .gr-input, 
-.gradio-container .gr-checkbox, 
-.gradio-container .gr-radio, 
-.gradio-container .gr-dropdown {
-  font-size: 1.4em; /* 글자 크기 증가 */
+
+.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;
+}
+
+.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;
+  font-weight: bold;
+  color: #1e88e5;
+  margin: 10px 0;
+}
+
+.stat-label {
+  font-size: 1.2em;
+  color: #555;
+}
+
+/* 중요 정보 강조 */
+.highlight-text {
+  background-color: #fff9c4;
+  padding: 3px 5px;
+  border-radius: 3px;
+  font-weight: bold;
+}
+
+/* 버튼 그룹 스타일 */
+.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 UI 구성 (HTML/CSS 커스터마이징)
 # -------------------------------