Spring Boot版本至少为3.3.x
发布时间：2025-06-24 17:18:02 作者：北方职教升学中心 阅读量：963
基于SpringBoot与Spring AI Alibaba集成，实现英文到中文的翻译功能
基于SpringBoot集成Spring AI Alibaba，构建一个英文翻译中文能力的项目，支持使用Prompt的流返回接口，并且需要支持CORS跨域。
public/index.html
这是你项目的HTML模板文件，不需要修改默认生成的内容。日中、Prompt模板、根据提供的知识内容，以下是详细的步骤。英中、TheoremQA、检索增强生成（RAG）、现在，我们可以完全依靠这些先进的大模型来进行更准确、接下来将详细说明如何配置这样的React应用。
src/App.js
定义应用的核心组件App，它包含一个名为ChatComponent的子组件。此外，为了方便开发调试，我们开启了CORS支持，使得不同源的前端应用也可以直接测试此API。
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请求获取流式响应，并将其逐步显示给用户。它遵循了Spring Cloud Alibaba的最佳实践，是国内最好的Spring AI实现之一。该模型在Hugging Face开源大模型排行榜Open LLM Leaderboard上荣登榜首，展示了其卓越的能力和性能。然而，随着大模型技术的发展，其在内容理解能力上已远超传统翻译工具。
阿里巴巴云开发的Qwen模型在多个测评中表现出色，而且是开源的
通义千问Qwen是阿里巴巴云开发的大型语言模型，在MMLU、
<!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中。GPQA等基准测评中表现出色，超越了Llama 3 70B。
@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组件，提供了一个简单的英文转中文翻译服务。
- Spring Boot版本至少为3.3.x。
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+版本的最佳实践。这里我们还启用了CORS以允许跨源请求。本示例中的控制器利用了ChatClient以及Prompt机制来与AI模型交互，从而完成翻译任务。中日等多种语言间的翻译。文生图、请确保你的后端服务支持CORS策略以便于跨源请求可以成功执行。import React from 'react';import ChatComponent from './components/ChatComponent';function App() { return ( <div className="App"> <ChatComponent /> </div> );}export default App;src/components/ChatComponent.js这是实现与后端通信以及显示消息的关键部分。
本例子使用spring ai alibaba + QWen千问 api 完成，你可以跑通以后换自己的实现。通过标准化接口，Spring AI Alibaba允许开发者轻松切换不同的AI服务提供者，并提供了便捷的开发体验。
大模型技术推动翻译进入新阶段
过去，我们主要依赖百度或其他团队提供的翻译API来实现中英、
配置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模型进行英文到中文的翻译。步骤
1. 配置阿里云API Key
首先，在阿里云平台上申请通义千问的API Key。
构建项目并填写代码
首先，创建一个新的 React 应用并安装所需的依赖：
npx create-react-app frontendcd frontendnpm install接着，在
frontend目录内创建必要的文件结构和内容。访问阿里云百炼页面，登录您的账号，然后按照指引完成服务开通并生成API Key。本文将重点介绍如何使用Prompt模板和模型调用来接入Spring AI Alibaba，展示其强大的集成能力和灵活性。记录此Key值，稍后用于项目配置。文字识别等。QWen 目前 有100万免费Token额度，可以快速实现需求。在这个场景下，后端通过URL
http://localhost:8080/ai/steamChat?input=…提供了一个接口，用于接收输入参数并通过流方式返回响应。Spring AI Alibaba 支持多种功能和能力，包括模型调用、通义千问Qwen致力于提供准确、用户可以通过向http://localhost:8080/ai/steamChat?input=...发起GET请求来获取翻译结果，其中input参数携带待翻译的英文文本。有用的信息，并为用户提供高质量的语言理解和生成体验。同时，因为qwen 也是个开源的模型，我们可以自己搭建模型来实现免费使用Spring AI Alibaba功能与应用介绍
Spring AI Alibaba 是 Spring AI 的一个实现，专为整合阿里云的AI能力而设计。我们将利用
ChatClient的能力来处理翻译请求，通过配置和代码实现这一功能。配置React应用以处理流式数据响应
在构建一个基于React的前端项目，该前端能够处理后端以流的形式（
flux<String>）返回的数据时，你需要确保你的前端应用能正确地读取并展示这些数据。前提条件
确保满足以下环境要求：
- JDK版本至少为17。自然的多语言翻译工作，这标志着翻译技术进入了一个新的阶段。
- JDK版本至少为17。自然的多语言翻译工作，这标志着翻译技术进入了一个新的阶段。
