مقدمة في Streamlit: أسرع طريقة لتحويل سكربتات AI الخاصة بك إلى واجهات ويب تفاعلية

مقدمة في Streamlit: لماذا يفضله مهندسو تطبيقات الذكاء الاصطناعي؟

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

فكرة الإطار بسيطة جداً: بدلاً من كتابة HTML وCSS وJavaScript لبناء واجهة، تقوم بكتابة أوامر Python تصف العناصر التفاعلية مثل الحقول والأزرار والمربعات الجانبية. كل تفاعل من المستخدم يعيد تشغيل السكربت من الأعلى إلى الأسفل ضمن نموذج تنفيذي بسيط، وهذا يجعل ربط الواجهة بمنطق LLM أو LangChain أمراً سريعاً وواضحاً.

كيف تعمل معمارية Streamlit عند بناء تطبيق AI؟

من منظور هندسي، تطبيق Streamlit يتكون عادة من أربع طبقات مترابطة:

• طبقة الإدخال: تستقبل سؤال المستخدم أو الملف أو الإعدادات مثل temperature.
• طبقة المعالجة: تنفذ منطق التطبيق، مثل تنظيف النص، حساب الرموز Tokens، أو تجهيز البرومبت.
• طبقة الاستدعاء الذكي: ترسل الطلب إلى نموذج خارجي أو سلسلة Chain أو نظام RAG.
• طبقة العرض: تعرض الإجابة، السجل، التنبيهات، والنتائج المرحلية للمستخدم.

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

إعداد البيئة وتشغيل أول تطبيق

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

import streamlit as st

st.set_page_config(page_title="AI Demo", page_icon="🤖", layout="wide")

st.title("تجربة أول واجهة AI باستخدام Streamlit")
user_text = st.text_area("اكتب النص الذي تريد تحليله")

if st.button("تحليل النص"):
    st.write("النص المستلم:")
    st.write(user_text)

بعد حفظ الملف مثلاً باسم app.py، يتم التشغيل بالأمر streamlit run app.py. عملياً، هذا يعني أنك نقلت السكربت من بيئة سطر الأوامر إلى واجهة ويب محلية دون بناء backend وfrontend منفصلين.

ربط Streamlit مع نموذج لغوي خطوة بخطوة

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

• أنشئ حقل إدخال لسؤال المستخدم.
• أضف عناصر تحكم في إعدادات التوليد مثل Temperature.
• ابنِ دالة تعزل منطق الاستدعاء عن الواجهة.
• اعرض النتيجة داخل الصفحة مع معالجة الأخطاء.

import os
import streamlit as st
from openai import OpenAI

client = OpenAI(api_key=os.getenv("OPENAI_API_KEY"))

def ask_llm(prompt, temperature):
    response = client.chat.completions.create(
        model="gpt-4o-mini",
        temperature=temperature,
        messages=[
            {"role": "system", "content": "أنت مساعد تقني متخصص في شرح البرمجة."},
            {"role": "user", "content": prompt}
        ]
    )
    return response.choices[0].message.content

st.title("مساعد برمجي تجريبي")
question = st.text_area("اكتب سؤالك")
temperature = st.slider("Temperature", min_value=0.0, max_value=1.5, value=0.3, step=0.1)

if st.button("إرسال"):
    if question.strip():
        answer = ask_llm(question, temperature)
        st.markdown(answer)
    else:
        st.warning("يرجى إدخال سؤال أولاً")

أجب كمساعد تقني عربي متخصص. اشرح الفكرة بشكل مختصر، ثم أعط مثالاً عملياً، ثم اختم بتحذير واحد حول أكثر خطأ شائع.

لاحظ أن البرومبت هنا ليس مجرد نص ثابت، بل يمكن تركيبه ديناميكياً وفق مدخلات المستخدم، تماماً كما شرحنا في هندسة الأوامر داخل الكود.

إدارة الحالة Session State ولماذا هي أساسية في تطبيقات المحادثة؟

