大模型技术推动翻译进入新阶段
过去，我们主要依赖百度或其他团队提供的翻译API来实现中英、英中、日中、中日等多种语言间的翻译。然而，随着大模型技术的发展，其在内容理解能力上已远超传统翻译工具。现在，我们可以完全依靠这些先进的大模型来进行更准确、自然的多语言翻译工作，这标志着翻译技术进入了一个新的阶段。
本例子使用spring ai alibaba + QWen千问 api 完成，你可以跑通以后换自己的实现。
QWen 目前 有100万免费Token额度，可以快速实现需求。同时，因为qwen 也是个开源的模型，我们可以自己搭建模型来实现免费使用
Spring AI Alibaba功能与应用介绍
Spring AI Alibaba 是 Spring AI 的一个实现，专为整合阿里云的AI能力而设计。它遵循了Spring Cloud Alibaba的最佳实践，是国内最好的Spring AI实现之一。Spring AI Alibaba 支持多种功能和能力，包括模型调用、Prompt模板、检索增强生成（RAG）、文生图、文字识别等。通过标准化接口，Spring AI Alibaba允许开发者轻松切换不同的AI服务提供者，并提供了便捷的开发体验。本文将重点介绍如何使用Prompt模板和模型调用来接入Spring AI Alibaba，展示其强大的集成能力和灵活性。
阿里巴巴云开发的Qwen模型在多个测评中表现出色，而且是开源的
通义千问Qwen是阿里巴巴云开发的大型语言模型，在MMLU、TheoremQA、GPQA等基准测评中表现出色，超越了Llama 3 70B。该模型在Hugging Face开源大模型排行榜Open LLM Leaderboard上荣登榜首，展示了其卓越的能力和性能。通义千问Qwen致力于提供准确、有用的信息，并为用户提供高质量的语言理解和生成体验。
基于SpringBoot与Spring AI Alibaba集成，实现英文到中文的翻译功能
基于SpringBoot集成Spring AI Alibaba，构建一个英文翻译中文能力的项目，支持使用Prompt的流返回接口，并且需要支持CORS跨域。我们将利用ChatClient的能力来处理翻译请求，通过配置和代码实现这一功能。根据提供的知识内容，以下是详细的步骤。
前提条件
确保满足以下环境要求：
- JDK版本至少为17。
- Spring Boot版本至少为3.3.x。
步骤
1. 配置阿里云API Key
首先，在阿里云平台上申请通义千问的API Key。访问阿里云百炼页面，登录您的账号，然后按照指引完成服务开通并生成API Key。记录此Key值，稍后用于项目配置。
配置API Key至环境变量中：
export AI_DASHSCOPE_API_KEY=${REPLACE-WITH-VALID-API-KEY}2. 添加仓库与依赖
在项目的pom.xml文件中添加必要的Maven仓库和依赖项，以便引入Spring AI Alibaba相关的库：
<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-M3.1</version>
</dependency>
<!-- 其他依赖 -->
</dependencies>
同时，确保你的pom.xml包含如下Spring Boot父级配置（如果还未添加）：
<parent>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-parent</artifactId>
<version>3.3.4</version>
<relativePath/>
</parent>
3. 创建Controller及ChatClient实例
接下来定义一个控制器类，该类将接收GET请求，并通过ChatClient调用AI模型进行英文到中文的翻译。这里我们还启用了CORS以允许跨源请求。
@RestController
@RequestMapping("/ai")
@CrossOrigin(origins = "*")
public class TranslationController {
private final ChatClient chatClient;
public TranslationController(ChatClient.Builder builder) {
this.chatClient = builder.build();
}
@GetMapping(value = "/steamChat", produces = MediaType.TEXT_EVENT_STREAM_VALUE)
public Flux<String> translate(@RequestParam String input) {
Prompt prompt = new Prompt("Translate the following English text into Chinese: " + input);
return chatClient.prompt(prompt).stream().content();
}
}4. 配置application.properties
最后，在application.properties或application.yml中加入API Key配置：
spring.ai.dashscope.api-key=${AI_DASHSCOPE_API_KEY}解释
上述步骤实现了基于Spring Boot的应用程序，集成了Spring AI Alibaba组件，提供了一个简单的英文转中文翻译服务。用户可以通过向http://localhost:8080/ai/steamChat?input=...发起GET请求来获取翻译结果，其中input参数携带待翻译的英文文本。本示例中的控制器利用了ChatClient以及Prompt机制来与AI模型交互，从而完成翻译任务。此外，为了方便开发调试，我们开启了CORS支持，使得不同源的前端应用也可以直接测试此API。
配置React应用以处理流式数据响应
在构建一个基于React的前端项目，该前端能够处理后端以流的形式（flux<String>）返回的数据时，你需要确保你的前端应用能正确地读取并展示这些数据。在这个场景下，后端通过URL http://localhost:8080/ai/steamChat?input=… 提供了一个接口，用于接收输入参数并通过流方式返回响应。接下来将详细说明如何配置这样的React应用。
构建项目并填写代码
首先，创建一个新的 React 应用并安装所需的依赖：
npx create-react-app frontend
cd frontend
npm install接着，在frontend目录内创建必要的文件结构和内容。
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>Stream Chat App</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
src/index.js
此文件负责渲染React应用程序的主要组件到DOM中。
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);注意：这里使用了ReactDOM.createRoot而非ReactDOM.render来符合React 18+版本的最佳实践。
src/App.js
定义应用的核心组件App，它包含一个名为ChatComponent的子组件。
import React from 'react';
import ChatComponent from './components/ChatComponent';
function App() {
return (
<div className="App">
<ChatComponent />
</div>
);
}
export default App;src/components/ChatComponent.js
这是实现与后端通信以及显示消息的关键部分。
import React, { useState } from 'react';
function ChatComponent() {
const [input, setInput] = useState('');
const [messages, setMessages] = useState('');
const handleInputChange = (event) => {
setInput(event.target.value);
};
const handleSendMessage = async () => {
try {
const response = await fetch(`http://localhost:8080/ai/steamChat?input=${input}`);
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', error);
}
};
const handleClearMessages = () => {
setMessages('');
};
return (
<div>
<input
type="text"
value={input}
onChange={handleInputChange}
placeholder="Enter your message"
/>
<button onClick={handleSendMessage}>Send</button>
<button onClick={handleClearMessages}>Clear</button>
<div>
<h3>Messages:</h3>
<pre>{messages}</pre>
</div>
</div>
);
}
export default ChatComponent;上述步骤涵盖了从零开始设置这样一个React应用所需的所有细节，包括如何通过HTTP请求获取流式响应，并将其逐步显示给用户。请确保你的后端服务支持CORS策略以便于跨源请求可以成功执行。
