[Project] MyFortune 01

mynoseis3·2024년 1월 14일

practice

목록 보기
11/32

'조코딩의 챗GPT API를 활용한 수익형 웹 서비스 만들기'
책을 보면서 공부한 내용 기록하기

학원에서는 배우지 않았던 부분들이 대부분이라
새로운 학습이 될 것 같아서 주문한 책

어려울 수 있지만 일단 부딪혀보자 !!

우선 책과 최대한 동일하게 따라 배우면서
추후에는 ui 부분 바꾸고
기능같은 거 추가하고 싶은 게 생기면 커스텀해서
나만의 앱으로 만들어보자요 !

이 책에서는 챗gpt api를 활용해 운세 서비스를 제작하고 있다.

챗GPT 플레이그라운드 살펴보기

플레이그라운드에서는 모드를 선택하여 챗gpt api가 어떻게
동작하는지 ui를 통해 직관적으로 체험할 수 있는 웹 기반 인터페이스이다.

  • you've reached your usage limit 에러

무료 계정 기한이 만료되면 유료 계정으로 전환해야 사용할 수 있다는 글이었다.


카드 등록

  • settings -> billing - > payment methods

  • add payment details 에서 카드 등록
  • 카드 등록하고 나면 크레딧 10 달러가 충전됐다 !

1. 프롬프트 작성

SYSTEM에 적용한 챗GPT의 역할을 USER에 중복 적용 후 submit

책에서 나온 것과 같은 대답이 돌아오지는 않는데
뭔가 user에 중복 적용해본 뒤가 자신의 이름을 ai챗도지라고 하는 거 보면
앞서 system에만 적용한 것보다는 user에 중복 적용한 후가
좀 더 진전한 느낌이다.

2. 이전 대화 학습 적용

-> 챗gpt가 반드시 질문에 답변하도록 유도하기

-> 결과

3. 기타 옵션

옵션(파라미터)를 조정하여 맞춤형 답변이 나오도록 유도하는 기능을 가지고 있다.

  1. Temperature
  2. Maximum length
  3. Top P
  4. Frequency penalty
  5. Presence penalty

📝 Temperature

Temperature 파라미터는 모델이 생성하는 텍스트가 얼마나 랜덤하게 나올지를 조정한다.
값이 0에 가까울수록 일관적인 테스트를 생성, 갚이 높아질수록 다양한 텍스트를 생성한다.

📝 Maximum length

Maximum length 파라미터는 모델이 생성하는 텍스트의 길이를 조정한다.
길이의 단위는 단어가 아닌 토큰이며 최대 4095개의 토큰까지 설정할 수 있다.

📝 Top P

Top P는 Temperature과 유사한 개념으로 0에 가까울수록 유사한 텍스트를
생성하는 경향을 보인다.

💡 Temperature와 Top P 파라미터는 초기에는 기본값으로 설정하고,
추후 서비스에 필요한 정도에 따라 조절하기

📝 Frequency penalty

Frequency penalty 파라미터는 모델이 생성한 텍스트에 중복된 단어가 나오지 않도록 유도한다.

📝 Presence penalty

Presence penalty 파라미터는 Frequency penalty와 유사한 개념으로
챗gpt가 이미 생성한 단어가 다시 등장할 확률을 조정하는 값이다.


🔎 개발 환경 설정

키워드

  • vscode
  • node.js
  • openAI api
  • 패키지
  • NPM
  • API 키

1-1. 비주얼 스튜디오 코드 환경 설정하기

++ 한글팩 설치

1-2. 프로젝트 폴더 생성하기

1-3. 프로젝트 폴더 불러오기

  • 폴더의 작성자를 신뢰하냐고 묻는 알림창 YES 클릭


2-1. Node.js 환경 설정하기

  • Node.js 설치

https://nodejs.org/en/download

나는 윈도우 환경이므로 윈도우 Installer 클릭

