Spring-GPT智谱清言AI项目(附源码)

一、项目介绍

本项目是Spring AI第三方调用整合智谱请言（官网是：https://open.bigmodel.cn）的案例，回答响应流式输出显示，这里使用的是免费模型，需要其他模型可以去 https://www.bigmodel.cn/pricing 切换。

在这里主要是完整地描述前后端开发和第三方调用的过程，SSE流式请求响应，MD稳定渲染显示等。

二、后端开发

后端使用的是Java，版本是JDK17，spring-boot版本是3.0.2，下面是pom.xml配置文件:

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <groupId>com</groupId>
    <artifactId>spring-gpt-service</artifactId>
    <version>0.0.9</version>
    <name>spring-gpt-service</name>
    <description>spring-gpt-service</description>
    <!-- 版本信息 -->
    <properties>
        <java.version>17</java.version>
        <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
        <project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
        <spring-boot.version>3.0.2</spring-boot.version>
    </properties>

    <!-- 依赖 -->
    <dependencies>
        <!-- web -->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
        <!-- lombok -->
        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
            <optional>true</optional>
        </dependency>
        <!-- test -->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>
        <!-- oapi -->
        <dependency>
            <groupId>cn.bigmodel.openapi</groupId>
            <artifactId>oapi-java-sdk</artifactId>
            <version>release-V4-2.3.0</version>
        </dependency>
        <!-- okhttp -->
        <dependency>
            <groupId>com.squareup.okhttp3</groupId>
            <artifactId>okhttp</artifactId>
            <version>4.9.3</version>
        </dependency>
        <!-- gson -->
        <dependency>
            <groupId>com.google.code.gson</groupId>
            <artifactId>gson</artifactId>
            <version>2.8.8</version>
        </dependency>
        <dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>fastjson</artifactId>
            <version>1.2.75</version>
        </dependency>
        <!-- flux -->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-webflux</artifactId>
        </dependency>
    </dependencies>

    <dependencyManagement>
        <dependencies>
            <dependency>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-dependencies</artifactId>
                <version>${spring-boot.version}</version>
                <type>pom</type>
                <scope>import</scope>
            </dependency>
        </dependencies>
    </dependencyManagement>

    <build>
        <plugins>
            <!--打包jar插件配置-->
            <plugin>
                <groupId>org.apache.maven.plugins</groupId>
                <artifactId>maven-compiler-plugin</artifactId>
                <version>3.8.1</version>
                <configuration>
                    <source>17</source>
                    <target>17</target>
                    <encoding>UTF-8</encoding>
                </configuration>
            </plugin>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
                <version>${spring-boot.version}</version>
                <executions>
                    <execution>
                        <goals>
                            <goal>repackage</goal>
                        </goals>
                    </execution>
                </executions>
            </plugin>
        </plugins>
    </build>

</project>

由于Get请求参数直接在链接上会受到换行符\n或\r的限制，改用Post请求，使用json封装请求参数，下面是RequestData类：

import lombok.Data;

@Data
public class RequestData {
    private String msg;
}

接口层accumulator.getDelta().getContent()这句代码是返回每次的具体结果

 /**
 * 通过ModelApiResponse.getFlowable()获取流式数据，最后通过blockingGet()获取最终结果
 * System.out.print(accumulator.getDelta().getContent());  // 这句代码是返回的具体结果
 * 因为直接SSE传text,受结束符\n影响，可以使用base64传输
 */ 
@PostMapping(value = "/zp2", produces = MediaType.TEXT_EVENT_STREAM_VALUE)
    public Flux<String> testSseInvoke(@RequestBody RequestData requestData) {
        String msg = requestData.getMsg();
        List<ChatMessage> messages = new ArrayList<>();
        ChatMessage chatMessage = new ChatMessage(ChatMessageRole.USER.value(), msg);
        messages.add(chatMessage);
        String requestId = String.format(requestIdTemplate, System.currentTimeMillis());
        ChatCompletionRequest chatCompletionRequest = ChatCompletionRequest.builder()
                .model(Constants.ModelChatGLM4)
                .stream(Boolean.TRUE)
                .messages(messages)
                .requestId(requestId)
                .build();
        Flux<String> flux = Flux.create(emitter -> {
            ModelApiResponse sseModelApiResp = client.invokeModelApi(chatCompletionRequest);
            if (sseModelApiResp.isSuccess()) {
                AtomicBoolean isFirst = new AtomicBoolean(true);
                mapStreamToAccumulator(sseModelApiResp.getFlowable())
                        .doOnNext(accumulator -> {
//                            if (isFirst.getAndSet(false)) {
//                                String base64Msg = Base64.getEncoder().encodeToString("Response: ".getBytes(StandardCharsets.UTF_8));
//                                emitter.next(base64Msg);
//                            }
                            if (accumulator.getDelta() != null && accumulator.getDelta().getTool_calls() != null) {
                                try {
                                    String jsonString = mapper.writeValueAsString(accumulator.getDelta().getTool_calls());
                                    String tool = "tool_calls: " + jsonString;
                                    String base64Msg = Base64.getEncoder().encodeToString(tool.getBytes(StandardCharsets.UTF_8));
                                    emitter.next(base64Msg);
                                } catch (Exception e) {
                                    String err = "Error converting tool_calls to JSON: " + e.getMessage();
                                    String base64Msg = Base64.getEncoder().encodeToString(err.getBytes(StandardCharsets.UTF_8));
                                    emitter.next(base64Msg);
                                }
                            }
                            if (accumulator.getDelta() != null && accumulator.getDelta().getContent() != null) {
                                String content = accumulator.getDelta().getContent();
                                String base64Msg = Base64.getEncoder().encodeToString(content.getBytes(StandardCharsets.UTF_8));
                                // 具体结果
                                // System.out.print(content);
                                emitter.next(base64Msg);
                            }
                        })
                        .doOnComplete(() -> {
                            emitter.next("\n");
                            emitter.complete();
                        })
                        .subscribe();
            } else {
                emitter.next("Error: " + sseModelApiResp.getError() + "\n");
                emitter.complete();
            }
        });
        return flux;
    }

三、前端实现

前端使用Vue3，具体其他库详见项目的package.json文件

pnpm create vue@latest

其中使用md-editor-v3来做MD文档格式显示

 pnpm add md-editor-v3

下面是在组件中的具体使用：

<script lang="ts" setup>
import { MdPreview } from 'md-editor-v3';
import 'md-editor-v3/lib/preview.css';
</script>

<LayoutContent class="content">
          <!-- 聊天列表 -->
          <ul class="chat-list" ref="messageListRef">
            <li class="chat-item" :class="`chat-item--${msg.role}`" v-for="msg in chatMessages">
              <MdPreview style="padding: 0; background-color: transparent;" type="String" :model-value="msg.content"/>
            </li>
            <li class="chat-item chat-item--system" :class="{ hidden: !isLoading }">
              <MdPreview :model-value="messagePlaceholder"/>
              <Spin/>
            </li>
          </ul>
</LayoutContent>