init moseca

Dockerfile

@@ -1,23 +1,34 @@
-FROM python:3.9
+# syntax=docker/dockerfile:1
 
+FROM python:3.8
 
-RUN pip install --user --upgrade pip
 
-RUN apt-get update && apt-get install -y ffmpeg
+RUN apt-get update && \
+    apt-get install -y ffmpeg jq curl && \
+    pip install --upgrade pip
 
-COPY . .
+WORKDIR /app
 
+COPY requirements.txt .
 RUN pip install --no-cache-dir -r requirements.txt
 
-RUN mkdir -p /tmq
-RUN chmod 777 /tmp
-RUN mkdir -p /.cache
-RUN chmod 777 /.cache
+COPY scripts/ .
+COPY app ./app
+copy img ./img
+
+RUN wget --progress=bar:force:noscroll https://huggingface.co/fabiogra/baseline_vocal_remover/resolve/main/baseline.pth
+
+RUN mkdir -p /tmp/ /tmp/vocal_remover /.cache /.config && \
+    chmod 777 /tmp /tmp/vocal_remover /.cache /.config
 
 ENV PYTHONPATH "${PYTHONPATH}:/app"
 
+RUN chmod +x prepare_samples.sh
+
 EXPOSE 7860
 
 HEALTHCHECK CMD curl --fail http://localhost:7860/_stcore/health
 
-ENTRYPOINT ["streamlit", "run", "app/main.py", "--server.port=7860", "--server.address=0.0.0.0"]
+RUN ["./prepare_samples.sh"]
+
+ENTRYPOINT ["streamlit", "run", "app/header.py", "--server.port=7860", "--server.address=0.0.0.0"]

README.md

@@ -1,37 +1,210 @@
 ---
-title: Music Splitter
-emoji: 🎶
-colorFrom: indigo
-colorTo: yellow
+title: Test Moseca
+emoji: 🎤🎸🥁🎹
+colorFrom: yellow
+colorTo: purple
 sdk: docker
+app_port: 7860
+models: ["https://huggingface.co/fabiogra/baseline_vocal_remover"]
+tags: ["audio", "music", "vocal-removal", "karaoke", "music-separation", "music-source-separation"]
 pinned: true
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+<p align="center">
+  <img src="img/logo_moseca.png" alt="logo" width="70" />
+</p>
+<h2 align="center">Moseca</h1>
+<p align="center">Music Source Separation & Karaoke</p>
 
-# Music Source Splitter 🎶
-<a href="https://huggingface.co/spaces/fabiogra/st-music-splitter"><img src="https://img.shields.io/badge/🤗%20Hugging%20Face-Spaces-blue" alt="Hugging Face Spaces"></a>
 
+</a>
+<a href="https://huggingface.co/spaces/fabiogra/moseca?duplicate=true">
+<img src="https://img.shields.io/badge/🤗%20Hugging%20Face-Spaces-blue"
+alt="Hugging Face Spaces"></a>
+<a href="https://huggingface.co/spaces/fabiogra/moseca/discussions?docker=true">
+<img src="https://img.shields.io/badge/-Docker%20Image-blue?logo=docker&labelColor=white"
+alt="Docker"></a><a href="https://www.buymeacoffee.com/fabiogra">
+<img src="https://img.shields.io/badge/Buy%20me%20a%20coffee--yellow.svg?logo=buy-me-a-coffee&logoColor=orange&style=social"
+alt="Buy me a coffee"></a>
 
