الدرس 4 من 8

واجهة في دقايق

مش كل الناس هتكلم API. اعمل صفحة أي حد يستخدمها.

ليه واجهة؟

مديرك أو الزبون مش هيفتح Terminal ويبعت JSON. محتاجين صفحة فيها خانات وزرار. عمل موقع كامل بـ HTML و JavaScript بياخد وقت، بس فيه مكتبات بايثون بتعمل واجهة من كام سطر، ومثالية للـ demos والأدوات الداخلية.

# app.py  ->  run with: streamlit run app.py
import joblib
import pandas as pd
import streamlit as st

model = joblib.load("price_model.joblib")

st.title("🏠 Apartment Price Estimator")

city = st.selectbox("City", ["Cairo", "Giza", "Alexandria"])
area = st.slider("Area (m²)", 50, 250, 120)
rooms = st.number_input("Rooms", 1, 6, 3)
floor = st.number_input("Floor", 0, 30, 3)
age = st.slider("Building age (years)", 0, 40, 5)
metro = st.slider("Distance to metro (km)", 0.0, 10.0, 1.5)

if st.button("Estimate price"):
    row = pd.DataFrame([{"city": city, "area": area, "rooms": rooms,
                         "floor": floor, "age": age, "metro_km": metro}])
    price = model.predict(row)[0]
    st.success(f"Estimated price: {price:,.0f}K EGP")

Streamlit بيشغّل السكريبت من أوله لآخره مع كل تغيير في الصفحة. ممتاز للـ dashboards وأدوات تحليل الداتا، وفيه رسوم وجداول جاهزة.

واجهة لـ chatbot

فاكر الـ RAG من المرحلة ٧؟ Gradio عنده واجهة شات جاهزة، بتوصلها بالدالة بتاعتك في سطرين:

chat_ui.py

import gradio as gr
from rag_answer import answer        # your RAG function from phase 7

def respond(message, history):
    return answer(message)

gr.ChatInterface(respond, title="🛍️ Store Assistant").launch()

🏗️ الواجهة تكلم الموديل مباشرة ولا عن طريق الـ API؟للـ demo السريع: الواجهة تحمّل الموديل بنفسها زي الأمثلة فوق. في سيستم حقيقي: الموديل في API لوحده، والواجهة (أو تطبيق الموبايل أو الموقع) بتكلمه. كده تقدر تحدّث الموديل من غير ما تلمس الواجهة، وكذا تطبيق يستخدم نفس الموديل.

→ الدرس اللي فات