Streamlit Python: Eğitim

Streamlit Nedir? 

Streamlit, etkileyici makine öğrenimi ve veri bilimi web uygulamalarını hızla oluşturup paylaşmak için ücretsiz ve açık kaynaklı bir çerçevedir.

Özellikle makine öğrenimi mühendisleri için tasarlanmış, Python tabanlı bir kütüphanedir. Veri bilimciler veya makine öğrenimi mühendisleri web geliştirici değildir ve web uygulaması geliştirmek için bu çerçeveleri öğrenmeye haftalar harcamak istemezler. Bunun yerine, verileri gösterebildiği ve modelleme için gerekli parametreleri toplayabildiği sürece öğrenmesi ve kullanması daha kolay bir araca ihtiyaç duyarlar.

Streamlit, yalnızca birkaç satır kodla etkileyici görünen bir uygulama oluşturmanıza olanak tanır.

Veri Bilimciler Neden Streamlit Kullanmalı?

Streamlit’in en güzel yanı, başlamanız veya ilk web uygulamanızı oluşturmanız için web geliştirme temelini bilmenizin bile gerekmemesidir. Yani veri bilimiyle ilgileniyor ve modellerinizi yalnızca birkaç satır kodla kolay, hızlı bir şekilde yayına almak istiyorsanız, Streamlit iyi bir tercihtir.

Bir uygulamayı başarılı kılan önemli unsurlardan biri, etkili ve sezgisel bir kullanıcı arayüzüyle sunulmasıdır. Günümüzün veri yoğun uygulamalarının çoğu, karmaşık adımlara başvurmadan hızlıca etkili bir arayüz kurma zorluğuyla karşılaşır. Streamlit, geliştiricilerin kısa sürede çekici kullanıcı arayüzleri oluşturmasına imkân tanıyan, umut vadeden bir açık kaynak Python kütüphanesidir.

Özellikle ön uç bilgisi olmayanlar için Streamlit, kodunuzu bir web uygulamasına dökmenin en kolay yoludur:

• Ön uç (html, js, css) deneyimi veya bilgisi gerekmez.
• Bir web uygulaması oluşturmak için günler veya aylar harcamanız gerekmez; yalnızca birkaç saat, hatta birkaç dakikada çok güzel bir makine öğrenimi ya da veri bilimi uygulaması geliştirebilirsiniz.
• Python kütüphanelerinin büyük çoğunluğuyla uyumludur (ör. pandas, matplotlib, seaborn, plotly, Keras, PyTorch, SymPy(latex)).
• Harika web uygulamaları oluşturmak için daha az kod yeterlidir.
• Veri önbellekleme, hesaplama boru hatlarını basitleştirir ve hızlandırır.

Streamlit Nasıl Kullanılır

Streamlit’i Yükleyin

İlk adım, yüklemektir:

Windows’ta:

1. Anaconda’yı yükleyin ve ortamınızı oluşturun

2. Terminali açın

3. Streamlit’i yüklemek için terminale şu komutu yazın:

pip install streamlit

4. Kurulumun çalışıp çalışmadığını test edin:

streamlit hello

Bu komutu terminale yazdığınızda, aşağıdaki sayfa otomatik olarak açılmalıdır:

macOS’te:

1. pip’i yükleyin:

python3 -m ensurepip --upgrade

2. pipenv’i yükleyin:

pip3 install pipenv

3. Ortamınızı oluşturun. Proje klasörünüzü açın:

cd project_folder_name

4. Bir pipenv ortamı oluşturun:

pipenv shell

5. Streamlit’i yüklemek için şu komutu yazın:

pip install streamlit

Kurulumun çalışıp çalışmadığını test edin:

streamlit hello

Linux’ta:

1. pip’i yükleyin:

sudo apt-get install python3-pip

2. pipenv’i yükleyin:

pip3 install pipenv

3. Ortamınızı oluşturun. Proje klasörünüzü açın:

cd project_folder_name

4. Bir pipenv ortamı oluşturun:

pipenv shell

5. Streamlit’i yüklemek için bu komutu yazın

pip install streamlit

6. Kurulumun çalışıp çalışmadığını test edin:

streamlit hello

Streamlit kodunuzu nasıl çalıştırırsınız

streamlit run file_name.py

Streamlit komutları yazması ve anlaması kolaydır. Basit bir komutla metinleri, medyayı, bileşenleri, grafikleri vb. görüntüleyebilirsiniz.

Streamlit ile metin görüntüleme

Burada Streamlit uygulamanıza nasıl metin ekleyeceğinizi ve mevcut farklı komutları göstereceğim.

