基于Next.js 15和GLM-4-Flash的AI淘宝文案优化工具技术实现
·
基于Next.js 15和GLM-4-Flash的AI淘宝文案优化工具技术实现
前言
在电商领域,商品文案的质量直接影响着转化率和销售额。本文将详细介绍如何使用Next.js 15和智谱AI的GLM-4-Flash模型,构建一个完整的AI文案优化工具。
技术选型
-
Next.js 15:支持App Router和Server Components的全栈框架
-
GLM-4-Flash:智谱AI的快速模型,专门针对中文优化
-
阿里云服务器:稳定可靠的云服务器平台
-
Redis:高性能键值存储,用于速率限制和缓存
项目概述
核心功能
-
AI文案生成:输入商品信息,自动生成优化标题、3条卖点、短视频口播稿
-
多种文案风格:专业、活泼、高端、亲民四种风格
-
速率限制:每分钟10次、每日10次,基于Redis的分布式限流
-
用户体验:一键复制、历史记录、导出功能、示例模板
技术栈
{
"前端": "Next.js 15.1.0 + React 18.3.0",
"后端": "Next.js API Routes + GLM-4-Flash",
"存储": "Redis",
"部署": "阿里云服务器 + Nginx + PM2"
}
项目结构
├── app/
│ ├── api/
│ │ ├── optimize/
│ │ │ ├── route.js # 文案优化API
│ │ │ └── rateLimit.js # 速率限制
│ │ └── feedback/
│ │ └── route.js # 用户反馈API
│ ├── layout.js # 根布局
│ └── page.js # 主页面
├── .env.example
└── package.json
核心功能实现
1. API路由设计
Next.js的API Routes采用文件系统路由,app/api/optimize/route.js对应/api/optimize。
请求处理流程
export async function POST(request) {
try {
// 1. 速率限制检查
const rateLimitResult = await rateLimit(request)
if (!rateLimitResult.allowed) {
return NextResponse.json(
{ error: '请求过于频繁,请稍后再试' },
{ status: 429 }
)
}
// 2. 解析和验证输入
const { input, style = 'professional' } = await request.json()
if (!input || !input.trim()) {
return NextResponse.json(
{ error: '请输入商品信息' },
{ status: 400 }
)
}
// 3. 每日限制检查
const dailyLimitResult = await checkAndIncrementDailyLimit(request)
if (!dailyLimitResult.allowed) {
return NextResponse.json(
{ error: '今日生成次数已达上限' },
{ status: 429 }
)
}
// 4. 调用GLM API
const result = await callGLMAPI(input, style)
// 5. 返回结果
return NextResponse.json(result)
} catch (error) {
console.error('处理请求时出错:', error)
return NextResponse.json(
{ error: '服务器错误,请稍后重试' },
{ status: 500 }
)
}
}
XSS防护
为了防止XSS攻击,实现了严格的输入验证:
// 检测可疑的恶意内容模式
const suspiciousPatterns = [
/<script[^>]*>.*?<\/script>/gis, // script标签
/javascript:/gi, // javascript:协议
/on\w+\s*=/gi, // 事件处理器
/<iframe[^>]*>/gi, // iframe标签
/eval\s*\(/gi, // eval函数
]
for (const pattern of suspiciousPatterns) {
if (pattern.test(trimmedInput)) {
return NextResponse.json(
{ error: '输入内容包含不允许的字符或模式' },
{ status: 400 }
)
}
}
2. 速率限制实现
使用Redis实现基于滑动窗口的分布式限流算法。
滑动窗口算法
import { createClient } from 'redis'
const MAX_REQUESTS = 10 // 最大请求次数
const WINDOW_MS = 60000 // 时间窗口(1分钟)
// 创建 Redis 客户端
const redis = createClient({
url: process.env.REDIS_URL || 'redis://localhost:6379'
})
async function checkLimit(identifier) {
const now = Date.now()
const key = `ratelimit:${identifier}`
const windowStart = now - WINDOW_MS
try {
// 1. 移除过期的请求记录
await redis.zRemRangeByScore(key, 0, windowStart)
// 2. 获取当前窗口内的请求数量
const count = await redis.zCard(key)
// 3. 检查是否超过限制
if (count >= MAX_REQUESTS) {
const oldestRequests = await redis.zRangeWithScores(key, 0, 0)
const resetTime = oldestRequests[0].score + WINDOW_MS
return { allowed: false, remaining: 0, resetTime }
}
// 4. 添加新请求记录
const requestId = `${now}:${Math.random().toString(36).substring(7)}`
await redis.zAdd(key, { score: now, value: requestId })
// 5. 设置过期时间
await redis.expire(key, Math.ceil((WINDOW_MS + 10000) / 1000))
return {
allowed: true,
remaining: MAX_REQUESTS - count - 1,
resetTime: now + WINDOW_MS,
}
} catch (error) {
console.error('速率限制检查失败:', error)
// 降级策略:Redis失败时拒绝请求
return { allowed: false, remaining: 0, resetTime: now + WINDOW_MS }
}
}
客户端识别
结合IP地址和User-Agent指纹识别客户端:
export function getClientIdentifier(request) {
// 获取真实IP
const forwarded = request.headers.get('x-forwarded-for')
const realIp = request.headers.get('x-real-ip')
const cfConnectingIp = request.headers.get('cf-connecting-ip')
let ip = 'unknown'
if (forwarded) {
ip = forwarded.split(',')[0].trim()
} else if (realIp) {
ip = realIp
} else if (cfConnectingIp) {
ip = cfConnectingIp
}
// 添加User-Agent指纹
const userAgent = request.headers.get('user-agent') || 'unknown'
const fingerprint = simpleHash(userAgent)
return `${ip}:${fingerprint}`
}
3. GLM模型调用
Prompt Engineering
提示词设计是影响AI生成质量的关键:
const styleGuides = {
professional: '使用专业、正式的语言,突出产品的专业性和可靠性',
lively: '使用活泼、有趣的语言,增加互动感和亲和力',
premium: '使用高端、精致的语言,强调品质和档次',
friendly: '使用亲切、朴实的语言,拉近与用户的距离'
}
const prompt = `你是一个专业的淘宝文案优化专家。
文案风格要求:${styleGuides[style]}
商品信息:${input}
请按照以下格式输出:
优化标题:[不超过30字]
商品卖点:
1. [第一个卖点]
2. [第二个卖点]
3. [第三个卖点]
短视频口播稿:[30-60秒]`
API调用实现
const response = await fetch(apiUrl, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Authorization': `Bearer ${apiKey}`,
},
body: JSON.stringify({
model: 'glm-4-flash',
messages: [{ role: 'user', content: prompt }],
temperature: 0.7,
max_tokens: 1000,
}),
signal: controller.signal, // 30秒超时
})
响应解析
使用正则表达式解析GLM返回的自然语言文本:
function parseContent(content) {
// 提取优化标题
const titleMatch = content.match(/优化标题[：:]\s*(.+?)(?=\n|$)/i)
const title = titleMatch ? titleMatch[1].trim() : '未能生成标题'
// 提取卖点
const sellingPointsMatch = content.match(/商品卖点[：:]\s*([\s\S]*?)(?=短视频口播稿|$)/i)
let sellingPoints = []
if (sellingPointsMatch) {
const points = sellingPointsMatch[1].match(/[1-3][\.\、]\s*(.+?)(?=\n|$)/g)
if (points) {
sellingPoints = points.map(p => p.replace(/^[1-3][\.\、]\s*/, '').trim())
}
}
// 提取短视频口播稿
const scriptMatch = content.match(/短视频口播稿[：:]\s*([\s\S]+?)$/i)
const videoScript = scriptMatch ? scriptMatch[1].trim() : ''
return { title, sellingPoints, videoScript }
}
4. 前端实现
状态管理
使用React Hooks进行状态管理:
export default function Home() {
const [productInfo, setProductInfo] = useState('')
const [style, setStyle] = useState('professional')
const [result, setResult] = useState(null)
const [loading, setLoading] = useState(false)
const [error, setError] = useState('')
const [history, setHistory] = useState([])
const [dailyUsage, setDailyUsage] = useState({ count: 0, date: '' })
}
API调用
const generateContent = async () => {
setLoading(true)
setError('')
try {
const response = await fetch('/api/optimize', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ input: productInfo, style }),
})
const data = await response.json()
if (!response.ok) throw new Error(data.error)
setResult(data)
// 获取每日使用次数
const dailyCount = parseInt(response.headers.get('X-Daily-Count') || '0')
setDailyUsage({ count: dailyCount, date: new Date().toDateString() })
// 保存历史记录
saveToHistory({ productInfo, style, result: data, timestamp: Date.now() })
} catch (err) {
setError(err.message)
} finally {
setLoading(false)
}
}
一键复制功能
支持现代浏览器和旧浏览器的fallback:
const copyToClipboard = async (text, label) => {
try {
if (navigator.clipboard) {
await navigator.clipboard.writeText(text)
setCopiedText(label)
setTimeout(() => setCopiedText(''), 2000)
} else {
// Fallback
const textArea = document.createElement('textarea')
textArea.value = text
textArea.style.position = 'fixed'
textArea.style.left = '-999999px'
document.body.appendChild(textArea)
textArea.select()
document.execCommand('copy')
document.body.removeChild(textArea)
setCopiedText(label)
}
} catch (err) {
setError('复制失败,请手动复制')
}
}
部署指南
本地开发
- 安装依赖:
npm install
- 配置环境变量(
.env.local):
GLM_API_KEY=your_api_key_here
GLM_API_URL=https://open.bigmodel.cn/api/paas/v4/chat/completions
GLM_MODEL=glm-4-flash
- 启动开发服务器:
npm run dev
部署到阿里云服务器
- 在服务器上克隆代码:
cd /var/www
git clone https://github.com/your-username/your-repo.git
cd your-repo
- 安装依赖:
npm install
- 配置环境变量(
.env.local):
GLM_API_KEY=your_api_key_here
GLM_API_URL=https://open.bigmodel.cn/api/paas/v4/chat/completions
GLM_MODEL=glm-4-flash
REDIS_URL=redis://localhost:6379
- 构建应用:
npm run build
- 使用PM2启动应用:
PORT=3001 pm2 start npm --name "taobao-tool" -- start
pm2 save
pm2 startup
- 配置Nginx反向代理:
server {
listen 80;
server_name your-domain.com;
location / {
proxy_pass http://localhost:3001;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection 'upgrade';
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
}
}
获取GLM API密钥
访问智谱AI开放平台注册并获取API密钥。
性能优化
1. API响应优化
-
使用30秒超时控制,避免长时间等待
-
实现降级策略,Redis失败时拒绝请求
-
使用原子操作,确保速率限制的准确性
2. 前端优化
-
使用sessionStorage存储历史记录,避免占用localStorage
-
限制历史记录数量(最多5条),控制存储空间
-
使用防抖处理用户输入,减少不必要的渲染
3. 成本控制
-
每日限制10次生成,控制API调用成本
-
使用GLM-4-Flash快速模型,降低单次调用成本
-
实现速率限制,防止恶意滥用
扩展思路
1. 批量生成
支持一次性上传多个商品信息,批量生成文案:
// 批量生成API
export async function POST(request) {
const { items } = await request.json()
const results = await Promise.all(
items.map(item => generateCopywriting(item))
)
return NextResponse.json({ results })
}
2. 文案模板库
积累优质文案,形成模板库:
// 保存优质文案到Redis
await redis.zAdd('templates', {
score: Date.now(),
value: JSON.stringify({ title, sellingPoints, videoScript })
})
3. 多平台适配
支持拼多多、抖音小店等平台:
const platformGuides = {
taobao: '淘宝平台要求...',
pinduoduo: '拼多多平台要求...',
douyin: '抖音小店要求...'
}
4. 图片识别
上传商品图片,自动识别商品特点:
// 调用图像识别API
const imageAnalysis = await analyzeImage(imageUrl)
const prompt = `根据图片分析结果生成文案:${imageAnalysis}`
总结
本文详细介绍了如何使用Next.js 15和GLM-4-Flash构建AI淘宝文案优化工具,涵盖了:
-
技术选型:Next.js 15、GLM-4-Flash、Redis的选择理由
-
核心功能:API路由设计、速率限制、GLM模型调用、前端实现
-
安全防护:XSS防护、输入验证、速率限制
-
性能优化:API响应优化、前端优化、成本控制
-
部署方案:阿里云服务器 + Nginx + PM2 + Redis
-
扩展思路:批量生成、模板库、多平台适配、图片识别
技术亮点
-
基于Redis的分布式滑动窗口限流算法
-
完善的XSS防护和输入验证
-
结构化的Prompt Engineering
-
用户体验优化(一键复制、历史记录、导出功能)
项目演示地址
请点击使用：AI文案优化工具
适用场景
-
淘宝、拼多多、抖音小店等电商卖家
-
短视频创作者、自媒体从业者
-
想学习Next.js和AI应用开发的开发者
后续改进
-
支持更多大模型(GPT-4、文心一言等)
-
实现文案质量评分系统
-
添加A/B测试功能
-
支持多语言文案生成
作者:[简单勇学AI]
发布时间:2026-02-26
标签:Next.js、AI、GLM-4.7、电商、文案优化
如果这篇文章对你有帮助,欢迎点赞、收藏、关注。有任何问题欢迎在评论区留言交流。
有“AI”的1024 = 2048，欢迎大家加入2048 AI社区
更多推荐
12
0- 0
已为社区贡献3条内容
所有评论(0)