🤖 接入 AI 服务之「OpenAI 篇」——一场与神经网络谈心的仪式

LeonGao
219 阅读2分钟

“当你凝视 OpenAI 的深渊，它也在盯着你的 API Key。” —— 编程尼采（伪）

🌍 前言：让你的前端会思考

在人类语言的浩瀚宇宙中，我们用键盘敲出代码，不再只是和浏览器谈情说爱，而是准备召唤一位会写诗、能作画、擅解人生困惑的“电子贤者”——OpenAI。

让我们一步步把这位贵客请进我们 humble 的前端世界。

🧪 一、准备工作：获取你的 OpenAI 密钥

🪪 API Key 是什么？

这就像是你进宫见 GPT 的“金牌通行证”。没有它，你只是个喧哗的 JavaScript 函数，无法唤醒任何神经网络的灵魂。

📜 获取流程：

  1. 访问 platform.openai.com/account/api…
  2. 登录 OpenAI 账号
  3. 生成一个 Secret API Key（记得复制一次就好，不会再显示）
  4. 将其安全地放进你的 .env.local 文件中：
OPENAI_API_KEY=sk-xxxxx

不要上传到 GitHub，除非你想让全世界都免费用你的额度。

🔌 二、最小调用范例：用 JavaScript 与 GPT 交心

让我们写一个小程序，像一个羞涩的少年，对 GPT 低语：“今天天气真好，你怎么看？”

📦 安装官方 SDK

npm install openai

或使用 CDN：

<script src="https://cdn.jsdelivr.net/npm/openai"></script>

✍️ 使用 Fetch（不依赖 SDK 的方式）

const apiKey = process.env.OPENAI_API_KEY;

async function chatWithGPT(prompt) {
  const response = await fetch('https://api.openai.com/v1/chat/completions', {
    method: 'POST',
    headers: {
      'Authorization': `Bearer ${apiKey}`,
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({
      model: 'gpt-3.5-turbo',
      messages: [{ role: 'user', content: prompt }],
      temperature: 0.7,
    }),
  });

  const data = await response.json();
  return data.choices[0].message.content;
}

☎️ 调用它：

chatWithGPT("今天天气真好，你怎么看？").then(reply => {
  console.log("GPT says:", reply);
});

🧠 三、重要参数详解（别糊涂用！）

参数含义类比
model使用的模型名称“你请的是 GPT-3.5 还是 GPT-4？”
messages对话上下文数组模拟连续对话，有来有回
temperature创造力值（0~2）越高越发散，像喝醉的诗人
max_tokens返回字数上限怕 GPT 话太多，设个闸门

🔁 四、支持流式输出（Stream）体验“实时思考”

GPT 在打字的时候也许和你一样需要一点时间。让我们用「流」的方式把思绪一滴一滴地喂到界面上，像煮茶一般。

以下是 fetch + ReadableStream 流式处理示例：

async function streamChat(prompt, onChunk) {
  const response = await fetch('https://api.openai.com/v1/chat/completions', {
    method: 'POST',
    headers: {
      'Authorization': `Bearer ${apiKey}`,
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({
      model: 'gpt-3.5-turbo',
      messages: [{ role: 'user', content: prompt }],
      stream: true,
    }),
  });

  const reader = response.body.getReader();
  const decoder = new TextDecoder('utf-8');
  let content = '';

  while (true) {
    const { done, value } = await reader.read();
    if (done) break;
    const chunk = decoder.decode(value);
    content += chunk;
    onChunk(chunk);
  }

  return content;
}

你可以在前端 setState() 中一边加载，一边展示，像 GPT 在你耳边低语一样真实。

🛡️ 五、安全注意事项

  • 不要暴露 API Key！ ：务必只在服务器或代理端使用，前端可通过 /api/chat 中转。
  • 设限：添加用户身份识别与请求频率控制（否则服务器负担不起 GPT 的“健谈”）。
  • 失败处理：记得 .catch()，不要让 GPT 报错把用户吓跑。

🧙‍♂️ 六、封装一个 React/Vue Hook？Yes！

这是将 AI 接入“组件化”的终极哲学，像写诗一样写 Hook。

🎣 React 示例（useChat.js）

import { useState } from 'react';

export function useChat() {
  const [messages, setMessages] = useState([]);
  const [loading, setLoading] = useState(false);

  async function sendMessage(content) {
    setLoading(true);
    const reply = await chatWithGPT(content);
    setMessages(prev => [...prev, { role: 'user', content }, { role: 'assistant', content: reply }]);
    setLoading(false);
  }

  return { messages, sendMessage, loading };
}

🎭 后记：人类与 AI 的浪漫合作

接入 OpenAI，不只是技术活，它是一次语言与逻辑的合谋，是一次计算机科学与人文想象的亲密接触。

正如某位工程师曾说的：

“我不再写死板的逻辑，我和模型谈恋爱。”
—— 来自某个凌晨两点还在调 temperature 参数的前端工程师

📚 延伸阅读

avatar
文章
阅读
粉丝