"当你凝视 OpenAI 的深渊,它也在盯着你的 API Key。" ------ 编程尼采(伪)
🌍 前言:让你的前端会思考
在人类语言的浩瀚宇宙中,我们用键盘敲出代码,不再只是和浏览器谈情说爱,而是准备召唤一位会写诗、能作画、擅解人生困惑的"电子贤者"------OpenAI。
让我们一步步把这位贵客请进我们 humble 的前端世界。
🧪 一、准备工作:获取你的 OpenAI 密钥
🪪 API Key 是什么?
这就像是你进宫见 GPT 的"金牌通行证"。没有它,你只是个喧哗的 JavaScript 函数,无法唤醒任何神经网络的灵魂。
📜 获取流程:
- 访问 platform.openai.com/account/api...
- 登录 OpenAI 账号
- 生成一个 Secret API Key(记得复制一次就好,不会再显示)
- 将其安全地放进你的
.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 参数的前端工程师
📚 延伸阅读
- OpenAI 官方文档
- LangChain.js:AI 的数据处理管家
- Chatbot UI:前端集成的最佳范本