Streamlit パートマスタリング入力ウィジェット

Streamlit で入力ウィジェットをマスターする: 包括的なガイド

?コードを取得: GitHub - jamesbmour/blog_tutorials

?関連する Streamlit チュートリアル:JustCodeIt

Streamlit は、Python を使用して Web アプリケーションを作成する方法に革命をもたらしました。そのシンプルさと強力さにより、データ サイエンティストと開発者の両方にとって優れた選択肢となります。この投稿では、Streamlit の最も強力な機能の 1 つである入力ウィジェットについて詳しく説明します。 16 の異なる入力タイプを検討し、Streamlit アプリでそれらを効果的に使用する方法を示します。

Streamlit アプリのセットアップ

ウィジェットの説明に入る前に、Streamlit アプリをセットアップしましょう:

import streamlit as st

st.set_page_config(layout="wide")
st.title("Streamlit Part 4: Inputs in Streamlit")

col1, col2 = st.columns(2)

Streamlit をインポートし、ページをワイド レイアウトに設定し、タイトルを追加し、ウィジェットをより適切に整理するために 2 つの列を作成しました。

ボタン入力

1. 基本ボタン

最も単純な入力形式はボタンです。作成方法は次のとおりです:

with col1:
    st.subheader("1. Button")
    btn1 = st.button("Click Me", key="button", help="Click me to see the magic", type='secondary', disabled=False)
    if btn1:
        st.write("Button Clicked")

詳細な説明:

• st.button() 関数は、クリック可能なボタンを作成します。
• key: ボタンの一意の識別子。複数のボタンがある場合に便利です。
• help: ボタンの上にマウスを置いたときに表示されるツールヒント テキスト。
• type: ボタンの外観 (「プライマリ」、「セカンダリ」など) を決定します。
• 無効: True に設定すると、ボタンはグレー表示になりクリックできなくなります。

使用例:

• データ処理またはモデルトレーニングのトリガー
• フォームの送信
• データまたはグラフの更新

ヒント: ボタンの状態を使用して、セクションの表示/非表示や計算のトリガーなど、アプリのフローを制御します。

2.リンクボタン

ユーザーを外部リンクにリダイレクトするには、リンク ボタンを使用します:

st.subheader("2. Link Button")
if st.link_button("Click Me", "<https://www.streamlit.io/>"):
    st.write("Link Button Clicked")

詳細な説明:

• st.link_button() は、クリックすると指定された URL で新しいタブを開くボタンを作成します。
• 最初の引数はボタンのテキスト、2 番目の引数は URL です。

使用例:

• ドキュメントまたは外部リソースへのリンク
• ソーシャルメディアプロフィールへのリダイレクト
• 関連する Web アプリケーションへの接続

ヒント: ユーザーを不必要にアプリから遠ざけないよう、リンク ボタンの使用は控えめにしてください。

3. ダウンロードボタン

ユーザーがアプリからファイルを直接ダウンロードできるようにします:

st.subheader("3. Download Button")
if st.download_button("Download Me", "hello world", "hello.txt", mime='text/plain'):
    st.write("Download Button Clicked")

詳細な説明:

• st.download_button() は、クリックされたときにファイルのダウンロードをトリガーするボタンを作成します。
• 引数: ボタンのラベル、ファイルの内容、ファイル名、MIME タイプ。
• MIME タイプはファイルのタイプを指定します (例: .txt の場合は「text/plain」、.pdf の場合は「application/pdf」)。

使用例:

• 生成されたレポートまたはデータをダウンロードする
• 処理された画像またはグラフの保存
• ユーザー作成コンテンツのエクスポート

ヒント: ユーザーの操作やデータ処理の結果に基づいてファイルのコンテンツを動的に生成できます。

選択ウィジェット

4. チェックボックス

チェックボックスはオプションの切り替えに最適です:

st.subheader("4. Checkbox")
checkbox_val = st.checkbox("Check Me", value=False)
if checkbox_val:
    st.write("Checkbox Checked")

詳細な説明:

