rag 需求产生的背景介绍：
在使用大模型时，常遇到的问题之一是模型可能产生幻觉，即生成的内容缺乏准确性。此外，由于大模型不直接访问企业的专有数据，其响应可能会显得泛泛而谈，不够精准或具体，无法充分利用企业内部的特定信息进行个性化回答。这些问题限制了大模型在某些需要高精度和定制化场景中的应用效果。
整体说明
我们使用了Spring AI来做检索增强，选择Spring AI是因为它解决了过去用Java编写AI应用时缺乏标准化封装的问题。Spring AI提供了一套兼容市面上主要生成任务的接口，极大简化了开发流程。通过Spring AI，开发者可以轻松实现对多种模型的支持，仅需更改配置即可切换不同的AI服务提供者，从而极大地提高了开发效率和灵活性。此外，Spring AI与Spring生态系统的无缝集成，进一步确保了应用程序的可移植性和模块化设计。
Spring AI alibaba介绍
Spring AI Alibaba是专为Java开发者设计的一个框架，它集成了阿里云的AI能力，特别是通义大模型服务，使得开发者能够快速实现诸如文本生成、绘画等基于AI的功能。其核心优势在于标准化了不同AI提供者（如OpenAI、Azure、阿里云）的接口，这意味着开发者只需编写一次代码，通过简单的配置调整即可切换不同的AI服务。对于绘画或图像生成而言，Spring AI Alibaba简化了与阿里云万象模型交互的过程，允许用户轻松调用API生成高质量图像。此外，框架还提供了包括OutputParser、Prompt Template在内的实用功能，进一步降低了开发复杂度，让开发者可以专注于业务逻辑而非底层技术细节。总之，Spring AI Alibaba极大提升了使用Java进行AI应用开发的效率和灵活性。
检索增强的后端代码编写
根据提供的我了解的信息，为了实现通过检索增强（RAG）方式读取阿里巴巴的财务报表PDF，并对外提供服务，需要按照如下步骤进行配置和编码。这将允许你先调用/buildIndex构建索引，之后能够通过访问http://localhost:8080/ai/rag?message=...来获取基于该文档内容生成的回答。
前置条件
确保你的开发环境满足以下要求：
- JDK版本为17或更高。
- Spring Boot版本为3.3.x或以上。
- 从阿里云获取通义千问API key并设置环境变量
AI_DASHSCOPE_API_KEY或者直接在application.properties中配置spring.ai.dashscope.api-key。
添加Spring AI Alibaba依赖
在项目中添加必要的仓库以及spring-ai-alibaba-starter依赖项：
<repositories>
<repository>
<id>sonatype-snapshots</id>
<url>https://oss.sonatype.org/content/repositories/snapshots</url>
<snapshots>
<enabled>true</enabled>
</snapshots>
</repository>
<repository>
<id>spring-milestones</id>
<name>Spring Milestones</name>
<url>https://repo.spring.io/milestone</url>
<snapshots>
<enabled>false</enabled>
</snapshots>
</repository>
<repository>
<id>spring-snapshots</id>
<name>Spring Snapshots</name>
<url>https://repo.spring.io/snapshot</url>
<releases>
<enabled>false</enabled>
</releases>
</repository>
</repositories>
<dependencies>
<dependency>
<groupId>com.alibaba.cloud.ai</groupId>
<artifactId>spring-ai-alibaba-starter</artifactId>
<version>1.0.0-M2</version>
</dependency>
<!-- 其他必要依赖 -->
</dependencies>
同时，请确保您的pom.xml文件中定义了正确的Spring Boot父项目版本。
RAG服务类实现
创建一个名为RagService的服务类，用于处理向量存储、文档检索等逻辑：
public class RagService {
private final ChatClient chatClient;
private final VectorStore vectorStore;
private final DashScopeApi dashscopeApi = new DashScopeApi("YOUR_API_KEY_HERE");
private DocumentRetriever retriever;
public RagService(ChatClient chatClient, EmbeddingModel embeddingModel) {
this.chatClient = chatClient;
vectorStore = new DashScopeCloudStore(dashscopeApi, new DashScopeStoreOptions("financial-reports"));
retriever = new DashScopeDocumentRetriever(dashscopeApi,
DashScopeDocumentRetrieverOptions.builder().withIndexName("financial-reports").build());
}
public String buildIndex() {
String filePath = "/path/to/your/AlibabaFinancialReport.pdf";
DocumentReader reader = new DashScopeDocumentCloudReader(filePath, dashscopeApi, null);
List<Document> documents = reader.get();
vectorStore.add(documents);
return "SUCCESS";
}
public StreamResponseSpec queryWithDocumentRetrieval(String message) {
return chatClient.prompt()
.user(message)
.advisors(new DocumentRetrievalAdvisor(retriever, """
上下文信息如下。
---------------------
{documents}
---------------------
根据上下文回答问题。如果答案不在上下文中，请告知用户无法回答。
"""))
.stream();
}
}控制器类实现
最后，实现一个REST控制器以暴露/buildIndex与/rag端点：
@RestController
@RequestMapping("/ai")
public class RagController {
private final RagService ragService;
@Autowired
public RagController(RagService ragService) {
this.ragService = ragService;
}
@GetMapping("/buildIndex")
public String buildIndex() {
return ragService.buildIndex();
}
@GetMapping("/ragChat")
public Flux<String> generate(@RequestParam(value = "input") String message, HttpServletResponse response) {
response.setCharacterEncoding("UTF-8");
return ragService.queryWithDocumentRetrieval(message).content();
}
}通过上述步骤，您已经成功设置了使用RAG技术处理PDF文档并提供问答服务的基础架构。记得首先运行/buildIndex来初始化数据索引，随后可以通过/rag?message=...发起查询请求获取结果。
检索增强的前端代码编写
构建项目并填写代码
首先，创建一个新的 React 应用并安装所需的依赖：
npx create-react-app ragChatFrontend
cd ragChatFrontend
npm installpublic/index.html
编辑public/index.html文件以确保基础HTML结构正确设置。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>RAG Chat App</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
src/index.js
配置React应用入口点。
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);src/App.js
定义主应用组件，并引入聊天组件。
import React from 'react';
import RAGChatComponent from './components/RAGChatComponent';
function App() {
return (
<div className="App">
<RAGChatComponent />
</div>
);
}
export default App;src/components/RAGChatComponent.js
这是核心的聊天组件，实现了与后端流式接口的交互。这里我们假设后端支持GET方法来接收查询参数input并返回flux<String>格式的数据流。
import React, { useState } from 'react';
function RAGChatComponent() {
const [input, setInput] = useState('');
const [messages, setMessages] = useState('');
const handleInputChange = (event) => {
setInput(event.target.value);
};
const handleSendMessage = async () => {
try {
// 注意这里的URL和请求方式要与你的后端服务相匹配
const response = await fetch(`http://localhost:8080/ai/ragChat?input=${input}`);
if (!response.ok) throw new Error('Network response was not ok');
const reader = response.body.getReader();
const decoder = new TextDecoder('utf-8');
let done = false;
while (!done) {
const { value, done: readerDone } = await reader.read();
done = readerDone;
const chunk = decoder.decode(value, { stream: true });
setMessages((prevMessages) => prevMessages + chunk); // 拼接消息
}
// 在每次完整的消息接收完毕后添加分隔符
setMessages((prevMessages) => prevMessages + '\n\n------------------------\n\n');
} catch (error) {
console.error('Failed to fetch data:', error);
}
};
const handleClearMessages = () => {
setMessages('');
};
return (
<div>
<input
type="text"
value={input}
onChange={handleInputChange}
placeholder="输入您的问题..."
/>
<button onClick={handleSendMessage}>发送</button>
<button onClick={handleClearMessages}>清空</button>
<h3>聊天记录：</h3>
<pre>{messages}</pre>
</div>
);
}
export default RAGChatComponent;运行项目
完成以上步骤后，您可以通过以下命令启动前端应用进行测试：
cd ragChatFrontend
npm start这将打开一个本地服务器，默认访问地址为 http://localhost:3000，您可以在这里查看到构建好的应用程序界面。
上述实现基于React框架，并通过fetch API调用后端提供的流式数据接口。每当用户点击“发送”按钮时，会触发对指定后端服务的HTTP GET请求，随后从前端逐段读取返回的流数据并显示给用户。请注意调整实际部署时可能涉及的跨域策略（CORS）以保证前后端之间通信顺畅。
