将网站变成AI助手：ChatGPT API on JavaScript

为什么你的网站需要大脑？ChatGPT API + JavaScript

想象一下：用户访问你的网站，那里不仅仅是一个静态页面，而是一个活生生的助手。它编写代码、翻译文本、生成创意，或者只是进行对话。听起来像科幻小说？实际上，这只需要几十行JavaScript代码和一个向ChatGPT发送的API请求。

在本文中，我们将探讨如何集成ChatGPT API on JavaScript——从注册密钥到创建一个完整的聊天机器人。您将学习如何发送请求、处理错误以及最大限度地利用神经网络。开始吧！

什么是ChatGPT API以及为什么需要它

OpenAI API 是您的代码与大型语言模型（GPT-4、GPT-3.5）之间的桥梁。您发送文本（提示），模型返回生成的响应。一切都很简单，但可能性是无限的。

在JavaScript中集成特别方便：您可以在浏览器中使用fetch，或者在服务器端（Node.js）使用axios / node-fetch。无需复杂的库——只需要HTTP和JSON。

在像PythonLib这样的教育网站上，这可以用于：

\n
• 交互式助手——回答关于Python的问题。
\n
• 代码生成器——根据用户请求编写示例。
\n
• 作业检查——分析学生的代码。
\n
• 技术支持聊天机器人——全天候响应。
\n

步骤 1. 获取OpenAI API密钥

没有密钥是不行的。访问 platform.openai.com，注册并进入API Keys部分。点击Create new secret key——立即复制它。请将密钥保密，不要将其插入客户端代码中！

对于测试，免费余额（通常为$5-18）就足够了。但请记住：对模型的请求需要付费，尽管费用很低。

步骤 2. 在JavaScript (Node.js) 中发送最简单的请求

最快尝试的方法是编写一个Node.js脚本。安装node-fetch（或在Node 18+中使用内置的fetch）。

// chatgpt.js\nimport fetch from 'node-fetch';\n\nconst API_KEY = 'your_secret_key';\nconst API_URL = 'https://api.openai.com/v1/chat/completions';\n\nasync function askChatGPT(prompt) {\n  const response = await fetch(API_URL, {\n    method: 'POST',\n    headers: {\n      'Content-Type': 'application/json',\n      'Authorization': `Bearer ${API_KEY}`\n    },\n    body: JSON.stringify({\n      model: 'gpt-3.5-turbo', // 或 gpt-4\n      messages: [\n        { role: 'user', content: prompt }\n      ],\n      temperature: 0.7,\n      max_tokens: 500\n    })\n  });\n\n  const data = await response.json();\n  return data.choices[0].message.content;\n}\n\n// 使用\nconst answer = await askChatGPT('用Python写一个排序列表的函数');\nconsole.log(answer);

运行 node chatgpt.js —— 神经网络将用代码回答你。太神奇了！

解析请求结构

在请求体中，我们传递：

\n
• model —— GPT的版本（gpt-3.5-turbo更快更便宜，gpt-4更智能）。
\n
• messages —— 消息数组。可以添加system（模型指令）、assistant（上下文）和user。
\n
• temperature —— 回答的创造性（0 —— 严格事实，1 —— 创意）。
\n
• max_tokens —— 回答的最大令牌数（1个令牌 ≈ 0.75个单词）。
\n

步骤 3. 在浏览器中集成ChatGPT API on JavaScript

这里有一个注意事项：永远不要从客户端代码发送API密钥——它会被盗。请使用服务器端代理（Node.js、Python）或Edge Functions。

但为了演示