تطوير بوت متعدد الأنماط Multi-modal Bot باستخدام جانغو

قد نحتاج في تطبيقات الذكاء الاصطناعي المتقدمة لاستخدام بوتات متعددة الأنماط Multi-modal أي تدعم عدة أنواع من المدخلات والمخرجات ويمكنها معالجة اللغة الطبيعية، والتعرف على الصوت، وتوليد الصور. حيث توفر هذه التطبيقات تجربة مميزة للمستخدمين وتوفر طرقًا مختلفة للتفاعل.

نشرح في هذا الدليل تطوير بوت متعددة الأنماط Multi-modal Bot يعتمد على النموذج اللغوي الكبير GPT-4 Large Language Models (LLM) للذكاء الاصطناعي التحاوري Conversational AI، ونموذج Whisper لتحويل الصوت المنطوق إلى نص مكتوب بدقة، ونموذج DALL-E لتوليد الصور، وكل من هذه النماذج الثلاثة مقدمة من شركة OpenAI. وسنستخدمها ضمن تطبيق جانغو Django ينشئ قصصًا مصورة حيث يمكن للمستخدمين تحديد موضوع القصة بالصوت أو بكتابة النص، ويستجيب التطبيق بتأليف قصة نصية مرفقة بصورة مناسبة.

سوف نتبع الخطوات التالية لتطوير بوتات متعددة الأنماط Multi-modal Bots باستخدام Django و GPT-4 و Whisper و DALL-E:

دمج OpenAI Whisper للتعرف على الكلام
توليد ردود نصية باستخدام GPT-4
توليد الصور باستخدام DALL-E
دمج الوسائط لتجربة متكاملة

متطلبات التطبيق

لإكمال هذا الدليل التعليمي، ستحتاج إلى التالي:

فهم أساسيات لغة بايثون وإطار عملها جانغو Django، وننصح بمطالعة مقال مدخل إلى إطار عمل الويب جانغو Django.
مفتاح واجهة برمجية API key من OpenAI لأننا سنتعامل مع نماذج GPT-4 و DALL-E من OpenAI والتي تتطلب مفتاح واجهة برمجية نحصل عليه من خلال إنشاء حساب OpenAI ومن ثم إنشاء مفتاح
تثبيت Whisper لتحويل المقاطع الصوتية إلى نص مكتوب، ويمكن مطالعة صفحة GitHub الخاصة بـ OpenAI Whisper لمعرفة خطوات التثبيت التفصيلية
تثبيت حزمة OpenAI الخاصة ببايثون للتفاعل مع نماذج OpenAI داخل البيئة الافتراضية للمشروع، ويمكن الرجوع للمقال إعداد بيئة تطوير تطبيقات جانغو Django

إذت أنجزنا المتطلبات أعلاه سنكون قد أنشأنا بيئة افتراضية لمشروعنا باسم env داخل مجلد العمل وليكن اسمه django-apps، ويجب التأكد من تفعيل هذه البيئة الافتراضيةوظهور اسمها بين قوسين في بداية السطر في الشاشة الطرفية Terminal. وذلك بكتابة الأمر التالي في نافذة الطرفية بعد الانتقال إلى مسار المجلد الذي يحتوي على ملفات تطبيق جانغو Django الخاص بنا كما يلي:

sammy@ubuntu:$ .env/bin/activate

بمجرد تفعيل البيئة الافتراضية، سنكتب الأمر التالي لتثبيت حزمة OpenAI الخاصة بلغة بايثون:

(env)sammy@ubuntu:$ pip install openai

إذا لم يسبق لكم استخدام حزمة OpenAI من قبل فننصح بالرجوع للمقال التالي دمج نماذج GPT من OpenAI في تطبيقات Django. بعدها سنكون قد انتهينا من إعداد بيئة العمل وجاهزين لبدء خطوات تنفيذ المشروع.

الخطوة الأولى: دمج OpenAI Whisper للتعرف على الكلام

