Spaces için varsayılan yerleşik SDK olarak Streamlit kullanma seçeneği kullanımdan kaldırılmıştır. Streamlit ile bir Space dağıtmak istiyorsanız, lütfen Docker SDK'sını seçin ve ardından Streamlit şablonunu kullanın.

Streamlit Spaces

Streamlit, Python ile tam donanımlı bir web uygulaması geliştirmek için kullanıcılara reaktif bir şekilde özgürlük sağlar. Uygulamanın durumu her değiştiğinde kodunuz yeniden çalıştırılır. Streamlit, veri görselleştirme için de mükemmeldir ve Bokeh, Plotly, Altair gibi çeşitli grafik kütüphanelerini destekler. Spaces'te Streamlit uygulamaları oluşturmak ve barındırmak hakkında bu blog yazısını okuyun.

Yeni bir Space oluştururken SDK olarak Streamlit seçildiğinde, README.md dosyanızdaki YAML bloğunda sdk özelliği streamlit olarak ayarlanarak Space’iniz Streamlit’in en son sürümüyle başlatılır. Streamlit sürümünü değiştirmek isterseniz sdk_version özelliğini düzenleyebilirsiniz.

Bir Space oluştururken Yeni Space formu üzerinden SDK olarak Streamlit'i seçerek Space'te Streamlit kullanabilirsiniz. Bu işlem, YAML yapılandırma bloğunda aşağıdaki özellikleri içeren bir README.md dosyası içeren bir depo oluşturur:

sdk: streamlit
sdk_version: 1.25.0 # The latest supported version

sdk_version değerini düzenleyebilirsiniz ancak desteklenmeyen bir Streamlit sürümü kullandığınızda sorunlar yaşanabilir. Tüm Streamlit sürümleri desteklenmediğinden, hangi sürümlerin kullanılabilir olduğunu görmek için referans bölümüne bakın.

Streamlit hakkında ayrıntılı bilgi için Streamlit dokümantasyonuna başvurun.

Streamlit Spaces için yalnızca 8501 portu (varsayılan port) izin verilir. Bu nedenle, Space'iniz için bir config.toml dosyası sağlıyorsanız, varsayılan portun üzerine yazılmadığından emin olun.

İlk Streamlit Uzayınız: Sosisli Sınıflandırıcı

Aşağıdaki bölümlerde, bir Space oluşturma, yapılandırma ve kodunuzu bu Space’e dağıtma temellerini öğreneceksiniz. Streamlit ile, verilen bir resimde sosisli sandviç 🌭 olup olmadığını tespit edebilen julien-c/hotdog-not-hotdog modelini demo olarak kullanacak bir Hot Dog Classifier Space oluşturacağız.

Bu projenin tamamlanmış bir sürümünü NimaBoscarino/hotdog-streamlit adresinde bulabilirsiniz.

Yeni bir Streamlit Space oluşturun

Önce yepyeni bir Space oluşturarak ve SDK olarak Streamlit seçerek başlayacağız. Hugging Face Spaces, Git depolarıdır; bu da, commit’ler göndererek Space’iniz üzerinde kademeli (ve işbirlikçi) olarak çalışabileceğiniz anlamına gelir. Devam etmeden önce dosyaları nasıl oluşturup düzenleyebileceğinizi öğrenmek için Depolarla Başlangıç kılavuzuna göz atın.

Bağımlılıkları ekleyin

Hot Dog Classifier için modeli kullanmak üzere 🤗 Transformers pipeline kullanacağız, bu nedenle birkaç bağımlılığı kurarak başlamamız gerekiyor. Bunu, depomuzda bir requirements.txt dosyası oluşturup aşağıdaki bağımlılıkları ekleyerek yapabiliriz:

transformers
torch

Spaces çalışma zamanı bağımlılıkları yüklemeyi halleder!

Streamlit uygulamasını oluşturun

Streamlit uygulamasını oluşturmak için depoda app.py adında yeni bir dosya oluşturun ve aşağıdaki kodu ekleyin:

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

Bu Python betiği, Streamlit arayüzü tarafından kullanılan julien-c/hotdog-not-hotdog modelini yüklemek için 🤗 Transformers pipeline kullanır. Streamlit uygulaması, bir görsel yüklemenizi bekler ve ardından bu görseli hot dog veya not hot dog olarak sınıflandırır. Kodu app.py dosyasına kaydettikten sonra, uygulamanızı çalışırken görmek için App sekmesine gidin!

Diğer web sayfalarına Streamlit Spaces göm

Diğer web sayfalarında bir Streamlit Space'i satır içi çerçeve olarak gömmek için HTML <iframe> etiketini kullanabilirsiniz. Bunun için .hf.space son ekli Space URL'inizi eklemeniz yeterlidir. Space URL'inizi bulmak için Spaces seçeneklerindeki “Embed this Space” düğmesini kullanabilirsiniz.

Örneğin, yukarıdaki demo aşağıdaki etiketle bu belgelerde gömülebilir:

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

URL'ye ?embed=true parametresinin eklendiğini ve bunun Streamlit uygulamasının gömme modunu etkinleştirerek ince gömme için bazı boşlukları ve alt bilgiyi kaldırdığını lütfen not edin.

Otomatik boyutlandırma özellikli IFrames ile Streamlit Spaces'leri gömün

Streamlit, 1.17.0 sürümünden beri otomatik iframe boyutlandırmasını destekler; böylece gömülü Streamlit uygulamasının içerik hacmine göre üst iframe'in boyutu otomatik olarak ayarlanır.

iFrame Resizer kütüphanesine dayanır ve aşağıdaki örnekte olduğu gibi birkaç satır kod eklemeniz gerekir:

• id, otomatik yeniden boyutlandırma hedefini belirtmek için kullanılan <iframe /> olarak ayarlanır.
• iFrame Resizer, script etiketi üzerinden yüklenir.
• iFrameResize() fonksiyonu, hedef iframe öğesinin kimliği ile çağrılır; böylece boyutu otomatik olarak değişir.

iFrameResize() işlevinin ilk argümanına seçenekler geçebiliriz. Ayrıntılar için belgeye bakın.

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

Ayrıca, belgelerimize göz atabilirsiniz.