Saya suka membuat aplikasi Streamlit di waktu senggang, baik untuk tujuan belajar maupun untuk bersenang-senang. Streamlit, kerangka kerja all-python yang sedang tren, memungkinkan ilmuwan data seperti saya, pemrogram, atau siapa pun yang tahu cara membuat kode dengan python, dengan cepat dan mudah membangun pembelajaran mesin dan aplikasi data yang indah. Anda tidak perlu memiliki pengalaman pengembangan web front-end untuk membuat aplikasi web menggunakan Streamlit. Jika Anda cukup mahir dengan python, Anda semua baik-baik saja
Di pos hari ini, saya ingin menunjukkan cara menambahkan gambar latar belakang ke aplikasi Streamlit— baik dari URL atau dari komputer lokal Anda. Kami akan menggunakan 'Aplikasi Pembelajaran Bahasa' di artikel berikut untuk tujuan demonstrasi dan melihat cara menambahkan gambar latar ke dalamnya. Jika Anda telah membuat aplikasi, Anda cukup memasukkan cuplikan kode di pos hari ini ke file python aplikasi Anda dan menambahkan gambar latar belakang ke aplikasi Anda secara instan
Buat Aplikasi Pembelajaran Bahasa Sederhana Menggunakan Streamlit
Cara Membuat Aplikasi Pembelajaran dan Terjemahan Bahasa Anda Sendiri menggunakan Streamlit dan Googletrans
menuju ilmu data. com
Gambar oleh Pengarang (gambar latar belakang oleh Pixabay)
Untuk menambahkan gambar latar belakang ke aplikasi Streamlit, Anda harus menggunakan st.markdown() dengan CSS. Baiklah, saya tahu saya katakan sebelumnya bahwa Anda tidak perlu memiliki pengalaman pengembangan web front-end untuk membangun aplikasi Streamlit. Dalam kasus penggunaan ini, kita perlu menerapkan sedikit pengetahuan HTML/CSS untuk menyelesaikan pekerjaan
Jadi apa itu CSS? . Dengan CSS, Anda dapat menentukan berbagai gaya halaman web seperti warna, font, ukuran teks, bagaimana berbagai elemen HTML ditata, gambar latar apa yang akan digunakan, dll.
For example, we can specify the background image in the <style> element with the CSS background-image property. This HTML element is marked by an opening tag and closing tag . The code would look like something below:
<style>p {
background-image: url(‘img_file.jpg’);
}
</style>
Kami kemudian menempatkan elemen HTML sebagai string di dalam st.markdown(body, unsafe_allow_html=False). Secara default, semua tag HTML yang ditemukan di body akan di-escape dan karenanya diperlakukan sebagai teks murni. Namun, kita dapat mematikan perilaku ini dengan menyetel argumen unsafe_allow_html menjadi False. Jadi kodenya akan terlihat seperti ini
st.markdown( f””” <style>p {
background-image: url(‘img_file.jpg’);
}
</style> ”””, unsafe_allow_html=True)_
Oke. Saya harap Anda sekarang mengerti apa itu CSS dan cuplikan kode dasar yang dapat digunakan untuk menentukan gambar latar belakang pada elemen HTML menggunakan st.markdown(). Mari kita lihat bagaimana kita dapat menggunakan CSS untuk menyisipkan gambar latar belakang ke dalam aplikasi Streamlit 'Pembelajaran Bahasa'
Pilihan 1. Tambahkan Gambar Latar Belakang dari URL
Menambahkan gambar latar belakang dari URL cukup mudah. Pertama mari kita tentukan fungsi yang disebut st.markdown( f””” <style>
p {
background-image: url(‘img_file.jpg’);
}
</style> ”””, unsafe_allow_html=True)0 untuk menentukan gambar latar belakang di elemen st.markdown( f””” <style>
p {
background-image: url(‘img_file.jpg’);
}
</style> ”””, unsafe_allow_html=True)1 di dalam st.markdown(). Kemudian kita cukup memanggil fungsi st.markdown( f””” <style>
p {
background-image: url(‘img_file.jpg’);
}
</style> ”””, unsafe_allow_html=True)_0 untuk menambahkan gambar latar belakang ke Aplikasi 'Pembelajaran Bahasa'
Perhatikan bahwa kami juga menyetel properti st.markdown( f””” <style>
p {
background-image: url(‘img_file.jpg’);
}
</style> ”””, unsafe_allow_html=True)_4 ke st.markdown( f””” <style>
p {
background-image: url(‘img_file.jpg’);
}
</style> ”””, unsafe_allow_html=True)5. Dengan cara ini, gambar latar belakang akan menutupi seluruh elemen. Kita juga menyetel properti st.markdown( f””” <style>
p {
background-image: url(‘img_file.jpg’);
}
</style> ”””, unsafe_allow_html=True)6 ke st.markdown( f””” <style>
p {
background-image: url(‘img_file.jpg’);
}
</style> ”””, unsafe_allow_html=True)7 sehingga seluruh elemen selalu tertutup, tanpa peregangan — artinya gambar akan mempertahankan proporsi aslinya
pilihan 2. Tambahkan Gambar Latar Belakang dari Komputer Anda
Menambahkan gambar latar belakang dari komputer lokal Anda sedikit rumit. Pertama, Anda perlu menempatkan file gambar Anda di folder yang sama dengan file python aplikasi Anda. Selanjutnya, Anda perlu mengonversi file gambar menjadi string st.markdown( f””” <style>
p {
background-image: url(‘img_file.jpg’);
}
</style> ”””, unsafe_allow_html=True)8 dengan menggunakan st.markdown( f””” <style>
p {
background-image: url(‘img_file.jpg’);
}
</style> ”””, unsafe_allow_html=True)9 (baris 3–4). Setelah itu, Anda menggunakan st.markdown()_0 untuk mendekode st.markdown()1 untuk digunakan dalam elemen HTML (baris 7) dan meletakkan semuanya di dalam properti background-image
Kode di bawah ini berfungsi untuk jenis file gambar lain seperti JPG atau GIF juga. Cukup mengubah 'png' menjadi 'jpg' atau 'gif' di baris 9 sudah cukup. Cobalah
Gambar oleh Pengarang (gambar latar belakang oleh Pixabay)
Ini dia. Kami telah berhasil menambahkan gambar latar belakang ke aplikasi Streamlit 'Language Leaning'. Terima kasih sudah membaca. Saya harap Anda menikmati postingan singkat tentang Streamlit ini dan mempelajari sesuatu yang baru hari ini. Untuk mempelajari lebih lanjut tentang Streamlit, silakan lihat blog Medium saya untuk daftar lengkap semua jenis contoh aplikasi Streamlit
Anda dapat membuka akses penuh ke tulisan saya dan media lainnya dengan mendaftar untuk keanggotaan Medium ($5 per bulan) melalui tautan rujukan ini. Dengan mendaftar melalui tautan ini, saya akan menerima sebagian dari biaya keanggotaan Anda tanpa biaya tambahan untuk Anda. Terima kasih