Perkemas Bahagian Menguasai Widget Input

Menguasai Widget Input dalam Streamlit: Panduan Komprehensif

? Dapatkan Kod: GitHub - jamesbmour/blog_tutorials

? Tutorial Streamlit Berkaitan:JustCodeIt

Streamlit telah merevolusikan cara kami mencipta aplikasi web dengan Python. Kesederhanaan dan kuasanya menjadikannya pilihan yang sangat baik untuk saintis data dan pembangun. Dalam siaran ini, kami akan menyelami salah satu ciri Streamlit yang paling berkuasa: widget input. Kami akan meneroka 16 jenis input yang berbeza, menunjukkan cara menggunakannya dengan berkesan dalam apl Streamlit anda.

Sediakan Apl Streamlit Kami

Sebelum kita menyelami widget, mari sediakan apl Streamlit kami:

import streamlit as st

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

col1, col2 = st.columns(2)

Kami telah mengimport Streamlit, menetapkan halaman kepada reka letak yang luas, menambah tajuk dan mencipta dua lajur untuk penyusunan widget kami yang lebih baik.

Input Butang

1. Butang Asas

Bentuk input yang paling mudah ialah butang. Begini cara untuk menciptanya:

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")

Penjelasan Terperinci:

• Fungsi st.button() mencipta butang boleh klik.
• kunci: Pengecam unik untuk butang, berguna apabila anda mempunyai berbilang butang.
• bantuan: Teks petua alat yang muncul apabila menuding pada butang.
• jenis: Menentukan penampilan butang ('primer', 'secondary', dsb.).
• dilumpuhkan: Jika ditetapkan kepada Benar, butang akan dikelabukan dan tidak boleh diklik.

Kes Penggunaan:

• Mencetuskan pemprosesan data atau latihan model
• Menyerahkan borang
• Menyegarkan semula data atau carta

Petua: Gunakan keadaan butang untuk mengawal aliran apl anda, seperti menunjukkan/menyembunyikan bahagian atau mencetuskan pengiraan.

2. Butang Pautan

Untuk mengubah hala pengguna ke pautan luaran, gunakan butang pautan:

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

Penjelasan Terperinci:

• st.link_button() mencipta butang yang, apabila diklik, membuka tab baharu dengan URL yang ditentukan.
• Argumen pertama ialah teks butang, dan yang kedua ialah URL.

Kes Penggunaan:

• Memautkan kepada dokumentasi atau sumber luaran
• Mengubah hala ke profil media sosial
• Menyambung ke aplikasi web yang berkaitan

Petua: Gunakan butang pautan dengan berhati-hati untuk mengelakkan pengguna menjauhi apl anda tanpa perlu.

3. Butang Muat Turun

Benarkan pengguna memuat turun fail terus daripada apl anda:

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

Penjelasan Terperinci:

• st.download_button() mencipta butang yang mencetuskan muat turun fail apabila diklik.
• Argumen: label butang, kandungan fail, nama fail dan jenis MIME.
• Jenis MIME menentukan jenis fail (cth., 'text/plain' untuk .txt, 'application/pdf' untuk .pdf).

Kes Penggunaan:

• Memuat turun laporan atau data yang dijana
• Menyimpan imej atau carta yang diproses
• Mengeksport kandungan ciptaan pengguna

Petua: Anda boleh menjana kandungan fail secara dinamik berdasarkan interaksi pengguna atau hasil pemprosesan data.

Widget Pemilihan

4. Kotak semak

Kotak pilihan bagus untuk menogol pilihan:

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

Penjelasan Terperinci:

• st.checkbox() mencipta kotak semak boleh togol.
• Parameter nilai menetapkan keadaan awal (Benar/Salah).

Kes Penggunaan:

• Mendayakan/melumpuhkan ciri dalam apl anda
• Memilih berbilang pilihan daripada senarai
• Mencipta soalan ya/tidak mudah

Petua: Gunakan kotak pilihan untuk mengawal keterlihatan elemen lain dalam apl anda untuk pengalaman pengguna yang lebih dinamik.

5. Butang Radio

Apabila pengguna perlu memilih satu pilihan daripada senarai:

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}")

Penjelasan Terperinci:

• st.radio() mencipta set butang radio.
• Argumen pertama ialah label, diikuti dengan senarai pilihan.
• indeks menentukan pilihan lalai yang dipilih (berasaskan 0).

Kes Penggunaan:

• Memilih antara pilihan yang saling eksklusif
• Menetapkan mod atau tema apl
• Menapis data berdasarkan kategori

Petua: Gunakan butang radio apabila anda mempunyai sebilangan kecil pilihan (biasanya 2-5) yang saling eksklusif.

6. Pilih kotak

Untuk pilihan lungsur turun:

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}")

Penjelasan Terperinci:

• st.selectbox() mencipta menu lungsur turun.
• Serupa dengan butang radio, tetapi lebih baik untuk senarai pilihan yang lebih panjang.
• indeks menetapkan pilihan lalai yang dipilih.

Kes Penggunaan:

• 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

Atas ialah kandungan terperinci Perkemas Bahagian Menguasai Widget Input. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!