Initial commit

app.py

@@ -0,0 +1,301 @@
+import streamlit as st
+from audio_recorder.streamlit_audio_recorder.st_audiorec import st_audiorec
+from transformers import pipeline
+import torch
+from gtts import gTTS
+from pydub import AudioSegment
+from pydub.playback import play
+from io import BytesIO
+import streamlit as st
+import datetime as dt
+import  streamlit_toggle as tog
+
+import streamlit_authenticator as stauth
+import sqlite3
+from pathlib import Path
+
+global FILE_PATH 
+FILE_PATH = Path(__file__).parent / "translator.db"
+
+class DatabaseConnection:
+	def __init__(self, database):
+		self.connection = None
+		self.database = database
+
+	def __enter__(self):
+		self.connection = sqlite3.connect(self.database)
+		return self.connection 
+
+	def __exit__(self, exc_type, exc_val, exc_tb):
+		if exc_type or exc_val or exc_tb:
+			pass
+		else:
+			self.connection.commit()
+		
+		self.connection.close()
+
+
+##### FUNKCJE LOGOWANIA/REJESTRACJI #####
+def log_in(credentials):
+    global LOGGED_IN, USERNAME 
+    authenticator = stauth.Authenticate(credentials, 'translator_cookie', 'translator_signature_key', cookie_expiry_days=7)
+    name, auth_status, username = authenticator.login("Login", "main")
+    username = username.capitalize()
+
+    if auth_status:
+        st.success(f"Zalogowany jako {username}")
+        st.sidebar.write(f"Zalogowany jako **{username}**")
+        authenticator.logout("Wyloguj", "sidebar")
+        USERNAME, LOGGED_IN = username, True
+    else:
+        if username!='':
+            st.error(f"Nieprawidłowe hasło dla użytkownika {username}")
+        USERNAME, LOGGED_IN = username, False
+
+
+def register(usernames):
+    with st.form("Rejestracja"):
+        st.write("<p style='font-size: 28px;'>Rejestracja</p>", unsafe_allow_html=True)
+        username = st.text_input("Nazwa użytkownika")
+        password = st.text_input("Hasło", type="password")
+        password2 = st.text_input("Powtórz hasło", type="password")
+        register = st.form_submit_button("Zarejestruj się")  # Change the button text here
+    if register:
+        if password != password2:
+            st.error("Podane hasła różnią się od siebie")
+            st.stop()
+        elif username in usernames:
+            st.error("Nazwa użytkownika jest już zajęta")
+            st.stop()
+        else:
+            with DatabaseConnection(FILE_PATH) as conn:
+                cursor = conn.cursor()
+                hashed_password = stauth.Hasher(passwords=[password]).generate()[0]
+                cursor.execute(f"INSERT INTO Users (username, hashed_password) VALUES (?, ?)", (username, hashed_password,))
+            st.success(f"Rejestracja jako {username} udana. Teraz proszę się zalogować.")
+
+    
+def enter(action):
+    with DatabaseConnection(FILE_PATH) as conn:
+        cursor = conn.cursor()
+        cursor.execute("SELECT * FROM Users")
+        user_data = cursor.fetchall()
+        usernames = [row[0] for row in user_data]
+        passwords = [row[1] for row in user_data]
+
+    credentials = {"usernames":{}}
+    for un, name, pw in zip(usernames, usernames, passwords):
+        user_dict = {"name":name,"password":pw}
+        credentials["usernames"].update({un:user_dict})
+   
+    if action == "Register":
+        register(usernames)
+    elif action == "Login":
+        log_in(credentials)
+
+
+##### ZAPISYWANIE HISTORII #####
+def display_row(h):
+    col1, col2 = st.columns([0.8, 0.2])
+    with col1:
+        st.write(f"{h[0]}")
+    with col2:
+        st.write(f"{h[4]} → {h[5]}")
+    st.success(f"{h[2]} ➡️ {h[3]}")
+    st.write("---")
+
+
+def view_history(username):
+    st.header("Historia tłumaczeń")
+    st.markdown("---")
+    with DatabaseConnection(FILE_PATH) as conn:
+        cursor = conn.cursor()
+        cursor.execute(f"SELECT * FROM History WHERE username='{username}' ORDER BY ROWID DESC")
+        history = cursor.fetchall()
+    if len(history)==0:
+        st.warning("Brak historii tłumaczeń")
+        st.stop()
+    for h in history[:3]:
+        display_row(h)
+    if len(history)>3:
+        toggle = tog.st_toggle_switch("Pokaż więcej", active_color="#173928", track_color='#265f42', key="toggle_switch")
+        if toggle:
+            for h in history[3:]:
+                display_row(h)
+
+def save_history(username, transcription, translation, og_lang, output_lang, date):
+    with DatabaseConnection(FILE_PATH) as conn:
+        cursor = conn.cursor()
+        # weryfikacja, czy pojawiło się nowe tłumaczenie
+        cursor.execute(f"SELECT transcription, translation FROM History WHERE username='{username}' ORDER BY ROWID DESC LIMIT 1")
+        last_row = cursor.fetchone()
+        if last_row==None or last_row[0]+last_row[1]!=transcription+translation:
+            cursor.execute(f"INSERT INTO History (date, username, transcription, translation, og_lang, output_lang) VALUES (?, ?, ?, ?, ?, ?)",
+                        (date, username, transcription, translation, og_lang, output_lang,))
+
+
+##### FUNKCJE TŁUMACZENIA #####
+@st.cache_resource(show_spinner=False)
+def load_model():
+    device = "cuda:0" if torch.cuda.is_available() else "cpu"
+    return pipeline("automatic-speech-recognition", model="openai/whisper-large", device=device)
+pipe = load_model()
+
+
+@st.cache_data(show_spinner=False)
+def transcribe(audio, lang='pl'):
+    outputs = pipe(audio, max_new_tokens=256, generate_kwargs={"task": "transcribe", "language": f"{lang}"})
+    return outputs["text"]
+
+
+@st.cache_data(show_spinner=False)
+def text2speech(text, language):
+    tts = gTTS(text, lang=language)
+    audio_stream = BytesIO()
+    tts.write_to_fp(audio_stream)
+    audio_stream.seek(0)
+    return AudioSegment.from_mp3(audio_stream)
+
+
+st.markdown('''<style>.css-1egvi7u {margin-top: -3rem;}</style>''',
+            unsafe_allow_html=True)
+st.markdown('''<style>.stAudio {height: 45px;}</style>''',
+            unsafe_allow_html=True)
+st.markdown('''<style>.css-v37k9u a {color: #ff4c4b;}</style>''',
+            unsafe_allow_html=True)
+st.markdown('''<style>.css-nlntq9 a {color: #ff4c4b;}</style>''',
+            unsafe_allow_html=True) 
+
+langdict = language_abbreviations = {
+"Afrikaans": "af",
+"Arabski": "ar",
+"Armeński": "hy",
+"Azerski": "az",
+"Białoruski": "be",
+"Bośniacki": "bs",
+"Bułgarski": "bg",
+"Kataloński": "ca",
+"Chiński": "zh",
+"Chorwacki": "hr",
+"Czeski": "cs",
+"Duński": "da",
+"Holenderski": "nl",
+"Angielski": "en",
+"Estoński": "et",
+"Fiński": "fi",
+"Francuski": "fr",
+"Galicyjski": "gl",
+"Niemiecki": "de",
+"Grecki": "el",
+"Hebrajski": "he",
+"Hindi": "hi",
+"Węgierski": "hu",
+"Islandzki": "is",
+"Indonezyjski": "id",
+"Włoski": "it",
+"Japoński": "ja",
+"Kazachski": "kk",
+"Koreański": "ko",
+"Łotewski": "lv",
+"Litewski": "lt",
+"Macedoński": "mk",
+"Malajski": "ms",
+"Marathi": "mr",
+"Maori": "mi",
+"Nepalski": "ne",
+"Norweski": "no",
+"Perski": "fa",
+"Polski": "pl",
+"Portugalski": "pt",
+"Rumuński": "ro",
+"Rosyjski": "ru",
+"Serbski": "sr",
+"Słowacki": "sk",
+"Słoweński": "sl",
+"Hiszpański": "es",
+"Suahili": "sw",
+"Szwedzki": "sv",
+"Tagalog": "tl",
+"Tamilski": "ta",
+"Tajski": "th",
+"Turecki": "tr",
+"Ukraiński": "uk",
+"Urdu": "ur",
+"Wietnamski": "vi",
+"Walijski": "cy",
+}
+
+
+def main():
+    st.title('Tłumacz')
+    option = st.selectbox("Wybierz formę wgrania danych: ", ['Mikrofon', 'Gotowy plik audio [.wav]'], 0)
+    st.markdown("---")
+    
+    st.markdown('''<style>body {padding: 10px;} .stAudio {height: 45px;} .css-1egvi7u {margin-top: -3rem;} .css-v37k9u a {color: #ff4c4b;}</style>''',
+                 unsafe_allow_html=True)
+
+
+    with st.sidebar:
+        st.write('---')
+        st.title("Ustawienia językowe")
+        og_lang = st.selectbox("Wybierz język wejściowy: ", langdict.keys(), 38)
+        output_lang = st.selectbox("Wybierz język wyjściowy:", langdict.keys(), 13)
+        st.markdown("---")
+        st.write("Tłumacz stworzony przez:")
+        st.write("[Aleks Kapich](https://github.com/AKapich)")
+        st.write("[Tymoteusz Kwieciński](https://github.com/Fersoil)")
+        st.write("[Michał Matejczuk](https://github.com/matejczukm)")
+        
+
+    if option =='Mikrofon':
+        wav_audio_data = st_audiorec()
+        col_info, col_space = st.columns([0.57, 0.43])
+        with col_info:
+            st.write('\n')
+    else:
+        wav_audio_data = st.file_uploader("Wybierz plik audio", type=["wav"])
+        if wav_audio_data is not None:
+            wav_audio_data = wav_audio_data.read()
+
+
+    st.markdown("---")
+    if wav_audio_data is not None:
+        st.write('**Oryginalny tekst:**')
+        with st.spinner("Transkrybowanie tekstu..."):
+            transcription = transcribe(wav_audio_data, lang=langdict[og_lang])
+            st.write(transcription, unsafe_allow_html=True)
+        try:
+            st.write(f'**Tłumaczenie na {output_lang.lower()}:**')
+            with st.spinner("Tłumaczenie tekstu..."):
+                translation = transcribe(wav_audio_data, lang=langdict[output_lang])
+                st.write(translation, unsafe_allow_html=True)
+                save_history(USERNAME, transcription, translation, og_lang, output_lang, dt.datetime.now().strftime("%Y-%m-%d %H:%M:%S"))
+                sound = text2speech(translation, langdict[output_lang])
+                if st.button('🔊'):
+                    play(sound)
+        except AssertionError:
+            st.error('Nie udało się przetłumaczyć tekstu. Spróbuj ponownie.')
+
+
+
+if __name__ == '__main__':
+    global LOGGED_IN
+    global USERNAME
+    LOGGED_IN = False
+    USERNAME = None
+    tab1, tab2, tab3, tab4 = st.tabs(["🔑 Login", "✍🏻 Rejestracja", "🔊 Tłumacz", "📄 Historia"])
+
+    with tab1:
+        enter(action="Login")
+    with tab2:
+        enter(action="Register")
+    with tab3:
+        if LOGGED_IN:
+            main()
+        else:
+            st.warning("Proszę zalogować się, aby użyć tłumacza")
+    with tab4:
+        if LOGGED_IN:
+            view_history(USERNAME)
+        else:
+            st.warning("Proszę zalogować si��, aby mieć dostęp do historii")

