百度智能云+SpringBoot=AI对话【人工智能】

百度智能云+SpringBoot=AI对话【人工智能】

  • 前言
  • 版权
  • 推荐
  • 百度智能云+SpringBoot=AI对话【人工智能】
    • 效果演示
      • 登录
      • AI对话
    • 项目结构
    • 后端开发
      • pom和properties
      • sql_table和entity
      • dao和mapper
      • service和impl
      • config和util
      • LoginController和ChatController
    • 前端开发
      • css和js
      • login.html和chat.html
    • 后言
  • 最后

前言

2024-3-20 19:41:47

使用百度千帆平台的大模型,完成一个简单的AI对话聊天

以下内容源自《【人工智能】》
仅供学习交流使用

版权

禁止其他平台发布时删除以下此话
本文首次发布于CSDN平台
作者是CSDN@日星月云
博客主页是https://jsss-1.blog.csdn.net
禁止其他平台发布时删除以上此话

推荐

Gitee项目地址: 日星月云 / AI对话

GitHub项目地址:jsss-1/qianfan

百度千帆模型初次体验【人工智能】

百度智能云+SpringBoot=AI对话【人工智能】

通过上篇,我们成功地完成了初次对大模型的使用
本篇,我将带大家开发一个AI对话聊天框

效果演示

登录

输入用户名,点击登录
返回“登录成功”
在这里插入图片描述
查询状态
在这里插入图片描述

AI对话

页面
在这里插入图片描述

输入内容,点击回车即可提问

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

项目结构

在这里插入图片描述

后端开发

pom和properties

pom.xml

SpringBoot2.4.2+JDK8

<?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><parent><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-parent</artifactId><version>2.4.2</version><relativePath/> <!-- lookup parent from repository --></parent><groupId>com.example</groupId><artifactId>qianfan</artifactId><version>0.0.1-SNAPSHOT</version><name>qianfan</name><description>qianfan</description><properties><java.version>8</java.version></properties><dependencies><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-web</artifactId></dependency><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-devtools</artifactId><scope>runtime</scope><optional>true</optional></dependency><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-test</artifactId><scope>test</scope></dependency><!--        千帆大模型平台--><dependency><groupId>com.baidubce</groupId><artifactId>qianfan</artifactId><version>0.0.1</version></dependency><!--        thymeleaf 依赖--><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-thymeleaf</artifactId></dependency><!--        lombok 依赖--><dependency><groupId>org.projectlombok</groupId><artifactId>lombok</artifactId><optional>true</optional></dependency><!--        mysql 依赖--><dependency><groupId>mysql</groupId><artifactId>mysql-connector-java</artifactId><scope>runtime</scope></dependency><!--        mybatis 依赖--><dependency><groupId>org.mybatis.spring.boot</groupId><artifactId>mybatis-spring-boot-starter</artifactId><version>2.1.4</version></dependency></dependencies><build><plugins><plugin><groupId>org.springframework.boot</groupId><artifactId>spring-boot-maven-plugin</artifactId></plugin></plugins></build></project>

application.properties