بما أن Streamlit يعيد تشغيل السكربت عند كل تفاعل، فأنت تحتاج إلى آلية تحفظ البيانات بين كل إعادة تنفيذ. هنا تأتي st.session_state، وهي جوهرية في تطبيقات الدردشة والذاكرة القصيرة.

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

import streamlit as st

if "messages" not in st.session_state:
    st.session_state.messages = []

user_msg = st.chat_input("اكتب رسالتك")

if user_msg:
    st.session_state.messages.append({"role": "user", "content": user_msg})
    st.session_state.messages.append({"role": "assistant", "content": f"تم استلام: {user_msg}"})

for msg in st.session_state.messages:
    with st.chat_message(msg["role"]):
        st.write(msg["content"])

دمج Streamlit مع RAG وVector DB

القيمة الحقيقية تظهر عندما لا تكون الواجهة مجرد غلاف تجميلي، بل نقطة تشغيل لنظام معرفي كامل. في تطبيقات RAG، يمكن للمستخدم رفع ملف، ثم يمر النص بمراحل استخراج وتقسيم وتحويل إلى Embeddings وتخزين في Vector Database، ثم استرجاع المقاطع المناسبة قبل إرسالها إلى النموذج.

هذا يعني أن Streamlit يصبح طبقة تشغيل فوق سلسلة بيانات كاملة:

• رفع مستند بواسطة المستخدم.
• استخراج النص من PDF أو CSV.
• تجزئة النص عبر Text Splitters.
• تحويل الأجزاء إلى متجهات وتخزينها.
• استرجاع أفضل المقاطع عند السؤال.
• حقن السياق داخل البرومبت ثم توليد الإجابة.

إذا كنت تعمل على هذا المسار، فمن المفيد مراجعة دمج المعلومات المسترجعة مع الـ LLM، لأن الواجهة وحدها لا تضمن دقة الإجابة ما لم تكن هندسة التدفق الخلفي سليمة.

أفضل الممارسات الهندسية عند تحويل السكربت إلى منتج واجهة

1) افصل الواجهة عن منطق الذكاء الاصطناعي

لا تضع كل شيء داخل ملف واحد ضخم. الأفضل أن تبقي أوامر UI في الأعلى، بينما تُنقل دوال المعالجة والاستدعاء إلى ملفات خدمات مستقلة. هذا يجعل الصيانة والاختبار أسهل.

2) أضف مؤشرات انتظار وتجارب استخدام واضحة

عند استدعاء نموذج خارجي، استخدم حالات مثل spinner ورسائل الخطأ الصريحة. ويمكنك أيضاً تحسين التجربة عبر Streaming Responses حتى تظهر الإجابة تدريجياً.

3) راقب التكلفة والحدود

واجهات الذكاء الاصطناعي تشجع على التكرار المكثف من المستخدمين، لذلك يجب الانتباه إلى حجم المدخلات، عدد الطلبات، وحدود rate limits. من الناحية العملية، من الجيد تقدير الاستهلاك قبل الإرسال وربط ذلك بمنهجية إدارة الرموز والتكلفة.

4) احمِ جودة المحتوى والنتائج

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

متى يكون Streamlit الخيار المثالي؟

يكون مناسباً جداً عندما تريد إطلاق واجهة أولية بسرعة، اختبار منطق LLM، بناء لوحة داخلية للفريق، أو عرض مشروع MVP دون استثمار ثقيل في الواجهة. أما إذا كنت تحتاج تحكماً بصرياً شديد التعقيد أو بنية مؤسسية أمامية متقدمة، فقد تنتقل لاحقاً إلى حلول أكثر مرونة. لكن في مرحلة بناء وتجريب تطبيقات الذكاء الاصطناعي، يظل Streamlit من أسرع الطرق لتحويل السكربت البرمجي إلى منتج يمكن لمستخدم غير تقني أن يختبره مباشرة.