Streamlit Python: Hướng dẫn

Streamlit là gì? 

Streamlit là một framework miễn phí và mã nguồn mở để nhanh chóng xây dựng và chia sẻ các ứng dụng web khoa học dữ liệu và máy học đẹp mắt.

Đây là một thư viện dựa trên Python được thiết kế riêng cho các kỹ sư machine learning. Nhà khoa học dữ liệu hoặc kỹ sư machine learning không phải là nhà phát triển web và họ không muốn dành hàng tuần để học cách dùng các framework này để xây dựng ứng dụng web. Thay vào đó, họ cần một công cụ dễ học, dễ dùng, miễn là có thể hiển thị dữ liệu và thu thập các tham số cần thiết cho việc mô hình hóa.

Streamlit cho phép bạn tạo một ứng dụng trông ấn tượng chỉ với vài dòng mã.

Tại sao nhà khoa học dữ liệu nên dùng Streamlit?

Điều tuyệt vời nhất ở Streamlit là bạn thậm chí không cần biết những điều cơ bản về phát triển web để bắt đầu hoặc tạo ứng dụng web đầu tiên. Vì vậy, nếu bạn quan tâm đến khoa học dữ liệu và muốn triển khai mô hình một cách dễ dàng, nhanh chóng và chỉ với vài dòng mã, Streamlit là lựa chọn phù hợp.

Một trong những yếu tố quan trọng giúp ứng dụng thành công là cung cấp giao diện người dùng hiệu quả và trực quan. Nhiều ứng dụng hiện đại nặng dữ liệu gặp thách thức trong việc xây dựng giao diện hiệu quả một cách nhanh chóng, không phải qua các bước phức tạp. Streamlit là một thư viện Python mã nguồn mở đầy hứa hẹn, cho phép nhà phát triển xây dựng giao diện hấp dẫn trong thời gian ngắn.

Streamlit là cách dễ nhất, đặc biệt cho những người không có kiến thức front-end, để đưa mã của họ vào một ứng dụng web:

• Không cần kinh nghiệm hay kiến thức front-end (html, js, css).
• Bạn không cần dành nhiều ngày hay nhiều tháng để tạo một ứng dụng web; bạn có thể tạo một ứng dụng máy học hoặc khoa học dữ liệu rất đẹp chỉ trong vài giờ hoặc thậm chí vài phút.
• Tương thích với phần lớn thư viện Python (ví dụ: pandas, matplotlib, seaborn, plotly, Keras, PyTorch, SymPy(latex)).
• Cần ít mã hơn để tạo ứng dụng web ấn tượng.
• Bộ nhớ đệm dữ liệu giúp đơn giản hóa và tăng tốc các pipeline tính toán.

Cách sử dụng Streamlit

Cài đặt Streamlit

Việc đầu tiên là cài đặt:

Trên Windows:

1. Cài đặt Anaconda và tạo môi trường của bạn

2. Mở terminal

3. Gõ lệnh này trong terminal để cài đặt Streamlit:

pip install streamlit

4. Kiểm tra xem cài đặt đã thành công chưa:

streamlit hello

Khi bạn gõ lệnh này trong terminal, trang dưới đây sẽ tự động mở:

Trên macOS:

1. Cài đặt pip:

python3 -m ensurepip --upgrade

2. Cài đặt pipenv:

pip3 install pipenv

3. Tạo môi trường của bạn. Mở thư mục dự án:

cd project_folder_name

4. Tạo môi trường pipenv:

pipenv shell

5. Gõ lệnh này để cài đặt Streamlit:

pip install streamlit

Kiểm tra xem cài đặt đã thành công chưa:

streamlit hello

Trên Linux:

1. Cài đặt pip:

sudo apt-get install python3-pip

2. Cài đặt pipenv:

pip3 install pipenv

3. Tạo môi trường của bạn. Mở thư mục dự án:

cd project_folder_name

4. Tạo môi trường pipenv:

pipenv shell

5. Gõ lệnh này để cài đặt Streamlit

pip install streamlit

6. Kiểm tra xem cài đặt đã thành công chưa:

