ดาวน์โหลด react native chatgpt - ดาวน์โหลดซอร์สโค้ด react native chatgpt

react native chatgpt

โค้ดแหล่งที่มา AI

1.0.0

ดาวน์โหลด

ตอบสนองพื้นเมือง-chatgpt

Wrapper ดั้งเดิมของ React รอบ ChatGPT โดย OpenAI เพื่อผสานรวมกับแอปพลิเคชันของคุณได้อย่างราบรื่น มันจัดการการรับรองความถูกต้อง การตอบกลับแบบสตรีม และการติดตามการสนทนา ทั้งหมดนี้ไม่จำเป็นต้องใช้เซิร์ฟเวอร์

react-native-chatgpt.mp4

คุณสมบัติ
ข้อสงวนสิทธิ์
ลองมันดู
การติดตั้ง
เอพีไอ
- ChatGptProvider
- useChatGpt
มีส่วนร่วม
เครดิต
ใบอนุญาต

คุณสมบัติ

ฝั่งไคลเอ็นต์ 100% : คุณสามารถรวมแชทบอทที่ทรงพลังเข้ากับแอปของคุณได้อย่างง่ายดายโดยไม่จำเป็นต้องใช้แบ็กเอนด์ที่กำหนดเอง
⚡ รองรับการสตรีม : พบกับการตอบสนองที่รวดเร็วปานสายฟ้าทันทีที่พร้อมใช้งาน คล้ายกับเว็บสนามเด็กเล่น ChatGPT
- การสนทนา : ChatGPT จดจำสิ่งที่คุณพูดก่อนหน้านี้ ทำให้การสนทนาดำเนินไปโดยการส่ง conversationId และ messageId ไปพร้อมกับข้อความ
รองรับงาน Expo : ไม่จำเป็นต้องดีดออกเพื่อเพลิดเพลินกับส่วนประกอบนี้
ประเภท safe : เขียนด้วย 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

ไม่จำเป็นต้องมีขั้นตอนเพิ่มเติม

แอพเนทีฟ Bare React

คุณต้องติดตั้ง react-native-webview , react-native-vector-icons และ expo-secure-store

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

หลังจากการติดตั้งเสร็จสิ้น คุณควรปฏิบัติตามคำแนะนำเพิ่มเติมเพื่อตั้งค่าไลบรารี:

ตอบสนองพื้นเมือง webview
ปฏิกิริยา-พื้นเมือง-เวกเตอร์-ไอคอน
งานแสดงสินค้าปลอดภัยร้านค้า

เอพีไอ

ไลบรารีนี้จะส่งออกส่วนประกอบของผู้ให้บริการและฮุกเป็น API หลัก

`ChatGptProvider`

ควรวางองค์ประกอบของผู้ให้บริการไว้ ที่รูทของแอปพลิเคชัน React Native ของคุณ ดังที่แสดงในตัวอย่างด้านล่าง:

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

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

อุปกรณ์ประกอบฉาก

อุปกรณ์ประกอบฉาก ChatGptProvider ต่อไปนี้ช่วยให้คุณปรับแต่งลักษณะที่ปรากฏของโมดอลที่จัดการการตรวจสอบสิทธิ์ด้วย ChatGPT และการหมดเวลาสำหรับคำขอแชทบอต

ชื่อ	ที่จำเป็น	พิมพ์	คำอธิบาย
`children`	ใช่	`React.Node`	โครงสร้างส่วนประกอบแอปพลิเคชันของคุณ
`containerStyles`	เลขที่	`StyleProp<ViewStyle>`	ใช้สไตล์พิเศษกับคอนเทนเนอร์ webview
`backdropStyles`	เลขที่	`StyleProp<ViewStyle>`	ใช้สไตล์พิเศษกับมุมมองฉากหลัง โดยค่าเริ่มต้นจะใช้สีพื้นหลังกึ่งโปร่งใส `rgba(0, 0, 0, 0.5)`
`renderCustomCloseIcon`	เลขที่	`(closeModal: () => void) => React.Node`	ตัวเรนเดอร์ปุ่มปิดแบบกำหนดเองที่จะวางไว้ที่ด้านบนของ webview ตามค่าเริ่มต้น จะแสดงเครื่องหมายกากบาทสีดำ (X) ที่มุมขวาบน อย่าลืม เชื่อมต่อฟังก์ชัน closeModal ที่เป็นอาร์กิวเมนต์กับเหตุการณ์ `onPress` ของคุณ
`requestTimeout`	เลขที่	`number`	ระยะเวลาสูงสุดในหน่วยมิลลิวินาทีที่คุณยินดีรอคำขอ ปกติ ก่อนที่จะยกเลิก โดยมีค่าเริ่มต้นอยู่ที่ 30,000 มิลลิวินาที
`streamedRequestTimeout`	เลขที่	`number`	ระยะเวลาสูงสุดในหน่วยมิลลิวินาทีที่คุณยินดีรอคำขอ แบบสตรีม ก่อนที่จะยกเลิก โดยมีค่าเริ่มต้นอยู่ที่ 15,000 มิลลิวินาที

`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`

นี่คือหน้าที่หลักของห้องสมุด มันส่งข้อความไปยังแชทบอทและตอบกลับ สามารถใช้ได้สองวิธีที่แตกต่างกัน ขึ้นอยู่กับอาร์กิวเมนต์ที่ส่งผ่าน:

มาตรฐาน

 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 >
  ) ;
} ;