من الفكرة إلى الواقع: كيف تبني تطبيق ذكاء اصطناعي "Full Stack" من الصفر (Backend + Frontend)

الجميع يتحدث عن الذكاء الاصطناعي. نستخدم ChatGPT، نشاهد صور Midjourney، وننبهر بالقدرات. لكن السؤال الذي يطرحه كل مطور هو: "كيف أنتقل من مجرد 'مستخدم' إلى 'صانع'؟ كيف أستخدم هذا الذكاء في موقعي الخاص؟"

الحقيقة هي أن "النموذج" (مثل GPT-4) هو مجرد "الدماغ". لكي يصبح مفيداً، أنت بحاجة إلى "جسد" كامل: واجهة أمامية (Frontend) ليكتب فيها المستخدم، وخلفية (Backend) لمعالجة الطلبات بأمان. هذا ما نسميه: تطبيق "Full Stack AI".

في هذا الدليل الشامل في KamalZone، سنقوم معاً ببناء تطبيق ذكاء اصطناعي متكامل من الصفر. سنبني "أداة تلخيص مقالات" بسيطة تتيح للمستخدم لصق نص طويل والحصول على ملخص فوري. سنستخدم أقوى مزيج تقني لهذا العمل: Python (مع Flask) للخلفية، و JavaScript (مع Fetch API) للواجهة الأمامية.

لماذا هذا المزيج؟ (Python + JavaScript)

ببساطة، لأنه المزيج الأكثر احترافية وطلباً في السوق:

• بايثون (Python): هي اللغة رقم 1 للذكاء الاصطناعي. مكتبات مثل `Transformers` و `PyTorch` تجعل تشغيل النماذج المعقدة أمراً سهلاً.
• فلاسك (Flask): هو إطار عمل بايثون خفيف الوزن ومثالي لبناء "واجهات برمجة التطبيقات" (APIs) بسرعة. إنه الجسر بين نموذج الـ AI والعالم الخارجي.
• جافاسكريبت (JavaScript): هي اللغة الوحيدة التي يفهمها المتصفح. سنستخدمها (مع HTML/CSS) لبناء الواجهة التي يتفاعل معها المستخدم، وستقوم "بالاتصال" بالـ API الخاص بنا.

الخطوة 1: بناء الـ Backend (الدماغ) بـ Python و Flask

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

للبدء، ستحتاج لتثبيت المكتبات الضرورية (افتح الـ Terminal أو CMD واكتب):

pip install Flask flask-cors transformers torch
    

(ملاحظة: `transformers` و `torch` مكتبات ضخمة. في هذا المثال، سنستخدم نموذج تلخيص بسيط مدمج معها).

كود الخادم (app.py)

قم بإنشاء ملف جديد باسم `app.py` والصق فيه هذا الكود:

# app.py - الخادم الخلفي لتطبيقنا
from flask import Flask, request, jsonify
from flask_cors import CORS
from transformers import pipeline

# 1. إعداد الخادم
app = Flask(__name__)
# "CORS" ضروري جداً للسماح لموقعنا (Frontend) بالتحدث مع هذا الخادم
CORS(app) 

# 2. تحميل نموذج الذكاء الاصطناعي (مرة واحدة فقط عند بدء التشغيل)
# سنستخدم نموذج تلخيص جاهز من Hugging Face
try:
    summarizer = pipeline("summarization", model="facebook/bart-large-cnn")
    print(">>> نموذج التلخيص تم تحميله بنجاح!")
except Exception as e:
    print(f">>> خطأ في تحميل النموذج: {e}")
    summarizer = None

# 3. إنشاء واجهة برمجة التطبيقات (API)
@app.route("/summarize", methods=["POST"])
def summarize_text():
    # التأكد من أن النموذج يعمل
    if summarizer is None:
        return jsonify({"error": "النموذج غير جاهز، يرجى المحاولة لاحقاً"}), 503

    # استلام البيانات (النص) القادمة من الواجهة الأمامية
    data = request.get_json()
    
    if not data or 'text_to_summarize' not in data:
        return jsonify({"error": "لم يتم إرسال أي نص للتلخيص"}), 400

    article_text = data['text_to_summarize']
    
    if len(article_text.split()) < 50:
         return jsonify({"error": "النص قصير جداً، يرجى إدخال 50 كلمة على الأقل."}), 400

    try:
        # 4. تشغيل نموذج الـ AI
        # (min_length=30, max_length=150) -> نريد ملخصاً بين 30 و 150 كلمة
        summary = summarizer(article_text, max_length=150, min_length=30, do_sample=False)
        
        # 5. إرسال النتيجة (الملخص) مرة أخرى إلى الواجهة الأمامية
        return jsonify({"summary": summary[0]['summary_text']})

    except Exception as e:
        print(f"Error during summarization: {e}")
        return jsonify({"error": "حدث خطأ أثناء معالجة النص"}), 500

# 6. تشغيل الخادم
if __name__ == "__main__":
    app.run(debug=True, port=5000)
    

رائع! الآن لديك خادم ذكاء اصطناعي. يمكنك تشغيله بكتابة: `python app.py`.

