[React.js] Chat GPT API 적용 - OpenAI

React 목록

$ npx create-react-app chat
$ npm start

React로 앱을 생성합니다.

 

 

 

 

 

 

$ cd chat
$ npm install cors --save
$ touch index.js

cors롤 설치하고 root에 index.js 파일을 생성해서 node 서버를 구축합니다.

 

 

 

index.js

const express = require('express')
const bodyParser = require('body-parser');
const cors = require('cors');
const app = express();
const port = 3001;

app.use(bodyParser.json());
app.use(cors());

app.post('/', (req, res) => {
    res.send({
        message: 'Hello world'
    });
})

app.listen(port, () => {
    console.log('Example app port: ' + port);
})

node server 코드

 

 

src/App.js

import React, { useState } from 'react';
import './App.css'

function App() {
  const [message, setMessage] = useState('');
  const [response, setResponse] = useState('');

  const handleSubmit = (e) => {
    e.preventDefault()
    fetch('http://localhost:3001/', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({message})
    })
    .then((res) => res.json())
    .then((data) => setResponse(data.message))
  }

  return (
    <div className='App'>
      <form onSubmit={handleSubmit}>
        <textarea
          value={message}
          onChange={(e) => setMessage(e.target.value)}
        ></textarea>
        <button type='submit'>Submit</button>
      </form>
      <div>{response}</div>
    </div>
  )
}

export default App

react 프론트 코드

 

 

$ node index.js
Example app port: 3001

node 서버를 가동합니다.

 

 

 

 

 

 

React와 node의 통신을 확인합니다.

 

 

 

 

 

 

 

https://platform.openai.com/docs/api-reference/authentication

Open AI 사이트에서 nodejs 소스를 복사해서 약간 수정합니다.(아래 참조)

 

 

 

 

 

 

 

API Key도 가져옵니다.

 

 

 

 

https://platform.openai.com/docs/api-reference/completions/create?lang=node.js

Completions 코드도 가져옵니다.

 

 

 

 

index.js

const OpenAI = require('openai')
const {Configuration, OpenAIApi} = OpenAI

const express = require('express')
const bodyParser = require('body-parser');
const cors = require('cors');
const app = express();
const port = 3001;

const configuration = new Configuration({
    organization: "org-61MEulc6s1BeLM2RoTdq7Wyg",
    apiKey: '[API-KEY]',
});
const openai = new OpenAIApi(configuration);

app.use(bodyParser.json());
app.use(cors());

app.post('/', async (req, res) => {
    const { message } = req.body
    const response = await openai.createCompletion({
        model: "text-davinci-003",
        prompt: `${message}`,
        max_tokens: 4000,
        temperature: 0,
    });
    console.log(response.data)
    if (response.data) {
        if (response.data.choices) {
            res.json({
                message: response.data.choices[0].text
            })
        }
    }
})

app.listen(port, () => {
    console.log('Example app port: ' + port);
})

 

 

 

 

 

 

 

 

$ npm install openai --save
$ node index.js
Example app port: 3001

node 서버를 재구동합니다.

 

 

 

 

 

 

질문에 대한 답을 확인 할 수 있습니다.

Chat GPT는 2020년까지 학습되어 있다고 합니다.

 

 

 

 

 

 

 

React 목록