streamlit hello

Cách chạy mã Streamlit của bạn

streamlit run file_name.py

Các lệnh của Streamlit dễ viết và dễ hiểu. Chỉ với một lệnh đơn giản, bạn có thể hiển thị văn bản, media, widget, biểu đồ, v.v.

Hiển thị văn bản với Streamlit

Ở đây tôi sẽ hướng dẫn bạn cách thêm văn bản vào ứng dụng Streamlit và các lệnh khác nhau có sẵn.

st.write(): Hàm này dùng để thêm bất kỳ thứ gì vào ứng dụng web, từ chuỗi có định dạng đến biểu đồ trong matplotlib figure, biểu đồ Altair, plotly figure, data frame, mô hình Keras và nhiều thứ khác.

import streamlit as stst.write("Hello ,let's learn how to build a streamlit app together")

st.title(): Hàm này cho phép bạn thêm tiêu đề của ứng dụng. st.header(): Hàm này dùng để đặt tiêu đề phần. st.markdown(): Hàm này dùng để đặt markdown cho một phần. st.subheader(): Hàm này dùng để đặt tiêu đề phụ cho một phần. st.caption(): Hàm này dùng để viết chú thích. st.code(): Hàm này dùng để đặt một đoạn mã. st.latex(): Hàm này dùng để hiển thị biểu thức toán học theo định dạng LaTeX.

import streamlit as stst.title("This is the app title")st.header("This is the header")st.markdown("This is the markdown")st.subheader("This is the subheader")st.caption("This is the caption")st.code("x = 2021")st.latex(r''' a+a r^1+a r^2+a r^3 ''')

Hiển thị hình ảnh, video hoặc tệp âm thanh với Streamlit

Bạn khó tìm được các hàm dễ như các hàm của Streamlit để hiển thị hình ảnh, video và tệp âm thanh. Hãy xem cách hiển thị media với Streamlit!

st.image(): Hàm này dùng để hiển thị hình ảnh. st.audio(): Hàm này dùng để hiển thị âm thanh. st.video(): Hàm này dùng để hiển thị video.

st.image("kid.jpg", caption="A kid playing")st.audio("audio.mp3")st.video("video.mp4")

Widget nhập liệu

Widget là những thành phần giao diện người dùng quan trọng nhất. Streamlit có nhiều widget cho phép bạn đưa tính tương tác trực tiếp vào ứng dụng bằng các nút, thanh trượt, ô nhập văn bản, v.v.

st.checkbox(): Hàm này trả về giá trị Boolean. Khi ô được chọn, nó trả về giá trị True, nếu không là False. st.button(): Hàm này dùng để hiển thị một nút. st.radio(): Hàm này dùng để hiển thị nhóm nút radio. st.selectbox(): Hàm này dùng để hiển thị hộp chọn. st.multiselect(): Hàm này dùng để hiển thị hộp chọn nhiều. st.select_slider(): Hàm này dùng để hiển thị thanh trượt chọn. st.slider(): Hàm này dùng để hiển thị thanh trượt.

st.checkbox('Yes')st.button('Click Me')st.radio('Pick your gender', ['Male', 'Female'])st.selectbox('Pick a fruit', ['Apple', 'Banana', 'Orange'])st.multiselect('Choose a planet', ['Jupiter', 'Mars', 'Neptune'])st.select_slider('Pick a mark', ['Bad', 'Good', 'Excellent'])st.slider('Pick a number', 0, 50)

st.number_input(): Hàm này dùng để hiển thị ô nhập số. st.text_input(): Hàm này dùng để hiển thị ô nhập văn bản. st.date_input(): Hàm này dùng để hiển thị ô nhập ngày để chọn ngày. st.time_input(): Hàm này dùng để hiển thị ô nhập thời gian để chọn giờ. st.text_area(): Hàm này dùng để hiển thị ô nhập văn bản nhiều dòng. st.file_uploader(): Hàm này dùng để hiển thị widget tải tệp lên. st.color_picker(): Hàm này dùng để hiển thị bộ chọn màu để chọn màu sắc.

