Go to Qiita Advent Calendar 2024 Top
LoginSignup
165
149

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

@sypninNTTデータ先端技術

streamlitを使ったお手軽Webアプリ開発

Last updated at Posted at 2023-04-07

streamlitを使えばWebアプリケーションが簡単に作成できます。
この記事では、streamlitでよく使う機能をサンプルコードと共に紹介し、それらを組み合わせたWebアプリケーションの作成方法を紹介していこうと思います。

目次

1. はじめに
2. streamlitの基本的な使い方
3. streamlitの応用的な使い方
4. テキストマイニングアプリを開発してみる
5. streamlitの注意点
6. まとめ

1. はじめに

streamlitはPythonで簡単にWebアプリケーションを作成できるオープンソースのライブラリです。streamlitを使うことで、データの可視化や機械学習モデルのデバッグ、プロトタイプの作成など、様々な用途でWebアプリケーションを作成することができます。

また、streamlitは簡単なコードで高度なUIを作成することができ、ウェブフレームワークのような複雑な設定やコーディングは必要ありません。そのため、Pythonの初心者や、Webアプリケーション作成に慣れていない人でも簡単に使いこなすことができます。

2. streamlitの基本的な使い方

2.1 streamlitのインストール方法

まずはstreamlitをインストールしましょう。以下のコマンドを実行することでstreamlitをインストールすることができます。(Python3.7以上必須)

$ pip install streamlit

2.2 サンプルコードの実行方法

streamlitをインストールしたらサンプルコードとして下記の内容でapp.pyというファイルを作成してみましょう。

import streamlit as st

input_num = st.number_input('Input a number', value=0)

result = input_num ** 2
st.write('Result: ', result)

ファイルを作成したら、以下のコマンドを実行して、サンプルコードを実行してみましょう。

$ streamlit run app.py

上記のコマンドを実行することで、streamlitが立ち上がり、Webアプリケーションが表示されます。アプリケーションには8501番ポートがデフォルトで使用されます。ブラウザから8501番ポートにアクセスすると実行されているアプリケーションを確認することができます。例えば8080番にポートを変更したい場合は以下のようにコマンドを変更します。

$ streamlit run app.py --server.port 8080

サンプルコードでは、ユーザが入力した値を2乗して表示するだけの簡単なアプリケーションが作成されています。
image.png

2.3 基本的なコンポーネントの使い方

streamlitでは様々なコンポーネントを使って、簡単にWebアプリケーションを作成することができます。以下では、streamlitでよく使われる基本的なコンポーネントの使い方を紹介します。

  • タイトルの表示

    import streamlit as st

st.title('streamlit Tutorial')

  • ヘッダーの表示

    import streamlit as st

st.header('This is a header')

  • サブヘッダーの表示

    import streamlit as st

st.subheader('This is a subheader')

  • テキストの表示

    import streamlit as st

st.text('Hello World!')

    image.png

  • Merkdown表記でのテキストの表示

    import streamlit as st

# st.write()はMarkdown表記対応
st.write('# headline1')
# 以下のように明示的に書くことも可能
st.markdown('# headline2')

    image.png

  • リストの表示

    import streamlit as st

st.write(['apple', 'orange', 'banana'])

    image.png

  • DataFrameの表示

    import streamlit as st
import pandas as pd

# ダミーデータの作成
df = pd.DataFrame({
    'name': ['Alice', 'Bob'],
    'age': [25, 30],
    'gender': ['female', 'male']
})

# DataFrameを表示
st.write(df)
# st.dataframe()でも表示可能
st.dataframe(df)

    image.png

  • ファイルのアップロード

    import streamlit as st

uploaded_file = st.file_uploader("Choose a file")
if uploaded_file is not None:
    st.write(uploaded_file)

    image.png

  • ボタンの表示

    import streamlit as st

if st.button('Say hello'):
    st.write('Hello World!')

    image.png

  • チェックボックスの表示

    import streamlit as st

if st.checkbox('Show/Hide'):
    st.write('Some text')

    image.png

  • ラジオボタンの表示

    import streamlit as st

option = st.radio(
    'Which number do you like best?', 
    ['1', '2', '3']
)

    image.png

  • セレクトボックスの表示

    import streamlit as st

option = st.selectbox(
    'Which number do you like best?', 
    ['1', '2', '3']
)

    image.png

  • マルチセレクトボックスの表示

    import streamlit as st

options = st.multiselect(
    'What are your favorite colors',
    ['Green', 'Yellow', 'Red', 'Blue'],
    default=['Yellow', 'Red'] # デフォルトの設定
)

    image.png

  • スライダーの表示

    import streamlit as st

value = st.slider('Select a value', 0, 100, 50) # min, max, default

    image.png

  • テキスト入力の表示

    import streamlit as st