spring.application.name=qianfan# Qianfan
QIANFAN_ACCESS_KEY=你的AK
QIANFAN_SECRET_KEY=你的SK# ServerProperties
server.port=8080
server.servlet.context-path=# ThymeleafProperties
spring.thymeleaf.cache=false# mysql
spring.datasource.url=jdbc:mysql://localhost:3306/ai?characterEncoding=utf-8&useSSL=false&serverTimezone=Hongkong
spring.datasource.username=root
spring.datasource.password=root
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver# MyBatis
mybatis.mapper-locations=classpath:mapper/*.xml
mybatis.type-aliases-package=com.jsss.entity
# 生成主键
mybatis.configuration.useGeneratedKeys=true
# 驼峰命名
mybatis.configuration.mapUnderscoreToCamelCase=true

sql_table和entity

ai.sql

create table conversation
(id           int auto_incrementprimary key,username     varchar(16) null,user_message text        null,bot_message  text        null,create_time  varchar(32) null
);

**enntity.Conversation **

package com.jsss.qianfan.entity;import lombok.AllArgsConstructor;
import lombok.Data;@Data
@AllArgsConstructor
public class Conversation {private Integer id;private String username;private String userMessage;private String botMessage;private String createTime;}

dao和mapper

**dao.ChatMapper **

package com.jsss.qianfan.dao;import com.jsss.qianfan.entity.Conversation;
import org.apache.ibatis.annotations.Mapper;import java.util.List;@Mapper
public interface ChatMapper {List<Conversation> getByUsername(String username);void insert(Conversation conversation);}

**mapper/ChatMapper.xml **

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapperPUBLIC "-//mybatis.org//DTD Mapper 3.0//EN""http://mybatis.org/dtd/mybatis-3-mapper.dtd"><mapper namespace="com.jsss.qianfan.dao.ChatMapper"><!-- 定义SQL映射关系 --><!-- 根据username查询conversation记录 --><select id="getByUsername" resultType="com.jsss.qianfan.entity.Conversation" parameterType="string">SELECT * FROM conversation WHERE username = #{username}</select><!-- 插入新的conversation记录 --><insert id="insert" parameterType="com.jsss.qianfan.entity.Conversation">INSERT INTO conversation     (username, user_message, bot_message, create_time) VALUES (#{username},#{userMessage},#{botMessage},#{createTime})</insert></mapper>

service和impl

service.ChatService

package com.jsss.qianfan.service;import com.jsss.qianfan.entity.Conversation;import java.util.List;public interface ChatService {void addChat(Conversation conversation);List<Conversation> searchByUsername(String username);}

impl.ChatServiceImpl

package com.jsss.qianfan.service.impl;import com.jsss.qianfan.dao.ChatMapper;
import com.jsss.qianfan.entity.Conversation;
import com.jsss.qianfan.service.ChatService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;import java.util.List;@Service
public class ChatServiceImpl implements ChatService {@AutowiredChatMapper chatMapper;@Overridepublic void addChat(Conversation conversation) {chatMapper.insert(conversation);}@Overridepublic List<Conversation> searchByUsername(String username) {return chatMapper.getByUsername(username);}
}

config和util

configuration.QianfanConfig

package com.jsss.qianfan.configuration;import com.baidubce.qianfan.Qianfan;
import com.baidubce.qianfan.core.auth.Auth;import org.springframework.beans.factory.annotation.Value;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;@Configuration
public class QianfanConfig {@Value("${QIANFAN_ACCESS_KEY}")String ak;@Value("${QIANFAN_SECRET_KEY}")String sk;@Beanpublic Qianfan qianFan() {return new Qianfan(Auth.TYPE_OAUTH, ak, sk);}
}

util.QianfanUtil

package com.jsss.qianfan.util;import com.baidubce.qianfan.Qianfan;
import com.baidubce.qianfan.model.chat.ChatResponse;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Component;@Component
public class QianfanUtil {@AutowiredQianfan qianfan;public String addMessage(String content) {ChatResponse response = qianfan.chatCompletion()//.model("ERNIE-Bot-4")  //使用model指定预置模型 默认模型是ERNIE-Bot-turbo.addMessage("user", content) // 添加用户消息 (此方法可以调用多次,以实现多轮对话的消息传递).temperature(0.7) // 自定义超参数.execute(); // 发起请求return response.getResult();}public void executeStream(String content) {qianfan.chatCompletion().addMessage("user", content).executeStream() // 发起流式请求.forEachRemaining(chunk -> System.out.print(chunk.getResult())); // 流式迭代,并打印消息}}

LoginController和ChatController

controller.LoginController

package com.jsss.qianfan.controller;import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.ResponseBody;import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpSession;@Controller
public class LoginController {@GetMapping("/login")public String login(){return "login";}@PostMapping("/login")@ResponseBodypublic String login(HttpServletRequest request,String username){HttpSession session = request.getSession();session.setAttribute("username",username);return "登录成功";}@GetMapping("/logout")@ResponseBodypublic String logout(HttpServletRequest request,String username){HttpSession session = request.getSession();session.removeAttribute("username");return "登出成功";}@GetMapping("/status")@ResponseBodypublic String status(HttpServletRequest request){HttpSession session = request.getSession();String username =(String)session.getAttribute("username");if (username!=null&&!username.isEmpty()){return username;}else {return "没有登录";}}
}

controller.ChatController

package com.jsss.qianfan.controller;import com.jsss.qianfan.entity.Conversation;
import com.jsss.qianfan.service.ChatService;
import com.jsss.qianfan.util.QianfanUtil;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.*;import javax.servlet.http.HttpServletRequest;
import java.text.SimpleDateFormat;
import java.util.Date;
import java.util.List;
import java.util.Map;@Controller
@RequestMapping("chat")
public class ChatController {//    List<Conversation> conversations=new ArrayList<>();
//
//    static int id=1;
//
//    {
//        conversations.add(new Conversation(id++,"1","你好","抱歉,网络出现异常,请你重试或联系客服!TooManyRequests", format(new Date())));
//        conversations.add(new Conversation(id++,"1","你好","抱歉,网络出现异常,请你重试或联系客服!TooManyRequests", format(new Date())));
//    }@AutowiredQianfanUtil qianfanUtil;@AutowiredChatService chatService;private String format(Date date){return new SimpleDateFormat("yyyy-MM-dd HH:mm:ss").format(date);}@GetMapping("/list")public String getChat(HttpServletRequest request,Model model){String username= (String) request.getSession().getAttribute("username");List<Conversation> conversations=chatService.searchByUsername(username);model.addAttribute("conversations",conversations);return "chat";}@PostMapping("/chat")public String chat(HttpServletRequest httpServletRequest,@RequestBody Map<String, String> request){String username= (String) httpServletRequest.getSession().getAttribute("username");String content = request.get("content");System.out.println(content);//        String res="回复";
//        Conversation conversation = new Conversation(id++,username, content, res, format(new Date());
//        conversations.add(conversation);String res = qianfanUtil.addMessage(content);Conversation conversation = new Conversation(null, username, content, res, format(new Date()));chatService.addChat(conversation);return "redirect:list";}}

前端开发

css和js

css/style.css


/* 设置用户发送消息的样式 */
.user-message {background-color: #4CAF50; /* 绿色背景 */color: white;padding: 10px;margin: 10px;border-radius: 10px;white-space: pre;
}/* 设置ChatGPT发送消息的样式 */
.bot-message {background-color: #f2f2f2; /* 灰色背景 */padding: 10px;margin: 10px;border-radius: 10px;white-space: pre;
}.question-container {display: flex;justify-content: flex-end;
}.question {display: flex;flex-direction: row;align-items: center;
}.question td:first-child {margin-left: auto;
}.answer-container {display: flex;justify-content: flex-start;
}.answer {display: flex;flex-direction: row;align-items: center;
}.answer td:last-child {margin-left: auto;
}/* 设置提问和回复消息的表格样式 */
.question, .answer {display: flex;align-items: center;padding: 10px;border-radius: 10px;
}/* 设置输入框和发送按钮的样式 */
.form-container {display: flex;justify-content: center;align-items: center;position: fixed;bottom: 0;width: 100%;padding: 10px;background-color: #f9f9f9;border-top: 1px solid #ccc;
}.form-row {display: flex;flex: 1;
}.form-group {flex: 1;margin-right: 10px;
}.form-group input {width: 100%;padding: 10px;border: 1px solid #ccc;border-radius: 5px;outline: none;
}.message-container {max-height: 700px; /* 设置最大高度,超出部分可滚动 */overflow-y: auto; /* 竖直方向溢出部分可滚动 */
}.send-message-container {flex: 1; /* 占据剩余空间 */display: flex;align-items: center;background-color: #f5f5f5;
}textarea {width: 1800px; /* 设置输入框的宽度为300像素,您可以根据需要调整这个值 */height: 100px; /* 设置输入框的高度为200像素,您可以根据需要调整这个值 */font-size: 16px; /* 设置输入框中文字的字体大小为16像素,您可以根据需要调整这个值 */resize: none; /* 禁止用户调整输入框的尺寸 */
}