st.write(): Biçimlendirilmiş dizelerden matplotlib figürlerine, Altair grafiklerine, plotly figürlerine, veri çerçevelerine, Keras modellerine ve diğerlerine kadar bir web uygulamasına herhangi bir şeyi eklemek için kullanılır.

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

st.title(): Uygulamanın başlığını eklemenizi sağlar. st.header(): Bir bölümün başlığını ayarlamak için kullanılır. st.markdown(): Bir bölümün markdown’ını ayarlamak için kullanılır. st.subheader(): Bir bölümün alt başlığını ayarlamak için kullanılır. st.caption(): Altyazı/metin notu yazmak için kullanılır. st.code(): Kod bloğu eklemek için kullanılır. st.latex(): LaTeX biçiminde yazılmış matematiksel ifadeleri görüntülemek için kullanılır.

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

Streamlit ile görsel, video veya ses dosyası görüntüleme

Görselleri, videoları ve ses dosyalarını görüntülemek için Streamlit fonksiyonları kadar kolay fonksiyonlar bulamazsınız. Haydi Streamlit ile medya nasıl görüntülenir bakalım!

st.image(): Görsel görüntülemek için kullanılır. st.audio(): Ses dosyası görüntülemek için kullanılır. st.video(): Video görüntülemek için kullanılır.

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

Girdi bileşenleri

Bileşenler en önemli kullanıcı arayüzü öğeleridir. Streamlit; butonlar, kaydırıcılar, metin girişleri ve daha fazlasıyla etkileşimi doğrudan uygulamalarınıza yerleştirmenizi sağlayan çeşitli bileşenler sunar.

st.checkbox(): Boolean değer döndürür. Kutucuk işaretliyse True, değilse False döner. st.button(): Buton bileşeni görüntüler. st.radio(): Radyo butonu bileşeni görüntüler. st.selectbox(): Seçim kutusu bileşeni görüntüler. st.multiselect(): Çoklu seçim bileşeni görüntüler. st.select_slider(): Seçim kaydırıcısı bileşeni görüntüler. st.slider(): Kaydırıcı bileşeni görüntüler.

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(): Sayısal girdi bileşeni görüntüler. st.text_input(): Metin girdi bileşeni görüntüler. st.date_input(): Tarih seçmek için tarih girdi bileşeni görüntüler. st.time_input(): Saat seçmek için saat girdi bileşeni görüntüler. st.text_area(): Birden fazla satır içeren metin alanı bileşeni görüntüler. st.file_uploader(): Dosya yükleme bileşeni görüntüler. st.color_picker(): Renk seçmek için renk seçici bileşeni görüntüler.

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

Streamlit ile ilerleme ve durum görüntüleme

Şimdi uygulamamıza ilerleme çubuğu ve hata/başarı gibi durum mesajlarını nasıl ekleyebileceğimize bakalım.

st.balloons(): Kutlama için balonlar görüntüler. st.progress(): İlerleme çubuğu görüntüler. st.spinner(): Çalışma sırasında geçici bir bekleme mesajı görüntüler.

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

st.success(): Başarı mesajı görüntüler. st.error(): Hata mesajı görüntüler. st.warning(): Uyarı mesajı görüntüler. st.info(): Bilgilendirme mesajı görüntüler. st.exception(): İstisna mesajı görüntüler.

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

Kenar çubuğu ve konteyner

Uygulamanızı düzenlemek için sayfanıza bir kenar çubuğu veya konteyner de ekleyebilirsiniz. Uygulamanızdaki sayfaların hiyerarşisi ve düzeni, kullanıcı deneyimi üzerinde büyük etkiye sahiptir. İçeriğinizi düzenleyerek ziyaretçilerin sitenizi anlamasını ve gezinmesini kolaylaştırır, aradıklarını bulmalarına yardımcı olur ve gelecekte geri dönme olasılıklarını artırırsınız.

Kenar çubuğu

Bir öğeyi st.sidebar()’a geçirmeniz, o öğenin sola sabitlenmesini sağlar ve kullanıcıların uygulamanızdaki içeriğe odaklanmasına imkân tanır.

Ancak st.spinner() ve st.echo() st.sidebar ile desteklenmez.

Gördüğünüz gibi, uygulama arayüzünüzde bir kenar çubuğu oluşturup içine öğeler yerleştirerek uygulamanızı daha düzenli ve anlaşılır kılabilirsiniz.

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

Konteyner

st.container(), öğeleri yerleştirerek faydalı bir düzen ve hiyerarşi oluşturabileceğiniz görünmez bir konteyner yaratmak için kullanılır.

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

