Update app.py

app.py

@@ -1,9 +1,9 @@
 """
 🎵 Audio Segment Extractor
-- 오디오 파일 업로드
-- 타임라인 시각화
-- 시작~종료 시간 구간 추출
-- 다운로드
+- Upload audio file
+- Timeline visualization
+- Start/End time segment extraction
+- Download
 """
 
 import gradio as gr
@@ -14,24 +14,24 @@ import tempfile
 import time
 
 # ============================================
-# 오디오 처리용 임시 디렉토리
+# Temp directory for audio processing
 # ============================================
 UPLOAD_DIR = tempfile.mkdtemp()
 
 
 # ============================================
-# 🎵 오디오 처리 함수들
+# 🎵 Audio Processing Functions
 # ============================================
 
 def get_audio_info_and_waveform(audio_file):
-    """오디오 정보 조회 및 파형 데이터 생성"""
+    """Get audio info and generate waveform data"""
     if not audio_file:
-        return None, 0, 10, "🎵 파일을 업로드하세요", None
+        return None, 0, 0, 10, "🎵 Please upload an audio file"
     
     try:
         path = audio_file.name if hasattr(audio_file, 'name') else audio_file
         
-        # 오디오 정보 조회
+        # Get audio info
         probe_cmd = ['ffprobe', '-v', 'error', 
                      '-show_entries', 'format=duration,bit_rate,format_name:stream=sample_rate,channels,codec_name',
                      '-of', 'json', path]
@@ -48,50 +48,50 @@ def get_audio_info_and_waveform(audio_file):
         channels = stream_info.get('channels', 'N/A')
         codec = stream_info.get('codec_name', 'N/A')
         
-        # 파일 크기
+        # File size
         file_size = os.path.getsize(path) / (1024 * 1024)  # MB
         
-        info_text = f"""🎵 오디오 정보
+        info_text = f"""🎵 Audio Information
 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-⏱️ 길이: {duration:.2f}초 ({duration/60:.1f}분)
-🎚️ 비트레이트: {bit_rate} kbps
-🔊 샘플레이트: {sample_rate} Hz
-📢 채널: {channels}
-🎛️ 코덱: {codec}
-📁 포맷: {format_name}
-💾 크기: {file_size:.2f} MB
+⏱️ Duration: {duration:.2f}s ({duration/60:.1f}min)
+🎚️ Bitrate: {bit_rate} kbps
+🔊 Sample Rate: {sample_rate} Hz
+📢 Channels: {channels}
+🎛️ Codec: {codec}
+📁 Format: {format_name}
+💾 Size: {file_size:.2f} MB
 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"""
         
-        # 오디오 미리듣기용 반환
-        return path, 0, duration, info_text, gr.update(maximum=duration, value=[0, min(duration, 10)])
+        # Return audio preview and update sliders
+        return path, 0, min(duration, 10), duration, info_text
         
     except Exception as e:
-        return None, 0, 10, f"❌ 정보 조회 실패: {str(e)}", gr.update(maximum=100, value=[0, 10])
+        return None, 0, 10, 100, f"❌ Failed to get info: {str(e)}"
 
 
-def extract_audio_segment(audio_file, time_range):
-    """오디오 구간 추출"""
+def extract_audio_segment(audio_file, start_time, end_time):
+    """Extract audio segment"""
     if not audio_file:
-        return None, "❌ 오디오 파일을 업로드하세요", None
+        return None, "❌ Please upload an audio file", None
     
     try:
         path = audio_file.name if hasattr(audio_file, 'name') else audio_file
-        start_time = float(time_range[0]) if time_range else 0
-        end_time = float(time_range[1]) if time_range else 10
+        start_time = float(start_time) if start_time else 0
+        end_time = float(end_time) if end_time else 10
         
         if end_time <= start_time:
-            return None, "❌ 종료 시간이 시작 시간보다 커야 합니다", None
+            return None, "❌ End time must be greater than start time", None
         
         duration = end_time - start_time
         
-        # 출력 파일 확장자 결정
+        # Determine output file extension
         ext = os.path.splitext(path)[1].lower()
         if ext not in ['.mp3', '.wav', '.ogg', '.m4a', '.aac', '.flac']:
             ext = '.mp3'
         
         output_path = os.path.join(UPLOAD_DIR, f"audio_cut_{int(time.time())}{ext}")
         
-        # 먼저 스트림 복사 시도 (빠름, 무손실)
+        # Try stream copy first (fast, lossless)
         cmd = [
             'ffmpeg', '-y', '-i', path,
             '-ss', str(start_time), '-t', str(duration),
@@ -100,7 +100,7 @@ def extract_audio_segment(audio_file, time_range):
         
         result = subprocess.run(cmd, capture_output=True, text=True, timeout=120)
         
-        # copy가 실패하면 재인코딩 시도
+        # If copy fails, try re-encoding
         if not os.path.exists(output_path) or os.path.getsize(output_path) == 0:
             output_path = os.path.join(UPLOAD_DIR, f"audio_cut_{int(time.time())}.mp3")
             cmd = [
@@ -113,24 +113,24 @@ def extract_audio_segment(audio_file, time_range):
         if os.path.exists(output_path) and os.path.getsize(output_path) > 0:
             file_size = os.path.getsize(output_path) / 1024  # KB
             
-            status_text = f"""✅ 오디오 추출 완료!
+            status_text = f"""✅ Audio Extraction Complete!
 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-⏱️ 시작: {start_time:.2f}초
-⏱️ 종료: {end_time:.2f}초
-⏱️ 길이: {duration:.2f}초
-📁 크기: {file_size:.1f} KB
+⏱️ Start: {start_time:.2f}s
+⏱️ End: {end_time:.2f}s
+⏱️ Duration: {duration:.2f}s
+📁 Size: {file_size:.1f} KB
 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"""
             
             return output_path, status_text, output_path
         else:
