SpringBoot玩转股票数据分析:雪球API +Spring AI Alibaba的函数调用(function call)实现详解

Spring AI Alibaba 是什么的说明

Spring AI Alibaba 是 Spring AI 的一个实现，它基于阿里云百炼模型服务，提供了一套用于开发聊天、文生图、文生语音等生成式AI应用的框架。

其核心优势在于通过一套良好的抽象，标准化了不同AI提供者的接口实现，使得开发者可以轻松切换不同的AI服务而无需重写大量代码。

此外，它支持多种实用功能如Prompt模板和外部数据接入，极大减少了开发和迁移的工作量，让AI能力集成变得更加简便高效。

目前百炼有免费额度，有大量不花钱的tokens，赶紧玩起来 。

通过function calling 调用东方财富，返回数据的整体步骤说明

这个演示样例主要是希望通过模拟从东方财富网的api接口调用返回企业利润和营收数据，然后通过大模型来分析这个数据，最终给出建议。

主要希望演示，怎么通过spring boot + spring ai alibaba，让大模型来做一次远程的函数调用，并依托于函数调用的结果来做后续分析。

详细步骤：

1. 环境准备

• JDK版本：确保你的JDK版本在jdk17（含）以上。

• Spring Boot版本：需要你的Spring Boot版本在3.3.x以上。

2. 获取API Key

前往阿里云百炼页面，登录您的账号后开通“百炼大模型推理”服务。服务开通成功后，在个人中心创建一个新的API KEY，并记录下来用于后续配置。

3. 配置环境变量

设置通义千问API KEY的环境变量：

export AI_DASHSCOPE_API_KEY=your-api-key

4. 添加仓库与依赖

在pom.xml中添加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-M2</version>

    </dependency>

    <!-- Spring Boot parent project -->
    <parent>
        <groupId>org.springframework.boot</groupId>

        <artifactId>spring-boot-starter-parent</artifactId>

        <version>3.3.4</version>

        <relativePath/>
    </parent>

</dependencies>

5. 定义Function

定义一个Java函数来调用雪球API并解析返回的数据：

import com.fasterxml.jackson.annotation.JsonProperty;
import com.fasterxml.jackson.annotation.JsonPropertyDescription;

public class StockService implements Function<StockRequest, String> {
    @Override
    public String apply(StockRequest request) {
        // 实现网络请求逻辑，此处简化处理，实际情况可以调用url:https://stock.xueqiu.com/v5/stock/finance/cn/income.json?symbol=SH600900&type=all&is_detail=true&count=1 来获取实时的数据
        return "模拟数据：净利润为1.158亿，总收入为34.808亿";
    }

    public static class StockRequest {
        @JsonProperty(required = true, value = "股票代码")
        @JsonPropertyDescription("如SH600900")
        private String symbol;

        public StockRequest() {}

        public StockRequest(String symbol) {
            this.symbol = symbol;
        }

        public String getSymbol() {
            return symbol;
        }

        public void setSymbol(String symbol) {
            this.symbol = symbol;
        }
    }
}

6. 注册Function

通过Spring Configuration注册上述定义的函数：

@Configuration
public class AppConfig {

    @Bean
    @Description("查询指定股票代码的财务报表")
    public Function<StockService.StockRequest, String> stockFunction() {
        return new StockService();
    }
}

7. 使用PromptTemplate与ChatClient

在Controller中结合PromptTemplate、ChatClient以及Function Calling实现功能：

@RestController
@RequestMapping("/ai")
@CrossOrigin(origins = "*")
public class ChatController {

    private final ChatClient chatClient;
    
    @Autowired
    public ChatController(ChatClient.Builder builder) {
        this.chatClient = builder.build();
    }

    @GetMapping("/chatSteam")
    public Flux<String> chatSteam(@RequestParam String input) {
        PromptTemplate promptTemplate = new PromptTemplate("请根据{symbol}的最新财报，分析其利润率");
        
        DashScopeChatOptionsBuilder opsBuilder = DashScopeChatOptions.builder()
                .withFunction("stockFunction");
        DashScopeChatOptions ops = opsBuilder.build();
        
        Map<String, Object> map = Map.of("symbol", input);  // 模拟传入股票代码
        Prompt promp = promptTemplate.create(map, ops);
        return chatClient.prompt(promp).stream().content();
    }
}

8. 配置application.properties

最后，在application.properties中设置API Key:

spring.ai.dashscope.api-key=${AI_DASHSCOPE_API_KEY}

说明： 

这样就基本可以完成一次调用了，里面重要的关键点是函数的描述，函数参数的描述，大模型是基于这两个来决定什么时候调用函数的。

构建前端

构建项目并填写代码

为了创建一个基于React的前端项目，能够通过http://…../ai/chatSteam?input=…接口与后端通信，并处理返回的流式数据（flux），请按照以下步骤操作。

首先，确保你的开发环境已经安装了Node.js和npm。接着，执行如下命令来创建一个新的React应用并安装所需的依赖：

npx create-react-app frontend
cd frontend
npm install

接下来，在项目中进行必要的配置和代码编写工作。

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

这里实现了一个简单的聊天输入框及消息显示区域。当用户点击发送按钮时，会向指定URL发起请求并将响应内容实时更新至页面上。

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 {
      // 注意替换这里的URL为你实际使用的后端服务地址
      const response = await fetch(`http://your-backend-url/ai/chatSteam?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:', 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;

运行项目

完成上述设置之后，你可以启动前端应用来看看效果了。

1. 打开终端进入项目目录。

1. 输入以下命令启动React开发服务器：

npm start

这将开启一个本地开发服务器，默认情况下会在浏览器中打开http://localhost:3000/地址，展示你的聊天应用。记得在尝试与后端交互前确认该服务已经部署且可用。

小结说明：

这样就完成了整个项目的全部流程，当然里面还是个例子，真实情况下，需要解析远端返回的xml地址，并做分析，这些您可以在业务代码跑通以后自己做各类探索。