젬마2(gemma2) ollama API 이용한 nextJS 사용 방법 | 데이터카페

프론트엔드(Frontend)
code
"use client"
import '@/app/styles/ai.css';
import {useChat} from 'ai/react';
import { SiOpenai } from "react-icons/si";
import { SiChatwoot } from "react-icons/si";

export default function Aichat() {
  const { messages, input, handleSubmit, handleInputChange } = useChat({api: '/api/ai/getAiServiceData'});

  const handleKeyDown = (event:any) => {
    if (event.key === 'Enter') {
      handleSubmit();
  };

  return (
    <div className="AiWrapper">
      <div className="AiMessageWrapper">
        {messages.map(m => (
          <div key={m.id} className ="AiMessage" >
            {m.role === 'user' ? <div><SiChatwoot /></div> : <div><SiOpenai /></div>}
            {m.role === 'user' ? <div><span>{m.content}</span></div>: <div><TypingText text={m.content} /></div>}
          </div>
        ))}
      </div>

      <div className="AiSearchWrapper">
        <div className="AiSearchForm">
          <div className ="AidataSearch"><AI></div>
            <textarea value={input}
                    onChange={handleInputChange}
                    onKeyDown={handleKeyDown}
                    placeholder="메세제 AI..."/>
            <button onClick={handleSubmit}></button>
          <div className ="AidataSearch"></AI></div>
        </div>

        <div className="Aispan">
          <span>AI는 실수를 할 수 있습니다. 중요한 정보를 확인하세요.</span>
        </div>
      </div>

    </div>
  );
}


useChat 설명
 const { messages, input, handleSubmit, handleInputChange } = useChat({api: '/api/ai/getAiServiceData'});


useChat({api: 경로} API 호출 경로를 지정해서 처리하면 되는데 지정을 안할경우 /api/chat 디폴트 경로로 지정 됩니다.

messages : 채팅 메시지 데이터를 배열로 주고 받는 역활을 하고 있습니다.

input : 입력값을 담아서 전달하는 역활은 하고 있습니다.

handleSubmit : 입력 데이터를 서버로 보내는 이벤트 핸들러 입니다.

handleInputChange : 입력 데이터를 제어하기 위한 이벤트 핸들러 입니다.

백엔드(Backend)
code
import { createOllama } from "ollama-ai-provider";
import { streamText } from "ai";

export const runtime = "edge";
const ollama = createOllama({baseURL: `${process.env.NEXT_PUBLIC_OLLAMA_URL}/api`,});

export default async function POST(req: Request) {
  const { messages } = await req.json();

  const result = await streamText({
    model: ollama("gemma2"),
    messages,
    });
    
  return result.toAIStreamResponse();
}


ollama-ai-provider 설명
import { createOllama } from "ollama-ai-provider";
const ollama = createOllama({baseURL: ${process.env.NEXT_PUBLIC_OLLAMA_URL}/api`,});


baseURL : ollama 서버 주소를 입력하면 됩니다. 작성 안하시면 localhost/api 로 처리 됩니다.  

streamText 설명
import { streamText } from "ai";
export const runtime = "edge";
const { messages } = await req.json();
const result = await streamText({model: ollama("gemma2"),messages,});
return result.toAIStreamResponse();


streamText 처리하시면 useChat 클라이언트 단에서 messages 받아서 화면에 보여 줍니다.

젬마2 API 이용한 NextJS 간단한 테스트 화면
- https://www.datacafe.kr/ai