-            return None, "❌ 오디오 추출 실패", None
+            return None, "❌ Audio extraction failed", None
             
     except Exception as e:
-        return None, f"❌ 오류: {str(e)}", None
+        return None, f"❌ Error: {str(e)}", None
 
 
 def format_time(seconds):
-    """초를 MM:SS.ms 형식으로 변환"""
+    """Convert seconds to MM:SS.ms format"""
     if seconds is None:
         return "00:00.00"
     mins = int(seconds // 60)
@@ -138,14 +138,19 @@ def format_time(seconds):
     return f"{mins:02d}:{secs:05.2f}"
 
 
-def update_time_display(time_range):
-    """슬라이더 값에 따른 시간 표시 업데이트"""
-    if time_range:
-        start = time_range[0]
-        end = time_range[1]
-        duration = end - start
-        return f"🕐 {format_time(start)} → {format_time(end)} (길이: {duration:.2f}초)"
-    return "🕐 구간을 선택하세요"
+def update_time_display(start_time, end_time):
+    """Update time display based on slider values"""
+    if start_time is not None and end_time is not None:
+        duration = end_time - start_time
+        if duration < 0:
+            return "⚠️ End time must be greater than start time"
+        return f"🕐 {format_time(start_time)} → {format_time(end_time)} (Duration: {duration:.2f}s)"
+    return "🕐 Select a segment"
+
+
+def update_end_slider(start_time, max_duration):
+    """Update end slider minimum based on start time"""
+    return gr.update(minimum=start_time + 0.1)
 
 
 # ============================================
@@ -156,7 +161,7 @@ css = """
 /* ===== 🎨 Google Fonts Import ===== */
 @import url('https://fonts.googleapis.com/css2?family=Bangers&family=Comic+Neue:wght@400;700&display=swap');
 
-/* ===== 🎨 Comic Classic 배경 - 빈티지 페이퍼 + 도트 패턴 ===== */
+/* ===== 🎨 Comic Classic Background ===== */
 .gradio-container {
     background-color: #FEF9C3 !important;
     background-image: 
@@ -166,7 +171,7 @@ css = """
     font-family: 'Comic Neue', cursive, sans-serif !important;
 }
 
-/* ===== 허깅페이스 상단 요소 숨김 (강화) ===== */
+/* ===== Hide HuggingFace Elements ===== */
 .tabs, 
 .tab-nav,
 .huggingface-space-header,
@@ -198,7 +203,7 @@ iframe[src*="huggingface"],
     pointer-events: none !important;
 }
 
-/* ===== Footer 완전 숨김 ===== */
+/* ===== Hide Footer ===== */
 footer,
 .footer,
 .gradio-container footer,
@@ -218,13 +223,13 @@ a[href*="huggingface.co/spaces"] {
     margin: 0 !important;
 }
 
-/* ===== 메인 컨테이너 ===== */
+/* ===== Main Container ===== */
 #col-container { 
     max-width: 1000px; 
     margin: 0 auto; 
 }
 