• st.checkbox() は切り替え可能なチェックボックスを作成します。
• value パラメーターは初期状態 (True/False) を設定します。

使用例:

• アプリの機能の有効化/無効化
• リストから複数のオプションを選択する
• 簡単なはい/いいえの質問を作成する

ヒント: チェックボックスを使用して、アプリ内の他の要素の表示/非表示を制御し、より動的なユーザー エクスペリエンスを実現します。

5. ラジオボタン

ユーザーがリストからオプションを 1 つ選択する必要がある場合:

st.subheader("5. Radio")
radio_val = st.radio("Select Color", ["Red", "Green", "Blue"], index=0)
if radio_val:
    st.write(f"You selected {radio_val}")

詳細な説明:

• st.radio() はラジオ ボタンのセットを作成します。
• 最初の引数はラベルで、その後にオプションのリストが続きます。
• インデックスは、デフォルトで選択されたオプション (0 ベース) を指定します。

使用例:

• 相互に排他的なオプションの選択
• アプリのモードまたはテーマを設定する
• カテゴリに基づいてデータをフィルタリングする

ヒント: 相互に排他的な少数のオプション (通常は 2 ～ 5) がある場合は、ラジオ ボタンを使用します。

6. セレクトボックス

ドロップダウン選択の場合:

st.subheader("6. Selectbox")
select_val = st.selectbox("Select Color", ["Red", "Green", "Blue", "Black"], index=1)
if select_val:
    st.write(f"You selected {select_val}")

詳細な説明:

• st.selectbox() はドロップダウン メニューを作成します。
• ラジオ ボタンに似ていますが、オプションの長いリストに適しています。
• Index は、デフォルトで選択されたオプションを設定します。

使用例:

• Selecting from a long list of options
• Choosing categories or filters
• Setting parameters for data analysis

Tip: You can populate the options dynamically based on data or user inputs.

7. Multi-select

Allow users to select multiple options:

st.subheader("7. Multiselect")
multiselect_val = st.multiselect("Select Colors", ["Red", "Green", "Blue", "Black"], default=["Red"])
if multiselect_val:
    st.write(f"You selected {multiselect_val}")

Detailed Explanation:

• st.multiselect() creates a dropdown that allows multiple selections.
• default sets the initially selected options.

Use Cases:

• Selecting multiple filters for data
• Choosing features for a machine learning model
• Creating customizable dashboards

Tip: Use st.multiselect() when you want users to be able to select any number of options, including none or all.

8. Select Slider

For selecting from a range of discrete values:

st.subheader("8. Select Slider")
select_slider_val = st.select_slider("Select Value", options=range(1, 101), value=50)
if select_slider_val:
    st.write(f"You selected {select_slider_val}")

Detailed Explanation:

• st.select_slider() creates a slider with discrete values.
• options can be a range of numbers or a list of any values (even strings).
• value sets the initial position of the slider.

Use Cases:

• Selecting from a range of predefined values
• Creating rating systems
• Adjusting parameters with specific increments

Tip: You can use custom labels for the slider by passing a list of tuples (label, value) as options.

Text Inputs

9. Text Input

For single-line text input:

with col2:
    st.subheader("9. Text Input")
    text_input_val = st.text_input("Enter some text", value="", max_chars=50)
    if text_input_val:
        st.write(f"You entered {text_input_val}")

Detailed Explanation:

• st.text_input() creates a single-line text input field.
• value sets the initial text (if any).
• max_chars limits the number of characters that can be entered.

Use Cases:

• Getting user names or short responses
• Inputting search queries
• Entering simple parameters or values

Tip: Use the type parameter to create password fields or other specialized inputs.

10. Text Area

For multi-line text input:

st.subheader("10. Text Area")
text_area_val = st.text_area("Enter some text", value="", height=150, max_chars=200)
if text_area_val:
    st.write(f"You entered {text_area_val}")

Detailed Explanation:

• st.text_area() creates a multi-line text input box.
• height sets the vertical size of the box.
• max_chars limits the total character count.

