StreamlitでWEBアプリ作成

StreamlitでWEBアプリの作成を試してみました。

WEBアプリの開発は学習コストが高そうで一歩踏み込めなかったのですが、Streamlitを使えば簡単に開発ができそうなので、面白そうだなと思い、手を出してみました。

Streamlitとは

StreamlitとはPythonだけでWEBアプリを爆速で作成できるフレームワークとなります。

一般的なWEBアプリ開発ではフロントエンド(HTML/CSS/JavaScript)とバックエンド(Python/Ruby等)の知識が必要ですが、StreamlitではPythonスクリプトを書くだけでWEBアプリの開発が可能となっています。

凝ったデザインのUIは作れないですが、単純なUIのWEBアプリについては爆速で作れます。

Pythonで豊富な機械学習系のライブラリも使えるため、データサイエンティストの人たちによく使われているみたいです。

Streamlitを試してみる

Streamlitで"Hello World"だけ表示するWEBアプリを作ってみました。

1. ライブラリをインストール

pip install streamlit

2. コード(hello_world.py)を書く

import streamlit as st

st.write("Hello World")

3. 実行する

streamlit run hello_world.py
図:実行ログ
図:実行ログ

4. 表示されたURL(Local URL or Network URL)を開く(※筆者の環境ではWSL2を使っているためか、ブラウザが自動で開かなかった)

図:実行結果
図:実行結果

おー確かに大分簡単ですね!

WEBアプリをデプロイ

どうぶつ語のボイスチェンジャーをWEBアプリで作ってみて、それをデプロイしてみました。

必要なファイルを準備

以下の2つのファイルを用意します。

app.py:作成したメインのプログラム

app.py(クリックで展開)
import streamlit as st
import librosa
import matplotlib.pyplot as plt
import numpy as np
import soundfile as sf
import io
import resampy
import pyworld as pw

# ページ設定
st.set_page_config(page_title="どうぶつ語ボイスチェンジャー", layout="centered")

st.title("どうぶつ語ボイスチェンジャー")
st.write("音声をアップロードして、どうぶつ語に加工しましょう。")

# 重い処理をキャッシュする関数
@st.cache_data
def animal_voice_effect( x, fs, speed, f0_base):
    # 基本周波数、スペクトル包絡、非周期指標の抽出
    _f0, t = pw.dio(x, fs)  # 基本周波数の抽出
    f0 = pw.stonemask(x, _f0, t, fs)  # 基本周波数の修正
    sp = pw.cheaptrick(x, f0, t, fs)  # スペクトル包絡の抽出
    ap = pw.d4c(x, f0, t, fs)  # 非周期性指標の抽出

    # 基本周波数の変化の抑制
    f0[f0>0] = (f0[f0>0] - f0_base) * 0.1 + f0_base
    synthesized = pw.synthesize(f0, sp, ap, fs)

    ## 早送り再生(リサンプリング)
    fs_new = int(fs/speed)
    y = resampy.resample(synthesized, sr_orig=fs, sr_new=fs_new)

    return y

uploaded_file = st.file_uploader("音声ファイルを選択", type=['mp3', 'wav', 'ogg'])

if uploaded_file is not None:

    st.subheader("加工前の音声")
    # アップロードファイルの表示
    st.audio(uploaded_file)

    # データの読み込み
    with st.spinner('読み込み中...'):
        y, sr = librosa.load(uploaded_file)
        y = y.astype(np.float64)

    st.subheader("加工後の音声")

    # サイドバーやカラムを使って設定UIを作成
    col1, col2 = st.columns(2)
    with col1:
        speed = st.slider("音声速度 [倍]", 1.5, 3.0, 2.0)
    with col2:
        f0 = st.slider("声の高さ [Hz](基本周波数:F0)", 50, 400, 200)

    # 実行ボタン(スライダーを動かしただけでは重い処理をさせない)
    with st.spinner("エフェクトを計算中..."):
        # エフェクト処理
        y_processed = animal_voice_effect( y, sr, speed, f0 )

        # プレビュー再生
        preview_io = io.BytesIO()
        sf.write(preview_io, y_processed, sr, format='WAV')
        st.audio(preview_io.getvalue(), format='audio/wav')

else:
    st.info("音声をアップロードしてください。")

requirements.txt:アプリを動かすのに必要なライブラリのリスト

setuptools==80.9.0  # pyworldで必要
streamlit
librosa
soundfile
matplotlib
numpy
pyworld
resampy

GitHub にアップロード

1. GitHubで新しいリポジトリ(例:animal_voice_changer)を作成

2. 作成した2つのファイルをアップロード(Push)

図:GitHubにアップロードした様子
図:GitHubにアップロードした様子

Streamlit Community Cloud で公開

1. Streamlit Community Cloud にアクセスし、GitHubアカウントでサインイン

2. 「Create app」ボタンを押す

図:「Create app」ボタンの場所
図:「Create app」ボタンの場所

3. 「Deploy a public app from GitHub」を選択

図:「Deploy a public app from GitHub」を選択
図:「Deploy a public app from GitHub」を選択

4. GitHubのリポジトリ、ブランチ(main)、メインファイル(app.py)などを選択してデプロイ

図:デプロイするリポジトリなどを選択
図:デプロイするリポジトリなどを選択

上記の手順でデプロイすることで、https://animalvoicechanger.streamlit.appに移動するとどうぶつ語ボイスチェンジャーのページがあります。

図:どうぶつ語ボイスチェンジャーのページ
図:どうぶつ語ボイスチェンジャーのページ

おわりに

本記事では Streamlit によるWEBアプリ開発を試してみました。

これまでにFlaskやFast APIとかでWEBアプリを作成しようと思ったことはありましたが、学習コストが高そうで足踏みしていました。それが Streamlit では想像以上にWEBアプリのデプロイが簡単でとても驚いています。

UIデザインもこだわりはないので、今後のWEBアプリの開発で使っていきたいなと思います。