Streamlit Python: Tutorial

Apa itu Streamlit? 

Streamlit adalah framework gratis dan open-source untuk membangun dan membagikan aplikasi web machine learning dan data science yang menarik dengan cepat.

Ini adalah library berbasis Python yang dirancang khusus untuk para engineer machine learning. Data scientist atau machine learning engineer bukanlah pengembang web dan mereka tidak tertarik menghabiskan waktu berminggu-minggu mempelajari framework ini untuk membangun aplikasi web. Sebagai gantinya, mereka menginginkan alat yang lebih mudah dipelajari dan digunakan, selama dapat menampilkan data dan mengumpulkan parameter yang dibutuhkan untuk pemodelan.

Streamlit memungkinkan Anda membuat aplikasi yang tampak memukau hanya dengan beberapa baris kode.

Mengapa Data Scientist Harus Menggunakan Streamlit?

Hal terbaik tentang Streamlit adalah Anda bahkan tidak perlu mengetahui dasar-dasar pengembangan web untuk mulai membuat aplikasi web pertama Anda. Jadi jika Anda berkecimpung di data science dan ingin melakukan deployment model dengan mudah, cepat, dan hanya dengan beberapa baris kode, Streamlit sangat cocok.

Salah satu aspek penting agar sebuah aplikasi berhasil adalah menyajikannya dengan antarmuka pengguna yang efektif dan intuitif. Banyak aplikasi modern yang sarat data menghadapi tantangan membangun antarmuka pengguna yang efektif dengan cepat, tanpa langkah yang rumit. Streamlit adalah library Python open-source yang menjanjikan, yang memungkinkan developer membangun antarmuka pengguna yang menarik dalam waktu singkat.

Streamlit adalah cara termudah, terutama bagi yang tidak memiliki pengetahuan front-end, untuk menempatkan kode Anda ke dalam aplikasi web:

• Tidak diperlukan pengalaman atau pengetahuan front-end (html, js, css).
• Anda tidak perlu menghabiskan berhari-hari atau berbulan-bulan untuk membuat aplikasi web; Anda dapat membuat aplikasi machine learning atau data science yang sangat indah hanya dalam hitungan jam bahkan menit.
• Kompatibel dengan mayoritas library Python (mis. pandas, matplotlib, seaborn, plotly, Keras, PyTorch, SymPy(latex)).
• Lebih sedikit kode yang dibutuhkan untuk membuat aplikasi web yang keren.
• Caching data menyederhanakan dan mempercepat pipeline komputasi.

Cara Menggunakan Streamlit

Instal Streamlit

Hal pertama yang perlu dilakukan adalah menginstalnya:

Di Windows:

1. Instal Anaconda dan buat environment Anda

2. Buka terminal

3. Ketik perintah ini di terminal untuk menginstal Streamlit:

pip install streamlit

4. Uji apakah instalasi berhasil:

streamlit hello

Saat Anda mengetik perintah ini di terminal, halaman di bawah ini akan terbuka secara otomatis:

Di macOS:

1. Instal pip:

python3 -m ensurepip --upgrade

2. Instal pipenv:

pip3 install pipenv

3. Buat environment Anda. Buka folder proyek Anda:

cd project_folder_name

4. Buat environment pipenv:

pipenv shell

5. Ketik perintah ini untuk menginstal Streamlit:

pip install streamlit

Uji apakah instalasi berhasil:

streamlit hello

Di Linux:

1. Instal pip:

sudo apt-get install python3-pip

2. Instal pipenv:

pip3 install pipenv

3. Buat environment Anda. Buka folder proyek Anda:

cd project_folder_name

4. Buat environment pipenv:

pipenv shell

5. Ketik perintah ini untuk menginstal Streamlit

pip install streamlit

6. Uji apakah instalasi berhasil:

streamlit hello

Cara menjalankan kode Streamlit Anda

streamlit run file_name.py

Perintah Streamlit mudah ditulis dan dipahami. Hanya dengan perintah sederhana, Anda dapat menampilkan teks, media, widget, grafik, dan lain-lain.

Menampilkan teks dengan Streamlit

Di sini saya akan menunjukkan cara menambahkan teks ke aplikasi Streamlit Anda dan berbagai perintah yang tersedia.

st.write(): Fungsi ini digunakan untuk menambahkan apa pun ke aplikasi web, mulai dari string terformat hingga chart pada matplotlib figure, chart Altair, plotly figure, data frame, model Keras, dan lainnya.

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

