介绍

随着当今人工智能的进步，您可以轻松地在计算机上设置生成式人工智能模型来创建聊天机器人。

在本文中，我们将了解如何使用 Ollama 和 Next.js 在系统上设置聊天机器人

设置奥拉马

让我们首先在我们的系统上设置 Ollama。访问 ollama.com 并下载适合您操作系统的版本。这将允许我们在终端/命令提示符中使用 ollama 命令。

使用命令 ollama -v 检查 Ollama 版本
查看 Ollama 库页面上的模型列表。

下载并运行模型

要下载并运行模型，请运行命令 ollama run
示例： ollama run llama3.1 或 ollama run gemma2

您将能够直接在终端中与模特聊天。

设置网络应用程序

Next.js 的基本设置

• 下载并安装最新版本的 Node.js
• 导航到所需的文件夹并运行 npx create-next-app@latest 以生成 Next.js 项目。
• 它将询问一些问题来生成样板代码。对于本教程，我们将保留所有内容默认值。
• 在您选择的代码编辑器中打开新创建的项目。我们将使用 VS Code。

安装依赖项

需要安装几个 npm 软件包才能使用 ollama。

1. 来自 vercel 的 ai。
2. ollama Ollama JavaScript 库提供了将 JavaScript 项目与 Ollama 集成的最简单方法。
3. ollama-ai-provider 帮助将 ai 和 ollama 连接在一起。
4. React-Markdown 聊天结果将以 Markdown 风格进行格式化，为了解析 Markdown，我们将使用 React-Markdown 包。

要安装这些依赖项，请运行 npm i ai ollama ollama-ai-provider。

创建聊天页面

app/src下有一个名为page.tsx的文件。

我们把里面的所有东西都去掉，从基本的功能组件开始：

src/app/page.tsx

export default function Home() {
  return (
    

        {/* Code here... */}
    
  );
}

让我们从ai/react和react-markdown导入useChat钩子开始

"use client";
import { useChat } from "ai/react";
import Markdown from "react-markdown";

因为我们使用了钩子，所以我们需要将此页面转换为客户端组件。

提示：您可以创建一个单独的聊天组件，并在 page.tsx 中调用它来限制客户端组件的使用。

在组件中从useChat钩子获取消息、输入、handleInputChange和handleSubmit。

    const { messages, input, handleInputChange, handleSubmit } = useChat();

在 JSX 中，创建一个输入表单来获取用户输入以启动对话。

对此的好处是我们不需要纠正处理程序或维护输入值的状态，useChat 钩子为我们提供了它。

我们可以通过循环消息数组来显示消息。

    messages.map((m, i) => (
{m}
)

基于发件人角色的样式版本如下所示：

  

    

      {messages.length ? (
        messages.map((m, i) => {
          return m.role === "user" ? (
            

              You
              

                {m.content}
            
          ) : (
            

              AI
              

                {m.content}
            
          );
        })
      ) : (
        

          
Local AI Chat
        
      )}
    
  

让我们看一下整个文件
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 (
        

              

                
            
        
    );
}

至此，前端部分就完成了。现在让我们处理 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();
}

上面的代码基本上是使用 ollama 和 vercel ai 将数据流式传输回来作为响应。

• createOllama 创建 ollama 的实例，它将与系统上安装的模型进行通信。
• POST 函数是 /api/chat 端点上使用 post 方法的路由处理程序。
• 请求正文包含所有先前消息的列表。因此最好限制它，否则性能会随着时间的推移而下降。 在此示例中，ollama 函数以“llama3.1”为模型，根据 messages 数组生成响应。

您的系统上的生成式人工智能

运行 npm run dev 以开发模式启动服务器。
打开浏览器，进入localhost:3000查看结果。
如果一切配置正确，您将能够与您自己的聊天机器人交谈。

您可以在这里找到源代码：https://github.com/parasbansal/ai-chat

如果您有任何问题请在评论中告诉我，我会尽力回答。