Opsi untuk menggunakan Streamlit sebagai SDK bawaan default untuk Spaces telah tidak didukung lagi. Jika Anda ingin mendeploy Space dengan Streamlit, silakan pilih SDK Docker, lalu gunakan template Streamlit.

Spaces Streamlit

Streamlit memberikan pengguna kebebasan untuk membangun aplikasi web berfitur lengkap dengan Python secara reaktif. Kode Anda dijalankan ulang setiap kali status aplikasi berubah. Streamlit juga sangat baik untuk visualisasi data dan mendukung beberapa pustaka grafik seperti Bokeh, Plotly, dan Altair. Baca artikel blog ini tentang membangun dan menghosting aplikasi Streamlit di Spaces.

Memilih Streamlit sebagai SDK saat membuat Space baru akan menginisialisasi Space Anda dengan versi Streamlit terbaru dengan mengatur properti sdk menjadi streamlit di blok YAML file README.md Anda. Jika Anda ingin mengubah versi Streamlit, Anda dapat mengedit properti sdk_version.

Untuk menggunakan Streamlit di Space, pilih Streamlit sebagai SDK saat Anda membuat Space melalui formulir New Space. Hal ini akan membuat repositori dengan README.md yang berisi properti berikut dalam blok konfigurasi YAML:

sdk: streamlit
sdk_version: 1.25.0 # The latest supported version

Anda dapat mengedit sdk_version, namun perhatikan bahwa masalah dapat terjadi saat Anda menggunakan versi Streamlit yang tidak didukung. Tidak semua versi Streamlit didukung, jadi silakan merujuk ke bagian referensi untuk melihat versi mana saja yang tersedia.

Untuk informasi mendalam tentang Streamlit, silakan merujuk ke dokumentasi Streamlit.

Hanya port 8501 yang diizinkan untuk Streamlit Spaces (port default). Oleh karena itu, jika Anda menyediakan file config.toml untuk Space Anda, pastikan port default tidak ditimpa.

Space Streamlit Pertama Anda: Klasifikator Hot Dog

Pada bagian-bagian berikut, Anda akan mempelajari dasar-dasar pembuatan Space, konfigurasinya, dan penerapan kode Anda ke dalamnya. Kami akan membuat Space Hot Dog Classifier dengan Streamlit yang akan digunakan untuk mendemokan model julien-c/hotdog-not-hotdog, yang dapat mendeteksi apakah gambar tertentu berisi hot dog 🌭

Anda dapat menemukan versi lengkap dari ini yang dihosting di NimaBoscarino/hotdog-streamlit.

Buat Space Streamlit baru

Kita akan mulai dengan membuat Space baru dan memilih Streamlit sebagai SDK. Hugging Face Spaces adalah repositori Git, yang berarti Anda dapat bekerja pada Space secara bertahap (dan kolaboratif) dengan mendorong commit. Lihat panduan Mulai dengan Repositori untuk mempelajari cara membuat dan mengedit file sebelum melanjutkan.

Tambahkan dependensi

Untuk Hot Dog Classifier, kita akan menggunakan 🤗 Transformers pipeline untuk memakai model, sehingga kita perlu mulai dengan menginstal beberapa dependensi. Hal ini dapat dilakukan dengan membuat file requirements.txt di repositori kita, lalu menambahkan dependensi berikut ke dalamnya:

transformers
torch

Runtime Spaces akan menangani instalasi dependensi!

Buat aplikasi Streamlit

Untuk membuat aplikasi Streamlit, buat file baru di repositori bernama app.py, dan tambahkan kode berikut:

import streamlit as st
from transformers import pipeline
from PIL import Image

pipeline = pipeline(task="image-classification", model="julien-c/hotdog-not-hotdog")

st.title("Hot Dog? Or Not?")

file_name = st.file_uploader("Upload a hot dog candidate image")

if file_name is not None:
    col1, col2 = st.columns(2)

    image = Image.open(file_name)
    col1.image(image, use_column_width=True)
    predictions = pipeline(image)

    col2.header("Probabilities")
    for p in predictions:
        col2.subheader(f"{ p['label'] }: { round(p['score'] * 100, 1)}%")

Skrip Python ini menggunakan 🤗 Transformers pipeline untuk memuat model julien-c/hotdog-not-hotdog, yang digunakan oleh antarmuka Streamlit. Aplikasi Streamlit akan mengharapkan Anda mengunggah gambar, yang kemudian akan diklasifikasikan sebagai hot dog atau not hot dog. Setelah Anda menyimpan kode ke file app.py, kunjungi tab App untuk melihat aplikasi Anda berjalan!

Menanamkan Streamlit Spaces di halaman web lain

Anda dapat menggunakan tag HTML <iframe> untuk menyematkan Streamlit Space sebagai bingkai inline di halaman web lain. Cukup sertakan URL Space Anda, yang diakhiri dengan sufiks .hf.space. Untuk menemukan URL Space Anda, Anda dapat menggunakan tombol “Embed this Space” dari opsi Spaces.

Sebagai contoh, demo di atas dapat disematkan dalam dokumen ini dengan tag berikut:

<iframe
  src="https://huggingface.co/proxy/NimaBoscarino-hotdog-streamlit.hf.space?embed=true"
  title="My awesome Streamlit Space"
></iframe>

Perhatikan bahwa kami telah menambahkan ?embed=true ke URL, yang mengaktifkan mode embed dari aplikasi Streamlit, menghilangkan beberapa spacers dan footer untuk embed yang ramping.

Sematkan Streamlit Spaces dengan IFrames yang menyesuaikan ukuran secara otomatis

Streamlit telah mendukung penyesuaian ukuran iframe secara otomatis sejak 1.17.0 sehingga ukuran iframe induk disesuaikan secara otomatis agar sesuai dengan volume konten aplikasi Streamlit yang tertanam.

Ini bergantung pada pustaka iFrame Resizer, yang memerlukan penambahan beberapa baris kode, seperti pada contoh berikut di mana

• id diatur ke <iframe /> yang digunakan untuk menentukan target auto-resize.
• iFrame Resizer dimuat melalui tag script.
• Fungsi iFrameResize() dipanggil dengan ID elemen iframe target, sehingga ukurannya berubah secara otomatis.

Kita dapat meneruskan opsi ke argumen pertama dari iFrameResize(). Lihat dokumentasinya untuk detailnya.

<iframe
	id="your-iframe-id"
	src="https://<space-subdomain>.hf.space"
	frameborder="0"
	width="850"
	height="450"
></iframe>
<script src="https://cdn.jsdelivr.net/npm/iframe-resizer@4.3.4/js/iframeResizer.min.js"></script>
<script>
  iFrameResize({}, "#your-iframe-id")
</script>

Selain itu, Anda dapat melihat dokumentasi kami.