OpenAI API를 이용하여 채팅 웹페이지를 만들다

이렇게 AI와 대화를 할 수 있다.

 

openAI API를 사용해서 채팅 웹을 만드는 방법은

 

이 영상을 참고했다.

 

아직 제대로 공부하지 못해서 잘은 모르지만

따라 만들기에 너무 재밌을 것 같아서 만들어 봤다.

 

기본적으로 openAI 사용하는 방법은 영상을 따라했고

내가 할줄아는 HTML CSS JS로 채팅화면 꾸미기를 조금 해봤다.

 

아이폰 메세지 앱을 참고해서 비슷한 느낌으로 만들어보고자 했다.

색입히기, 마진, 패딩넣기는 그냥 하나씩 해보면서 맞췄다.

---

만들면서 몇 가지 신경 쓴 것들

배경 블러처리하기

아이폰 메세지 앱을 보면,

화면의 상단부분에는 메세지 내용이 블러처리가 돼서 보이고

상대방의 프로필이 나온다.

(메세지들을 스크롤하면 블러부분에도 메세지가 올라가는 것이 흐리지만 보여야한다.)

 

이를 구현하기 위해서

backdrop-filter: blur(n px); 효과를 썼다.

 

<div class="bg-grey"></div>
        <div class="top-bg">
            토리
        </div>

메세지가 보이는 chat-content 박스 안에다가 이 요소들을 넣었다.

.top-bg {
    
    position: fixed;
    height: 10%;
    width: 100%;
    background-color: (0,0,0,0.5);
    backdrop-filter: blur(8px);
    text-align: center;
    color: white;
    font-size: 25px;
    padding-top: 20px;
    filter: 
}

position: fixed로 상단에 고정되어있도록 하였다.

backdrop-filter가 잘 적용되게 하기 위해서는, 현재 배경을 투명하게 해줘야하는데, 

투명도는 opacity가 아니라 background-color: (x1,x2,x3,투명도);를 이용해서 투명하게 해야 잘 적용이 된다.

 

배경을 투명하게 해야 된다는건 알았는데 opacity로만 적용을 했다가 backdrop-filter가 적용이 안돼서 한참을 헤맸다.

 

그리고 이렇게 backdrop-filter를 적용하게 되면 현재 요소가 반투명해져서 뒷 내용이 블러되어 보이는데,

내 배경색을 회색으로 지정해도 색이 나오지 않게된다.

 

그래서 이 요소 뒷쪽에 반투명한 회색 요소 .bg-grey를 집어넣어

회색영역이면서 블러가 되는것처럼 보이게 했다.

 

.bg-grey {
    background: grey;
    position: fixed;
    height: 10%;
    width: 100%;
    opacity: 0.3;
}

그럼 이렇게 윗 영역이 약간 회색빛이면서 블러가 된다.

 

---

채팅이 올라올 때마다 자동 스크롤 되게 하기

처음 채팅이 되게 만들었을 때,

스크롤이 자동으로 되지 않아서

내가 메세지를 보내고 스크롤이 올라가면 마우스로 스크롤을 또 내려서 확인하고..하는 번거로움이 있었다.

 

자바스크립트 스크롤이벤트리스너를 이용해서 자동 스크롤이 되게 했다.

            $('.chat-content').scrollTop($('.chat-content').prop('scrollHeight'));

메세지가 새로 띄워지는 동작 바로 밑에 이 코드를 붙여줬다.

chat-content영역에서 스크롤 최대로 내리라는 말이다.

 

---

메세지 엔터로 보내기

메세지를 입력하고 전송할 때마다 마우스로 전송버튼을 클릭해야 했다.

그것이 귀찮아서, 엔터가 눌릴때도 똑같이 전송이 되도록 하고자 했다.

 

$('#input').keypress(function (e) {
        if (e.keyCode == 13) {
            sendText();
        }
    })

input 요소에 keypress 이벤트리스너를 달아주면 된다.

keyCode 13번은 엔터이다.

엔터를 눌렀을 때 해야 할 동작 sendText()를 실행하도록 했다.

---

이렇게 만든 것을 깃허브에 올렸는데,

OpenAI API 인증키가 그대로 노출되는 바람에 자꾸 키값이 만료되어서 서비스를 제대로 사용할 수 없게 됐다.

 

환경변수 .env를 사용해서 인증키가 노출되지 않게 git에 올릴 수 있다는데..

dotenv install부터가 막혀서 어떻게 해야할지 너무 난감하다..