公司部门网站设计模板下载,业务网站在线生成,兰州最好的网站开发公司,网络广告的计费方式一、项目介绍
本项目是Spring AI第三方调用整合智谱请言#xff08;官网是#xff1a;https://open.bigmodel.cn#xff09;的案例#xff0c;回答响应流式输出显示#xff0c;这里使用的是免费模型#xff0c;需要其他模型可以去 https://www.bigmodel.cn/pricing 切换…
一、项目介绍
本项目是Spring AI第三方调用整合智谱请言官网是https://open.bigmodel.cn的案例回答响应流式输出显示这里使用的是免费模型需要其他模型可以去 https://www.bigmodel.cn/pricing 切换。
在这里主要是完整地描述前后端开发和第三方调用的过程SSE流式请求响应MD稳定渲染显示等。
二、后端开发
后端使用的是Java版本是JDK17spring-boot版本是3.0.2下面是pom.xml配置文件:
?xml version1.0 encodingUTF-8?
project xmlnshttp://maven.apache.org/POM/4.0.0 xmlns:xsihttp://www.w3.org/2001/XMLSchema-instancexsi:schemaLocationhttp://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsdmodelVersion4.0.0/modelVersiongroupIdcom/groupIdartifactIdspring-gpt-service/artifactIdversion0.0.9/versionnamespring-gpt-service/namedescriptionspring-gpt-service/description!-- 版本信息 --propertiesjava.version17/java.versionproject.build.sourceEncodingUTF-8/project.build.sourceEncodingproject.reporting.outputEncodingUTF-8/project.reporting.outputEncodingspring-boot.version3.0.2/spring-boot.version/properties!-- 依赖 --dependencies!-- web --dependencygroupIdorg.springframework.boot/groupIdartifactIdspring-boot-starter-web/artifactId/dependency!-- lombok --dependencygroupIdorg.projectlombok/groupIdartifactIdlombok/artifactIdoptionaltrue/optional/dependency!-- test --dependencygroupIdorg.springframework.boot/groupIdartifactIdspring-boot-starter-test/artifactIdscopetest/scope/dependency!-- oapi --dependencygroupIdcn.bigmodel.openapi/groupIdartifactIdoapi-java-sdk/artifactIdversionrelease-V4-2.3.0/version/dependency!-- okhttp --dependencygroupIdcom.squareup.okhttp3/groupIdartifactIdokhttp/artifactIdversion4.9.3/version/dependency!-- gson --dependencygroupIdcom.google.code.gson/groupIdartifactIdgson/artifactIdversion2.8.8/version/dependencydependencygroupIdcom.alibaba/groupIdartifactIdfastjson/artifactIdversion1.2.75/version/dependency!-- flux --dependencygroupIdorg.springframework.boot/groupIdartifactIdspring-boot-starter-webflux/artifactId/dependency/dependenciesdependencyManagementdependenciesdependencygroupIdorg.springframework.boot/groupIdartifactIdspring-boot-dependencies/artifactIdversion${spring-boot.version}/versiontypepom/typescopeimport/scope/dependency/dependencies/dependencyManagementbuildplugins!--打包jar插件配置--plugingroupIdorg.apache.maven.plugins/groupIdartifactIdmaven-compiler-plugin/artifactIdversion3.8.1/versionconfigurationsource17/sourcetarget17/targetencodingUTF-8/encoding/configuration/pluginplugingroupIdorg.springframework.boot/groupIdartifactIdspring-boot-maven-plugin/artifactIdversion${spring-boot.version}/versionexecutionsexecutiongoalsgoalrepackage/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 FluxString testSseInvoke(RequestBody RequestData requestData) {String msg requestData.getMsg();ListChatMessage 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();FluxString 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 vuelatest
其中使用md-editor-v3来做MD文档格式显示 pnpm add md-editor-v3
下面是在组件中的具体使用
script langts setup
import { MdPreview } from md-editor-v3;
import md-editor-v3/lib/preview.css;
/scriptLayoutContent classcontent!-- 聊天列表 --ul classchat-list refmessageListRefli classchat-item :classchat-item--${msg.role} v-formsg in chatMessagesMdPreview stylepadding: 0; background-color: transparent; typeString :model-valuemsg.content//lili classchat-item chat-item--system :class{ hidden: !isLoading }MdPreview :model-valuemessagePlaceholder/Spin//li/ul
/LayoutContent
四、源码仓库 联系开发者2013994940qq.com
Gitee源码地址https://gitee.com/BuLiangShuai01033/spring-gpt