st.title(): Fungsi ini memungkinkan Anda menambahkan judul aplikasi. st.header(): Fungsi ini digunakan untuk mengatur header sebuah bagian. st.markdown(): Fungsi ini digunakan untuk mengatur markdown sebuah bagian. st.subheader(): Fungsi ini digunakan untuk mengatur sub-header sebuah bagian. st.caption(): Fungsi ini digunakan untuk menulis keterangan. st.code(): Fungsi ini digunakan untuk menampilkan kode. st.latex(): Fungsi ini digunakan untuk menampilkan ekspresi matematika yang diformat sebagai 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 ''')

Menampilkan berkas gambar, video, atau audio dengan Streamlit

Anda tidak akan menemukan fungsi yang semudah fungsi Streamlit untuk menampilkan gambar, video, dan berkas audio. Mari kita lihat cara menampilkan media dengan Streamlit!

st.image(): Fungsi ini digunakan untuk menampilkan gambar. st.audio(): Fungsi ini digunakan untuk menampilkan audio. st.video(): Fungsi ini digunakan untuk menampilkan video.

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

Widget input

Widget adalah komponen antarmuka pengguna yang paling penting. Streamlit memiliki berbagai widget yang memungkinkan Anda memanggang interaktivitas langsung ke dalam aplikasi Anda dengan tombol, slider, input teks, dan banyak lagi.

st.checkbox(): Fungsi ini mengembalikan nilai Boolean. Ketika kotak dicentang, mengembalikan nilai True, jika tidak False. st.button(): Fungsi ini digunakan untuk menampilkan widget tombol. st.radio(): Fungsi ini digunakan untuk menampilkan widget tombol radio. st.selectbox(): Fungsi ini digunakan untuk menampilkan widget select. st.multiselect(): Fungsi ini digunakan untuk menampilkan widget multiselect. st.select_slider(): Fungsi ini digunakan untuk menampilkan widget select slider. st.slider(): Fungsi ini digunakan untuk menampilkan widget slider.

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(): Fungsi ini digunakan untuk menampilkan widget input numerik. st.text_input(): Fungsi ini digunakan untuk menampilkan widget input teks. st.date_input(): Fungsi ini digunakan untuk menampilkan widget input tanggal untuk memilih tanggal. st.time_input(): Fungsi ini digunakan untuk menampilkan widget input waktu untuk memilih waktu. st.text_area(): Fungsi ini digunakan untuk menampilkan widget input teks dengan lebih dari satu baris teks. st.file_uploader(): Fungsi ini digunakan untuk menampilkan widget unggah berkas. st.color_picker(): Fungsi ini digunakan untuk menampilkan widget pemilih warna untuk memilih warna.

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

Menampilkan progres dan status dengan Streamlit

Sekarang kita akan melihat bagaimana menambahkan bilah progres dan pesan status seperti error dan sukses ke aplikasi kita.

st.balloons(): Fungsi ini digunakan untuk menampilkan balon sebagai selebrasi. st.progress(): Fungsi ini digunakan untuk menampilkan bilah progres. st.spinner(): Fungsi ini digunakan untuk menampilkan pesan menunggu sementara selama eksekusi.

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

st.success(): Fungsi ini digunakan untuk menampilkan pesan sukses. st.error(): Fungsi ini digunakan untuk menampilkan pesan galat. st.warning(): Fungsi ini digunakan untuk menampilkan pesan peringatan. st.info(): Fungsi ini digunakan untuk menampilkan pesan informasional. st.exception(): Fungsi ini digunakan untuk menampilkan pesan pengecualian.

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

Sidebar dan container

Anda juga dapat membuat sidebar atau container di halaman untuk mengorganisasi aplikasi Anda. Hirarki dan tata letak halaman pada aplikasi Anda dapat berdampak besar pada pengalaman pengguna. Dengan mengorganisasi konten, Anda membantu pengunjung memahami dan menavigasi situs Anda, yang membantu mereka menemukan apa yang mereka cari dan meningkatkan kemungkinan mereka kembali di masa depan.

Sidebar

Mengoper elemen ke st.sidebar() akan membuat elemen tersebut disematkan di kiri, sehingga pengguna dapat fokus pada konten di aplikasi Anda.

Namun st.spinner() dan st.echo() tidak didukung dengan st.sidebar.

Seperti yang Anda lihat, Anda dapat membuat sidebar pada antarmuka aplikasi dan menempatkan elemen di dalamnya sehingga aplikasi Anda lebih terorganisasi dan mudah dipahami.

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

Container

st.container() digunakan untuk membuat container tak terlihat tempat Anda dapat menempatkan elemen guna menciptakan tata letak dan hierarki yang berguna.

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

Menampilkan grafik dengan Streamlit

Streamlit terintegrasi dengan library visualisasi Python populer. Berikut fungsi chart yang tersedia secara default:

st.pyplot(): Fungsi ini digunakan untuk menampilkan figure matplotlib.pyplot.

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(): Fungsi ini digunakan untuk menampilkan line chart.

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(): Fungsi ini digunakan untuk menampilkan bar chart.

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(): Fungsi ini digunakan untuk menampilkan area chart.

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(): Fungsi ini digunakan untuk menampilkan chart 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(): Fungsi ini digunakan untuk menampilkan objek graph, yang dapat dibentuk menggunakan node dan edge yang berbeda.

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

Menampilkan peta dengan Streamlit

st.map(): Fungsi ini digunakan untuk menampilkan peta di aplikasi. Namun, diperlukan nilai lintang dan bujur dan nilai-nilai ini tidak boleh 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)

Tema

Anda juga dapat memilih tema yang mencerminkan gaya Anda. Ikuti langkah-langkah pada GIF di bawah ini:

Dan jika Anda tertarik mempelajari lebih lanjut tentang styling dan tema, Anda dapat melihat Theming.

Sekarang, saatnya membangun aplikasi bersama!

Membangun Aplikasi Machine Learning dengan Streamlit

Pada bagian ini, saya akan memandu Anda melalui proyek yang saya buat tentang prediksi pinjaman.

Laba utama dari pinjaman berasal langsung dari bunga pinjaman. Perusahaan pinjaman memberikan pinjaman setelah proses verifikasi dan validasi yang intensif. Namun, mereka tetap tidak memiliki jaminan apakah pemohon mampu melunasi pinjaman tanpa kesulitan. Dalam tutorial ini, kita akan membangun model prediktif (Random Forest Classifier) untuk memprediksi status pinjaman seorang pemohon. Misi kita adalah menyiapkan aplikasi web agar dapat tersedia di produksi.

Mulai dengan mengimpor library yang diperlukan untuk aplikasi kita:

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

Dalam aplikasi ini, kita akan menggunakan banyak widget seperti slider: selectbox dan radio di menu sidebar, yang untuknya kita akan menyiapkan beberapa fungsi Python. Contoh ini akan berupa demo sederhana yang memiliki dua halaman. Pada beranda, akan ditampilkan data yang kita pilih, sedangkan halaman Exploration akan memungkinkan Anda memvisualisasikan variabel dalam plot, dan halaman Prediction akan berisi variabel dengan tombol bernama Predict yang memungkinkan Anda memperkirakan status pinjaman. Kode di bawah ini memberikan selectbox di sidebar yang memungkinkan Anda memilih halaman. Data di-cache sehingga tidak perlu memuat ulang terus-menerus.

@st.cache_data adalah dekorator caching yang direkomendasikan (menggantikan @st.cache yang sudah usang) yang menjaga kinerja aplikasi saat memuat data dari web, memanipulasi dataset besar, atau melakukan komputasi mahal. Gunakan @st.cache_data untuk data yang dapat diserialisasi seperti DataFrame dan string, serta @st.cache_resource untuk resource global seperti koneksi database atau model 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]

Di halaman Home, kita akan memvisualisasikan: gambar presentasi / dataset / histogram pendapatan pemohon dan jumlah pinjaman.

Catatan: Kita akan menggunakan if/elif/else untuk berpindah antar halaman.

Kita akan memuat loan_dataset.csv ke dalam variabel data yang memungkinkan kita menampilkan beberapa baris darinya di halaman 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))

Kemudian di halaman 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.')

Kita menulis dua fungsi get_value(val,my_dict) dan get_fvalue(val) serta kamus feature_dict untuk memanipulasi st.sidebar.radio() dengan variabel non-numerik. Ini opsional, Anda bisa dengan mudah melakukan seperti ini:

Mari kita lihat mengapa kita melakukan itu.

Catatan: Algoritma machine learning tidak dapat menangani variabel kategorikal. Pada dataset, saya melakukan rekayasa fitur. Misalnya, kolom Married memiliki dua variabel 'Yes' dan 'No' dan saya melakukan Label Encoding (Lihat untuk pemahaman lebih baik) sehingga "NO" akan sama dengan 1 dan "Yes" menjadi 2. Fungsi get_fvalue(val) akan dengan mudah mengembalikan nilai (1/2) bergantung pada apa yang dipilih klien. Sama untuk fungsi get_value(val,my_dict). Perbedaan antara keduanya adalah yang pertama bekerja pada fitur ya/tidak dan yang kedua adalah kasus umum ketika kita memiliki banyak variabel (contoh: Gender).

Seperti yang kita lihat, variabel Dependents memiliki empat kategori '0','1', '2' dan '3+' dan kita tidak bisa mengonversi hal seperti itu menjadi variabel numerik, dan kita memiliki '+3' yang berarti Dependents dapat bernilai 3,4,5 ... Kita melakukan One Hot Encoding (Lihat untuk pemahaman lebih baik). Jadi, kita membuat sidebar radio yang berisi empat elemen dan masing-masing memiliki variabel biner, jika klien memilih '0' maka class_0 akan sama dengan 1 dan yang lainnya bernilai 0.

Kita juga melakukan One Hot Encoding untuk Property_Area itulah mengapa kita membuat 3 variabel (Rural,Urban,Semiurban). Ketika Rural bernilai 1 maka yang lain akan bernilai 0.

Jadi kita telah melihat keduanya—saat kita melakukan label atau one hot encoding pada fitur kita dan bagaimana menanganinya untuk berhasil membuat aplikasi Streamlit yang berfungsi.

 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)

Sekarang kita akan menyimpan variabel kita dalam sebuah kamus karena kita menulis get_value(val,my_dict) dan get_fvalue(val) untuk menangani kamus. Setelah itu, input—apa yang akan dipilih klien sebagai masukan di aplikasi Streamlit kita—akan disusun dalam daftar bernama feature_list kemudian menjadi variabel numpy bernama single_sample.

Catatan: Input fitur harus disusun sesuai urutan kolom dataset (misalnya Married tidak boleh mengambil input dari 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,    )

Terakhir, kita akan memuat model RandomForestClassifier yang telah disimpan ke dalam loaded_model dan prediksinya, yaitu 0 atau 1 (masalah klasifikasi) ke dalam prediction. Berkas .gif akan disimpan dalam file dan file_. Bergantung pada nilai prediction, kita akan memiliki dua kasus, "Success" atau "Failed," untuk mendapatkan pinjaman dari bank.

Ini adalah halaman Prediction kita:

Pada kasus FAILURE, keluarannya akan terlihat seperti ini:

Pada kasus SUCCESS, keluarannya akan terlihat seperti ini:

Cara Melakukan Deployment Aplikasi Streamlit

Deployment adalah mekanisme di mana aplikasi diserahkan dari pengembang ke pengguna.

Melakukan deployment aplikasi adalah proses menyalin, mengonfigurasi, dan mengaktifkan aplikasi tertentu ke base URL tertentu. Setelah proses deployment selesai, aplikasi menjadi dapat diakses publik di base URL. Server melakukan proses dua langkah ini dengan terlebih dahulu men-stage aplikasi, lalu mengaktifkannya setelah staging berhasil.

Mari pelajari cara melakukan deployment aplikasi Streamlit!

Sebelum Anda mencoba melakukan deployment aplikasi, Anda perlu membuat repositori baru di GitHub tempat Anda menaruh kode aplikasi dan dependensinya.

Kemudian klik commit changes untuk menyimpannya:

Setelah membuat repositori dan mengunggah berkas, Anda perlu membuat berkas baru bernama requirements tempat Anda harus menuliskan library yang digunakan di aplikasi Anda.

Pertama, klik create new file.

Sekarang Anda hampir siap melakukan deployment aplikasi, yang Anda perlukan hanya mengunjungi tautan ini.

Kemudian ikuti langkah-langkah berikut:

Klik Deploy dan tunggu beberapa saat!

Halaman akan terbuka secara otomatis di browser Anda! Halaman ini adalah aplikasi proyek Anda yang dibuat dengan Streamlit.

Selamat, Anda telah berhasil melakukan deployment aplikasi Anda! Klik di sini untuk melihat aplikasi yang dideploy.

Untuk dokumentasi lebih lanjut, kunjungi tautan ini: docs.streamlit.io