基于ChatGPT API构建定制化网页的完整实践指南

3次阅读

没有评论

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

ChatGPT API 为网页开发注入了自然语言处理能力，典型应用包括：

实时智能客服对话系统
个性化内容生成（如营销文案、产品描述）
交互式学习辅导工具
数据查询的语义理解接口

相比传统方案，其优势在于：

无需训练模型即可获得高质量文本生成
支持多轮对话上下文保持
响应延迟可控制在商业可用范围内（平均 1 - 3 秒）

优点：

完全控制请求 / 响应流程
避免额外依赖包
适合需要定制协议的场景

缺点：

需自行实现重试、错误处理
流式响应处理较复杂

优点：

内置类型提示和参数校验
简化流式响应处理
自动处理 API 版本迁移

推荐方案：

简单项目使用 SDK 快速开发
高性能场景选择原生 API+WebSocket

前端采用 EventSource 示例：

const eventSource = new EventSource('/api/chat-stream');
eventSource.onmessage = (event) => {const data = JSON.parse(event.data);
  if (data.type === 'delta') {document.getElementById('output').innerHTML += data.content;
  } else if (data.type === 'done') {eventSource.close();
  }
};

import {OpenAI} from 'openai';

router.post('/chat', async (req, res) => {const openai = new OpenAI(process.env.API_KEY);

  try {
    const completion = await openai.chat.completions.create({
      model: "gpt-4",
      messages: req.body.messages,
      stream: true
    });

    res.setHeader('Content-Type', 'text/event-stream');
    for await (const chunk of completion) {res.write(`data: ${JSON.stringify(chunk)}\n\n`);
    }
  } catch (error) {res.status(502).json({error: error.message});
  }
});

优点：减轻客户端负担
缺点：需要会话存储
实现：使用 Redis 存储对话历史

# Flask 示例
@app.route('/chat', methods=['POST'])
def chat():
    session_id = request.cookies.get('session_id')
    if not session_id:
        session_id = str(uuid.uuid4())

    messages = redis.get(f'chat:{session_id}') or []
    messages.append(request.json['message'])

    response = openai.ChatCompletion.create(
        model="gpt-4",
        messages=messages
    )

    redis.setex(f'chat:{session_id}', 3600, messages)
    return jsonify(response.choices[0].message)

优点：无状态服务
缺点：可能丢失上下文
实现：前端维护消息历史

// 前端存储实现
let chatHistory = [];

function sendMessage(content) {chatHistory.push({ role: 'user', content});

  fetch('/api/chat', {
    method: 'POST',
    body: JSON.stringify({messages: chatHistory})
  }).then(...);
}

def chat_completion_with_retry(messages, max_retries=3):
    backoff_factor = 1
    for attempt in range(max_retries):
        try:
            response = openai.ChatCompletion.create(
                model="gpt-4",
                messages=messages,
                timeout=10
            )
            return response
        except openai.error.APIError as e:
            if attempt == max_retries - 1:
                raise
            sleep_time = backoff_factor * (2 ** attempt)
            time.sleep(sleep_time)

function appendTextWithTyperEffect(element, text, speed=20) {
  let i = 0;
  const timer = setInterval(() => {if (i < text.length) {element.innerHTML += text.charAt(i);
      i++;
      element.scrollTop = element.scrollHeight;
    } else {clearInterval(timer);
    }
  }, speed);
}

适合同时处理多个独立查询：

// 前端批量请求
const promises = queries.map(query => 
  fetch('/api/batch-chat', {
    method: 'POST',
    body: JSON.stringify({query})
  })
);

Promise.all(promises).then(...);

使用内存缓存近期结果：

const cache = new Map();

router.post('/chat', (req, res) => {const cacheKey = hash(req.body.messages);
  if (cache.has(cacheKey)) {return res.json(cache.get(cacheKey));
  }

  // ... 正常处理
  cache.set(cacheKey, response);
  setTimeout(() => cache.delete(cacheKey), 60000);
});

Express 中间件示例：

const rateLimit = require('express-rate-limit');

const limiter = rateLimit({
  windowMs: 15 * 60 * 1000, // 15 分钟
  max: 100, // 每个 IP 限制
  message: '请求过于频繁'
});

app.use('/api/', limiter);

推荐方案：

后端环境变量存储密钥
使用 AWS Secrets Manager 等专业服务
禁止前端直接暴露密钥

必须处理：

注入攻击检测
敏感词过滤
长度限制

from bleach import clean

def sanitize_input(text):
    return clean(text, 
               tags=[], 
               attributes={}, 
               strip=True)[:1000]