"能不能给我们的应用加上 AI 功能？"产品经理兴奋地问我。作为一个海外电商网站的前端负责人，我深知 AI 不是简单地调用几个 API 就完事了。特别是在前端应用中，如何优雅地集成 AI 能力，如何处理流式响应，如何优化用户体验，都是需要仔细考虑的问题。
最近两个月，我们成功地在项目中集成了多个 AI 功能，包括智能搜索推荐、图片处理和内容生成。今天就来分享这个过程中的实战经验。
需求分析与技术选型
首先，我们梳理了需要实现的 AI 功能：
- 智能搜索和商品推荐
- 商品图片智能裁剪和增强
- 商品描述的多语言生成
- 客服机器人对话
经过评估，我们选择了以下技术栈：
// 技术栈配置
const aiStack = {
// 基础框架
framework: {
frontend: 'Next.js 14',
api: 'Edge Runtime' // 支持流式响应
},
// AI 服务
aiServices: {
llm: 'OpenAI API', // 语言模型
vision: 'Replicate API', // 图像处理
embedding: 'OpenAI Ada', // 向量嵌入
vectorDb: 'Pinecone' // 向量数据库
},
// 开发工具
devTools: {
langchain: true, // AI 工具链
sharp: true, // 图像处理
typescript: true // 类型安全
}
}核心功能实现
1. 智能搜索系统
首先是商品搜索系统的实现。我们使用向量数据库来存储商品信息，实现语义搜索：
// 搜索系统实现
class SearchSystem {
private embeddings: OpenAIEmbeddings
private vectorStore: PineconeStore
constructor() {
this.embeddings = new OpenAIEmbeddings()
this.vectorStore = new PineconeStore(
process.env.PINECONE_API_KEY,
'products'
)
}
// 索引商品数据
async indexProduct(product: Product) {
const text = `${product.name} ${product.description}`
const vector = await this.embeddings.embed(text)
await this.vectorStore.upsert({
id: product.id,
values: vector,
metadata: {
name: product.name,
price: product.price,
category: product.category
}
})
}
// 语义搜索
async search(query: string, limit: number = 10) {
const queryVector = await this.embeddings.embed(query)
const results = await this.vectorStore.query({
vector: queryVector,
topK: limit,
includeMetadata: true
})
return results.map(result => ({
score: result.score,
product: result.metadata
}))
}
}2. 图片处理服务
对于商品图片，我们实现了智能裁剪和增强功能：
// 图片处理服务
class ImageService {
private replicateClient: Replicate
constructor() {
this.replicateClient = new Replicate({
auth: process.env.REPLICATE_API_TOKEN
})
}
// 智能裁剪
async smartCrop(
imageUrl: string,
width: number,
height: number
): Promise<string> {
const output = await this.replicateClient.run(
'cropperjs/smart-crop:v1',
{
input: {
image: imageUrl,
width,
height,
preserve_important: true
}
}
)
return output.image
}
// 图片增强
async enhance(imageUrl: string): Promise<string> {
const output = await this.replicateClient.run(
'tencentarc/gfpgan:v1.4',
{
input: {
img: imageUrl,
scale: 2,
face_enhance: true
}
}
)
return output.image
}
}3. 多语言内容生成
我们使用 LangChain 来构建内容生成管道：
// 内容生成服务
class ContentGenerator {
private chain: LLMChain
constructor() {
const model = new OpenAI({ temperature: 0.7 })
this.chain = new LLMChain({
llm: model,
prompt: PromptTemplate.fromTemplate(`
作为一个专业的电商文案专家，请为以下商品生成{language}的描述：
商品名称：{name}
类别：{category}
特点：{features}
要求：
1. 突出商品的核心卖点
2. 使用目标语言的本地化表达
3. 适合电商平台展示
4. 字数在200字左右
商品描述：
`)
})
}
async generateDescription(
product: Product,
language: string
): Promise<string> {
const response = await this.chain.call({
language,
name: product.name,
category: product.category,
features: product.features.join(', ')
})
return response.text
}
}4. 客服机器人
最后是智能客服系统的实现：
// 客服机器人实现
class CustomerService {
private memory: BufferMemory
private chain: ConversationChain
constructor() {
this.memory = new BufferMemory()
this.chain = new ConversationChain({
llm: new OpenAI({
temperature: 0.7,
streaming: true // 启用流式响应
}),
memory: this.memory,
prompt: PromptTemplate.fromTemplate(`
你是一个专业的电商客服代表。
请用友善的语气回答客户的问题。
如果遇到无法解决的问题，建议转人工客服。
历史对话：
{history}
客户：{input}
客服：
`)
})
}
// 流式响应处理
async *chat(message: string) {
const stream = await this.chain.stream({
input: message
})
for await (const chunk of stream) {
yield chunk
}
}
}
// 前端实现
function ChatWidget() {
const [messages, setMessages] = useState<Message[]>([])
const [input, setInput] = useState('')
const handleSend = async () => {
const response = await fetch('/api/chat', {
method: 'POST',
body: JSON.stringify({ message: input })
})
if (!response.body) return
const reader = response.body.getReader()
const decoder = new TextDecoder()
while (true) {
const { done, value } = await reader.read()
if (done) break
const text = decoder.decode(value)
setMessages(prev => [
...prev,
{ role: 'assistant', content: text }
])
}
}
return (
<div className="chat-widget">
{messages.map(message => (
<div className={`message ${message.role}`}>
{message.content}
</div>
))}
<input
value={input}
onChange={e => setInput(e.target.value)}
onKeyPress={e => e.key === 'Enter' && handleSend()}
/>
</div>
)
}性能优化
在实际运行中，我们发现了一些性能问题，主要采取了以下优化措施：
向量计算优化：
// 使用批量处理减少API调用 async function batchEmbedding(texts: string[]) { const batchSize = 100 const results = [] for (let i = 0; i < texts.length; i += batchSize) { const batch = texts.slice(i, i + batchSize) const embeddings = await embedder.embedMany(batch) results.push(...embeddings) } return results }缓存策略：
// 实现多级缓存 const cache = { memory: new Map(), redis: new Redis(), async get(key: string) { // 先查内存 if (this.memory.has(key)) { return this.memory.get(key) } // 再查Redis const value = await this.redis.get(key) if (value) { this.memory.set(key, value) return value } return null } }
效果与收获
经过两个月的开发和优化，取得了显著的成效：
- 搜索准确率提升40%
- 客服响应时间减少60%
- 商品图片质量提升30%
- 多语言内容生成效率提升5倍
最让我印象深刻的是一位用户的反馈："搜索太智能了，完全能理解我想要什么！"
经验总结
在前端项目中集成 AI 能力，我们学到了这些经验：
- 合理的技术选型很重要
- 流式响应是提升体验的关键
- 性能优化要从多个层面考虑
- 错误处理和降级策略必不可少
写在最后
AI 技术正在改变前端开发的方式，但关键是要找到合适的场景和正确的使用方法。就像一位同事说的："AI 不是万能药，但用对地方就是效率倍增器。"
如果你也在尝试在前端项目中使用 AI，欢迎在评论区分享你的经验，让我们一起进步！
如果觉得这篇文章对你有帮助，别忘了点个赞
标签：product,const,AI,await,return,接入,new,前端开发 From： https://blog.csdn.net/ChengFengTech/article/details/144624921