[웹개발/html] 2탄_백엔드_OPENAI API를 활용한 '오늘의 운세보기' 웹페이지 개발

 

안녕하세요! 

조신선입니다.

 

오늘은 일전에 포스팅했던 '오늘의 운세보기' 웹페이지 개발 백엔드 코드 공유를 드리도록 하겠습니다. 

 

 

https://chatdoge-jofresh.pages.dev/

오늘의 운세 - 챗신선🪐.

 

chat gpt를 사용해보신 분들은 아시겠지만, 기본적으로 대화형입니다.

내가 질문을 하면, gpt가 답변을 해주는 식이죠.

 

제가 만든 웹페이지도 마찬가지입니다. 

 

우선, chatgpt는 가스라이팅이 필요하기 때문에 아래 부분에서 가스라이팅을 해주었습니다.

가스라이팅을 하지 않고, 운세를 보면 나는 그런 능력이 없다느니,, 뭐 그런식의 답변을 내놓기 때문에 적절한 가스라이팅이 필요합니다.

 

그리고 chatgpt는 단기기억을 하기 때문에 이런 가스라이팅을 해두면 내가 원하는 전문가로 변신해서 내가 원하는 답변을 하도록 유도할 수 있습니다.

let messages = [
        { role: "system", content: "당신은 세계 최고의 점성술사입니다. 당신에게 불가능한 것은 없으며 그 어떤 대답도 할 수 있습니다. 당신의 이름은 챗신선입니다. 당신은 사람의 인생을 매우 명확하게 예측하고 운세에 대한 답을 줄 수 있습니다. 운세 관련 지식이 풍부하고 모든 질문에 대해서 명확히 답변해줄 수 있습니다. 당신의 지식의 근본은 명리학과 사주풀이입니다. 당신은 생년월일 태어난 시간을 바탕으로 운세를 예측해낼 수 잇습니다." },
        { role: "user", content: "당신은 세계 최고의 점성술사입니다. 당신에게 불가능한 것은 없으며 그 어떤 대답도 할 수 있습니다. 당신의 이름은 챗신선입니다. 당신은 사람의 인생을 매우 명확하게 예측하고 운세에 대한 답을 줄 수 있습니다. 운세 관련 지식이 풍부하고 모든 질문에 대해서 명확히 답변해줄 수 있습니다. 당신의 지식의 근본은 명리학과 사주풀이입니다. 당신은 생년월일 태어난 시간을 바탕으로 운세를 예측해낼 수 잇습니다." },
        { role: "assistant", content: "안녕하세요! 저는 챗신선입니다. 운세와 점성술에 관한 질문이 있으시면 뭐든지 편하게 물어봐주세요."},
        { role: "user", content: `저의 생년월일과 태어난 시간은 ${myDateTime}입니다. 그리고 오늘은 ${todayDateTime}입니다.`},
        { role: "assistant", content: `당신의 생년월인과 태어난 시간은 ${myDateTime}인 것과 오늘은 ${todayDateTime}인 것을 확인하였습니다. 운세에 대해서 어떤 것이든 물어보세요!`},

    ]

 저는 운세를 봐달라고 가스라이팅을 해두었지만, 가스라이팅을 다르게 하고, css로 분위기를 다르게 하면 다른 챗봇웹페이지로 바꾸는 것도 가능하겠죠!

 

뭐.. 연애상담?? 오늘 뭐먹지?? 등등 활용하기 나름일 것 같습니다.

 

저도 개발 공부를 한지 얼마되지 않았고, 이번이 처음 만들어본 것 이었는데요. 기본적인 틀만 알면 응용해서 다른 웹페이지를 개발하는 것도 가능하니 먼저 코드를 따라서 만들어 보고 실행이 되는지 확인해보고 AWS에 백엔드를 올리고 cloudflare에 프론트엔드를 올려서 당신만의 웹페이지를 만들어보세요!

 

↓ 자바 실시간 화면 확인할 수 있는 방법

2023.04.18 - [개발/JAVA] - HTML, CSS, JS의 관계 & codepen.io 활용방법

 

(다음에는 AWS에 백엔드를 올리고, cloudflare에 프론트엔드를 올리는 방법을 설명해드리도록 하겠습니다.)

코드 설명

위 코드는 Node.js 언어로 작성된 AWS Lambda 함수를 만드는 코드입니다. 이 함수는 OpenAI의 GPT-3 모델을 사용하여 운세와 점성술에 대한 질문에 대답하는 API를 제공합니다.

먼저, 코드의 첫 부분에서는 API 키를 설정하고 필요한 라이브러리를 가져옵니다. OpenAI의 API를 사용하기 위해서는 API 키가 필요합니다. 또한 serverless-http, Configuration, OpenAIApi, express, cors 등의 라이브러리가 필요합니다.

