update app.py

app.py

@@ -291,49 +291,31 @@ def gradio_interface(audio_file, lyrics, output_name, fps=30, vidwidth=1280, vid
     shutil.rmtree("out")
     return f"{output_name}.mp4"
 
-# Define Gradio interface with accordions
-inputs = [
-    gr.Accordion(
-        label="Audio Settings",
-        items=[
-            gr.components.File(label="Upload your MP3 file", file_count='single', file_types=['mp3']),
-            gr.components.File(label="(Optional) Upload Lyrics as LRC or SRT", file_count='single', file_types=['lrc','srt'])
-        ],
-        open=True
-    ),
-    gr.Accordion(
-        label="Video Output Settings",
-        items=[
-            gr.components.Textbox(label="Output Video Name", value='video'),
-            gr.components.Slider(label="Frames per Second", minimum=20, maximum=60, step=1, value=30),
-            gr.components.Slider(label="Output Video Width", minimum=100, maximum=2000, value=1280, step=2),
-            gr.components.Slider(label="Output Video Height", minimum=100, maximum=2000, value=720, step=2)
-        ]
-    ),
-    gr.Accordion(
-        title="Advanced Options",
-        items=[
-            gr.components.Slider(label="Number of Visualization Segments", minimum=256, maximum=2048, step=2, value=512),
-        ]
-    ),
-    gr.Accordion(
-        title="Mp3 Metadata (Use if mp3 does not have tags)",
-        items=[
-            gr.components.Image(label='Cover Art'),
-            gr.components.Textbox(label='Title'),
-            gr.components.Textbox(label='Artists')
-        ]
-    )
-]
+with gr.Blocks() as inputs:
+    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')
+        gr.components.File(label="Upload your MP3 file", file_count='single', file_types=['mp3']),
+        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')
+        gr.components.Textbox(label="Output Video Name", value='video'),
+        gr.components.Slider(label="Frames per Second", minimum=20, maximum=60, step=1, value=30),
+        gr.components.Slider(label="Output Video Width", minimum=100, maximum=2000, value=1280, step=2),
+        gr.components.Slider(label="Output Video Height", minimum=100, maximum=2000, value=720, step=2)
+    with gr.Accordion(title="Advanced Options"):
+        gr.components.Slider(label="Number of Visualization Segments", minimum=256, maximum=2048, step=2, value=512),
+    with gr.Accordion(title="Mp3 Metadata"):
+        gr.Markdown('#Add Metadata here if your mp3 does not have one')
+        gr.components.Image(label='Cover Art'),
+        gr.components.Textbox(label='Title'),
+        gr.components.Textbox(label='Artists')
 
 iface = gr.Interface(
     fn=gradio_interface,
     inputs=inputs,
     outputs=gr.components.Video(label="Output"),
-    title="MP3 to Video Visualization",
-    description=""" Upload an MP3 file and configure parameters to create a visualization video.
-                    Optionally upload a word or line synced lyric file
-                    Ensure a blank line at the end to avoid conversion errors"""
 )
 
 # Launch Gradio interface