-/* ===== 🎨 헤더 타이틀 - 코믹 스타일 ===== */
+/* ===== 🎨 Header Title - Comic Style ===== */
 .header-text h1 {
     font-family: 'Bangers', cursive !important;
     color: #1F2937 !important;
@@ -239,7 +244,7 @@ a[href*="huggingface.co/spaces"] {
     -webkit-text-stroke: 2px #1F2937 !important;
 }
 
-/* ===== 🎨 서브타이틀 ===== */
+/* ===== 🎨 Subtitle ===== */
 .subtitle {
     text-align: center !important;
     font-family: 'Comic Neue', cursive !important;
@@ -249,7 +254,7 @@ a[href*="huggingface.co/spaces"] {
     font-weight: 700 !important;
 }
 
-/* ===== 🎨 카드/패널 - 만화 프레임 스타일 ===== */
+/* ===== 🎨 Cards/Panels - Comic Frame Style ===== */
 .gr-panel,
 .gr-box,
 .gr-form,
@@ -268,7 +273,7 @@ a[href*="huggingface.co/spaces"] {
     box-shadow: 8px 8px 0px #1F2937 !important;
 }
 
-/* ===== 🎨 입력 필드 (Textbox) ===== */
+/* ===== 🎨 Input Fields ===== */
 textarea, 
 input[type="text"], 
 input[type="number"] {
@@ -295,7 +300,7 @@ textarea::placeholder {
     font-weight: 400 !important;
 }
 
-/* ===== 🎨 Primary 버튼 - 코믹 블루 ===== */
+/* ===== 🎨 Primary Button - Comic Blue ===== */
 .gr-button-primary,
 button.primary,
 .gr-button.primary {
@@ -328,7 +333,7 @@ button.primary:active,
     box-shadow: 2px 2px 0px #1F2937 !important;
 }
 
-/* ===== 🎨 Secondary 버튼 - 코믹 레드 ===== */
+/* ===== 🎨 Secondary Button - Comic Red ===== */
 .gr-button-secondary,
 button.secondary {
     background: #EF4444 !important;
@@ -357,7 +362,7 @@ button.secondary:active {
     box-shadow: 2px 2px 0px #1F2937 !important;
 }
 
-/* ===== 🎨 Extract 버튼 - 코믹 그린 ===== */
+/* ===== 🎨 Extract Button - Comic Green ===== */
 .extract-btn {
     background: #10B981 !important;
     border: 3px solid #1F2937 !important;
@@ -383,9 +388,9 @@ button.secondary:active {
     box-shadow: 2px 2px 0px #1F2937 !important;
 }
 
-/* ===== 🎨 슬라이더 ===== */
+/* ===== 🎨 Slider ===== */
 input[type="range"] {
-    accent-color: #EF4444 !important;
+    accent-color: #10B981 !important;
     height: 8px !important;
 }
 
@@ -393,27 +398,7 @@ input[type="range"] {
     background: #FACC15 !important;
 }
 
-/* ===== 🎨 Range Slider 특별 스타일 ===== */
-.range-slider input[type="range"] {
-    accent-color: #10B981 !important;
-}
-
-/* ===== 🎨 아코디언 - 말풍선 스타일 ===== */
-.gr-accordion {
-    background: #FACC15 !important;
-    border: 3px solid #1F2937 !important;
-    border-radius: 8px !important;
-    box-shadow: 4px 4px 0px #1F2937 !important;
-}
-
-.gr-accordion-header {
-    color: #1F2937 !important;
-    font-family: 'Comic Neue', cursive !important;
-    font-weight: 700 !important;
-    font-size: 1.1rem !important;
-}
-
-/* ===== 🎨 라벨 스타일 ===== */
+/* ===== 🎨 Labels ===== */
 label,
 .gr-input-label,
 .gr-block-label {
@@ -427,7 +412,7 @@ span.gr-label {
     color: #1F2937 !important;
 }
 
-/* ===== 🎨 정보 텍스트 ===== */
+/* ===== 🎨 Info Text ===== */
 .gr-info,
 .info {
     color: #6B7280 !important;
@@ -435,7 +420,7 @@ span.gr-label {
     font-size: 0.9rem !important;
 }
 
-/* ===== 🎨 상태 텍스트 영역 ===== */
+/* ===== 🎨 Status Text Area ===== */
 .status-text textarea {
     background: #E0F2FE !important;
     border: 3px solid #0EA5E9 !important;
@@ -445,7 +430,7 @@ span.gr-label {
     font-size: 0.95rem !important;
 }
 
-/* ===== 🎨 정보 박스 ===== */
+/* ===== 🎨 Info Box ===== */
 .info-box textarea {
     background: #FEF3C7 !important;
     border: 3px solid #F59E0B !important;
@@ -455,7 +440,7 @@ span.gr-label {
     font-size: 0.9rem !important;
 }
 
-/* ===== 🎨 시간 표시 ===== */
+/* ===== 🎨 Time Display ===== */
 .time-display {
     font-family: 'Bangers', cursive !important;
     font-size: 1.5rem !important;
@@ -469,7 +454,7 @@ span.gr-label {
     letter-spacing: 1px !important;
 }
 
-/* ===== 🎨 오디오 플레이어 ===== */
+/* ===== 🎨 Audio Player ===== */
 audio {
     width: 100% !important;
     border-radius: 8px !important;
@@ -477,7 +462,7 @@ audio {
     box-shadow: 4px 4px 0px #1F2937 !important;
 }
 
-/* ===== 🎨 스크롤바 - 코믹 스타일 ===== */
+/* ===== 🎨 Scrollbar - Comic Style ===== */
 ::-webkit-scrollbar {
     width: 12px;
     height: 12px;
@@ -498,13 +483,13 @@ audio {
     background: #EF4444;
 }
 
-/* ===== 🎨 선택 하이라이트 ===== */
+/* ===== 🎨 Selection Highlight ===== */
 ::selection {
     background: #FACC15;
     color: #1F2937;
 }
 
-/* ===== 🎨 링크 스타일 ===== */
+/* ===== 🎨 Links ===== */
 a {
     color: #3B82F6 !important;
     text-decoration: none !important;
@@ -517,7 +502,7 @@ a:hover {
     border-bottom-color: #EF4444 !important;
 }
 
-/* ===== 🎨 Row/Column 간격 ===== */
+/* ===== 🎨 Row/Column Spacing ===== */
 .gr-row {
     gap: 1.5rem !important;
 }
@@ -526,7 +511,7 @@ a:hover {
     gap: 1rem !important;
 }
 
-/* ===== 🎨 파일 업로드 영역 ===== */
+/* ===== 🎨 File Upload Area ===== */
 .gr-file-upload {
     border: 3px dashed #1F2937 !important;
     border-radius: 8px !important;
@@ -538,7 +523,7 @@ a:hover {
     background: #EFF6FF !important;
 }
 
-/* ===== 반응형 조정 ===== */
+/* ===== Responsive Adjustments ===== */
 @media (max-width: 768px) {
     .header-text h1 {
         font-size: 2.2rem !important;
@@ -563,7 +548,7 @@ a:hover {
     }
 }
 
-/* ===== 🎨 다크모드 비활성화 (코믹은 밝아야 함) ===== */
+/* ===== 🎨 Disable Dark Mode ===== */
 @media (prefers-color-scheme: dark) {
     .gradio-container {
         background-color: #FEF9C3 !important;
@@ -576,7 +561,10 @@ a:hover {
 # Gradio UI
 # ============================================
 
-with gr.Blocks(fill_height=True, css=css) as demo:
+with gr.Blocks(title="Audio Segment Extractor") as demo:
+    
+    # Inject CSS via HTML
+    gr.HTML(f"<style>{css}</style>")
     
     # HOME Badge
     gr.HTML("""
@@ -597,32 +585,35 @@ with gr.Blocks(fill_height=True, css=css) as demo:
     
     gr.Markdown(
         """
-        <p class="subtitle">✂️ 오디오 파일에서 원하는 구간만 잘라내기! 🎶</p>
+        <p class="subtitle">✂️ Cut any segment from your audio file! 🎶</p>
         """,
     )
     
+    # State for max duration
+    max_duration = gr.State(100)
+    
     with gr.Row(equal_height=False):
         # ============================================
         # Left Column - Input
         # ============================================
         with gr.Column(scale=1, min_width=350):
-            # 파일 업로드
+            # File upload
             audio_input = gr.File(
-                label="🎵 오디오 파일 업로드",
+                label="🎵 Upload Audio File",
                 file_types=["audio"],
             )
             
-            # 오디오 정보
+            # Audio info
             audio_info = gr.Textbox(
-                label="📊 오디오 정보",
-                placeholder="오디오를 업로드하면 정보가 표시됩니다...",
+                label="📊 Audio Information",
+                placeholder="Upload an audio file to see information...",
                 lines=10,
                 interactive=False,
                 elem_classes="info-box"
             )
             
-            # 원본 오디오 미리듣기
-            gr.Markdown("### 🎧 원본 오디오 미리듣기")
+            # Original audio preview
+            gr.Markdown("### 🎧 Original Audio Preview")
             original_audio = gr.Audio(
                 label="",
                 type="filepath",
@@ -633,80 +624,100 @@ with gr.Blocks(fill_height=True, css=css) as demo:
         # Right Column - Controls & Output
         # ============================================
         with gr.Column(scale=1, min_width=350):
-            # 구간 선택
-            gr.Markdown("### ✂️ 추출 구간 선택")
+            # Segment selection
+            gr.Markdown("### ✂️ Select Extraction Segment")
             
-            # 타임라인 슬라이더 (Range Slider)
-            time_range = gr.Slider(
+            # Start time slider
+            start_time = gr.Slider(
                 minimum=0,
                 maximum=100,
-                value=[0, 10],
+                value=0,
                 step=0.1,
-                label="⏱️ 구간 선택 (초)",
-                info="슬라이더를 드래그하여 시작/종료 시간을 선택하세요",
-                elem_classes="range-slider"
+                label="⏱️ Start Time (seconds)",
+                info="Drag to select start time"
             )
             
-            # 시간 표시
+            # End time slider
+            end_time = gr.Slider(
+                minimum=0,
+                maximum=100,
+                value=10,
+                step=0.1,
+                label="⏱️ End Time (seconds)",
+                info="Drag to select end time"
+            )
+            
+            # Time display
             time_display = gr.Textbox(
                 label="",
-                value="🕐 구간을 선택하세요",
+                value="🕐 Select a segment",
                 interactive=False,
                 elem_classes="time-display"
             )
             
-            # 추출 버튼
+            # Extract button
             extract_btn = gr.Button(
-                "✂️ 오디오 구간 추출!",
+                "✂️ EXTRACT AUDIO SEGMENT!",
                 variant="primary",
                 size="lg",
                 elem_classes="extract-btn"
             )
             
-            # 추출 상태
+            # Extraction status
             extract_status = gr.Textbox(
-                label="📋 추출 상태",
-                placeholder="추출 결과가 여기에 표시됩니다...",
+                label="📋 Extraction Status",
+                placeholder="Extraction results will appear here...",
                 lines=8,
                 interactive=False,
                 elem_classes="status-text"
             )
             
-            # 추출된 오디오 미리듣기
-            gr.Markdown("### 🎧 추출된 오디오 미리듣기")
+            # Extracted audio preview
+            gr.Markdown("### 🎧 Extracted Audio Preview")
             extracted_audio = gr.Audio(
                 label="",
                 type="filepath",
                 interactive=False,
             )
             
-            # 다운로드
+            # Download
             download_file = gr.File(
-                label="📥 다운로드",
+                label="📥 Download",
             )
     
     # ============================================
     # Event Handlers
     # ============================================
     
-    # 파일 업로드 시 정보 조회
+    # File upload - get info and update sliders
     audio_input.change(
         fn=get_audio_info_and_waveform,
         inputs=[audio_input],
-        outputs=[original_audio, gr.State(), gr.State(), audio_info, time_range]
+        outputs=[original_audio, start_time, end_time, max_duration, audio_info]
+    ).then(
+        fn=lambda d: (gr.update(maximum=d), gr.update(maximum=d)),
+        inputs=[max_duration],
+        outputs=[start_time, end_time]
+    )
+    
+    # Start time change - update time display
+    start_time.change(
+        fn=update_time_display,
+        inputs=[start_time, end_time],
+        outputs=[time_display]
     )
     
-    # 슬라이더 변경 시 시간 표시 업데이트
-    time_range.change(
+    # End time change - update time display
+    end_time.change(
         fn=update_time_display,
-        inputs=[time_range],
+        inputs=[start_time, end_time],
         outputs=[time_display]
     )
     
-    # 추출 버튼 클릭
+    # Extract button click
     extract_btn.click(
         fn=extract_audio_segment,
-        inputs=[audio_input, time_range],
+        inputs=[audio_input, start_time, end_time],
         outputs=[extracted_audio, extract_status, download_file]
     )