# テキスト入力ボックス
text_input = st.text_input('Input', 'Input some text here.')
# テキストエリア
text_area = st.text_area('Text Area', 'Input some text here.')

    image.png

  • ぐるぐるマークの表示

    import streamlit as st
import time

# ボタンを押したら3秒間出力を待つ
if st.button('start'):
    with st.spinner('processiong...'):
        time.sleep(3)
        st.write('end!')

    image.png

  • サイドバーの表示

    import streamlit as st

# Sidebarの選択肢を定義する
options = ["Option 1", "Option 2", "Option 3"]
choice = st.sidebar.selectbox("Select an option", options)

# Mainコンテンツの表示を変える
if choice == "Option 1":
    st.write("You selected Option 1")
elif choice == "Option 2":
    st.write("You selected Option 2")
else:
    st.write("You selected Option 3")

    image.png

  • カラムの分割

    import streamlit as st
import pandas as pd

# ダミーデータの作成
df = pd.DataFrame({
    'name': ['Alice', 'Bob'],
    'age': [25, 30],
    'gender': ['female', 'male']
})

# 2列のカラムを作成
col1, col2 = st.columns(2)

# col1にテキストを表示
with col1:
    st.header("Column 1")
    st.write("This is column 1.")

# col2にDataFrameを表示
with col2:
    st.header("Column 2")
    # DataFrameを表示
    st.write(df)

    image.png

以上が基本的なコンポーネントの使い方です。これらのコンポーネントを組み合わせることで、簡単なWebアプリケーションを作成することができます。

3. streamlitの応用的な使い方

3.1 グラフの描画

streamlitでは簡単にグラフを描画することができます。以下はMatplotlibを使って簡単なグラフを描画するサンプルコードです。

import streamlit as st
import numpy as np
import matplotlib.pyplot as plt

# Warningの非表示
st.set_option('deprecation.showPyplotGlobalUse', False)

# グラフを描画する
def plot_graph():
    x = np.linspace(0, 10, 100)
    y = np.sin(x)
    plt.plot(x, y)
    st.pyplot()

# グラフを表示するボタンを表示する
if st.button('Plot graph'):
    plot_graph()

このコードではplot_graph()メソッドを定義し、Matplotlibを使ってグラフを描画しています。その後、ボタンを表示し、ボタンをクリックするとplot_graph()メソッドが呼び出されてグラフが表示されます。
image.png

3.2 データベースとの連携

streamlitでは様々なデータベースと連携をすることができます。以下はSQLiteを使って簡単なデータベースと連携するサンプルコードです。

import streamlit as st
import sqlite3

# データベースに接続する
conn = sqlite3.connect('example.db')
c = conn.cursor()

# データを表示する
def show_data():
    c.execute('SELECT * FROM users')
    data = c.fetchall()
    for d in data:
        st.write(d)

# データを追加する
def add_data(name, age):
    c.execute('INSERT INTO users (name, age) VALUES (?, ?)', (name, age))
    conn.commit()
    st.write('Data added. Please reload page.')

# データベースにテーブルを作成する
c.execute('CREATE TABLE IF NOT EXISTS users (id INTEGER PRIMARY KEY AUTOINCREMENT, name TEXT, age INTEGER)')

# データの表示
show_data()

# データの追加
name = st.text_input('Name')
age = st.number_input('Age')
if st.button('Add data'):
    add_data(name, age)

# データベースをクローズする
conn.close()

このコードではSQLiteを使ってusersテーブルを作成し、show_data()メソッドでデータを表示しています。また、add_data()メソッドを使って、ユーザが入力したデータをデータベースに追加することができます。
image.png

3.3 機械学習のモデルの可視化

streamlitでは機械学習のモデルを可視化することができます。以下はscikit-learnを使って簡単な機械学習モデルを作成し、そのモデルを可視化するサンプルコードです。

import streamlit as st
from sklearn.datasets import load_iris
from sklearn.tree import DecisionTreeClassifier, plot_tree

# Warningの非表示
st.set_option('deprecation.showPyplotGlobalUse', False)

# データをロードする
iris = load_iris()
X, y = iris.data, iris.target

# モデルを学習する
model = DecisionTreeClassifier()
model.fit(X, y)

# モデルを可視化する
def plot_model():
    plot_tree(model)
    st.pyplot()

# モデルを表示するボタンを表示する
if st.button('Plot model'):
    plot_model()

このコードではDecisionTreeClassifierを使ってIrisデータセットを学習し、plot_model()メソッドでモデルを可視化しています。その後、ボタンを表示し、ボタンをクリックするとplot_model()メソッドが呼び出されてモデルが表示されます。
image.png

以上が、streamlitを使った応用的な使い方の一例です。様々な用途でstreamlitを使うことができるため、自分のプロジェクトに合わせて使い方を考えることが大切です。

