Streamlit

PreviousStory | Grafik Dasar dengan Matplotlib NextMembaca Data

Last updated 3 days ago

Streamlit

1. Tentang Streamlit

Dalam buku Karya Abu Tholib, M.Kom mengatakan bahwa perkembangan teknologi kecerdasan buatan dalam beberapa dekade terakhir sungguh luar biasa pesat. Salah satu cabangnya adalah Machine Learning yang berfokus pada sebuah mesin/komputer yang mampu belajar dari data yang tersedia dan mengubah data tersebut menjadi informasi dan keputusan[1] perluasan implementasi Industri 4.0 dan teknologi baru memungkinkan terobosan baru dalam pengembangan berbagai metode machine learning, Teknologi ini telah mengalami kemajuan signifikan [2], pendekatan machine learning dapat digunakan untuk menyelesaikan permasalahan yang komplek di berbagai bidang yang tidak dapat di selesaikan oleh program konvensional [3], dengan semakin meningkatnya daya komputasi dan jumlah data yang tersedia, Machine Learning menjadi lebih efektif dalam menangani tugas-tugas yang lebih kompleks, seperti analisis citra dan teks, pengenalan wajah, dan pemrosesan bahasa alami.

Salah satu titik kesulitan bagi para Data Scientiest adalah dalam proses setelah mereka menemukan wawasan baru atau membuat model baru. Apa cara terbaik untuk menunjukkan hasil secara visual kepada para khalayak umum adalah dengan membuat aplikasi berbasis website, ada beberapa framework yang biasa digunakan oleh khalayak umum seperti Flask dan Django namun kekurangannya adalah kita harus membangun seluruh aplikasi web dari awal, sehingga framework streamlit menjadi pilihan dalam hal kecepatan dan kemudahan. streamlit adalah kerangka kerja utama pertama yang semuanya murni Python.

Streamlit adalah framework Python yang digunakan untuk membangun aplikasi web dengan antarmuka pengguna interaktif untuk proyek-proyek data science dan machine learning. Ini memungkinkan pengembang untuk membuat aplikasi web khusus dan tampilan data dengan sedikit usaha dan keahlian dalam pengembangan, web Streamlit dibangun di atas pustaka ilmu data yang populer seperti NumPy, Pandas, dan Matplotlib, sehingga memudahkan untuk membuat visualisasi dan komponen interaktif dalam aplikasi. Streamlit juga menyediakan API sederhana untuk input dan output data, sehingga mudah untuk terhubung ke berbagai sumber data dan API. Dengan Streamlit, pengembang dapat membuat aplikasi yang dapat digunakan di berbagai platform, seperti Heroku atau AWS. Streamlit juga memiliki fitur berbagi bawaan, di mana pengembang dapat membagikan aplikasi mereka dengan tim mereka atau komunitas yang lebih luas hanya dengan membagikan tautan.

Streamlit adalah pustaka Python yang open source untuk memudahkan membuat dan berbagi aplikasi web yang indah dan sesuai kebutuhan untuk machine learning dan data science[10]. Hanya dalam beberapa menit, sehingga memudahkan pengembang untuk fokus pada analisis dan visualisasi data mereka.

2. Langkah Installl Streamlit

python -m venv envku

Activate:

source envku/bin/activate

Set up your Python development environment.
Run:pip install streamlit
Validate the installation by running our Hello app:streamlit hello
Jump to our .

streamlit hello

streamlit run app.py

3. Membuat Aplikasi Dasar Streamlit

PASTIKAN CARA DI ATAS TELAH DILAKUKAN..

Langkah 2: Membuat Aplikasi Dasar

Buat file Python baru (misalnya, app.py, bebas menggunakan apa, asalkan ada ekstensi .py).
Tulis kode berikut untuk membuat aplikasi dasar.

Contoh kode app.py:

Buat statment paling atas file, import sesuai kebutuhan project..

Pada praktek Selanjutnya kita akan menampilkan dataframe, silahkan membuat file dengan nama app.py seperti dibawah ini.

st.write(df)

Setelah selesai menulis code di app.py. Sekarang, untuk menjalankan aplikasi Streamlit, buka terminal, arahkan ke direktori tempat file app.py disimpan