في هذه الخطوة، سنُعدّ نموذج OpenAI Whisper في تطبيقنا من أجل تحويل الكلام المنطوق إلى نص مكتوب بدقة عالية. اخترنا Whisper لكونه نموذجًا قويًا للتعرف على الكلام، مما يجعله خيارًا مثاليًا لدعم البوتات متعددة الأنماط Multi-modal Bots، فمن خلال دمج Whisper، سيكون تطبيقنا قادرًا على فهم المدخلات الصوتية بكفاءة.

أولاً، يجب التأكد من أننا نعمل داخل مجلد مشروع Django الخاص بنا، لننتقل إلى مجلد مشروعنا ونفعّل البيئة الافتراضية الخاصة بالمشروع من خلال كتابة التالي:

sammy@ubuntu:$ cd path_to_your_django_project 
sammy@ubuntu:$ source env/bin/activate

إعداد نموذج Whisper في تطبيق Django

ما يجب فعله الآن هو إنشاء دالة تستخدم Whisper لتحويل ملفات الصوت إلى نص. ننشئ في مجلد المشروع ملف بايثون جديد باسم whisper_transcribe.py.

(env)sammy@ubuntu:$ touch whisper_transcribe.py

ثم نفتح الملف whisper_transcribe.py في محرر الأكواد ونستورد مكتبة Whisper. بعد ذلك، ننشئ دالة تأخذ مسار ملف الصوت كمدخل، وتستخدم Whisper لمعالجة الملف، ثم تعيد النص الناتج على النحو التالي:

import whisper 
model = whisper.load_model("base")  

def transcribe_audio(audio_path):     
    result = model.transcribe(audio_path)     
    return result["text"]

نستخدم في الكود أعلاه نموذج base للتفريغ الصوتي -أي لتحويل الصوت إلى نص-. والجدير بالذكر أن Whisper يوفر نماذج مختلفة مصممة لتلبية احتياجات مختلفة من حيث الدقة والأداء ويمكن تجربة نماذج أخرى بناءً على متطلبات المشروع في حال احتجنا لسرعة معالجة أو دقة أعلى في تحويل الصوت لنص مكتوب.

اختبار تحويل الصوت لنص مكتوب Transcription

لاختبار عملية التفريغ الصوتي وتحويله لنص مكتوب، دعونا نحفظ ملف صوتي داخل مجلد المشروع بعد التأكد من أن هذا الملف بصيغة يدعمها Whisper مثل MP3 أو WAV. ثم نعدّل كود ملف بايثون whisper_transcribe.py بإضافة الكود التالي فى نهايته:

# لأغراض الاختبار 
if __name__ == "__main__":     
    print(transcribe_audio("path_to_your_audio_file"))

نشغل كود الملف whisper_transcribe.py في الطرفية ونتأكد هل تحول الملف الصوتي لكلام مكتوب بشكل صحيح أم لا:

(env)sammy@ubuntu:$ python whisper_transcribe.py

إذا أعددنا كل شيء بشكل صحيح فيجب أن نرى النص المُحوّل في الطرفية Termina. تعمل الوظيفة transcribe_audio كأساس للتفاعلات الصوتية داخل تطبيقنا.

الخطوة الثانية: توليد الاستجابات النصية باستخدام GPT-4

في هذه الخطوة، سنستخدم نموذج GPT-4 لتوليد ردود أو استجابات نصية استنادًا إلى النص الذي أدخله المستخدم أو النص المُحوَّل من الصوت في الخطوة السابقة. يتميز GPT-4 بقدرته على معالجة المدخلات اللغوية بذكاء عالي وتقديم استجابات متسقة وذات صلة بسياق الحوار، مما يجعله اختيارًا مثاليًا لتطوير روبوت متعدد الأنماط Multi-modal Bot.