js/onload.js

window.onload = function() {// 找到消息容器var messageContainer = document.querySelector(".message-container");// 找到消息容器中最后一个子元素var lastMessage = messageContainer.lastElementChild;// 将最后一个子元素滚动到可见区域lastMessage.scrollIntoView();
};

js/textarea.js

var textarea = document.getElementById("messageInput");textarea.addEventListener("keydown", function(event) {if (event.key === "Enter" && !event.shiftKey) {event.preventDefault();var message = textarea.value.trim();textarea.value = "";// 发送 POST 请求fetch('/chat/chat', {method: 'POST',headers: {'Content-Type': 'application/json'},body: JSON.stringify({ content: message })}).then(function(response) {// 刷新页面location.reload();});}
});textarea.addEventListener("keydown", function(event) {if (event.key === "Enter" && event.shiftKey) {// 在 Shift+Enter 情况下允许换行textarea.value += "\n";event.preventDefault();}
});

login.html和chat.html

html/login.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns="http://www.w3.org/1999/html"><head><title>AI对话</title></head><body><div class="chat-container"><h1 class="title">登录</h1><div class="login-container"><form th:action="@{/login}" method="post"><div class="form-container"><div class="form-row"><span class="form-group no-border"><input id="username" name="username" placeholder="输入用户名"></span><button>登录</button></div></div></form></div></div></body></html>

html/chat.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns="http://www.w3.org/1999/html"><head><link rel="stylesheet" th:href="@{/css/style.css}"><title>AI对话</title></head><body><div class="chat-container"><h1 class="title">AI 对话</h1><div class="message-container"><!-- 用户消息和ChatGPT消息显示部分 --><div th:each="conversation:${conversations}"><div class="question-container"><table class="question"><td><span th:utext="${conversation.createTime}"></span><div class="user-message" th:utext="${conversation.userMessage}"></div></td><td type="text" th:text="${conversation.username}">提问</td></table></div><div class="answer-container"><table class="answer"><td type="text">AI</td><td><span th:utext="${conversation.createTime}"></span><div class="bot-message" th:utext="${conversation.botMessage}"></div></td></table></div></div></div><div class="send-message-container"><!-- 发送消息部分 --><form th:action="@{/chat/chat}" method="post"><div class="form-container"><div class="form-row"><span class="form-group no-border"><textarea id="messageInput" placeholder="问我任何问题...(Shift + Enter 换行,按下Enter 发送)"></textarea></span></div></div></form></div></div></body><script th:src="@{/js/onload.js}"></script><script th:src="@{/js/textarea.js}"></script></html>

后言

待完善的功能:

  1. 用户对话之后,需要等待回复,才能弹出对话内容

  2. 等待期间,还能输入聊天框

  3. 并且,没有终止生成

  4. 没有左边框-新建对话

  5. 没有md格式的复制

最后

2024-3-20 21:06:39

迎着日光月光星光,直面风霜雨霜雪霜。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/284634.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【xr806开发板使用】连接wifi例程实现

##开发环境 win10 WSL ##1、环境配置 参考&#xff1a;https://aijishu.com/a/1060000000287513 首先下载安装wsl 和ubuntu https://docs.microsoft.com/zh-cn/windows/wsl/install &#xff08;1&#xff09;安装repo&#xff1a; 创建repo安装目录&#xff1a; mkdir ~/…

.NET Framework 服务实现监控可观测性最佳实践

环境信息 系统环境&#xff1a;Windows Server开发语言&#xff1a;.NET Framework > 4.6.1APM探针包&#xff1a;ddtrace 准备工作 安装 Datakit 主机部署&#xff1a; 主机安装 - 观测云文档 打开采集 APM 采集器 Windows 主机配置 # 到如下路径&#xff0c;把ddtr…

sqlalchemy和moke生成实体类(一)

前言 如果通过java生成实体类&#xff0c;可以通过mybatis或者mybatis-plus的generator。 而sqlalchemy也可以生成实体类&#xff0c;通过sqlalcodegen或者flask-sqlalcodegen。 使用flask-sqlalcodegen生成实体类 建表 建立学生表&#xff0c;如下。 create table stude…

Chrome 114 带着侧边栏扩展来了

效果展示 manifest.json {"manifest_version": 3,"name": "ChatGPT学习","version": "0.0.2","description": "ChatGPT,GPT-4,Claude3,Midjourney,Stable Diffusion,AI,人工智能,AI","icons"…

linux系统------------Mysql数据库介绍、编译安装

目录 一、数据库基本概念 1.1数据(Data) 1.2表 1.3数据库 1.4数据库管理系统(DBMS) 数据库管理系统DBMS原理 1.5数据库系统&#xff08;DBS) 二、数据库发展史 1、第一代数据库 2、第二代数据库 3、第三代数据库 三、关系型数据库 3.1关系型数据库应用 3.2主流的…

Photoshop 工具使用详解(全集 · 2024版)

全面介绍 Photoshop 工具箱里的工具&#xff0c;点击下列表格中工具名称或图示&#xff0c;即可查阅工具的使用详解。 移动工具Move Tool移动选区、图层和参考线。画板工具Artboard Tool创建、移动多个画布或调整其大小。moVe快捷键&#xff1a;V 矩形选框工具 Rectangular Mar…

如何屏蔽来自一些可疑IP对网站的访问

前段时间我们的网站遭受到黑客的攻击&#xff0c;导致网站出现乱码以及丢失了一些网站文件。在我们将网站全部迁移至Hostease虚拟主机后&#xff0c;为了再次避免这种情况发生&#xff0c;我们对网站做了一些安全防护&#xff0c;除了安装一些安全插件之外&#xff0c;我们还屏…

QGIS编译(跨平台编译)056:PDAL编译(Windows、Linux、MacOS环境下编译)

点击查看专栏目录 文章目录 1、PDAL介绍2、PDAL下载3、Windows下编译4、linux下编译5、MacOS下编译1、PDAL介绍 PDAL(Point Data Abstraction Library)是一个开源的地理空间数据处理库,它专注于点云数据的获取、处理和分析。PDAL 提供了丰富的工具和库,用于处理激光扫描仪、…

C++ Primer Plus第十七章笔记

目录 1. C输入和输出概述 1.1 流、缓冲区和iostream 1.2 重定向 2. 使用cout进行输出 2.1 修改显示时使用的计数系统 2.2 调整字段宽度 2.3 填充字符 2.4 设置浮点数的显示精度 2.5 打印末尾的0或小数点 2.6 setf() 2.7 头文件iomanip 3. 使用cin进行输入 3.1 cin…

ubuntu18安装opensips3.4,开启ws/wss/http接口模块

、如果是centos 7安装则使用yum 命令。 添加库地址注意系统类型&#xff0c;选择对应的系统类型和版本 curl https://apt.opensips.org/opensips-org.gpg -o /usr/share/keyrings/opensips-org.gpg echo "deb [signed-by/usr/share/keyrings/opensips-org.gpg] https:/…

百度文心一言(ERNIE bot)API接入Android应用

百度文心一言&#xff08;ERNIE bot&#xff09;API接入Android应用实践 - 拾一贰叁 - 博客园 (cnblogs.com) Preface: 现在生成式AI越来越强大了&#xff0c;想在android上实现一个对话助手的功能&#xff0c;大概摸索了一下接入百度文心一言API的方法。 与AI助手交换信息的…

数据库索引

目录 索引的概念 索引的作用 索引的副作用 创建索引的原则 适合建索引的场景 索引的创建方式 查看索引 索引的分类 1.普通索引 2.唯一索引 3.主键索引 4.组合索引 5.全文索引 删除索引 索引的概念 索引是一个排序的列表&#xff0c;在这个列表中存储着索引的值和…

【Codesys】DINT类型环形计数处理,计数到2的64次方

最近有遇到编码器计数的计数处理&#xff0c;抓取编码器锁存的数值只能在DINT类型范围内&#xff0c;是从-2147483648到2147483647数值&#xff0c;但是现场会有正向多圈的情况。此时需要记录这个数的位置值。就需要记录多圈计数下&#xff0c;圈数的处理。 PROGRAM FB_DintCir…

python闭包详解(实例)

“闭包”这个词语相信大多数学过编程的同学并不陌生&#xff0c;但是有时候理解起来还是有一定难度。 先看定义&#xff1a;闭包是由函数和与其相关的引用环境组合而成的实体。比如参考资源中就有这样的的定义&#xff1a;在实现深约束时&#xff0c;需要创建一个能显式表示引…

外包干了4年,技术退步明显.......

先说一下自己的情况&#xff0c;大专生&#xff0c;19年通过校招进入杭州某软件公司&#xff0c;干了接近4年的功能测试&#xff0c;今年年初&#xff0c;感觉自己不能够在这样下去了&#xff0c;长时间呆在一个舒适的环境会让一个人堕落! 而我已经在一个企业干了四年的功能测…

抖音视频批量下载软件可导出视频分享链接|手机网页视频提取|视频爬虫采集工具

解锁抖音视频无水印批量下载新姿势&#xff01; 在快节奏的生活中&#xff0c;抖音作为时下最热门的短视频平台之一&#xff0c;吸引着广大用户的目光。而如何高效地获取喜欢的视频内容成为了许多人关注的焦点。Q:290615413现在&#xff0c;我们推出的抖音视频批量下载软件&…

c语言——通讯录(文件版)

大家好我是小锋&#xff0c;今天我们来实现一个通讯录 准备工作 为了让我们的代码具有条理我们要建立三个文件一个文件用来放头文件一个文件用来放函数的实现&#xff0c;一个文件用来实现通讯录的基本逻辑。 然后我们其他的.c文件要使用头文件时我们要用# include<tongxu…

【Linux】进程管理

目录 一、进程创建 二、进程等待 1. 阻塞等待 2. 非阻塞等待 3. status位图 三、进程替换 1. exec* 系列函数 2. 高级语言程序替换 一、进程创建 进程是操作系统进程资源分配的最小单位&#xff0c;每一个进程都有自己独立的PID&#xff0c;以及进程控制块PCB。 父进…

【SAP-ABAP】CO01保存时错误DBSQL_DUPLICATE_KEY_ERROR

找到该表的主键OBJNR&#xff0c;事务代码SM56中查看当前缓冲到该key的号码段&#xff0c;事务代码SNRO修改对象名称OBJNR编号范围状态。 事务代码SM13查看数据更新记录

数据可视化-ECharts Html项目实战(5)

在之前的文章中&#xff0c;我们学习了如何设置滚动图例&#xff0c;工具箱设置和插入图片。想了解的朋友可以查看这篇文章。同时&#xff0c;希望我的文章能帮助到你&#xff0c;如果觉得我的文章写的不错&#xff0c;请留下你宝贵的点赞&#xff0c;谢谢 数据可视化-ECharts…