Update app.py

app.py

@@ -792,116 +792,169 @@ Generate background music using Video2Music by providing an input video.
 """
 
 
-# input_video = gr.Video(label="Input Video")
-# input_primer = gr.Textbox(label="Input Primer", value="C Am F G")
-# input_key = gr.Dropdown(choices=["C major", "A minor"], value="C major", label="Input Key")
-# output_video = gr.Video(label="Output Video")
-# input_youtube = gr.Textbox(label="YouTube URL")
-
 css = """
 .gradio-container {
     font-family: 'Inter', -apple-system, system-ui, sans-serif;
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 1rem;
+}
+
+.container {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    width: 100%;
+}
+
+.input-section, .output-section {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    width: 100%;
+}
+
+.row {
+    display: flex;
+    flex-direction: row;
+    gap: 1rem;
+    width: 100%;
+}
+
+@media (max-width: 768px) {
+    .row {
+        flex-direction: column;
+    }
 }
+
+.column {
+    flex: 1;
+    min-width: 0;
+}
+
 .gr-button {
     color: white;
     background: #4CAF50;
     border-radius: 8px;
-    padding: 10px;
+    padding: 0.75rem 1.5rem;
+    border: none;
+    cursor: pointer;
+    transition: background 0.3s ease;
+}
+
+.gr-button:hover {
+    background: #45a049;
+}
+
+.gr-form {
+    border: 1px solid #e0e0e0;
+    border-radius: 8px;
+    padding: 1rem;
+    background: white;
 }
-"""
 
+.gr-box {
+    border-radius: 8px;
+    background: white;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+}
 
-# css = '''
-# #duplicate-button {
-# margin: auto;
-# color: white;
-# background: #1565c0;
-# border-radius: 100vh;
-# }
-# '''
-
-
-
-# Gradio interface
-# gr_interface = gr.Interface(
-#     fn=gradio_generate,
-#     inputs=[input_video, input_primer, input_key ],
-#     outputs=[output_video],
-#     description=description_text,
-#     allow_flagging='never',
-#     cache_examples=True,
-# )
-
-# gr_interface2 = gr.Interface(
-#     fn=gradio_generate2,
-#     inputs=[input_youtube, input_primer, input_key ],
-#     outputs=[output_video],
-#     description=description_text,
-#     allow_flagging='never',
-#     cache_examples=True,
-# )
-
-def filter(choice):
-    if choice == "Upload Video":
-        return [gr.update(visible=True), gr.update(visible=False)]
-    if choice == "YouTube URL":
-        return [gr.update(visible=False), gr.update(visible=True)]
+/* Safari-specific fixes */
+@supports (-webkit-touch-callout: none) {
+    .gradio-container {
+        -webkit-text-size-adjust: 100%;
+    }
     
+    .row {
+        display: -webkit-box;
+        display: -webkit-flex;
+        display: flex;
+    }
+    
+    .column {
+        -webkit-box-flex: 1;
+        -webkit-flex: 1;
+        flex: 1;
+    }
+}
+"""
 
-# with gr.Blocks() as demo:
 with gr.Blocks(css=css) as demo:
-    title=gr.HTML(f"<h1><center>{title}</center></h1>")
-    gr.Markdown(
+    with gr.Column(elem_classes="container"):
+        # Title section
+        gr.HTML(f"<h1 style='text-align: center; margin-bottom: 1rem;'>{title}</h1>")
+        gr.Markdown(
             """
             This is the demo for Video2Music: Suitable Music Generation from Videos using an Affective Multimodal Transformer model.
             [Read our paper](https://arxiv.org/abs/2311.00968).
             """
-    )
-    with gr.Row():
-        with gr.Column():
-            radio = gr.Radio(["Upload Video", "YouTube URL"], value="Upload Video", label = "Choose the input method")
-            # with gr.Row(visible=True) as mainA:
-            # with gr.Column(visible=True) as colA:
-            with gr.Column(visible=True) as rowA:
-                with gr.Row():
+        )
+        
+        # Input method selection
+        radio = gr.Radio(
+            ["Upload Video", "YouTube URL"],
+            value="Upload Video",
+            label="Choose the input method",
+            elem_classes="gr-form"
+        )
+        
+        # Main content area
+        with gr.Row(elem_classes="row") as main_content:
+            # Left column - Inputs
+            with gr.Column(elem_classes="column input-section"):
+                # Upload Video section
+                with gr.Column(visible=True, elem_classes="gr-form") as rowA:
                     input_video = gr.Video(label="Input Video", max_length=299)
