بناء واجهة بسيطة لنماذج التعلم الآلي باستخدام Streamlit

بناء واجهة بسيطة لنماذج التعلم الآلي باستخدام Streamlit (Streamlit واجهة ML)

في كثير من مشاريع الذكاء الاصطناعي، يكون لدينا نموذج تعلم آلي جاهز يعمل بشكل ممتاز في بيئة التطوير، لكن المشكلة تبدأ عندما نريد أن نجعله قابلاً للاستخدام من قبل الآخرين (فريق العمل، العميل، أو حتى المستخدم النهائي). هنا تظهر قوة Streamlit، إطار عمل بسيط في بايثون يسمح لك ببناء واجهة ويب تفاعلية لنماذجك خلال دقائق.

في هذا الدليل العملي من افهم صح سنبني معًا Streamlit واجهة ML بسيطة لعرض نموذج تعلم آلي، مع:

  • شرح فكرة Streamlit وكيف يعمل.
  • تهيئة بيئة العمل وتنصيب المكتبات.
  • تحميل نموذج تعلم آلي (ML model) واستخدامه للتنبؤ.
  • بناء واجهة تفاعلية تستقبل مدخلات من المستخدم.
  • عرض النتائج بشكل واضح ومُنظّم.
  • تشغيل التطبيق محليًا، مع لمحة سريعة عن النشر على سيرفر.

إذا لم تكن قد بنيت نموذجًا من قبل، يمكنك الرجوع إلى مقالنا عن بناء نموذج تعلم عميق صغير باستخدام PyTorch خطوة بخطوة، ثم استخدامه مع Streamlit لعرضه للمستخدم.

ما هو Streamlit ولماذا هو مناسب لواجهات نماذج ML؟

Streamlit هو مكتبة مفتوحة المصدر في بايثون تتيح لك بناء تطبيقات ويب تفاعلية بسهولة، دون الحاجة لخبرة في تطوير الواجهات (HTML, CSS, JavaScript). كل شيء يتم من داخل سكربت بايثون عادي.

مميزاته الرئيسية لنماذج التعلم الآلي:

  • سهل الاستخدام: واجهة برمجية بسيطة تعتمد على دوال مثل st.text_input, st.slider, st.button.
  • تكامل مباشر مع بايثون: يمكنك استدعاء نموذجك مباشرة من نفس الملف أو من ملف آخر.
  • تحديث فوري: أي تغيير في الكود يظهر فورًا في واجهة الويب بعد إعادة التحميل.
  • مناسب للنماذج الصغيرة والمتوسطة: مثالي للعروض، النماذج الأولية (Prototype) أو لوحات التحكم البسيطة.

هذا يجعله خيارًا ممتازًا لكل من يريد Streamlit واجهة ML بسيطة وسريعة لنموذجه بدون تعقيدات أطر عمل الويب الكاملة مثل Django أو Flask (رغم إمكانية استخدامها عند الحاجة، ويمكنك قراءة المزيد عن النماذج في دليل Django 5 Models).

متطلبات بناء Streamlit واجهة ML

قبل البدء، ستحتاج إلى:

  • تنصيب Python 3.8+.
  • مكتبة streamlit.
  • مكتبة للتعلم الآلي (مثل scikit-learn أو PyTorch أو TensorFlow حسب نموذجك).
  • ملف النموذج المُدرَّب (مثل: .pkl لـ scikit-learn أو .pt لـ PyTorch).

تنصيب Streamlit والمكتبات الأساسية

من الأفضل إنشاء بيئة افتراضية (virtualenv أو venv) ثم تشغيل:

pip install streamlit scikit-learn pandas numpy

إذا كان نموذجك مبنيًا باستخدام PyTorch مثل الشرح في هذا المقال بناء نموذج تعلم عميق صغير باستخدام PyTorch خطوة بخطوة، أضف:

pip install torch torchvision

فكرة التطبيق الذي سنبنيه