قبل المتابعة، لنتأكد من تثبيت حزمة OpenAI الخاصة بلغة بايثون في البيئة الافتراضية، كما وضحنا في فقرة المتطلبات الأساسية، ومن المهم أيضًا ملاحظة أن نموذج GPT-4 يتطلب مفتاح الواجهة البرمجية API key للوصول. ولضمان الأمان، يُفضّل تخزين المفتاح كمتغير بيئة environment variable بدل من إضافته مباشرة في كود بايثون لتجنب اختراقه أو مشاركته عن غير قصد.

(env)sammy@ubuntu:$ export OPENAI_KEY="your-api-key"

إعداد نموذج إكمال المحادثة

ننتقل من جديد لمجلد تطبيق Django الخاص بنا وننشئ ملف بايثون جديد باسم chat_completion.py. مهمة هذا الملف الجديد هو التعامل مع الاتصال بنموذج GPT-4 لتوليد استجابات بناءً على النص المُدخل من المستخدم.

import os from openai
import OpenAI 

client = OpenAI(api_key=os.environ["OPENAI_KEY"])
def generate_story(input_text):
    # استخدام الواجهة البرمجية لتوليد القصة    
    response = get_story(input_text)     
    # تنسيق وإرجاع الاستجابة     
    return format_response(response)

يتحقق الكود أعلاه من إعداد المفتاح الأساسي للمصادقة مع خدمات OpenAI. بعد ذلك، يستدعي دالة مخصصة باسم get_story للتواصل مع واجهة برمجة التطبيقات OpenAI API والتي ستولد لنا القصة المطلوبة، ثم يستدعي دالة أخرى باسم format_response وظيفتها تنسيق الاستجابة الواردة من الواجهة البرمجية API.

دعونافي البداية نركز على تنفيذ الدالة get_story. سنضيف ما يلي إلى نهاية ملف chat_completion.py:

def get_story(input_text):
    # إعداد الوصف للنظام. يمكن تجربة وصف مختلف.     
    system_prompt = f"""You are a story generator.
    You will be provided with a description of the story the user wants.
    Write a story using the description provided."""

    # التواصل مع الواجهة البرمجية
    response = client.chat.completions.create(         
        model="gpt-4",         
        messages=[             
            {"role": "system", "content": system_prompt},             
            {"role": "user", "content": input_text},         
        ],         
        temperature=0.8     
    )      

    # إرجاع استجابة الواجهة البرمجية
    return response

تعمل هذه الدالة على إعداد الوصف للنظام لإخبار النموذج بالمهمة التي يجب أن يؤديها، ثم تطلب من الواجهة البرمجية API الخاصة بإكمال المحادثة توليد قصة باستخدام الموجّه prompt أو النص المدخل من المستخدم لتوجيه النموذج.

أخيرًا، سنعمل على تنفيذ الدالة format_response. ونضيف ما يلي إلى نهاية ملف chat_completion.py:

def format_response(response):
    # استخراج القصة المولدة من الاستجابة     
    story = response.choices[0].message.content     
    # إزالة أي نص غير مرغوب فيه أو تنسيق     
    story = story.strip()     
    # إرجاع القصة المنسقة     
    return story

يستخرج الكود أعلاه القصة المُولّدة، وينسقها من خلال إزالة أي فراغات زائدة أو تنسيقات غير مرغوب بها.

اختبار الاستجابات المولدة

لاختبار توليد النص بشكل صحيح، سنعدّل كود الملف chat_completion.py بإضافة الكود التالي في نهايته:

# الاختبار 
if __name__ == "__main__":     
    user_input = "Tell me a story about a dragon"     
    print(generate_story(user_input))

نشغل ملف chat_completion.py لرؤية الاستجابة المولدة في الطرفية Terminal:

(env)sammy@ubuntu:$ python chat_completion.py

يجب أن نحصل الآن على استجابة مولدة بشكل إبداعي من GPT-4 بناءً على المُوجِّه prompt الذي أدخلناه للنموذج، يمكن أن نجرب مُوجّهات مختلفة لرؤية استجابات نصية متنوعة.

سنعمل في الخطوة التالية على إضافة صور إلى النص الناتج المولد من هذه الخطوة.

