Next.js를 사용하여 OpenAI, Vercel AI SDK 및 Ollama를 사용하여 AI 도우미를 구축하는 방법

오늘 블로그 게시물에서는 OpenAI의 Whisper 및 TTS와 Meta의 Llama 3.1이라는 세 가지 AI 모델을 사용하여 AI Assistant를 구축해 보겠습니다.

AI를 탐구하면서 다양한 것을 시도해보고 음성으로 작동하는 AI 비서를 만들고 싶었습니다. 이러한 호기심으로 인해 저는 OpenAI의 Whisper 및 TTS 모델을 Meta의 Llama 3.1과 결합하여 음성 인식 비서를 구축하게 되었습니다.

이러한 모델이 함께 작동하는 방식은 다음과 같습니다.

• 먼저 오디오를 Whisper 모델로 보내면 음성이 텍스트로 변환됩니다.
• 다음으로 해당 텍스트를 Llama 3.1 모델에 전달하겠습니다. 라마가 텍스트를 이해하고 응답을 생성합니다.
• 마지막으로 Llama의 응답을 TTS 모델로 전송하여 텍스트를 다시 음성으로 변환합니다. 그런 다음 해당 오디오를 클라이언트로 다시 스트리밍합니다.

이 뛰어난 AI 어시스턴트를 직접 만들어 보겠습니다!

시작하기

어시스턴트를 구축하기 위해 다양한 도구를 사용할 것입니다. 클라이언트 측을 구축하기 위해 Next.js를 사용하겠습니다. 그러나 원하는 프레임워크를 선택할 수 있습니다.

OpenAI 모델을 사용하기 위해 TypeScript/JavaScript SDK를 사용합니다. 이 API를 사용하려면 다음 환경 변수가 필요합니다: OPENAI_API_KEY—

이 키를 얻으려면 OpenAI 대시보드에 로그인하여 API 키 섹션을 찾아야 합니다. 여기에서 새 키를 생성할 수 있습니다.

멋지네요. 이제 Llama 3.1 모델을 사용하기 위해 ollama-ai-provider라는 공급자를 활용하여 Ollama와 Vercel AI SDK를 사용하겠습니다.

Ollama를 사용하면 선호하는 모델(Phi와 같은 다른 모델을 사용할 수도 있음)을 다운로드하여 로컬에서 실행할 수 있습니다. Vercel SDK는 Next.js 프로젝트에서 사용을 용이하게 합니다.

Ollama를 사용하려면 다운로드하고 선호하는 모델을 선택하기만 하면 됩니다. 이 블로그 게시물에서는 Llama 3.1을 선택하겠습니다. Ollama를 설치한 후 터미널을 열고 다음 명령을 작성하여 작동하는지 확인할 수 있습니다.

제가 선택한 모델이기 때문에 'llama3.1'이라고 쓴 것에 주목하세요. 하지만 다운로드한 모델을 사용해야 합니다.

시작하기

이제 Next.js 앱을 설정하여 작업을 시작할 시간입니다. 다음 명령으로 시작해 보겠습니다.

npx create-next-app@latest

명령어를 실행하면 앱 세부정보를 설정하라는 몇 가지 메시지가 표시됩니다. 단계별로 살펴보겠습니다:

• 앱 이름을 지정하세요.
• 앱 라우터 활성화.

다른 단계는 선택 사항이며 전적으로 귀하에게 달려 있습니다. 제 경우에도 TypeScript와 Tailwind CSS를 사용하기로 선택했습니다.

이제 완료되었습니다. 프로젝트로 이동하여 모델을 실행하는 데 필요한 종속성을 설치해 보겠습니다.

npx create-next-app@latest

클라이언트 로직 구축

이제 목표는 음성을 녹음하여 백엔드로 보낸 다음 음성 응답을 받는 것입니다.

오디오를 녹음하려면 클라이언트 측 기능을 사용해야 합니다. 즉, 클라이언트 구성 요소를 사용해야 합니다. 우리의 경우 클라이언트 기능을 사용하고 클라이언트 번들에 전체 트리를 포함하도록 전체 페이지를 변환하고 싶지 않습니다. 대신에 우리는 서버 구성 요소를 사용하고 클라이언트 구성 요소를 가져와 애플리케이션을 점진적으로 향상시키는 것을 선호합니다.

그러므로 클라이언트 측 로직을 처리할 별도의 구성 요소를 만들어 보겠습니다.

앱 폴더 안에 구성 요소 폴더를 만들고 여기에 구성 요소를 만듭니다.

