Ollama と Next.js を使用したローカル GPT-jsチュートリアル-php.cn

Ollama と Next.js を使用したローカル GPT

PHPz

リリース： 2024-08-16 06:16:03

オリジナル

704 人が閲覧しました

導入

今日の AI の進歩により、コンピューター上で生成 AI モデルをセットアップしてチャットボットを作成するのは簡単です。

この記事では、Ollama と Next.js を使用してシステムにチャットボットをセットアップする方法を説明します

オラマのセットアップ

システムに Ollama をセットアップすることから始めましょう。 ollama.com にアクセスし、お使いの OS に合わせてダウンロードしてください。これにより、ターミナル/コマンドプロンプトで ollam コマンドを使用できるようになります。

コマンド ollama -v を使用して Ollama のバージョンを確認します
Ollama ライブラリページでモデルのリストをチェックしてください。

モデルをダウンロードして実行する

モデルをダウンロードして実行するには、コマンド ollama run を実行します
例: ollama run llama3.1 または ollama run gemma2

ターミナル内でモデルと直接チャットできるようになります。

Local GPT with Ollama and Next.js

Web アプリケーションのセットアップ

Next.js の基本セットアップ

最新バージョンの Node.js をダウンロードしてインストールします
目的のフォルダーに移動し、npx create-next-app@latest を実行して Next.js プロジェクトを生成します。
定型コードを生成するためにいくつかの質問が行われます。このチュートリアルでは、すべてをデフォルトのままにします。
選択したコードエディターで新しく作成したプロジェクトを開きます。 VS Code を使用します。

依存関係のインストール

ollam を使用するためにインストールする必要がある npm パッケージはいくつかあります。

vercelのai。
ollama Ollama JavaScript ライブラリは、JavaScript プロジェクトを Ollama と統合する最も簡単な方法を提供します。
ollama-ai-provider は、ai と ollama を接続するのに役立ちます。
チャットの結果はマークダウンスタイルでフォーマットされ、マークダウンを解析するには、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>
  );
}




</p>
<p>まずは、ai/react と React-Markdown から useChat フックをインポートしてみましょう<br>
</p>

<pre class="brush:php;toolbar:false">"use client";
import { useChat } from "ai/react";
import Markdown from "react-markdown";

ログイン後にコピー

フックを使用しているため、このページをクライアントコンポーネントに変換する必要があります。

ヒント: チャット用に別のコンポーネントを作成し、それを page.tsx で呼び出して、クライアントコンポーネントの使用を制限できます。

コンポーネントでは、useChat フックからメッセージ、input、handleInputChange、handleSubmit を取得します。

    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の処理

まず、app/api/chat 内にroute.tsを作成しましょう。
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();
}

ログイン後にコピー

上記のコードは基本的に ollam と vercel ai を使用して、データを応答としてストリーミングバックします。

createOllama は、システムにインストールされているモデルと通信する ollam のインスタンスを作成します。
POST 関数は、post メソッドを備えた /api/chat エンドポイントのルートハンドラーです。
リクエストの本文には、以前のすべてのメッセージのリストが含まれています。したがって、制限することをお勧めします。制限しないと、時間の経過とともにパフォーマンスが低下します。この例では、ollam 関数は「llama3.1」をモデルとして受け取り、メッセージ配列に基づいて応答を生成します。