change design

app.py

@@ -14,9 +14,6 @@ token = os.getenv("HF_TOKEN")
 
 # Runtime installation of madmom
 def install_madmom():
-    """
-    Install madmom at runtime after Cython and numpy are available
-    """
     try:
         import madmom
         print("✅ madmom already installed")
@@ -42,19 +39,14 @@ try:
     from inference import inference
 except ImportError as e:
     print(f"⚠️ Failed to import inference: {e}")
-    print("This might be due to missing madmom dependency")
     
     def inference(audio_file):
         return {
             'matches': [],
-            'message': 'madmom dependency not available'
+            'message': 'inference module not available'
         }
 
 def download_data_from_hub():
-    """
-    Download covers80 and ml_models folders from Dataset repository
-    (1005_e_4 file is handled by Git LFS in the main repo)
-    """
     base_dir = Path(".")
     data_repo_id = "mippia/music-data"
     
@@ -64,7 +56,7 @@ def download_data_from_hub():
     # 1005_e_4 파일은 Git LFS로 이미 있는지 확인
     lfs_file = base_dir / "1005_e_4"
     if lfs_file.exists():
-        file_size = lfs_file.stat().st_size / (1024*1024)  # MB
+        file_size = lfs_file.stat().st_size / (1024*1024)
         print(f"✅ LFS file 1005_e_4: {file_size:.1f} MB")
         downloaded_folders["1005_e_4"] = str(lfs_file)
     else:
@@ -77,12 +69,10 @@ def download_data_from_hub():
     
     if not all_folders_exist:
         print(f"📥 Downloading data folders from dataset: {data_repo_id}")
-        print(f"   This includes covers80 and ml_models folders (~17k+ files each)")
-        print(f"   1005_e_4 file is handled by Git LFS in main repo")
+        print(f"   This includes covers80 and ml_models folders")
         print(f"   This may take several minutes...")
         
         try:
-            # Dataset 저장소에서 전체 다운로드
             downloaded_path = snapshot_download(
                 repo_id=data_repo_id,
                 repo_type="dataset",
@@ -94,7 +84,6 @@ def download_data_from_hub():
             
             print(f"✅ Dataset downloaded successfully")
             
-            # 각 폴더 확인 및 파일 수 카운트
             for folder_name in folders_to_check:
                 folder_path = base_dir / folder_name
                 if folder_path.exists():
@@ -107,7 +96,6 @@ def download_data_from_hub():
                     
         except Exception as e:
             print(f"⚠️ Failed to download dataset: {e}")
-            print(f"   Dataset: {data_repo_id}")
             for folder_name in folders_to_check:
                 downloaded_folders[folder_name] = None
     else:
@@ -124,9 +112,6 @@ def download_data_from_hub():
     return downloaded_folders
 
 def find_song_file_by_title(song_title):
-    """
-    covers80 폴더에서 곡 제목으로 mp3 파일을 찾음
-    """
     covers80_path = Path("covers80")
     
     if not covers80_path.exists():
@@ -144,10 +129,10 @@ def find_song_file_by_title(song_title):
         if matches:
             return str(matches[0])
     
-    # 부분 매치 시도 (song_title의 일부분들로)
+    # 부분 매치 시도
     song_parts = song_title.replace('_', ' ').split()
     for part in song_parts:
-        if len(part) > 3:  # 너무 짧은 단어는 제외
+        if len(part) > 3:
             matches = list(covers80_path.glob(f"*{part}*.mp3"))
             if matches:
                 return str(matches[0])
@@ -156,37 +141,33 @@ def find_song_file_by_title(song_title):
 
 @spaces.GPU
 def process_audio_for_matching(audio_file):
-    """
-    Process the uploaded audio file and return matching results with timestamp playback
-    """
     if audio_file is None:
         return """
-        <div style='text-align: center; color: #ff6b6b; padding: 30px; background: #fff5f5; border-radius: 15px; border: 2px dashed #ff6b6b;'>
-            <h3>🎵 No Audio File</h3>
+        <div style='text-align: center; color: #ef4444; padding: 30px; background: #fef2f2; border-radius: 12px; border: 2px dashed #fecaca;'>
+            <h3>No Audio File</h3>
             <p>Please upload an audio file to get started!</p>
         </div>
         """
 
     try:
-        # inference 함수 호출
         result = inference(audio_file)
         
         if result.get('message') != 'success':
             return f"""
-            <div style="text-align: center; padding: 25px; background: #fff3cd; border-radius: 15px; border: 1px solid #ffeaa7; margin: 10px 0;">
-                <h3 style="color: #856404; margin-bottom: 15px;">⚠️ No Matches Found</h3>
-                <p style="color: #856404; font-size: 1.1em;">{result.get('message', 'Unknown error occurred')}</p>
-                <p style="color: #856404; font-size: 0.9em; margin-top: 10px;">Try uploading a clearer audio sample or a different part of the song.</p>
+            <div style="text-align: center; padding: 25px; background: #fef3c7; border-radius: 12px; border: 1px solid #fde68a; margin: 10px 0;">
+                <h3 style="color: #92400e; margin-bottom: 15px;">No Matches Found</h3>
+                <p style="color: #92400e; font-size: 1.1em;">{result.get('message', 'Unknown error occurred')}</p>
+                <p style="color: #92400e; font-size: 0.9em; margin-top: 10px;">Try uploading a different vocal sample.</p>
             </div>
             """
         
         matches = result.get('matches', [])
         if not matches:
             return """
-            <div style="text-align: center; padding: 25px; background: #fff3cd; border-radius: 15px; border: 1px solid #ffeaa7; margin: 10px 0;">
-                <h3 style="color: #856404; margin-bottom: 15px;">🔍 No Matches Found</h3>
-                <p style="color: #856404; font-size: 1.1em;">Sorry, we couldn't find any matching songs in our database.</p>
-                <p style="color: #856404; font-size: 0.9em; margin-top: 10px;">Try uploading a different audio sample.</p>
+            <div style="text-align: center; padding: 25px; background: #fef3c7; border-radius: 12px; border: 1px solid #fde68a; margin: 10px 0;">
+                <h3 style="color: #92400e; margin-bottom: 15px;">No Matches Found</h3>
+                <p style="color: #92400e; font-size: 1.1em;">Sorry, we couldn't find any matching vocals in our database.</p>
+                <p style="color: #92400e; font-size: 0.9em; margin-top: 10px;">Try uploading a different vocal sample.</p>
             </div>
             """
         
@@ -200,8 +181,8 @@ def process_audio_for_matching(audio_file):
             library_time = match.get('library_time', 0)
             
             # 랭킹에 따른 색상 설정
-            rank_colors = {1: '#e74c3c', 2: '#f39c12', 3: '#27ae60'}
-            rank_color = rank_colors.get(rank, '#7f8c8d')
+            rank_colors = {1: '#ef4444', 2: '#f97316', 3: '#22c55e'}
+            rank_color = rank_colors.get(rank, '#6b7280')
             
             # 곡 파일 찾기
             song_file_path = find_song_file_by_title(song_title)
@@ -209,7 +190,6 @@ def process_audio_for_matching(audio_file):
             # 오디오 플레이어 생성
             audio_player = ""
             if song_file_path and os.path.exists(song_file_path):
-                # 상대 경로로 변경
                 rel_song_path = os.path.relpath(song_file_path)
                 audio_player = f"""
                 <div style="margin: 15px 0; padding: 15px; background: #f8fafc; border-radius: 8px;">
@@ -235,9 +215,9 @@ def process_audio_for_matching(audio_file):
                 file_info = f"Found: {os.path.basename(song_file_path)}"
             else:
                 audio_player = f"""
-                <div style="margin: 10px 0; padding: 10px; background: #fff3cd; border-radius: 8px; text-align: center;">
-                    <p style="color: #856404; margin: 0;">🔍 Song file not found for playback</p>
-                    <p style="font-size: 0.8em; color: #856404; margin: 5px 0 0 0;">Match at {library_time:.1f}s in "{song_title}"</p>
+                <div style="margin: 10px 0; padding: 10px; background: #fef3c7; border-radius: 8px; text-align: center;">
+                    <p style="color: #92400e; margin: 0;">Song file not found for playback</p>
+                    <p style="font-size: 0.8em; color: #92400e; margin: 5px 0 0 0;">Match at {library_time:.1f}s in "{song_title}"</p>
                 </div>
                 """
                 file_info = f"Song file not found: {song_title}"
@@ -246,52 +226,52 @@ def process_audio_for_matching(audio_file):
             <div style="background: #ffffff; border-radius: 12px; padding: 20px; margin: 15px 0; 
                         border-left: 5px solid {rank_color}; box-shadow: 0 3px 10px rgba(0,0,0,0.1);">
                 <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px;">
-                    <h3 style="color: #2c3e50; margin: 0; font-size: 1.2em;">
+                    <h3 style="color: #1e293b; margin: 0; font-size: 1.2em;">
                         <span style="background: {rank_color}; color: white; padding: 4px 8px; border-radius: 15px; font-size: 0.8em; margin-right: 10px;">
                             #{rank}
                         </span>
                         {song_title}
                     </h3>
-                    <span style="background: #ecf0f1; color: #2c3e50; padding: 6px 12px; border-radius: 20px; font-weight: 600;">
+                    <span style="background: #f1f5f9; color: #1e293b; padding: 6px 12px; border-radius: 20px; font-weight: 600;">
                         {confidence}
                     </span>
                 </div>
                 
-                <div style="background: #f8f9fa; border-radius: 8px; padding: 12px; margin: 10px 0;">
+                <div style="background: #f8fafc; border-radius: 8px; padding: 12px; margin: 10px 0;">
                     <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 10px; text-align: center;">
                         <div>
-                            <strong style="color: #3498db;">Your Audio</strong>
-                            <br><span style="color: #e74c3c; font-size: 1.1em;">{test_time:.1f}s</span>
+                            <strong style="color: #3b82f6;">Your Audio</strong>
+                            <br><span style="color: #ef4444; font-size: 1.1em;">{test_time:.1f}s</span>
                         </div>
                         <div>
-                            <strong style="color: #3498db;">Matched At</strong>
-                            <br><span style="color: #27ae60; font-size: 1.1em;">{library_time:.1f}s</span>
+                            <strong style="color: #3b82f6;">Matched At</strong>
+                            <br><span style="color: #22c55e; font-size: 1.1em;">{library_time:.1f}s</span>
                         </div>
                     </div>
                 </div>
                 
                 {audio_player}
                 
-                <div style="font-size: 0.9em; color: #7f8c8d; text-align: center; margin-top: 10px;">
-                    📁 {file_info}
+                <div style="font-size: 0.9em; color: #64748b; text-align: center; margin-top: 10px;">
+                    {file_info}
                 </div>
             </div>
             """
         
         formatted_result = f"""
-        <div style="background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%); border-radius: 20px; padding: 30px; 
-                    box-shadow: 0 8px 25px rgba(0,0,0,0.1); border: 1px solid #dee2e6; margin: 10px 0;">
+        <div style="background: #ffffff; border-radius: 16px; padding: 30px; 
+                    box-shadow: 0 4px 20px rgba(0,0,0,0.08); border: 1px solid #e2e8f0; margin: 10px 0;">
             <div style="text-align: center; margin-bottom: 25px;">
-                <h2 style="color: #2c3e50; margin-bottom: 10px; font-size: 1.8em;">🎵 Matching Results</h2>
-                <p style="color: #7f8c8d; font-size: 1.1em;">Found {len(matches)} potential matches in our database</p>
+                <h2 style="color: #1e293b; margin-bottom: 10px; font-size: 1.8em;">Vocal Matching Results</h2>
+                <p style="color: #64748b; font-size: 1.1em;">Found {len(matches)} similar vocals in Covers80 dataset</p>
             </div>
             
             {matches_html}
             
-            <div style="text-align: center; margin-top: 25px; padding: 15px; background: #e8f5e8; border-radius: 10px;">
-                <p style="color: #27ae60; margin: 0; font-size: 0.95em;">
-                    💡 <strong>How to read results:</strong> The times show where similar segments were found. 
-                    Use the audio player to listen from the matched timestamp.
+            <div style="text-align: center; margin-top: 25px; padding: 15px; background: #f1f5f9; border-radius: 8px;">
+                <p style="color: #475569; margin: 0; font-size: 0.95em;">
+                    <strong>How to read results:</strong> Vocal similarity scores with timestamp locations. 
+                    Play the audio to hear the matched vocal sections.
                 </p>
             </div>
         </div>
@@ -308,14 +288,14 @@ def process_audio_for_matching(audio_file):
 
     except Exception as e:
         return f"""
-        <div style="text-align: center; padding: 20px; background: #f8d7da; border-radius: 10px; border: 1px solid #f5c6cb; color: #721c24; margin: 10px 0;">
-            <h3>❌ Error Processing Audio</h3>
+        <div style="text-align: center; padding: 20px; background: #fef2f2; border-radius: 10px; border: 1px solid #fecaca; color: #991b1b; margin: 10px 0;">
+            <h3>Error Processing Audio</h3>
             <p>Error details: {str(e)}</p>
             <p style="font-size: 0.9em; margin-top: 10px;">Please try again with a different audio file.</p>
         </div>
         """
 
-# 깔끔한 CSS 스타일
+# CSS 스타일
 custom_css = """
 .gradio-container { 
     background: #f8fafc !important; 
@@ -403,22 +383,22 @@ demo = gr.Interface(
     fn=process_audio_for_matching,
     inputs=gr.Audio(
         type="filepath", 
-        label="🎵 Upload Your Audio File", 
+        label="Upload Your Audio File", 
         elem_classes=["upload-container"]
     ),
     outputs=gr.HTML(
-        label="🔍 Similarity Results", 
+        label="Similarity Results", 
         elem_classes=["output-container"]
     ),
-    title="🎵 Music Similarity Detector",
+    title="Music Similarity Detection",
     description="""
-    <div style="text-align: center; font-size: 1.1em; color: #555; margin: 25px 0; line-height: 1.6;">
-        <p><strong>🎯 Upload any audio clip and find similar segments in our music database!</strong></p>
-        <p>Our AI analyzes your audio and finds the most similar segments from known songs with precise timestamps.</p>
-        <p style="font-size: 0.95em; color: #777; margin-top: 15px;">
-            📁 Supported formats: MP3, WAV, M4A, FLAC<br>
-            ⏱️ Processing time: ~15-30 seconds per file<br>
-            🎼 Database: 160 songs with timestamp-based matching
+    <div style="text-align: center; font-size: 1.1em; color: #64748b; margin: 25px 0; line-height: 1.6;">
+        <p><strong>Upload a vocal audio clip to find similar vocals in our database.</strong></p>
+        <p>This system analyzes vocal characteristics only - not instrumental parts.</p>
+        <p style="font-size: 0.95em; color: #94a3b8; margin-top: 15px;">
+            Supported formats: MP3, WAV, M4A, FLAC<br>
+            Database: Covers80 dataset (cover song vocals)<br>
+            Processing time: ~15-30 seconds
         </p>
     </div>
     """,
@@ -426,7 +406,7 @@ demo = gr.Interface(
     css=custom_css,
     theme=gr.themes.Soft(
         primary_hue="blue",
-        secondary_hue="purple",
+        secondary_hue="gray",
         neutral_hue="gray",
         font=[gr.themes.GoogleFont("Inter"), "Arial", "sans-serif"]
     ),