ぺーぱーの日々

上機嫌でいること、夢中でいることを目標に、今日も色んなことに手を出します。

MENU

WEBアプリをつくってみた。（表示メイン）

プログラミング

以下のサイトを参考に、Streamlitを使って、webアプリ？をつくってみました。

Python: Streamlit を使って手早く WebUI 付きのプロトタイプを作る - CUBE SUGAR CONTAINER

 

コードはpycharmで入力して、pycharm上で実行をする。（正確な表現かどうかは、わからない。）

１．’Hello World!’と表示させる

import streamlit as st

def main():
    st.write('Hello, World!')

if __name__ == '__main__':
    main()

２．基本的な書式を片っ端から表示してみる

import streamlit as st

def main():
    # タイトル
    st.title('Application title')
    # ヘッダ
    st.header('Header')
    # 普通のテキスト
    st.text('Something')
    # サブレベルヘッダ
    st.subheader('Sub header')
    # マークダウンテキスト
    st.markdown('**Markdown is a vailable **')
    # LaTeXテキスト
    st.latex(r'\bar{X} = \frac{1}{N} \sum_{n=1}^{N} x_i')
    # コードスニベット
    st.code('print(\'Hello, World!\')')
    # エラーメッセージ
    st.error('Error message')
    # 警告メッセージ
    # 情報メッセージ
    # 成功メッセージ
    # 例外の出力
    # 辞書の出力
    st.warning('Warning message')
    # 情報メッセージ
    st.info('Information message')
    # 成功メッセージ
    st.success('Success message')
    # 例外の出力
    st.exception(Exception('Oops!'))
    d = {
        'foo': 'bar',
        'user': [
            'alice',
            'bob',
        ],
    }
    st.json(d)

if __name__ == '__main__':
    main()

３．カウントダウンを表示

import time

import streamlit as st

def main():
    status_area = st.empty()

    count_down_sec = 5
    for i in range(count_down_sec):
        status_area.write(f'{count_down_sec - i} sec left')
        time.sleep(1)

    status_area.write('Happy Birthday!')
    st.balloons()

if __name__ == '__main__':
    main()

内容：５秒からカウントダウンとをして、カウントダウンが終わったら、’Happy Birthday!’が表示され、風船が沸き上がる。（沸き上がる？w）

技術：

status_area = st.empty()

count_down_sec = 5
for i in range(count_down_sec):
    status_area.write(f'{count_down_sec - i} sec left')
    time.sleep(1)

余白をstatus_areaという変数に入れる。

５秒から１秒ずつ数字を減らした数字をfor文で書く

用途：

誕生日のお祝い、新年の変わり目

４．Progressバーを表示する

import time

import streamlit as st

def main():
    status_text = st.empty()
    progress_bar = st.progress(0)

    for i in range(100):
        status_text.text(f'Progress: {i}%')
        progress_bar.progress(i + 1)
        time.sleep(0.1)

    status_text.text('Done')
    st.balloons()

if __name__ == '__main__':
    main()

内容：ダウンロード中みたいなバーを表示する

技術：streamlitのprogress()メソッドの活用

活用：ダウンロード中の表示

５．動的なグラフを表示

import time

import streamlit as st
import numpy as np

def main():
    x = np.random.random(size=(10, 2))
    line_chart = st.line_chart(x)

    for i in range(10):
        additional_data = np.random.random(size=(5,2))
        line_chart.add_rows(additional_data)
        time.sleep(0.5)

if __name__ == '__main__':
    main()

内容：0.5秒間隔で折れ線グラフが動的に表示される（表示されるデータの値はランダムなので、実行するたびに毎回違うグラフが表示される）

技術：

additional_data = np.random.random(size=(5,2))

nampyのランダムモジュールを使って、乱数を生成する。

 

６．地図の表示

import streamlit as st
import pandas as pd
import numpy as np

def main():
    data = {
        'lat': np.random.randn(100) / 100 + 34.41,
        'lon': np.random.randn(100) / 100 + 135.31,
    }
    map_data = pd.DataFrame(data)
    st.map(map_data)

if __name__ == '__main__':
    main()

内容：大阪近郊のどこかがランダムに地図上に表示される

技術：streamlitのmap()メソッド

活用：

笑ってこらえてのダーツの旅？（ダーツ投げてないけど）

 

７．ボタンを設置する

import streamlit as st


def main():
    if st.button('Top button'):
        st.write('Clicked')
    else:
        st.write('Not Clicked')

    if st.button('Bottom buttom'):
        st.write('Clicked')
    else:
        st.write('Not Clicked')
        
if __name__ == '__main__':
    main()

内容：ボタンを２つ配置して、直近で押されたボタンに「クリックされた」、もう一方に「クリックされていない」という表示がされる

技術：streamlitのbutton()メソッドを使う、if/elseを使う

活用：

入力フォーマットのsubmitボタンが押されていない時に、エラーメッセージを出すようにする

 

８．ラジオボタンを設置する

import streamlit as st


def main():
    selected_item = st.radio('Which do you like?',
                             {'dog', 'cat'})
    if selected_item == 'dog':
        dog_img = 'dog.jpg'
        st.image(dog_img)
    else:
        cat_img = 'cat.jpg'
        st.image(cat_img)

if __name__ == '__main__':
    main()

内容：「犬と猫のどちらが好きか」という二者択一の質問を表示させ、選択しを表示、選択したほうの画像が表示されるようになる

技術：streamlitのradio()メソッド

活用：

選択式のアンケートフォーム

 

９．Data/Timeインプット

from datetime import date

import streamlit as st

def main():
    birthday = st.date_input(
        'When is your birthday?',
        min_value = date(1900, 1, 1),
        max_value = date.today(),
        value = date(2000, 1, 1),
    )
    st.write('Birthday:', birthday)

if __name__ == '__main__':
    main()

内容：入力した日付を誕生日として表示

技術：streamlit,dateライブラリとのコラボ

活用：

（もう少し付け加えれば、）入力した日付の曜日が表示される

 

１０．フロー制御

import streamlit as st

def main():
    name = st.text_input(label='yuor name:')

    if len(name) < 1:
        st.warning('Please input your name')
        st.stop

    st.write('Hello,', name, '!')

if __name__ == '__main__':
    main()

内容：なにも入力されていなかったら、エラーメッセージを表示する

技術：streamlitのwarning()メソッド

活用：

アンケートフォームで回答必須な項目が、未入力の場合エラーを表示させる