st.number_input('Pick a number', 0, 10)st.text_input('Email address')st.date_input('Traveling date')st.time_input('School time')st.text_area('Description')st.file_uploader('Upload a photo')st.color_picker('Choose your favorite color')

t

Hiển thị tiến độ và trạng thái với Streamlit

Bây giờ chúng ta sẽ xem cách thêm thanh tiến độ và các thông báo trạng thái như lỗi và thành công vào ứng dụng.

st.balloons(): Hàm này dùng để hiển thị bóng bay chúc mừng. st.progress(): Hàm này dùng để hiển thị thanh tiến độ. st.spinner(): Hàm này dùng để hiển thị thông báo chờ tạm thời trong khi thực thi.

st.balloons()  # Celebration balloonsst.progress(10)  # Progress barwith st.spinner('Wait for it...'):    time.sleep(10)  # Simulating a process delay

st.success(): Hàm này dùng để hiển thị thông báo thành công. st.error(): Hàm này dùng để hiển thị thông báo lỗi. st.warning(): Hàm này dùng để hiển thị thông báo cảnh báo. st.info(): Hàm này dùng để hiển thị thông báo thông tin. st.exception(): Hàm này dùng để hiển thị thông báo ngoại lệ.

st.success("You did it!")st.error("Error occurred")st.warning("This is a warning")st.info("It's easy to build a Streamlit app")st.exception(RuntimeError("RuntimeError exception"))

Thanh bên và container

Bạn cũng có thể tạo một thanh bên hoặc một container trên trang để tổ chức ứng dụng. Thứ bậc và cách sắp xếp các trang trong ứng dụng có thể ảnh hưởng lớn đến trải nghiệm người dùng. Bằng cách tổ chức nội dung, bạn giúp khách truy cập hiểu và điều hướng trang, giúp họ tìm thấy điều mình cần và tăng khả năng họ sẽ quay lại trong tương lai.

Thanh bên

Truyền một phần tử vào st.sidebar() sẽ ghim phần tử đó sang bên trái, cho phép người dùng tập trung vào nội dung trong ứng dụng.

Tuy nhiên, st.spinner() và st.echo() không được hỗ trợ với st.sidebar.

Như bạn thấy, bạn có thể tạo một thanh bên trong giao diện ứng dụng và đặt các phần tử vào đó để ứng dụng gọn gàng và dễ hiểu hơn.

st.sidebar.title("Sidebar Title")st.sidebar.markdown("This is the sidebar content")

Container

st.container() được dùng để tạo một container vô hình nơi bạn có thể đặt các phần tử nhằm tạo bố cục và thứ bậc hợp lý.

with st.container():    st.write("This is inside the container")

Hiển thị biểu đồ với Streamlit

Streamlit tích hợp với các thư viện trực quan hóa Python phổ biến. Dưới đây là các hàm biểu đồ có sẵn sẵn:

st.pyplot(): Hàm này dùng để hiển thị một matplotlib.pyplot figure.

import streamlit as stimport matplotlib.pyplot as pltimport numpy as nprand = np.random.normal(1, 2, size=20)fig, ax = plt.subplots()ax.hist(rand, bins=15)st.pyplot(fig)

st.line_chart(): Hàm này dùng để hiển thị biểu đồ đường.

import streamlit as stimport pandas as pdimport numpy as npdf = pd.DataFrame(np.random.randn(10, 2), columns=['x', 'y'])st.line_chart(df)

st.bar_chart(): Hàm này dùng để hiển thị biểu đồ cột.

import streamlit as stimport pandas as pdimport numpy as npdf = pd.DataFrame(np.random.randn(10, 2), columns=['x', 'y'])st.bar_chart(df)

st.area_chart(): Hàm này dùng để hiển thị biểu đồ vùng.

import streamlit as stimport pandas as pdimport numpy as npdf = pd.DataFrame(np.random.randn(10, 2), columns=['x', 'y'])st.area_chart(df)

st.altair_chart(): Hàm này dùng để hiển thị biểu đồ altair.

