React 项目中接入 AI 实现知识问答、内容匹配和图片、文本处理...

116 阅读3分钟

在 React 项目中接入 AI 实现知识问答、内容匹配和图片/文本处理,可以通过调用成熟的 AI API(如 OpenAI、Google Cloud AI 或开源模型)实现。以下是完整方案和代码示例:


一、技术选型

功能推荐方案
知识问答OpenAI GPT-4/3.5、HuggingFace Transformers(开源模型)
文本匹配OpenAI Embeddings + 向量数据库(Pinecone/Milvus)或 Sentence-BERT
图片处理Google Vision API、AWS Rekognition、CLIP(开源多模态模型)
文本+图片CLIP(图文匹配)、GPT-4V(多模态交互)
本地部署ONNX Runtime + HuggingFace 模型(需 GPU 支持)

二、实现步骤

1. 知识问答(以 OpenAI 为例)

后端 API(Node.js)
// server/api/chat.js
import OpenAI from "openai";
const openai = new OpenAI({ apiKey: process.env.OPENAI_KEY });

export async function POST(req) {
  const { messages } = await req.json();
  const response = await openai.chat.completions.create({
    model: "gpt-4",
    messages,
  });
  return new Response(JSON.stringify(response.choices[0].message));
}
前端调用(React)
// src/components/ChatAI.tsx
import { useState } from "react";
import axios from "axios";

export default function ChatAI() {
  const [input, setInput] = useState("");
  const [messages, setMessages] = useState<Array<{ role: string; content: string }>>([]);

  const handleSend = async () => {
    const newMessages = [...messages, { role: "user", content: input }];
    setMessages(newMessages);
    
    const response = await axios.post("/api/chat", { messages: newMessages });
    setMessages([...newMessages, response.data]);
    setInput("");
  };

  return (
    <div>
      <div className="chat-history">
        {messages.map((msg, i) => (
          <div key={i} className={`message ${msg.role}`}>{msg.content}</div>
        ))}
      </div>
      <input value={input} onChange={(e) => setInput(e.target.value)} />
      <button onClick={handleSend}>发送</button>
    </div>
  );
}

2. 内容匹配(文本相似度)

使用 OpenAI Embeddings
// 生成文本向量
const getEmbedding = async (text: string) => {
  const response = await axios.post(
    "https://api.openai.com/v1/embeddings",
    { input: text, model: "text-embedding-3-small" },
    { headers: { Authorization: `Bearer ${API_KEY}` } }
  );
  return response.data.data[0].embedding;
};

// 计算余弦相似度
const cosineSimilarity = (a: number[], b: number[]) => {
  const dotProduct = a.reduce((sum, val, i) => sum + val * b[i], 0);
  const magnitudeA = Math.sqrt(a.reduce((sum, val) => sum + val * val, 0));
  const magnitudeB = Math.sqrt(b.reduce((sum, val) => sum + val * val, 0));
  return dotProduct / (magnitudeA * magnitudeB);
};

// 示例:匹配用户输入与数据库内容
const userInputEmbedding = await getEmbedding("如何学习 React?");
const databaseEmbeddings = await loadFromDB(); // 假设已存储向量
const matches = databaseEmbeddings
  .map(item => ({ ...item, score: cosineSimilarity(userInputEmbedding, item.embedding) }))
  .sort((a, b) => b.score - a.score)
  .slice(0, 5); // 返回相似度最高的5条

3. 图片处理(以 Google Vision API 为例)

图片标签识别
// 前端上传图片
const handleImageUpload = async (file: File) => {
  const base64Image = await convertToBase64(file);
  const response = await axios.post("/api/vision", { image: base64Image });
  console.log(response.data.labels); // 输出识别结果
};

// 后端处理(Node.js)
import { ImageAnnotatorClient } from "@google-cloud/vision";
const client = new ImageAnnotatorClient();

export async function POST(req) {
  const { image } = await req.json();
  const [result] = await client.labelDetection(Buffer.from(image, "base64"));
  const labels = result.labelAnnotations.map((label) => label.description);
  return new Response(JSON.stringify({ labels }));
}

4. 图文混合处理(使用 CLIP 模型)

本地部署方案(Python + ONNX)
# 服务端:使用 FastAPI 提供 API
from clip_onnx import CLIPOnnxModel
model = CLIPOnnxModel("clip-vit-base-patch32")
model.start_similarity_server(port=8000)
前端调用
// 上传图片和文本进行匹配
const matchImageText = async (image: File, text: string) => {
  const formData = new FormData();
  formData.append("image", image);
  formData.append("text", text);
  
  const response = await axios.post("http://localhost:8000/similarity", formData, {
    headers: { "Content-Type": "multipart/form-data" }
  });
  
  return response.data.similarity_score; // 返回相似度分数
};

三、关键问题与优化

1. 性能优化

  • 流式响应:对长文本问答使用 OpenAI 的流式传输

    // 前端使用 EventSource 接收流
    const eventSource = new EventSource(`/api/chat-stream?query=${encodeURIComponent(query)}`);
    eventSource.onmessage = (e) => {
      setAnswer(prev => prev + e.data);
    };
    
  • 缓存机制:对常见问题答案进行缓存

    // 使用 Redis 缓存
    const cached = await redis.get(`answer:${hash(query)}`);
    if (cached) return cached;
    

2. 安全性

  • 密钥管理:永远不要在前端暴露 API Key

    # 后端环境变量
    OPENAI_KEY=sk-xxx
    GOOGLE_APPLICATION_CREDENTIALS=/path/to/service-account.json
    
  • 内容过滤:对用户输入进行敏感词过滤

    import { Filter } from "bad-words");
    const filter = new Filter();
    if (filter.isProfane(userInput)) throw new Error("包含违规内容");
    

3. 错误处理

  • 重试机制:对 AI API 调用添加指数退避重试
    const retryFetch = async (fn, retries = 3) => {
      try {
        return await fn();
      } catch (err) {
        if (retries > 0) {
          await new Promise(res => setTimeout(res, 1000 * (4 - retries)));
          return retryFetch(fn, retries - 1);
        }
        throw err;
      }
    };
    

四、扩展能力

  1. 私有知识库问答

    • 使用 LangChain 实现文档检索增强生成(RAG)
    from langchain.document_loaders import DirectoryLoader
    from langchain.embeddings import OpenAIEmbeddings
    from langchain.vectorstores import Chroma
    
    loader = DirectoryLoader("./docs", glob="**/*.txt")
    docs = loader.load()
    db = Chroma.from_documents(docs, OpenAIEmbeddings())
    
  2. 低成本替代方案

    • 使用开源的 Llama 3Mistral 模型
    # 使用 Ollama 本地运行
    ollama run llama3
    

五、部署建议

  1. 云服务方案

    graph LR
    A[React前端] -->|API调用| B(Node.js后端)
    B --> C[OpenAI/GCP/AWS]
    B --> D[向量数据库]
    
  2. 边缘计算优化

    • 使用 Cloudflare Workers + AI Gateway 降低延迟
    • 通过 WebAssembly 在浏览器运行轻量模型(如 TensorFlow.js)

通过上述方案,您可以快速在 React 项目中集成 AI 能力。建议优先使用云 API 快速验证需求,再逐步替换为定制化模型以优化成本和效果。