change design

app.py

@@ -56,7 +56,7 @@ def download_data_from_hub():
     (1005_e_4 file is handled by Git LFS in the main repo)
     """
     base_dir = Path(".")
-    data_repo_id = "mippia/music-data"
+    data_repo_id = "nininigold/music-data"
     
     folders_to_check = ["covers80", "ml_models"]
     downloaded_folders = {}
@@ -318,72 +318,69 @@ def process_audio_for_matching(audio_file):
 # 깔끔한 CSS 스타일
 custom_css = """
 .gradio-container { 
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important; 
+    background: #f8fafc !important; 
     min-height: 100vh; 
     padding: 20px;
 }
 .main-container { 
     background: #ffffff !important; 
-    border-radius: 20px !important; 
-    box-shadow: 0 15px 35px rgba(0,0,0,0.1) !important; 
+    border-radius: 16px !important; 
+    box-shadow: 0 4px 20px rgba(0,0,0,0.08) !important; 
     margin: 0 auto !important; 
     padding: 40px !important; 
     max-width: 900px;
+    border: 1px solid #e2e8f0 !important;
 }
 h1 { 
     text-align: center !important; 
-    font-size: 2.8em !important; 
-    font-weight: 800 !important; 
+    font-size: 2.5em !important; 
+    font-weight: 700 !important; 
     margin-bottom: 15px !important; 
-    background: linear-gradient(135deg, #667eea, #764ba2) !important;
-    -webkit-background-clip: text !important;
-    -webkit-text-fill-color: transparent !important;
-    background-clip: text !important;
+    color: #1e293b !important;
 }
 .gradio-markdown p { 
     text-align: center !important; 
     font-size: 1.1em !important; 
-    color: #555 !important; 
+    color: #64748b !important; 
     margin-bottom: 25px !important; 
     line-height: 1.6;
 }
 .upload-container { 
-    background: #f8f9fa !important; 
-    border-radius: 15px !important; 
+    background: #ffffff !important; 
+    border-radius: 12px !important; 
     padding: 25px !important; 
-    border: 2px dashed #dee2e6 !important; 
+    border: 2px dashed #cbd5e1 !important; 
     margin-bottom: 25px !important;
     transition: all 0.3s ease !important;
 }
 .upload-container:hover {
-    border-color: #667eea !important;
-    background: #f1f3ff !important;
+    border-color: #3b82f6 !important;
+    background: #f8fafc !important;
 }
 .output-container { 
     background: #ffffff !important; 
-    border-radius: 15px !important; 
+    border-radius: 12px !important; 
     padding: 20px !important; 
-    border: 1px solid #e1e5e9 !important; 
+    border: 1px solid #e2e8f0 !important; 
     min-height: 200px !important;
-    box-shadow: 0 2px 10px rgba(0,0,0,0.05) !important;
 }
 .gr-button { 
-    background: linear-gradient(135deg, #667eea, #764ba2) !important; 
-    color: #fff !important; 
+    background: #3b82f6 !important; 
+    color: #ffffff !important; 
     border: none !important; 
-    border-radius: 25px !important; 
-    padding: 12px 30px !important; 
-    font-weight: 600 !important; 
-    font-size: 1.1em !important;
-    transition: all 0.3s ease !important; 
-    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4) !important;
+    border-radius: 8px !important; 
+    padding: 12px 24px !important; 
+    font-weight: 500 !important; 
+    font-size: 1em !important;
+    transition: all 0.2s ease !important;
 }
 .gr-button:hover { 
-    transform: translateY(-2px) !important; 
-    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.6) !important;
+    background: #2563eb !important;
+    transform: translateY(-1px) !important;
+    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.25) !important;
 }
 @media (max-width: 768px) {
-    h1 { font-size: 2.2em !important; }
+    h1 { font-size: 2em !important; }
     .main-container { margin: 10px !important; padding: 25px !important; }
     .upload-container { padding: 20px !important; }
 }