لشرح الفكرة بشكل واضح، سنفترض أن لدينا نموذجًا بسيطًا للتنبؤ بمعدل رضا عميل بناءً على بعض الخصائص، مثل:

  • العمر.
  • الراتب الشهري.
  • مدة الاشتراك بالخدمة (بالأشهر).
  • هل اشتكى من الخدمة سابقًا؟

يمكنك استبدال هذه المدخلات بمدخلات نموذجك الحقيقي. الهدف هو توضيح هيكل Streamlit واجهة ML أكثر من دقة النموذج نفسه.

هيكلة المشروع

سنستخدم هيكلًا بسيطًا للمجلد:

ml-streamlit-app/
├─ model.pkl                 # ملف النموذج المُدرَّب (كمثال)
└─ app.py                    # ملف تطبيق Streamlit

إذا كنت تستخدم PyTorch، قد يكون ملف النموذج model.pt، أو حتى كود النموذج مباشرة داخل app.py.

الخطوة 1: تحميل النموذج في Streamlit

أول جزء مهم في Streamlit واجهة ML هو تحميل النموذج بكفاءة. نريد:

  • تحميل النموذج مرة واحدة فقط، وليس في كل طلب أو إعادة تحميل للصفحة.
  • استخدام st.cache_resource أو st.cache_data (في الإصدارات الجديدة من Streamlit) لتسريع الأداء.

مثال باستخدام scikit-learn مع ملف model.pkl:

import streamlit as st
import pickle

@st.cache_resource
def load_model():
    with open("model.pkl", "rb") as f:
        model = pickle.load(f)
    return model

model = load_model()

إذا كنت تستخدم PyTorch، سيكون التحميل مختلفًا قليلًا، لكن الفكرة نفسها: دالة لتحميل النموذج، ثم استخدامه في الواجهة.

الخطوة 2: بناء عناصر الواجهة (Inputs) للمستخدم

Streamlit يوفر مجموعة من العناصر التفاعلية الجاهزة:

  • st.text_input لإدخال النصوص.
  • st.number_input للأرقام.
  • st.slider للمنزلقات.
  • st.selectbox للقوائم المنسدلة.
  • st.checkbox لاختيار صح/خطأ.

مثال على واجهة لإدخال بيانات العميل:

import streamlit as st

st.title("واجهة بسيطة لنموذج تعلم آلي باستخدام Streamlit")
st.subheader("تنبؤ بمعدل رضا العميل")

age = st.number_input("العمر", min_value=18, max_value=80, value=30)
salary = st.number_input("الراتب الشهري (بالعملة المحلية)", min_value=1000, max_value=100000, value=5000)
months = st.slider("مدة الاشتراك (بالأشهر)", min_value=1, max_value=60, value=12)
has_complaint = st.checkbox("هل سبق أن قدّم العميل شكوى؟")

هذه المدخلات هي ما سيتم تمريره لاحقًا إلى النموذج على شكل مصفوفة أو DataFrame.

الخطوة 3: تجهيز البيانات وإرسالها للنموذج

بعد أخذ المدخلات من المستخدم، نحتاج إلى:

  1. تحويلها لصيغة رقمية مناسبة (0/1 للمتغيرات المنطقية، أرقام حقيقية، إلخ).
  2. جمعها في numpy array أو pandas DataFrame حسب ما يتوقعه النموذج.
  3. استدعاء دالة predict أو ما يقابلها في نموذجك.

مثال بسيط باستخدام scikit-learn:

import numpy as np

complaint_value = 1 if has_complaint else 0

input_data = np.array([[age, salary, months, complaint_value]])

if st.button("تنفيذ التنبؤ"):
    prediction = model.predict(input_data)
    st.success(f"معدل رضا العميل المتوقع: {prediction[0]:.2f} من 5")

بهذا أصبح لدينا Streamlit واجهة ML تستقبل مدخلات من المستخدم، تمررها إلى النموذج، ثم تعرض النتيجة.

الخطوة 4: تنظيم واجهة Streamlit بشكل أفضل

