feat: add examples and sidebar

.gitattributes

@@ -32,3 +32,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
+*.mp3 filter=lfs diff=lfs merge=lfs -text

app/examples.py

@@ -0,0 +1,58 @@
+import streamlit as st
+
+from app.helpers import load_audio_segment, plot_audio
+
+def _load_example(name: str):
+    st.markdown("<center><h3> Original </h3></center>", unsafe_allow_html=True)
+
+    cols = st.columns(2)
+    with cols[0]:
+        auseg = load_audio_segment(f"samples/{name}", "mp3")
+        plot_audio(auseg)
+    with cols[1]:
+        audio_file = open(f"samples/{name}", "rb")
+        audio_bytes = audio_file.read()
+        st.audio(audio_bytes)
+    
+    for file in ["vocals.mp3", "drums.mp3", "bass.mp3", "other.mp3"]:
+        st.markdown("<br>", unsafe_allow_html=True)
+        label = file.split(".")[0].capitalize()
+        label = {
+            "Drums": "🥁",
+            "Bass": "🎸",
+            "Other": "🎹",
+            "Vocals": "🎤",
+        }.get(label)  + " " + label
+        st.markdown("<center><h3>" + label + "</h3></center>", unsafe_allow_html=True)
+
+        cols = st.columns(2)
+        with cols[0]:
+            auseg = load_audio_segment(f"samples/{name.split('.mp3')[0]}/{file}", "mp3")
+            plot_audio(auseg)
+        with cols[1]:
+            audio_file = open(f"samples/{name.split('.mp3')[0]}/{file}", "rb")
+            audio_bytes = audio_file.read()
+            st.audio(audio_bytes)
+    
+
+def show_examples():
+    with st.columns([2, 8, 1])[1]:
+        selection = st.selectbox("Select an example music to quickly see results", ["Push - Coma Media",  "Indie Rock", "Something About You - Marilyn Ford"])
+    if selection == "Push - Coma Media":
+        _load_example("push-coma-media.mp3")
+        link = "https://pixabay.com/users/coma-media-24399569/"
+        st.markdown(
+            f"""Music by <a href="{link}">Coma-Media</a> from <a href="{link}">Pixabay</a>""",
+            unsafe_allow_html=True)
+    elif selection == "Indie Rock":
+        _load_example("indie-rock.mp3")
+        link = "https://pixabay.com/music/indie-rock-112771/"
+        st.markdown(
+            f"""Music by <a href={link}">Music_Unlimited</a> from <a href="{link}">Pixabay</a>""",
+            unsafe_allow_html=True)
+    elif selection == "Something About You - Marilyn Ford":
+        _load_example("something-about-you-marilyn-ford.mp3")
+        link = "https://pixabay.com/music/rnb-something-about-you-marilyn-ford-135781/"
+        st.markdown(
+            f"""Music by <a href="{link}">Marilyn Ford</a> from <a href="{link}">Pixabay</a>""",
+            unsafe_allow_html=True)

app/main.py

@@ -4,10 +4,12 @@ from pathlib import Path
 
 import requests
 import streamlit as st
+from app.examples import show_examples
 
 from demucs_runner import separator
 from lib.st_custom_components import st_audiorec
 from helpers import load_audio_segment, plot_audio
+from sidebar import text as text_side
 
 logging.basicConfig(
     format="%(asctime)s %(levelname)-8s %(message)s",
@@ -51,6 +53,8 @@ def url_is_valid(url):
 
 def run():
     st.markdown("<h1><center>🎶 Music Source Splitter</center></h1>", unsafe_allow_html=True)
+    st.markdown("<center><i>Hight Quality Audio Source Separation</i></center>", unsafe_allow_html=True)
+    st.sidebar.markdown(text_side, unsafe_allow_html=True)
     st.markdown("""
                 <style>
                 .st-af {
@@ -145,4 +149,7 @@ def run():
                     st.audio(audio_bytes)
                     
 if __name__ == "__main__":
-    run()
+    run()
+    st.markdown("<br><br>", unsafe_allow_html=True)
+    with st.expander("Show examples", expanded=False):
+        show_examples()

app/sidebar.py

@@ -0,0 +1,15 @@
+text = """
+<b>🎶 Music Source Splitter</b> is a web app that allows you to separate the vocals and the instrumental of a song.
+<hr>
+<h3>How does it work?</h3>
+The app uses a pretrained model called Hybrid Spectrogram and Waveform Source Separation from <a href="https://github.com/facebookresearch/demucs">facebook/htdemucs</a>.
+<br><br>
+<h3>Where can I find the code?</h3>
+The code for this app is available both on <a href="https://github.com/fabiogra/st-music-splitter">GitHub</a> and <a href="https://huggingface.co/spaces/fabiogra/st-music-splitter/tree/main">HuggingFace</a>.
+<br><br>
+<h3>Contact me</h3>
+Contact me on <a href="https://twitter.com/grsFabio">Twitter</a> or on  <a href="https://www.linkedin.com/in/fabio-grasso/">LinkedIn</a> if you have any questions or feedback.
+
+![GitHub stars](https://img.shields.io/github/stars/fabiogra/st-music-splitter?style=social)
+[![Hugging Face Spaces](https://img.shields.io/badge/%F0%9F%A4%97%20Hugging%20Face-Spaces-blue)](https://huggingface.co/spaces/fabiogra/st-music-splitter/tree/main)
+"""

samples/indie-rock.mp3

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

samples/indie-rock/bass.mp3

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

samples/indie-rock/drums.mp3

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

samples/indie-rock/other.mp3

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

samples/indie-rock/vocals.mp3

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

samples/push-coma-media.mp3

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

samples/push-coma-media/bass.mp3

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

samples/push-coma-media/drums.mp3

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

samples/push-coma-media/other.mp3

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

samples/push-coma-media/vocals.mp3

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

samples/something-about-you-marilyn-ford.mp3

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

samples/something-about-you-marilyn-ford/bass.mp3

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

samples/something-about-you-marilyn-ford/drums.mp3

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

samples/something-about-you-marilyn-ford/other.mp3

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

samples/something-about-you-marilyn-ford/vocals.mp3

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