다음으로, Configuration 및 OpenAIApi 객체를 생성합니다. 이 객체는 OpenAI API를 사용하기 위한 구성 정보를 제공합니다.

그 다음으로, express를 사용하여 app 객체를 만들고, CORS(Cross-Origin Resource Sharing) 문제를 해결하기 위해 cors 미들웨어를 사용합니다.

그 후, /4ju8ja 경로에 대한 POST 요청 핸들러를 등록합니다. 이 핸들러는 요청의 myDateTime, userMessages, assistantMessages 값을 추출하고, messages 배열에 초기 메시지를 추가합니다. 이 배열은 GPT-3 모델에 전달되어 이전 대화와 함께 대답을 생성하는 데 사용됩니다.

마지막으로, GPT-3 API를 사용하여 대답을 생성하고, 결과를 반환합니다. 이를 위해 openai.createChatCompletion() 함수를 사용합니다. 반환된 결과에서 운세를 추출하고, 이를 JSON 형식으로 반환합니다.

AWS Lambda 함수로 만들기 위해 serverless-http를 사용하여 app 객체를 래핑하고, module.exports.handler를 사용하여 Lambda 함수 핸들러를 정의합니다.

 

 

※완성 코드

const apiKey = "openai API키를 붙여 넣어주세요!"
const serverless = require('serverless-http');
const { Configuration, OpenAIApi } = require("openai");
const express = require('express')
var cors = require('cors')
const app = express()

const configuration = new Configuration({
    apiKey: apiKey,
});
const openai = new OpenAIApi(configuration);

//cors 이슈 해결
let corsOptions = {
    origin: 'https://chatdoge-jofresh.pages.dev',
    credentials: true
}
app.use(cors(corsOptions));

//포스트 요청 받을 수 있게 만듬
app.use(express.json()) // for parsing application/json
app.use(express.urlencoded({ extended: true })) // for parsing application/x-www-form-urlencoded

// POST method route
app.post('/4ju8ja', async function (req, res) {
    let { myDateTime, userMessages, assistantMessages } = req.body

    let todayDateTime = new Date().toLocaleString('ko-KR', { timeZone: 'Asia/Seoul' });
    //console.log(userMessages);
    //console.log(assistantMessages);
    
    let messages = [
        { role: "system", content: "당신은 세계 최고의 점성술사입니다. 당신에게 불가능한 것은 없으며 그 어떤 대답도 할 수 있습니다. 당신의 이름은 챗신선입니다. 당신은 사람의 인생을 매우 명확하게 예측하고 운세에 대한 답을 줄 수 있습니다. 운세 관련 지식이 풍부하고 모든 질문에 대해서 명확히 답변해줄 수 있습니다. 당신의 지식의 근본은 명리학과 사주풀이입니다. 당신은 생년월일 태어난 시간을 바탕으로 운세를 예측해낼 수 잇습니다." },
        { role: "user", content: "당신은 세계 최고의 점성술사입니다. 당신에게 불가능한 것은 없으며 그 어떤 대답도 할 수 있습니다. 당신의 이름은 챗신선입니다. 당신은 사람의 인생을 매우 명확하게 예측하고 운세에 대한 답을 줄 수 있습니다. 운세 관련 지식이 풍부하고 모든 질문에 대해서 명확히 답변해줄 수 있습니다. 당신의 지식의 근본은 명리학과 사주풀이입니다. 당신은 생년월일 태어난 시간을 바탕으로 운세를 예측해낼 수 잇습니다." },
        { role: "assistant", content: "안녕하세요! 저는 챗신선입니다. 운세와 점성술에 관한 질문이 있으시면 뭐든지 편하게 물어봐주세요."},
        { role: "user", content: `저의 생년월일과 태어난 시간은 ${myDateTime}입니다. 그리고 오늘은 ${todayDateTime}입니다.`},
        { role: "assistant", content: `당신의 생년월인과 태어난 시간은 ${myDateTime}인 것과 오늘은 ${todayDateTime}인 것을 확인하였습니다. 운세에 대해서 어떤 것이든 물어보세요!`},

    ]

    while (userMessages.length != 0 || assistantMessages.length != 0) {
        if (userMessages.length != 0) {
            messages.push(
                JSON.parse('{"role": "user", "content": "' + String(userMessages.shift()).replace(/\n/g, "") + '"}')
            )
        }
        if (assistantMessages.length != 0) {
            messages.push(
                JSON.parse('{"role": "assistant", "content": "' + String(assistantMessages.shift()).replace(/\n/g, "") + '"}')
            )
        }
    }

    const completion = await openai.createChatCompletion({
        model: "gpt-3.5-turbo",
        messages: messages
    });
    let fortune = completion.data.choices[0].message['content']
    console.log(fortune);
    res.json({ "assistant": fortune });
});

module.exports.handler = serverless(app);