الخطوة 2: بناء الـ Frontend (الوجه) بـ HTML و JavaScript

الآن نحتاج إلى "وجه" جميل ليتفاعل معه المستخدم. سنستخدم HTML و JavaScript (مع `fetch` API) للتحدث مع الخادم الذي قمنا ببنائه للتو.

للبدء، يمكنك استخدام محرر الويب المباشر الخاص بنا لتجربة هذا الكود!

كود الواجهة الأمامية (index.html)

<!-- هذا الكود يمكن وضعه في أي صفحة HTML -->
<div class="tool-box">
    <h4>أداة تلخيص المقالات بالذكاء الاصطناعي</h4>
    <p>الصق المقال (50 كلمة على الأقل) واحصل على ملخص فوري.</p>
    
    <!-- 1. حقول الإدخال -->
    <textarea id="article-input" rows="10" placeholder="الصق النص الطويل هنا..." style="width:100%;"></textarea>
    <button id="summarize-btn" class="tool-button" style="width:100%; margin-top:10px;">
        <i class="fas fa-magic"></i> تلخيص النص
    </button>
    
    <!-- 2. عرض النتيجة -->
    <div id="result-container" style="margin-top: 20px;">
        <h4>الملخص:</h4>
        <div id="summary-output" style="background: #fff; padding: 15px; border-radius: 5px; min-height: 50px; border: 1px solid #ddd;">
            ... ستظهر النتيجة هنا
        </div>
    </div>
    <div id="error-message" style="color: #dc3545; font-weight: bold; margin-top: 10px;"></div>
</div>

<!-- 3. كود الجافاسكريبت للربط -->
<script>
document.addEventListener('DOMContentLoaded', () => {
    const summarizeBtn = document.getElementById('summarize-btn');
    const articleInput = document.getElementById('article-input');
    const summaryOutput = document.getElementById('summary-output');
    const errorMessage = document.getElementById('error-message');
    
    // عنوان الـ API الذي قمنا ببنائه في بايثون
    const API_URL = 'http://127.0.0.1:5000/summarize'; 

    summarizeBtn.addEventListener('click', async () => {
        const textToSummarize = articleInput.value;
        
        // تنظيف الواجهة
        summaryOutput.textContent = '... جاري التلخيص، يرجى الانتظار';
        errorMessage.textContent = '';
        summarizeBtn.disabled = true;
        summarizeBtn.textContent = 'جاري المعالجة...';

        try {
            // إرسال الطلب إلى خادم بايثون
            const response = await fetch(API_URL, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({
                    text_to_summarize: textToSummarize
                })
            });

            const data = await response.json();

            if (!response.ok) {
                // عرض رسالة الخطأ القادمة من الخادم
                throw new Error(data.error || 'حدث خطأ غير معروف');
            }

            // عرض النتيجة الناجحة!
            summaryOutput.textContent = data.summary;

        } catch (error) {
            console.error('Error:', error);
            summaryOutput.textContent = '... ستظهر النتيجة هنا';
            errorMessage.textContent = `فشل: ${error.message}`;
        } finally {
            // إعادة تفعيل الزر
            summarizeBtn.disabled = false;
            summarizeBtn.textContent = 'تلخيص النص';
        }
    });
});
</script>
    

الخطوة 3: تشغيل التطبيق المتكامل

أنت الآن جاهز! لتشغيل تطبيقك:

1. شغّل الـ Backend: في الـ Terminal، تأكد أنك في مجلد المشروع واكتب `python app.py`. (اتركه يعمل).
2. شغّل الـ Frontend: افتح ملف `index.html` في متصفحك.
3. جرب الأداة: الصق أي مقال طويل (باللغة الإنجليزية، لأن النموذج الذي اخترناه يدعمها بشكل أفضل) واضغط "تلخيص".

ما سيحدث هو أن كود JavaScript (في متصفحك) سيرسل طلباً عبر الإنترنت إلى كود Python (الذي يعمل على جهازك)، وسيقوم بايثون بتشغيل نموذج الـ AI، ثم سيعيد النتيجة إلى JavaScript ليعرضها لك.

الخلاصة: أنت الآن مطور Full Stack AI

بفهمك لهذين الجزأين، أنت لم تعد مجرد مطور واجهات أمامية أو خلفية. أنت الآن تفهم "الهيكل الكامل" (Architecture) لتطبيقات الذكاء الاصطناعي الحديثة.

يمكنك الآن أخذ هذه الفكرة وتوسيعها:

• استبدال نموذج التلخيص بـ نموذج بناء أوامر AI.
• بناء واجهة لـ أداة بناء أوامر الصور تتصل بـ DALL-E API.
• بناء "Chatbot" مخصص لخدمة العملاء.

الاحتمالات لا حصر لها. البرمجة هي القوة الخارقة الجديدة، ومزيج Python و JavaScript هو المزيج الأقوى لبناء مستقبل الويب.

ما هي الفكرة التالية التي ستبنيها؟
شاركنا في التعليقات ما هي أول أداة ذكاء اصطناعي تفكر في بنائها باستخدام هذا المزيج القوي!

✍️ كتب بواسطة KamalZone