import streamlit as stimport pandas as pdimport numpy as npimport altair as altdf = pd.DataFrame(np.random.randn(500, 3), columns=['x', 'y', 'z'])chart = alt.Chart(df).mark_circle().encode(    x='x', y='y', size='z', color='z', tooltip=['x', 'y', 'z'])st.altair_chart(chart, use_container_width=True)

st.graphviz_chart(): Hàm này dùng để hiển thị các đối tượng đồ thị, có thể hoàn thiện bằng các nút và cạnh khác nhau.

import streamlit as stimport graphvizst.graphviz_chart('''    digraph {        Big_shark -> Tuna        Tuna -> Mackerel        Mackerel -> Small_fishes        Small_fishes -> Shrimp    }''')

Hiển thị bản đồ với Streamlit

st.map(): Hàm này dùng để hiển thị bản đồ trong ứng dụng. Tuy nhiên, cần có giá trị vĩ độ và kinh độ, và các giá trị này không được null/NA.

import pandas as pdimport numpy as npimport streamlit as stdf = pd.DataFrame(    np.random.randn(500, 2) / [50, 50] + [37.76, -122.4], columns=['lat', 'lon'])st.map(df)

Chủ đề

Bạn cũng có thể chọn một chủ đề phản ánh phong cách của mình. Hãy làm theo các bước trong GIF dưới đây:

Nếu bạn muốn tìm hiểu thêm về tạo kiểu và chủ đề, bạn có thể xem Theming.

Bây giờ, đã đến lúc cùng xây dựng một ứng dụng!

Xây dựng ứng dụng Machine Learning với Streamlit

Trong phần này, tôi sẽ hướng dẫn bạn qua một dự án dự đoán khoản vay mà tôi đã thực hiện.

Lợi nhuận chính của các khoản vay đến trực tiếp từ lãi vay. Các công ty cho vay cấp khoản vay sau một quá trình thẩm định và xác minh kỹ lưỡng. Tuy vậy, họ vẫn không thể chắc chắn người nộp đơn có thể hoàn trả khoản vay dễ dàng hay không. Trong hướng dẫn này, chúng ta sẽ xây dựng một mô hình dự đoán (Random Forest Classifier) để dự đoán trạng thái khoản vay của người nộp đơn. Nhiệm vụ của chúng ta là chuẩn bị một ứng dụng web để đưa vào sản xuất.

Bắt đầu bằng cách import các thư viện cần thiết cho ứng dụng:

import streamlit as stimport pandas as pdimport numpy as npimport pickle  # to load a saved modelimport base64  # to handle gif encoding

Trong ứng dụng này, chúng ta sẽ dùng nhiều widget như thanh trượt: selectbox và radio trong menu thanh bên, và sẽ chuẩn bị một số hàm Python cho chúng. Ví dụ sẽ là một bản demo đơn giản có hai trang. Ở trang chủ, nó sẽ hiển thị dữ liệu mà chúng ta chọn, trong khi trang Khám phá cho phép bạn trực quan hóa các biến bằng biểu đồ, và trang Dự đoán sẽ chứa các biến với một nút tên Predict cho phép bạn ước tính trạng thái khoản vay. Đoạn mã dưới đây cung cấp cho bạn một selectbox ở thanh bên, cho phép bạn chọn trang. Dữ liệu được cache để không cần tải lại liên tục.

@st.cache_data là decorator bộ nhớ đệm được khuyến nghị (thay thế @st.cache đã ngừng dùng) giúp ứng dụng hoạt động hiệu quả khi tải dữ liệu từ web, thao tác các tập dữ liệu lớn hoặc thực hiện tính toán tốn kém. Dùng @st.cache_data cho dữ liệu có thể tuần tự hóa như DataFrame và chuỗi, và @st.cache_resource cho tài nguyên toàn cục như kết nối cơ sở dữ liệu hoặc mô hình ML.

@st.cache_datadef get_fvalue(val):    feature_dict = {"No": 1, "Yes": 2}    return feature_dict[val]def get_value(val, my_dict):    return my_dict[val]

Ở trang Home, chúng ta sẽ trực quan hóa: hình ảnh giới thiệu / tập dữ liệu / histogram của thu nhập người nộp đơn và số tiền vay.