Use Cases:

• Collecting longer text responses or comments
• Inputting multi-line code snippets
• Creating text-based data entry forms

Tip: You can use st.text_area() with natural language processing models for text analysis or generation tasks.

Numeric and Date/Time Inputs

11. Number Input

For numerical inputs:

st.subheader("11. Number Input")
number_input_val = st.number_input("Enter a number", value=0, min_value=0, max_value=100, step=1)
if number_input_val:
    st.write(f"You entered {number_input_val}")

Detailed Explanation:

• st.number_input() creates a field for numerical input.
• min_value and max_value set the allowed range.
• step defines the increment/decrement step.

Use Cases:

• Inputting quantities or amounts
• Setting numerical parameters for algorithms
• Creating age or rating inputs

Tip: You can use format parameter to control the display of decimal places.

12. Date Input

For selecting dates:

st.subheader("12. Date Input")
date_input_val = st.date_input("Enter a date")
if date_input_val:
    st.write(f"You selected {date_input_val}")

Detailed Explanation:

• st.date_input() creates a date picker widget.
• You can set min_value and max_value to limit the date range.

Use Cases:

• Selecting dates for data filtering
• Setting deadlines or event dates
• Inputting birthdates or other significant dates

Tip: Use datetime.date.today() as the default value to start with the current date.

13. Time Input

For selecting times:

st.subheader("13. Time Input")
time_input_val = st.time_input("Enter a time")
if time_input_val:
    st.write(f"You selected {time_input_val}")

Detailed Explanation:

• st.time_input() creates a time picker widget.
• Returns a datetime.time object.

Use Cases:

• Setting appointment times
• Configuring schedules
• Inputting time-based parameters

Tip: Combine with st.date_input() to create full datetime inputs.

Advanced Inputs

14. File Uploader

For uploading files:

st.subheader("14. File Uploader")
file_uploader_val = st.file_uploader("Upload a file", type=["png", "jpg", "txt"])
if file_uploader_val:
    st.write(f"You uploaded {file_uploader_val.name}")

Detailed Explanation:

• st.file_uploader() creates a file upload widget.
• type parameter limits the allowed file types.
• Returns a UploadedFile object that you can process.

Use Cases:

• Uploading images for processing
• Importing data files for analysis
• Allowing users to upload documents or media

Tip: Use st.file_uploader() in combination with libraries like Pillow or pandas to process uploaded files directly in your app.

15. Color Picker

For selecting colors:

st.subheader("15. Color Picker")
color_picker_val = st.color_picker("Pick a color", value="#00f900")
if color_picker_val:
    st.write(f"You picked {color_picker_val}")

Detailed Explanation:

• st.color_picker() creates a color selection widget.
• Returns the selected color as a hex string.

Use Cases:

• Customizing UI elements
• Selecting colors for data visualization
• Creating design tools

Tip: You can use the selected color to dynamically update the appearance of other elements in your app.

16. Camera Input

For capturing images using the device's camera:

st.subheader("16. Camera Input")
camera_input_val = st.camera_input("Take a picture", help="Capture an image using your camera")
if camera_input_val:
    st.write("Picture captured successfully")

Detailed Explanation:

• st.camera_input() creates a widget that accesses the user's camera.
• Returns an image file that can be processed or displayed.

Use Cases:

• Real-time image processing applications
• Document scanning features
• Interactive computer vision demos

Tip: Combine with image processing libraries like OpenCV to perform real-time analysis on captured images.

Conclusion

Streamlit's input widgets provide a powerful and flexible way to create interactive web applications. From simple buttons to complex file uploaders and camera inputs, these widgets cover a wide range of use cases. By mastering these input types, you can create rich, interactive Streamlit apps that engage users and provide meaningful interactions with your data and models.

Happy Streamlit coding!

? Get the Code: GitHub - jamesbmour/blog_tutorials
? Related Streamlit Tutorials:JustCodeIt
? Support my work: Buy Me a Coffee

以上がStreamlit パートマスタリング入力ウィジェットの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。