change download mechanism

app.py

@@ -207,11 +207,20 @@ def find_song_file_by_title(song_title):
     
     return None
 
+def format_time(seconds):
+    """Convert seconds to MM:SS format"""
+    if seconds is None or seconds < 0:
+        return "0:00"
+    
+    minutes = int(seconds // 60)
+    seconds = int(seconds % 60)
+    return f"{minutes}:{seconds:02d}"
+
 @spaces.GPU(duration=300)
 def process_audio_for_matching(audio_file):
     if audio_file is None:
         return None, None, None, """
-        <div style='text-align: center; color: #dc2626; padding: 30px; background: #fef2f2; border-radius: 12px; border: 2px dashed #fecaca;'>
+        <div style='text-align: center; color: #dc2626; padding: 20px; background: #fef2f2; border-radius: 8px;'>
             <h3>No Audio File</h3>
             <p>Please upload an audio file to get started!</p>
         </div>
@@ -221,18 +230,18 @@ def process_audio_for_matching(audio_file):
     
     if result.get('message') != 'success':
         return None, None, None, f"""
-        <div style="text-align: center; padding: 25px; background: #fefce8; border-radius: 12px; border: 1px solid #fde047; margin: 10px 0;">
-            <h3 style="color: #a16207; margin-bottom: 15px;">No Matches Found</h3>
-            <p style="color: #a16207; font-size: 1.1em;">{result.get('message', 'Unknown error occurred')}</p>
+        <div style="text-align: center; padding: 20px; background: #fefce8; border-radius: 8px;">
+            <h3 style="color: #a16207;">No Matches Found</h3>
+            <p style="color: #a16207;">{result.get('message', 'Unknown error occurred')}</p>
         </div>
         """
     
     matches = result.get('matches', [])
     if not matches:
         return None, None, None, """
-        <div style="text-align: center; padding: 25px; background: #fefce8; border-radius: 12px; border: 1px solid #fde047; margin: 10px 0;">
-            <h3 style="color: #a16207; margin-bottom: 15px;">No Matches Found</h3>
-            <p style="color: #a16207; font-size: 1.1em;">No matching vocals found in the dataset.</p>
+        <div style="text-align: center; padding: 20px; background: #fefce8; border-radius: 8px;">
+            <h3 style="color: #a16207;">No Matches Found</h3>
+            <p style="color: #a16207;">No matching vocals found in the dataset.</p>
         </div>
         """
     
@@ -250,7 +259,7 @@ def process_audio_for_matching(audio_file):
         else:
             audio_files[i] = None
     
-    # Generate match results HTML
+    # Generate match results HTML - compact horizontal layout
     matches_html = ""
     for match in matches:
         rank = match.get('rank', 0)
@@ -264,29 +273,28 @@ def process_audio_for_matching(audio_file):
         rank_color = rank_colors.get(rank, '#6b7280')
         
         matches_html += f"""
-        <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: #111827; 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: #f3f4f6; color: #111827; padding: 6px 12px; border-radius: 20px; font-weight: 600;">
-                    {confidence}
-                </span>
-            </div>
-            
-            <div style="background: #f9fafb; 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: #1f2937;">Your Audio</strong>
-                        <br><span style="color: #dc2626; font-size: 1.1em;">{test_time:.1f}s</span>
+        <div style="background: #ffffff; border-radius: 8px; padding: 15px; margin: 10px 0; 
+                    border-left: 4px solid {rank_color}; box-shadow: 0 2px 8px rgba(0,0,0,0.1);">
+            <div style="display: flex; justify-content: space-between; align-items: center;">
+                <div style="flex: 1;">
+                    <h4 style="color: #111827; margin: 0; font-size: 1.1em;">
+                        <span style="background: {rank_color}; color: white; padding: 2px 6px; border-radius: 10px; font-size: 0.8em; margin-right: 8px;">
+                            #{rank}
+                        </span>
+                        {song_title}
+                    </h4>
+                </div>
+                <div style="display: flex; gap: 15px; align-items: center;">
+                    <div style="text-align: center;">
+                        <small style="color: #6b7280;">Your Audio</small>
+                        <div style="color: #dc2626; font-weight: 600;">{format_time(test_time)}</div>
+                    </div>
+                    <div style="text-align: center;">
+                        <small style="color: #6b7280;">Matched At</small>
+                        <div style="color: #16a34a; font-weight: 600;">{format_time(library_time)}</div>
                     </div>
-                    <div>
-                        <strong style="color: #1f2937;">Matched At</strong>
-                        <br><span style="color: #16a34a; font-size: 1.1em;">{library_time:.1f}s</span>
+                    <div style="background: #f3f4f6; color: #111827; padding: 4px 10px; border-radius: 12px; font-weight: 600; font-size: 0.9em;">
+                        {confidence}
                     </div>
                 </div>
             </div>
@@ -294,20 +302,13 @@ def process_audio_for_matching(audio_file):
         """
     
     results_html = f"""
-    <div style="background: #ffffff; border-radius: 16px; padding: 30px; 
-                box-shadow: 0 4px 20px rgba(0,0,0,0.08); border: 1px solid #e5e7eb; margin: 10px 0;">
-        <div style="text-align: center; margin-bottom: 25px;">
-            <h2 style="color: #111827; margin-bottom: 10px; font-size: 1.8em;">Vocal Matching Results</h2>
-            <p style="color: #374151; font-size: 1.1em;">Found {len(matches)} similar vocals in Covers80 dataset</p>
+    <div style="background: #ffffff; border-radius: 12px; padding: 20px; 
+                box-shadow: 0 4px 15px rgba(0,0,0,0.08); border: 1px solid #e5e7eb;">
+        <div style="text-align: center; margin-bottom: 20px;">
+            <h3 style="color: #111827; margin: 0;">Vocal Matching Results</h3>
+            <p style="color: #6b7280; margin: 5px 0;">Found {len(matches)} similar vocals in Covers80 dataset</p>
         </div>
-        
         {matches_html}
-        
-        <div style="text-align: center; margin-top: 25px; padding: 15px; background: #f3f4f6; border-radius: 8px;">
-            <p style="color: #374151; margin: 0; font-size: 0.95em;">
-                <strong>Audio Players:</strong> Top 3 matched songs are available above. Timestamps show where similar vocals were found.
-            </p>
-        </div>
     </div>
     """
     
@@ -325,124 +326,53 @@ custom_css = """
     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;
+    padding: 30px !important; 
+    max-width: 1200px;
     border: 1px solid #e5e7eb !important;
 }