-This is a streamlit demo of the [Music Source Separation](https://huggingface.co/spaces/fabiogra/st-music-splitter).
+---
+
+- [Setup](#setup)
+- [About](#about)
+  - [High-Quality Stem Separation](#high-quality-stem-separation)
+  - [Advanced AI Algorithms](#advanced-ai-algorithms)
+  - [Karaoke Fun](#karaoke-fun)
+  - [Easy Deployment](#easy-deployment)
+  - [Open-Source and Free](#open-source-and-free)
+  - [Support](#support)
+- [FAQs](#faqs)
+  - [What is Moseca?](#what-is-moseca)
+  - [Are there any limitations?](#are-there-any-limitations)
+  - [How does Moseca work?](#how-does-moseca-work)
+  - [How do I use Moseca?](#how-do-i-use-moseca)
+  - [Where can I find the code for Moseca?](#where-can-i-find-the-code-for-moseca)
+  - [How can I get in touch with you?](#how-can-i-get-in-touch-with-you)
+- [Disclaimer](#disclaimer)
 
-The model can separate the vocals, drums, bass, and other from a music track.
 
-## Usage
+---
 
-You can use the demo [here](https://huggingface.co/spaces/fabiogra/st-music-splitter), or run it locally with:
 
+## Setup
+### Local environment
+Create a new environment with Python 3.8 and install the requirements:
+```bash
+pip install -r requirements.txt
+```
+then run the app with:
+```bash
+streamlit run app/header.py
+```
+### Docker
+You can also run the app with Docker:
 ```bash
-streamlit run app.py
+docker build -t moseca .
+docker run -it --rm -p 7860:7860 $(DOCKER_IMAGE_NAME)
 ```
-> **Note**: In order to run the demo locally, you need to install the dependencies with `pip install -r requirements.txt`.
+or pull the image from Hugging Face Spaces:
+```bash
+docker run -it -p 7860:7860 --platform=linux/amd64 \
+	registry.hf.space/fabiogra-moseca:latest
+```
+
+You can set the following environment variables to limit the resources used by the app:
+- ENV_LIMITATION=true
+- LIMIT_CPU=true
+---
+## About
+
+Welcome to Moseca, your personal web application designed to redefine your music experience.
+Whether you're a musician looking to remix your favorite songs, a karaoke
+enthusiast, or a music lover wanting to dive deeper into your favorite tracks,
+Moseca is for you.
+
+<br>
+
+### High-Quality Stem Separation
+
+<img title="High-Quality Stem Separation" src="https://i.imgur.com/l7H8YWL.png" width="250" ></img>
+
+
+<br>
+
+Separate up to 6 stems including 🗣voice, 🥁drums, 🔉bass, 🎸guitar,
+🎹piano (beta), and 🎶 others.
+
+<br>
+
+### Advanced AI Algorithms
+
+<img title="Advanced AI Algorithms" src="https://i.imgur.com/I8Pvdav.png" width="250" ></img>
+
+<br>
+
+Moseca utilizes state-of-the-art AI technology to extract voice or music from
+your original songs accurately.
+
+<br>
+
+### Karaoke Fun
+
+<img title="Karaoke Fun" src="https://i.imgur.com/nsn3JGV.png" width="250" ></img>
+
+<br>
+
+Engage with your favorite tunes in a whole new way!
+
+Moseca offers an immersive online karaoke experience, allowing you to search
+for any song on YouTube and remove the vocals online.
+
+Enjoy singing along with high-quality instrumentals at the comfort of your home.
+
+
+<br>
+
+### Easy Deployment
+
+
+With Moseca, you can deploy your personal Moseca app in the
+<a href="https://huggingface.co/spaces/fabiogra/moseca?duplicate=true">
+<img src="https://img.shields.io/badge/🤗%20Hugging%20Face-Spaces-blue"
+alt="Hugging Face Spaces"></a> or locally with
+[![Docker Call](https://img.shields.io/badge/-Docker%20Image-blue?logo=docker&labelColor=white)](https://huggingface.co/spaces/fabiogra/moseca/discussions?docker=true)
+in just one click.
+
+<br>
+
+### Open-Source and Free
+
+Moseca is the free and open-source alternative to lalal.ai, splitter.ai or media.io vocal remover.
+
+You can modify, distribute, and use it free of charge. I believe in the power of community
+collaboration and encourage users to contribute to our source code, making Moseca better with
+each update.
+
+
+<br>
+
+### Support
+
+- Show your support by giving a star to the GitHub repository [![GitHub stars](https://img.shields.io/github/stars/fabiogra/moseca.svg?style=social&label=Star&maxAge=2592000)](https://github.com/fabiogra/moseca).
+- If you have found an issue or have a suggestion to improve Moseca, you can open an [![GitHub issues](https://img.shields.io/github/issues/fabiogra/moseca.svg)](https://github.com/fabiogra/moseca/issues/new)
+- Enjoy Moseca? [![Buymeacoffee](https://img.shields.io/badge/Buy%20me%20a%20coffee--yellow.svg?logo=buy-me-a-coffee&logoColor=orange&style=social)](https://www.buymeacoffee.com/fabiogra)
+
+------
+
+## FAQs
+
+### What is Moseca?
+
+Moseca is an open-source web app that utilizes advanced AI technology to separate vocals and
+instrumentals from music tracks. It also provides an online karaoke experience by allowing you
+to search for any song on YouTube and remove the vocals.
+
+### Are there any limitations?
+Yes, in this environment there are some limitations regarding lenght processing
+and CPU usage to allow a smooth experience for all users.
+
+<b>If you want to <u>remove these limitations</u> you can deploy a Moseca app in your personal
+environment like in the <a href="https://huggingface.co/spaces/fabiogra/moseca?duplicate=true"><img src="https://img.shields.io/badge/🤗%20Hugging%20Face-Spaces-blue" alt="Hugging Face Spaces"></a> or locally with [![Docker Call](https://img.shields.io/badge/-Docker%20Image-blue?logo=docker&labelColor=white)](https://huggingface.co/spaces/fabiogra/moseca/discussions?docker=true)</b>
+
+### How does Moseca work?
+Moseca utilizes the Hybrid Spectrogram and Waveform Source Separation ([DEMUCS](https://github.com/facebookresearch/demucs)) model from Facebook. For fast karaoke vocal removal, Moseca uses the AI vocal remover developed by [tsurumeso](https://github.com/tsurumeso/vocal-remover).
+
+### How do I use Moseca?
+1. Upload your file: choose your song and upload it to Moseca. It supports
+a wide range of music formats for your convenience.
+
+2. Choose separation mode: opt for voice only, 4-stem or 6-stem separation
+depending on your requirement.
+
+3. Let AI do its magic: Moseca’s advanced AI will work to separate vocals
+from music in a matter of minutes, giving you high-quality, separated audio tracks.
+
+4. Download and enjoy: preview and download your separated audio tracks.
+Now you can enjoy them anytime, anywhere!
+
+
+### Where can I find the code for Moseca?
+
+The code for Moseca is readily available on
+[GitHub](https://github.com/fabiogra/moseca) and
+[Hugging Face](https://huggingface.co/spaces/fabiogra/moseca).
 
 
-## How it works
+### How can I get in touch with you?
 
-The app uses a pretrained model called Hybrid Spectrogram and Waveform Source Separation from <a href="https://github.com/facebookresearch/demucs">facebook/htdemucs</a>.
+For any questions or feedback, feel free to contact me on
+[![Twitter](https://badgen.net/badge/icon/twitter?icon=twitter&label)](https://twitter.com/grsFabio)
+or [LinkedIn](https://www.linkedin.com/in/fabio-grasso/en).
 
+------
+## Disclaimer
 
-## Acknowledgements
- - HtDemucs model from  <a href="https://github.com/facebookresearch/demucs">facebook/htdemucs</a>
- - Streamlit Audio Recorder from <a href="https://github.com/stefanrmmr/streamlit_audio_recorder">stefanrmmr/streamlit_audio_recorder</a>
+Moseca is designed to separate vocals and instruments from copyrighted music for
+legally permissible purposes, such as learning, practicing, research, or other non-commercial
+activities that fall within the scope of fair use or exceptions to copyright. As a user, you are
+responsible for ensuring that your use of separated audio tracks complies with the legal
+requirements in your jurisdiction.

app.py

@@ -1,3 +0,0 @@
-from app import main
-
-main.run()

app/_fastapi_server.py

@@ -0,0 +1,20 @@
+from fastapi import FastAPI
+from fastapi.responses import FileResponse
+from urllib.parse import unquote
+
+import os
+
+app = FastAPI()
+
+
+@app.get("/streaming/{path:path}")
+async def serve_streaming(path: str):
+    # Decode URL-encoded characters
+    decoded_path = unquote(path)
+    return FileResponse(decoded_path, filename=os.path.basename(decoded_path))
+
+
+if __name__ == "__main__":
+    import uvicorn
+
+    uvicorn.run(app, host="127.0.0.1", port=8000)

app/examples.py

@@ -1,58 +0,0 @@
-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, step=50)
-    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, step=50)
-        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", ["Something About You - Marilyn Ford", "Broke Me - FASSounds", "Indie Rock"])
-    if selection == "Broke Me - FASSounds":
-        _load_example("broke-me-fassounds.mp3")
-        link = "https://pixabay.com/users/fassounds-3433550/"
-        st.markdown(
-            f"""Music by <a href="{link}">FASSounds</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/footer.py

@@ -0,0 +1,118 @@
+import streamlit as st
+
+from streamlit.components.v1 import html
+from htbuilder import HtmlElement, div, a, p, img, styles
+from htbuilder.units import percent, px
+
+
+def image(src_as_string, **style):
+    return img(src=src_as_string, style=styles(**style))
+
+
+def link(link, text, **style):
+    return a(_href=link, _target="_blank", style=styles(**style))(text)
+
+
+def layout(*args):
+    style = """
+    <style>
+      footer {visibility: hidden;}
+     .stApp { bottom: 50px; }
+    </style>
+    """
+
+    style_div = styles(
+        position="fixed",
+        left=0,
+        bottom=0,
+        margin=px(0, 0, 0, 0),
+        width=percent(100),
+        color="black",
+        text_align="center",
+        height="auto",
+        opacity=1,
+        align_items="center",
+        flex_direction="column",
+        display="flex",
+    )
+    body = p(
+        id="myFooter",
+        style=styles(
+            margin=px(0, 0, 0, 0),
+            padding=px(5),
+            font_size="0.8rem",
+            color="rgb(51,51,51)",
+            font_family="Exo",
+        ),
+    )
+    foot = div(style=style_div)(body)
+
+    st.markdown(style, unsafe_allow_html=True)
+
+    for arg in args:
+        if isinstance(arg, str):
+            body(arg)
+
+        elif isinstance(arg, HtmlElement):
+            body(arg)
+
+    st.markdown(str(foot), unsafe_allow_html=True)
+
+    js_code = """
+    <script>
+    function rgbReverse(rgb){
+        var r = rgb[0]*0.299;
+        var g = rgb[1]*0.587;
+        var b = rgb[2]*0.114;
+
+        if ((r + g + b)/255 > 0.5){
+            return "rgb(49, 51, 63)"
+        }else{
+            return "rgb(250, 250, 250)"
+        }
+
+    };
+    var stApp_css = window.parent.document.querySelector("#root > div:nth-child(1) > div > div > div");
+    window.onload = function () {
+        var mutationObserver = new MutationObserver(function(mutations) {
+                mutations.forEach(function(mutation) {
+                    var bgColor = window.getComputedStyle(stApp_css).backgroundColor.replace("rgb(", "").replace(")", "").split(", ");
+                    var fontColor = rgbReverse(bgColor);
+                    var pTag = window.parent.document.getElementById("myFooter");
+                    pTag.style.color = fontColor;
+                });
+            });
+
+            /**Element**/
+            mutationObserver.observe(stApp_css, {
+                attributes: true,
+                characterData: true,
+                childList: true,
+                subtree: true,
+                attributeOldValue: true,
+                characterDataOldValue: true
+            });
+    }
+
+
+    </script>
+    """
+    html(js_code)
+
+
+def footer():
+    myargs = [
+        "Made in ",
+        link(
+            "https://streamlit.io/",
+            image("https://streamlit.io/images/brand/streamlit-mark-color.png", width="20px"),
+        ),
+        " with ❤️ by ",
+        link("https://twitter.com/grsFabio", "@grsFabio"),
+        "&nbsp;&nbsp;&nbsp;",
+        link(
+            "https://www.buymeacoffee.com/fabiogra",
+            image("https://i.imgur.com/YFu6MMA.png", margin="0em", align="top", width="130px"),
+        ),
+    ]
+    layout(*myargs)

app/header.py

@@ -0,0 +1,68 @@
+import streamlit as st
+
+from helpers import switch_page
+from style import CSS
+import logging
+
+from streamlit_option_menu import option_menu
+
+logging.basicConfig(
+    format="%(asctime)s %(levelname)-8s %(message)s",
+    level=logging.INFO,
+    datefmt="%Y-%m-%d %H:%M:%S",
+)
+
+
+def header(logo_and_title=True):
+    if "first_run" not in st.session_state:
+        st.session_state.first_run = True
+        for key in [
+            "search_results",
+            "selected_value",
+            "filename",
+            "executed",
+            "play_karaoke",
+            "url",
+            "random_song",
+            "last_dir",
+        ]:
+            st.session_state[key] = None
+        st.session_state.video_options = []
+        st.session_state.page = "Karaoke"
+        switch_page(st.session_state.page)
+
+    st.set_page_config(
+        page_title="Moseca - Music Separation and Karaoke - Free and Open Source alternative to lalal.ai, splitter.ai or media.io vocal remover.",
+        page_icon="img/logo_moseca.png",
+        layout="wide",
+        initial_sidebar_state="collapsed",
+    )
+    st.markdown(CSS, unsafe_allow_html=True)
+
+    options = ["Karaoke", "Separate", "About"]
+    page = option_menu(
+        menu_title=None,
+        options=options,
+        # bootrap icons
+        icons=["play-btn-fill", "file-earmark-music", "info-circle"],
+        default_index=options.index(st.session_state.page),
+        orientation="horizontal",
+        styles={"nav-link": {"padding-left": "1.5rem", "padding-right": "1.5rem"}},
+        key="",
+    )
+    if page != st.session_state.page:
+        switch_page(page)
+
+    if logo_and_title:
+        head = st.columns([5, 1, 3, 5])
+        with head[1]:
+            st.image("img/logo_moseca.png", use_column_width=False, width=80)
+        with head[2]:
+            st.markdown(
+                "<h1>moseca</h1><p><b>Music Source Separation & Karaoke</b></p>",
+                unsafe_allow_html=True,
+            )
+
+
+if __name__ == "__main__":
+    header()

app/helpers.py

@@ -1,19 +1,160 @@
-from pydub import AudioSegment
+import random
+from io import BytesIO
+import json
 
-import streamlit as st
-import plotly.graph_objs as go
-import plotly.express as px
-import pandas as pd
+import matplotlib.pyplot as plt
 import numpy as np
+import requests
+import streamlit as st
+from PIL import Image
+from pydub import AudioSegment
+from base64 import b64encode
+from pathlib import Path
+from streamlit.runtime.scriptrunner import RerunData, RerunException
+from streamlit.source_util import get_pages
+from streamlit_player import st_player
+
+extensions = ["mp3", "wav", "ogg", "flac"]  # we will look for all those file types.
+example_songs = [1, 2, 3]
+
+
+def img_to_bytes(img_path):
+    img_bytes = Path(img_path).read_bytes()
+    encoded = b64encode(img_bytes).decode()
+    return encoded
+
+
+# @st.cache_data(show_spinner=False)
+def img_to_html(img_path):
+    img_html = "<div style='display: flex; justify-content: center; align-items: center; height: 50vh;'><img src='data:image/png;base64,{}' class='img-fluid' style='max-width: 100%; max-height: 100%;' ></div>".format(
+        img_to_bytes(img_path)
+    )
+    return img_html
 
-@st.cache_data
+
+@st.cache_data(show_spinner=False)
+def url_is_valid(url):
+    if url.startswith("http") is False:
+        st.error("URL should start with http or https.")
+        return False
+    elif url.split(".")[-1] not in extensions:
+        st.error("Extension not supported.")
+        return False
+    try:
+        r = requests.get(url)
+        r.raise_for_status()
+        return True
+    except Exception:
+        st.error("URL is not valid.")
+        return False
+
+
+@st.cache_data(show_spinner=False)
 def load_audio_segment(path: str, format: str) -> AudioSegment:
     return AudioSegment.from_file(path, format=format)
 
-def plot_audio(_audio_segment: AudioSegment, title: str = None, step = 20) -> go.Figure:
+
+@st.cache_data(show_spinner=False)
+def plot_audio(_audio_segment: AudioSegment, *args, **kwargs) -> Image.Image:
     samples = _audio_segment.get_array_of_samples()
-    arr = np.array(samples[::step])
-    df = pd.DataFrame(arr)
-    fig = px.line(df, y=0, render_mode="webgl", line_shape="linear", width=1000, height=60, title=title)
-    fig.update_layout(xaxis_fixedrange=True, yaxis_fixedrange=True, yaxis_visible=False, xaxis_visible=False, hovermode=False, margin=dict(l=0, r=0, t=0, b=0))
-    st.plotly_chart(fig, use_container_width=True)
+    arr = np.array(samples)
+
+    fig, ax = plt.subplots(figsize=(10, 2))
+    ax.plot(arr, linewidth=0.05)
+    ax.set_axis_off()
+
+    # Set the background color to transparent
+    fig.patch.set_alpha(0)
+    ax.patch.set_alpha(0)
+
+    buf = BytesIO()
+    plt.savefig(buf, format="png", dpi=100, bbox_inches="tight")
+    buf.seek(0)
+    image = Image.open(buf)
+
+    plt.close(fig)
+    return image
+
+
+def get_random_song():
+    sample_songs = json.load(open("sample_songs.json"))
+    name, url = random.choice(list(sample_songs.items()))
+    return name, url
+
+
+def streamlit_player(
+    player,
+    url,
+    height,
+    is_active,
+    muted,
+    start,
+    key,
+    playback_rate=1,
+    events=None,
+    play_inline=False,
+    light=False,
+):
+    with player:
+        options = {
+            "progress_interval": 1000,
+            "playing": is_active,  # st.checkbox("Playing", False),
+            "muted": muted,
+            "light": light,
+            "play_inline": play_inline,
+            "playback_rate": playback_rate,
+            "height": height,
+            "config": {"start": start},
+            "events": events,
+        }
+        if url != "":
+            events = st_player(url, **options, key=key)
+    return events
+
+
+@st.cache_data(show_spinner=False)
+def local_audio(path, mime="audio/mp3"):
+    data = b64encode(Path(path).read_bytes()).decode()
+    return [{"type": mime, "src": f"data:{mime};base64,{data}"}]
+
+
+def _standardize_name(name: str) -> str:
+    return name.lower().replace("_", " ").strip()
+
+
+@st.cache_data(show_spinner=False)
+def switch_page(page_name: str):
+    st.session_state.page = page_name
+
+    page_name = _standardize_name(page_name)
+
+    pages = get_pages("header.py")  # OR whatever your main page is called
+
+    for page_hash, config in pages.items():
+        if _standardize_name(config["page_name"]) == page_name:
+            raise RerunException(
+                RerunData(
+                    page_script_hash=page_hash,
+                    page_name=page_name,
+                )
+            )
+
+    page_names = [_standardize_name(config["page_name"]) for config in pages.values()]
+    raise ValueError(f"Could not find page {page_name}. Must be one of {page_names}")
+
+
+def st_local_audio(pathname, key):
+    st_player(
+        local_audio(pathname),
+        **{
+            "progress_interval": 1000,
+            "playing": False,
+            "muted": False,
+            "light": False,
+            "play_inline": True,
+            "playback_rate": 1,
+            "height": 40,
+            "config": {"start": 0, "forceAudio": True, "forceHLS": True, "forceSafariHLS": True},
+        },
+        key=key,
+    )

app/main.py

@@ -1,155 +0,0 @@
-import logging
-import os
-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",
-    level=logging.DEBUG,
-    datefmt="%Y-%m-%d %H:%M:%S",
-)
-
-max_duration = 10  # in seconds
-
-model = "htdemucs"
-extensions = ["mp3", "wav", "ogg", "flac"]  # we will look for all those file types.
-two_stems = None   # only separate one stems from the rest, for instance
-
-# Options for the output audio.
-mp3 = True
-mp3_rate = 320
-float32 = False  # output as float 32 wavs, unsused if 'mp3' is True.
-int24 = False  # output as int24 wavs, unused if 'mp3' is True.
-# You cannot set both `float32 = True` and `int24 = True` !!
-
-
-out_path = Path("/tmp")
-in_path = Path("/tmp")
-
-    
-def url_is_valid(url):
-    if url.startswith("http") is False:
-        st.error("URL should start with http or https.")
-        return False
-    elif url.split(".")[-1] not in extensions:
-        st.error("Extension not supported.")
-        return False
-    try:
-        r = requests.get(url)
-        r.raise_for_status()
-        return True
-    except Exception:
-        st.error("URL is not valid.")
-        return False
-
-
-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 {
-                    font-size: 1.5rem;
-                    align-items: center;
-                    padding-right: 2rem;
-                }
-                
-                </style>
-                """,
-                unsafe_allow_html=True,
-    )
-    filename = None
-    choice =  st.radio(label=" ", options=["🔗 From URL", "⬆️ Upload File", "🎤 Record Audio"], horizontal=True)
-    if choice == "🔗 From URL":
-        url = st.text_input("Paste the URL of the audio file", key="url", help="Supported formats: mp3, wav, ogg, flac.")
-        if url != "":
-            # check if the url is valid
-            if url_is_valid(url):
-                with st.spinner("Downloading audio..."):
-                    filename = url.split("/")[-1]
-                    os.system(f"wget -O {in_path / filename} {url}")
-            
-    elif choice == "⬆️ Upload File":
-        uploaded_file = st.file_uploader("Choose a file", type=extensions, key="file", help="Supported formats: mp3, wav, ogg, flac.")
-        if uploaded_file is not None:
-            with open(in_path / uploaded_file.name, "wb") as f:
-                f.write(uploaded_file.getbuffer())    
-            filename = uploaded_file.name        
-    elif choice == "🎤 Record Audio":
-        wav_audio_data = st_audiorec()
-        if wav_audio_data is not None:
-            if wav_audio_data != b'RIFF,\x00\x00\x00WAVEfmt \x10\x00\x00\x00\x01\x00\x02\x00\x80>\x00\x00\x00\xfa\x00\x00\x04\x00\x10\x00data\x00\x00\x00\x00':
-                filename = "recording.wav"
-                with open(in_path / filename, "wb") as f:
-                    f.write(wav_audio_data)                
-                
-    if filename is not None:
-        song = load_audio_segment(in_path / filename, filename.split(".")[-1])
-        
-        n_secs = round(len(song) / 1000)
-        audio_file = open(in_path / filename, "rb")
-        audio_bytes = audio_file.read()
-        start_time = st.slider("Choose the start time", min_value=0, max_value=n_secs, step=1, value=0, help=f"Maximum duration is {max_duration} seconds.")
-        _ = st.audio(audio_bytes, start_time=start_time)
-        end_time = min(start_time + max_duration, n_secs)
-        song = song[start_time*1000:end_time*1000]
-        tot_time = end_time - start_time
-        st.info(f"Audio source will be processed from {start_time} to {end_time} seconds.", icon="⏱")
-        execute = st.button("Split Music 🎶", type="primary")
-        if execute:
-            song.export(in_path / filename, format=filename.split(".")[-1])
-            with st.spinner(f"Splitting source audio, it will take almost {round(tot_time*3.6)} seconds..."):
-                separator(
-                    tracks=[in_path / filename],
-                    out=out_path,
-                    model=model,
-                    device="cpu",
-                    shifts=1,
-                    overlap=0.5,
-                    stem=two_stems,
-                    int24=int24,
-                    float32=float32,
-                    clip_mode="rescale",
-                    mp3=mp3,
-                    mp3_bitrate=mp3_rate,
-                    jobs=os.cpu_count(),
-                    verbose=True,
-                )
-
-            last_dir = ".".join(filename.split(".")[:-1])
-            for file in ["vocals.mp3", "drums.mp3", "bass.mp3", "other.mp3"]:
-                file = out_path / Path(model) / last_dir / file
-                st.markdown("<hr>", unsafe_allow_html=True)
-                label = file.name.split(".")[0].replace("_", " ").capitalize()
-                # add emoji to label
-                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(file, "mp3")
-                   plot_audio(auseg)
-                with cols[1]:
-                    audio_file = open(file, "rb")
-                    audio_bytes = audio_file.read()
-                    st.audio(audio_bytes)
-                    
-if __name__ == "__main__":
-    run()
-    st.markdown("<br><br>", unsafe_allow_html=True)
-    with st.expander("Show examples", expanded=False):
-        show_examples()

app/pages/About.py

@@ -0,0 +1,154 @@
+import streamlit as st
+
+from header import header
+from footer import footer
+
+
+def body():
+    with st.columns([2, 3, 2])[1]:
+        st.markdown(
+            """
+        <center>
+
+        ## Welcome to Moseca, your personal web application designed to redefine your music experience.
+        <font size="3"> Whether you're a musician looking to remix your favorite songs, a karaoke
+        enthusiast, or a music lover wanting to dive deeper into your favorite tracks,
+        Moseca is for you. </font>
+
+        <br>
+
+        ### High-Quality Stem Separation
+
+        <center><img title="High-Quality Stem Separation" src="https://i.imgur.com/l7H8YWL.png" width="60%" ></img></center>
+
+
+        <br>
+
+        <font size="3"> Separate up to 6 stems including 🗣voice, 🥁drums, 🔉bass, 🎸guitar,
+        🎹piano (beta), and 🎶 others. </font>
+
+        <br>
+
+        ### Advanced AI Algorithms
+
+        <center><img title="Advanced AI Algorithms" src="https://i.imgur.com/I8Pvdav.png" width="60%" ></img></center>
+
+        <br>
+
+        <font size="3"> Moseca utilizes state-of-the-art AI technology to extract voice or music from
+        your original songs accurately. </font>
+
+        <br>
+
+        ### Karaoke Fun
+
+        <center><img title="Karaoke Fun" src="https://i.imgur.com/nsn3JGV.png" width="60%" ></img></center>
+
+        <br>
+
+        <font size="3"> Engage with your favorite tunes in a whole new way! </font>
+
+        <font size="3"> Moseca offers an immersive online karaoke experience, allowing you to search
+        for any song on YouTube and remove the vocals online. </font>
+
+        <font size="3"> Enjoy singing along with high-quality instrumentals at the comfort of your home.
+        </font>
+
+        <br>
+
+        ### Easy Deployment
+
+
+        <font size="3"> With Moseca, you can deploy your personal Moseca app in the
+        <a href="https://huggingface.co/spaces/fabiogra/moseca?duplicate=true">
+        <img src="https://img.shields.io/badge/🤗%20Hugging%20Face-Spaces-blue"
+        alt="Hugging Face Spaces"></a> or locally with </font>
+        [![Docker Call](https://img.shields.io/badge/-Docker%20Image-blue?logo=docker&labelColor=white)](https://huggingface.co/spaces/fabiogra/moseca/discussions?docker=true)
+        <font size="3"> in just one click. </font>
+
+        <br>
+
+        ### Open-Source and Free
+
+        <font size="3"> Moseca is the free and open-source alternative to lalal.ai, splitter.ai or media.io vocal remover.
+
+        You can modify, distribute, and use it free of charge. I believe in the power of community
+        collaboration and encourage users to contribute to our source code, making Moseca better with
+        each update.
+        </font>
+
+        <br>
+
+        ### Support
+
+        - <font size="3"> Show your support by giving a star to the GitHub repository</font> [![GitHub stars](https://img.shields.io/github/stars/fabiogra/moseca.svg?style=social&label=Star&maxAge=2592000)](https://github.com/fabiogra/moseca).
+        - <font size="3"> If you have found an issue or have a suggestion to improve Moseca, you can open an</font> [![GitHub issues](https://img.shields.io/github/issues/fabiogra/moseca.svg)](https://github.com/fabiogra/moseca/issues/new)
+        - <font size="3"> Enjoy Moseca?</font> [![Buymeacoffee](https://img.shields.io/badge/Buy%20me%20a%20coffee--yellow.svg?logo=buy-me-a-coffee&logoColor=orange&style=social)](https://www.buymeacoffee.com/fabiogra)
+
+        ------
+
+        ## FAQs
+
+        ### What is Moseca?
+
+        <font size="3"> Moseca is an open-source web app that utilizes advanced AI technology to separate vocals and
+        instrumentals from music tracks. It also provides an online karaoke experience by allowing you
+        to search for any song on YouTube and remove the vocals.</font>
+
+        ### Are there any limitations?
+        <font size="3">Yes, in this environment there are some limitations regarding lenght processing
+        and CPU usage to allow a smooth experience for all users.
+
+        <b>If you want to <u>remove these limitations</u> you can deploy a Moseca app in your personal
+        environment like in the <a href="https://huggingface.co/spaces/fabiogra/moseca?duplicate=true"><img src="https://img.shields.io/badge/🤗%20Hugging%20Face-Spaces-blue" alt="Hugging Face Spaces"></a> or locally with [![Docker Call](https://img.shields.io/badge/-Docker%20Image-blue?logo=docker&labelColor=white)](https://huggingface.co/spaces/fabiogra/moseca/discussions?docker=true)</b>
+        </font>
+        ### How does Moseca work?
+        <font size="3"> Moseca utilizes the Hybrid Spectrogram and Waveform Source Separation ([DEMUCS](https://github.com/facebookresearch/demucs)) model from Facebook. For fast karaoke vocal removal, Moseca uses the AI vocal remover developed by [tsurumeso](https://github.com/tsurumeso/vocal-remover).
+        </font>
+        ### How do I use Moseca?
+        <font size="3">1. Upload your file: choose your song and upload it to Moseca. It supports
+        a wide range of music formats for your convenience.</font>
+
+        <font size="3">2. Choose separation mode: opt for voice only, 4-stem or 6-stem separation
+        depending on your requirement.</font>
+
+        <font size="3">3. Let AI do its magic: Moseca’s advanced AI will work to separate vocals
+        from music in a matter of minutes, giving you high-quality, separated audio tracks.</font>
+
+        <font size="3">4. Download and enjoy: preview and download your separated audio tracks.
+        Now you can enjoy them anytime, anywhere! </font>
+        </font>
+
+        ### Where can I find the code for Moseca?
+
+        <font size="3">The code for Moseca is readily available on
+        [GitHub](https://github.com/fabiogra/moseca) and
+        [Hugging Face](https://huggingface.co/spaces/fabiogra/moseca).
+        </font>
+
+        ### How can I get in touch with you?
+
+        <font size="3">For any questions or feedback, feel free to contact me on </font>
+        [![Twitter](https://badgen.net/badge/icon/twitter?icon=twitter&label)](https://twitter.com/grsFabio)
+        <font size="3">or</font> [LinkedIn](https://www.linkedin.com/in/fabio-grasso/en).
+
+        ------
+        ## Disclaimer
+
+        <font size="3">Moseca is designed to separate vocals and instruments from copyrighted music for
+        legally permissible purposes, such as learning, practicing, research, or other non-commercial
+        activities that fall within the scope of fair use or exceptions to copyright. As a user, you are
+        responsible for ensuring that your use of separated audio tracks complies with the legal
+        requirements in your jurisdiction.
+        </font>
+
+        </center>
+        """,
+            unsafe_allow_html=True,
+        )
+
+
+if __name__ == "__main__":
+    header(logo_and_title=False)
+    body()
+    footer()

app/pages/Karaoke.py

@@ -0,0 +1,176 @@
+from pathlib import Path
+
+import streamlit as st
+from streamlit_player import st_player
+from streamlit_searchbox import st_searchbox
+
+from service.youtube import (
+    get_youtube_url,
+    search_youtube,
+    download_audio_from_youtube,
+)
+from helpers import (
+    get_random_song,
+    load_audio_segment,
+    streamlit_player,
+    local_audio,
+)
+
+from service.vocal_remover.runner import separate, load_model
+from footer import footer
+from header import header
+
+
+out_path = Path("/tmp")
+in_path = Path("/tmp")
+
+sess = st.session_state
+
+
+def show_karaoke(pathname, initial_player):
+    cols = st.columns([1, 1, 3, 1])
+    with cols[1]:
+        sess.delay = st.slider(
+            label="Start delay in karaoke (seconds)",
+            key="delay_slider",
+            value=2,
+            min_value=0,
+            max_value=5,
+            help="Synchronize youtube player with karaoke audio by adding a delay to the youtube player.",
+        )
+    with cols[2]:
+        events = st_player(
+            local_audio(pathname),
+            **{
+                "progress_interval": 1000,
+                "playing": False,
+                "muted": False,
+                "light": False,
+                "play_inline": True,
+                "playback_rate": 1,
+                "height": 40,
+                "config": {
+                    "start": 0,
+                    "forceAudio": True,
+                },
+                "events": ["onProgress", "onPlay"],
+            },
+            key="karaoke_player",
+        )
+    st.markdown(
+        "<center>⬆️ Click on the play button to start karaoke<center>",
+        unsafe_allow_html=True,
+    )
+    with st.columns([1, 4, 1])[1]:
+        if events.name == "onProgress" and events.data["playedSeconds"] > 0:
+            initial_player.empty()
+            st_player(
+                sess.url + f"&t={sess.delay}s",
+                **{
+                    "progress_interval": 1000,
+                    "playing": True,
+                    "muted": True,
+                    "light": False,
+                    "play_inline": False,
+                    "playback_rate": 1,
+                    "height": 250,
+                    "events": None,
+                },
+                key="yt_muted_player",
+            )
+
+
+def body():
+    st.markdown("<center>Search for a song on YouTube<center>", unsafe_allow_html=True)
+    yt_cols = st.columns([1, 3, 2, 1])
+    with yt_cols[1]:
+        selected_value = st_searchbox(
+            search_youtube,
+            label=None,
+            placeholder="Search by name...",
+            clear_on_submit=True,
+            key="yt_searchbox",
+        )
+        if selected_value is not None and selected_value in sess.video_options:
+            sess.random_song = None
+
+            if selected_value != sess.selected_value:  # New song selected
+                sess.executed = False
+
+            sess.selected_value = selected_value
+            sess.url = get_youtube_url(selected_value)
+
+    with yt_cols[2]:
+        if st.button("🎲 Random song", use_container_width=True):
+            sess.last_dir, sess.url = get_random_song()
+            sess.random_song = True
+            sess.video_options = []
+            sess.executed = False
+
+    if sess.url is not None:
+        player_cols = st.columns([2, 2, 1, 1], gap="medium")
+        with player_cols[1]:
+            player = st.empty()
+            streamlit_player(
+                player,
+                sess.url,
+                height=200,
+                is_active=False,
+                muted=False,
+                start=0,
+                key="yt_player",
+                events=["onProgress"],
+            )
+
+            # Separate vocals
+            cols_before_sep = st.columns([2, 4, 2])
+            with cols_before_sep[1]:
+                execute_button = st.empty()
+                execute = execute_button.button(
+                    "Confirm and remove vocals 🎤 🎶",
+                    type="primary",
+                    use_container_width=True,
+                )
+            if execute or sess.executed:
+                execute_button.empty()
+                player.empty()
+                if execute:
+                    sess.executed = False
+                if sess.random_song is None:
+                    if not sess.executed:
+                        cols_spinners = st.columns([1, 2, 1])
+                        with cols_spinners[1]:
+                            with st.spinner(
+                                "Separating vocals from music, it will take a while..."
+                            ):
+                                sess.filename = download_audio_from_youtube(sess.url, in_path)
+                                if sess.filename is None:
+                                    st.stop()
+                                sess.url = None
+                                filename = sess.filename
+                                song = load_audio_segment(
+                                    in_path / filename, filename.split(".")[-1]
+                                )
+                                song.export(in_path / filename, format=filename.split(".")[-1])
+                                model, device = load_model(pretrained_model="baseline.pth")
+                                separate(
+                                    input=in_path / filename,
+                                    model=model,
+                                    device=device,
+                                    output_dir=out_path,
+                                    only_no_vocals=True,
+                                )
+                                selected_value = None
+                                sess.last_dir = ".".join(sess.filename.split(".")[:-1])
+                                sess.executed = True
+                else:
+                    sess.executed = True
+
+        if sess.executed:
+            show_karaoke(out_path / "vocal_remover" / sess.last_dir / "no_vocals.mp3", player)
+
+
+if __name__ == "__main__":
+    header()
+    body()
+    footer()

app/pages/Separate.py

@@ -0,0 +1,203 @@
+import os
+from pathlib import Path
+
+import streamlit as st
+from streamlit_option_menu import option_menu
+
+from service.demucs_runner import separator
+from helpers import (
+    load_audio_segment,
+    plot_audio,
+    st_local_audio,
+    url_is_valid,
+)
+
+from service.vocal_remover.runner import separate, load_model
+
+from footer import footer
+from header import header
+
+label_sources = {
+    "no_vocals.mp3": "🎶 Instrumental",
+    "vocals.mp3": "🎤 Vocals",
+    "drums.mp3": "🥁 Drums",
+    "bass.mp3": "🎸 Bass",
+    "guitar.mp3": "🎸 Guitar",
+    "piano.mp3": "🎹 Piano",
+    "other.mp3": "🎶 Other",
+}
+
+extensions = ["mp3", "wav", "ogg", "flac"]
+
+
+out_path = Path("/tmp")
+in_path = Path("/tmp")
+
+
+def reset_execution():
+    st.session_state.executed = False
+
+
+def body():
+    filename = None
+    cols = st.columns([1, 3, 2, 1])
+    with cols[1]:
+        with st.columns([1, 5, 1])[1]:
+            option = option_menu(
+                menu_title=None,
+                options=["Upload File", "From URL"],
+                icons=["cloud-upload-fill", "link-45deg"],
+                orientation="horizontal",
+                styles={"container": {"width": "100%", "margin": "0px", "padding": "0px"}},
+                key="option_separate",
+            )
+        if option == "Upload File":
+            uploaded_file = st.file_uploader(
+                "Choose a file",
+                type=extensions,
+                key="file",
+                help="Supported formats: mp3, wav, ogg, flac.",
+            )
+            if uploaded_file is not None:
+                with open(in_path / uploaded_file.name, "wb") as f:
+                    f.write(uploaded_file.getbuffer())
+                filename = uploaded_file.name
+                st_local_audio(in_path / filename, key="input_upload_file")
+
+        elif option == "From URL":  # TODO: show examples
+            url = st.text_input(
+                "Paste the URL of the audio file",
+                key="url_input",
+                help="Supported formats: mp3, wav, ogg, flac.",
+            )
+            if url != "":
+                if url_is_valid(url):
+                    with st.spinner("Downloading audio..."):
+                        filename = url.split("/")[-1]
+                        os.system(f"wget -O {in_path / filename} {url}")
+                st_local_audio(in_path / filename, key="input_from_url")
+    with cols[2]:
+        separation_mode = st.selectbox(
+            "Choose the separation mode",
+            [
+                "Vocals & Instrumental (Faster)",
+                "Vocals & Instrumental (High Quality, Slower)",
+                "Vocals, Drums, Bass & Other (Slower)",
+                "Vocal, Drums, Bass, Guitar, Piano & Other (Slowest)",
+            ],
+            on_change=reset_execution(),
+            key="separation_mode",
+        )
+        if separation_mode == "Vocals & Instrumental (Faster)":
+            max_duration = 30
+        else:
+            max_duration = 15
+
+    if filename is not None:
+        song = load_audio_segment(in_path / filename, filename.split(".")[-1])
+        n_secs = round(len(song) / 1000)
+        if os.environ.get("ENV_LIMITATION", False):
+            with cols[2]:
+                start_time = st.number_input(
+                    "Choose the start time",
+                    min_value=0,
+                    max_value=n_secs,
+                    step=1,
+                    value=0,
+                    help=f"Maximum duration is {max_duration} seconds for this separation mode. Duplicate this space to remove any limit.",
+                    format="%d",
+                )
+                st.session_state.start_time = start_time
+                end_time = min(start_time + max_duration, n_secs)
+                song = song[start_time * 1000 : end_time * 1000]
+                st.info(
+                    f"Audio source will be processed from {start_time} to {end_time} seconds. Duplicate this space to remove any limit.",
+                    icon="⏱",
+                )
+        else:
+            start_time = 0
+            end_time = n_secs
+        with st.columns([1, 3, 1])[1]:
+            execute = st.button("Split Music 🎶", type="primary", use_container_width=True)
+            if execute or st.session_state.executed:
+                if execute:
+                    st.session_state.executed = False
+
+                if not st.session_state.executed:
+                    song.export(in_path / filename, format=filename.split(".")[-1])
+                    with st.spinner("Separating source audio, it will take a while..."):
+                        if separation_mode == "Vocals & Instrumental (Faster)":
+                            model_name = "vocal_remover"
+                            model, device = load_model(pretrained_model="baseline.pth")
+                            separate(
+                                input=in_path / filename,
+                                model=model,
+                                device=device,
+                                output_dir=out_path,
+                            )
+                        else:
+                            stem = None
+                            model_name = "htdemucs"
+                            if (
+                                separation_mode
+                                == "Vocal, Drums, Bass, Guitar, Piano & Other (Slowest)"
+                            ):
+                                model_name = "htdemucs_6s"
+                            elif separation_mode == "Vocals & Instrumental (High Quality, Slower)":
+                                stem = "vocals"
+
+                            separator(
+                                tracks=[in_path / filename],
+                                out=out_path,
+                                model=model_name,
+                                shifts=1,
+                                overlap=0.5,
+                                stem=stem,
+                                int24=False,
+                                float32=False,
+                                clip_mode="rescale",
+                                mp3=True,
+                                mp3_bitrate=320,
+                                verbose=True,
+                                start_time=start_time,
+                                end_time=end_time,
+                            )
+                last_dir = ".".join(filename.split(".")[:-1])
+                filename = None
+                st.session_state.executed = True
+
+                def get_sources(path):
+                    sources = {}
+                    for file in [
+                        "no_vocals.mp3",
+                        "vocals.mp3",
+                        "drums.mp3",
+                        "bass.mp3",
+                        "guitar.mp3",
+                        "piano.mp3",
+                        "other.mp3",
+                    ]:
+                        fullpath = path / file
+                        if fullpath.exists():
+                            sources[file] = fullpath
+                    return sources
+
+                sources = get_sources(out_path / Path(model_name) / last_dir)
+                tab_sources = st.tabs([f"**{label_sources.get(k)}**" for k in sources.keys()])
+                for i, (file, pathname) in enumerate(sources.items()):
+                    with tab_sources[i]:
+                        cols = st.columns(2)
+                        with cols[0]:
+                            auseg = load_audio_segment(pathname, "mp3")
+                            st.image(
+                                plot_audio(auseg, title="", file=file),
+                                use_column_width="always",
+                            )
+                        with cols[1]:
+                            st_local_audio(pathname, key=f"output_{file}")
+
+
+if __name__ == "__main__":
+    header()
+    body()
+    footer()

app/{demucs_runner.py → service/demucs_runner.py}

@@ -2,7 +2,7 @@ import argparse
 import sys
 from pathlib import Path
 from typing import List
-
+import os
 from dora.log import fatal
 import torch as th
 
@@ -11,12 +11,14 @@ from demucs.audio import save_audio
 from demucs.pretrained import get_model_from_args, ModelLoadingError
 from demucs.separate import load_track
 
+import streamlit as st
+
 
+@st.cache_data(show_spinner=False)
 def separator(
     tracks: List[Path],
     out: Path,
     model: str,
-    device: str,
     shifts: int,
     overlap: float,
     stem: str,
@@ -25,27 +27,43 @@ def separator(
     clip_mode: str,
     mp3: bool,
     mp3_bitrate: int,
-    jobs: int,
     verbose: bool,
+    *args,
+    **kwargs,
 ):
     """Separate the sources for the given tracks
 
     Args:
         tracks (Path): Path to tracks
-        out (Path): Folder where to put extracted tracks. A subfolder with the model name will be created.
+        out (Path): Folder where to put extracted tracks. A subfolder with the model name will be
+                    created.
         model (str): Model name
-        device (str): Device to use, default is cuda if available else cpu
-        shifts (int): Number of random shifts for equivariant stabilization. Increase separation time but improves quality for Demucs. 10 was used in the original paper.
+        shifts (int): Number of random shifts for equivariant stabilization.
+                      Increase separation time but improves quality for Demucs.
+                      10 was used in the original paper.
         overlap (float): Overlap
         stem (str): Only separate audio into {STEM} and no_{STEM}.
         int24 (bool): Save wav output as 24 bits wav.
         float32 (bool): Save wav output as float32 (2x bigger).
-        clip_mode (str): Strategy for avoiding clipping: rescaling entire signal if necessary  (rescale) or hard clipping (clamp).
+        clip_mode (str): Strategy for avoiding clipping: rescaling entire signal if necessary
+                        (rescale) or hard clipping (clamp).
         mp3 (bool): Convert the output wavs to mp3.
         mp3_bitrate (int): Bitrate of converted mp3.
-        jobs (int): Number of jobs. This can increase memory usage but will be much faster when multiple cores are available.
         verbose (bool): Verbose
     """
+
+    if os.environ.get("LIMIT_CPU", False):
+        th.set_num_threads(1)
+        jobs = 1
+    else:
+        # Number of jobs. This can increase memory usage but will be much faster when
+        # multiple cores are available.
+        jobs = os.cpu_count()
+
+    if th.cuda.is_available():
+        device = "cuda"
+    else:
+        device = "cpu"
     args = argparse.Namespace()
     args.tracks = tracks
     args.out = out

app/service/vocal_remover/layers.py

@@ -0,0 +1,126 @@
+import torch
+from torch import nn
+import torch.nn.functional as F
+
+
+def crop_center(h1, h2):
+    h1_shape = h1.size()
+    h2_shape = h2.size()
+
+    if h1_shape[3] == h2_shape[3]:
+        return h1
+    elif h1_shape[3] < h2_shape[3]:
+        raise ValueError("h1_shape[3] must be greater than h2_shape[3]")
+
+    s_time = (h1_shape[3] - h2_shape[3]) // 2
+    e_time = s_time + h2_shape[3]
+    h1 = h1[:, :, :, s_time:e_time]
+
+    return h1
+
+
+class Conv2DBNActiv(nn.Module):
+    def __init__(self, nin, nout, ksize=3, stride=1, pad=1, dilation=1, activ=nn.ReLU):
+        super(Conv2DBNActiv, self).__init__()
+        self.conv = nn.Sequential(
+            nn.Conv2d(
+                nin,
+                nout,
+                kernel_size=ksize,
+                stride=stride,
+                padding=pad,
+                dilation=dilation,
+                bias=False,
+            ),
+            nn.BatchNorm2d(nout),
+            activ(),
+        )
+
+    def __call__(self, x):
+        return self.conv(x)
+
+
+class Encoder(nn.Module):
+    def __init__(self, nin, nout, ksize=3, stride=1, pad=1, activ=nn.LeakyReLU):
+        super(Encoder, self).__init__()
+        self.conv1 = Conv2DBNActiv(nin, nout, ksize, stride, pad, activ=activ)
+        self.conv2 = Conv2DBNActiv(nout, nout, ksize, 1, pad, activ=activ)
+
+    def __call__(self, x):
+        h = self.conv1(x)
+        h = self.conv2(h)
+
+        return h
+
+
+class Decoder(nn.Module):
+    def __init__(self, nin, nout, ksize=3, stride=1, pad=1, activ=nn.ReLU, dropout=False):
+        super(Decoder, self).__init__()
+        self.conv1 = Conv2DBNActiv(nin, nout, ksize, 1, pad, activ=activ)
+        self.dropout = nn.Dropout2d(0.1) if dropout else None
+
+    def __call__(self, x, skip=None):
+        x = F.interpolate(x, scale_factor=2, mode="bilinear", align_corners=True)
+
+        if skip is not None:
+            skip = crop_center(skip, x)
+            x = torch.cat([x, skip], dim=1)
+
+        h = self.conv1(x)
+        # h = self.conv2(h)
+
+        if self.dropout is not None:
+            h = self.dropout(h)
+
+        return h
+
+
+class ASPPModule(nn.Module):
+    def __init__(self, nin, nout, dilations=(4, 8, 12), activ=nn.ReLU, dropout=False):
+        super(ASPPModule, self).__init__()
+        self.conv1 = nn.Sequential(
+            nn.AdaptiveAvgPool2d((1, None)),
+            Conv2DBNActiv(nin, nout, 1, 1, 0, activ=activ),
+        )
+        self.conv2 = Conv2DBNActiv(nin, nout, 1, 1, 0, activ=activ)
+        self.conv3 = Conv2DBNActiv(nin, nout, 3, 1, dilations[0], dilations[0], activ=activ)
+        self.conv4 = Conv2DBNActiv(nin, nout, 3, 1, dilations[1], dilations[1], activ=activ)
+        self.conv5 = Conv2DBNActiv(nin, nout, 3, 1, dilations[2], dilations[2], activ=activ)
+        self.bottleneck = Conv2DBNActiv(nout * 5, nout, 1, 1, 0, activ=activ)
+        self.dropout = nn.Dropout2d(0.1) if dropout else None
+
+    def forward(self, x):
+        _, _, h, w = x.size()
+        feat1 = F.interpolate(self.conv1(x), size=(h, w), mode="bilinear", align_corners=True)
+        feat2 = self.conv2(x)
+        feat3 = self.conv3(x)
+        feat4 = self.conv4(x)
+        feat5 = self.conv5(x)
+        out = torch.cat((feat1, feat2, feat3, feat4, feat5), dim=1)
+        out = self.bottleneck(out)
+
+        if self.dropout is not None:
+            out = self.dropout(out)
+
+        return out
+
+
+class LSTMModule(nn.Module):
+    def __init__(self, nin_conv, nin_lstm, nout_lstm):
+        super(LSTMModule, self).__init__()
+        self.conv = Conv2DBNActiv(nin_conv, 1, 1, 1, 0)
+        self.lstm = nn.LSTM(input_size=nin_lstm, hidden_size=nout_lstm // 2, bidirectional=True)
+        self.dense = nn.Sequential(
+            nn.Linear(nout_lstm, nin_lstm), nn.BatchNorm1d(nin_lstm), nn.ReLU()
+        )
+
+    def forward(self, x):
+        N, _, nbins, nframes = x.size()
+        h = self.conv(x)[:, 0]  # N, nbins, nframes
+        h = h.permute(2, 0, 1)  # nframes, N, nbins
+        h, _ = self.lstm(h)
+        h = self.dense(h.reshape(-1, h.size()[-1]))  # nframes * N, nbins
+        h = h.reshape(nframes, N, 1, nbins)
+        h = h.permute(1, 2, 3, 0)
+
+        return h

app/service/vocal_remover/nets.py

@@ -0,0 +1,125 @@
+import torch
+from torch import nn
+import torch.nn.functional as F
+
+from app.service.vocal_remover import layers
+
+
+class BaseNet(nn.Module):
+    def __init__(self, nin, nout, nin_lstm, nout_lstm, dilations=((4, 2), (8, 4), (12, 6))):
+        super(BaseNet, self).__init__()
+        self.enc1 = layers.Conv2DBNActiv(nin, nout, 3, 1, 1)
+        self.enc2 = layers.Encoder(nout, nout * 2, 3, 2, 1)
+        self.enc3 = layers.Encoder(nout * 2, nout * 4, 3, 2, 1)
+        self.enc4 = layers.Encoder(nout * 4, nout * 6, 3, 2, 1)
+        self.enc5 = layers.Encoder(nout * 6, nout * 8, 3, 2, 1)
+
+        self.aspp = layers.ASPPModule(nout * 8, nout * 8, dilations, dropout=True)
+
+        self.dec4 = layers.Decoder(nout * (6 + 8), nout * 6, 3, 1, 1)
+        self.dec3 = layers.Decoder(nout * (4 + 6), nout * 4, 3, 1, 1)
+        self.dec2 = layers.Decoder(nout * (2 + 4), nout * 2, 3, 1, 1)
+        self.lstm_dec2 = layers.LSTMModule(nout * 2, nin_lstm, nout_lstm)
+        self.dec1 = layers.Decoder(nout * (1 + 2) + 1, nout * 1, 3, 1, 1)
+
+    def __call__(self, x):
+        e1 = self.enc1(x)
+        e2 = self.enc2(e1)
+        e3 = self.enc3(e2)
+        e4 = self.enc4(e3)
+        e5 = self.enc5(e4)
+
+        h = self.aspp(e5)
+
+        h = self.dec4(h, e4)
+        h = self.dec3(h, e3)
+        h = self.dec2(h, e2)
+        h = torch.cat([h, self.lstm_dec2(h)], dim=1)
+        h = self.dec1(h, e1)
+
+        return h
+
+
+class CascadedNet(nn.Module):
+    def __init__(self, n_fft, nout=32, nout_lstm=128):
+        super(CascadedNet, self).__init__()
+        self.max_bin = n_fft // 2
+        self.output_bin = n_fft // 2 + 1
+        self.nin_lstm = self.max_bin // 2
+        self.offset = 64
+
+        self.stg1_low_band_net = nn.Sequential(
+            BaseNet(2, nout // 2, self.nin_lstm // 2, nout_lstm),
+            layers.Conv2DBNActiv(nout // 2, nout // 4, 1, 1, 0),
+        )
+        self.stg1_high_band_net = BaseNet(2, nout // 4, self.nin_lstm // 2, nout_lstm // 2)
+
+        self.stg2_low_band_net = nn.Sequential(
+            BaseNet(nout // 4 + 2, nout, self.nin_lstm // 2, nout_lstm),
+            layers.Conv2DBNActiv(nout, nout // 2, 1, 1, 0),
+        )
+        self.stg2_high_band_net = BaseNet(
+            nout // 4 + 2, nout // 2, self.nin_lstm // 2, nout_lstm // 2
+        )
+
+        self.stg3_full_band_net = BaseNet(3 * nout // 4 + 2, nout, self.nin_lstm, nout_lstm)
+
+        self.out = nn.Conv2d(nout, 2, 1, bias=False)
+        self.aux_out = nn.Conv2d(3 * nout // 4, 2, 1, bias=False)
+
+    def forward(self, x):
+        x = x[:, :, : self.max_bin]
+
+        bandw = x.size()[2] // 2
+        l1_in = x[:, :, :bandw]
+        h1_in = x[:, :, bandw:]
+        l1 = self.stg1_low_band_net(l1_in)
+        h1 = self.stg1_high_band_net(h1_in)
+        aux1 = torch.cat([l1, h1], dim=2)
+
+        l2_in = torch.cat([l1_in, l1], dim=1)
+        h2_in = torch.cat([h1_in, h1], dim=1)
+        l2 = self.stg2_low_band_net(l2_in)
+        h2 = self.stg2_high_band_net(h2_in)
+        aux2 = torch.cat([l2, h2], dim=2)
+
+        f3_in = torch.cat([x, aux1, aux2], dim=1)
+        f3 = self.stg3_full_band_net(f3_in)
+
+        mask = torch.sigmoid(self.out(f3))
+        mask = F.pad(
+            input=mask,
+            pad=(0, 0, 0, self.output_bin - mask.size()[2]),
+            mode="replicate",
+        )
+
+        if self.training:
+            aux = torch.cat([aux1, aux2], dim=1)
+            aux = torch.sigmoid(self.aux_out(aux))
+            aux = F.pad(
+                input=aux,
+                pad=(0, 0, 0, self.output_bin - aux.size()[2]),
+                mode="replicate",
+            )
+            return mask, aux
+        else:
+            return mask
+
+    def predict_mask(self, x):
+        mask = self.forward(x)
+
+        if self.offset > 0:
+            mask = mask[:, :, :, self.offset : -self.offset]
+            assert mask.size()[3] > 0
+
+        return mask
+
+    def predict(self, x):
+        mask = self.forward(x)
+        pred_mag = x * mask
+
+        if self.offset > 0:
+            pred_mag = pred_mag[:, :, :, self.offset : -self.offset]
+            assert pred_mag.size()[3] > 0
+
+        return pred_mag

app/service/vocal_remover/runner.py

@@ -0,0 +1,234 @@
+import os
+import logging
+import librosa
+import numpy as np
+import soundfile as sf
+import torch
+from stqdm import stqdm
+import streamlit as st
+from pydub import AudioSegment
+
+from app.service.vocal_remover import nets
+
+
+if os.environ.get("LIMIT_CPU", False):
+    torch.set_num_threads(1)
+
+
+def merge_artifacts(y_mask, thres=0.05, min_range=64, fade_size=32):
+    if min_range < fade_size * 2:
+        raise ValueError("min_range must be >= fade_size * 2")
+
+    idx = np.where(y_mask.min(axis=(0, 1)) > thres)[0]
+    start_idx = np.insert(idx[np.where(np.diff(idx) != 1)[0] + 1], 0, idx[0])
+    end_idx = np.append(idx[np.where(np.diff(idx) != 1)[0]], idx[-1])
+    artifact_idx = np.where(end_idx - start_idx > min_range)[0]
+    weight = np.zeros_like(y_mask)
+    if len(artifact_idx) > 0:
+        start_idx = start_idx[artifact_idx]
+        end_idx = end_idx[artifact_idx]
+        old_e = None
+        for s, e in zip(start_idx, end_idx):
+            if old_e is not None and s - old_e < fade_size:
+                s = old_e - fade_size * 2
+
+            if s != 0:
+                weight[:, :, s : s + fade_size] = np.linspace(0, 1, fade_size)
+            else:
+                s -= fade_size
+
+            if e != y_mask.shape[2]:
+                weight[:, :, e - fade_size : e] = np.linspace(1, 0, fade_size)
+            else:
+                e += fade_size
+
+            weight[:, :, s + fade_size : e - fade_size] = 1
+            old_e = e
+
+    v_mask = 1 - y_mask
+    y_mask += weight * v_mask
+
+    return y_mask
+
+
+def make_padding(width, cropsize, offset):
+    left = offset
+    roi_size = cropsize - offset * 2
+    if roi_size == 0:
+        roi_size = cropsize
+    right = roi_size - (width % roi_size) + left
+
+    return left, right, roi_size
+
+
+def wave_to_spectrogram(wave, hop_length, n_fft):
+    wave_left = np.asfortranarray(wave[0])
+    wave_right = np.asfortranarray(wave[1])
+
+    spec_left = librosa.stft(wave_left, n_fft=n_fft, hop_length=hop_length)
+    spec_right = librosa.stft(wave_right, n_fft=n_fft, hop_length=hop_length)
+    spec = np.asfortranarray([spec_left, spec_right])
+
+    return spec
+
+
+def spectrogram_to_wave(spec, hop_length=1024):
+    if spec.ndim == 2:
+        wave = librosa.istft(spec, hop_length=hop_length)
+    elif spec.ndim == 3:
+        spec_left = np.asfortranarray(spec[0])
+        spec_right = np.asfortranarray(spec[1])
+
+        wave_left = librosa.istft(spec_left, hop_length=hop_length)
+        wave_right = librosa.istft(spec_right, hop_length=hop_length)
+        wave = np.asfortranarray([wave_left, wave_right])
+
+    return wave
+
+
+class Separator(object):
+    def __init__(self, model, device, batchsize, cropsize, postprocess=False, progress_bar=None):
+        self.model = model
+        self.offset = model.offset
+        self.device = device
+        self.batchsize = batchsize
+        self.cropsize = cropsize
+        self.postprocess = postprocess
+        self.progress_bar = progress_bar
+
+    def _separate(self, X_mag_pad, roi_size):
+        X_dataset = []
+        patches = (X_mag_pad.shape[2] - 2 * self.offset) // roi_size
+        for i in range(patches):
+            start = i * roi_size
+            X_mag_crop = X_mag_pad[:, :, start : start + self.cropsize]
+            X_dataset.append(X_mag_crop)
+
+        X_dataset = np.asarray(X_dataset)
+
+        self.model.eval()
+        with torch.no_grad():
+            mask = []
+            # To reduce the overhead, dataloader is not used.
+            for i in stqdm(
+                range(0, patches, self.batchsize),
+                st_container=self.progress_bar,
+                gui=False,
+            ):
+                X_batch = X_dataset[i : i + self.batchsize]
+                X_batch = torch.from_numpy(X_batch).to(self.device)
+
+                pred = self.model.predict_mask(X_batch)
+
+                pred = pred.detach().cpu().numpy()
+                pred = np.concatenate(pred, axis=2)
+                mask.append(pred)
+
+            mask = np.concatenate(mask, axis=2)
+
+        return mask
+
+    def _preprocess(self, X_spec):
+        X_mag = np.abs(X_spec)
+        X_phase = np.angle(X_spec)
+
+        return X_mag, X_phase
+
+    def _postprocess(self, mask, X_mag, X_phase):
+        if self.postprocess:
+            mask = merge_artifacts(mask)
+
+        y_spec = mask * X_mag * np.exp(1.0j * X_phase)
+        v_spec = (1 - mask) * X_mag * np.exp(1.0j * X_phase)
+
+        return y_spec, v_spec
+
+    def separate(self, X_spec):
+        X_mag, X_phase = self._preprocess(X_spec)
+
+        n_frame = X_mag.shape[2]
+        pad_l, pad_r, roi_size = make_padding(n_frame, self.cropsize, self.offset)
+        X_mag_pad = np.pad(X_mag, ((0, 0), (0, 0), (pad_l, pad_r)), mode="constant")
+        X_mag_pad /= X_mag_pad.max()
+
+        mask = self._separate(X_mag_pad, roi_size)
+        mask = mask[:, :, :n_frame]
+
+        y_spec, v_spec = self._postprocess(mask, X_mag, X_phase)
+
+        return y_spec, v_spec
+
+
+@st.cache_resource(show_spinner=False)
+def load_model(pretrained_model, n_fft=2048):
+    model = nets.CascadedNet(n_fft, 32, 128)
+    if torch.cuda.is_available():
+        device = torch.device("cuda:0")
+        model.to(device)
+    # elif torch.backends.mps.is_available() and torch.backends.mps.is_built():
+    #     device = torch.device("mps")
+    #     model.to(device)
+    else:
+        device = torch.device("cpu")
+    model.load_state_dict(torch.load(pretrained_model, map_location=device))
+    return model, device
+
+
+# @st.cache_data(show_spinner=False)
+def separate(
+    input,
+    model,
+    device,
+    output_dir,
+    batchsize=4,
+    cropsize=256,
+    postprocess=False,
+    hop_length=1024,
+    n_fft=2048,
+    sr=44100,
+    progress_bar=None,
+    only_no_vocals=False,
+):
+    X, sr = librosa.load(input, sr=sr, mono=False, dtype=np.float32, res_type="kaiser_fast")
+    basename = os.path.splitext(os.path.basename(input))[0]
+
+    if X.ndim == 1:
+        # mono to stereo
+        X = np.asarray([X, X])
+
+    X_spec = wave_to_spectrogram(X, hop_length, n_fft)
+
+    with torch.no_grad():
+        sp = Separator(model, device, batchsize, cropsize, postprocess, progress_bar=progress_bar)
+        y_spec, v_spec = sp.separate(X_spec)
+
+    base_dir = f"{output_dir}/vocal_remover/{basename}"
+    os.makedirs(base_dir, exist_ok=True)
+
+    wave = spectrogram_to_wave(y_spec, hop_length=hop_length)
+    try:
+        sf.write(f"{base_dir}/no_vocals.mp3", wave.T, sr)
+    except Exception:
+        logging.error("Failed to write no_vocals.mp3, trying pydub...")
+        pydub_write(wave, f"{base_dir}/no_vocals.mp3", sr)
+    if only_no_vocals:
+        return
+    wave = spectrogram_to_wave(v_spec, hop_length=hop_length)
+    try:
+        sf.write(f"{base_dir}/vocals.mp3", wave.T, sr)
+    except Exception:
+        logging.error("Failed to write vocals.mp3, trying pydub...")
+        pydub_write(wave, f"{base_dir}/vocals.mp3", sr)
+
+
+def pydub_write(wave, output_path, frame_rate, audio_format="mp3"):
+    # Ensure the wave data is in the right format for pydub (mono and 16-bit depth)
+    wave_16bit = (wave * 32767).astype(np.int16)
+
+    audio_segment = AudioSegment(
+        wave_16bit.tobytes(),
+        frame_rate=frame_rate,
+        sample_width=wave_16bit.dtype.itemsize,
+        channels=1,
+    )
+    audio_segment.export(output_path, format=audio_format)

app/service/youtube.py

@@ -0,0 +1,72 @@
+import os
+from typing import List
+import yt_dlp
+import string
+import time
+import re
+import streamlit as st
+from pytube import Search
+
+
+def _sanitize_filename(filename):
+    safe_chars = "-_.() %s%s" % (
+        re.escape(string.ascii_letters),
+        re.escape(string.digits),
+    )
+    safe_filename = re.sub(f"[^{safe_chars}]", "_", filename)
+    return safe_filename.strip()
+
+
+@st.cache_data(show_spinner=False)
+def download_audio_from_youtube(url, output_path):
+    if not os.path.exists(output_path):
+        os.makedirs(output_path)
+
+    with yt_dlp.YoutubeDL() as ydl:
+        info_dict = ydl.extract_info(url, download=False)
+    if info_dict.get("duration") > 360:
+        st.error("Song is too long. Please use a song no longer than 6 minutes.")
+        return
+    video_title = info_dict.get("title", None)
+    video_title = _sanitize_filename(video_title)
+    ydl_opts = {
+        "format": "bestaudio/best",
+        "postprocessors": [
+            {
+                "key": "FFmpegExtractAudio",
+                "preferredcodec": "mp3",
+                "preferredquality": "192",
+            }
+        ],
+        "outtmpl": os.path.join(output_path, video_title),
+        #'quiet': True,
+    }
+    with yt_dlp.YoutubeDL(ydl_opts) as ydl:
+        ydl.download([url])
+    return f"{video_title}.mp3"
+
+
+@st.cache_data(show_spinner=False)
+def query_youtube(query: str) -> Search:
+    return Search(query)
+
+
+def search_youtube(query: str) -> List:
+    if len(query) > 3:
+        time.sleep(0.5)
+        search = query_youtube(query + " lyrics")
+        st.session_state.search_results = search.results
+        video_options = [video.title for video in st.session_state.search_results]
+        st.session_state.video_options = video_options
+    else:
+        video_options = []
+    return video_options
+
+
+def get_youtube_url(title: str) -> str:
+    video = st.session_state.search_results[st.session_state.video_options.index(title)]
+    return video.embed_url
+
+
+def check_if_is_youtube_url(url: str) -> bool:
+    return url.startswith("http")

app/sidebar.py

@@ -1,12 +0,0 @@
-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.
-"""

app/style.py

@@ -0,0 +1,131 @@
+_font_title = "Monoton"
+_font_subtitle = "Exo"
+
+CSS = (
+    """
+<!-- Add the font link from Google Fonts -->
+<link href="https://fonts.googleapis.com/css2?family="""
+    + _font_title
+    + """&display=swap" rel="stylesheet">
+<link href="https://fonts.googleapis.com/css2?family="""
+    + _font_subtitle
+    + """&display=swap" rel="stylesheet">
+
+<style>
+    /* Remove the streamlit header */
+    header[data-testid="stHeader"]  {
+        display: none;
+    }
+    /* Remove the sidebar menu */
+    div[data-testid="collapsedControl"]{
+        display: none;
+    }
+    /* Background */
+    .css-z5fcl4 {
+        padding: 0.5rem;
+        padding-top: 0rem;
+    }
+
+    /* Distances between the title and the image in mobile */
+    .css-1uifejx.e1tzin5v1 {
+        margin-bottom: 0px;
+        padding-bottom: 0px;
+    }
+    h1 {
+        padding-top: 0px;
+    }
+
+
+    /* Center the image within its container */
+    .css-1kyxreq {
+    justify-content: center;
+    }
+
+    /* Remove fixed width from the image container */
+    .css-1kyxreq.etr89bj2 {
+    width: 100% !important;
+    }
+
+    /* Center the title */
+    .css-k7vsyb {
+    text-align: center;
+    }
+
+    /* Hide the anchor button */
+    .css-zt5igj.e16nr0p33 a {
+        display: none;
+    }
+    /* Hide the full screen button */
+    .css-e370rw.e19lei0e1 {
+        display: none;
+    }
+    .css-6awftf.e19lei0e1 {
+        display: none;
+    }
+
+    /* Desktop */
+    @media (min-width: 640px) {
+        .stMarkdown {
+            max-width: 100%;
+            width: auto;
+            display: inline-block;
+        }
+        /* Dynamically add space between the image and the title */
+        .css-1kyxreq {
+            justify-content: right;
+        }
+    }
+
+    /* Add space after the image and the title */
+    .css-1a32fsj {
+        margin-right: 0px;
+    }
+
+    /* Apply the futuristic font to the text title*/
+    #moseca {
+        font-family: '"""
+    + _font_title
+    + """', sans-serif;
+        font-size: 3rem;
+        text-align: center;
+        /* Align the text to the center of the box */
+        align-items: center;
+        /* Set the line height to the same as the height of the box */
+        line-height: 3.5rem;
+        margin-bottom: -1rem;
+    }
+
+    /* subtitle */
+    .css-5rimss p, .css-nahz7x p {
+        font-family: """
+    + _font_subtitle
+    + """, sans-serif;
+        font-size: 0.8rem;
+        text-align: center;
+    }
+
+    /* Desktop */
+    @media (min-width: 640px) {
+        .css-zt5igj, .css-nahz7x p {
+            text-align: left;
+        }
+        .css-5rimss p {
+            text-align: left;
+        }
+    }
+
+    .st-af {
+        align-items: center;
+        padding-right: 2rem;
+    }
+
+    /* Remove the gap around the player */
+    .css-434r0z {
+        gap: 0rem;
+    }
+
+
+</style>
+
+"""
+)

lib/st_audiorec/__init__.py

@@ -1 +0,0 @@
-

lib/st_audiorec/frontend/.env

@@ -1,6 +0,0 @@
-# Run the component's dev server on :3001
-# (The Streamlit dev server already runs on :3000)
-PORT=3001
-
-# Don't automatically open the web browser on `npm run start`.
-BROWSER=none

lib/st_audiorec/frontend/.prettierrc

@@ -1,5 +0,0 @@
-{
-  "endOfLine": "lf",
-  "semi": false,
-  "trailingComma": "es5"
-}

lib/st_audiorec/frontend/build/asset-manifest.json

@@ -1,22 +0,0 @@
-{
-  "files": {
-    "main.js": "./static/js/main.833ba252.chunk.js",
-    "main.js.map": "./static/js/main.833ba252.chunk.js.map",
-    "runtime-main.js": "./static/js/runtime-main.11ec9aca.js",
-    "runtime-main.js.map": "./static/js/runtime-main.11ec9aca.js.map",
-    "static/css/2.bfbf028b.chunk.css": "./static/css/2.bfbf028b.chunk.css",
-    "static/js/2.270b84d8.chunk.js": "./static/js/2.270b84d8.chunk.js",
-    "static/js/2.270b84d8.chunk.js.map": "./static/js/2.270b84d8.chunk.js.map",
-    "index.html": "./index.html",
-    "precache-manifest.4829c060d313d0b0d13d9af3b0180289.js": "./precache-manifest.4829c060d313d0b0d13d9af3b0180289.js",
-    "service-worker.js": "./service-worker.js",
-    "static/css/2.bfbf028b.chunk.css.map": "./static/css/2.bfbf028b.chunk.css.map",
-    "static/js/2.270b84d8.chunk.js.LICENSE.txt": "./static/js/2.270b84d8.chunk.js.LICENSE.txt"
-  },
-  "entrypoints": [
-    "static/js/runtime-main.11ec9aca.js",
-    "static/css/2.bfbf028b.chunk.css",
-    "static/js/2.270b84d8.chunk.js",
-    "static/js/main.833ba252.chunk.js"
-  ]
-}

lib/st_audiorec/frontend/build/index.html

@@ -1 +0,0 @@
-<!doctype html><html lang="en"><head><title>Streamlit Audio Recorder Component</title><meta charset="UTF-8"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="Streamlit Audio Recorder Component"/><link rel="stylesheet" href="bootstrap.min.css"/><link rel="stylesheet" href="./styles.css"/><link href="./static/css/2.bfbf028b.chunk.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div><script>!function(e){function t(t){for(var n,l,a=t[0],p=t[1],i=t[2],c=0,s=[];c<a.length;c++)l=a[c],Object.prototype.hasOwnProperty.call(o,l)&&o[l]&&s.push(o[l][0]),o[l]=0;for(n in p)Object.prototype.hasOwnProperty.call(p,n)&&(e[n]=p[n]);for(f&&f(t);s.length;)s.shift()();return u.push.apply(u,i||[]),r()}function r(){for(var e,t=0;t<u.length;t++){for(var r=u[t],n=!0,a=1;a<r.length;a++){var p=r[a];0!==o[p]&&(n=!1)}n&&(u.splice(t--,1),e=l(l.s=r[0]))}return e}var n={},o={1:0},u=[];function l(t){if(n[t])return n[t].exports;var r=n[t]={i:t,l:!1,exports:{}};return e[t].call(r.exports,r,r.exports,l),r.l=!0,r.exports}l.m=e,l.c=n,l.d=function(e,t,r){l.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},l.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},l.t=function(e,t){if(1&t&&(e=l(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(l.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var n in e)l.d(r,n,function(t){return e[t]}.bind(null,n));return r},l.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return l.d(t,"a",t),t},l.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},l.p="./";var a=this.webpackJsonpstreamlit_component_template=this.webpackJsonpstreamlit_component_template||[],p=a.push.bind(a);a.push=t,a=a.slice();for(var i=0;i<a.length;i++)t(a[i]);var f=p;r()}([])</script><script src="./static/js/2.270b84d8.chunk.js"></script><script src="./static/js/main.833ba252.chunk.js"></script></body></html>

lib/st_audiorec/frontend/build/precache-manifest.4829c060d313d0b0d13d9af3b0180289.js

@@ -1,26 +0,0 @@
-self.__precacheManifest = (self.__precacheManifest || []).concat([
-  {
-    "revision": "de27ef444ab2ed520b64cb0c988a478a",
-    "url": "./index.html"
-  },
-  {
-    "revision": "1a47c80c81698454dced",
-    "url": "./static/css/2.bfbf028b.chunk.css"
-  },
-  {
-    "revision": "1a47c80c81698454dced",
-    "url": "./static/js/2.270b84d8.chunk.js"
-  },
-  {
-    "revision": "3fc7fb5bfeeec1534560a2c962e360a7",
-    "url": "./static/js/2.270b84d8.chunk.js.LICENSE.txt"
-  },
-  {
-    "revision": "3478f4c246f37a2cbb97",
-    "url": "./static/js/main.833ba252.chunk.js"
-  },
-  {
-    "revision": "7c26bca7e16783d14d15",
-    "url": "./static/js/runtime-main.11ec9aca.js"
-  }
-]);

lib/st_audiorec/frontend/build/service-worker.js

@@ -1,39 +0,0 @@
-/**
- * Welcome to your Workbox-powered service worker!
- *
- * You'll need to register this file in your web app and you should
- * disable HTTP caching for this file too.
- * See https://goo.gl/nhQhGp
- *
- * The rest of the code is auto-generated. Please don't update this file
- * directly; instead, make changes to your Workbox build configuration
- * and re-run your build process.
- * See https://goo.gl/2aRDsh
- */
-
-importScripts("https://storage.googleapis.com/workbox-cdn/releases/4.3.1/workbox-sw.js");
-
-importScripts(
-  "./precache-manifest.4829c060d313d0b0d13d9af3b0180289.js"
-);
-
-self.addEventListener('message', (event) => {
-  if (event.data && event.data.type === 'SKIP_WAITING') {
-    self.skipWaiting();
-  }
-});
-
-workbox.core.clientsClaim();
-
-/**
- * The workboxSW.precacheAndRoute() method efficiently caches and responds to
- * requests for URLs in the manifest.
- * See https://goo.gl/S9QRab
- */
-self.__precacheManifest = [].concat(self.__precacheManifest || []);
-workbox.precaching.precacheAndRoute(self.__precacheManifest, {});
-
-workbox.routing.registerNavigationRoute(workbox.precaching.getCacheKeyForURL("./index.html"), {
-  
-  blacklist: [/^\/_/,/\/[^/?]+\.[^/]+$/],
-});

lib/st_audiorec/frontend/build/static/css/2.bfbf028b.chunk.css

@@ -1,2 +0,0 @@
-._3ybTi{margin:2em;padding:.5em;border:2px solid #000;font-size:2em;text-align:center}
-/*# sourceMappingURL=2.bfbf028b.chunk.css.map */

lib/st_audiorec/frontend/build/static/css/2.bfbf028b.chunk.css.map

@@ -1 +0,0 @@
-{"version":3,"sources":["index.css"],"names":[],"mappings":"AAEA,QACE,UAAW,CACX,YAAc,CACd,qBAAsB,CACtB,aAAc,CACd,iBACF","file":"2.bfbf028b.chunk.css","sourcesContent":["/* add css module styles here (optional) */\n\n._3ybTi {\n  margin: 2em;\n  padding: 0.5em;\n  border: 2px solid #000;\n  font-size: 2em;\n  text-align: center;\n}\n"]}

lib/st_audiorec/frontend/build/static/js/2.270b84d8.chunk.js.LICENSE.txt

@@ -1,58 +0,0 @@
-/*
-object-assign
-(c) Sindre Sorhus
-@license MIT
-*/
-
-/**
- * @license
- * Copyright 2018-2021 Streamlit Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *    http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-/** @license React v0.19.1
- * scheduler.production.min.js
- *
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-/** @license React v16.13.1
- * react-is.production.min.js
- *
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-/** @license React v16.14.0
- * react-dom.production.min.js
- *
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-/** @license React v16.14.0
- * react.production.min.js
- *
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */

lib/st_audiorec/frontend/build/static/js/main.833ba252.chunk.js

@@ -1,2 +0,0 @@
-(this.webpackJsonpstreamlit_component_template=this.webpackJsonpstreamlit_component_template||[]).push([[0],{17:function(t,e,a){t.exports=a(28)},28:function(t,e,a){"use strict";a.r(e);var n=a(6),o=a.n(n),r=a(15),c=a.n(r),i=a(0),l=a(1),s=a(2),u=a(3),d=a(8),p=a(11),m=(a(27),function(t){Object(s.a)(a,t);var e=Object(u.a)(a);function a(){var t;Object(l.a)(this,a);for(var n=arguments.length,r=new Array(n),c=0;c<n;c++)r[c]=arguments[c];return(t=e.call.apply(e,[this].concat(r))).state={isFocused:!1,recordState:null,audioDataURL:"",reset:!1},t.render=function(){var e=t.props.theme,a={},n=t.state.recordState;if(e){var r="1px solid ".concat(t.state.isFocused?e.primaryColor:"gray");a.border=r,a.outline=r}return o.a.createElement("span",null,o.a.createElement("div",null,o.a.createElement("button",{id:"record",onClick:t.onClick_start},"Start Recording"),o.a.createElement("button",{id:"stop",onClick:t.onClick_stop},"Stop"),o.a.createElement("button",{id:"reset",onClick:t.onClick_reset},"Reset"),o.a.createElement("button",{id:"continue",onClick:t.onClick_continue},"Download"),o.a.createElement(p.b,{state:n,onStop:t.onStop_audio,type:"audio/wav",backgroundColor:"rgb(255, 255, 255)",foregroundColor:"rgb(255,76,75)",canvasWidth:450,canvasHeight:100}),o.a.createElement("audio",{id:"audio",controls:!0,src:t.state.audioDataURL})))},t.onClick_start=function(){t.setState({reset:!1,audioDataURL:"",recordState:p.a.START}),d.a.setComponentValue("")},t.onClick_stop=function(){t.setState({reset:!1,recordState:p.a.STOP})},t.onClick_reset=function(){t.setState({reset:!0,audioDataURL:"",recordState:p.a.STOP}),d.a.setComponentValue("")},t.onClick_continue=function(){if(""!==t.state.audioDataURL){var e=(new Date).toLocaleString(),a="streamlit_audio_"+(e=(e=(e=e.replace(" ","")).replace(/_/g,"")).replace(",",""))+".wav",n=document.createElement("a");n.style.display="none",n.href=t.state.audioDataURL,n.download=a,document.body.appendChild(n),n.click()}},t.onStop_audio=function(e){!0===t.state.reset?(t.setState({audioDataURL:""}),d.a.setComponentValue("")):(t.setState({audioDataURL:e.url}),fetch(e.url).then((function(t){return t.blob()})).then((function(t){return new Response(t).arrayBuffer()})).then((function(t){d.a.setComponentValue({arr:new Uint8Array(t)})})))},t}return Object(i.a)(a)}(d.b)),f=Object(d.c)(m);d.a.setComponentReady(),d.a.setFrameHeight(),c.a.render(o.a.createElement(o.a.StrictMode,null,o.a.createElement(f,null)),document.getElementById("root"))}},[[17,1,2]]]);
-//# sourceMappingURL=main.833ba252.chunk.js.map

lib/st_audiorec/frontend/build/static/js/main.833ba252.chunk.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["StreamlitAudioRecorder.tsx","index.tsx"],"names":["StAudioRec","state","isFocused","recordState","audioDataURL","reset","render","theme","props","style","borderStyling","primaryColor","border","outline","id","onClick","onClick_start","onClick_stop","onClick_reset","onClick_continue","onStop","onStop_audio","type","backgroundColor","foregroundColor","canvasWidth","canvasHeight","controls","src","setState","RecordState","START","Streamlit","setComponentValue","STOP","datetime","Date","toLocaleString","filename","replace","a","document","createElement","display","href","download","body","appendChild","click","data","url","fetch","then","ctx","blob","Response","arrayBuffer","buffer","Uint8Array","StreamlitComponentBase","withStreamlitConnection","setComponentReady","setFrameHeight","ReactDOM","StrictMode","getElementById"],"mappings":"wQAiBMA,G,kNACGC,MAAQ,CAAEC,WAAW,EAAOC,YAAa,KAAMC,aAAc,GAAIC,OAAO,G,EAExEC,OAAS,WAMd,IAAQC,EAAU,EAAKC,MAAfD,MACFE,EAA6B,GAE3BN,EAAgB,EAAKF,MAArBE,YAGR,GAAII,EAAO,CAGT,IAAMG,EAAa,oBACjB,EAAKT,MAAMC,UAAYK,EAAMI,aAAe,QAC9CF,EAAMG,OAASF,EACfD,EAAMI,QAAUH,EAGlB,OACE,8BACE,6BACE,4BAAQI,GAAG,SAASC,QAAS,EAAKC,eAAlC,mBAGA,4BAAQF,GAAG,OAAOC,QAAS,EAAKE,cAAhC,QAGA,4BAAQH,GAAG,QAAQC,QAAS,EAAKG,eAAjC,SAIA,4BAAQJ,GAAG,WAAWC,QAAS,EAAKI,kBAApC,YAIA,kBAAC,IAAD,CACElB,MAAOE,EACPiB,OAAQ,EAAKC,aACbC,KAAK,YACLC,gBAAgB,qBAChBC,gBAAgB,iBAChBC,YAAa,IACbC,aAAc,MAGhB,2BACEZ,GAAG,QACHa,UAAQ,EACRC,IAAK,EAAK3B,MAAMG,kB,EASlBY,cAAgB,WACtB,EAAKa,SAAS,CACZxB,OAAO,EACPD,aAAc,GACdD,YAAa2B,IAAYC,QAE3BC,IAAUC,kBAAkB,K,EAGtBhB,aAAe,WACrB,EAAKY,SAAS,CACZxB,OAAO,EACPF,YAAa2B,IAAYI,Q,EAIrBhB,cAAgB,WACtB,EAAKW,SAAS,CACZxB,OAAO,EACPD,aAAc,GACdD,YAAa2B,IAAYI,OAE3BF,IAAUC,kBAAkB,K,EAGtBd,iBAAmB,WACzB,GAAgC,KAA5B,EAAKlB,MAAMG,aACf,CAEE,IAAI+B,GAAW,IAAIC,MAAOC,iBAItBC,EAAW,oBADfH,GADAA,GADAA,EAAWA,EAASI,QAAQ,IAAK,KACbA,QAAQ,KAAM,KACdA,QAAQ,IAAK,KACc,OAGzCC,EAAIC,SAASC,cAAc,KACjCF,EAAE/B,MAAMkC,QAAU,OAClBH,EAAEI,KAAO,EAAK3C,MAAMG,aACpBoC,EAAEK,SAAWP,EACbG,SAASK,KAAKC,YAAYP,GAC1BA,EAAEQ,U,EAIE3B,aAAe,SAAC4B,IACG,IAArB,EAAKhD,MAAMI,OAEb,EAAKwB,SAAS,CACZzB,aAAc,KAEhB4B,IAAUC,kBAAkB,MAE5B,EAAKJ,SAAS,CACZzB,aAAc6C,EAAKC,MAGrBC,MAAMF,EAAKC,KAAKE,MAAK,SAASC,GAC5B,OAAOA,EAAIC,UACVF,MAAK,SAASE,GAGf,OAAQ,IAAIC,SAASD,GAAOE,iBAC3BJ,MAAK,SAASK,GACfzB,IAAUC,kBAAkB,CAC1B,IAAO,IAAIyB,WAAWD,U,yBAhIPE,MA8IVC,cAAwB5D,GAIvCgC,IAAU6B,oBAIV7B,IAAU8B,iBCnKVC,IAASzD,OACP,kBAAC,IAAM0D,WAAP,KACE,kBAAC,EAAD,OAEFvB,SAASwB,eAAe,W","file":"static/js/main.833ba252.chunk.js","sourcesContent":["import {\n  Streamlit,\n  StreamlitComponentBase,\n  withStreamlitConnection,\n} from \"streamlit-component-lib\"\nimport React, { ReactNode } from \"react\"\n\nimport AudioReactRecorder, { RecordState } from 'audio-react-recorder'\nimport 'audio-react-recorder/dist/index.css'\n\ninterface State {\n  isFocused: boolean\n  recordState: null\n  audioDataURL: string\n  reset: boolean\n}\n\nclass StAudioRec extends StreamlitComponentBase<State> {\n  public state = { isFocused: false, recordState: null, audioDataURL: '', reset: false}\n\n  public render = (): ReactNode => {\n    // Arguments that are passed to the plugin in Python are accessible\n\n    // Streamlit sends us a theme object via props that we can use to ensure\n    // that our component has visuals that match the active theme in a\n    // streamlit app.\n    const { theme } = this.props\n    const style: React.CSSProperties = {}\n\n    const { recordState } = this.state\n\n    // compatibility with older vers of Streamlit that don't send theme object.\n    if (theme) {\n      // Use the theme object to style our button border. Alternatively, the\n      // theme style is defined in CSS vars.\n      const borderStyling = `1px solid ${\n        this.state.isFocused ? theme.primaryColor : \"gray\"}`\n      style.border = borderStyling\n      style.outline = borderStyling\n    }\n\n    return (\n      <span>\n        <div>\n          <button id='record' onClick={this.onClick_start}>\n            Start Recording\n          </button>\n          <button id='stop' onClick={this.onClick_stop}>\n            Stop\n          </button>\n          <button id='reset' onClick={this.onClick_reset}>\n            Reset\n          </button>\n\n          <button id='continue' onClick={this.onClick_continue}>\n            Download\n          </button>\n\n          <AudioReactRecorder\n            state={recordState}\n            onStop={this.onStop_audio}\n            type='audio/wav'\n            backgroundColor='rgb(255, 255, 255)'\n            foregroundColor='rgb(255,76,75)'\n            canvasWidth={450}\n            canvasHeight={100}\n          />\n\n          <audio\n            id='audio'\n            controls\n            src={this.state.audioDataURL}\n          />\n\n        </div>\n      </span>\n    )\n  }\n\n\n  private onClick_start = () => {\n    this.setState({\n      reset: false,\n      audioDataURL: '',\n      recordState: RecordState.START\n    })\n    Streamlit.setComponentValue('')\n  }\n\n  private onClick_stop = () => {\n    this.setState({\n      reset: false,\n      recordState: RecordState.STOP\n    })\n  }\n\n  private onClick_reset = () => {\n    this.setState({\n      reset: true,\n      audioDataURL: '',\n      recordState: RecordState.STOP\n    })\n    Streamlit.setComponentValue('')\n  }\n\n  private onClick_continue = () => {\n    if (this.state.audioDataURL !== '')\n    {\n      // get datetime string for filename\n      let datetime = new Date().toLocaleString();\n      datetime = datetime.replace(' ', '');\n      datetime = datetime.replace(/_/g, '');\n      datetime = datetime.replace(',', '');\n      var filename = 'streamlit_audio_' + datetime + '.wav';\n\n      // auromatically trigger download\n      const a = document.createElement('a');\n      a.style.display = 'none';\n      a.href = this.state.audioDataURL;\n      a.download = filename;\n      document.body.appendChild(a);\n      a.click();\n    }\n  }\n\n  private onStop_audio = (data) => {\n    if (this.state.reset === true)\n    {\n      this.setState({\n        audioDataURL: ''\n      })\n      Streamlit.setComponentValue('')\n    }else{\n      this.setState({\n        audioDataURL: data.url\n      })\n\n      fetch(data.url).then(function(ctx){\n        return ctx.blob()\n      }).then(function(blob){\n        // converting blob to arrayBuffer, this process step needs to be be improved\n        // this operation's time complexity scales exponentially with audio length\n        return (new Response(blob)).arrayBuffer()\n      }).then(function(buffer){\n        Streamlit.setComponentValue({\n          \"arr\": new Uint8Array(buffer)\n        })\n      })\n\n    }\n\n\n  }\n}\n\n// \"withStreamlitConnection\" is a wrapper function. It bootstraps the\n// connection between your component and the Streamlit app, and handles\n// passing arguments from Python -> Component.\n// You don't need to edit withStreamlitConnection (but you're welcome to!).\nexport default withStreamlitConnection(StAudioRec)\n\n// Tell Streamlit we're ready to start receiving data. We won't get our\n// first RENDER_EVENT until we call this function.\nStreamlit.setComponentReady()\n\n// Finally, tell Streamlit to update our initial height. We omit the\n// `height` parameter here to have it default to our scrollHeight.\nStreamlit.setFrameHeight()\n","import React from \"react\"\nimport ReactDOM from \"react-dom\"\nimport StAudioRec from \"./StreamlitAudioRecorder\"\n\nReactDOM.render(\n  <React.StrictMode>\n    <StAudioRec />\n  </React.StrictMode>,\n  document.getElementById(\"root\")\n)\n"],"sourceRoot":""}

lib/st_audiorec/frontend/build/static/js/runtime-main.11ec9aca.js

@@ -1,2 +0,0 @@
-!function(e){function t(t){for(var n,l,a=t[0],p=t[1],i=t[2],c=0,s=[];c<a.length;c++)l=a[c],Object.prototype.hasOwnProperty.call(o,l)&&o[l]&&s.push(o[l][0]),o[l]=0;for(n in p)Object.prototype.hasOwnProperty.call(p,n)&&(e[n]=p[n]);for(f&&f(t);s.length;)s.shift()();return u.push.apply(u,i||[]),r()}function r(){for(var e,t=0;t<u.length;t++){for(var r=u[t],n=!0,a=1;a<r.length;a++){var p=r[a];0!==o[p]&&(n=!1)}n&&(u.splice(t--,1),e=l(l.s=r[0]))}return e}var n={},o={1:0},u=[];function l(t){if(n[t])return n[t].exports;var r=n[t]={i:t,l:!1,exports:{}};return e[t].call(r.exports,r,r.exports,l),r.l=!0,r.exports}l.m=e,l.c=n,l.d=function(e,t,r){l.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},l.r=function(e){"undefined"!==typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},l.t=function(e,t){if(1&t&&(e=l(e)),8&t)return e;if(4&t&&"object"===typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(l.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var n in e)l.d(r,n,function(t){return e[t]}.bind(null,n));return r},l.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return l.d(t,"a",t),t},l.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},l.p="./";var a=this.webpackJsonpstreamlit_component_template=this.webpackJsonpstreamlit_component_template||[],p=a.push.bind(a);a.push=t,a=a.slice();for(var i=0;i<a.length;i++)t(a[i]);var f=p;r()}([]);
-//# sourceMappingURL=runtime-main.11ec9aca.js.map

lib/st_audiorec/frontend/build/static/js/runtime-main.11ec9aca.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../webpack/bootstrap"],"names":["webpackJsonpCallback","data","moduleId","chunkId","chunkIds","moreModules","executeModules","i","resolves","length","Object","prototype","hasOwnProperty","call","installedChunks","push","modules","parentJsonpFunction","shift","deferredModules","apply","checkDeferredModules","result","deferredModule","fulfilled","j","depId","splice","__webpack_require__","s","installedModules","1","exports","module","l","m","c","d","name","getter","o","defineProperty","enumerable","get","r","Symbol","toStringTag","value","t","mode","__esModule","ns","create","key","bind","n","object","property","p","jsonpArray","this","oldJsonpFunction","slice"],"mappings":"aACE,SAASA,EAAqBC,GAQ7B,IAPA,IAMIC,EAAUC,EANVC,EAAWH,EAAK,GAChBI,EAAcJ,EAAK,GACnBK,EAAiBL,EAAK,GAIHM,EAAI,EAAGC,EAAW,GACpCD,EAAIH,EAASK,OAAQF,IACzBJ,EAAUC,EAASG,GAChBG,OAAOC,UAAUC,eAAeC,KAAKC,EAAiBX,IAAYW,EAAgBX,IACpFK,EAASO,KAAKD,EAAgBX,GAAS,IAExCW,EAAgBX,GAAW,EAE5B,IAAID,KAAYG,EACZK,OAAOC,UAAUC,eAAeC,KAAKR,EAAaH,KACpDc,EAAQd,GAAYG,EAAYH,IAKlC,IAFGe,GAAqBA,EAAoBhB,GAEtCO,EAASC,QACdD,EAASU,OAATV,GAOD,OAHAW,EAAgBJ,KAAKK,MAAMD,EAAiBb,GAAkB,IAGvDe,IAER,SAASA,IAER,IADA,IAAIC,EACIf,EAAI,EAAGA,EAAIY,EAAgBV,OAAQF,IAAK,CAG/C,IAFA,IAAIgB,EAAiBJ,EAAgBZ,GACjCiB,GAAY,EACRC,EAAI,EAAGA,EAAIF,EAAed,OAAQgB,IAAK,CAC9C,IAAIC,EAAQH,EAAeE,GACG,IAA3BX,EAAgBY,KAAcF,GAAY,GAE3CA,IACFL,EAAgBQ,OAAOpB,IAAK,GAC5Be,EAASM,EAAoBA,EAAoBC,EAAIN,EAAe,KAItE,OAAOD,EAIR,IAAIQ,EAAmB,GAKnBhB,EAAkB,CACrBiB,EAAG,GAGAZ,EAAkB,GAGtB,SAASS,EAAoB1B,GAG5B,GAAG4B,EAAiB5B,GACnB,OAAO4B,EAAiB5B,GAAU8B,QAGnC,IAAIC,EAASH,EAAiB5B,GAAY,CACzCK,EAAGL,EACHgC,GAAG,EACHF,QAAS,IAUV,OANAhB,EAAQd,GAAUW,KAAKoB,EAAOD,QAASC,EAAQA,EAAOD,QAASJ,GAG/DK,EAAOC,GAAI,EAGJD,EAAOD,QAKfJ,EAAoBO,EAAInB,EAGxBY,EAAoBQ,EAAIN,EAGxBF,EAAoBS,EAAI,SAASL,EAASM,EAAMC,GAC3CX,EAAoBY,EAAER,EAASM,IAClC5B,OAAO+B,eAAeT,EAASM,EAAM,CAAEI,YAAY,EAAMC,IAAKJ,KAKhEX,EAAoBgB,EAAI,SAASZ,GACX,qBAAXa,QAA0BA,OAAOC,aAC1CpC,OAAO+B,eAAeT,EAASa,OAAOC,YAAa,CAAEC,MAAO,WAE7DrC,OAAO+B,eAAeT,EAAS,aAAc,CAAEe,OAAO,KAQvDnB,EAAoBoB,EAAI,SAASD,EAAOE,GAEvC,GADU,EAAPA,IAAUF,EAAQnB,EAAoBmB,IAC/B,EAAPE,EAAU,OAAOF,EACpB,GAAW,EAAPE,GAA8B,kBAAVF,GAAsBA,GAASA,EAAMG,WAAY,OAAOH,EAChF,IAAII,EAAKzC,OAAO0C,OAAO,MAGvB,GAFAxB,EAAoBgB,EAAEO,GACtBzC,OAAO+B,eAAeU,EAAI,UAAW,CAAET,YAAY,EAAMK,MAAOA,IACtD,EAAPE,GAA4B,iBAATF,EAAmB,IAAI,IAAIM,KAAON,EAAOnB,EAAoBS,EAAEc,EAAIE,EAAK,SAASA,GAAO,OAAON,EAAMM,IAAQC,KAAK,KAAMD,IAC9I,OAAOF,GAIRvB,EAAoB2B,EAAI,SAAStB,GAChC,IAAIM,EAASN,GAAUA,EAAOiB,WAC7B,WAAwB,OAAOjB,EAAgB,SAC/C,WAA8B,OAAOA,GAEtC,OADAL,EAAoBS,EAAEE,EAAQ,IAAKA,GAC5BA,GAIRX,EAAoBY,EAAI,SAASgB,EAAQC,GAAY,OAAO/C,OAAOC,UAAUC,eAAeC,KAAK2C,EAAQC,IAGzG7B,EAAoB8B,EAAI,KAExB,IAAIC,EAAaC,KAA+C,yCAAIA,KAA+C,0CAAK,GACpHC,EAAmBF,EAAW5C,KAAKuC,KAAKK,GAC5CA,EAAW5C,KAAOf,EAClB2D,EAAaA,EAAWG,QACxB,IAAI,IAAIvD,EAAI,EAAGA,EAAIoD,EAAWlD,OAAQF,IAAKP,EAAqB2D,EAAWpD,IAC3E,IAAIU,EAAsB4C,EAI1BxC,I","file":"static/js/runtime-main.11ec9aca.js","sourcesContent":[" \t// install a JSONP callback for chunk loading\n \tfunction webpackJsonpCallback(data) {\n \t\tvar chunkIds = data[0];\n \t\tvar moreModules = data[1];\n \t\tvar executeModules = data[2];\n\n \t\t// add \"moreModules\" to the modules object,\n \t\t// then flag all \"chunkIds\" as loaded and fire callback\n \t\tvar moduleId, chunkId, i = 0, resolves = [];\n \t\tfor(;i < chunkIds.length; i++) {\n \t\t\tchunkId = chunkIds[i];\n \t\t\tif(Object.prototype.hasOwnProperty.call(installedChunks, chunkId) && installedChunks[chunkId]) {\n \t\t\t\tresolves.push(installedChunks[chunkId][0]);\n \t\t\t}\n \t\t\tinstalledChunks[chunkId] = 0;\n \t\t}\n \t\tfor(moduleId in moreModules) {\n \t\t\tif(Object.prototype.hasOwnProperty.call(moreModules, moduleId)) {\n \t\t\t\tmodules[moduleId] = moreModules[moduleId];\n \t\t\t}\n \t\t}\n \t\tif(parentJsonpFunction) parentJsonpFunction(data);\n\n \t\twhile(resolves.length) {\n \t\t\tresolves.shift()();\n \t\t}\n\n \t\t// add entry modules from loaded chunk to deferred list\n \t\tdeferredModules.push.apply(deferredModules, executeModules || []);\n\n \t\t// run deferred modules when all chunks ready\n \t\treturn checkDeferredModules();\n \t};\n \tfunction checkDeferredModules() {\n \t\tvar result;\n \t\tfor(var i = 0; i < deferredModules.length; i++) {\n \t\t\tvar deferredModule = deferredModules[i];\n \t\t\tvar fulfilled = true;\n \t\t\tfor(var j = 1; j < deferredModule.length; j++) {\n \t\t\t\tvar depId = deferredModule[j];\n \t\t\t\tif(installedChunks[depId] !== 0) fulfilled = false;\n \t\t\t}\n \t\t\tif(fulfilled) {\n \t\t\t\tdeferredModules.splice(i--, 1);\n \t\t\t\tresult = __webpack_require__(__webpack_require__.s = deferredModule[0]);\n \t\t\t}\n \t\t}\n\n \t\treturn result;\n \t}\n\n \t// The module cache\n \tvar installedModules = {};\n\n \t// object to store loaded and loading chunks\n \t// undefined = chunk not loaded, null = chunk preloaded/prefetched\n \t// Promise = chunk loading, 0 = chunk loaded\n \tvar installedChunks = {\n \t\t1: 0\n \t};\n\n \tvar deferredModules = [];\n\n \t// The require function\n \tfunction __webpack_require__(moduleId) {\n\n \t\t// Check if module is in cache\n \t\tif(installedModules[moduleId]) {\n \t\t\treturn installedModules[moduleId].exports;\n \t\t}\n \t\t// Create a new module (and put it into the cache)\n \t\tvar module = installedModules[moduleId] = {\n \t\t\ti: moduleId,\n \t\t\tl: false,\n \t\t\texports: {}\n \t\t};\n\n \t\t// Execute the module function\n \t\tmodules[moduleId].call(module.exports, module, module.exports, __webpack_require__);\n\n \t\t// Flag the module as loaded\n \t\tmodule.l = true;\n\n \t\t// Return the exports of the module\n \t\treturn module.exports;\n \t}\n\n\n \t// expose the modules object (__webpack_modules__)\n \t__webpack_require__.m = modules;\n\n \t// expose the module cache\n \t__webpack_require__.c = installedModules;\n\n \t// define getter function for harmony exports\n \t__webpack_require__.d = function(exports, name, getter) {\n \t\tif(!__webpack_require__.o(exports, name)) {\n \t\t\tObject.defineProperty(exports, name, { enumerable: true, get: getter });\n \t\t}\n \t};\n\n \t// define __esModule on exports\n \t__webpack_require__.r = function(exports) {\n \t\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n \t\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n \t\t}\n \t\tObject.defineProperty(exports, '__esModule', { value: true });\n \t};\n\n \t// create a fake namespace object\n \t// mode & 1: value is a module id, require it\n \t// mode & 2: merge all properties of value into the ns\n \t// mode & 4: return value when already ns object\n \t// mode & 8|1: behave like require\n \t__webpack_require__.t = function(value, mode) {\n \t\tif(mode & 1) value = __webpack_require__(value);\n \t\tif(mode & 8) return value;\n \t\tif((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;\n \t\tvar ns = Object.create(null);\n \t\t__webpack_require__.r(ns);\n \t\tObject.defineProperty(ns, 'default', { enumerable: true, value: value });\n \t\tif(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));\n \t\treturn ns;\n \t};\n\n \t// getDefaultExport function for compatibility with non-harmony modules\n \t__webpack_require__.n = function(module) {\n \t\tvar getter = module && module.__esModule ?\n \t\t\tfunction getDefault() { return module['default']; } :\n \t\t\tfunction getModuleExports() { return module; };\n \t\t__webpack_require__.d(getter, 'a', getter);\n \t\treturn getter;\n \t};\n\n \t// Object.prototype.hasOwnProperty.call\n \t__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };\n\n \t// __webpack_public_path__\n \t__webpack_require__.p = \"./\";\n\n \tvar jsonpArray = this[\"webpackJsonpstreamlit_component_template\"] = this[\"webpackJsonpstreamlit_component_template\"] || [];\n \tvar oldJsonpFunction = jsonpArray.push.bind(jsonpArray);\n \tjsonpArray.push = webpackJsonpCallback;\n \tjsonpArray = jsonpArray.slice();\n \tfor(var i = 0; i < jsonpArray.length; i++) webpackJsonpCallback(jsonpArray[i]);\n \tvar parentJsonpFunction = oldJsonpFunction;\n\n\n \t// run deferred modules from other chunks\n \tcheckDeferredModules();\n"],"sourceRoot":""}

lib/st_audiorec/frontend/build/styles.css

@@ -1,59 +0,0 @@
-*{
-    margin: 0;
-    padding: 0;
-}
-
-.container{
-    margin: 0 auto;
-    text-align: center;
-}
-
-.display{
-    width: 100%;
-    padding: 5px 0;
-    margin: 15px 0;
-}
-
-.controllers{
-    width: 100%;
-    padding: 5px 0;
-    margin-top: 15px;
-    margin-bottom: 35px;
-}
-
-button{
-    padding-top: 0.25rem;
-    padding-bottom: 0.25rem;
-    padding-right: 0.75rem;
-    padding-left: 0.75rem;
-    margin-right: 0.5rem;
-    margin-left: 0.1rem;
-    font-size: 16px;
-    background-color: #ffffff;
-    color: #000000;
-    border: 1px solid rgba(49, 51, 63, 0.2);
-    border-radius: 0.25rem;
-    margin-top: 0.75rem;
-    margin-bottom: 0.25rem;
-}
-
-button:hover{
-    padding-top: 0.25rem;
-    padding-bottom: 0.25rem;
-    padding-right: 0.75rem;
-    padding-left: 0.75rem;
-    margin-right: 0.5rem;
-    margin-left: 0.1rem;
-    font-size: 16px;
-    background-color: #ffffff;
-    color: #ff4c4b;
-    border: 1px solid #ff4c4b;
-    border-radius: 0.25rem;
-    margin-top: 0.75rem;
-    margin-bottom: 0.25rem;
-}
-
-audio {
-  width: 450px;
-  height: 45px;
-}

lib/st_audiorec/frontend/package.json

@@ -1,44 +0,0 @@
-{
-  "name": "streamlit_component_template",
-  "version": "0.1.0",
-  "private": true,
-  "dependencies": {
-    "@types/jest": "^24.0.0",
-    "@types/node": "^12.0.0",
-    "@types/react": "^16.9.0",
-    "@types/react-dom": "^16.9.0",
-    "audio-react-recorder": "^1.0.4",
-    "axios": "^0.27.2",
-    "normalize.css": "^8.0.1",
-    "react": "^16.13.1",
-    "react-dom": "^16.13.1",
-    "react-media-recorder": "^1.6.4",
-    "react-scripts": "3.4.1",
-    "streamlit-component-lib": "^1.4.0",
-    "turbodepot-node": "^7.0.1",
-    "typescript": "~3.8.0",
-    "use-media-recorder": "^2.0.4"
-  },
-  "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject"
-  },
-  "eslintConfig": {
-    "extends": "react-app"
-  },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
-  },
-  "homepage": "."
-}