npm i ai ollama-ai-provider openai

계속해서 구성요소를 초기화해 보겠습니다. 계속해서 몇 가지 스타일이 포함된 버튼을 추가했습니다.

app
 ↳components
  ↳audio-recorder.tsx

그런 다음 페이지 서버 구성요소로 가져옵니다.

// app/components/audio-recorder.tsx
'use client'
export default function AudioRecorder() {
    function handleClick(){
      console.log('click')
    }

    return (
        <section>
        <button onClick={handleClick}
                    className={`bg-blue-500 text-white px-4 py-2 rounded shadow-md hover:bg-blue-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-white transition duration-300 ease-in-out absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2`}>
                Record voice
            </button>
        </section>
    )
}

이제 앱을 실행하면 다음이 표시됩니다.

멋져요! 이제 버튼은 아무 작업도 수행하지 않지만 목표는 오디오를 녹음하여 어딘가로 보내는 것입니다. 이를 위해 논리를 포함할 후크를 만들어 보겠습니다.

// app/page.tsx
import AudioRecorder from '@/app/components/audio-recorder';

export default function Home() {
  return (
      <AudioRecorder />
  );
}

음성을 녹음하기 위해 navigator와 MediaRecorder라는 두 가지 API를 사용합니다. Navigator API는 사용자 미디어 오디오와 같은 사용자의 미디어 장치에 대한 정보를 제공하고 MediaRecorder는 여기에서 오디오를 녹음하는 데 도움을 줍니다. 이들이 함께 플레이하는 방식은 다음과 같습니다.

app
 ↳hooks
  ↳useRecordVoice.ts

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

export function useRecordVoice() {
  return {}
}

이 코드를 단계별로 설명해 보겠습니다. 먼저 두 개의 새로운 상태를 만듭니다. 첫 번째는 녹음 중일 때를 추적하기 위한 것이고 두 번째는 MediaRecorder의 인스턴스를 저장하는 것입니다.

// apps/hooks/useRecordVoice.ts
import { useEffect, useRef, useState } from 'react';

export function useRecordVoice() {
    const [isRecording, setIsRecording] = useState(false);
    const [mediaRecorder, setMediaRecorder] = useState<MediaRecorder | null>(null);

     const startRecording = async () => {
        if(!navigator?.mediaDevices){
            console.error('Media devices not supported');
            return;
        }

        const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
        const mediaRecorder = new MediaRecorder(stream);
        setIsRecording(true)
        setMediaRecorder(mediaRecorder);
        mediaRecorder.start(0)
    }

    const stopRecording = () =>{
        if(mediaRecorder) {
            setIsRecording(false)
            mediaRecorder.stop();
        }
    }

  return {
    isRecording,
    startRecording,
    stopRecording,
  }
}

그런 다음 첫 번째 메소드인 startRecording을 생성하겠습니다. 여기서는 오디오 녹음을 시작하는 로직을 살펴보겠습니다.
먼저 사용자의 브라우저 환경에 대한 정보를 제공하는 Navigator API 덕분에 사용자가 사용 가능한 미디어 장치를 가지고 있는지 확인합니다.

오디오를 녹음할 미디어 장치가 없으면 그냥 돌아옵니다. 그렇다면 오디오 미디어 장치를 사용하여 스트림을 생성해 보겠습니다.

 const [isRecording, setIsRecording] = useState(false);
    const [mediaRecorder, setMediaRecorder] = useState<MediaRecorder | null>(null);

마지막으로 이 오디오를 녹음하기 위해 MediaRecorder의 인스턴스를 생성합니다.

npx create-next-app@latest

그런 다음 녹음을 중지하는 방법이 필요합니다. 이것이 녹음을 중지하는 것입니다. 여기서는 미디어 레코더가 있을 경우를 대비하여 녹화를 중지하겠습니다.

npm i ai ollama-ai-provider openai

오디오를 녹음하고 있지만 어디에도 저장하고 있지 않습니다. 이를 달성하기 위해 새로운 useEffect 및 ref를 추가해 보겠습니다.
새로운 참조가 필요하며 여기에 오디오 데이터 덩어리가 저장됩니다.

app
 ↳components
  ↳audio-recorder.tsx

useEffect에서는 두 가지 주요 작업을 수행합니다. 즉, 해당 청크를 참조에 저장하고, 중지되면 audio/mp3 유형의 새 Blob을 생성합니다.