Lưu ý: Chúng ta sẽ dùng if/elif/else để chuyển giữa các trang.

Chúng ta sẽ tải loan_dataset.csv vào biến data để hiển thị một vài dòng của nó ở trang Home.

if app_mode == 'Home':    st.title('Loan Prediction')    st.image('loan_image.jpg')    st.markdown('Dataset:')    data = pd.read_csv('loan_dataset.csv')    st.write(data.head())    st.bar_chart(data[['ApplicantIncome', 'LoanAmount']].head(20))

Sau đó ở trang Prediction:

if app_mode == 'Prediction':    ApplicantIncome = st.sidebar.slider('ApplicantIncome', 0, 10000, 0)    LoanAmount = st.sidebar.slider('LoanAmount in K$', 9.0, 700.0, 200.0)    # Assuming additional input features here...    # Prediction Logic    if st.button("Predict"):        loaded_model = pickle.load(open('Random_Forest.sav', 'rb'))        prediction = loaded_model.predict(np.array([ApplicantIncome, LoanAmount]).reshape(1, -1))        if prediction[0] == 0:            st.error('According to our calculations, you will not get the loan.')        else:            st.success('Congratulations! You will get the loan.')

Chúng ta đã viết hai hàm get_value(val,my_dict) và get_fvalue(val) và các dictionary như feature_dict để thao tác st.sidebar.radio() với các biến không phải số. Đây là tùy chọn, bạn có thể dễ dàng làm như sau:

Hãy xem vì sao chúng ta làm vậy.

Lưu ý: Các thuật toán machine learning không thể xử lý biến phân loại. Trong tập dữ liệu, tôi đã làm một số kỹ thuật đặc trưng. Ví dụ, cột Married có hai giá trị 'Yes' và 'No' và tôi đã thực hiện Label Encoding (Hãy xem để hiểu rõ hơn) nên "NO" sẽ bằng 1 và "Yes" bằng 2. Hàm get_fvalue(val) sẽ dễ dàng trả về giá trị (1/2) tùy theo khách hàng chọn gì. Tương tự với hàm get_value(val,my_dict). Khác biệt là hàm đầu tiên áp dụng cho các đặc trưng yes/no, còn hàm thứ hai áp dụng chung khi có nhiều giá trị (ví dụ: Gender).

Như ta thấy biến Dependents có bốn hạng '0','1','2' và '3+' và ta không thể chuyển trực tiếp như vậy thành biến số, và có '+3' nghĩa là Dependents có thể là 3,4,5 ... Chúng ta đã thực hiện One Hot Encoding (Hãy xem để hiểu rõ hơn). Vì vậy, chúng ta tạo một radio trên thanh bên chứa bốn phần tử và mỗi phần tử có biến nhị phân; nếu khách hàng chọn '0' thì class_0 sẽ bằng 1 và các biến còn lại bằng 0.

Chúng ta cũng thực hiện One Hot Encoding cho Property_Area nên tạo ra 3 biến (Rural,Urban,Semiurban). Khi Rural nhận 1 thì các biến còn lại bằng 0.

Vậy là chúng ta đã thấy cả hai trường hợp—khi gán nhãn hoặc one hot encoding các đặc trưng—và cách xử lý để tạo thành công một ứng dụng Streamlit hoạt động.

 data1={    'Gender':Gender,    'Married':Married,    'Dependents':[class_0,class_1,class_2,class_3],    'Education':Education,    'ApplicantIncome':ApplicantIncome,    'CoapplicantIncome':CoapplicantIncome,    'Self Employed':Self_Employed,    'LoanAmount':LoanAmount,    'Loan_Amount_Term':Loan_Amount_Term,    'Credit_History':Credit_History,    'Property_Area':[Rural,Urban,Semiurban],    }    feature_list=[ApplicantIncome,CoapplicantIncome,LoanAmount,Loan_Amount_Term,Credit_History,get_value(Gender,gender_dict),get_fvalue(Married),data1['Dependents'][0],data1['Dependents'][1],data1['Dependents'][2],data1['Dependents'][3],get_value(Education,edu),get_fvalue(Self_Employed),data1['Property_Area'][0],data1['Property_Area'][1],data1['Property_Area'][2]]    single_sample = np.array(feature_list).reshape(1,-1)

