Improve the style

app.py

@@ -5,7 +5,7 @@ import allin1
 from pathlib import Path
 
 HEADER = """
-<header>
+<header style="text-align: center;">
   <h1>
     All-In-One Music Structure Analyzer 🔮
   </h1>
@@ -15,19 +15,29 @@ HEADER = """
     <a href="https://taejun.kim/music-dissector/">[Visual Demo]</a>
   </p>
 </header>
-"""
-
-DESCRIPTION = """
-
-This Space demonstrates [All-In-One Music Structure Analyzer](https://github.com/mir-aidj/all-in-one),
-a tool that predicts:
-- BPM
-- Beats
-- Downbeats
-- Functional segment boundaries
-- Functional segment labels
-
-For more information, please visit the links above ✨🧸
+<main
+  style="display: flex; justify-content: center;"
+>
+  <div
+    style="display: inline-block;"
+  >
+    <p>
+      This Space demonstrates the music structure analyzer predicts:
+      <ul
+        style="padding-left: 1rem;"
+      >
+        <li>BPM</li>
+        <li>Beats</li>
+        <li>Downbeats</li>
+        <li>Functional segment boundaries</li>
+        <li>Functional segment labels (e.g. intro, verse, chorus, bridge, outro)</li>
+      </ul>
+    </p>
+    <p>
+      For more information, please visit the links above ✨🧸
+    </p>
+  </div>
+</main>
 """
 
 CACHE_EXAMPLES = os.getenv('CACHE_EXAMPLES', '1') == '1'
@@ -40,16 +50,18 @@ def analyze(path):
     multiprocess=False,
     keep_byproducts=True,  # TODO: remove this
   )
+
   fig = allin1.visualize(result)
+  fig.set_dpi(300)
+
   allin1.sonify(result, out_dir='./sonif')
   sonif_path = Path(f'./sonif/{path.stem}.sonif{path.suffix}').resolve().as_posix()
 
   return result.bpm, fig, sonif_path
 
 
-with gr.Blocks(css='style.css') as demo:
+with gr.Blocks() as demo:
   gr.HTML(HEADER)
-  gr.Markdown(DESCRIPTION)
 
   input_audio_path = gr.Audio(
     label='Input',
@@ -59,14 +71,16 @@ with gr.Blocks(css='style.css') as demo:
     show_download_button=False,
   )
   button = gr.Button('Analyze', variant='primary')
-  output_bpm = gr.Textbox(label='BPM')
   output_viz = gr.Plot(label='Visualization')
-  output_sonif = gr.Audio(
-    label='Sonification',
-    type='filepath',
-    format='mp3',
-    show_download_button=False,
-  )
+  with gr.Row():
+    output_bpm = gr.Textbox(label='BPM', scale=1)
+    output_sonif = gr.Audio(
+      label='Sonification',
+      type='filepath',
+      format='mp3',
+      show_download_button=False,
+      scale=9,
+    )
   gr.Examples(
     examples=[
       './assets/NewJeans - Super Shy.mp3',

style.css

@@ -1,13 +0,0 @@
-header {
-  text-align: center;
-}
-
-ul {
-  padding-left: 1rem !important;
-}
-
-#component-0 {
-  max-width: 900px;
-  margin: auto;
-  padding-top: 1.5rem;
-}