first commit

.gitattributes

@@ -33,3 +33,4 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
 *.zip filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text
+audio/ filter=lfs diff=lfs merge=lfs -text

.gitignore

@@ -0,0 +1 @@
+audio/

gradio.py

@@ -0,0 +1,51 @@
+import gradio as gr
+from pathlib import Path
+
+# Sample data for the demo
+samples = {"drums": [], "bass": []}
+
+audio_dir: Path = Path(__file__).parent / "audio"
+bass_dir: Path = audio_dir / "bass"
+drums_dir: Path = audio_dir / "drums"
+
+for instrument in samples.keys():
+    for subdir in (audio_dir / instrument.lower()).iterdir():
+        context = str(sorted(list(subdir.glob("*context.wav")))[0])
+        gen = str(sorted(list(subdir.glob("*gen.wav")))[0])
+        mix = str(sorted(list(subdir.glob("*mix.wav")))[0])
+        samples[instrument].append({
+            "context": context,
+            "generated": gen,
+            "mix": mix
+        })
+
+with gr.Blocks(theme=gr.themes.Soft(), css_paths=["styles.css"]) as demo:
+    # Header and description
+    gr.HTML("<h1>STAGE: demo samples</h1>")
+    gr.HTML('''
+      <div class="centered-text">
+        Listen to audio samples from STAGE, our <i>Single-stem Accompaniment Generation Model</i>.<br>
+        All generated samples are straight from the model, with no post-processing.<br>
+        All contexts are taken from an isolated test datset.
+        <br>
+        <a href="https://github.com/yourname/yourproject" target="_blank">GitHub</a> |
+        <a href="https://arxiv.org/abs/yourpaperid" target="_blank">arXiv</a>
+      </div>
+    ''')
+
+    # Tabs for Bass and Drums samples
+    with gr.Tabs(elem_classes="tabs-container"):
+
+        for instrument in samples.keys():
+
+            with gr.Tab(instrument.capitalize(), elem_classes="tab-content"):
+                for i, s in enumerate(samples[instrument], 1):
+                    with gr.Group(elem_classes="audio-section"):
+                        gr.HTML(f"Sample {i}", elem_classes="sample-title")
+                        with gr.Row(elem_classes="audio-row"):
+                            for name, audiopath in s.items():
+                                gr.Audio(audiopath,
+                                         label=name.capitalize(),
+                                         type="filepath",
+                                         elem_classes="audio-player")
+demo.launch()

styles.css

@@ -0,0 +1,175 @@
+/* styles.css */
+@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Noto+Serif:ital,wght@0,100..900;1,100..900&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Noto+Serif:ital,wght@0,100..900;1,100..900&family=Roboto+Mono:ital,wght@0,100..700;1,100..700&display=swap');
+
+:root {
+  --bg-color: #0f0f0f;
+  /* --accent-color: #1b717d; */
+  --accent-color: #4f46e5;
+  /* --font-color: #ffffff; */
+  --font-color: #fbf8f5;
+
+  /* --bg-secondary: #374151 !important; */
+  /* --bg-secondary: #202627 !important; */
+  --bg-secondary: #3d3f4d !important;
+
+  /* --bg-tertiary: #304146 !important; */
+  --bg-tertiary: #232638 !important;
+
+/* other stuff */
+  --primary: #1b717d !important;
+  --primary-hover: #1b717d !important;
+  --primary-pressed: #1b717d !important;
+  --secondary-400: #1b717d !important;
+  --secondary-500: #1b717d !important;
+  --secondary-600: #1b717d !important;
+  --secondary-700: #1b717d !important;
+  --secondary-800: #1b717d !important;
+  --secondary-900: #1b717d !important;
+  --link-text-color: #1b717d !important;
+}
+
+body, .gradio-container, .gr-block {
+  font-family: 'DM Serif Display', serif !important;
+  background-color: var(--bg-color);
+  color: var(--font-color) !important;
+  /* --color-accent-soft: var(--neutral-700) !important; */
+  /* --color-accent-soft: #ff0000 !important; */
+  /* --background-fill-secondary: var(--neutral-900); */
+  /* --background-fill-secondary: #ff0000 !important;  */
+}
+
+strong {
+    color: inherit !important;
+}
+
+a{
+    color: var(--accent-color);
+}
+
+/* Header styling */
+h1 {
+  text-align: center;
+  font-size: 5em;
+  margin: 20px 0 10px !important;
+  font-weight: 700;
+  color: inherit;
+  /* color: #222 !important; */
+}
+
+/* Description text */
+.centered-text {
+  text-align: center !important;
+  margin-bottom: 24px !important;
+  font-size: 1.5em !important;
+  color: inherit;
+  /* color: #444 !important; */
+}
+
+/* Tabs container  */
+.tabs-container {
+    align:center;
+    text-align: center;
+    width: 1000px;
+    margin: 0 auto;
+    color: inherit;
+}
+.tab-container button[role="tab"]{
+    font-size: 1.5em !important;
+    color: inherit;
+}
+.tab-container button[aria-selected="true"] {
+  /* background-color: #ebebeb !important; */
+  /* color: #ff0000; */
+  color: var(--accent-color) !important;
+  /* border-color: #ff0000 !important; */
+}
+.tab-container button[aria-selected="true"]::after{
+  background-color: var(--accent-color) !important;
+}
+.tabs-container .gr-tab-label[selected] {
+  /* background-color: #3378e8 !important; */
+  /* color: #fff !important; */
+  /* border-color: #3378e8 !important;  */
+  /* border-color: #ff0000 !important; */
+}
+
+.row{
+    top: -1px;
+}
+
+
+/* Tabs content  */
+.tab-content{
+    font-family: "Roboto Mono", monospace !important;
+}
+.sample-title {
+    font-size: 1.1em !important;
+    background-color: var(--bg-secondary) !important;
+
+}
+
+/* Audio section container (card) */
+.audio-section {
+  padding-bottom: 0px !important;
+  margin-bottom: 16px !important;
+  border-radius: 8px !important;
+  box-shadow: 0 1px 3px rgba(0,0,0,0.1) !important;
+  text-align: center;
+}
+.audio-row {
+  display: flex !important;
+  flex-direction: row !important;
+  gap: 5px !important;
+  margin-top: 0px !important;
+  align-items: center !important;
+  padding: 5px !important; 
+  padding-top: 0px !important;
+  border-width: 5px !important;
+  /* height: 200px; */
+  background-color: var(--bg-secondary) !important;
+}
+
+
+
+
+/* Audio player styling: set dimensions and remove borders */
+.audio-player {
+    /* border-width: 0px !important; */
+  border-radius: 5px !important;
+  border-width: 0px !important;
+  border-style: solid;
+  margin: auto;
+  background-color: var(--bg-tertiary) !important;
+}
+.audio-player label span{
+  /* width: 220px !important;
+  height: 200px !important;
+  /* border: none !important; */
+  /* background: transparent !important; */
+  display: none !important;
+
+}
+.audio-player label{
+  font-weight: normal !important;
+  border-radius: 5px;
+  color: inherit;
+  background-color: var(--accent-color);
+}
+
+
+/* Remove default Gradio audio component borders if any */
+.gradio-container .gradio-audio {
+  /* border: none !important;
+  background: transparent !important; */
+}
+
+/* Hide the playback speed button */
+.audio-player button[aria-label="Adjust playback speed to 1.5x"] {
+  display: none !important;
+}
+
+/* Hide the skip backward and skip forward buttons */
+.gradio-audio, .rewind, .skip{
+  display: none !important;
+}