搭建专属的英语学习chatgpt，基于 spring AI Alibaba 和SpringBoot构建

本文链接：https://blog.csdn.net/whisperzzza/article/details/142568028

构建专属学英语的机器人，基于 spring AI Alibaba 和SpringBoot

学英语的机器人介绍

在学英语这个场景下，我们往往需要有个机器人跟我们对话，并能够实时告诉我我们每句话的语法错误，并引导我们做下一步的对话动作。

这时候就我们就可以自己做一个AI助手，不仅能够自动检测并纠正用户输入的英文错误，确保语言使用的准确性，还可以根据用户的兴趣点或特定需求生成相关话题，促进更自然流畅的对话交流。通过这种方式，学习者能够在模拟真实交流环境中得到充分练习，从而有效提高其英语听说能力。

我们使用基于通义千问等大模型实现高质量的文本生成和prompt能力来做到这件事。

Spring AI 是什么

Spring AI是一个专为AI工程设计的应用框架，它将Spring生态系统的设计原则如可移植性和模块化应用于AI领域。Spring AI的核心优势在于其标准化了不同AI提供者（例如OpenAI、Azure、阿里云等）的接口实现，允许开发者编写一次代码后，只需更改配置即可轻松切换不同的AI服务。这不仅简化了与多个AI平台对接的过程，还极大减少了开发和迁移工作量。此外，由于直接兼容Flux流输出，Spring AI可以无缝集成到基于流处理的各种机器人模型中。通过与SpringBoot的高度整合，Spring AI进一步提升了开发效率，使得在SpringBoot项目中添加强大的AI功能变得异常简单。

Spring AI alibaba 是什么？

Spring AI Alibaba 是 Spring AI 的一个实现，专为与阿里云的百炼系列云产品中的大模型进行集成而设计。它基于 Spring Boot 构建，并遵循 Spring 生态系统的设计原则，如可移植性和模块化。Spring AI Alibaba 允许开发者轻松地在 Spring Boot 项目中接入和使用阿里云通义大模型的各项能力，包括对话、文生图等，无需深入研究复杂的 API 文档。其核心优势在于通过标准化接口简化了不同 AI 提供商之间的切换过程，极大减少了开发和迁移工作量。同时，它还提供了诸如 Prompt Template 和 OutputParser 等实用功能，进一步增强了开发效率。

SpringBoot介绍

Spring Boot 是一个用于简化新 Spring 应用的初始搭建以及开发过程的框架。它通过约定大于配置的理念，使得开发者可以快速构建独立的、生产级别的基于 Spring 的应用，而无需过多配置。Spring Boot 内嵌了 Tomcat、Jetty 或 Undertow 等服务器，可以直接打包成可执行的 JAR 文件运行。

详细的构建步骤

构建后端

项目构建步骤

首先，我们需要创建一个基于 Spring Boot 的项目，并引入 spring-ai-alibaba-starter 依赖。然后，我们将配置支持 CORS 跨域的 GET 接口 /ai/chatStream，该接口接受用户输入并返回 Flux 流数据。此外，我们将使用 Prompt 模板来处理用户的英文错误纠正和内容扩展。

步骤 1: 创建 Spring Boot 项目

确保你已经安装了 JDK 17 或以上版本，以及 Spring Boot 3.3.x 版本。你可以通过 Spring Initializr（https://start.spring.io/）创建新项目。选择以下依赖：

Spring Web
Spring AI Alibaba Starter

生成项目后，导入到你喜欢的 IDE 中。

步骤 2: 添加阿里云仓库与相关依赖

在项目的 pom.xml 文件中添加如下代码片段以启用 Maven 访问阿里云的快照及里程碑版库：

<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> 部分加入对 spring-ai-alibaba-starter 的引用：

<dependency>
    <groupId>com.alibaba.cloud.ai</groupId>

    <artifactId>spring-ai-alibaba-starter</artifactId>

    <version>1.0.0-M2</version>

</dependency>

同时，请确保你的项目继承了正确的 Spring Boot 父 POM。

步骤 3: 配置通义千问API密钥

你需要从阿里云获取通义千问 API 密钥。按照[知识]中的说明操作，并将获得的密钥设置为环境变量或直接写入 application.properties 文件中：

spring.ai.dashscope.api-key=YOUR_API_KEY

步骤 4: 编写Controller实现流式响应

接下来，我们将在项目中编写 Controller 类，它包含了一个 GET 请求处理器，该处理器利用 ChatClient 与通义大模型交互，并以 Flux 形式返回消息。

@RestController
@RequestMapping("/ai")
public class ChatController {

    @Autowired
    private ChatClient chatClient;

    @Value("classpath:/prompts/correct-and-extend-prompt.st")
    private Resource resource;

    @GetMapping(value = "/chatStream")
    public Flux<String> chat(@RequestParam String input) {
     	PromptTemplate promptTemplate = new PromptTemplate(resource);
		Prompt prompt = promptTemplate.create(Map.of("input", input));
		return chatClient.prompt(prompt)
				.stream().content();
    }
}

这里定义了一个名为 chat 的方法，它接收用户输入作为参数，并构造一个 Prompt，该 Prompt 不仅会纠正输入中的英文错误，还会基于此进行延展提问。最后，通过调用 content() 方法将结果以 Flux 流形式返回给客户端。

correct-and-extend-prompt.st

Correct the following English sentence: "{input}"
Then, extend the corrected sentence and ask a follow-up question in English.

步骤 5: 启动应用

完成上述所有配置后，可以启动你的 Spring Boot 应用了。如果一切正常，现在你应该能够访问 http://localhost:8080/ai/chatStream?input=your_message 来测试这个新的聊天接口了。

注意：别忘了确保前端请求时正确设置了跨域资源共享(CORS)，可以通过在 Spring Security 配置类中开启全局CORS支持或者针对特定控制器增加注解方式解决。

以上就是整个过程的详细描述，希望对你有所帮助！

构建前端

为了构建一个基于React的前端项目，该前端项目能够与返回flux<String>流数据的后端接口进行交互，我们可以遵循如下步骤来设置我们的开发环境和编写必要的代码。这里，我们假设后端接口URL为http://localhost:8080/ai/chatStream?input=...，它支持通过GET请求接收输入参数，并以流的形式返回响应。

创建新的React应用

首先，您需要在您的机器上安装Node.js及npm（如果尚未安装的话）。之后，执行以下命令来创建一个新的React应用并切换至其目录：

npx create-react-app frontend
cd frontend

接下来，请确保安装所有必需的依赖项：

npm install

这将为您搭建好基础的React项目结构。

编写基本文件内容

`public/index.html`

保持默认内容不变或仅根据需要调整标题等元素。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Chat App</title>

</head>

<body>
  <div id="root"></div>

</body>

</html>

`src/index.js`

同样地，对于入口JS文件，通常不需要做太多修改：

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`

此文件定义了应用程序的主要组件布局，我们将引入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`

这里是关键所在——处理用户输入、发送请求给服务器以及实时展示接收到的数据流。我们使用useState来管理状态变量messages用于存储消息历史记录。

import React, { useState } from 'react';

const 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/chatStream?input=${input}`);
      if (!response.ok) throw new Error(response.statusText);

      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((prev) => prev + chunk);
      }
    } 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>

      <pre>{messages}</pre>

    </div>

  );
};

export default ChatComponent;

请注意，在调用fetch时指定了正确的URL路径，并且我们在读取响应体的过程中逐步更新了messages状态。这种方式非常适合处理来自服务器的持续流式数据输出。