Update app.py

app.py

@@ -291,43 +291,50 @@ def gradio_interface(audio_file, lyrics, output_name, fps=30, vidwidth=1280, vid
 def update_srt_output_visibility(haslyrics):
     return gr.update(visible=haslyrics)
 
-with gr.Blocks() as inputs:
+with gr.Blocks() as demo:
     gr.Markdown('Upload an MP3 file and configure parameters to create a visualization video.\nOptionally upload a word or line synced lyric file\nEnsure a blank line at the end to avoid conversion errors')
-    with gr.Accordion(label="Audio Settings", open=True):
-        gr.Markdown('#Load your mp3 and lyrics file here')
-        audio_file = gr.components.File(label="Upload your MP3 file", file_count='single', file_types=['mp3'])
-        lyrics_file = gr.components.File(label="(Optional) Upload Lyrics as LRC or SRT", file_count='single', file_types=['lrc', 'srt'])
-
-    with gr.Accordion(label="Video Output Settings"):
-        gr.Markdown('#Configure Video Output Here')
-        output_name = gr.components.Textbox(label="Output Video Name", value='video')
-        fps_slider = gr.components.Slider(label="Frames per Second", minimum=20, maximum=60, step=1, value=30)
-        vidwidth_slider = gr.components.Slider(label="Output Video Width", minimum=100, maximum=2000, value=1280, step=2)
-        vidheight_slider = gr.components.Slider(label="Output Video Height", minimum=100, maximum=2000, value=720, step=2)
-    
-    with gr.Accordion(label="Advanced Options"):
-        oscres_slider = gr.components.Slider(label="Number of Visualization Segments", minimum=256, maximum=2048, step=2, value=512)
-    
-    with gr.Accordion(label="Mp3 Metadata"):
-        gr.Markdown('#Add Metadata here if your mp3 does not have one')
-        cover_img = gr.components.Image(label='Cover Art')
-        title_input = gr.components.Textbox(label='Title')
-        artist_input = gr.components.Textbox(label='Artists')
-
-    output_video = gr.components.Video(label="Output")
-    srt_output = gr.components.File(label="SRT Output", visible=False)
-
-    inputs.load(fn=gradio_interface,
-                inputs=[audio_file, lyrics_file, output_name, fps_slider, vidwidth_slider, vidheight_slider, oscres_slider, cover_img, title_input, artist_input],
-                outputs=[output_video, srt_output])
 
-    inputs.load(fn=update_srt_output_visibility, inputs=None, outputs=srt_output)
-
-iface = gr.Interface(
-    fn=gradio_interface,
-    inputs=inputs,
-    outputs=[output_video, srt_output]
-)
+    with gr.Row():
+        with gr.Column():
+            gr.Markdown('# Audio Settings')
+            audio_file = gr.File(label="Upload your MP3 file", file_count='single', file_types=['mp3'])
+            lyrics_file = gr.File(label="(Optional) Upload Lyrics as LRC or SRT", file_count='single', file_types=['lrc', 'srt'])
+        
+        with gr.Column():
+            gr.Markdown('# Video Output Settings')
+            output_name = gr.Textbox(label="Output Video Name", value='video')
+            fps_slider = gr.Slider(label="Frames per Second", minimum=20, maximum=60, step=1, value=30)
+            vidwidth_slider = gr.Slider(label="Output Video Width", minimum=100, maximum=2000, value=1280, step=2)
+            vidheight_slider = gr.Slider(label="Output Video Height", minimum=100, maximum=2000, value=720, step=2)
+
+    with gr.Row():
+        with gr.Column():
+            gr.Markdown('# Advanced Options')
+            oscres_slider = gr.Slider(label="Number of Visualization Segments", minimum=256, maximum=2048, step=2, value=512)
+        
+        with gr.Column():
+            gr.Markdown('# Mp3 Metadata')
+            cover_img = gr.Image(label='Cover Art')
+            title_input = gr.Textbox(label='Title')
+            artist_input = gr.Textbox(label='Artists')
+
+    with gr.Row():
+        output_video = gr.Video(label="Output")
+        srt_output = gr.File(label="SRT Output", visible=False)
+
+    # Connect the inputs to the function
+    demo.load(
+        fn=gradio_interface,
+        inputs=[audio_file, lyrics_file, output_name, fps_slider, vidwidth_slider, vidheight_slider, oscres_slider, cover_img, title_input, artist_input],
+        outputs=[output_video, srt_output]
+    )
+    
+    # Update visibility of SRT output
+    demo.load(
+        fn=update_srt_output_visibility,
+        inputs=lyrics_file,
+        outputs=srt_output
+    )
 
 # Launch Gradio interface
-iface.launch()
+demo.launch()