설치 완료

  • vscode에서 설치 확인
    터미널 열기 단축키 ctrl + `

  • node.js 버전 확인 명령어
    node -v

vscode에서는 확인이 안 되어 cmd에서 명령어를 입력해보니 cmd에서는
node.js가 설치된 것을 확인할 수 있었다.

  • 해결
    파일 - > 기본 설정 - > 설정

    window profile 검색 - > null에서 command prompt로 변경

    vscode 재시작 후 다시 확인해보면 버전이 잘 확인된다 !

2-2. 동작 테스트하기

  • index.js 파일 생성

  • console.log("Hello World!") 입력 후 저장

  • 터미널에서 node index.js 명령어 입력 후 출력된 로그 확인


3-1. OpenAI API 패키지 환경 설정하기

챗gpt를 서비스와 연동하기 위한
OpenAI의 API 패키지를 설치하고 테스트를 진행한다.

NPM을 통해 OpenAI의 API 패키지를 설치한다.

💡 NPM : Node.js에서 사용할 수 있는 라이브러리를 패키지 단위로 설치해주는 도구 / (node.js를 설치할 때 함께 설치된다.)

  • vscode에 OpenAI 패키지 설치 진행하기

vscode 터미널에서 npm init 명령어로 npm 초기화 진행

  • npm 초기화가 완료되면 패키지 이름, 버전 등 몇 가지 기본 정보를 확인하는 프롬프트가 나온다.

책에서는 별도의 설정 없이 기본값을 사용할 예정이므로 프롬프트가 나올 때마다 enter키 누르기 !

  • 마지막 프롬프트인 is this ok?(yes)까지 enter키를 누르면
    backend 폴더 아래에 퍀키지를 설치하기 위한 package.json 파일이 생성되는 걸 확인할 수 있다.

  • 터미널에서 다음 명령어를 입력하여 OpenAI 패키지를 설치한다.
    npm install openai

  • 설치가 완료되면 package.json 파일의 dependencies에 OpenAI 패키지가 추가된 걸 확인할 수 있다.

3-2. OpenAI API 패키지 동작 테스트 준비

  • OpenAI Node.js 패키지 페이지로 접속
    https://www.npmjs.com/package/openai

  • Usage 예시 코드를 복사

  • vscode에서 index.js 파일에 붙여넣기 - >
    OpenAI 패키지를 require 키워드로 불러오도록 변경

const OpenAI = require('openai');


3-3. API키 발급

  • OpenAI 플레이그라운드 페이지에서 API Keys 메뉴로 접속
    Create new secret key 버튼 클릭

  • api 키 따로 저장해두기 (재열람 불가)

  • 발급받은 API키를 index.js 파일에 반영해보기

코드의 4행부터 6행까지가 api키를 반영하는 부분이다.

  • 위의 OPENAI_API_KEY 부분을 복사한 api키로 대체한다.

3-4. 테스트 동작 확인하기

🛩️ 지금까지 작성한 코드가 잘 동작하는지 테스트를 진행한다.

vscode 터미널에서 node index.js 명령어 실행

  • openai 에러 발생

에러 원인 해석 : OPENAI_API_KEY 환경 변수가 누락되었거나 비어 있습니다. 이를 제공하거나 new OpenAI({ apiKey: 'My API Key' })와 같은 apiKey 옵션을 사용하여 OpenAI 클라이언트를 인스턴스화하세요.

책에 나온 코드로 수정하고 진행했다가 오류가 났는데
책에 제시된 OpenAI Node.js 패키지 페이지 내의 usage 예시 코드와 내가 배우고 있는 때의 예시코드가 조금 달라서 에러가 났다.

아래와 같이 process.env는 지우지 말고 그대로 두고
발급 받은 키를 넣고 로그를 출력하는 코드를 추가한다.

💡
console.log(completion.choices); : API 호출이 완료되면 반환된 결과 중에서 생성된 텍스트가 completion.choices 배열에 담겨 있고 이 배열을 콘솔에 출력한다.

  • 결과

챗gpt의 응답이 정상적으로 출력되고 있다 ! 얏호

다음 시간부터는 본격적으로 백엔드를 구현하며
api를 다루는 방법을 시도해보자 빳팅 !! 🌠

profile
웹개발자 꿈나무 꾸준함의 힘을 믿습니다 🚶

0개의 댓글