audio_recorder/streamlit_audio_recorder/.idea/.gitignore

@@ -0,0 +1,8 @@
+# Default ignored files
+/shelf/
+/workspace.xml
+# Editor-based HTTP Client requests
+/httpRequests/
+# Datasource local storage ignored files
+/dataSources/
+/dataSources.local.xml

audio_recorder/streamlit_audio_recorder/.idea/inspectionProfiles/Project_Default.xml

@@ -0,0 +1,10 @@
+<component name="InspectionProjectProfileManager">
+  <profile version="1.0">
+    <option name="myName" value="Project Default" />
+    <inspection_tool class="DuplicatedCode" enabled="true" level="WEAK WARNING" enabled_by_default="true">
+      <Languages>
+        <language minSize="88" name="Python" />
+      </Languages>
+    </inspection_tool>
+  </profile>
+</component>

audio_recorder/streamlit_audio_recorder/.idea/inspectionProfiles/profiles_settings.xml

@@ -0,0 +1,6 @@
+<component name="InspectionProjectProfileManager">
+  <settings>
+    <option name="USE_PROJECT_PROFILE" value="false" />
+    <version value="1.0" />
+  </settings>
+</component>

audio_recorder/streamlit_audio_recorder/.idea/misc.xml

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectRootManager" version="2" project-jdk-name="Python 3.7 (ml_data)" project-jdk-type="Python SDK" />
+</project>

