Update app.py

app.py

@@ -222,26 +222,27 @@ def generate_and_return_files(bpm, temperature, top_k, uploaded_sf2=None, output
 
 
 custom_css = """
-#main-container {
+#container {
   max-width: 1200px !important;
   margin: 0 auto;
+  padding: 0 16px;
 }
 
 #generate-btn {
-    font-size: 18px;
-    color: white;
-    padding: 10px 20px;
-    border: none;
-    border-radius: 5px;
-    cursor: pointer;
-    background: linear-gradient(90deg, hsla(268, 90%, 68%, 1) 0%, hsla(260, 72%, 70%, 1) 50%, hsla(247, 73%, 65%, 1) 100%);
-    transition: background 1s ease;
-  }
-  
-  #generate-btn:hover {
-    color: white;
-    background: linear-gradient(90deg, hsla(268, 90%, 78%, 1) 0%, hsla(260, 72%, 80%, 1) 50%, hsla(247, 73%, 75%, 1) 100%);
-  }
+  font-size: 18px;
+  color: white;
+  padding: 10px 20px;
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+  background: linear-gradient(90deg, hsla(268, 90%, 68%, 1) 0%, hsla(260, 72%, 70%, 1) 50%, hsla(247, 73%, 65%, 1) 100%);
+  transition: background 1s ease;
+}
+
+#generate-btn:hover {
+  color: white;
+  background: linear-gradient(90deg, hsla(268, 90%, 78%, 1) 0%, hsla(260, 72%, 80%, 1) 50%, hsla(247, 73%, 75%, 1) 100%);
+}
 """
 
 waveform_opts = gr.WaveformOptions(
@@ -251,26 +252,27 @@ waveform_opts = gr.WaveformOptions(
 )
 
 with gr.Blocks(css=custom_css, theme=gr.themes.Default(font=[gr.themes.GoogleFont("Roboto"), "sans-serif"])) as iface:
-    gr.Markdown("<h1 style='font-weight: bold; text-align: center; font-size: 40px; margin: 0px;'>nanoMPC</h1>")
-    gr.Markdown("<p style='text-align: center; font-size: 18px;'>nanoMPC is a MIDI transformer model that generates lo-fi and boom bap beats.</p>")
-    
-    with gr.Row():
-        with gr.Column(scale=1):
-            bpm = gr.Slider(minimum=50, maximum=200, step=1, value=100, label="BPM")
-            temperature = gr.Slider(minimum=0.1, maximum=2.0, step=0.1, value=1.0, label="Temperature")
-            top_k = gr.Slider(minimum=4, maximum=16, step=1, value=8, label="Top-k")
-            output_level = gr.Slider(minimum=0, maximum=3, step=0.10, value=2.0, label="Output Gain")
-            midi_file = gr.File(label="MIDI Output")
-            audio_file = gr.Audio(label="Audio Output", type="filepath", waveform_options=waveform_opts)
-            generate_button = gr.Button("Generate", elem_id="generate-btn")
-            soundfont = gr.File(label="Optional: Upload SoundFont (preset=0, bank=0)")
-    
-    generate_button.click(
-        fn=generate_and_return_files,
-        inputs=[bpm, temperature, top_k, soundfont, output_level],
-        outputs=[midi_file, audio_file]
-    )
+    with gr.Column(elem_id="container"):
+        gr.Markdown("<h1 style='font-weight: bold; text-align: center; font-size: 40px; margin: 0px;'>nanoMPC</h1>")
+        gr.Markdown("<p style='text-align: center; font-size: 18px;'>nanoMPC is a MIDI transformer model that generates lo-fi and boom bap beats.</p>")
+
+        bpm = gr.Slider(minimum=50, maximum=200, step=1, value=100, label="BPM")
+        temperature = gr.Slider(minimum=0.1, maximum=2.0, step=0.1, value=1.0, label="Temperature")
+        top_k = gr.Slider(minimum=4, maximum=16, step=1, value=8, label="Top-k")
+        output_level = gr.Slider(minimum=0, maximum=3, step=0.10, value=2.0, label="Output Gain")
+        midi_file = gr.File(label="MIDI Output")
+        audio_file = gr.Audio(label="Audio Output", type="filepath", waveform_options=waveform_opts)
+        generate_button = gr.Button("Generate", elem_id="generate-btn")
+        soundfont = gr.File(label="Optional: Upload SoundFont (preset=0, bank=0)")
+
+        generate_button.click(
+            fn=generate_and_return_files,
+            inputs=[bpm, temperature, top_k, soundfont, output_level],
+            outputs=[midi_file, audio_file]
+        )
+
+        gr.Markdown("<p style='text-align: center; font-size: 14px;'>Developed by <a href='https://www.patchbanks.com/' target='_blank'><strong>Patchbanks</strong></a></p>")
 
-    gr.Markdown("<p style='text-align: center; font-size: 14px;'>Developed by <a href='https://www.patchbanks.com/' target='_blank'><strong>Patchbanks</strong></a></p>")
+iface.launch(share=True)
 
 iface.launch(share=True)