[OpenAI] 음악 추천 서비스 만들어보기 (React) 1부

오늘은 ChatGPT에 사용된 OpenAI를 사용해서 음악 추천 서비스를 만들어보려고 합니다!

어떻게 만들면 되는지 과정을 기록해보고 공유해보겠습니다.

 

OpenAI 가이드를 따라서 하면 어렵지 않게 서비스를 만들 수 있습니다. 아래 OpenAI 링크에서 가이드를 확인할 수 있어요.

OpenAI 링크: https://platform.openai.com

 

0. 먼저 Api Key를 발급받아 저장해둡니다. 첫 번째 발급받을 때에는 영구히 유지할 수 있는데, 두 번째 발급부터는 기간이 있다고 하니 나중에 만료일자 신경쓰지 않아도 되도록 잘 저장해두어야겠어요. 저는 메모장과 노션에 따로 저장해두었습니다.

 

1. 먼저 저는 빠른 세팅을 위해서 CRA로 React 프로젝트를 생성해주었습니다. 음악 추천 서비스이니 이름은 recommend-music-for-me로 지어주었습니다. 프로젝트명 지어주는 건 항상 고민되는 일인 것 같습니다.

npx create-react-app recommend-music-for-me

 

 

2. 다음으로 OpenAI Node module을 설치해줍니다.

$ npm install openai

 

3. OpenAI 샘플 가이드를 보면, API Key와, prompt 가 필요한 것을 알 수 있습니다. 따라서 .env 파일에 REACT_APP_API_KEY를 추가해주고, gitignore에 .env를 추가해주겠습니다.

.env 파일을 생성하여 아래 코드를 추가해줍니다.

REACT_APP_OPENAI_API_KEY=${YOUR_OPEN_AI_API_KEY}

.gitignore 파일에 무시할 파일 목록에 .env를 추가해주고 주석을 달아줍니다.

# API KEY
.env

 

4. 그럼 App.js에서 API 호출이 잘 되는지부터 간단히 확인해보겠습니다. App.js의 기존 코드를 지우고, 아래 코드를 작성해주었습니다. 

useEffect로 마운트 시에 API를 호출하고, 호출 시 response.data를 console.log()로 확인해봅시다.

import { useCallback, useEffect } from 'react';

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

function App() {
  // OpenAI API 호출
  const fetchOpenApi = useCallback(() => {
    const configuration = new Configuration({
      apiKey: process.env.REACT_APP_OPENAI_API_KEY,
    });

    new OpenAIApi(configuration)
      .createCompletion({
        model: 'text-davinci-003',
        prompt: 'Say this is a test',
        temperature: 0,
        max_tokens: 7,
      })
      .then((res) => {
        const { data } = res;

        console.log(data);
      });
  }, []);

  useEffect(() => {
    fetchOpenApi(); // Mount 시 호출한다.
  }, []);

  return <div className="App">openai</div>;
}

export default App;

console.log(data);의 데이터를 확인해보니 아래와 같습니다. 나중에 화면에 결과를 노출해주어야 하니, choices 객체 배열의 text를 사용하면 될 것 같습니다.

 

5. 그럼 노래 추천도 잘 되는지 확인해봅니다. prompt 질문을 바꿔주고, max_tokens를 150으로 변경해주었더니 아래와 같은 결과를 확인 할 수 있습니다. 잘 나오고 있네요!

 

7. 화면에 노출하기 위해서 useState를 사용해서 state 저장한 값을 노출합니다.

현재까지 App.js의 전체 코드는 이렇습니다. 우선 기능 연동이 잘 되는지 확인하였으니 이후에는 리팩토링을 같이 진행하도록 하겠습니다.

import { useCallback, useEffect, useState } from 'react';

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

function App() {
  const [music, setMusic] = useState({ title: '', singer: '' });

  // OpenAI API 호출
  const fetchOpenApi = useCallback(() => {
    const configuration = new Configuration({
      apiKey: process.env.REACT_APP_OPENAI_API_KEY,
    });

    const testPrompt = 'recommend me one female indie song';

    new OpenAIApi(configuration)
      .createCompletion({
        model: 'text-davinci-003',
        prompt: testPrompt,
        temperature: 0,
        max_tokens: 150,
      })
      .then((res) => {
        const { choices } = res.data;
        const [title, singer] = choices[0].text.split('by');

        setMusic({ title, singer }); // 음악의 제목, 가수 데이터 저장
      });
  }, []);

  useEffect(() => {
    fetchOpenApi(); // Mount 시 호출한다.
  }, []);

  const { title, singer } = music;
  return (
    <div className="App">
      {title} - {singer}
    </div>
  );
}

export default App;

 

여기까지 OpenAI Api 연동을 성공하였고, 다음으로는 maniaDB API를 사용하여 앨범 커버, 음악 제목, 가수를 함께 카드 형식으로 보여주는 작업을 할 예정입니다. 이 작업은 다음 포스팅에 이어서 작성해보도록 하겠습니다!