audio_recorder/streamlit_audio_recorder/.idea/modules.xml

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectModuleManager">
+    <modules>
+      <module fileurl="file://$PROJECT_DIR$/.idea/streamlit_audio_recorder.iml" filepath="$PROJECT_DIR$/.idea/streamlit_audio_recorder.iml" />
+    </modules>
+  </component>
+</project>

audio_recorder/streamlit_audio_recorder/.idea/streamlit_audio_recorder.iml

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<module type="PYTHON_MODULE" version="4">
+  <component name="NewModuleRootManager">
+    <content url="file://$MODULE_DIR$" />
+    <orderEntry type="jdk" jdkName="Python 3.7 (ml_data)" jdkType="Python SDK" />
+    <orderEntry type="sourceFolder" forTests="false" />
+  </component>
+  <component name="PyDocumentationSettings">
+    <option name="format" value="PLAIN" />
+    <option name="myDocStringFormat" value="Plain" />
+  </component>
+</module>

audio_recorder/streamlit_audio_recorder/.idea/vcs.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="VcsDirectoryMappings">
+    <mapping directory="$PROJECT_DIR$" vcs="Git" />
+  </component>
+</project>

audio_recorder/streamlit_audio_recorder/.streamlit/config.toml

@@ -0,0 +1,21 @@
+[theme]
+
+# The preset Streamlit theme that your custom theme inherits from.
+# One of "light" or "dark".
+base = "light"
+
+# Used to style primary interface elements. It's the color displayed most
+# frequently across your app's widgets (slider, checkbox, buttons)
+primaryColor = "#ff4c4b" # standard red
+
+# Background color for the main container.
+# backgroundColor = "rgba(254,248,239,1)"
+
+# Used as the background for most widgets (sidebar, text input etc.)
+# secondaryBackgroundColor =  "#ebd2b9"
+
+# Font color for the page.
+# textColor = "#6e7074"
+
+# Font family for the page. (One of "serif", "sans serif" or "mono")
+# font = "sans serif"

