phoneGPT：构建专业领域的检索增强型智能问答系统

项目背景

在人工智能技术快速发展的今天，通用大语言模型已广泛应用于各类对话系统中，但在专业领域问答场景下，常常面临着知识时效性差、专业准确度不足等问题。为了解决手机领域专业知识问答的痛点，我们开发了phoneGPT项目------一个基于检索增强生成（RAG）技术的手机知识库智能问答系统。

本文将详细介绍phoneGPT项目的技术架构、核心功能实现以及开发过程中的经验与挑战。

技术架构概览

phoneGPT项目采用现代化的全栈技术栈，构建了从数据爬取、向量存储到智能问答的完整链路。

核心技术栈

前端技术：

• Next.js 15：服务端渲染与静态生成框架
• React 19：UI组件库
• TailwindCSS 4：实用优先的CSS框架
• @ai-sdk/react：流式输出Hooks封装
• react-markdown：Markdown渲染组件
• lucide-react：轻量级图标库

后端与AI技术：

• Node.js：服务端运行环境
• TypeScript：静态类型检查
• LangChain：AI应用开发框架
• OpenAI API：大语言模型与嵌入模型
• Supabase：向量数据库与BaaS平台
• Puppeteer：无头浏览器，用于数据爬取

核心功能实现

1. 前端交互界面设计

phoneGPT的前端界面采用简洁现代的设计风格，通过TailwindCSS实现了响应式布局，兼顾移动端与PC端用户体验。核心交互组件包括：

• 聊天界面：支持消息气泡展示、markdown渲染、代码高亮等功能
• 流式输出 ：借助@ai-sdk/react提供的useChat Hook，实现了AI回答的逐字显示效果，极大提升了用户体验
• 响应式布局 ：通过TailwindCSS的max-w-3xl等工具类，实现了移动端优先的响应式设计

前端组件的核心实现：

// 使用useChat Hook实现流式输出
import { useChat } from '@ai-sdk/react';
import { MessageList } from './message-list';
import { MessageInput } from './message-input';

function Chat() {
  const { messages, input, handleInputChange, handleSubmit } = useChat();
  
  return (
    <div className="max-w-3xl mx-auto p-4">
      <MessageList messages={messages} />
      <MessageInput 
        value={input} 
        onChange={handleInputChange} 
        onSubmit={handleSubmit} 
      />
    </div>
  );
}

2. RAG技术实现

RAG（Retrieval-Augmented Generation）技术是phoneGPT的核心，通过检索相关知识来增强生成回答的准确性。完整流程包括：

2.1 知识库构建与数据爬取

我们开发了专门的爬虫脚本（seed.ts），使用Puppeteer无头浏览器从专业手机网站爬取数据：

• 数据爬取：通过Puppeteer模拟浏览器行为，抓取网页内容
• 数据清洗：使用正则表达式和DOM操作清洗HTML标签，提取有效文本
• 文本分块：利用LangChain提供的文本分块机制，将长文本分割成合适大小的chunk

// seed.ts中的核心爬取逻辑
import puppeteer from 'puppeteer';

async function scrapePhoneData(url: string) {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto(url);
  
  const content = await page.evaluate(() => {
    // 提取页面内容的逻辑
    return document.querySelector('.content').innerText;
  });
  
  await browser.close();
  return content;
}

2.2 向量存储与相似度检索

Supabase作为向量数据库，为phoneGPT提供了高效的向量存储和相似度检索能力：

• 向量生成：使用OpenAI的embedding模型将文本转换为1536维向量
• 向量存储：设计chunks表存储文本内容、向量和元数据
• 相似度计算：通过PostgreSQL的pgvector扩展实现向量相似度计算

数据库表结构设计：

CREATE TABLE public.chunks (
  id uuid NOT NULL DEFAULT gen_random_uuid(),
  content text null,
  vector extensions.vector null,
  url text null,
  date_updated timestamp without time zone DEFAULT now(),
  CONSTRAINT chunks_pkey PRIMARY KEY (id)
);

自定义相似度检索函数：

