<jupyter_start><jupyter_text>ページのUIStreamlitにおける、ページのUI（ユーザーインターフェイス）の設定方法について学びます。  ●ライブラリのインストールStreamlit、およびアプリの動作の確認に使用する「ngrok」をインストールします。<jupyter_code>!pip install streamlit==1.7.0 --quiet
!pip install pyngrok==4.1.1 --quiet<jupyter_output><empty_output><jupyter_text>Streamlit、およびngrokをインポートしておきます。  エラーが発生する場合は、「ランタイム」→「ランタイムを再起動」によりランタイムを再起動し、再びコードセルを上から順に実行しましょう。<jupyter_code>import streamlit as st
from pyngrok import ngrok<jupyter_output><empty_output><jupyter_text>●ページのUI様々なUIのコードを、「app.py」に書き込みます。<jupyter_code>%%writefile app.py
# 以下を「app.py」に書き込み
import streamlit as st
import numpy as np
import pandas as pd

# ---------- スライダー ----------
st.title("st.slider()")
x = st.slider("xの値")
st.write(str(x) + "の2乗は" + str(x**2))

# ---------- ボタン ----------
st.title("st.button()")
if st.button("Morning?"):
    st.write("Good morinig!")
else:
    st.write("Helllo!")

# ---------- テキスト入力 ----------
st.title("st.text_input()")
st.text_input("お住まいの国", key="country")
st.session_state.country  # keyでアクセス

# ---------- チェックボックス ----------
st.title("st.checkbox()")
is_agree = st.checkbox("同意しますか？")
if is_agree:
    st.write("了解です！")
else:
    st.write("残念です！")

# ---------- セレクトボックス ----------
st.title("st.selectbox()")
df_select = pd.DataFrame({
    "col1": [11, 12, 13, 14],
    "col2": [111, 112, 113, 114]
    })
selected = st.selectbox(
    "どの番号を選びますか？",
     df_select["col2"])
st.write("あなたは" + str(selected) + "番を選びました！")

# ---------- サイドバー ----------
st.title("st.sidebar")

y = st.sidebar.slider("yの値")
st.write(str(y) + "の2倍は" + str(y*2))

df_side = pd.DataFrame({
    "animal": ["犬", "猫", "兎", "象", "蛙"],
    "color": ["赤", "青", "黄", "白", "黒"]
    })
selected_side = st.sidebar.selectbox(
    "どの動物を選びますか？",
     df_side["animal"])
st.write("あなたは" + str(selected_side) + "を選びました！")<jupyter_output><empty_output><jupyter_text>●Authtokenの設定ngrokで接続するために必要な「Authtoken」を設定します。  以下のコードの、  `!ngrok authtoken YourAuthtoken`  における  `YourAuthtoken`の箇所を、自分のAuthtokenに置き換えます。  Authtokenは、ngrokのサイトに登録すれば取得することができます。  https://ngrok.com/<jupyter_code>!ngrok authtoken YourAuthtoken<jupyter_output><empty_output><jupyter_text>●アプリの起動と動作確認streamlitの`run`コマンドでアプリを起動します。<jupyter_code>!streamlit run app.py &>/dev/null&  # 「&>/dev/null&」により、出力を非表示にしてバックグランドジョブとして実行<jupyter_output><empty_output><jupyter_text>ngrokのプロセスを終了した上で、新たにポートを指定して接続します。  接続の結果、urlを取得できます。  ngrokの無料プランでは同時に1つのプロセスしか動かせないので、エラーが発生した場合は「ランタイム」→「セッションの管理」で不要なGoogle Colabのセッションを修了しましょう。<jupyter_code>ngrok.kill()  # プロセスの修了
url = ngrok.connect(port="8501")  # 接続<jupyter_output><empty_output><jupyter_text>urlを表示し、リンク先でアプリが動作することを確認します。<jupyter_code>print(url)<jupyter_output><empty_output>
{'fraction_non_alphanumeric': 0.20613542835765059, 'fraction_numerical': 0.01421623643845866, 'mean_word_length': 5.262295081967213, 'pattern_counts': {'":': 4, '<': 29, '<?xml version=': 0, '>': 31, 'https://': 1, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'chain_length': '7', 'dir': 'jupyter-structured-clean-dedup', 'id': '352294', 'license': 'MIT', 'n_tokens_mistral': 1484, 'n_tokens_neox': 1443, 'n_words': 131, 'path': 'section_2/03_ui.ipynb', 'repo_name': 'yukinaga/ai_webapp', 'size': '2673'}