// app/components/audio-recorder.tsx
'use client'
export default function AudioRecorder() {
    function handleClick(){
      console.log('click')
    }

    return (
        <section>
        <button onClick={handleClick}
                    className={`bg-blue-500 text-white px-4 py-2 rounded shadow-md hover:bg-blue-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-white transition duration-300 ease-in-out absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2`}>
                Record voice
            </button>
        </section>
    )
}

이제 AudioRecorder 구성요소에 이 후크를 연결할 시간입니다.

// app/page.tsx
import AudioRecorder from '@/app/components/audio-recorder';

export default function Home() {
  return (
      <AudioRecorder />
  );
}

동전의 반대편, 백엔드로 가보자!

서버측 설정

우리는 서버의 모델을 사용하여 모든 것을 안전하게 유지하고 더 빠르게 실행하고 싶습니다. Next.js의 경로 핸들러를 사용하여 새 경로를 만들고 이에 대한 핸들러를 추가해 보겠습니다. App 폴더에 다음 경로가 포함된 "Api" 폴더를 만들어 보겠습니다.

우리는 서버의 모델을 사용하여 모든 것을 안전하게 유지하고 더 빠르게 실행하고 싶습니다. Next.js의 경로 핸들러를 사용하여 새 경로를 만들고 이에 대한 핸들러를 추가해 보겠습니다. App 폴더에 다음 경로가 포함된 "Api" 폴더를 만들어 보겠습니다.

app
 ↳hooks
  ↳useRecordVoice.ts

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

export function useRecordVoice() {
  return {}
}

저희 루트는 '채팅'입니다. Route.ts 파일에서 핸들러를 설정하겠습니다. OpenAI SDK 설정부터 시작해 보겠습니다.

// apps/hooks/useRecordVoice.ts
import { useEffect, useRef, useState } from 'react';

export function useRecordVoice() {
    const [isRecording, setIsRecording] = useState(false);
    const [mediaRecorder, setMediaRecorder] = useState<MediaRecorder | null>(null);

     const startRecording = async () => {
        if(!navigator?.mediaDevices){
            console.error('Media devices not supported');
            return;
        }

        const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
        const mediaRecorder = new MediaRecorder(stream);
        setIsRecording(true)
        setMediaRecorder(mediaRecorder);
        mediaRecorder.start(0)
    }

    const stopRecording = () =>{
        if(mediaRecorder) {
            setIsRecording(false)
            mediaRecorder.stop();
        }
    }

  return {
    isRecording,
    startRecording,
    stopRecording,
  }
}

이 경로에서는 프런트 엔드의 오디오를 base64 문자열로 전송합니다. 그런 다음 이를 수신하여 Buffer 객체로 변환합니다.

 const [isRecording, setIsRecording] = useState(false);
    const [mediaRecorder, setMediaRecorder] = useState<MediaRecorder | null>(null);

이제 첫 번째 모델을 사용할 시간입니다. 우리는 이 오디오를 텍스트로 변환하고 OpenAI의 Whisper Speech-To-Text 모델을 사용하려고 합니다. Whisper에서 텍스트를 생성하려면 오디오 파일이 필요합니다. 파일 대신 버퍼가 있으므로 'toFile' 메소드를 사용하여 오디오 버퍼를 다음과 같은 오디오 파일로 변환합니다.

// check if they have media devices
if(!navigator?.mediaDevices){
 console.error('Media devices not supported');
 return;
}
// create stream using the audio media device
const stream = await navigator.mediaDevices.getUserMedia({ audio: true });

"mp3"를 지정했습니다. 이것은 Whisper 모델이 사용할 수 있는 많은 확장 중 하나입니다. 여기에서 지원되는 확장의 전체 목록을 볼 수 있습니다: https://platform.openai.com/docs/api-reference/audio/createTranscription#audio-createtranscription-file

이제 파일이 준비되었으니 Whisper에 전달해 보겠습니다! OpenAI 인스턴스를 사용하여 모델을 호출하는 방법은 다음과 같습니다.

// create an instance passing in the stream as parameter
const mediaRecorder = new MediaRecorder(stream);
// Set this state to true to 
setIsRecording(true)
// Store the instance in the state
setMediaRecorder(mediaRecorder);
// Start recording inmediately
mediaRecorder.start(0)

그렇습니다! 이제 다음 단계로 넘어갈 수 있습니다. Llama 3.1을 사용하여 이 텍스트를 해석하고 답변을 제공하는 것입니다. 이를 위해 두 가지 방법을 사용하겠습니다. 먼저 'ollama-ai-provider' 패키지의 'ollama'를 사용합니다. 이를 통해 로컬에서 실행되는 Ollama와 함께 이 모델을 사용할 수 있습니다. 그런 다음 Vercel AI SDK의 'generateText'를 사용하여 텍스트를 생성하겠습니다.
참고 사항: Ollama를 로컬에서 실행하려면 터미널에 다음 명령을 작성해야 합니다.