create or replace function get_relevant_chunks(
  query_vector vector(1536),
  match_threshold float,
  match_count int
) 
returns table (
  id uuid,
  content text,
  url text,
  date_updated timestamp,
  similarity float
) 
language sql stable
as $$
  select
    id,
    content,
    url,
    date_updated,
    1 - (chunks.vector <=> query_vector) as similarity
  from chunks
  where 1 - (chunks.vector <=> query_vector) > match_threshold
  order by similarity desc
  limit match_count;
$$;

3. 后端API实现

phoneGPT的后端API主要负责处理用户查询、执行RAG流程并返回AI生成的回答：

• 查询处理：接收用户问题，生成向量表示
• 检索增强：调用Supabase函数检索相关文档片段
• 上下文构建：将检索结果与问题组合为完整上下文
• AI生成：调用OpenAI API生成回答，支持流式输出

// 后端API核心逻辑
import { streamText } from '@ai-sdk/openai';
import { supabase } from './supabase';

async function processQuery(query: string) {
  // 1. 生成查询向量
  const embeddingResponse = await openai.embeddings.create({
    model: 'text-embedding-3-small',
    input: query
  });
  
  const queryVector = embeddingResponse.data[0].embedding;
  
  // 2. 检索相关文档
  const { data } = await supabase.rpc('get_relevant_chunks', {
    query_vector: queryVector,
    match_threshold: 0.7,
    match_count: 5
  });
  
  // 3. 构建上下文
  const context = data.map(item => item.content).join('\n');
  
  // 4. 生成回答
  const result = await streamText({
    model: openai('gpt-4o'),
    prompt: `你是一个手机领域专家，根据以下上下文回答用户问题：\n\n上下文：${context}\n\n问题：${query}`
  });
  
  // 5. 返回流式响应
  return result.toDataStreamResponse();
}

技术亮点与创新

1. 简洁高效的前端实现

phoneGPT通过@ai-sdk/react提供的useChat Hook，仅需一行代码即可实现AI回答的流式输出功能，大幅简化了前端开发复杂度。同时，使用TailwindCSS实现了移动端优先的响应式设计，确保在不同设备上都能提供良好的用户体验。

2. 专业领域知识的精确检索

通过RAG技术，phoneGPT能够精确检索手机领域的专业知识，有效解决了通用大语言模型在专业领域知识准确性不足的问题。系统支持设置相似度阈值，确保检索结果的相关性。

3. 自动化的知识库构建

phoneGPT实现了从数据爬取、清洗、分块到向量化存储的完整流程自动化，通过npm run seed命令即可一键更新知识库，大大提高了系统维护效率。

4. 优化的向量存储方案

Supabase作为PostgreSQL的BaaS平台，结合pgvector扩展，为phoneGPT提供了高效的向量存储和相似度计算能力。通过自定义SQL函数，实现了灵活的检索策略配置。

遇到的挑战与解决方案

1. TypeScript配置问题

在开发过程中，我们遇到了ts-node编译时不支持ESM模块的问题。通过调整tsconfig.json配置，设置适当的模块解析策略，最终解决了这一兼容性问题。

2. AI SDK版本差异

开发过程中发现，AI SDK的检索功能在不同版本间存在差异，导致调试困难。通过仔细阅读最新文档，调整API调用方式，最终解决了这一问题。

3. 向量相似度计算优化

在实现向量相似度计算时，我们需要确保查询效率和结果相关性的平衡。通过反复测试，确定了合适的相似度阈值和返回结果数量，在保证查询速度的同时，确保了回答质量。

总结与展望

phoneGPT项目成功实现了基于RAG技术的手机领域专业问答系统，通过整合现代前端技术、大语言模型和向量数据库，为用户提供了准确、实时的手机知识问答服务。

未来，我们计划在以下方向进一步优化和扩展项目：

1. 多模态支持：增加图片、视频等多媒体内容的理解和生成能力
2. 知识图谱：引入知识图谱技术，进一步提升知识推理和关联能力
3. 模型优化：探索使用更小、更高效的模型，降低推理成本
4. 个性化推荐：根据用户历史查询和偏好，提供个性化的手机购买和使用建议

phoneGPT项目不仅是一个实用的手机知识问答工具，也是探索RAG技术在垂直领域应用的一次成功实践，为构建其他专业领域的智能问答系统提供了有价值的参考。

---

项目技术栈：Next.js 15、React 19、TypeScript、TailwindCSS、LangChain、OpenAI API、Supabase、Puppeteer