소개
오늘날 AI가 발전함에 따라 컴퓨터에 생성 AI 모델을 설정하여 챗봇을 만드는 것이 쉬워졌습니다.
이 문서에서는 Ollama와 Next.js를 사용하여 시스템에 챗봇을 설정하는 방법을 살펴보겠습니다.
Ollama 설정
먼저 시스템에 Ollama를 설정해 보겠습니다. ollama.com을ollama 방문하여 OS에 맞게 다운로드합니다. 그러면 터미널/명령 프롬프트에서 명령을 사용할 수 있습니다 .
명령을 사용하여 Ollama 버전을 확인하세요. Ollama 라이브러리 페이지ollama -v
에서 모델 목록을 확인하세요 .
모델을 다운로드하고 실행하세요
모델을 다운로드하고 실행하려면 다음 명령을 실행하세요. ollama run <model_name>
예: ollama run llama3.1또는ollama run gemma2
터미널에서 바로 모델과 채팅할 수 있습니다.
웹 애플리케이션 설정
Next.js에 대한 기본 설정
- 최신 버전의 Node.js를 다운로드하고 설치하세요
- 원하는 폴더로 이동한 후
npx create-next-app@latestNext.js 프로젝트를 생성합니다. - 보일러플레이트 코드를 생성하기 위해 몇 가지 질문을 할 것입니다. 이 튜토리얼에서는 모든 것을 기본값으로 유지합니다.
- 선택한 코드 편집기에서 새로 만든 프로젝트를 엽니다. VS Code를 사용할 것입니다.
종속성 설치
ollama를 사용하려면 설치해야 하는 npm 패키지가 몇 가지 있습니다.
- vercel의 ai입니다 .
- Ollama JavaScript 라이브러리는 JavaScript 프로젝트를 Ollama와 통합하는 가장 쉬운 방법을 제공합니다.
- ollama-ai-provider는 연결
ai과ollama협력을 도와줍니다. - react-markdown 채팅 결과는 마크다운 스타일로 포맷되며, 마크다운을 파싱하려면 react-markdown 패키지를 사용할 것입니다.
이러한 종속성을 설치하려면 .을 실행하세요 npm i ai ollama ollama-ai-provider.
채팅 페이지 만들기
그 아래에는 . app/src이라는 파일이 있습니다 page.tsx.
모든 것을 제거하고 기본적인 기능 구성 요소부터 시작해 보겠습니다.
src/app/page.tsx
export default function Home() {
return (
<main className="flex min-h-screen flex-col items-center justify-start p-24">
{/* Code here... */}
</main>
);
}
useChat먼저 hook을 가져오는 것으로 시작해 보겠습니다 ai/react.react-markdown
"use client";
import { useChat } from "ai/react";
import Markdown from "react-markdown";
후크를 사용하고 있으므로 이 페이지를 클라이언트 컴포넌트로 변환해야 합니다.
팁 : 채팅을 위한 별도의 구성 요소를 만들고 이를 호출하여
page.tsx클라이언트 구성 요소 사용을 제한할 수 있습니다.
구성 요소에서 get messages, input, handleInputChangefrom handleSubmituseChat hook을 사용합니다.
const { messages, input, handleInputChange, handleSubmit } = useChat();
JSX에서 대화를 시작하기 위해 사용자 입력을 받는 입력 양식을 만듭니다.
<form onSubmit={handleSubmit} className="w-full px-3 py-2">
<input
className="w-full px-3 py-2 border border-gray-700 bg-transparent rounded-lg text-neutral-200"
value={input}
placeholder="Ask me anything..."
onChange={handleInputChange}
/>
</form>
이것의 장점은 우리가 핸들러를 바로잡거나 입력 값에 대한 상태를 유지할 필요가 없고, useChat후크가 그것을 우리에게 제공한다는 것입니다.
메시지 배열을 반복하여 메시지를 표시할 수 있습니다.
messages.map((m, i) => (<div key={i}>{m}</div>)
보낸 사람의 역할에 따른 스타일 버전은 다음과 같습니다.
<div
className="min-h-[50vh] h-[50vh] max-h-[50vh] overflow-y-auto p-4"
>
<div className="min-h-full flex-1 flex flex-col justify-end gap-2 w-full pb-4">
{messages.length ? (
messages.map((m, i) => {
return m.role === "user" ? (
<div key={i} className="w-full flex flex-col gap-2 items-end">
<span className="px-2">You</span>
<div className="flex flex-col items-center px-4 py-2 max-w-[90%] bg-orange-700/50 rounded-lg text-neutral-200 whitespace-pre-wrap">
<Markdown>{m.content}</Markdown>
</div>
</div>
) : (
<div key={i} className="w-full flex flex-col gap-2 items-start">
<span className="px-2">AI</span>
<div className="flex flex-col max-w-[90%] px-4 py-2 bg-indigo-700/50 rounded-lg text-neutral-200 whitespace-pre-wrap">
<Markdown>{m.content}</Markdown>
</div>
</div>
);
})
) : (
<div className="text-center flex-1 flex items-center justify-center text-neutral-500 text-4xl">
<h1>Local AI Chat</h1>
</div>
)}
</div>
</div>
전체 파일을 살펴보자
src/app/page.tsx
"use client";
import { useChat } from "ai/react";
import Markdown from "react-markdown";
export default function Home() {
const { messages, input, handleInputChange, handleSubmit } = useChat();
return (
<main className="flex min-h-screen flex-col items-center justify-start p-24">
<div className="flex flex-col w-full max-w-lg rounded-lg bg-white/10">
<form onSubmit={handleSubmit} className="w-full px-3 py-2">
<input
className="w-full px-3 py-2 border border-gray-700 bg-transparent rounded-lg text-neutral-200"
value={input}
placeholder="Ask me anything..."
onChange={handleInputChange}
/>
</form>
</div>
</main>
);
}
이것으로 프런트엔드 부분은 완료되었습니다. 이제 API를 처리해 보겠습니다.
API 처리
route.ts먼저 inside를 만들어 보겠습니다 app/api/chat.
Next.js 명명 규칙에 따라 엔드포인트에서 요청을 처리할 수 있습니다 localhost:3000/api/chat.
src/app/api/chat/route.ts
import { createOllama } from "ollama-ai-provider";
import { streamText } from "ai";
const ollama = createOllama();
export async function POST(req: Request) {
const { messages } = await req.json();
const result = await streamText({
model: ollama("llama3.1"),
messages,
});
return result.toDataStreamResponse();
}
위 코드는 기본적으로 ollama와 vercel ai를 사용하여 데이터를 응답으로 스트리밍합니다.
createOllama시스템에 설치된 모델과 통신할 ollama 인스턴스를 생성합니다.POST/api/chat함수는 메서드를 갖춘 엔드포인트 의 경로 핸들러입니다post.- 요청 본문에는 이전 모든 메시지 목록이 들어 있습니다. 따라서 제한하는 것이 좋습니다. 그렇지 않으면 시간이 지남에 따라 성능이 저하됩니다. 이 예에서 ollama 함수는 "llama3.1"을 모델로 사용하여 메시지 배열을 기반으로 응답을 생성합니다.
시스템의 생성 AI
npm run dev개발 모드에서 서버를 시작하려면 실행하세요 .
브라우저를 열고 localhost:3000결과를 보려면 로 이동하세요.
모든 것이 제대로 구성되었다면, 당신은 당신만의 챗봇과 대화할 수 있을 것입니다.
소스 코드는 여기에서 확인할 수 있습니다: https://github.com/parasbansal/ai-chat ai-chat-main.zip
질문이 있으면 댓글로 남겨주세요. 답변하도록 노력하겠습니다.