npx create-next-app@latest

npm i ai ollama-ai-provider openai

마지막으로 OpenAI의 TTS 모델이 생겼습니다. 우리는 사용자에게 오디오로 응답하고 싶기 때문에 이 모델이 정말 도움이 될 것입니다. 텍스트를 음성으로 바꿔줍니다:

app
 ↳components
  ↳audio-recorder.tsx

TTS 모델은 응답을 오디오 파일로 변환합니다. 우리는 이 오디오를 다음과 같이 사용자에게 다시 스트리밍하고 싶습니다.

// app/components/audio-recorder.tsx
'use client'
export default function AudioRecorder() {
    function handleClick(){
      console.log('click')
    }

    return (
        <section>
        <button onClick={handleClick}
                    className={`bg-blue-500 text-white px-4 py-2 rounded shadow-md hover:bg-blue-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-white transition duration-300 ease-in-out absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2`}>
                Record voice
            </button>
        </section>
    )
}

그리고 이것이 전체 백엔드 코드입니다! 이제 프런트엔드로 돌아가 모든 배선 작업을 마무리합니다.

모두 합치기

useRecordVoice.tsx 후크에서 API 엔드포인트를 호출할 새 메서드를 만들어 보겠습니다. 또한 이 방법은 응답을 다시 가져와 백엔드에서 스트리밍하는 오디오를 사용자에게 재생합니다.

// app/page.tsx
import AudioRecorder from '@/app/components/audio-recorder';

export default function Home() {
  return (
      <AudioRecorder />
  );
}

좋아요! 이제 스트리밍된 응답을 받았으므로 이를 처리하고 사용자에게 오디오를 재생해야 합니다. 이를 위해 AudioContext API를 사용하겠습니다. 이 API를 사용하면 오디오를 저장하고 디코딩한 후 준비가 되면 사용자에게 재생할 수 있습니다.

app
 ↳hooks
  ↳useRecordVoice.ts

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

export function useRecordVoice() {
  return {}
}

그리고 그게 다입니다! 이제 사용자는 기기에서 오디오 응답을 듣게 됩니다. 마무리하기 위해 약간의 로딩 표시기를 추가하여 앱을 좀 더 멋지게 만들어 보겠습니다.

// apps/hooks/useRecordVoice.ts
import { useEffect, useRef, useState } from 'react';

export function useRecordVoice() {
    const [isRecording, setIsRecording] = useState(false);
    const [mediaRecorder, setMediaRecorder] = useState<MediaRecorder | null>(null);

     const startRecording = async () => {
        if(!navigator?.mediaDevices){
            console.error('Media devices not supported');
            return;
        }

        const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
        const mediaRecorder = new MediaRecorder(stream);
        setIsRecording(true)
        setMediaRecorder(mediaRecorder);
        mediaRecorder.start(0)
    }

    const stopRecording = () =>{
        if(mediaRecorder) {
            setIsRecording(false)
            mediaRecorder.stop();
        }
    }

  return {
    isRecording,
    startRecording,
    stopRecording,
  }
}

결론

이 블로그 게시물에서는 여러 AI 모델을 결합하여 목표 달성에 어떻게 도움이 되는지 확인했습니다. 우리는 Llama 3.1과 같은 AI 모델을 로컬에서 실행하고 이를 Next.js 앱에서 사용하는 방법을 배웠습니다. 또한 이러한 모델에 오디오를 보내고 응답을 스트리밍하여 사용자에게 오디오를 재생하는 방법도 알아냈습니다.

이것은 AI를 사용할 수 있는 다양한 방법 중 하나일 뿐입니다. 가능성은 무궁무진합니다. AI 모델은 한때 그러한 품질로 달성하기 어려웠던 것들을 만들 수 있게 해주는 놀라운 도구입니다. 읽어주셔서 감사합니다. 이제 AI로 놀라운 것을 만들 차례입니다!

GitHub에서 전체 데모를 찾을 수 있습니다. Next.js를 사용하여 Whisper TTS 및 Ollama를 갖춘 AI Assistant

위 내용은 Next.js를 사용하여 OpenAI, Vercel AI SDK 및 Ollama를 사용하여 AI 도우미를 구축하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!