-h1 { 
-    text-align: center !important; 
-    font-size: 2.5em !important; 
-    font-weight: 700 !important; 
-    margin-bottom: 15px !important; 
-    color: #111827 !important;
-}
-.gradio-markdown p { 
-    text-align: center !important; 
-    font-size: 1.1em !important; 
-    color: #374151 !important; 
-    margin-bottom: 25px !important; 
-    line-height: 1.6;
-}
-.upload-container { 
-    background: #ffffff !important; 
-    border-radius: 12px !important; 
-    padding: 25px !important; 
-    border: 2px dashed #d1d5db !important; 
-    margin-bottom: 25px !important;
-    transition: all 0.3s ease !important;
-}
-.upload-container:hover {
-    border-color: #2563eb !important;
-    background: #f9fafb !important;
-}
-.output-container { 
-    background: #ffffff !important; 
-    border-radius: 12px !important; 
-    padding: 20px !important; 
-    border: 1px solid #e5e7eb !important; 
-    min-height: 200px !important;
-}
-.gr-button { 
-    background: #2563eb !important; 
-    color: #ffffff !important; 
-    border: none !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 { 
-    background: #1d4ed8 !important;
-    transform: translateY(-1px) !important;
-    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25) !important;
-}
-@media (max-width: 768px) {
-    h1 { font-size: 2em !important; }
-    .main-container { margin: 10px !important; padding: 25px !important; }
-    .upload-container { padding: 20px !important; }
-}
 """
 
-# Gradio interface with 3 audio outputs
-demo = gr.Interface(
-    fn=process_audio_for_matching,
-    inputs=gr.Audio(
-        type="filepath", 
-        label="Upload Your Audio File", 
-        elem_classes=["upload-container"]
-    ),
-    outputs=[
-        gr.Audio(
-            label="Match #1 Audio",
-            elem_classes=["output-container"]
-        ),
-        gr.Audio(
-            label="Match #2 Audio", 
-            elem_classes=["output-container"]
-        ),
-        gr.Audio(
-            label="Match #3 Audio",
-            elem_classes=["output-container"]
-        ),
-        gr.HTML(
-            label="Analysis Results",
-            elem_classes=["output-container"]
-        )
-    ],
-    title="Music Plagiarism Detection",
-    description="""
-    <div style="text-align: center; font-size: 1.1em; color: #374151; margin: 25px 0; line-height: 1.6;">
+# Gradio interface with horizontal layout
+with gr.Blocks(css=custom_css, theme=gr.themes.Soft(), title="Music Plagiarism Detection") as demo:
+    gr.Markdown("""
+    <div style="text-align: center; margin-bottom: 20px;">
+        <h1 style="color: #111827; font-size: 2.2em; margin-bottom: 10px;">Music Plagiarism Detection</h1>
         <p><strong>Music Plagiarism Detection: Problem Formulation and a Segment-based Solution</strong></p>
-        <p style="font-size: 0.9em; color: #6b7280; margin: 10px 0;">
-            Authors: Seonghyeon Go, Yumin Kim<br>
-            MIPPIA Inc.<br>
-            Submitted to ICASSP 2026
+        <p style="font-size: 0.9em; color: #6b7280; margin: 8px 0;">
+            Authors: Seonghyeon Go, Yumin Kim | MIPPIA Inc. | Submitted to ICASSP 2026
         </p>
-        <hr style="border: none; border-top: 1px solid #e5e7eb; margin: 20px 0;">
-        <p><strong>Demo Version Notice:</strong><br>
-        This demo differs from the paper version and focuses exclusively on vocal segment transcription.</p>
-        <p>Upload any music file to detect vocal similarities in the Covers80 dataset.<br>
-        The system analyzes only vocal characteristics, ignoring instrumental parts.</p>
-        <p style="font-size: 0.95em; color: #dc2626; font-weight: 600; margin-top: 15px;">
-            Processing can take up to 2 minutes per file
-        </p>
-        <p style="font-size: 0.95em; color: #6b7280; margin-top: 10px;">
-            Supported formats: MP3, WAV, M4A, FLAC
+        <hr style="border: none; border-top: 1px solid #e5e7eb; margin: 15px 0;">
+        <p><strong>Demo Version Notice:</strong> This demo differs from the paper version and focuses exclusively on vocal segment transcription.</p>
+        <p style="font-size: 0.9em; color: #6b7280; margin: 8px 0;">
+            Structure analysis has been excluded for optimization. Results are derived from all downbeats, 
+            which may cause some timestamps to appear less precise than expected.
         </p>
+        <p style="color: #dc2626; font-weight: 600;">Processing can take up to 2 minutes per file</p>
     </div>
-    """,
-    examples=[],
-    css=custom_css,
-    theme=gr.themes.Soft(
-        primary_hue="blue",
-        secondary_hue="gray",
-        neutral_hue="gray",
-        font=[gr.themes.GoogleFont("Inter"), "Arial", "sans-serif"]
-    ),
-    elem_classes=["main-container"],
-    allow_flagging="never"
-)
+    """, elem_classes=["main-container"])
+    
+    # Input section
+    with gr.Row():
+        audio_input = gr.Audio(type="filepath", label="Upload Your Audio File")
+    
+    with gr.Row():
+        submit_btn = gr.Button("Analyze Audio", variant="primary", size="lg")
+    
+    # Output section - horizontal layout
+    with gr.Row():
+        with gr.Column(scale=1):
+            audio1 = gr.Audio(label="Match #1", show_label=True)
+            audio2 = gr.Audio(label="Match #2", show_label=True) 
+            audio3 = gr.Audio(label="Match #3", show_label=True)
+        
+        with gr.Column(scale=1):
+            results = gr.HTML(label="Analysis Results")
+    
+    submit_btn.click(
+        fn=process_audio_for_matching,
+        inputs=[audio_input],
+        outputs=[audio1, audio2, audio3, results]
+    )
 
 if __name__ == "__main__":
     demo.launch(