مقدمة

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

في هذه المقالة سنرى كيف يمكنك إعداد chatbot على نظامك باستخدام Olma وNext.js

إعداد أولاما

لنبدأ بإعداد Ollama على نظامنا. قم بزيارة ollama.com وقم بتنزيله لنظام التشغيل الخاص بك. سيسمح لنا هذا باستخدام أمر ollama في موجه الأوامر/المحطة.

التحقق من إصدار Ollama باستخدام الأمر ollama -v
اطلع على قائمة العارضات على صفحة مكتبة أولاما.

قم بتنزيل النموذج وتشغيله

لتنزيل نموذج وتشغيله، قم بتشغيل الأمر ollama run
مثال: تشغيل ollama llama3.1 أو تشغيل ollama Gemma2

ستتمكن من الدردشة مع العارضة مباشرة في المحطة.

إعداد تطبيق الويب

الإعداد الأساسي لـ Next.js

• قم بتنزيل وتثبيت أحدث إصدار من Node.js
• انتقل إلى المجلد المطلوب وقم بتشغيل npx create-next-app@latest لإنشاء مشروع Next.js.
• سيتم طرح بعض الأسئلة لإنشاء كود معياري. في هذا البرنامج التعليمي، سنحتفظ بكل شيء بشكل افتراضي.
• افتح المشروع الذي تم إنشاؤه حديثًا في محرر التعليمات البرمجية الذي تختاره. سوف نستخدم رمز VS.

تثبيت التبعيات

هناك عدد قليل من حزم npm التي يجب تثبيتها لاستخدام ollama.

1. منظمة العفو الدولية من فيرسل.
2. ollama توفر مكتبة Ollama JavaScript أسهل طريقة لدمج مشروع JavaScript الخاص بك مع Ollama.
3. يساعد ollama-ai-provider على ربط الذكاء الاصطناعي وأولاما معًا.
4. سيتم تنسيق نتائج الدردشة بأسلوب تخفيض السعر، ولتحليل تخفيض السعر سنستخدم حزمة رد فعل تخفيض السعر.

لتثبيت هذه التبعيات، قم بتشغيل npm i ai ollama ollama-ai-provider.

إنشاء صفحة دردشة

تحت app/src يوجد ملف اسمه page.tsx.

دعونا نزيل كل شيء فيه ونبدأ بالمكون الوظيفي الأساسي:

src/app/page.tsx

export default function Home() {
  return (
    

        {/* Code here... */}
    
  );
}

لنبدأ باستيراد خطاف useChat من ai/react وreact-markdown

"use client";
import { useChat } from "ai/react";
import Markdown from "react-markdown";

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

نصيحة: يمكنك إنشاء مكون منفصل للدردشة واستدعائه في page.tsx للحد من استخدام مكون العميل.

في المكون، احصل على الرسائل والإدخال وhandleInputChange وhandleSubmit من خطاف useChat.

    const { messages, input, handleInputChange, handleSubmit } = useChat();

في JSX، قم بإنشاء نموذج إدخال للحصول على مدخلات المستخدم لبدء المحادثة.

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

يمكننا عرض الرسائل من خلال تكرار مصفوفة الرسائل.

    messages.map((m, i) => (
{m}
)

تبدو النسخة المصممة بناءً على دور المرسل كما يلي:

  

    

      {messages.length ? (
        messages.map((m, i) => {
          return m.role === "user" ? (
            

              You
              

                {m.content}
            
          ) : (
            

              AI
              

                {m.content}
            
          );
        })
      ) : (
        

          
Local AI Chat
        
      )}
    
  

دعونا نلقي نظرة على الملف بأكمله
src/app/page.tsx

"use client";
import { useChat } from "ai/react";
import Markdown from "react-markdown";

export default function Home() {
    const { messages, input, handleInputChange, handleSubmit } = useChat();
    return (
        

              

                
            
        
    );
}

وبهذا يكون الجزء الأمامي قد اكتمل. الآن دعونا نتعامل مع واجهة برمجة التطبيقات.

التعامل مع واجهة برمجة التطبيقات

لنبدأ بإنشاء مسار Route.ts داخل التطبيق/api/chat.
استنادًا إلى اصطلاح التسمية Next.js، سيسمح لنا بالتعامل مع الطلبات على localhost:3000/api/chat endpoint.

src/app/api/chat/route.ts

import { createOllama } from "ollama-ai-provider";
import { streamText } from "ai";

const ollama = createOllama();

export async function POST(req: Request) {
  const { messages } = await req.json();

  const result = await streamText({
    model: ollama("llama3.1"),
    messages,
  });
  return result.toDataStreamResponse();
}

يستخدم الكود أعلاه بشكل أساسي ollama و vercel ai لتدفق البيانات مرة أخرى كاستجابة.

• يقوم createOllama بإنشاء مثيل للolma الذي سيتواصل مع النموذج المثبت على النظام.
• وظيفة POST هي معالج المسار على نقطة نهاية /api/chat باستخدام طريقة النشر.
• يحتوي نص الطلب على قائمة بجميع الرسائل السابقة. لذا من الجيد الحد منه وإلا سيتدهور الأداء بمرور الوقت. في هذا المثال، تأخذ دالة ollama "llama3.1" كنموذج لتوليد الاستجابة بناءً على مصفوفة الرسائل.

الذكاء الاصطناعي التوليدي على نظامك

قم بتشغيل npm run dev لبدء الخادم في وضع التطوير.
افتح المتصفح وانتقل إلى localhost:3000 لرؤية النتائج.
إذا تم تكوين كل شيء بشكل صحيح، فستتمكن من التحدث إلى برنامج الدردشة الآلي الخاص بك.

يمكنك العثور على الكود المصدري هنا: https://github.com/parasbansal/ai-chat

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