从零开始：调用ChatGPT API构建个性化网页的实战指南

3次阅读

没有评论

共计 1993 个字符，预计需要花费 5 分钟才能阅读完成。

在当今的 Web 开发中，集成 AI 功能已经成为提升用户体验的重要手段。ChatGPT API 的出现，为开发者提供了强大的自然语言处理能力。然而，对于初学者来说，调用 ChatGPT API 并集成到网页中可能会遇到以下问题：

API 密钥管理不当 ：新手常常将 API 密钥硬编码在客户端代码中，导致安全风险。
前后端交互设计不合理 ：直接从前端调用 API 可能导致 CORS 问题，且难以控制请求频率。
响应处理不完善 ：未正确处理 API 返回的流式数据，影响用户体验。
性能优化不足 ：未考虑延迟和并发请求，导致网页响应缓慢。

在集成 ChatGPT API 时，主要有以下几种方式：

纯前端调用 ：简单快捷，但存在 API 密钥暴露的风险，且受限于 CORS 政策。
后端代理调用 ：安全性高，可以隐藏 API 密钥，但需要额外的后端开发工作。
Serverless 函数 ：结合了前后端的优点，适合中小型项目。

对于初学者，推荐使用后端代理调用的方式，既能保证安全性，又便于扩展。

首先，你需要访问 OpenAI 的官方网站，注册账号并申请 API 密钥。确保妥善保管密钥，不要泄露。

使用 Node.js 和 Express 搭建一个简单的后端服务，用于代理 ChatGPT API 请求。

const express = require('express');
const axios = require('axios');
require('dotenv').config();

const app = express();
app.use(express.json());

// 代理 ChatGPT API 请求
app.post('/api/chat', async (req, res) => {
    try {
        const response = await axios.post(
            'https://api.openai.com/v1/chat/completions',
            {
                model: 'gpt-3.5-turbo',
                messages: req.body.messages,
                temperature: 0.7,
            },
            {
                headers: {
                    'Content-Type': 'application/json',
                    'Authorization': `Bearer ${process.env.OPENAI_API_KEY}`,
                },
            }
        );
        res.json(response.data);
    } catch (error) {console.error(error);
        res.status(500).json({error: 'Internal Server Error'});
    }
});

const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {console.log(`Server is running on port ${PORT}`);
});

在前端页面中，通过 Fetch API 调用后端服务。

async function sendMessage(messages) {
    try {
        const response = await fetch('/api/chat', {
            method: 'POST',
            headers: {'Content-Type': 'application/json',},
            body: JSON.stringify({messages}),
        });
        const data = await response.json();
        return data.choices[0].message.content;
    } catch (error) {console.error('Error:', error);
        return 'Sorry, something went wrong.';
    }
}