基于Springboot+微信小步伐调用文心一言大模型实现AI聊天 ...

一、文章前言

   此文主要实现基于Springboot+微信小步伐调用文心一言大模型实现AI聊天对话功能，使用Java作为后端语言进行支持，界面友爱，开发简单。
   

  

   

  二、开发流程及工具准备

2.1、登录百度智能云平台，获取 API Key 和 Secret Key两个凭证
2.2、注册微信公众平台账号。
2.3、下载安装IntelliJ IDEA(后端语言开发工具)，Mysql数据库，微信Web开发者工具。
三、开发步调

   1.创建maven project
  先创建一个名为SpringBootDemo的项目，选择【New Project】

然后在弹出的下图窗口中，选择左侧菜单的【New Project】（注：和2022之前的idea版本差别，这里左侧没有【Maven】选项，不要选【Maven Archetype】！！！），输入Name(项目名)：SpringBootDemo,language选择【java】，build system选择【maven】，然后选择jdk，我这里选的是jdk18.

然后点击【Create】

   2.在project下创建module
  点击右键选择【new】—【Module…】

左侧选择【Spring initializr】，通过idea中集成的Spring initializr工具进行spring boot项目的快速创建。窗口右侧：name可根据自己喜好设置，group和artifact和上面一样的规则，其他选项保持默认值即可，【next】

Developer Tools模块勾选【Spring Boot DevTools】，web模块勾选【Spring Web】

此时，一个Springboot项目已经搭建完成，可开发后续功能
   3.编写一个消息实体类、Mapper、service（三层架构）

1. @Data
2. public class Chat {
4.     @TableId(type = IdType.AUTO)
5.     private Long id;
7.     private Long userId;
9.     private Long targetUserId;
11.     private LocalDateTime createTime;
13.     private String userName;
15.     private String targetUserName;
17.     private String content;
19. }

复制代码

由于我们使用mybatis-plus，以是简单的增删改查不用自己写，框架自带了，只必要实现或者继承他的Mapper、Service

   4.编写调用ai服务类

1. //获取AccessKey
2. public static String GetAccessToken()
3. {
4.     String url = "https://aip.baidubce.com/oauth/2.0/token";
5.     String params="grant_type=client_credentials&client_id=xxxx&client_secret=xxxxx";
6.     // 发送 POST 请求
7.     String response = HttpUtil.post(url, params);
8.     JSONObject json=JSONObject.parseObject(response);
9.     return json.getString("access_token");
10. }

复制代码

  5.创建控制器Controller
  先创建Controller Package

创建一个Controller

输入类名，选在【Class】

由于要编写Rest风格的Api，要在Controller上标注@RestController注解
   6.创建详细的Api接口

3. @RestController
4. public class DemoController {
7.     @RequestMapping("chat-gpt")
8.     public Map chat(String sender){
9.     String token= GetAccessToken();
10.     List<MessageDTO> messageDTOS=new ArrayList<>();
11.     messageDTOS.add(new MessageDTO("user",sender));
12.     Map<String, Object> map=new HashMap<>();
13.     map.put("user_id","");
14.     map.put("messages",messageDTOS);
15.     map.put("temperature",0.95);
16.     map.put("top_p",0.8);
17.     map.put("penalty_score",1);
18.     map.put("disable_search",false);
19.     map.put("enable_citation",false);
20.     map.put("stream",false);
21.     String url = "https://aip.baidubce.com/rpc/2.0/ai_custom/v1/wenxinworkshop/chat/ernie-speed-128k?access_token="+token;
23.     String response = HttpUtil.createPost(url)
24.             .header("Content-Type", "application/json")
25.             .body(JSONObject.toJSONString(map))
26.             .execute()
27.             .body();
29.     ReturnMap returnMap = new ReturnMap();
30.     returnMap.setData(JSONObject.parse(response));
31.     return returnMap.getreturnMap();
33. }
37.    
38. }

复制代码

7.小步伐代码

3.20、在pages文件夹下面创建一个文件夹并新建对应的page文件，并实现聊天对话框样式。

