معرفی افزونه Connector LLM: روشی ساده تر برای ساخت chatbots AI با React Chatbotify

مقدمه

اگر تا به حال یک chatbot هوش مصنوعی برای یک وب سایت ایجاد کرده اید ، می دانید که ادغام یک مدل بزرگ زبان (LLM) اغلب به معنی است سیم کشی تماس های APIبا مدیریت جریان async، و نوشتن منطق پس زمینه سفارشی– همه قبل از ربات شما حتی می توانند “سلام جهان” بگویند.

بیش از یک سال پیش ، من در مورد نحوه ادغام LLM ها با chatbotify React، که شامل یک روش دستی است که کار می کرد ، اما به یک مقدار منصفانه نیاز داشت کد چسب و پیکربندی بشر در حالی که React chatbotify ساخت UI Chatbot را آسانتر کرده است ، ادغام LLM هنوز خواستار کارهایی است که می تواند به سرعت در پیچیدگی رشد کند.

این دقیقاً نقطه درد است افزونه اتصال LLMبرای حل – با تهیه – طراحی شده است ادغام های خارج از جعبه LLMبشر

با افزونه اتصال LLM می توانید از بین بردن دیگ بخاربا پیچیدگی جداگانه، و chatbot خود را با LLM در صحبت کنید دقایقی بشر در این پست ، من شما را از طریق آنچه پلاگین انجام می دهد ، نحوه نصب آن و چگونگی ساخت UI های هوشمندانه و مکالمه با React Chatbotify نه تنها ساده تر بلکه سریعتر می کنم.

افزونه اتصال LLM چیست؟

افزونه اتصال LLM یک لایه انتزاع است ادغام LLM را ساده کنیددر داخل React chatbotify بشر این برنامه نویسان را قادر می سازد تا chatbotify React را به مدل زبان بزرگ ارائه دهندگان مانند Openai وت Google Geminiبا سهولت حتی با ادغام با آنها حمل می شود مدل های مرورگر ، با یک تنظیم بسیار ساده قابل دستیابی است:

import ChatBot from "react-chatbotify";
import LlmConnector, { WebLlmProvider } from "@rcb-plugins/llm-connector";

const MyComponent = () => {
  const flow = {
    start: {
      llmConnector: {
        initialMessage: "Ask away!",
        provider: new WebLlmProvider({
            model: 'Qwen2-0.5B-Instruct-q4f16_1-MLC',
        }),
      }
    }
  }
  return (
    <ChatBot plugins=[LlmConnector()]/>
  );
};

همانطور که از قطعه بالا مشاهده می شود ، با ارائه یک رابط اعلامی ساده ، این افزونه به شما امکان می دهد تا روی رفتار و جریان ربات خود تمرکز کنید. این برخلاف گذشته است که شما مجبور هستید به صورت دستی تماس های API و قالب بندی پیام را انجام دهید. نتیجه قطعه فوق؟

علیرغم اینکه به نظر می رسد ساده است ، در زیر کاپوت ، افزونه بسیاری از آنها را انجام می دهد وزنه سنگین– مانند استفاده از جریان پاسخ ها ، همگام سازی صوتی ، مدیریت شاخص های تایپ و موارد دیگر! خوب ، بنابراین ما یک قطعه کوتاه را دیدیم ، اما چه چیزی حاوی آن بودوت دقیقاً چگونه از افزونه استفاده می کنیم ؟ بیایید دریابیم!

نصب و راه اندازی

افزونه LLM Connector در NPM در دسترس است و از طریق دستور زیر قابل نصب است:

npm install @rcb-plugins/llm-connector

توجه داشته باشید که این افزونه فقط دیرتر با نسخه های React Chatbotify سازگار است v2.0.0-beta.34 !

پس از نصب افزونه ، می توانید وارد کردن و اولیه سازیاین در پروژه شما به شرح زیر است:

import ChatBot from "react-chatbotify";
import LlmConnector from "@rcb-plugins/llm-connector";

const MyComponent = () => {
  return (
    <ChatBot plugins=[LlmConnector()]/>
  );
};

بعد ما یک بلوک اختصاص داده شده برای رسیدگی به مکالمات LLM ایجاد خواهیم کرد و به اضافه کردن آن ادامه خواهیم داد llmConnector ویژگی به آن:

import ChatBot from "react-chatbotify";
import LlmConnector from "@rcb-plugins/llm-connector";

const MyComponent = () => {
  const flow = {
    start: {
      llmConnector: {}
    }
  }
  return (
    <ChatBot plugins=[LlmConnector()]/>
  );
};