Grafikleri Streamlit ile görüntüleme

Streamlit, popüler Python görselleştirme kütüphaneleriyle bütünleşir. Hazır sunulan grafik fonksiyonları şunlardır:

st.pyplot(): Bir matplotlib.pyplot figürünü görüntülemek için kullanılır.

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(): Çizgi grafik görüntülemek için kullanılır.

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(): Sütun grafik görüntülemek için kullanılır.

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(): Alan grafik görüntülemek için kullanılır.

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(): Bir Altair grafiği görüntülemek için kullanılır.

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(): Farklı düğüm ve kenarlarla oluşturulabilen grafik nesnelerini görüntülemek için kullanılır.

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

Streamlit ile harita görüntüleme

st.map(): Uygulamada harita görüntülemek için kullanılır. Ancak enlem ve boylam değerlerine ihtiyaç duyar ve bu değerler null/NA olmamalıdır.

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)

Temalar

Ayrıca tarzınızı yansıtan bir tema da seçebilirsiniz. Aşağıdaki GIF’teki adımları izleyin:

Stil ve temalar hakkında daha fazla bilgiyle ilgileniyorsanız, Theming sayfasına göz atabilirsiniz.

Şimdi, birlikte bir uygulama geliştirme zamanı!

Streamlit ile Bir Makine Öğrenimi Uygulaması Geliştirin

Bu bölümde, kredi tahmini üzerine yaptığım bir projeyi adım adım anlatacağım.

Kredilerden elde edilen ana kazanç doğrudan kredi faizinden gelir. Kredi şirketleri, yoğun bir doğrulama ve onay sürecinden sonra kredi verir. Ancak başvuranın krediyi zorlanmadan geri ödeyebileceğine dair yine de bir garanti yoktur. Bu eğitimde, bir başvuranın kredi durumunu tahmin etmek için bir öngörü modeli (Rastgele Orman Sınıflandırıcı) oluşturacağız. Amacımız, üretimde kullanılabilecek bir web uygulaması hazırlamaktır.

Uygulamamız için gerekli kütüphaneleri içe aktararak başlayalım:

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

Bu uygulamada, kenar çubuğu menüsünde kaydırıcılar, selectbox ve radio gibi birden çok bileşen kullanacağız; bunlar için bazı Python fonksiyonları hazırlayacağız. Örnek, iki sayfalı basit bir demo olacak. Ana sayfada seçtiğimiz verileri göstereceğiz; Keşif sayfası değişkenleri grafiklerle görselleştirmenize imkân tanıyacak ve Tahmin sayfası ise Tahmin adlı bir butonla birlikte değişkenleri içerecek; bu buton kredi durumunu tahmin etmenizi sağlayacak. Aşağıdaki kod, kenar çubuğunda sayfa seçmenizi sağlayan bir selectbox sunar. Veriler, sürekli yeniden yükleme gerektirmemesi için önbelleğe alınır.

@st.cache_data, uygulamanızın web’den veri yüklerken, büyük veri kümelerini işlerken veya pahalı hesaplamalar yaparken performanslı kalmasını sağlayan önerilen önbellekleme dekoratörüdür (kullanımdan kaldırılan @st.cache’in yerine geçer). Veri çerçeveleri ve dizeler gibi serileştirilebilir veriler için @st.cache_data, veritabanı bağlantıları veya ML modelleri gibi küresel kaynaklar için @st.cache_resource kullanın.

@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]

Ana Sayfa’da şunları görselleştireceğiz: sunum görseli / veri kümesi / başvuru sahibi geliri ve kredi tutarının histogramı.

Not: Sayfalar arasında geçiş için if/elif/else kullanacağız.

Home sayfasında birkaç satırını gösterebilmek için loan_dataset.csv dosyasını data değişkenine yükleyeceğiz.

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

Ardından Prediction sayfasında:

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.')

st.sidebar.radio()’yu sayısal olmayan değişkenlerle kullanabilmek için get_value(val,my_dict) ve get_fvalue(val) adlı iki fonksiyon ve feature_dict gibi sözlükler yazdık. Bu isteğe bağlıdır; kolayca şöyle de yapabilirsiniz:

Bunu neden yaptığımıza bakalım.

Not: Makine öğrenimi algoritmaları kategorik değişkenleri doğrudan işleyemez. Veri kümesinde bazı özellik mühendisliği adımları uyguladım. Örneğin Married sütununda ‘Yes’ ve ‘No’ olmak üzere iki değişken var ve Etiket Kodlama (daha iyi anlamak için göz atın) yaptım; böylece "NO" 1’e, "Yes" 2’ye eşit olacak. get_fvalue(val) fonksiyonu, müşterinin seçimine bağlı olarak değeri (1/2) kolayca döndürür. get_value(val,my_dict) için de aynı durum geçerlidir. İki fonksiyon arasındaki fark, ilkinin evet/hayır özelliklerinde çalışması, ikincisinin ise (ör. Gender) birden çok değişken olduğunda genel durumda kullanılmasıdır.

