Streamlitを用いた音響信号処理ダッシュボードの開発(Tokyo BISH Bash #03発表資料)¶

自己紹介およびPyData Osakaの紹介¶

別スライドで説明します

本日の概要¶

Streamlitの紹介
実例を踏まえた使用方法の紹介
Herokuへのデプロイ方法の紹介
その他

本日の資料¶

https://www.hiromasa.info/posts/22/

Streamlitとは¶

Webブラウザで動作するダッシュボードを作成するためのライブラリ
- 複数のコンポーネントが連携して動作するもの
Pythonのみで記述が可能
- plotly/dashと比較されることが多い

どんな場面で必要か¶

実装したアルゴリズムを他者に試してもらいたい
- Webフロントエンドがあると便利
パラメータ変更による試行錯誤が必要な場面
- 調整ツールとして使用

実例¶

今回作成したダッシュボードを簡単に紹介

GitHub Star History¶

https://star-history.t9t.io/#streamlit/streamlit&plotly/dash

Dashとの違い¶

Towards Data Scienceの記事
- Dash
  - プロダクション/エンタープライズ環境での実行に主眼
- Streamlit
  - ラピッドプロトタイピングに主眼

plotly.comの比較記事
- Rのshinyも含めて比較

Streamlitの魅力¶

手軽にフロントエンドが構築可能
- javascript不要、スクリプトライクな記述
- 各種pythonライブラリにGUIを付与
豊富な描画ライブラリ
- matplotlib, plotly, altair, ...
- Dashはplotlyを前提

Streamlitの情報¶

本発表におけるバージョン¶

0.68.0
- 10/8にリリースされたばかり
- 1月あたり1〜2回マイナーバージョンが更新
  - まだ不安定
0.66.0も一部で使用

基本機能の紹介¶

導入方法¶

pip install streamlit

実行方法¶

In [2]:

%%writefile app.py
import streamlit as st

st.write("# Hello, Streamlit!")

Overwriting app.py

In [3]:

!streamlit run app.py

  You can now view your Streamlit app in your browser.

  Network URL: http://172.17.0.2:8501
  External URL: http://49.251.189.62:8501

^C
  Stopping...

ノートブックが固まるため以降はターミナル上からstreamlitコマンドを実行

アプリ更新時の反映が容易¶

ファイルの上書きを検知しRerunボタンを自動表示

In [4]:

%%writefile app.py
import streamlit as st

st.write("# Hello, Streamlit!")
st.write("# Where is Rerun button?")

Overwriting app.py

スクリプトエラーもブラウザ上に表示¶

デバッグも容易

In [5]:

%%writefile app.py
import streamlit as st

st.write("# Hello, Streamlit!")
raise ValueError

Overwriting app.py

`st.write`¶

引数に与えたオブジェクトを画面に表示
markdownはHTMLに変換して表示
listやdictは階層表示
ndarrayやpandasのDataFrameはテーブルとして表示

In [6]:

%%writefile app.py
import numpy as np
import pandas as pd
import streamlit as st

st.write([1, 2, 3])
st.write({"hello": "world!"})
st.write(np.arange(10).reshape(1,10))
st.write(pd.DataFrame(np.random.randn(10, 4), columns=["1", "2", "3", "4"]))

Overwriting app.py

本日紹介するダッシュボード¶

https://github.com/wrist/streamlit-dsp
- 窓関数ビューワ
- デジタルフィルタデザイナ
- pyroomacousticsを用いたシミュレータ
- espnet2のフロントエンド

ブランチ¶

master
heroku
- Herokuへのアップロードに必要なファイルを格納
espnet2
- 3.6.x系で動作させるため別ブランチ
- Steramlitのバージョンは0.66.0

github上のstreamlitアプリ¶

一般的には直接実行可能
- streamlit run https://github.com/user/repos.git/master/app.py
今回のアプリはimportの都合でエラーが生じる

窓関数ビューワの構築¶

scipy.signalを使用
Streamlitによるアプリ構築をライブコーディング的に実施

現状のダッシュボード
- window_viwer.py

窓関数の選択インタフェース¶

サイドバーにselectboxで表示
サイドバー上への配置
- st.sidebar.xxx
- st.xxxと本体に配置できるウィジェットは何でも配置可能

`st.selectbox`¶

st.selectbox(ラベル名, 選択肢のリスト, デフォルト項目のインデックス)

In [7]:

%%writefile app.py
import streamlit as st

windows = ["boxcar", "triang", "blackman", "hamming", "hann", "bartlett", "flattop",
           "parzen", "bohman", "blackmanharris", "nuttall", "barthann"]

Overwriting app.py

%%writefile -a app.pyでapp.pyに追記

In [8]:

%%writefile -a app.py

win_name = st.sidebar.selectbox("window", windows, 4)
st.write(win_name)

Appending to app.py

この時点の見た目

窓関数の窓長およびFFT長の取得¶

同様にst.selectboxで2の累乗の値を取得

In [9]:

%%writefile -a app.py
two_powers = [2**i for i in range(16)]
Nx = st.sidebar.selectbox("Window Length", two_powers, 8)
nfft = st.sidebar.selectbox("FFT Length", two_powers, 10)

st.write(win_name, Nx, nfft)

Appending to app.py

この時点での見た目

窓関数の取得および描画¶

窓関数の取得
- scipy.signal.get_window
- scipy.fft.fftで周波数分析
描画
- matplotlibをひとまず使用

必要なライブラリをimport

In [10]:

%%writefile -a app.py
import matplotlib.pyplot as plt
import numpy as np
import scipy.signal as sg
import scipy.fft as fft

Appending to app.py

窓関数を取得し周波数特性を計算

In [11]:

%%writefile -a app.py
eps = 1.e-12
win = sg.get_window(win_name, Nx)
W = 20.0 * np.log10(np.abs(fft.fft(win, nfft)) + eps)
W = fft.fftshift(W)

Appending to app.py

matplotlibを用いて描画

In [12]:

%%writefile -a app.py
fig, axes = plt.subplots(2, 1)
axes[0].plot(win)
axes[1].plot(W)
st.pyplot(fig)

Appending to app.py

`st.pyplot`¶

matplotlibのfigureを描画
- st.pyplot(fig)
使い慣れたmatplotlibを使える
- が、javascriptの恩恵が得られない

この時点での見た目

`streamlit`の描画ライブラリ¶

st.line_chart, st.area_chart, st.bar_chart
- st.altair_chartのsyntax sugar
- 手軽に使える反面細かい設定は不可能
その他vega, plotly, bokehなども使用可能

In [13]:

%%writefile -a app.py
st.line_chart(win)
st.line_chart(W)

Appending to app.py

st.line_chartの見た目

この時点でのファイルの内容¶

通常の実行スクリプトに近い
手軽にフロントエンドの作成が可能

In [14]:

!cat app.py | pygmentize

import streamlit as st

windows = ["boxcar", "triang", "blackman", "hamming", "hann", "bartlett", "flattop",
           "parzen", "bohman", "blackmanharris", "nuttall", "barthann"]

win_name = st.sidebar.selectbox("window", windows, 4)
st.write(win_name)
two_powers = [2**i for i in range(16)]
Nx = st.sidebar.selectbox("Window Length", two_powers, 8)
nfft = st.sidebar.selectbox("FFT Length", two_powers, 10)

st.write(win_name, Nx, nfft)
import matplotlib.pyplot as plt
import numpy as np
import scipy.signal as sg
import scipy.fft as fft
eps = 1.e-12
win = sg.get_window(win_name, Nx)
W = 20.0 * np.log10(np.abs(fft.fft(win, nfft)) + eps)
W = fft.fftshift(W)
fig, axes = plt.subplots(2, 1)
axes[0].plot(win)
axes[1].plot(W)
st.pyplot(fig)
st.line_chart(win)
st.line_chart(W)

複数の窓関数を同時に描画したい¶

st.multiselect(ラベル名, 選択肢のリスト, デフォルト項目の要素のリスト)
- 複数の選択項目をリストで返す
- 第三引数は選択肢中に存在する要素のリスト

先程と同じ

In [15]:

%%writefile app.py
import streamlit as st

windows = ["boxcar", "triang", "blackman", "hamming", "hann", "bartlett", "flattop",
           "parzen", "bohman", "blackmanharris", "nuttall", "barthann"]

Overwriting app.py

先程と同じ

In [16]:

%%writefile -a app.py

import matplotlib.pyplot as plt
import numpy as np
import scipy.signal as sg
import scipy.fft as fft

Appending to app.py

st.multiselectを使用

In [17]:

%%writefile -a app.py

# ここから先が異なる
win_names = st.sidebar.multiselect("window", windows, [windows[4]])
st.write(win_names)

Appending to app.py

win_namesをst.writeする以外は同じ

In [18]:

%%writefile -a app.py
two_powers = [2**i for i in range(16)]
Nx = st.sidebar.selectbox("Window Length", two_powers, 8)
nfft = st.sidebar.selectbox("FFT Length", two_powers, 10)

st.write(win_names, Nx, nfft)

Appending to app.py

win_namesをループで処理

In [19]:

%%writefile -a app.py
eps = 1.e-12
for win_name in win_names: # ループとして処理
    win = sg.get_window(win_name, Nx)
    W = 20.0 * np.log10(np.abs(fft.fft(win, nfft)) + eps)
    W = fft.fftshift(W)

Appending to app.py

In [20]:

%%writefile -a app.py
    # ループの続き
    st.write(win_name)
    st.line_chart(win)
    st.line_chart(W)

Appending to app.py

複数の窓が繰り返し描画される

複数の窓をまとめて描画したい¶

pandasのDataFrameの複数カラムにデータを押し込む
st.line_chartに渡す

先程と同じ

In [22]:

%%writefile app.py
import streamlit as st

windows = ["boxcar", "triang", "blackman", "hamming", "hann", "bartlett", "flattop",
           "parzen", "bohman", "blackmanharris", "nuttall", "barthann"]

Overwriting app.py

pandasを追加

In [23]:

%%writefile -a app.py
import matplotlib.pyplot as plt
import numpy as np
import scipy.signal as sg
import scipy.fft as fft
import pandas as pd  # 追加

Appending to app.py

先程と同じ

In [24]:

%%writefile -a app.py

win_names = st.sidebar.multiselect("window", windows, [windows[4]])
st.write(win_names)

Appending to app.py

先程と同じ

In [25]:

%%writefile -a app.py
two_powers = [2**i for i in range(16)]
Nx = st.sidebar.selectbox("Window Length", two_powers, 8)
nfft = st.sidebar.selectbox("FFT Length", two_powers, 10)

st.write(win_names, Nx, nfft)

Appending to app.py

窓と周波数特性をlistに格納

In [26]:

%%writefile -a app.py
eps = 1.e-12
win_ary = []; W_ary = []
for win_name in win_names: # ループとして処理
    win = sg.get_window(win_name, Nx)
    W = 20.0 * np.log10(np.abs(fft.fft(win, nfft)) + eps)
    W = fft.fftshift(W)
    win_ary.append(win)
    W_ary.append(W)

Appending to app.py

DataFrameに格納

In [27]:

%%writefile -a app.py
fs = 16000.0
t = np.arange(Nx)
f = (fs / nfft) * np.arange(-nfft/2, nfft/2)

df_win = pd.DataFrame(np.array(win_ary).T, index=t, columns=win_names)
df_W   = pd.DataFrame(np.array(W_ary).T,   index=f, columns=win_names)

Appending to app.py

In [28]:

%%writefile -a app.py
st.line_chart(df_win)
st.line_chart(df_W)

Appending to app.py

窓関数ビューワのまとめ¶

st.selectbox, st.multiselectを紹介
st.pyplot, st.line_chartの使い方を紹介

デジタルフィルタデザイナー¶

scipy.signalのデジタルフィルタ設計関数を用いたダッシュボードを作成
- 設計したフィルタをアップロードした音声に適用しブラウザ上で視聴
- 処理後の音声のダウンロードリンクを生成

現状のダッシュボード¶

filter_designer.py
- scipy.signal.firwinのみ対応

紹介する項目¶

数値入力
- st.number_input
チェックボックス
- st.checkbox
オーディオファイルのアップロード/ダウンロード
- st.file_uploader
- ダウンロードリンクは自力で作成
オーディオファイルのブラウザ上での再生
- st.audio

数値入力¶

サンプリングレート、タップ長、カットオフ周波数の入力
st.number_input(ラベル名, min_value, max_value, value)
- valueなどの型はintからfloatで統一する必要有

In [29]:

%%writefile app.py
import streamlit as st

fs = st.sidebar.number_input("Sampling Frequency", min_value=1,
                             max_value=192000, value=16000)
cutoff_hz = st.sidebar.number_input("cutoff [Hz]", min_value=0.0,
                                    max_value=fs/2.0, value=100.0)

Overwriting app.py

チェックボックス¶

st.checkbox(ラベル名, デフォルト真偽値)
- チェックが入った場合のみ実行させる動作を記述可能

In [30]:

%%writefile -a app.py

show_time_coeff = st.checkbox("time coefficient", value=True)
if show_time_coeff:
    pass  # do something

Appending to app.py

オーディオファイルのアップロード¶

st.file_uploader(ラベル名, type)
- typeは拡張子、リストも可能
- 返り値はBytesIOのサブクラス(UploadedFile)
  - file-like objectなのでファイルを要求する関数に渡せる

In [31]:

%%writefile -a app.py

import soundfile as sf
wav_file = st.sidebar.file_uploader("input wave file", type="wav")
if wav_file is not None:
    sig, wav_fs = sf.read(wav_file)  # file-likeなので渡せる
    st.line_chart(sig)

Appending to app.py

ファイルブラウズかドラッグアンドドロップでアップロード可能

オーディオファイルのブラウザ上での再生¶

st.audio(data)
- dataはファイル名、BytesIO、ndarrayなど
- rawデータやndarrayの場合はファイルヘッダーが必要

In [32]:

%%writefile -a app.py

if wav_file is not None:
    st.audio(wav_file)

Appending to app.py

chromeでの見た目

オーディオファイルの一括アップロード¶

st.file_uploader(ラベル名, type, encoding=None, accept_multiple_files=True)
- 最新版の0.68.0で導入
- 返り値がリストになるため音声データのバッチ処理が可能
- リロード時にうまく読み込めないバグがある?

In [33]:

%%writefile -a app.py

wav_files = st.sidebar.file_uploader("input wave files", encoding=None,
                                     type="wav", accept_multiple_files=True)
if wav_files is not None:
    for wav_fname in wav_files:
        sig, wav_fs = sf.read(wav_fname)
        st.line_chart(sig)

Appending to app.py

オーディオファイルのダウンロード¶

公式コンポーネントはまだない
workaroundが存在
- バイナリファイルをbase64エンコード
- aタグを生成しst.markdownで表示

ダウンロードリンクを作成するための関数

In [34]:

%%writefile -a app.py

import os
import base64
def get_binary_file_downloader_html(bin_file, file_label='File', extension=""):
    with open(bin_file, 'rb') as f:
        data = f.read()
    bin_str = base64.b64encode(data).decode()
    href = f'<a href="data:application/octet-stream;base64,{bin_str}" download="{os.path.basename(bin_file)}{extension}">Download {file_label}</a>'
    return href

Appending to app.py

入力ファイルを0.5倍した波形を一時ファイルに保存の上でダウンロードリンクを作成

In [35]:

%%writefile -a app.py

import tempfile
if wav_file is not None:
    sig, wav_fs = sf.read(wav_file)
    hsig = 0.5 * sig
    
    # 名前付き一時ファイルに保存
    fp = tempfile.NamedTemporaryFile()
    sf.write(fp.name, hsig, wav_fs, format="wav")
    st.audio(fp.name)
    
    # ダウンロードリンクを表示
    href = get_binary_file_downloader_html(fp.name, "filtered wave file", ".wav")
    st.markdown(href, unsafe_allow_html=True)

Appending to app.py

フィルタデザイナーのまとめ¶

数値入力とチェックボックスコンポーネントを紹介
オーディオファイルのアップロード、再生、ダウンロード方法

`pyroomacoustics`を用いたシミュレータ¶

pyroomacousticsのroomオブジェクト、音源、マイクをGUIで配置
RIR生成または伝搬シミュレーションを実行
- ※Streamlitのバージョン0.68.0ではシミュレーションでエラーが発生

現状のダッシュボード¶

room_designer.py
- Shoeboxのみ対応

紹介する内容¶

スライダー
- st.slider
ボタン
- st.button

スライダー¶

st.slider(ラベル名, min_value, max_value, value)
- valueの類は省略可能

rx = st.sidebar.slider("x", min_value=0.0, max_value=100.0)

ボタン¶

st.button(ラベル名)

ret = st.button("Simulate")
if ret:
    pass

アプリケーションのタブ化¶

現在タブ用コンポーネントはない
st.radioで代用可能
- ただしダッシュボードを切り替えると状態がリセットされる

`st.radio`をタブ代わりに使用¶

app.py

ret = st.sidebar.radio("app", ["window viewer", "filter designer", "room designer"])
print(ret)

if ret == "window viewer":
    window_viewer.main()
elif ret == "filter designer":
    filter_designer.main()
elif ret == "room designer":
    room_designer.main()

espnet2のフロントエンド¶

espnet2
- pythonのみで処理可能
- pre-trainedモデルをダウンロードする仕組みが存在
- https://github.com/espnet/espnet_model_zoo

ダッシュボード
- espnet2_loader.py
- asrのみ対応

モデルのダウンロード¶

table.csv記載のnameを打ち込むとモデルをダウンロード
- 問題点:標準出力がキャプチャできないためダウンロード進捗が不明

音声ファイルをアップロードすると波形を描画¶

デコードボタンクリックで音声認識を実行¶

モデルの情報を表示¶

Herokuへのデプロイ¶

実行環境として手軽に利用可能
- git push heroku local_branch:main
実際に稼働中
- https://streamlit-dsp.herokuapp.com
- free-dynoなので遅い

必要となるファイル¶

Procfile
Aptfile
requirements.txt
runtime.txt

`Procfile`¶

実行時のコマンドを記述
内容: web: streamlit run --server.enableCORS false --server.port $PORT streamlit_dsp/app.py

`runtime.txt`¶

ランタイムバージョンを指定する場合に必要
使用可能なランタイム
内容: Python 3.8.6

`Aptfile`¶

apt installする対象を記述
- soundfileライブラリがlibsndfileに依存
buildpackが必要
- heroku buildpacks:add heroku-community/apt
内容: libsndfile-dev

`requirements.txt`¶

依存ライブラリを記述
HerokuはPoetryに対応していない
- python-poetry-buildpack
  - pyproject.tomlからpush時に動的にrequirements.txtを生成
  - しかしエラー時に対処できないのでローカルで予め生成しておく
- poetry export -f requirements.txt --output requirements.txt

最終的な実行コマンド¶

必要なファイルが揃った上で下記を実行

$ heroku buildpacks:clear
$ heroku buildpacks:add heroku-community/apt
$ heroku buildpacks:add heroku/python
$ heroku create
$ git push heroku heroku:main
$ heroku open

その他の話題¶

ASTの書き換えによるコード生成¶

ほぼスクリプトライクに書けるため代入の上書きにより通常のスクリプトとして実行できるようにすることも可能
標準ライブラリastでコードを書き換えastorライブラリでコードを生成
そのまま実行できるものが出来上がるわけではないが取っ掛かりに便利

`st.cache`によるキャッシュ機構¶

時間のかかる計算や大きなモデルのダウンロードに対してキャッシュ動作を実現
ドキュメント
- キャッシュ機能を付与したい関数に@st.cacheというデコレータを付与
- 引数、返り値、本体内部の変化を監視

まだ足りないと感じる要素(1)¶

タブ
デフォルトの可視化コンポーネント
- 軸ラベルぐらい指定したい
複雑なレイアウト
- ベータ機能としてコンテナなどが追加

まだ足りないと感じる要素(2)¶

編集可能なテーブル
- フィルタ係数を入力して可視化することなどが困難
ユーザー認証および状態の永続化
- SessionState.pyを使う例
- https://discuss.streamlit.io/t/alternative-implementation-of-session-state/799

また足りないと感じる要素(3)¶

標準出力のキャプチャ
- 処理進捗を標準出力に出すコマンドで困る
- https://github.com/streamlit/streamlit/issues/268
  - contextlibでredirectは可能だが、非同期実行ができない
仕様の安定性
- 複数ファイルアップローダにおいて再読み込み時にエラーが発生

コンポーネントの自作¶

必要なコンポーネントは自作することが可能とのこと
https://docs.streamlit.io/en/stable/publish_streamlit_components.html

まとめ¶

自作のダッシュボードを通じてStreamlitについて紹介
デプロイ方法およびその他の話題を紹介

Streamlitを用いた音響信号処理ダッシュボードの開発(Tokyo BISH Bash #03発表資料)¶

自己紹介およびPyData Osakaの紹介¶

本日の概要¶

本日の資料¶

Streamlitとは¶

どんな場面で必要か¶

実例¶

GitHub Star History¶

Dashとの違い¶

Streamlitの魅力¶

Streamlitの情報¶

本発表におけるバージョン¶

基本機能の紹介¶

導入方法¶

実行方法¶

アプリ更新時の反映が容易¶

スクリプトエラーもブラウザ上に表示¶

st.write¶

本日紹介するダッシュボード¶

ブランチ¶

github上のstreamlitアプリ¶

窓関数ビューワの構築¶

窓関数の選択インタフェース¶

st.selectbox¶

窓関数の窓長およびFFT長の取得¶

窓関数の取得および描画¶

st.pyplot¶

streamlitの描画ライブラリ¶

この時点でのファイルの内容¶

複数の窓関数を同時に描画したい¶

複数の窓をまとめて描画したい¶

窓関数ビューワのまとめ¶

デジタルフィルタデザイナー¶

現状のダッシュボード¶

紹介する項目¶

数値入力¶

チェックボックス¶

オーディオファイルのアップロード¶

オーディオファイルのブラウザ上での再生¶

オーディオファイルの一括アップロード¶

オーディオファイルのダウンロード¶

フィルタデザイナーのまとめ¶

pyroomacousticsを用いたシミュレータ¶

現状のダッシュボード¶

紹介する内容¶

スライダー¶

ボタン¶

アプリケーションのタブ化¶

st.radioをタブ代わりに使用¶

espnet2のフロントエンド¶

モデルのダウンロード¶

音声ファイルをアップロードすると波形を描画¶

デコードボタンクリックで音声認識を実行¶

モデルの情報を表示¶

Herokuへのデプロイ¶

必要となるファイル¶

Procfile¶

runtime.txt¶

Aptfile¶

requirements.txt¶

最終的な実行コマンド¶

その他の話題¶

ASTの書き換えによるコード生成¶

st.cacheによるキャッシュ機構¶

まだ足りないと感じる要素(1)¶

まだ足りないと感じる要素(2)¶

また足りないと感じる要素(3)¶

コンポーネントの自作¶

まとめ¶

`st.write`¶

`st.selectbox`¶

`st.pyplot`¶

`streamlit`の描画ライブラリ¶

`pyroomacoustics`を用いたシミュレータ¶

`st.radio`をタブ代わりに使用¶

`Procfile`¶

`runtime.txt`¶

`Aptfile`¶

`requirements.txt`¶

`st.cache`によるキャッシュ機構¶