هوم ، هیچ اتفاقی نمی افتد. اما دلهره نکنید ، ما تقریباً آنجا هستیم! ما اکنون فقط یک چیز را از دست داده ایم ارائه دهنده LLM تا چت بابات خود را شروع به صحبت کند. ما بررسی خواهیم کرد که چگونه این کار از طریق یک مثال حداقل در مرحله بعدی انجام شده است!

یک مثال حداقل

در این مثال حداقل ، ما وارد و استفاده خواهیم کرد ویروس، که به طور پیش فرض با افزونه ارائه می شود. توجه داشته باشید که این افزونه با 4 ارائه دهنده داخلی(Openaiبا جنینبا پستان وت ادمکشی) ، که برای پوشش اکثریت قریب به اتفاق موارد استفاده مشترک است. بیایید جلو برویم و واردات را وارد کنیم ویروس به همین ترتیب و آن را در داخل provider خاصیت داخل llmConnector:

import ChatBot from "react-chatbotify";
import LlmConnector, { WebLlmProvider } from "@rcb-plugins/llm-connector";

const MyComponent = () => {
  const flow = {
    start: {
      llmConnector: {
        provider: new WebLlmProvider({
            model: 'Qwen2-0.5B-Instruct-q4f16_1-MLC',
        }),
      }
    }
  }
  return (
    <ChatBot plugins=[LlmConnector()]/>
  );
};

توجه کنید که وقتی ما اولیه را آغاز کردیم ویروس، ما همچنین در یک مجموعه حداقل از تنظیمات که شامل مدل بود ، عبور کردیم. در این حالت ، ما آن را با QWEN2-0.5B-Instruct-Q4F16_1-MLC امتحان کردیم اما احساس راحتی می کنیم که آن را آزمایش کنید مدل های دیگرهمچنین (اگر آن را در مرورگر خود اجرا می کنید ، اندازه مدل را در نظر داشته باشید)!

توجه به این نکته حائز اهمیت است که تنظیمات برای ارائه دهندگان در واقع می توانند بسیار متفاوت است بشر برای راهنماهای پیکربندی ارائه دهندگان پیش فرض ، ممکن است نگاه کنید در اینجا بشر

وب سایت مستندات React Chatbotify نیز دارای چندین مورد است نمونه های زنده نشان دادن ارائه دهندگان پیش فرض در محل کار. شما هستید به شدت تشویق شدهبرای بررسی آنها:

ایجاد ارائه دهنده خود

در حالی که افزونه ارائه می دهد ارائه دهندگان پیش فرضبرای پذیرایی از اکثریت قریب به اتفاق موارد استفاده مشترک ، قابل درک است که کاربران پیشرفته ممکن است مایل باشند راه حل های LLM خود را سفارشی کنید بشر با توجه به این نکته ، این افزونه به گونه ای طراحی شده است که به کاربران امکان می دهد به راحتی خود را تهیه کنند ارائه دهندگان سفارشی!

توسعه دهندگان به دنبال ایجاد ارائه دهندگان سفارشی می توانند با واردات و اجرای آن این کار را انجام دهند ارائه دهنده رابط تنها روشی که توسط رابط اجرا می شود این است sendMessage، که AsyncGenerator برای مصرف افزونه LLMConnector. نمونه ای حداقل از ارائه دهنده سفارشی در زیر نشان داده شده است:

import ChatBot from "react-chatbotify";
import { Provider } from "@rcb-plugins/llm-connector";

class MyCustomProvider implements Provider {
  /**
   * Streams or batch-calls Openai and yields each chunk (or the full text).
   *
   * @param messages  messages to include in the request
   * @param stream    if true, yields each token as it arrives; if false, yields one full response
   */
   public async *sendMessages(messages: Message[]): AsyncGenerator<string> {
     // obviously we should do something with the messages (e.g. call a proxy) but this is just an example
     yield "Hello World!";
   }
}

اگر به دنبال ایجاد ارائه دهنده خود هستید ، مراجعه به پیاده سازی ها را در نظر بگیرید ارائه دهندگان پیش فرضبشر

پایان

امیدوارم این مقاله چقدر نشان داده باشد ساده تر و سریعتر اکنون ادغام LLM ها با React chatbotifyبشر

در چند مقاله بعدی ، ما شیرجه می شویم ادغام های دقیق تربا هر یک از ارائه دهندگان پیش فرض ، از جمله چگونگی ما پایان گفتگوی LLMبشر اگر مشتاق شیرجه زدن به عمیق تر هستید ، مراقب باشید!

سرانجام ، اگر شما وجود دارد بازخورد با پیشنهادات، یا اندیشهدر مورد آنچه به اشتراک گذاشته شده است ، احساس راحتی کنید که نظر خود را ترک کنید یا به آن دسترسی پیدا کنید اختلافبشر با تشکر از شما برای خواندن و دیدن شما در اطراف! 😊