لتحسين تجربة المستخدم، يمكننا تنظيم الصفحة، إضافة نصوص توضيحية، واستخدام الأعمدة:

  • استخدام st.sidebar لنقل بعض المدخلات إلى القائمة الجانبية.
  • استخدام st.columns لعرض المدخلات في أكثر من عمود.
  • إضافة وصف مختصر للنموذج وكيفية استخدامه.

مثال أكثر تنظيمًا:

import streamlit as st
import numpy as np
import pickle

st.set_page_config(page_title="Streamlit واجهة ML", layout="centered")

@st.cache_resource
def load_model():
    with open("model.pkl", "rb") as f:
        model = pickle.load(f)
    return model

model = load_model()

st.title("Streamlit واجهة ML لنموذج رضا العملاء")
st.write("أدخل بيانات العميل بالأسفل للحصول على التنبؤ بمعدل الرضا المتوقع.")

with st.sidebar:
    st.header("إعدادات الإدخال")
    age = st.number_input("العمر", min_value=18, max_value=80, value=30)
    salary = st.number_input("الراتب الشهري", min_value=1000, max_value=100000, value=5000)
    months = st.slider("مدة الاشتراك (أشهر)", min_value=1, max_value=60, value=12)
    has_complaint = st.checkbox("سبق أن قدّم شكوى؟")

st.subheader("ملخص البيانات المدخلة")
col1, col2 = st.columns(2)
with col1:
    st.metric("العمر", age)
    st.metric("مدة الاشتراك (أشهر)", months)
with col2:
    st.metric("الراتب الشهري", salary)
    st.metric("هل اشتكى سابقًا؟", "نعم" if has_complaint else "لا")

complaint_value = 1 if has_complaint else 0
input_data = np.array([[age, salary, months, complaint_value]])

if st.button("تنفيذ التنبؤ الآن"):
    prediction = model.predict(input_data)
    st.success(f"معدل رضا العميل المتوقع: {prediction[0]:.2f} من 5")

بهذا نحصل على واجهة أنيقة، فيها:

  • المدخلات في الشريط الجانبي.
  • ملخص سريع للقيم المُدخلة في شكل مقاييس.
  • زر لتنفيذ التنبؤ، ونتيجة واضحة.

الخطوة 5: تشغيل تطبيق Streamlit محليًا

بعد كتابة الكود في ملف app.py داخل مجلد المشروع، شغّل الأمر التالي من داخل نفس المجلد:

streamlit run app.py

سيفتح Streamlit المتصفح تلقائيًا على رابط مشابه لـ:

http://localhost:8501

كلما عدّلت في الكود، يمكنك حفظ الملف وسيقوم Streamlit بتحديث الواجهة تلقائيًا أو عند إعادة التحميل (حسب إعداداتك).

ملحوظة: التعامل مع نماذج PyTorch أو TensorFlow

إذا كان النموذج مبنيًا باستخدام PyTorch (كما في شرح بناء نموذج PyTorch خطوة بخطوة)، يكون التدفق كالتالي:

  1. تحميل النموذج: 
    import torch

@st.cache_resource
def load_model():
    model = MyModelClass()
    model.load_state_dict(torch.load("model.pt", map_location=torch.device("cpu")))
    model.eval()
    return model
  2. تجهيز البيانات وتحويلها إلى torch.Tensor: 
    input_tensor = torch.tensor(input_data, dtype=torch.float32)
with torch.no_grad():
    output = model(input_tensor)
prediction = output.item()

المبدأ نفسه مع TensorFlow/Keras: تحميل النموذج، ثم تمرير المدخلات بنفس الأبعاد والمتغيرات التي استخدمتها أثناء التدريب.

تحسين واجهة Streamlit واجهة ML للمستخدم النهائي