Bây giờ chúng ta sẽ lưu các biến vào một dictionary vì chúng ta đã viết get_value(val,my_dict) và get_fvalue(val) để làm việc với dictionary. Sau đó, input—những gì khách hàng chọn trong ứng dụng Streamlit—sẽ được sắp xếp vào danh sách tên feature_list rồi thành biến numpy tên single_sample.

Lưu ý: Thứ tự input của các đặc trưng phải trùng với thứ tự cột trong tập dữ liệu (ví dụ Married không thể nhận input của Gender).

 if st.button("Predict"):        file_ = open("6m-rain.gif", "rb")        contents = file_.read()        data_url = base64.b64encode(contents).decode("utf-8")        file_.close()        file = open("green-cola-no.gif", "rb")        contents = file.read()        data_url_no = base64.b64encode(contents).decode("utf-8")        file.close()        loaded_model = pickle.load(open('Random_Forest.sav', 'rb'))        prediction = loaded_model.predict(single_sample)        if prediction[0] == 0 :            st.error(    'According to our Calculations, you will not get the loan from Bank'    )            st.markdown(    f'<img src="data:image/gif;base64,{data_url_no}" alt="cat gif">',    unsafe_allow_html=True,)        elif prediction[0] == 1 :            st.success(    'Congratulations!! you will get the loan from Bank'    )            st.markdown(    f'<img src="data:image/gif;base64,{data_url}" alt="cat gif">',    unsafe_allow_html=True,    )

Cuối cùng, chúng ta sẽ tải mô hình RandomForestClassifier đã lưu vào loaded_model và dự đoán của nó—0 hoặc 1 (bài toán phân loại)—vào prediction. Các tệp .gif sẽ được lưu vào file và file_. Tùy theo giá trị của prediction, chúng ta sẽ có hai trường hợp, "Thành công" hoặc "Thất bại", để nhận khoản vay từ ngân hàng.

Đây là trang Prediction của chúng ta:

Trong trường hợp THẤT BẠI, kết quả sẽ như sau:

Trong trường hợp THÀNH CÔNG, kết quả sẽ như sau:

Cách triển khai một ứng dụng Streamlit

Triển khai là cơ chế qua đó ứng dụng được chuyển từ nhà phát triển đến người dùng.

Triển khai một ứng dụng là quá trình sao chép, cấu hình và kích hoạt một ứng dụng cụ thể lên một URL cơ sở cụ thể. Khi quá trình triển khai hoàn tất, ứng dụng sẽ công khai truy cập được tại URL cơ sở. Máy chủ thực hiện quy trình hai bước này bằng cách dàn dựng (staging) ứng dụng trước, rồi kích hoạt nó sau khi dàn dựng thành công.

Hãy học cách triển khai một ứng dụng Streamlit!

Trước khi thử triển khai ứng dụng, bạn cần tạo một repository mới trên GitHub, nơi bạn sẽ đặt mã ứng dụng và các phụ thuộc.

Sau đó nhấp vào commit changes để lưu lại:

Sau khi tạo repository và tải tệp lên, bạn cần tạo một tệp mới tên requirements, trong đó liệt kê các thư viện bạn dùng trong ứng dụng.

Đầu tiên, nhấp vào create new file.

Bây giờ bạn đã gần triển khai xong ứng dụng, tất cả những gì cần làm là truy cập liên kết này.

Sau đó làm theo các bước sau:

Nhấp Deploy và chờ trong giây lát!

Một trang sẽ tự động mở trong trình duyệt! Trang này là ứng dụng dự án của bạn được tạo bằng Streamlit.

Chúc mừng, bạn đã triển khai ứng dụng thành công! Nhấp vào đây để xem ứng dụng đã triển khai.

Để xem thêm tài liệu, truy cập liên kết: docs.streamlit.io