streamlit run app.py

3.1 Elemen Text

Di Streamlit, ada berbagai elemen teks yang memungkinkan Anda menampilkan informasi dengan cara yang lebih menarik dan interaktif.

1. `st.title()`

Menampilkan judul utama aplikasi. Biasanya digunakan untuk memberi tahu pengguna tentang nama aplikasi atau halaman.

Contoh:

import streamlit as st

st.title('Selamat Datang di Aplikasi Streamlit!')

Output: Ini akan menampilkan teks yang lebih besar dan tebal sebagai judul utama.

2. `st.header()`

Menampilkan teks sebagai header, biasanya digunakan untuk membagi aplikasi ke dalam bagian-bagian berbeda. Ini sedikit lebih kecil dari judul (st.title()).

Contoh:

st.header('Bagian 1: Pendahuluan')

Output: Teks yang sedikit lebih kecil dari judul utama.

3. `st.subheader()`

Menampilkan teks sebagai subheader, yang biasanya lebih kecil daripada header tetapi masih memberikan penekanan pada bagian tertentu.

Contoh:

st.subheader('Subbagian 1: Data Pengguna')

Output: Menampilkan teks lebih kecil dari header, tetapi tetap lebih besar dari teks biasa.

4. `st.caption()`

Menampilkan teks sebagai keterangan yang lebih kecil dan tidak terlalu mencolok. Berguna untuk memberikan penjelasan tambahan atau catatan kaki.

Contoh:

st.caption('Data ini hanya untuk tujuan demonstrasi.')

Output: Menampilkan teks kecil di bawah elemen lainnya.

5. `st.code()`

Menampilkan potongan kode dengan format yang lebih baik, berguna jika Anda ingin mendemonstrasikan kode Python atau bahasa lain.

Contoh:

st.code('import pandas as pd')

Output: Menampilkan kode dengan gaya font monospace.

6. `st.text()`

Menampilkan teks biasa tanpa format khusus. Ini akan menampilkan teks secara langsung seperti yang ditulis dalam kode.

Contoh:

st.text('Ini adalah teks biasa tanpa format atau penekanan.')

Output: Teks biasa tanpa pemformatan khusus.

7. `st.latex()`

Menampilkan ekspresi matematika menggunakan LaTeX. Ini sangat berguna jika Anda ingin menampilkan rumus matematis di aplikasi Anda.

Contoh:

st.latex(r' y = mx + b ')

Output: Menampilkan rumus matematika dengan format yang benar menggunakan LaTeX.

8. `st.markdown()`

Menampilkan teks dengan sintaks Markdown, yang memungkinkan Anda untuk menambahkan pemformatan lebih lanjut, seperti huruf tebal, miring, tautan, gambar, dan lainnya.

Contoh:

st.markdown('**Teks Tebal** dan _Teks Miring_ serta [Tautan](https://streamlit.io)')

Output: Menampilkan teks dengan format Markdown, termasuk huruf tebal, huruf miring, dan tautan yang dapat diklik.

9. `st.divider()`

Menambahkan pembatas visual berupa garis horizontal. Ini membantu membagi aplikasi menjadi bagian-bagian yang terpisah.

Contoh:

st.divider()

Output: Menampilkan garis horizontal yang membagi tampilan aplikasi.

4. Menampilkan Data

a. API

Kita dapat menampilkan data menggunakan API pakai requests, lalu tampilkan dengan st.write(), st.dataframe()

b. Menampilkan Data dari File (CSV, Excel, dll.)

Bisa upload file lalu tampilkan datanya.

C. Menggunakan st.write()

D. Menggunakan dataFrame random NP

5. File Metric

Penjelasan:

st.metric() di Streamlit digunakan untuk menampilkan angka penting (seperti KPI, statistik, progress) dalam bentuk kotak kecil.

Preview code:

6. Menampilkan Grafik

Beberapa Perintah Visualisasi di Streamlit

6.1 Line Chart - `st.line_chart()`

Menampilkan grafik garis.

Preview code:

6.2 Bar Chart - `st.bar_chart()`

Grafik batang

st.bar_chart(data)

6.3 Altair Chart - `st.altair_chart()`

6.4 Map - `st.map()`

