PhoneGPT: 基于RAG技术的专业手机知识库聊天机器人实现

约翰_麦卡岩
108 阅读7分钟

在当今AI技术飞速发展的时代，构建一个针对特定领域的智能问答系统已经成为许多开发者的目标。PhoneGPT项目正是这样一个尝试，它结合了检索增强生成(RAG)技术与大语言模型的能力，打造了一个专注于手机知识领域的专业聊天机器人。本文将详细解析PhoneGPT的技术实现、架构设计以及开发过程中的关键技术点。

项目概述与技术选型

PhoneGPT是一个基于Next.js框架开发的专业领域聊天机器人，其核心功能包括：

  • 基于RAG技术的手机知识库检索与增强生成
  • 实时流式输出AI回答
  • 响应式UI设计，支持移动端和PC端
  • 专业的手机知识问答能力

在技术选型上，项目采用了现代前端开发的主流技术栈：

  • 前端框架：Next.js 15.5.3，提供服务端渲染和路由管理
  • UI组件与样式：React 19.1.0 + Tailwind CSS 4，实现响应式设计
  • AI交互：AI SDK，特别是@ai-sdk/openai和@ai-sdk/react，简化大模型调用和流式输出
  • 向量数据库：Supabase，提供PostgreSQL向量存储能力
  • 爬虫与数据处理：LangChain + Puppeteer，实现知识爬取和处理
  • 图标库：Lucide-react，提供一致的图标系统
  • Markdown渲染：React-markdown，支持富文本内容显示

核心技术实现：检索增强生成(RAG)

PhoneGPT的核心竞争力在于采用了RAG技术，使聊天机器人不仅能利用大模型的通用知识，还能结合专业领域的知识库进行更准确的回答。

RAG流程解析

RAG技术的实现流程在PhoneGPT中主要分为以下几个关键步骤：

  1. 知识爬取：通过Puppeteer无头浏览器和LangChain框架，从指定网页源爬取手机相关知识
  2. 文本分块：使用LangChain提供的分块机制，将爬取的内容分割成合适大小的文本块(chunks)
  3. 向量化处理：利用OpenAI的嵌入模型(embedding)，将文本块转换为高维向量
  4. 向量存储：将文本块及其向量表示存储到Supabase向量数据库中
  5. 检索增强：用户提问时，先将问题向量化，然后在Supabase中进行相似度搜索，获取相关知识
  6. 生成回答：将检索到的相关知识作为上下文，结合用户问题发送给大模型，生成更准确的回答

向量数据库设计

项目在Supabase中创建了专用的chunks表来存储知识库内容：

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)
);

该表结构设计简洁而高效，包含文本内容、向量数据、来源URL和更新时间等关键字段。

相似度搜索实现

为了实现高效的相似度搜索，项目在Supabase中定义了自定义SQL函数get_relevant_chunks：

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;
$$;

这个函数利用PostgreSQL的pgvector扩展提供的<=>操作符计算向量间距离，并将其转换为相似度分数(1-距离)，从而实现高效的语义搜索。

前端架构与用户体验优化

PhoneGPT在前端实现上融合了多项现代Web开发技术，为用户提供流畅的交互体验。

流式输出实现

项目的一大亮点是实现了AI回答的流式输出，让用户能够实时看到回答内容的生成过程，而不必等待整个回答完成。这一功能主要通过@ai-sdk/react提供的useChat hook实现，只需一行代码即可完成复杂的流式输出逻辑封装：

// 前端组件中使用useChat hook实现流式输出
const { messages, input, handleInputChange, handleSubmit } = useChat();

在服务端，通过streamText函数和toDataStreamResponse方法将AI生成的内容转换为可流式传输的响应：

const result = await streamText({...});
return result.toDataStreamResponse();

响应式UI设计

项目采用Tailwind CSS实现了完全响应式的用户界面，特别考虑了移动端和PC端的不同体验：

  • 移动设备优先的设计理念
  • 使用max-w-3xl等响应式类，在小屏幕上自动适配宽度
  • 在PC端通过mx-auto实现内容居中，提升阅读体验
  • 合理利用任意值(Arbitrary Value)如80vh，实现灵活布局

组件化与类型安全

项目采用TypeScript开发，为所有组件和函数添加了严格的类型定义，确保代码的健壮性和可维护性：

  • 组件props的类型定义
  • 数据结构的接口声明
  • API响应的类型约束

爬虫脚本设计与实现

PhoneGPT的知识库构建依赖于精心设计的爬虫脚本，该脚本负责从网络获取手机相关知识并导入数据库。

爬虫脚本架构

项目的爬虫脚本主要通过seed.ts文件实现，使用了以下关键技术：

  • TypeScript结合ts-node，实现直接运行TypeScript代码
  • LangChain框架，提供爬虫和数据处理能力
  • Puppeteer无头浏览器，模拟真实浏览器行为获取网页内容
  • Supabase客户端，将处理后的数据存储到向量数据库
  • dotenv，管理环境变量和配置信息

数据处理流程

爬虫脚本的数据处理流程主要包括：

  1. 爬取网页内容
  2. 使用正则表达式等工具清理HTML标签和无关内容
  3. 将清理后的文本分块
  4. 为每个文本块生成向量表示
  5. 将文本块和向量存储到Supabase数据库

这一流程确保了知识库内容的质量和检索的准确性。

系统约束与优化

为了确保系统的专业性和稳定性，PhoneGPT设置了一系列约束和优化措施：

回答约束

系统被明确设计为只回答手机相关问题，对于超出范围的提问会礼貌地拒绝，这通过精心设计的prompt模板实现：

你是一个智能助手，你的任务是回答用户的问题。
上下文:{context}
用户问题:{userMessage}
回答:

性能优化

项目在多个层面进行了性能优化：

  • 相似度搜索时设置阈值(0.7)，只返回足够相关的结果
  • 限制每次搜索返回的结果数量(3条)，平衡相关性和响应速度
  • 使用流式输出，减少用户等待感知
  • 向量数据库索引优化，提升检索效率

技术挑战与解决方案

在开发过程中，团队遇到了一些技术挑战并成功解决：

  1. TypeScript模块兼容性问题：解决了ts-node编译时不支持ESM模块的问题，通过调整tsconfig.json配置实现了CommonJS和ESM的兼容

  2. AI SDK版本问题：处理了AI SDK提供的代码与最新版本不兼容的情况，通过调试和修改代码确保了功能正常

  3. 环境配置问题：通过合理使用dotenv管理环境变量，确保了开发、测试和生产环境的一致性

项目价值与应用场景

PhoneGPT项目展示了如何将现代AI技术与专业领域知识结合，构建实用的智能问答系统。其主要价值和应用场景包括：

  • 手机购买决策支持：帮助用户了解不同手机型号的特点和差异
  • 手机使用问题解答：提供手机故障排除和使用技巧
  • 手机行业知识普及：传播手机技术发展和行业动态
  • 客户服务自动化：为手机厂商或零售商提供智能客服解决方案

结语

PhoneGPT项目成功地将RAG技术应用于手机知识问答场景，展示了现代前端技术与AI能力结合的巨大潜力。通过精心设计的架构和优化的实现，项目实现了专业、高效、用户友好的手机知识问答系统。

随着AI技术的不断发展和知识图谱的持续完善，类似PhoneGPT这样的垂直领域智能助手将会在越来越多的行业和场景中发挥重要作用，为用户提供更精准、更专业的信息服务。PhoneGPT的实现经验和技术方案，为类似项目的开发提供了有价值的参考。

avatar
文章
阅读
粉丝