-                with gr.Row():
-                    with gr.Row():
-                        input_primer = gr.Textbox(label="Input Primer", placeholder="(e.g., C Am F G)", value="", info="Supported types: dim, sus4, min7(m7), min(m), sus2, aug, dim7, maj6(M6), hdim7, 7, min6(m6), maj7(M7)")
-                        input_key = gr.Dropdown(choices=all_key_names, value="C major", label="Input Key")
-                with gr.Row():
-                    btn = gr.Button("Generate")
-
-            with gr.Column(visible=False) as rowB:
-                with gr.Row():
+                    with gr.Row(elem_classes="row"):
+                        input_primer = gr.Textbox(
+                            label="Input Primer",
+                            placeholder="(e.g., C Am F G)",
+                            value="",
+                            info="Supported types: dim, sus4, min7(m7), min(m), sus2, aug, dim7, maj6(M6), hdim7, 7, min6(m6), maj7(M7)"
+                        )
+                        input_key = gr.Dropdown(
+                            choices=all_key_names,
+                            value="C major",
+                            label="Input Key"
+                        )
+                    btn = gr.Button("Generate", elem_classes="gr-button")
+
+                # YouTube URL section
+                with gr.Column(visible=False, elem_classes="gr-form") as rowB:
                     input_video_yt = gr.Textbox(label="YouTube URL")
-                with gr.Row():
-                    with gr.Row():
-                        input_primer_yt = gr.Textbox(label="Input Primer", placeholder="(e.g., C Am F G)", value="", info="Supported types: dim, sus4, min7(m7), min(m), sus2, aug, dim7, maj6(M6), hdim7, 7, min6(m6), maj7(M7)")
-                        input_key_yt = gr.Dropdown(choices=all_key_names, value="C major", label="Input Key")
-                with gr.Row():
-                    btn_yt = gr.Button("Generate")
-
-        with gr.Column():
-            with gr.Row():
-                output_video = gr.Video(label="Output Video")
+                    with gr.Row(elem_classes="row"):
+                        input_primer_yt = gr.Textbox(
+                            label="Input Primer",
+                            placeholder="(e.g., C Am F G)",
+                            value="",
+                            info="Supported types: dim, sus4, min7(m7), min(m), sus2, aug, dim7, maj6(M6), hdim7, 7, min6(m6), maj7(M7)"
+                        )
+                        input_key_yt = gr.Dropdown(
+                            choices=all_key_names,
+                            value="C major",
+                            label="Input Key"
+                        )
+                    btn_yt = gr.Button("Generate", elem_classes="gr-button")
+
+            # Right column - Output
+            with gr.Column(elem_classes="column output-section"):
+                output_video = gr.Video(label="Output Video", elem_classes="gr-box")
 
     radio.change(filter, radio, [rowA, rowB])
-
+    
     btn.click(
-        fn=gradio_generate, 
-        inputs=[input_video,input_primer,input_key],
+        fn=gradio_generate,
+        inputs=[input_video, input_primer, input_key],
         outputs=[output_video],
     )
-
+    
     btn_yt.click(
-        fn=gradio_generate2, 
-        inputs=[input_video_yt,input_primer_yt,input_key_yt],
+        fn=gradio_generate2,
+        inputs=[input_video_yt, input_primer_yt, input_key_yt],
         outputs=[output_video],
     )
 
-#demo.queue()
-# demo.launch(debug=True)
-
 demo.queue().launch()
 
+
+