audio_recorder/streamlit_audio_recorder/setup.py

@@ -0,0 +1,23 @@
+from pathlib import Path
+import setuptools
+
+this_directory = Path(__file__).parent
+long_description = (this_directory / "README.md").read_text()
+
+setuptools.setup(
+    name="streamlit-audiorec",
+    version="0.1.3",
+    author="Stefan Rummer",
+    author_email="",
+    description="Record audio from the user's microphone in apps that are deployed to the web. (via Browser Media-API) [GitHub ☆ 160+: steamlit-audio-recorder]",
+    long_description=long_description,
+    long_description_content_type="text/markdown",
+    url="https://github.com/stefanrmmr/streamlit-audio-recorder",
+    packages=setuptools.find_packages(),
+    include_package_data=True,
+    classifiers=[],
+    python_requires=">=3.7",
+    install_requires=[
+        "streamlit>=0.63",
+    ],
+)

audio_recorder/streamlit_audio_recorder/st_audiorec/__init__.py

@@ -0,0 +1,34 @@
+import os
+import numpy as np
+import streamlit as st
+from io import BytesIO
+import streamlit.components.v1 as components
+
+
+def st_audiorec():
+
+    # get parent directory relative to current directory
+    parent_dir = os.path.dirname(os.path.abspath(__file__))
+    # Custom REACT-based component for recording client audio in browser
+    build_dir = os.path.join(parent_dir, "frontend/build")
+    # specify directory and initialize st_audiorec object functionality
+    st_audiorec = components.declare_component("st_audiorec", path=build_dir)
+
+    # Create an instance of the component: STREAMLIT AUDIO RECORDER
+    raw_audio_data = st_audiorec()  # raw_audio_data: stores all the data returned from the streamlit frontend
+    wav_bytes = None                # wav_bytes: contains the recorded audio in .WAV format after conversion
+
+    # the frontend returns raw audio data in the form of arraybuffer
+    # (this arraybuffer is derived from web-media API WAV-blob data)
+
+    if isinstance(raw_audio_data, dict):  # retrieve audio data
+        with st.spinner('retrieving audio-recording...'):
+            ind, raw_audio_data = zip(*raw_audio_data['arr'].items())
+            ind = np.array(ind, dtype=int)  # convert to np array
+            raw_audio_data = np.array(raw_audio_data)  # convert to np array
+            sorted_ints = raw_audio_data[ind]
+            stream = BytesIO(b"".join([int(v).to_bytes(1, "big") for v in sorted_ints]))
+            # wav_bytes contains audio data in byte format, ready to be processed further
+            wav_bytes = stream.read()
+
+    return wav_bytes

