Add descriptions

app.py

@@ -1,21 +1,37 @@
 import gradio as gr
+import os
 import allin1
 
 from pathlib import Path
 
+HEADER = """
+<header>
+  <h1>
+    All-In-One Music Structure Analyzer 🔮
+  </h1>
+  <p>
+    <a href="https://github.com/mir-aidj/all-in-one">[Python Package]</a>
+    <a href="https://arxiv.org/abs/2307.16425">[Paper]</a>
+    <a href="https://taejun.kim/music-dissector/">[Visual Demo]</a>
+  </p>
+</header>
+"""
+
 DESCRIPTION = """
-# All-In-One Music Structure Analyzer
 
 This Space demonstrates [All-In-One Music Structure Analyzer](https://github.com/mir-aidj/all-in-one),
-a tool that predicts the BPM, beats, downbeats, segment boundaries, and functional segment labels from audio files.
+a tool that predicts:
+- BPM
+- Beats
+- Downbeats
+- Functional segment boundaries
+- Functional segment labels
 
-For more information, please visit:
-- Python package: [`allin1`](https://github.com/mir-aidj/all-in-one)
-- Structure visualizer: [Music Dissector](https://taejun.kim/music-dissector/)
-- Paper: [All-In-One Metrical And Functional Structure Analysis With Neighborhood Attentions on Demixed Audio
-](https://arxiv.org/abs/2307.16425)
+For more information, please visit the links above ✨🧸
 """
 
+CACHE_EXAMPLES = os.getenv('CACHE_EXAMPLES', '1') == '1'
+
 
 def analyze(path):
   path = Path(path)
@@ -31,8 +47,10 @@ def analyze(path):
   return result.bpm, fig, sonif_path
 
 
-with gr.Blocks() as demo:
+with gr.Blocks(css='style.css') as demo:
+  gr.HTML(HEADER)
   gr.Markdown(DESCRIPTION)
+
   input_audio_path = gr.Audio(
     label='Input',
     source='upload',
@@ -56,7 +74,7 @@ with gr.Blocks() as demo:
     inputs=input_audio_path,
     outputs=[output_bpm, output_viz, output_sonif],
     fn=analyze,
-    cache_examples=True,
+    cache_examples=CACHE_EXAMPLES,
   )
   button.click(
     fn=analyze,
@@ -65,4 +83,5 @@ with gr.Blocks() as demo:
     api_name='analyze',
   )
 
-demo.queue().launch()
+if __name__ == '__main__':
+  demo.launch()

style.css

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