nextjs openai

Openai for Next.js

github | NPM | 데모 | 문서

OpenAI 스트림으로 작업하기위한 후크 및 구성 요소를 추가합니다.

설치

nextjs-openai 에는 프론트 엔드 도구가 포함되어 있으며 openai-streams API 경로에서 OpenAI 스트림 작업을위한 도구가 포함되어 있습니다.

yarn add nextjs-openai openai-streams

# -or-

npm i --save nextjs-openai openai-streams

후크

useBuffer() 및 useTextBuffer() 주어진 URL에서 데이터의 증가 버퍼 (및 텍스트)를로드하는 데 사용됩니다.

 import { useTextBuffer } from "nextjs-openai" ;

export default function Demo ( ) {
  const { buffer , refresh , cancel , done } = useTextBuffer ( { 
    url : "/api/demo"
  } ) ;
  
  return (
    < div >
      < StreamingText buffer = { buffer } fade = { 600 } / >
      < button onClick = { refresh } disabled = { ! done } > Refresh < / button >
      < button onClick = { cancel } disabled = { done } > Cancel < / button >
    < / div >
  ) ;
}

구성 요소

<StreamingText> 및 <StreamingTextURL> 페이드 인 애니메이션을 사용하여 스트림 버퍼에서 텍스트를 렌더링합니다.

 import { StreamingTextURL } from "nextjs-openai" ;

export default function Demo ( ) {
  return (
    < StreamingTextURL 
      url = "/api/demo" 
      fade = { 600 } 
      throttle = { 100 } 
    / >
  ) ;
}

데이터 보내기 및 고급 사용

<StreamingTextURL> 또는 useBuffer() 및 useTextBuffer() 후크로 작성된 네트워크 요청 유형을 변경하려면 { method, data } 옵션을 설정할 수 있습니다.

{ data } 기본적으로 게시물 요청 본문으로 전송됩니다. get 요청을 사용하려면 { method = "GET" } 설정하고 { url } 에서 URL 검색 매개 변수를 수동으로 설정하십시오.

_{라이브 예제는 src/pages/index.tsx 참조하십시오.}

<StreamingTextURL> 와 함께

 import { StreamingTextURL } from "nextjs-openai" ;

export default function Home ( ) {
  const [ data , setData ] = useState ( { name : "John" } ) ;
  // ...
  return (
    < StreamingTextURL url = "/api/demo" data = { data } >
  );
} 

useTextBuffer() 와 함께

 import { useTextBuffer , StreamingText } from "nextjs-openai" ;

export default function Home ( ) {
  const [ data , setData ] = useState ( { name : "John" } ) ;
  const { buffer , refresh , cancel } = useTextBuffer ( {
    url : "/api/demo" ,
    throttle : 100 ,
    data ,
    /**
     * Optional: Override params for `fetch(url, params)`.
     */
    options : {
      headers : {
        // ...
      }
    }
  } ) ;
  // ...
  return (
    < StreamingText buffer = { buffer } >
  );
}

API 경로

openai-streams 사용하여 API 경로에서 스트림으로 작업하십시오.

에지 런타임

 import { OpenAI } from "openai-streams" ;

export default async function handler ( ) {
  const stream = await OpenAI (
    "completions" ,
    {
      model : "text-davinci-003" ,
      prompt : "Write a happy sentence.nn" ,
      max_tokens : 25
    } ,
  ) ;

  return new Response ( stream ) ;
}

export const config = {
  runtime : "edge"
} ; 

노드 <18

Edge Runtime을 사용하지 않는 경우 openai-streams/node 에서 NodeJS.Readable 버전을 가져 오십시오.

 import type { NextApiRequest , NextApiResponse } from "next" ;
import { OpenAI } from "openai-streams/node" ;

export default async function test ( _ : NextApiRequest , res : NextApiResponse ) {
  const stream = await OpenAI (
    "completions" ,
    {
      model : "text-davinci-003" ,
      prompt : "Write a happy sentence.nn" ,
      max_tokens : 25
    }
  ) ;

  stream . pipe ( res ) ;
}