أصبح خيار استخدام Streamlit كحزمة تطوير البرمجيات (SDK) المدمجة الافتراضية لـ Spaces غير مدعوم. إذا كنت ترغب في نشر مساحة باستخدام Streamlit، فاختَر حزمة تطوير البرمجيات (SDK) الخاصة بـ Docker، ثم استخدم قالب Streamlit.

مساحات Streamlit

يمنح Streamlit المستخدمين حرية بناء تطبيق ويب متكامل الميزات بلغة بايثون بطريقة تفاعلية. يتم إعادة تشغيل الكود في كل مرة يتغير فيها حالة التطبيق. كما أن Streamlit ممتاز لتصور البيانات ويدعم عدة مكتبات للرسوم البيانية مثل Bokeh وPlotly وAltair. اقرأ هذا المدونة حول بناء واستضافة تطبيقات Streamlit في Spaces.

اختيار Streamlit كـ SDK عند إنشاء مساحة جديدة سيهيّئ مساحتك بأحدث إصدار من Streamlit من خلال تعيين خاصية sdk إلى streamlit في كتلة YAML الخاصة بملف README.md. إذا كنت ترغب في تغيير إصدار Streamlit، يمكنك تعديل خاصية sdk_version.

لاستخدام Streamlit في Space، اختر Streamlit كـ SDK عند إنشاء Space من خلال نموذج Space جديد. سيؤدي هذا إلى إنشاء مستودع يحتوي على README.md يتضمن الخصائص التالية في كتلة التكوين YAML:

sdk: streamlit
sdk_version: 1.25.0 # The latest supported version

يمكنك تعديل sdk_version، لكن لاحظ أنه قد تحدث مشاكل عند استخدام إصدار غير مدعوم من Streamlit. لا يتم دعم جميع إصدارات Streamlit، لذا يرجى الرجوع إلى قسم المرجع لمعرفة الإصدارات المتاحة.

لمزيد من المعلومات التفصيلية حول Streamlit، يُرجى الرجوع إلى توثيق Streamlit.

يُسمح فقط بمنفذ 8501 لمساحات Streamlit (المنفذ الافتراضي). ونتيجةً لذلك، إذا قمت بتوفير ملف config.toml لمساحتك، فتأكد من عدم تجاوز المنفذ الافتراضي.

مساحتك الأولى في Streamlit: مصنّف الهوت دوغ

في الأقسام التالية، ستتعلم أساسيات إنشاء مساحة (Space) وإعدادها ونشر كودك عليها. سنقوم بإنشاء مساحة Hot Dog Classifier باستخدام Streamlit، والتي ستُستخدم لعرض نموذج julien-c/hotdog-not-hotdog، القادر على تحديد ما إذا كانت صورة معينة تحتوي على هوت دوغ 🌭

يمكنك العثور على نسخة مكتملة من هذا المشروع مستضافة على NimaBoscarino/hotdog-streamlit.

إنشاء مساحة Streamlit جديدة

سنبدأ بـ إنشاء مساحة جديدة تمامًا واختيار Streamlit كإطار تطوير البرمجيات (SDK). مساحات Hugging Face هي مستودعات Git، مما يعني أنه يمكنك العمل على مساحتك بشكل تدريجي (وتعاوني) من خلال دفع الالتزامات (commits). اطّلع على دليل البدء بالمستودعات للتعرف على كيفية إنشاء الملفات وتحريرها قبل المتابعة.

أضِف التبعيات

لصنف الكلاب الساخنة Hot Dog Classifier سنستخدم 🤗 Transformers pipeline لاستخدام النموذج، لذا نحتاج إلى البدء بتثبيت بعض الاعتماديات. يمكن القيام بذلك بإنشاء ملف requirements.txt في مستودعنا، وإضافة الاعتماديات التالية إليه:

transformers
torch

ستتولى بيئة تشغيل Spaces مهمة تثبيت التبعيات!

إنشاء تطبيق Streamlit

لإنشاء تطبيق Streamlit، أنشئ ملفًا جديدًا في المستودع باسم app.py، وأضف الكود التالي:

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

يستخدم هذا السكربت بلغة بايثون 🤗 Transformers pipeline لتحميل النموذج julien-c/hotdog-not-hotdog، وهو النموذج الذي تستخدمه واجهة Streamlit. سيتوقع تطبيق Streamlit منك رفع صورة، ثم يصنّفها على أنها hot dog أو not hot dog. بمجرد حفظ الكود في ملف app.py، انتقل إلى تبويب App لرؤية تطبيقك قيد التشغيل!

تضمين مساحات Streamlit في صفحات ويب أخرى

يمكنك استخدام وسم <iframe> في HTML لتضمين مساحة Streamlit كإطار مضمّن داخل صفحات ويب أخرى. ما عليك سوى تضمين عنوان URL الخاص بمساحتك، والذي ينتهي باللاحقة .hf.space. للعثور على عنوان URL الخاص بمساحتك، يمكنك استخدام زر “Embed this Space” من خيارات المساحات.

على سبيل المثال، يمكن تضمين العرض التوضيحي أعلاه في هذه الوثائق باستخدام الوسوم التالية:

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

يرجى ملاحظة أننا أضفنا ?embed=true إلى عنوان URL، مما يُفعّل وضع التضمين لتطبيق Streamlit، فيزيل بعض الفراغات والتذييل من أجل تضمينات أنحف.

تضمين مساحات Streamlit باستخدام إطارات IFrames ذاتية التكيّف

دعم Streamlit تغيير حجم إطار iframe تلقائيًا منذ 1.17.0 بحيث يتم ضبط حجم الإطار الأب تلقائيًا ليناسب حجم محتوى تطبيق Streamlit المضمّن.

يعتمد على مكتبة iFrame Resizer، والتي تتطلب إضافة بضعة أسطر من الكود، كما في المثال التالي حيث

• يتم تعيين id إلى <iframe /> الذي يُستخدم لتحديد هدف إعادة التحجيم التلقائي.
• يتم تحميل iFrame Resizer عبر وسم script.
• تُستدعى الدالة iFrameResize() باستخدام معرّف عنصر iframe المستهدف، بحيث تتغير أبعاده تلقائيًا.

يمكننا تمرير خيارات إلى الحجة الأولى لـ iFrameResize(). راجع التوثيق للاطلاع على التفاصيل.

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

بالإضافة إلى ذلك، يمكنك الاطلاع على توثيقنا.