react native chatgpt

رد الفعل الأصلي-chatgpt

غلاف React Native حول ChatGPT بواسطة OpenAI لدمجه بسلاسة مع تطبيقاتك. فهو يتعامل مع المصادقة والاستجابات المتدفقة وتتبع المحادثات. كل ذلك دون الحاجة إلى خادم.

رد الفعل الأصلي-chatgpt.mp4

• سمات
• تنصل
• جربه
• تثبيت
• واجهة برمجة التطبيقات
  • ChatGptProvider
  • useChatGpt
• المساهمة
• الاعتمادات
• رخصة

سمات

• 100% من جانب العميل : يمكنك بسهولة دمج برنامج الدردشة الآلي القوي في تطبيقك دون الحاجة إلى واجهة خلفية مخصصة
• ⚡ دعم البث : استمتع باستجابات سريعة للغاية بمجرد توفرها، على غرار ساحة لعب ChatGPT على الويب
• ؟ المحادثة : يتذكر ChatGPT ما قلته سابقًا. استمر في المحادثة عن طريق إرسال conversationId messageId مع الرسالة
• متوافق مع المعرض : لا حاجة للإخراج للاستمتاع بهذا المكون
• اكتب آمنة : مكتوبة بالكامل في TS
• مثال للوجبة الخفيفة : تم توفير رابط للوجبة الخفيفة، حتى تتمكن من تجربتها في متصفحك

تنصل

هذه ليست مكتبة ChatGPT رسمية. إنها محاولة لتسهيل دمج ChatGPT مع تطبيقات React Native. على هذا النحو، يرجى التعامل معها على أنها تجريبية واستخدامها بحذر في الإنتاج.

جربه

‍ قم بتشغيل تطبيق مثال الوجبات الخفيفة لمشاهدته أثناء العمل. الكود المصدري للمثال موجود ضمن المجلد /example.

تثبيت

npm install react-native-chatgpt

المعرض

تحتاج أيضًا إلى تثبيت react-native-webview ومتجر expo-secure-store

npx expo install react-native-webview expo-secure-store

ليست هناك حاجة إلى خطوات إضافية.

تطبيقات React Native العارية

تحتاج أيضًا إلى تثبيت react-native-webview react-native-vector-icons expo-secure-store

npm install react-native-webview react-native-vector-icons expo-secure-store

بعد اكتمال التثبيت، يجب عليك أيضًا اتباع بعض الإرشادات الإضافية لإعداد المكتبات:

• رد فعل عرض الويب الأصلي
• رد الفعل الأصلي ناقلات الرموز
• متجر المعرض الآمن

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

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

ChatGptProvider

يجب وضع مكون الموفر في جذر تطبيق React Native الخاص بك كما هو موضح في المثال أدناه:

 import { ChatGptProvider } from 'react-native-chatgpt' ;
import App from './App' ;

const Root = ( ) => {
  return (
    < ChatGptProvider >
      < App / >
    < / ChatGptProvider >
  ) ;
} ; 

الدعائم

تسمح لك خصائص ChatGptProvider التالية بتخصيص مظهر النموذج الذي يتعامل مع المصادقة باستخدام ChatGPT، ومهلة طلبات chatbot.

اسم	مطلوب	يكتب	وصف
children	نعم	React.Node	شجرة مكونات التطبيق الخاص بك
containerStyles	لا	StyleProp<ViewStyle>	تم تطبيق النمط الإضافي على حاوية عرض الويب
backdropStyles	لا	StyleProp<ViewStyle>	تم تطبيق نمط إضافي على عرض الخلفية. بشكل افتراضي، يستخدم لون خلفية شبه شفاف rgba(0, 0, 0, 0.5)
renderCustomCloseIcon	لا	(closeModal: () => void) => React.Node	سيتم وضع عارض زر إغلاق مخصص أعلى عرض الويب. افتراضيًا، يتم عرض علامة صليب أسود (X) في الزاوية اليمنى العليا. لا تنسَ ربط الدالة CloseModal المتوفرة كوسيطة مع حدث onPress الخاص بك
requestTimeout	لا	number	الحد الأقصى للوقت بالمللي ثانية الذي ترغب في انتظاره للطلب العادي قبل إلغائه، ويكون افتراضيًا 30000 مللي ثانية
streamedRequestTimeout	لا	number	الحد الأقصى للوقت بالمللي ثانية الذي ترغب في انتظاره لطلب قائم على البث قبل إلغائه، والقيمة الافتراضية هي 15000 مللي ثانية

useChatGpt

يقوم الخطاف بإرجاع كائن بالخصائص التالية:

status

status: 'initializing' | 'logged-out' | 'getting_auth_token' | 'authenticated' ;

• initializing : يشير إلى بدء تشغيل المكتبة. لا يجب أن تفترض أي شيء فيما يتعلق بحالة المصادقة وتنتظر حتى تتغير هذه القيمة إلى logged-out أو authenticated .
• يشير logged-out إلى أنك لم تتم مصادقتك بعد أو أن رمز الوصول إلى ChatGPT قد انتهت صلاحيته
• getting_auth_token : حالة انتقالية تستمر لبضع ثوان مباشرة بعد رفض نموذج تسجيل الدخول. إنه يعكس حقيقة أن المكتبة تحصل على رمز مصادقة ChatGPT في الخلفية. يمكنك استخدام هذه الحالة لعرض مؤشر التحميل.
• authenticated : إشارات إلى أنك قمت بتسجيل الدخول. فقط في ظل هذه الحالة ستتمكن من التفاعل مع روبوت الدردشة.