Menampilkan peta titik koordinat.

6.5 Visualisasi `st.plotly_chart()`

Preview Code:

7. Input Form

Fungsi Streamlit

Deskripsi Singkat

st.text_input()

Input teks pendek

st.text_area()

Input teks panjang (textarea)

st.number_input()

Input angka (integer / float)

st.date_input()

Pilih tanggal

st.time_input()

Pilih waktu (jam/menit)

st.selectbox()

Dropdown pilihan satu

st.multiselect()

Dropdown pilihan banyak

st.radio()

Pilih salah satu opsi (radio button)

st.checkbox()

Centang pilihan (true/false)

st.slider()

Slider angka

st.select_slider()

Slider pilihan kustom (teks)

st.file_uploader()

Upload file

st.camera_input()

Ambil foto dari kamera

st.color_picker()

Pilih warna

st.form()

Membuat form input (grouped submit)

st.form_submit_button()

Tombol submit untuk form

Penjelasan Tambahan

st.form() → untuk mengelompokkan beberapa input dalam satu form.
st.form_submit_button() → tombol "Submit" khusus untuk st.form.
st.file_uploader() → mendukung upload gambar, PDF, CSV, dsb.
st.camera_input() → langsung ambil foto dari kamera device pengguna (HP/laptop).
st.select_slider() → slider tetapi isi pilihannya teks, bukan angka.

Contoh Mini Semua Input

Preview Code:

8. Menampilkan Media

Di Streamlit, sangat bisa menampilkan berbagai jenis media, seperti gambar, video, audio, dan lainnya, menggunakan beberapa fungsi bawaan.

1. Menampilkan Gambar

Untuk menampilkan gambar, kamu bisa menggunakan fungsi st.image().

caption untuk memberikan keterangan pada gambar.
use_column_width=True untuk menyesuaikan gambar dengan lebar kolom.

2. Menampilkan Video

Untuk menampilkan video, gunakan st.video(). Kamu bisa menampilkan video yang ada di file lokal atau dari URL (misalnya YouTube).

3. Menampilkan Audio

Untuk menampilkan audio, gunakan st.audio(). Audio bisa di-upload dari file lokal atau menggunakan URL.

4. Menampilkan File (PDF, CSV, dsb)

Untuk menampilkan atau mengunduh file seperti PDF, CSV, atau file lainnya, gunakan st.file_uploader() untuk mengupload file dan st.download_button() untuk menyediakan tombol unduh.

Upload File:

Menampilkan PDF:

import streamlit as st
from PyPDF2 import PdfReader

# Menampilkan PDF
uploaded_pdf = st.file_uploader("Pilih file PDF", type=["pdf"])

if uploaded_pdf is not None:
    reader = PdfReader(uploaded_pdf)
    text = ""
    for page in reader.pages:
        text += page.extract_text()
    st.write(text)

5. Menampilkan HTML

Untuk menampilkan HTML atau konten yang lebih kaya, kamu bisa menggunakan st.markdown() dengan opsi unsafe_allow_html=True.

import streamlit as st

# Menampilkan HTML langsung
html_code = """
<h1>Selamat datang di Aplikasi Streamlit!</h1>
<p>Ini adalah <strong>paragraf</strong> HTML yang dapat diproses oleh Streamlit.</p>
"""
st.markdown(html_code, unsafe_allow_html=True)

9. Menampilkan Layout dan Container

Layout dan container di Streamlit memungkinkan mengatur elemen-elemen dalam aplikasi sehingga lebih terstruktur dan lebih interaktif. Dengan menggunakan berbagai elemen layout, dgn bisa mengontrol tampilan antarmuka aplikasi untuk menampilkan konten dengan cara yang lebih rapi dan responsif.

1. Menampilkan Layout Menggunakan Kolom

Dengan menggunakan st.columns(), kamu bisa menampilkan beberapa elemen secara berdampingan dalam kolom.

Contoh: Menggunakan Kolom untuk Menampilkan Elemen Secara Berdampingan

Penjelasan:

st.columns(2) membuat dua kolom.
Kamu bisa menambahkan elemen apa saja ke dalam kolom menggunakan with col1 dan with col2.

