别再把代码喂给 OpenAI 了！用 Ollama 在本地“养”一只会写代码的羊驼，安全又免费

生椰丝绒拿铁
6 阅读5分钟

引子：你的代码，正在被谁“偷看”？

想象一下：你辛辛苦苦写的前端组件、业务逻辑、甚至公司内部的设计稿……一股脑上传给了某 AI 工具，只为了让它帮你生成几行 HTML。
听起来很高效？但你有没有想过——这些数据，可能正躺在某个硅谷服务器的日志里，被训练成下一个“超级模型”的养料？

在 ToB（企业级）场景中，这可不是小事。数据安全 = 生命线。
于是，越来越多开发者开始思考：能不能把大模型“请”到自己电脑上，关起门来干活？

答案是：能！而且比你想象的简单得多。

今天，就带你用 Ollama + React，在本地“养”一只会写代码的开源羊驼（Llama），不联网、不上传、不收费，还能调教它听你的话！

什么是 Ollama？—— 你的私人 AI 饲养员

Ollama 不是模型，而是模型的“饲养工具” 。

你可以把它理解为一个 本地大模型运行时。它支持主流开源模型（如 Llama 3、Qwen、Deepseek、Gemma 等），只需一行命令：

ollama pull qwen2.5:0.5b

就能把一个轻量级但聪明的模型下载到本地。再运行：

ollama run qwen2.5:0.5b

它就会在 http://localhost:11434 启动一个 兼容 OpenAI API 的服务！这意味着——你现有的任何调用 OpenAI 的代码，几乎不用改，就能无缝切换到本地模型！

是不是有点像：把 ChatGPT 搬回了家，还断了网，只给你一个人用？

为什么选开源模型？安全 + 自主 + 免费！

对比项闭源模型（如 GPT-4、Claude）开源模型（如 Qwen、Llama 3）
数据是否上传✅ 是（存在隐私风险）❌ 否（完全本地运行）
是否收费💰 按 token 计费🆓 免费（只要你有硬件）
能否微调❌ 不能✅ 可以（私有化部署+定制）
响应速度⏳ 依赖网络⚡ 本地直连，超快

尤其适合：企业内网开发、敏感项目、离线环境、或单纯不想被“监控”的程序员。

实战：用 React + Ollama 搭一个本地聊天机器人

我们来做一个极简但完整的本地 AI 聊天界面，所有对话都在你电脑里完成，不出内网一步！

第一步：启动 Ollama 服务

确保你已安装 Ollama，然后拉取一个轻量模型（比如 Qwen2.5 0.5B，仅需 1GB 内存）：

ollama pull qwen2.5:0.5b
ollama serve  # 默认监听 11434 端口

💡 提示：0.5B 模型虽小，但写个 React 组件、解释代码、回答技术问题完全够用！对普通开发者来说，够用就是最好的。

第二步：封装 API 调用（兼容 OpenAI）

Ollama 的 /v1/chat/completions 接口和 OpenAI 一模一样！我们可以用 axios 轻松调用：

// api/ollamaApi.js
import axios from "axios";

const ollamaApi = axios.create({
  baseURL: 'http://localhost:11434/v1',
  headers: {
    'Authorization': 'Bearer ollama', // Ollama 默认 token
    'Content-Type': 'application/json'
  }
});

export const chatCompletions = async (messages) => {
  try {
    const res = await ollamaApi.post('/chat/completions', {
      model: 'qwen2.5:0.5b',
      messages,
      stream: false,
      temperature: 0.7
    });
    return res.data.choices[0].message.content;
  } catch (err) {
    console.error('本地模型请求失败:', err);
    throw err;
  }
};

第三步：React Hook 管理聊天状态

// hooks/useLLM.js
import { useState } from 'react';
import { chatCompletions } from '../api/ollamaApi';

