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

"当你凝视 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 文件中:
ini 复制代码
OPENAI_API_KEY=sk-xxxxx

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


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

让我们写一个小程序,像一个羞涩的少年,对 GPT 低语:"今天天气真好,你怎么看?"

📦 安装官方 SDK

复制代码
npm install openai

或使用 CDN:

xml 复制代码
<script src="https://cdn.jsdelivr.net/npm/openai"></script>

✍️ 使用 Fetch(不依赖 SDK 的方式)

php 复制代码
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;
}

☎️ 调用它:

ini 复制代码
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 流式处理示例:

php 复制代码
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)

javascript 复制代码
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 参数的前端工程师


📚 延伸阅读

相关推荐
素界UI设计1 小时前
开源网页生态掘金:从Bootstrap二次开发到行业专属组件库的技术变现
前端·开源·bootstrap
潘小安1 小时前
【译】六个开发高手使用的 css 动画秘诀
前端·css·性能优化
前端开发爱好者1 小时前
尤雨溪官宣:Vite 历史性的一刻!超越 Webpack!
前端·javascript·vite
前端开发爱好者1 小时前
Vue3 "抛弃" Axios !用上了 专属请求库!
前端·javascript·vue.js
前端开发爱好者1 小时前
"Lodash" 的终极版!Vue、React 通杀!
前端·javascript·全栈
前端开发爱好者1 小时前
TanStack:不止于 Vue!一个库,真·通杀所有框架!
前端·javascript·vue.js
curdcv_po1 小时前
Three.js,给纹理,设颜色空间
前端
站大爷IP1 小时前
HTTPS代理抓包完全攻略:工具、配置与高级技巧
前端
洛卡卡了1 小时前
“改个配置还要发版?”搞个配置后台不好吗
前端·后端·架构
林太白2 小时前
CommonJS和ES Modules篇
前端·面试