4. テキストマイニングアプリを開発してみる

本章では、例としてstreamlitを使ったテキストマイニングのWebアプリケーションの作成方法を紹介します。

テキストマイニングは、大量のテキストデータから有用な情報やパターンを抽出する技術であり、ビジネスや学術分野で重要な役割を果たしています。

筆者自身が自然言語処理関係の業務が多いため、streamlitを利用して簡単に利用できるWebアプリケーションを作成してみました。

このアプリでは、テキストファイルからワードクラウドや品詞別の単語出現頻度表を表示することができます。

ワードクラウドは文章やテキストデータの中で頻出する単語を視覚的に表現する手法です。頻出する単語ほど大きく表示され、その単語が文章内で占める重要度が高いことを表現します。ワードクラウドは情報の可視化やデータ分析に使用され、文章の特徴やトピックを把握する上で有用なツールとして利用されています。

Dockerfile

FROM python:3.9

# mecabのインストール
RUN apt-get update && apt-get install -y \
    mecab \
    libmecab-dev \
    mecab-ipadic-utf8 \
    git \
    make \
    curl \
    xz-utils \
    file \
    sudo \
    wget
  
# neologdのインストール
RUN git clone --depth 1 https://github.com/neologd/mecab-ipadic-neologd.git && \
    cd mecab-ipadic-neologd && \
    ./bin/install-mecab-ipadic-neologd -n -y && \
    echo dicdir = `mecab-config --dicdir`"/mecab-ipadic-neologd">/etc/mecabrc && \
    cp /etc/mecabrc /usr/local/etc

WORKDIR /opt/app-root/src
COPY ./src /opt/app-root/src

# フォントのダウンロード
RUN wget https://moji.or.jp/wp-content/ipafont/IPAexfont/ipaexg00401.zip
RUN unzip ipaexg00401.zip && rm -f ipaexg00401.zip

# ライブラリのインストール
RUN pip install streamlit mecab-python3 wordcloud

docker-compose.yml

version: '3'

services:
  app:
    build:
      context: .
      dockerfile: Dockerfile
    ports:
      - "8501:8501"
    command: streamlit run app.py --server.port 8501

app.py

import io
import MeCab
import pandas as pd
import streamlit as st
from collections import Counter
from wordcloud import WordCloud

# ページのレイアウトを設定
st.set_page_config(
    page_title="テキスト可視化",
    layout="wide", # wideにすると横長なレイアウトに
    initial_sidebar_state="expanded"
)

# タイトルの設定
st.title("テキスト可視化")

# サイドバーにアップロードファイルのウィジェットを表示
st.sidebar.markdown("# ファイルアップロード")
uploaded_file = st.sidebar.file_uploader(
    "テキストファイルをアップロードしてください", type="txt"
)

# ワードクラウド、出現頻度表の各処理をサイドバーに表示
st.sidebar.markdown("# 可視化のオプション")
if uploaded_file is not None:
    # 処理の選択
    option = st.sidebar.selectbox(
        "処理の種類を選択してください", ["ワードクラウド", "出現頻度表"]
    )
    # ワードクラウドの表示
    if option == "ワードクラウド":
        pos_options = ["名詞", "形容詞", "動詞", "副詞", "助詞", "助動詞", "接続詞", "感動詞", "連体詞", "記号", "未知語"]
        # マルチセレクトボックス
        selected_pos = st.sidebar.multiselect("品詞選択", pos_options, default=["名詞"])
        if st.sidebar.button("生成"):
            st.markdown("## ワードクラウド")
            with st.spinner("Generating..."):
                io_string = io.StringIO(uploaded_file.getvalue().decode("shift-jis"))
                text = io_string.read()
                tagger = MeCab.Tagger()
                node = tagger.parseToNode(text)
                words = []
                while node:
                    if node.surface.strip() != "":
                        word_type = node.feature.split(",")[0]
                        if word_type in selected_pos: # 対象外の品詞はスキップ
                            words.append(node.surface)
                    node = node.next
                word_count = Counter(words)
                wc = WordCloud(
                    width=800,
                    height=800,
                    background_color="white",
                    font_path="./ipaexg00401/ipaexg.ttf", # Fontを指定
                )
                # ワードクラウドを作成
                wc.generate_from_frequencies(word_count)
                # ワードクラウドを表示
                st.image(wc.to_array())
    
    # 出現頻度表の表示
    elif option == "出現頻度表":
        pos_options = ["名詞", "形容詞", "動詞", "副詞", "助詞", "助動詞", "接続詞", "感動詞", "連体詞", "記号", "未知語"]
        # マルチセレクトボックス
        selected_pos = st.sidebar.multiselect("品詞選択", pos_options, default=pos_options)
        if st.sidebar.button("生成"):
            st.markdown("## 出現頻度表")
            with st.spinner("Generating..."):
                io_string = io.StringIO(uploaded_file.getvalue().decode("shift-jis"))
                text = io_string.read()
                tagger = MeCab.Tagger()
                node = tagger.parseToNode(text)

                # 品詞ごとに出現単語と出現回数をカウント
                pos_word_count_dict = {}
                while node:
                    pos = node.feature.split(",")[0]
                    if pos in selected_pos:
                        if pos not in pos_word_count_dict:
                            pos_word_count_dict[pos] = {}
                        if node.surface.strip() != "":
                            word = node.surface
                            if word not in pos_word_count_dict[pos]:
                                pos_word_count_dict[pos][word] = 1
                            else:
                                pos_word_count_dict[pos][word] += 1
                    node = node.next

                # カウント結果を表にまとめる
                pos_dfs = []
                for pos in selected_pos:
                    if pos in pos_word_count_dict:
                        df = pd.DataFrame.from_dict(pos_word_count_dict[pos], orient="index", columns=["出現回数"])
                        df.index.name = "出現単語"
                        df = df.sort_values("出現回数", ascending=False)
                        pos_dfs.append((pos, df))

                # 表を表示
                for pos, df in pos_dfs:
                    st.write(f"【{pos}】")
                    st.dataframe(df, 400, 400)