الخطوة الثالثة: إنتاج الصور باستخدام DALL-E

صُمّم نموذج DALL-E لتوليد صور مفصلة عن طريق الموجهات النصية Prompts. مما يتيح للبوتات متعددة الأنماط Multi-modal Bots تحسين القصص عن طريق الإبداع البصري.

ننشئ ملف بايثون جديد باسم image_generation.py في مجلد تطبيق جانغو Django الخاص بك. سيستخدم هذا الملف نموذج DALL-E في توليد الصور:

(env)sammy@ubuntu:$ touch image_generation.py

بعدها ننشئ دالة داخل ملف image_generator.py لترسل المُوجّه prompt إلى DALL-E وتستقبل الصورة الناتجة:

import os
from openai import OpenAI
client = OpenAI(api_key=os.environ["OPENAI_KEY"])
# إرسال الموجه لتوليد الصورة
def generate_image(text_prompt):
    response = client.images.generate(
        model="dall-e-3",
        prompt=text_prompt,
        size="1024x1024",
        quality="standard",
        n=1,
    )
    image_url = response.data[0].url
    return image_url

سترسل الدالة طلب إلى نموذج DALL-E وتحدد المُوجِّه prompt، وعدد الصور المطلوب توليدها n=1، و أبعاد الصور وجودتها. ثم بعد ذلك تستخرج و تعيد رابط URL للصورة المولدة.

اختبار النص البرمجي

بهذا نكون قد انتهينا من كتابة تطبيقنا وحان وقت تجربته، يمكن إضافة المثال التالي في نهاية ملف image_generation.py :

# الاختبار
if __name__ == "__main__":
    prompt = "Generate an image of a horse and a child playing in a field."
    print(generate_image(prompt))

لننفذ الكود image_generation.py لتوليد صورة بناءً على النص المدخل:

(env)sammy@ubuntu:$ python image_generation.py

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

في الخطوة التالية، سنجمع بين التعرف على الكلام، وتوليد النصوص، وتوليد الصور لتوفير تجربة مستخدم موحدة ضمن تطبيقنا.

الخطوة الرابعة: دمج كافة الوسائط المُولّدة

سندمج كل الوظائف التي طورناها في الخطوات السابقة لتوفير تجربة مستخدم سلسة. سيكون لتطبيق الويب الخاص بنا القدرة على معالجة المدخلات كالنصوص والأصوات من المستخدمين، لتوليد قصص، وتكملتها بالصور المتعلقة بها.

إنشاء عرض متكامل بجمع كل مكونات التطبيق

أولاً، لنتأكد من تنظيم مشروع جانغو الخاص بنا، ومن وجود الملفات whisper_transcribe.py وchat_completion.py وimage_generation.py في مجلد التطبيق. سننشئ الآن ملف عرض view يجمع بين هذه المكونات.

نفتح ملف views.py ونستورد الوحدات والدوال اللازمة. ثم ننشئ عرضًا جديدًا باسم get_story_from_description كالتالي:

import uuid
from django.core.files.storage import FileSystemStorage
from django.shortcuts import render
from .whisper_transcribe import transcribe_audio
from .chat_completion import generate_story
from .image_generation import generate_image

# العروض الأخرى

def get_story_from_description(request):
    context = {}
    user_input = ""
    if request.method == "GET":
        return render(request, "story_template.html")
    else:
        if "text_input" in request.POST:
            user_input += request.POST.get("text_input") + "\n"
        if "voice_input" in request.FILES:
            audio_file = request.FILES["voice_input"]
            file_name = str(uuid.uuid4()) + (audio_file.name or "")
            FileSystemStorage(location="/tmp").save(file_name, audio_file)
            user_input += transcribe_audio(f"/tmp/{file_name}")

        generated_story = generate_story(user_input)
        image_prompt = (
            f"Generate an image that visually illustrates the essence of the following story: {generated_story}"
        )
        image_url = generate_image(image_prompt)

        context = {
            "user_input": user_input,
            "generated_story": generated_story.replace("\n", "<br/>"),
            "image_url": image_url,
        }

        return render(request, "story_template.html", context)