بعد تشغيل النسخة الأولى من التطبيق، يمكنك التفكير في بعض التحسينات:

  • التحقق من المدخلات: التأكد من أن القيم منطقية (عدم السماح بقيم سالبة، أو أعمار غير واقعية).
  • إضافة شرح للنموذج: ما هو نوع النموذج؟ على ماذا تم تدريبه؟ ما هي حدود دقته؟
  • إضافة رسم بياني: مثل توزيع احتمالات التنبؤ، أو مقارنة بين مدخلات مختلفة.
  • إمكانية رفع ملف CSV: للسماح للمستخدم برفع مجموعة بيانات والحصول على تنبؤات جماعية بدلاً من حالة واحدة.

مثال مختصر لقبول ملف CSV:

uploaded_file = st.file_uploader("ارفع ملف CSV يحتوي على بيانات العملاء", type=["csv"])
if uploaded_file is not None:
    import pandas as pd
    data = pd.read_csv(uploaded_file)
    st.write("معاينة البيانات:", data.head())
    predictions = model.predict(data)
    st.write("نتائج التنبؤ:", predictions)

تشغيل التطبيق على سيرفر أو على الإنترنت

Streamlit موجه أساسًا لتشغيل التطبيقات بطريقة بسيطة، ويمكن نشره بعدة طرق:

  • سيرفر داخلي (On-premise): تثبيت Python وStreamlit على خادم داخل الشركة وتشغيل: 
    streamlit run app.py --server.port 8501 --server.address 0.0.0.0
    ثم فتح تطبيقك عبر عنوان IP السيرفر.
  • استضافة سحابية: استخدام منصات مثل:
    • خدمات سحابية (AWS, GCP, Azure) مع إعداد خادم بسيط (EC2 / VM).
    • منصات متخصصة أو حاويات Docker لتسهيل التشغيل.
  • خدمات نشر جاهزة: هناك خدمات مخصصة لنشر تطبيقات Streamlit مباشرة من مستودع Git.

عند النشر، انتبه إلى:

نصائح عامة لبناء Streamlit واجهة ML احترافية

  • اجعل التجربة بسيطة: لا تُغرق المستخدم في خيارات كثيرة منذ البداية، قدم الإعدادات الأساسية أولاً.
  • اشرح كل حقل إدخال: استخدم st.help أو نصوصًا تحت الحقول لشرح المطلوب.
  • أضف ملاحظات حول دقة النموذج: لا تجعل المستخدم يظن أن التنبؤات مطلقة الصحة؛ اذكر نسبة الدقة والمعايير.
  • استخدم الـ caching بذكاء: لعدم إعادة تحميل النموذج أو البيانات الضخمة في كل مرة.
  • فصل الكود: ضع منطق النموذج (تحميله، المعالجة المسبقة) في ملف بايثون منفصل، واستدعِه في app.py لسهولة الصيانة.

خلاصة: من نموذج ML إلى واجهة تفاعلية في دقائق

باستخدام Streamlit، تستطيع تحويل أي نموذج تعلم آلي تملكه إلى تطبيق ويب تفاعلي بسيط يمكن لفريقك أو عملائك استخدامه بسهولة. كل ما تحتاجه هو:

  1. نموذج مُدرَّب (ML model) محفوظ في ملف أو في كود.
  2. ملف app.py يحوي:
    • دالة لتحميل النموذج مع @st.cache_resource.
    • عناصر واجهة (Inputs) للحصول على بيانات من المستخدم.
    • منطق تجهيز البيانات وتمريرها للنموذج.
    • عرض النتيجة بشكل واضح للمستخدم.
  3. تشغيل الأمر streamlit run app.py محليًا أو على سيرفر.

بهذا تكون قد أنشأت Streamlit واجهة ML عملية، تتيح لك عرض إمكانيات نموذجك بسهولة، وتسرع عملية اختبار الأفكار ومشاركتها مع الآخرين، دون الدخول في تعقيدات تطوير واجهات ويب متكاملة.

حول المحتوى:

دليل عملي لبناء واجهة تفاعلية لنموذج تعلم آلي صغير باستخدام Streamlit: تحميل النموذج، عرض النتائج، إضافة خيارات للمستخدم، ونشر التطبيق محليًا أو على سيرفر.

هل كان هذا مفيدًا لك؟

أضف تعليقك