audio_recorder/streamlit_audio_recorder/st_audiorec/frontend/.env

@@ -0,0 +1,6 @@
+# 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

audio_recorder/streamlit_audio_recorder/st_audiorec/frontend/.prettierrc

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

audio_recorder/streamlit_audio_recorder/st_audiorec/frontend/build/asset-manifest.json

@@ -0,0 +1,22 @@
+{
+  "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"
+  ]
+}

audio_recorder/streamlit_audio_recorder/st_audiorec/frontend/build/index.html

@@ -0,0 +1 @@
+<!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>

audio_recorder/streamlit_audio_recorder/st_audiorec/frontend/build/precache-manifest.4829c060d313d0b0d13d9af3b0180289.js

@@ -0,0 +1,26 @@
+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"
+  }
+]);

audio_recorder/streamlit_audio_recorder/st_audiorec/frontend/build/service-worker.js

@@ -0,0 +1,39 @@
+/**
+ * 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: [/^\/_/,/\/[^/?]+\.[^/]+$/],
+});

audio_recorder/streamlit_audio_recorder/st_audiorec/frontend/build/static/css/2.bfbf028b.chunk.css

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

audio_recorder/streamlit_audio_recorder/st_audiorec/frontend/build/static/css/2.bfbf028b.chunk.css.map

@@ -0,0 +1 @@
+{"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"]}

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

@@ -0,0 +1,58 @@
+/*
+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.
+ */

audio_recorder/streamlit_audio_recorder/st_audiorec/frontend/build/static/js/main.833ba252.chunk.js