else:
    # テキスト未アップロード時の処理
    st.write("テキストファイルをアップロードしてください。")

ディレクトリ構成

.
├ src/
│　└ app.py
├ Dockerfile
└ docker-compose.yml

アプリの起動

docker-compose.ymlのあるディレクトリで以下のコマンドを実行し、コンテナをビルド&起動します。

$ docker-compose up

ブラウザでアプリを実行

コンテナが起動したら、ブラウザからlocalhost:8501にアクセスします。
image.png

ためしに、夏目漱石の『こころ』を分析してみます。
(https://www.aozora.gr.jp/cards/000148/card773.html)

  1. ワードクラウド

    • 名詞のみ
      image.png

    • 名詞・動詞・形容詞
      image.png

  2. 出現頻度表
    image.png

    ちなみに「K」は人名としては取れないみたいです(そりゃそうか)。
    image.png

5. streamlitの注意点

5.1 リロード時の挙動

streamlitはブラウザで実行されるアプリケーションのため、リロード時に全てのデータがリセットされます。そのため、ユーザが入力したデータや選択したオプションなどを再度入力する必要があります。データの保持については後述します。

5.2 データの保持

streamlitはリロード時に全てのデータがリセットされますが、データを保持する方法もあります。streamlitのバージョン0.85以降、st.session_stateという機能が追加されました。これを利用すると簡単にデータの保持が可能となります。

  • st.session_stateを利用しない場合

    import streamlit as st

# ボタンが押された回数
count = 0

# ボタンを表示し、クリックされた回数を表示する
if st.button("Click me"):
    count += 1

st.write(f"You clicked the button {count} times.")

    何度クリックしても値は1のままでカウントできません。
    image.png

  • st.session_stateを利用した場合

    import streamlit as st

# ボタンが押された回数を保持する
if "count" not in st.session_state:
    st.session_state.count = 0

# ボタンを表示し、クリックされた回数を表示する
if st.button("Click me"):
    st.session_state.count += 1

st.write(f"You clicked the button {st.session_state.count} times.")

    クリック回数が保持されるのでクリックするごとに値が増えていきます。
    image.png

参考: 【Streamlit】Session Stateで変数の値を保持する方法

5.3 セキュリティ

streamlitはブラウザで実行されるため、セキュリティ上の注意が必要です。例えば、ユーザが入力したデータをそのままデータベースに保存する場合はSQLインジェクション攻撃に注意する必要があります。また、ユーザがアップロードしたファイルについても、ウイルス対策などのセキュリティ対策が必要です。

5.4 パフォーマンス

streamlitはブラウザで実行されるため、大量のデータを処理する場合にはパフォーマンスの問題が発生する可能性があります。特にグラフの描画などはデータ量によっては処理に時間がかかることがあります。そのため、大量のデータを処理する場合にはバックエンドでの処理を検討する必要があります。

5.5 バージョンアップ

streamlitは比較的新しいライブラリであり、バージョンアップによって大きな変更がされることがあります。そのためアップデート時には注意が必要です。

6. まとめ

streamlitはPythonでWebアプリケーションを簡単に作成することができるフレームワークです。

streamlitの主なメリットは、簡単なコーディング、リアルタイム更新、カスタマイズがしやすい点です。また、Pythonのライブラリを利用することで高度なデータ分析や機械学習のモデルの可視化が可能になり、様々な用途に活用することができます。

165
149
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
165
149

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?