2. Menggunakan `st.expander()` untuk Konten yang Bisa Dilipat

Fitur st.expander() memungkinkan kamu untuk menyembunyikan dan menampilkan konten dengan cara melipatnya. Ini cocok untuk menampilkan informasi yang panjang atau opsional.

Contoh: Menambahkan Expander

Penjelasan:

Konten yang berada di dalam st.expander() akan disembunyikan sampai pengguna mengklik untuk memperluasnya.

3. Layout Menggunakan `st.container()`

st.container() digunakan untuk mengelompokkan elemen-elemen dalam satu area. Meskipun tidak mengubah tampilan secara langsung, ini berguna untuk mengelompokkan elemen-elemen dalam aplikasi.

Contoh: Menggunakan Container

import streamlit as st

# Membuat container
container = st.container()

# Menambahkan elemen ke dalam container
with container:
    st.header("Konten di dalam Container")
    st.write("Ini adalah elemen-elemen yang ada dalam container.")
    st.button("Tombol dalam Container")

Penjelasan:

st.container() digunakan untuk mengelompokkan elemen-elemen yang ingin ditampilkan bersama dalam satu blok.

4. Menggunakan Sidebar

Untuk membuat antarmuka yang lebih interaktif dan menyediakan elemen-elemen tambahan, kamu bisa menggunakan Sidebar. Semua elemen yang ditempatkan di dalam sidebar tidak akan mempengaruhi area utama aplikasi.

Contoh: Sidebar

import streamlit as st

# Menambahkan elemen ke Sidebar
st.sidebar.header("Ini Sidebar")
st.sidebar.radio("Pilih Opsi", ["Opsi 1", "Opsi 2", "Opsi 3"])

# Konten utama
st.title("Konten Utama")
st.write("Ini adalah konten utama yang ditampilkan di layar.")

Penjelasan:

st.sidebar digunakan untuk membuat elemen-elemen yang ditampilkan di sidebar, terpisah dari tampilan utama aplikasi.


import streamlit as st

# Menambahkan elemen navigasi di Sidebar
st.sidebar.header("Navigasi")
selection = st.sidebar.radio("Pilih Halaman", ["Beranda", "Tentang", "Kontak"])

# Konten berdasarkan pilihan
if selection == "Beranda":
    st.title("Beranda")
    st.write("Ini adalah halaman beranda.")
elif selection == "Tentang":
    st.title("Tentang")
    st.write("Ini adalah halaman tentang.")
else:
    st.title("Kontak")
    st.write("Ini adalah halaman kontak.")

# Menambahkan elemen navigasi dengan dropdown di Sidebar
st.sidebar.header("Navigasi")
selection = st.sidebar.selectbox("Pilih Halaman", ["Beranda", "Tentang", "Galeri", "Kontak"])

# Konten berdasarkan pilihan
if selection == "Beranda":
    st.title("Beranda")
    st.write("Ini adalah halaman beranda.")
elif selection == "Tentang":
    st.title("Tentang")
    st.write("Ini adalah halaman tentang.")
elif selection == "Galeri":
    st.title("Galeri")
    st.write("Ini adalah halaman galeri.")
else:
    st.title("Kontak")
    st.write("Ini adalah halaman kontak.")

# Menambahkan tombol untuk navigasi di Sidebar
st.sidebar.header("Navigasi")
if st.sidebar.button("Beranda"):
    st.title("Beranda")
    st.write("Ini adalah halaman beranda.")
elif st.sidebar.button("Tentang"):
    st.title("Tentang")
    st.write("Ini adalah halaman tentang.")
elif st.sidebar.button("Kontak"):
    st.title("Kontak")
    st.write("Ini adalah halaman kontak.")

# Menambahkan tautan navigasi di Sidebar
st.sidebar.header("Navigasi")
st.sidebar.markdown("[Beranda](#beranda)")
st.sidebar.markdown("[Tentang](#tentang)")
st.sidebar.markdown("[Kontak](#kontak)")

# Konten halaman berdasarkan tautan
st.title("Beranda")
st.write("Ini adalah halaman beranda.")

st.title("Tentang")
st.write("Ini adalah halaman tentang.")

st.title("Kontak")
st.write("Ini adalah halaman kontak.")