export const useLLM = () => {
  const [messages, setMessages] = useState([
    { role: 'assistant', content: '你好！我是本地 Qwen，绝不上传你的代码 😎' }
  ]);
  const [loading, setLoading] = useState(false);

  const sendMessage = async (userMessage) => {
    const newMessages = [...messages, { role: 'user', content: userMessage }];
    setMessages(newMessages);
    setLoading(true);

    try {
      const reply = await chatCompletions(newMessages);
      setMessages(prev => [...prev, { role: 'assistant', content: reply }]);
    } catch (err) {
      setMessages(prev => [...prev, { role: 'assistant', content: '哎呀，本地羊驼打盹了…' }]);
    } finally {
      setLoading(false);
    }
  };

  const resetChat = () => setMessages([
    { role: 'assistant', content: '新对话开始！这次要问什么？' }
  ]);

  return { messages, loading, sendMessage, resetChat };
};

第四步：UI 渲染（Tailwind + 简洁设计）

// App.jsx
export default function App() {
  const [inputValue, setInputValue] = useState('');
  const { messages, loading, sendMessage } = useLLM();

  const handleSend = (e) => {
    e.preventDefault();
    if (!inputValue.trim()) return;
    sendMessage(inputValue);
    setInputValue('');
  };

  return (
    <div className="min-h-screen bg-gradient-to-br from-gray-50 to-blue-50 p-4">
      <div className="max-w-3xl mx-auto">
        <h1 className="text-3xl font-bold text-center my-6 text-indigo-700">
          🦙 本地羊驼聊天室（安全版）
        </h1>
        
        <div className="bg-white rounded-xl shadow-lg h-[70vh] overflow-y-auto p-4 mb-4">
          {messages.map((msg, i) => (
            <div key={i} className={`mb-4 ${msg.role === 'user' ? 'text-right' : 'text-left'}`}>
              <span className={`inline-block px-4 py-2 rounded-lg ${
                msg.role === 'user' 
                  ? 'bg-blue-500 text-white' 
                  : 'bg-gray-200 text-gray-800'
              }`}>
                {msg.content}
              </span>
            </div>
          ))}
          {loading && <div className="text-gray-500">羊驼正在思考…</div>}
        </div>

        <form onSubmit={handleSend} className="flex gap-2">
          <input
            value={inputValue}
            onChange={e => setInputValue(e.target.value)}
            placeholder="比如：帮我写一个计数器组件"
            disabled={loading}
            className="flex-1 border rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500"
          />
          <button
            type="submit"
            disabled={loading || !inputValue.trim()}
            className="bg-indigo-600 text-white px-6 rounded-lg hover:bg-indigo-700 disabled:opacity-50"
          >
            发送
          </button>
        </form>
      </div>
    </div>
  );
}

硬件要求？其实没你想的那么高！

很多人以为跑大模型=必须 RTX 4090。其实：

模型大小推荐配置能做什么
0.5B ~ 2B8GB 内存 + 无 GPU回答问题、写简单代码、文档总结
7B16GB 内存 或 6GB 显存 GPU较复杂编程、逻辑推理
13B+32GB+ 内存 或 高端 GPU接近 GPT-3.5 水平

✅ Qwen2.5:0.5b 在 M1 Mac / 普通 Windows 笔记本上都能流畅运行！

安全思考：为什么“本地化”是未来？

  • 企业合规：金融、医疗、政府项目严禁数据外传。
  • 知识产权保护：你的核心算法、产品设计，不该成为别人模型的训练数据。
  • 可控性：想让它学公司内部术语？微调一下就行。
  • 离线可用：飞机上、野外、内网环境，照样用 AI！

正如 Linus 所说：“Talk is cheap. Show me the code.”
而现在，Show me the model —— 最好是在我自己的机器上运行的。

结语：你的 AI，应该由你掌控

Ollama 的出现，让“个人拥有 AI”不再是口号。
它像一把钥匙，打开了 开源、安全、自主 的 AI 新世界。

下次当你想用 AI 生成代码时，不妨先问问自己：

“这段代码，值得我信任一个远在千里的黑盒吗？”

如果答案是否定的——
那就装个 Ollama，在本地养一只听话的羊驼吧。它不会偷看你的代码，还会乖乖帮你写 React。

avatar
文章
阅读
粉丝