1. <view class="cu-chat" id="j_page">
2.   <view class="cu-item 'self'" wx:for="{{chatData}}">
3.     <view class="main">
4.       <view class="content shadow bg-green">
5.         <text>{{item.content}}</text>
6.       </view>
7.     </view>
8.     <view class="cu-avatar radius" style="background-image:url(../../../images/cat.jpg)"></view>
9.     <view class="date">{{item.createTime}}</view>
10.   </view>
11. </view>
13. <view class="cu-bar foot input {{InputBottom!=0?'cur':''}}" style="bottom:{{InputBottom}}px">
14.   <view class="action">
15.     <text class="cuIcon-sound text-grey"></text>
16.   </view>
17.   <input class="solid-bottom" value="{{content}}" bindinput="formMsg"  bindfocus="InputFocus" bindblur="InputBlur" adjust-position="{{false}}" focus="{{false}}" maxlength="300" cursor-spacing="10"></input>
18.   <view class="action">
19.     <text class="cuIcon-emojifill text-grey"></text>
20.   </view>
21.   <button class="cu-btn bg-green shadow" bindtap="sendMsg">发送</button>
22. </view>

复制代码

1. .cu-chat {
2.         display: flex;
3.         flex-direction: column;
4. }
6. .cu-chat .cu-item {
7.         display: flex;
8.         padding: 30rpx 30rpx 70rpx;
9.         position: relative;
10. }
12. .cu-chat .cu-item>.cu-avatar {
13.         width: 80rpx;
14.         height: 80rpx;
15. }
17. .cu-chat .cu-item>.main {
18.         max-width: calc(100% - 260rpx);
19.         margin: 0 40rpx;
20.         display: flex;
21.         align-items: center;
22. }
24. .cu-chat .cu-item>image {
25.         height: 320rpx;
26. }
28. .cu-chat .cu-item>.main .content {
29.         padding: 20rpx;
30.         border-radius: 6rpx;
31.         display: inline-flex;
32.         max-width: 100%;
33.         align-items: center;
34.         font-size: 30rpx;
35.         position: relative;
36.         min-height: 80rpx;
37.         line-height: 40rpx;
38.         text-align: left;
39. }
41. .cu-chat .cu-item>.main .content:not([class*="bg-"]) {
42.         background-color: var(--white);
43.         color: var(--black);
44. }
46. .cu-chat .cu-item .date {
47.         position: absolute;
48.         font-size: 24rpx;
49.         color: var(--grey);
50.         width: calc(100% - 320rpx);
51.         bottom: 20rpx;
52.         left: 160rpx;
53. }
55. .cu-chat .cu-item .action {
56.         padding: 0 30rpx;
57.         display: flex;
58.         align-items: center;
59. }
61. .cu-chat .cu-item>.main .content::after {
62.         content: "";
63.         top: 27rpx;
64.         transform: rotate(45deg);
65.         position: absolute;
66.         z-index: 100;
67.         display: inline-block;
68.         overflow: hidden;
69.         width: 24rpx;
70.         height: 24rpx;
71.         left: -12rpx;
72.         right: initial;
73.         background-color: inherit;
74. }
76. .cu-chat .cu-item.self>.main .content::after {
77.         left: auto;
78.         right: -12rpx;
79. }

复制代码

3.22、准备两张头像，在WXML中根据对应的用户名判断聊天记录是否是自己发出，并赋对应的class样式，后续这个步调可以直接在接口返回的数据中进行判断，哀求查询列表的接口将用户token作为参数传输已往即可。
   

[img=180,180/]https://i-blog.csdnimg.cn/blog_migrate/634442219bc30b871d44275841a6e666.png[/img]

  

[img=180,180/]https://i-blog.csdnimg.cn/blog_migrate/be6c47d69fb6c692a793a558b2194d31.png[/img]

2. <view class="cu-chat" id="j_page">
3.   <view class="cu-item {{item.userId=='2'?'self':''}}" wx:for="{{chatData}}">
4.     <view class="cu-avatar radius" style="background-image:url(../../../images/cat.jpg)" wx:if="{{item.userId=='1'}}"></view>
5.     <view class="main">
6.       <view class="content shadow {{item.userId=='1'?'bg-green':''}}">
7.         <text>{{item.content}}</text>
8.       </view>
9.     </view>
10.     <view class="cu-avatar radius" style="background-image:url(../../../images/dog.jpg)" wx:if="{{item.userId=='2'}}"></view>
11.     <view class="date">{{item.createTime}}</view>
12.   </view>
13. </view>

复制代码

3.23、这里必要注意的是，我们必要在每次发送消息后将页面内容定位在底部，不停保持一个阅读最新消息的状态。

1. wx.pageScrollTo({
2.   scrollTop: 9999
3. })

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。