登录
React 牵手 Ollama：本地 AI 服务对接实战指南
在这个 AI 大模型如雨后春笋般涌现的时代，让前端应用与本地大模型来一场 “亲密接触”，就像给你的 React 应用装上一个 “本地智囊团”。今天，我们就来实现一个看似高深实则简单的需求：用 React 对接本地 Ollama 服务。这就好比教两个素未谋面的朋友打招呼，Ollama 是守在本地的 “AI 达人”，React 则是活泼的 “前端信使”，我们要做的就是搭建它们之间的沟通桥梁。
底层原理：通信的奥秘
在开始编码前，我们得先搞明白这两个 “朋友” 是如何交流的。Ollama 作为本地运行的大模型服务，会在你的电脑上开启一个 “通信窗口”—— 也就是 HTTP 服务器，默认情况下这个窗口的地址是 http://localhost:11434。而 React 应用要做的，就是通过 HTTP 协议向这个窗口发送 “消息”（请求），并等待 “回复”（响应）。
这就像你去餐厅吃饭，Ollama 是后厨的厨师，React 是前厅的服务员，http://localhost:11434 就是厨房的传菜口。服务员把顾客的订单（请求）通过传菜口递给厨师，厨师做好菜后再通过传菜口把菜（响应）送回给服务员。
准备工作：工具就位
在正式开始前，我们需要准备好 “食材” 和 “厨具”：
- 安装 Ollama：去 Ollama 官网下载并安装，这一步就像把厨师请到厨房里。安装完成后，打开命令行，输入 ollama run llama3 来启动一个基础模型，这里我们用 llama3 作为示例，你也可以换成其他喜欢的模型。
- 创建 React 应用：如果你还没有 React 项目，可以用 Create React App 快速创建一个，命令是 npx create-react-app ollama-demo，这就像搭建好前厅的场地。
代码实现：搭建沟通桥梁
一切准备就绪，现在我们来编写核心代码，实现 React 与 Ollama 的通信。
首先，我们需要一个发送请求的函数。在 React 组件中，我们可以用 fetch API 来发送 HTTP 请求到 Ollama 的 API 端点。Ollama 的聊天接口是 http://localhost:11434/api/chat，我们需要向这个接口发送包含模型名称和消息内容的 JSON 数据。
import { useState } from 'react';
function OllamaChat() {
const [message, setMessage] = useState('');
const [response, setResponse] = useState('');
const sendMessage = async () => {
try {
// 构建请求体，指定模型和消息
const requestBody = {
model: 'llama3',
messages: [{ role: 'user', content: message }],
stream: false // 不使用流式响应，等待完整回复
};
// 发送 POST 请求到 Ollama 的聊天接口
const response = await fetch('http://localhost:11434/api/chat', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(requestBody),
});
// 解析响应数据
const data = await response.json();
// 提取并显示 AI 的回复
if (data.message && data.message.content) {
setResponse(data.message.content);
}
} catch (error) {
console.error('与 Ollama 通信出错：', error);
setResponse('抱歉，无法连接到 AI 服务，请检查 Ollama 是否正在运行。');
}
};
return (
<div style={{ maxWidth: '600px', margin: '0 auto', padding: '20px' }}>
<h2>React × Ollama 聊天 Demo</h2>
<div style={{ marginBottom: '20px' }}>
<input
type="text"
value={message}
onChange={(e) => setMessage(e.target.value)}
placeholder="输入你的问题..."
style={{ width: '70%', padding: '8px', marginRight: '10px' }}
/>
<button onClick={sendMessage} style={{ padding: '8px 16px' }}>
发送
</button>
</div>
<div style={{ border: '1px solid #ccc', padding: '10px', borderRadius: '4px' }}>
<h3>AI 回复：</h3>
<p>{response}</p>
</div>
</div>
);
}
export default OllamaChat;
代码解析：庖丁解牛
让我们来仔细看看这段代码的工作原理，就像拆解一台精密的机器。
- 状态管理：我们用 useState 钩子创建了两个状态变量，message 用来存储用户输入的消息，response 用来存储 AI 的回复。这就像两个储物盒，分别存放要发送的消息和收到的回复。
- 发送消息函数：sendMessage 是核心函数，它通过 fetch 发送请求到 Ollama。请求体中指定了要使用的模型（llama3）和用户的消息。这里的 stream: false 表示我们希望一次性收到完整的回复，而不是逐字接收。
- 处理响应：当 Ollama 处理完请求后，会返回一个 JSON 格式的响应。我们从中提取出 AI 的回复内容，并更新 response 状态，这样页面上就会显示出 AI 的回答了。
- 错误处理：如果通信过程中出现错误（比如 Ollama 没有运行），我们会捕获错误并显示友好的提示信息。
运行测试：见证奇迹的时刻
现在，让我们来测试一下这个 Demo 是否能正常工作。
- 确保 Ollama 正在运行：打开命令行，输入 ollama run llama3，等待模型加载完成。
- 启动 React 应用：在项目目录下运行 npm start，打开浏览器访问 http://localhost:3000。
- 发送消息：在输入框中输入一个问题，比如 “你好，Ollama！”，然后点击 “发送” 按钮。稍等片刻，你应该就能看到 AI 的回复了。
如果一切顺利，你会看到 React 应用和 Ollama 成功 “牵手”，完成了一次愉快的对话。如果遇到问题，先检查 Ollama 是否正在正常运行，模型名称是否正确，网络连接是否通畅。
进阶思考：拓展可能性
这个简单的 Demo 只是一个开始，就像我们只是搭建了一座简陋的小桥。你可以基于这个基础进行很多拓展：
- 实现流式响应：将 stream 设置为 true，然后处理流式响应，让 AI 的回复像打字一样逐字显示，提升用户体验。
- 增加聊天历史：用状态管理存储聊天记录，让对话可以上下文连贯。
- 切换不同模型：在界面上增加模型选择功能，让用户可以根据需要切换不同的 Ollama 模型。
- 优化错误处理：增加更详细的错误提示，帮助用户排查问题。
总结：本地 AI 的魅力
通过这个 Demo，我们展示了 React 对接本地 Ollama 服务的全过程。相比于调用云端的 AI 服务，本地部署的 Ollama 具有隐私性好、响应速度快、无需网络连接等优点，就像把 AI 助手请到了自己家里，随时可以交流。
希望这篇文章能帮助你理解 React 与本地 AI 服务对接的原理和方法。现在，你可以基于这个基础，开发出更强大、更有趣的本地 AI 应用了。让我们一起探索前端与 AI 结合的无限可能吧！