Gördüğümüz gibi Dependents değişkeninin ‘0’, ‘1’, ‘2’ ve ‘3+’ olmak üzere dört kategorisi var ve bunu doğrudan sayısal bir değişkene çeviremeyiz; ayrıca ‘+3’ var, bu da Dependents’ın 3,4,5 ... değerlerini alabileceği anlamına gelir. Bu nedenle Tek Sıcak Kodlama (One-Hot Encoding) yaptık (daha iyi anlamak için göz atın). Böylece dört öğe içeren bir kenar çubuğu radyo butonu oluşturduk ve her biri ikili bir değişkene karşılık geliyor; müşteri ‘0’ı seçerse class_0 1’e eşit olacak, diğerleri 0 olacaktır.

Ayrıca Property_Area için de Tek Sıcak Kodlama yaptık; bu yüzden 3 değişken (Rural, Urban, Semiurban) oluşturduk. Rural 1 olduğunda diğerleri 0 olur.

Böylece hem etiketleme hem de tek sıcak kodlama yaptığımız durumları ve bunları nasıl ele alarak çalışan bir Streamlit uygulaması oluşturduğumuzu gördük.

 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)

Şimdi değişkenlerimizi bir sözlükte saklayacağız; çünkü sözlüklerle çalışmak üzere get_value(val,my_dict) ve get_fvalue(val) fonksiyonlarını yazdık. Ardından girişler—yani müşterinin Streamlit uygulamamızda seçeceği değerler—feature_list adlı bir listede sıralanacak ve sonra single_sample adlı bir numpy değişkenine dönüştürülecek.

Not: Özellik girdileri, veri kümesi sütunlarıyla aynı sırada düzenlenmelidir (ör. Married, Gender’ın girdisini alamaz).

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

Son olarak, kaydedilmiş RandomForestClassifier modelimizi loaded_model içine yükleyeceğiz ve tahminini—0 veya 1 (sınıflandırma problemi)—prediction içinde tutacağız. .gif dosyaları file ve file_ içinde saklanacaktır. prediction değerine bağlı olarak, bankadan kredi alımı için iki durumumuz olacak: "Başarı" veya "Başarısız".

İşte Prediction sayfamız:

BAŞARISIZLIK durumunda çıktı şöyle görünecektir:

BAŞARI durumunda çıktı şöyle görünecektir:

Bir Streamlit Uygulaması Nasıl Dağıtılır

Dağıtım, uygulamaların geliştiricilerden kullanıcılara ulaştırıldığı mekanizmadır.

Bir uygulamayı dağıtmak, belirli bir uygulamanın belirli bir temel URL’ye kopyalanması, yapılandırılması ve etkinleştirilmesi sürecidir. Dağıtım işlemi tamamlandığında, uygulama temel URL üzerinden herkese açık hâle gelir. Sunucu, önce uygulamayı hazırlayıp aşamaya alarak, ardından başarılı hazırlığın ardından etkinleştirerek bu iki adımlı süreci yürütür.

Hadi bir Streamlit uygulamasını nasıl dağıtacağınızı öğrenelim!

Uygulamanızı dağıtmadan önce, kodunuzu ve bağımlılıklarınızı koyacağınız yeni bir GitHub deposu oluşturmanız gerekir.

Ardından, kaydetmek için commit changes’a tıklayın:

Bir depo oluşturup dosyaları yükledikten sonra, uygulamanızda kullandığınız kütüphaneleri yazacağınız requirements adlı yeni bir dosya oluşturmanız gerekir.

Önce, create new file’a tıklayın.

Artık uygulamanızı dağıtmaya çok yakınsınız; tek yapmanız gereken bu bağlantıyı ziyaret etmek.

Sonra şu adımları izleyin:

Deploy’a tıklayın ve biraz bekleyin!

Tarayıcınızda bir sayfa otomatik olarak açılacaktır! Bu sayfa, Streamlit ile gerçekleştirdiğiniz proje uygulamanızdır.

Tebrikler, uygulamanızı başarıyla dağıttınız! Dağıtılan uygulamayı görmek için buraya tıklayın.

Daha fazla dokümantasyon için şu bağlantıyı ziyaret edin: docs.streamlit.io