Add one-click synthetic audio examples

.gitattributes

@@ -33,3 +33,6 @@ 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
+examples/clockwork-waltz.mp3 filter=lfs diff=lfs merge=lfs -text
+examples/glass-arpeggio.mp3 filter=lfs diff=lfs merge=lfs -text
+examples/neon-groove.mp3 filter=lfs diff=lfs merge=lfs -text

README.md

@@ -16,6 +16,8 @@ A custom ZeroGPU interface for [MuScriptor](https://github.com/muscriptor/muscri
 
 The app runs the 307M-parameter medium checkpoint, streams transcription progress after each 5-second audio window, renders an interactive color-coded piano roll, and exports both the full arrangement and isolated instrument MIDI files.
 
+Three one-click example sessions are included: a synth-funk groove, a drumless glass arpeggio, and a clockwork 3/4 waltz. They are original procedural recordings made entirely from generated oscillators and seeded noise, with no third-party samples. Example results are cached lazily after first use so startup never consumes ZeroGPU quota.
+
 The checkpoint is gated under CC BY-NC 4.0. This Space requires an `HF_TOKEN` secret whose owner has accepted access to [`MuScriptor/muscriptor-medium`](https://huggingface.co/MuScriptor/muscriptor-medium).
 
 ## API

app.py

@@ -38,6 +38,7 @@ from safetensors.torch import load_file
 
 APP_ROOT = Path(__file__).resolve().parent
 ASSET_ROOT = APP_ROOT / "assets"
+EXAMPLE_ROOT = APP_ROOT / "examples"
 MODEL_ID = "MuScriptor/muscriptor-medium"
 MODEL_VARIANT = "medium"
 MAX_AUDIO_SECONDS = 60.0
@@ -580,6 +581,44 @@ RESULT_HEADING = """
 </div>
 """
 
+EXAMPLES_HEADING = """
+<div class="examples-heading">
+  <div>
+    <span class="examples-kicker">Try a session</span>
+    <h2>Start with an example</h2>
+    <p>Original procedural clips with different rhythms, textures and instrument roles.</p>
+  </div>
+  <span class="examples-hint">One click · 9–12 seconds</span>
+</div>
+"""
+
+EXAMPLE_ROWS = [
+    [
+        str(EXAMPLE_ROOT / "neon-groove.mp3"),
+        ["electric_bass", "synth_lead", "drums"],
+        False,
+        1.0,
+    ],
+    [
+        str(EXAMPLE_ROOT / "glass-arpeggio.mp3"),
+        ["electric_piano", "synth_pad", "electric_bass"],
+        False,
+        1.0,
+    ],
+    [
+        str(EXAMPLE_ROOT / "clockwork-waltz.mp3"),
+        ["chromatic_percussion", "acoustic_bass", "drums"],
+        False,
+        1.0,
+    ],
+]
+
+EXAMPLE_LABELS = [
+    "Neon Groove · synth-funk, bass & drums · 12s",
+    "Glass Arpeggio · keys, pad & sub-bass · 10s",
+    "Clockwork Waltz · bells, bass & 3/4 drums · 9s",
+]
+
 FOOTNOTE = """
 <div class="footnote">
   <span>Your audio is processed ephemerally and is not retained.</span>
@@ -652,6 +691,35 @@ with gr.Blocks(title="MuScriptor — Audio to MIDI") as demo:
                 )
                 manifest_output = gr.JSON(label="Transcription manifest", visible=False)
 
+        with gr.Column(elem_id="examples-section"):
+            gr.HTML(EXAMPLES_HEADING)
+            gr.Examples(
+                examples=EXAMPLE_ROWS,
+                inputs=[
+                    audio_input,
+                    instrument_input,
+                    use_sampling_input,
+                    temperature_input,
+                ],
+                outputs=[
+                    full_midi_output,
+                    track_files_output,
+                    visualizer_output,
+                    manifest_output,
+                ],
+                fn=transcribe_audio,
+                cache_examples=True,
+                cache_mode="lazy",
+                run_on_click=True,
+                preload=False,
+                examples_per_page=3,
+                example_labels=EXAMPLE_LABELS,
+                label=None,
+                elem_id="examples-gallery",
+                api_visibility="private",
+                api_name="load_example",
+            )
+
         gr.HTML(FOOTNOTE)
 
     transcribe_button.click(

assets/app.css

@@ -1233,3 +1233,245 @@ body::after {
     transition-duration: 0.01ms !important;
   }
 }
+
+/* Click-to-transcribe audio examples */
+#examples-section {
+  position: relative;
+  isolation: isolate;
+  overflow: hidden;
+  min-width: 0;
+  gap: 14px !important;
+  padding: clamp(16px, 2.2vw, 24px) !important;
+  border: 1px solid var(--ms-border) !important;
+  border-radius: var(--ms-radius-xl) !important;
+  background:
+    radial-gradient(680px 170px at 8% 0%, rgba(139, 124, 255, 0.085), transparent 68%),
+    linear-gradient(145deg, rgba(20, 23, 32, 0.86), rgba(13, 16, 22, 0.84)) !important;
+  box-shadow: 0 18px 54px rgba(0, 0, 0, 0.22), inset 0 1px rgba(255, 255, 255, 0.025) !important;
+  backdrop-filter: blur(20px);
+}
+
+#examples-section::before {
+  position: absolute;
+  top: 0;
+  right: 9%;
+  left: 9%;
+  height: 1px;
+  content: "";
+  pointer-events: none;
+  background: linear-gradient(90deg, transparent, rgba(193, 187, 255, 0.2), transparent);
+}
+
+.examples-heading {
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-between;
+  min-width: 0;
+  gap: 18px;
+  padding: 0 2px !important;
+  border: 0 !important;
+  background: transparent !important;
+}
+
+.examples-heading > .wrap,
+.examples-heading > .prose,
+.examples-heading .html-container {
+  width: 100%;
+  padding: 0 !important;
+  border: 0 !important;
+  background: transparent !important;
+}
+
+.examples-heading h2 {
+  margin: 0 0 5px;
+  color: var(--ms-text);
+  font-size: 0.92rem;
+  font-weight: 630;
+  letter-spacing: -0.022em;
+  line-height: 1.2;
+}
+
+.examples-heading p {
+  margin: 0;
+  color: var(--ms-muted);
+  font-size: 0.7rem;
+  line-height: 1.5;
+}
+
+.examples-heading .examples-kicker,
+.examples-heading .step-number {
+  color: #aaa1ff;
+  font-family: var(--ms-mono);
+  font-size: 0.62rem;
+  font-weight: 650;
+  letter-spacing: 0.09em;
+  text-transform: uppercase;
+}
+
+.examples-heading .examples-hint {
+  flex: none;
+  color: var(--ms-faint);
+  font-family: var(--ms-mono);
+  font-size: 0.59rem;
+  letter-spacing: 0.02em;
+  white-space: nowrap;
+}
+
+#examples-gallery,
+#examples-gallery > .wrap,
+#examples-gallery > div {
+  min-width: 0;
+  padding: 0 !important;
+  border: 0 !important;
+  background: transparent !important;
+  box-shadow: none !important;
+}
+
+/* The custom heading replaces Gradio's generic "Examples" label. */
+#examples-gallery > .label,
+#examples-gallery > .wrap > .label,
+#examples-gallery .label:first-child {
+  display: none !important;
+}
+
+#examples-gallery .gallery {
+  display: grid !important;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  width: 100% !important;
+  max-width: none !important;
+  gap: 9px !important;
+}
+
+#examples-gallery button.gallery-item,
+#examples-gallery .gallery > button {
+  position: relative;
+  display: flex !important;
+  align-items: center;
+  width: 100%;
+  min-width: 0;
+  min-height: 68px;
+  gap: 11px;
+  padding: 11px 12px !important;
+  border: 1px solid var(--ms-border) !important;
+  border-radius: 12px !important;
+  background: rgba(6, 8, 12, 0.44) !important;
+  box-shadow: inset 0 1px rgba(255, 255, 255, 0.018) !important;
+  color: var(--ms-text-soft) !important;
+  text-align: left;
+  cursor: pointer;
+  transition: transform 150ms ease, border-color 150ms ease, background 150ms ease, box-shadow 150ms ease !important;
+}
+
+#examples-gallery button.gallery-item::before,
+#examples-gallery .gallery > button::before {
+  display: grid;
+  width: 34px;
+  height: 34px;
+  flex: none;
+  border: 1px solid rgba(139, 124, 255, 0.2);
+  border-radius: 10px;
+  content: "\266A";
+  background: linear-gradient(145deg, rgba(139, 124, 255, 0.14), rgba(95, 140, 255, 0.055));
+  color: #bbb4ff;
+  font-size: 0.87rem;
+  line-height: 1;
+  place-items: center;
+}
+
+#examples-gallery button.gallery-item::after,
+#examples-gallery .gallery > button::after {
+  width: 6px;
+  height: 6px;
+  flex: none;
+  margin-left: auto;
+  border-top: 1px solid var(--ms-faint);
+  border-right: 1px solid var(--ms-faint);
+  content: "";
+  transform: rotate(45deg);
+  transition: border-color 150ms ease, transform 150ms ease;
+}
+
+#examples-gallery button.gallery-item:hover,
+#examples-gallery .gallery > button:hover {
+  border-color: rgba(139, 124, 255, 0.34) !important;
+  background: rgba(139, 124, 255, 0.075) !important;
+  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.16), inset 0 1px rgba(255, 255, 255, 0.035) !important;
+  transform: translateY(-1px);
+}
+
+#examples-gallery button.gallery-item:hover::after,
+#examples-gallery .gallery > button:hover::after {
+  border-color: #c9c4ff;
+  transform: translateX(2px) rotate(45deg);
+}
+
+#examples-gallery button.gallery-item:focus-visible,
+#examples-gallery .gallery > button:focus-visible {
+  outline: 2px solid rgba(139, 124, 255, 0.72) !important;
+  outline-offset: 2px;
+}
+
+#examples-gallery button.gallery-item:has(.selected),
+#examples-gallery .gallery > button:has(.selected) {
+  border-color: rgba(139, 124, 255, 0.42) !important;
+  background: rgba(139, 124, 255, 0.1) !important;
+}
+
+#examples-gallery .gallery-item > div,
+#examples-gallery .gallery > button > div {
+  min-width: 0 !important;
+  flex: 1;
+  padding: 0 !important;
+  color: var(--ms-text-soft) !important;
+  font-family: var(--ms-font) !important;
+  font-size: 0.75rem !important;
+  font-weight: 580;
+  letter-spacing: -0.008em;
+  line-height: 1.35;
+  white-space: normal !important;
+}
+
+#examples-gallery .gallery-item p {
+  margin: 0;
+  color: var(--ms-text-soft) !important;
+  font-size: 0.75rem !important;
+  font-weight: 580;
+  line-height: 1.35;
+}
+
+#examples-gallery .gallery-item audio {
+  width: min(100%, 210px);
+  height: 32px;
+  margin-top: 6px;
+  color-scheme: dark;
+  filter: saturate(0.72) contrast(0.94);
+}
+
+@media (max-width: 700px) {
+  #examples-section {
+    gap: 12px !important;
+    padding: 15px !important;
+    border-radius: 17px !important;
+  }
+
+  .examples-heading {
+    align-items: flex-start;
+    flex-direction: column;
+    gap: 7px;
+  }
+
+  .examples-heading .examples-hint {
+    white-space: normal;
+  }
+
+  #examples-gallery .gallery {
+    grid-template-columns: minmax(0, 1fr);
+    gap: 7px !important;
+  }
+
+  #examples-gallery button.gallery-item,
+  #examples-gallery .gallery > button {
+    min-height: 60px;
+    padding: 9px 10px !important;
+  }
+}

examples/README.md

@@ -0,0 +1,9 @@
+# Example audio
+
+These three short clips are original procedural recordings created for MuScriptor Studio. They use only synthesized oscillators and deterministically seeded noise; no third-party samples or compositions are present. They may be reused royalty-free.
+
+- `neon-groove.mp3` — 12 seconds of synth-funk lead, root-motion bass, kick, snare, and hi-hat.
+- `glass-arpeggio.mp3` — 10 seconds of drumless four-chord arpeggio, sustained pad, and sub-bass.
+- `clockwork-waltz.mp3` — 9 seconds of 3/4 bell melody, walking bass, kick, rim, and hi-hat.
+
+All files are stereo 44.1 kHz MP3 audio encoded at approximately 96 kbps.

examples/clockwork-waltz.mp3

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:92a241512dea927b85f8cd4c090b4437c1f0f0932a793a799b5d44a4e769f1ec
+size 108818

examples/glass-arpeggio.mp3

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:d2b7b88a3cfa83fd7e7495f5f1612f5bf44efa2573726d0cb798070d34d70f77
+size 120730

examples/neon-groove.mp3

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:ae0da40b49b9ebafad5ecd356545fa4a40139019d14f88a2b0002b08827316b1
+size 144867