يُصدر ChatGPT رموز JWT التي تنتهي صلاحيتها خلال 7 أيام، لذا سيتعين عليك إعادة المصادقة مرة واحدة تقريبًا في الأسبوع. ستقوم المكتبة بالإبلاغ عن ذلك عن طريق تغيير الحالة من authenticated إلى logged-out .

login

 function login ( ) : void ;

وظيفة تقوم، عند تنفيذها، بفتح النموذج وتشغيل تدفق مصادقة ChatGPT.

بعد الانتهاء بنجاح، ستتغير status من logged-out إلى getting_auth_token (لبضع ثوانٍ) وأخيراً إلى authenticated

sendMessage

هذه هي الوظيفة الأساسية للمكتبة. يرسل رسالة إلى chatbot ويعيد الرد. يمكن استخدامه بطريقتين مختلفتين اعتمادًا على الوسيطات التي تم تمريرها:

معيار

 function sendMessage (
  message : string ,
  options ?: {
    conversationId ?: string ;
    messageId ?: string ;
  }
) : Promise < {
  message : string ;
  messageId : string ;
  conversationId : string ;
} > ;

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

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

إذا رفض الخادم الطلب أو تم تشغيل المهلة، فسيتم طرح خطأ ChatGptError .

 import React from 'react' ;
import { Button } from 'react-native' ;
import { useChatGpt , ChatGptError } from 'react-native-chatgpt' ;

const Example = ( ) => {
  const { sendMessage } = useChatGpt ( ) ;

  const handleSendMessage = async ( ) => {
    try {
      const { message , conversationId , messageId } = await sendMessage (
        'Outline possible topics for an SEO article'
      ) ;

      // After the user has read the response, send another message
      const { message : followUp } = await sendMessage (
        'Elaborate on the first suggestion' ,
        {
          conversationId ,
          messageId ,
        }
      ) ;
    } catch ( error ) {
      if ( error instanceof ChatGptError ) {
        // Handle error accordingly
      }
    }
  } ;

  return < Button onPress = { handleSendMessage } title = "Send message" / > ;
} ; 

جاري

 function sendMessage ( args : {
  message : string ;
  options ?: {
    conversationId ?: string ;
    messageId ?: string ;
  } ;
  onAccumulatedResponse ?: ( response : {
    message : string ;
    messageId : string ;
    conversationId : string ;
    isDone ?: boolean ;
  } ) => void ;
  onError ?: ( err : ChatGptError ) => void ;
} ) : void ;

يقبل وظيفة رد الاتصال التي سيتم استدعاؤها باستمرار مع تحديثات الاستجابة. يعد هذا الإصدار مفيدًا للسيناريوهات التي يلزم فيها عرض الاستجابة بمجرد توفرها، على غرار الطريقة التي تعمل بها ChatGPT API على ساحة لعب الويب.

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

تحقق من خاصية isDone في كائن الاستجابة لاكتشاف وقت اكتمال الاستجابة.

في حالة حدوث خطأ، يتم استدعاء رد الاتصال onError باستخدام ChatGptError .

 import React , { useState } from 'react' ;
import { Button } from 'react-native' ;
import { useChatGpt , ChatGptError } from 'react-native-chatgpt' ;

const StreamExample = ( ) => {
  const { sendMessage } = useChatGpt ( ) ;
  const [ response , setResponse ] = useState ( '' ) ;

  const handleSendMessage = ( ) => {
    sendMessage ( {
      message : 'Outline possible topics for an SEO article' ,
      onAccumulatedResponse : ( { message , isDone } ) => {
        setResponse ( message ) ;
        if ( isDone ) {
          // The response is complete, you can send another message
        }
      } ,
      onError : ( e ) => {
        // Handle error accordingly
      } ,
    } ) ;
  } ;

  return (
    < View style = { { flex : 1 } } >
      < Button onPress = { handleSendMessage } title = "Get streamed response" / >
      < Text > { response } < / Text >
    < / View >
  ) ;
} ;

️ انتبه إلى أن الواجهة الخلفية لـ ChatGPT تطبق تحديد المعدل. وهذا يعني أنه إذا قمت بإرسال عدد كبير جدًا من الرسائل على التوالي، فقد تحصل على أخطاء تتعلق برمز الحالة 429.

المساهمة

راجع دليل المساهمة لمعرفة كيفية المساهمة في المستودع وسير عمل التطوير.

الاعتمادات

• عميل Node.js غير الرسمي، والذي كان بمثابة مصدر إلهام.
• OpenAI لإنشاء ChatGPT

رخصة

معهد ماساتشوستس للتكنولوجيا © راؤول جوميز أكونا

إذا وجدت هذا المشروع مثيرًا للاهتمام، فيرجى متابعتي على تويتر