يستقبل هذا العرض View المدخلات النصية أو الصوتية من المستخدم. إذا كان هناك ملف صوتي، فإنه يُحفظ باسم فريد باستخدام مكتبة uuid ويستخدم دالة transcribe_audio لتحويل الكلام إلى نص. بعد ذلك، نستدعي الدالة generate_story لتوليد استجابة نصية، والدالة generate_image لتوليد صورة ذات صلة بالقصة. نمرر هذه المخرجات إلى متغير context الذي يشير إلى قاموس Dictionary به مخرجات الدوال السابقة، ثم نعرضها باستخدام قالب story_template.html

إنشاء قالب HTML

ننشئ ملف قالب باسم story_template.html ونضيف له الكود التالي:

<div style="padding:3em; font-size:14pt;">
    <form method="post" enctype="multipart/form-data">
        {% csrf_token %}
        <textarea name="text_input" placeholder="Describe the story you would like" style="width:30em;"></textarea>
        <br/><br/>
        <input type="file" name="voice_input" accept="audio/*" style="width:30em;">
        <br/><br/>
        <input type="submit" value="Submit" style="width:8em; height:3em;">
    </form>

    <p>
        <strong>{{ user_input }}</strong>
    </p>
    {% if image_url %}
        <p>
            <img src="{{ image_url }}" alt="Generated Image" style="max-width:80vw; width:30em; height:30em;">
        </p>
    {% endif %}
    {% if generated_story %}
        <p>{{ generated_story | safe }}</p>
    {% endif %}
</div>

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

إنشاء رابط URL لعرض التطبيق

الآن بعد أن أصبح العرض get_story_from_description جاهزًا، يجب جعله متاحًا من خلال إعداد رابط URL. نفتح ملف urls.py داخل تطبيق جانغو، ونضيف نمط Pattern لعرض خرج الدالة get_story_from_description:

from django.urls import path
from . import views

urlpatterns = [
    # other patterns
    path('generate-story/', views.get_story_from_description, 
    name='get_story_from_description'),
]

اختبار التكامل النهائي بعد ربط جميع عناصر التطبيق

بإمكاننا الآن زيارة الرابط http://your_domain/generate-story في متصفح الويب لرؤية الاستمارة form المعرفة بداخل قالب story_template.html. سنرسل من خلال الاستمارة نص المُوجّه prompt ضمن الحقل النصي، أو نرفع الملف الصوتي باستخدام حقل اختيار الملف. بعد إرسال الدخل المطلوب للتطبيق، سيعالج تطبيقنا المدخلات، ويولد لنا قصة وصورة مُرفقة، ويعرضهما على الصفحة.

على سبيل المثال، تعرض الصورة التالية نتيجة تنفيذ الكود النهائي عندما نطلب توليد قصة بسيطة من المُوجًه prompt التالي:
Tell me a story about a horse and a child playing in a field الذي يطلب توليد قصة عن ولد وحصان يلعبان في الحقل ويمكنك تجربة أي prompt مناسب:

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

الخاتمة

في هذا الدرس التعليمي، تعلمنا خطوات تطوير بوت متعدد الأنماط Multi-modal Bot باستخدام Django، مع دمج قدرات نموذج Whisper للتعرف على الكلام، و GPT-4 لتوليد النصوص، و DALL-E لتوليد الصور. يمكن لتطبيقنا فهم مدخلات المستخدم بعدة أشكال والاستجابة لها.
للتطوير المستقبلي، ننصحكم باستكشاف إصدارات بديلة من النماذج المستخدمة، وتحسين تصميم واجهة التطبيق، أو توسيع وظائف التطبيق لتشمل ميزات تفاعلية إضافية.

ترجمة وبتصرف للمقال Developing Multi-Modal Bots with Django, GPT-4, Whisper, and DALL-E لكاتبيه Evans Ehiorobo و Anish Singh Walia