@@ -0,0 +1,2 @@
+(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},"Rozpocznij nagrywanie"),o.a.createElement("button",{id:"stop",onClick:t.onClick_stop},"Zatrzymaj nagrywanie"),o.a.createElement("button",{id:"reset",onClick:t.onClick_reset},"Zresetuj"),o.a.createElement("button",{id:"continue",onClick:t.onClick_continue},"Pobierz nagranie"),o.a.createElement(p.b,{state:n,onStop:t.onStop_audio,type:"audio/wav",backgroundColor:"rgb(14, 17, 23)",foregroundColor:"rgb(255,76,75)",canvasWidth:700,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

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

@@ -0,0 +1 @@
+{"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":""}

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

@@ -0,0 +1,2 @@
+!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

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

@@ -0,0 +1 @@
+{"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":""}

audio_recorder/streamlit_audio_recorder/st_audiorec/frontend/build/styles.css

@@ -0,0 +1,60 @@
+*{
+    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: #262730;
+    color: #fafafa;
+    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: #262730;
+    color: #ff4c4b;
+    border: 1px solid #ff4c4b;
+    border-radius: 0.25rem;
+    margin-top: 0.75rem;
+    margin-bottom: 0.25rem;
+}
+
+audio {
+  width: 700px;
+  height: 45px;
+}

audio_recorder/streamlit_audio_recorder/st_audiorec/frontend/package.json

@@ -0,0 +1,44 @@
+{
+  "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": "."
+}

audio_recorder/streamlit_audio_recorder/st_audiorec/frontend/public/index.html

@@ -0,0 +1,21 @@
+<!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"/>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <!-- div for root element as generated by the react render function -->
+    <div id="root"></div>
+    <!--
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+  </body>
+</html>

audio_recorder/streamlit_audio_recorder/st_audiorec/frontend/public/styles.css

@@ -0,0 +1,59 @@
+*{
+    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;
+}

audio_recorder/streamlit_audio_recorder/st_audiorec/frontend/src/StreamlitAudioRecorder.tsx

@@ -0,0 +1,168 @@
+import {
+  Streamlit,
+  StreamlitComponentBase,
+  withStreamlitConnection,
+} from "streamlit-component-lib"
+import React, { ReactNode } from "react"
+
+import AudioReactRecorder, { RecordState } from 'audio-react-recorder'
+import 'audio-react-recorder/dist/index.css'
+
+interface State {
+  isFocused: boolean
+  recordState: null
+  audioDataURL: string
+  reset: boolean
+}
+
+class StAudioRec extends StreamlitComponentBase<State> {
+  public state = { isFocused: false, recordState: null, audioDataURL: '', reset: false}
+
+  public render = (): ReactNode => {
+    // Arguments that are passed to the plugin in Python are accessible
+
+    // Streamlit sends us a theme object via props that we can use to ensure
+    // that our component has visuals that match the active theme in a
+    // streamlit app.
+    const { theme } = this.props
+    const style: React.CSSProperties = {}
+
+    const { recordState } = this.state
+
+    // compatibility with older vers of Streamlit that don't send theme object.
+    if (theme) {
+      // Use the theme object to style our button border. Alternatively, the
+      // theme style is defined in CSS vars.
+      const borderStyling = `1px solid ${
+        this.state.isFocused ? theme.primaryColor : "gray"}`
+      style.border = borderStyling
+      style.outline = borderStyling
+    }
+
+    return (
+      <span>
+        <div>
+          <button id='record' onClick={this.onClick_start}>
+            Start Recording
+          </button>
+          <button id='stop' onClick={this.onClick_stop}>
+            Stop
+          </button>
+          <button id='reset' onClick={this.onClick_reset}>
+            Reset
+          </button>
+
+          <button id='continue' onClick={this.onClick_continue}>
+            Download
+          </button>
+
+          <AudioReactRecorder
+            state={recordState}
+            onStop={this.onStop_audio}
+            type='audio/wav'
+            backgroundColor='rgb(255, 255, 255)'
+            foregroundColor='rgb(255,76,75)'
+            canvasWidth={450}
+            canvasHeight={100}
+          />
+
+          <audio
+            id='audio'
+            controls
+            src={this.state.audioDataURL}
+          />
+
+        </div>
+      </span>
+    )
+  }
+
+
+  private onClick_start = () => {
+    this.setState({
+      reset: false,
+      audioDataURL: '',
+      recordState: RecordState.START
+    })
+    Streamlit.setComponentValue('')
+  }
+
+  private onClick_stop = () => {
+    this.setState({
+      reset: false,
+      recordState: RecordState.STOP
+    })
+  }
+
+  private onClick_reset = () => {
+    this.setState({
+      reset: true,
+      audioDataURL: '',
+      recordState: RecordState.STOP
+    })
+    Streamlit.setComponentValue('')
+  }
+
+  private onClick_continue = () => {
+    if (this.state.audioDataURL !== '')
+    {
+      // get datetime string for filename
+      let datetime = new Date().toLocaleString();
+      datetime = datetime.replace(' ', '');
+      datetime = datetime.replace(/_/g, '');
+      datetime = datetime.replace(',', '');
+      var filename = 'streamlit_audio_' + datetime + '.wav';
+
+      // auromatically trigger download
+      const a = document.createElement('a');
+      a.style.display = 'none';
+      a.href = this.state.audioDataURL;
+      a.download = filename;
+      document.body.appendChild(a);
+      a.click();
+    }
+  }
+
+  private onStop_audio = (data) => {
+    if (this.state.reset === true)
+    {
+      this.setState({
+        audioDataURL: ''
+      })
+      Streamlit.setComponentValue('')
+    }else{
+      this.setState({
+        audioDataURL: data.url
+      })
+
+      fetch(data.url).then(function(ctx){
+        return ctx.blob()
+      }).then(function(blob){
+        // converting blob to arrayBuffer, this process step needs to be be improved
+        // this operation's time complexity scales exponentially with audio length
+        return (new Response(blob)).arrayBuffer()
+      }).then(function(buffer){
+        Streamlit.setComponentValue({
+          "arr": new Uint8Array(buffer)
+        })
+      })
+
+    }
+
+
+  }
+}
+
+// "withStreamlitConnection" is a wrapper function. It bootstraps the
+// connection between your component and the Streamlit app, and handles
+// passing arguments from Python -> Component.
+// You don't need to edit withStreamlitConnection (but you're welcome to!).
+export default withStreamlitConnection(StAudioRec)
+
+// Tell Streamlit we're ready to start receiving data. We won't get our
+// first RENDER_EVENT until we call this function.
+Streamlit.setComponentReady()
+
+// Finally, tell Streamlit to update our initial height. We omit the
+// `height` parameter here to have it default to our scrollHeight.
+Streamlit.setFrameHeight()

audio_recorder/streamlit_audio_recorder/st_audiorec/frontend/src/index.tsx

@@ -0,0 +1,10 @@
+import React from "react"
+import ReactDOM from "react-dom"
+import StAudioRec from "./StreamlitAudioRecorder"
+
+ReactDOM.render(
+  <React.StrictMode>
+    <StAudioRec />
+  </React.StrictMode>,
+  document.getElementById("root")
+)

audio_recorder/streamlit_audio_recorder/st_audiorec/frontend/src/react-app-env.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react-scripts" />
+declare module 'audio-react-recorder';

audio_recorder/streamlit_audio_recorder/st_audiorec/frontend/tsconfig.json

@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "strictNullChecks":false,
+    "forceConsistentCasingInFileNames": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react",
+    "noImplicitAny": false,
+  },
+  "include": ["src"]
+}

requirements.txt

@@ -0,0 +1,9 @@
+streamlit-audiorec
+streamlit
+torch
+transformers
+streamlit-mic-recorder
+gtts
+pydub
+streamlit_authenticator
+streamlit_toggle