4、前后端联调文生文、文生图事件
1、底部【发送按钮】事件触发调用后端AI程序逻辑
html
<!-- 前端模板如下: -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>小薛博客LLM大模型实战</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 引入 layui.css -->
<link href="/layui/css/layui.css" rel="stylesheet">
</head>
<body>
<div class="layui-layout layui-layout-admin">
<!--4444444-->
<div id="footer-chat" class="layui-footer" style="height: 80px;line-height: 80px;">
<!-- 底部固定区域 -->
<div style="width: 80%;">
<div class="layui-input-group" style="width: 100%;">
<input type="text" id="question-input" style="margin-top: 20px;margin-left: 120px;" placeholder="输入问题..."
class="layui-input">
<div class="layui-input-suffix">
<button type="button" id="question-send" style="margin-left: 80px;" lay-on="question-send" class="layui-btn layui-btn-radius">发送
</button>
</div>
</div>
</div>
</div>
</div>
<!-- 引入 layui.js -->
<script src="/layui/layui.js"></script>
<script>
//JS
layui.use(['element', 'layer', 'util'], function(){
var element = layui.element;
var layer = layui.layer;
var util = layui.util;
//var $ = layui.$;
var jQuery = layui.$;
var question_type = "chat"; // 默认对话问答文生文，当前在使用聊天功能
util.on('lay-on',{
//对话问答(文生文)
'chat-nav-show':function () {
jQuery("#chat-nav").show();
jQuery("#draw-nav").hide();
jQuery("#discuss-nav").hide();
//对话问答-点击后顶部导航栏显示第一个标签页ChatGPT
var showDivId = "chat-chatgpt-content";
jQuery("#" + showDivId).show();
jQuery("#" + showDivId).siblings().hide();
//对话问答-点击后顶部导航栏显示第一个标签页ChatGPT+底部光标跟随
jQuery("#chat-nav").find("li").removeClass("layui-this");
jQuery("#chat-nav").find("li").eq(1).addClass("layui-this");
// 显示最下面【输入问题】对话框
jQuery("#footer-chat").show();
//底部输入框对话类型
question_type = "chat";
},
//对话问图(文生图)
'draw-nav-show':function () {
jQuery("#draw-nav").show();
jQuery("#chat-nav").hide();
jQuery("#discuss-nav").hide();
//左侧对话问图-点击后顶部导航栏显示第一个标签页ChatGPT
var showDivId = "draw-chatgpt-content";
jQuery("#" + showDivId).show();
jQuery("#" + showDivId).siblings().hide();
//左侧对话问图-点击后顶部导航栏显示第一个标签页ChatGPT+底部光标跟随
jQuery("#draw-nav").find("li").removeClass("layui-this");
jQuery("#draw-nav").find("li").eq(1).addClass("layui-this");
// 显示最下面【输入问题】对话框
jQuery("#footer-chat").show();
//底部输入框对话类型
question_type = "draw";
},
//左侧话题讨论
'discuss-nav-show':function () {
jQuery("#discuss-nav").show();
jQuery("#chat-nav").hide();
jQuery("#draw-nav").hide();
//左侧话题讨论-点击后顶部导航栏显示第一个标签页ChatGPT
var showDivId = "discuss-content";
jQuery("#" + showDivId).show();
jQuery("#" + showDivId).siblings().hide();
jQuery("#discuss-nav").find("li").removeClass("layui-this");
jQuery("#discuss-nav").find("li").eq(1).addClass("layui-this");
// 隐藏最下面【输入问题】对话框
jQuery("#footer-chat").hide();
},
//给lay-on="nav-change-content"添加函数说明,根据标签页切换显示不同的内容
'nav-change-content':function (e) {
var showDivId = jQuery(e).attr("lay-data");
jQuery("#" + showDivId).show(); // 显示自己的内容
jQuery("#" + showDivId).siblings().hide(); // 隐藏所有同级 div 的内容
},
//给主页底部【发送】按钮添加事件
'question-send':function () {
//输入问题...对话框内容
var question = jQuery("#question-input").val();
//非空判断
if (question == null || question == "") {
layer.msg("提问词不能为空,请先输入问题！");
return;
}
if(question_type == "chat") {//文生文
//前端发送ajax请求到后端restful
jQuery.ajax({
url:"/openai/chat",
type: "get",
data:{question:question},
success:function (result) {
}
});
}else if(question_type == "draw"){//文生图
//前端发送ajax请求到后端restful
jQuery.ajax({
url:"/openai/draw",
type: "post",
data:{question:question},
success:function (result) {
}
});
}
},
//关于我们
'about-us':function () {
layer.msg('触发了事件-关于我们');
},
});
//头部事件
util.event('lay-header-event', {
menuLeft: function(othis){ // 左侧菜单事件
layer.msg('展开左侧菜单的操作', {icon: 0});
},
menuRight: function(){ // 右侧菜单事件
layer.open({
type: 1,
title: '更多',
content: '<div style="padding: 15px;">处理右侧面板的操作</div>',
area: ['260px', '100%'],
offset: 'rt', // 右上角
anim: 'slideLeft', // 从右侧抽屉滑出
shadeClose: true,
scrollbar: false
});
}
});
});
</script>
</body>
</html>完整index.html
html
<!-- 前端模板如下: -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>小薛博客LLM大模型实战</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 引入 layui.css -->
<link href="/layui/css/layui.css" rel="stylesheet">
</head>
<body>
<div class="layui-layout layui-layout-admin">
<!--11111111-->
<div class="layui-header">
<div class="layui-logo layui-hide-xs layui-bg-black">小薛博客LLM大模型实战</div>
<!-- 头部区域（可配合layui 已有的水平导航） -->
<ul id="chat-nav" class="layui-nav layui-layout-left">
<!-- 移动端显示 -->
<li class="layui-nav-item layui-show-xs-inline-block layui-hide-sm" lay-header-event="menuLeft">
<i class="layui-icon layui-icon-spread-left"></i>
</li>
<li class="layui-nav-item layui-hide-xs layui-this" lay-on="nav-change-content" lay-data="chat-chatgpt-content"><a href="javascript:;">ChatGPT</a></li>
<li class="layui-nav-item layui-hide-xs" lay-on="nav-change-content" lay-data="chat-tongyi-content"><a href="javascript:;">通义千问</a></li>
<li class="layui-nav-item layui-hide-xs" lay-on="nav-change-content" lay-data="chat-wenxin-content"><a href="javascript:;">文心一言</a></li>
<li class="layui-nav-item layui-hide-xs" lay-on="nav-change-content" lay-data="chat-xunfei-content"><a href="javascript:;">科大讯飞</a></li>
</ul>
<ul id="draw-nav" class="layui-nav layui-layout-left">
<!-- 移动端显示 -->
<li class="layui-nav-item layui-show-xs-inline-block layui-hide-sm" lay-header-event="menuLeft">
<i class="layui-icon layui-icon-spread-left"></i>
</li>
<li class="layui-nav-item layui-hide-xs" lay-on="nav-change-content" lay-data="draw-chatgpt-content"><a href="javascript:;">ChatGPT</a></li>
<li class="layui-nav-item layui-hide-xs" lay-on="nav-change-content" lay-data="draw-tongyi-content"><a href="javascript:;">通义千问</a></li>
<li class="layui-nav-item layui-hide-xs" lay-on="nav-change-content" lay-data="draw-wenxin-content"><a href="javascript:;">文心一言</a></li>
<li class="layui-nav-item layui-hide-xs" lay-on="nav-change-content" lay-data="draw-xunfei-content"><a href="javascript:;">科大讯飞</a></li>
</ul>
<!-- 头部区域（可配合layui 已有的水平导航） -->
<ul id="discuss-nav" class="layui-nav layui-layout-left" style="display: none">
<!-- 移动端显示 -->
<li class="layui-nav-item layui-show-xs-inline-block layui-hide-sm" lay-header-event="menuLeft">
<i class="layui-icon layui-icon-spread-left"></i>
</li>
<li class="layui-nav-item layui-hide-xs" lay-on="nav-change-content" lay-data="discuss-content"><a href="javascript:;">推荐</a></li>
<li class="layui-nav-item layui-hide-xs" lay-on="nav-change-content" lay-data="discuss-content-new"><a href="javascript:;">最新</a></li>
</ul>
<ul class="layui-nav layui-layout-right">
<li class="layui-nav-item layui-hide layui-show-sm-inline-block">
<a href="javascript:;">
<img src="//unpkg.com/[email protected]/img/layui/icon-v2.png" class="layui-nav-img">
tester
</a>
<dl class="layui-nav-child">
<dd><a href="javascript:;">Your Profile</a></dd>
<dd><a href="javascript:;">Settings</a></dd>
<dd><a href="javascript:;">Sign out</a></dd>
</dl>
</li>
<li class="layui-nav-item" lay-header-event="menuRight" lay-unselect>
<a href="javascript:;">
<i class="layui-icon layui-icon-more-vertical"></i>
</a>
</li>
</ul>
</div>
<!--22222222-->
<div class="layui-side layui-bg-black">
<div class="layui-side-scroll">
<!-- 左侧导航区域（可配合layui已有的垂直导航） -->
<ul class="layui-nav layui-nav-tree" lay-filter="test">
<li class="layui-nav-item layui-nav-itemed">
<a class="" href="javascript:;">AI功能集</a>
<dl class="layui-nav-child">
<dd><a href="javascript:;" lay-on="chat-nav-show">对话问答(文生文)</a></dd>
<dd><a href="javascript:;" lay-on="draw-nav-show">对话问图(文生图)</a></dd>
</dl>
</li>
<li class="layui-nav-item" lay-on="discuss-nav-show"><a href="javascript:;">话题讨论</a></li>
<li class="layui-nav-item" lay-on="about-us"><a href="javascript:;">关于我们</a></li>
</ul>
</div>
</div>
<!--3333333-->
<div class="layui-body">
<!-- 内容主体区域 -->
<div style="padding: 15px;">
<div>
<div id="chat-chatgpt-content" class="layui-card layui-panel">
<div class="layui-card-header layui-font-16">
ChatGPT提出的问题1
</div>
<div class="layui-card-body">
ChatGPT回答的问题
</div>
</div>
<div id="chat-tongyi-content" class="layui-card layui-panel" style="display: none">
<div class="layui-card-header layui-font-16">
tongyi提出的问题1
</div>
<div class="layui-card-body">
tongyi回答的问题
</div>
</div>
<div id="chat-wenxin-content" class="layui-card layui-panel" style="display: none">
<div class="layui-card-header layui-font-16">
wenxin提出的问题1
</div>
<div class="layui-card-body">
wenxin回答的问题
</div>
</div>
<div id="chat-xunfei-content" class="layui-card layui-panel" style="display: none">
<div class="layui-card-header layui-font-16">
xunfei提出的问题1
</div>
<div class="layui-card-body">
xunfei回答的问题
</div>
</div>
<div id="draw-chatgpt-content" class="layui-card layui-panel" style="display: none">
<div class="layui-card-header layui-font-16">
draw-ChatGPT
</div>
<div class="layui-card-body">
draw-ChatGPT画的回答
</div>
</div>
<div id="draw-tongyi-content" class="layui-card layui-panel" style="display: none">
<div class="layui-card-header layui-font-16">
draw-tongyi
</div>
<div class="layui-card-body">
draw-tongyi问题
</div>
</div>
<div id="draw-wenxin-content" class="layui-card layui-panel" style="display: none">
<div class="layui-card-header layui-font-16">
draw-wenxin
</div>
<div class="layui-card-body">
draw-wenxin画图
</div>
</div>
<div id="draw-xunfei-content" class="layui-card layui-panel" style="display: none">
<div class="layui-card-header layui-font-16">
draw-xunfei
</div>
<div class="layui-card-body">
draw-xunfei回答
</div>
</div>
<div id="discuss-content" class="layui-card layui-panel" style="display: none">
<div class="layui-card-header layui-font-16">
话题讨论-推荐
</div>
<div class="layui-card-body">
话题讨论-推荐详细情况
</div>
</div>
<div id="discuss-content-new" class="layui-card layui-panel" style="display: none">
<div class="layui-card-header layui-font-16">
话题讨论-最新
</div>
<div class="layui-card-body">
话题讨论-最新详细情况
</div>
</div>
</div>
</div>
</div>
<!--4444444-->
<div id="footer-chat" class="layui-footer" style="height: 80px;line-height: 80px;">
<!-- 底部固定区域 -->
<div style="width: 80%;">
<div class="layui-input-group" style="width: 100%;">
<input type="text" id="question-input" style="margin-top: 20px;margin-left: 120px;" placeholder="输入问题..."
class="layui-input">
<div class="layui-input-suffix">
<button type="button" id="question-send" style="margin-left: 80px;" lay-on="question-send" class="layui-btn layui-btn-radius">发送
</button>
</div>
</div>
</div>
</div>
</div>
<!-- 引入 layui.js -->
<script src="/layui/layui.js"></script>
<script>
//JS
layui.use(['element', 'layer', 'util'], function(){
var element = layui.element;
var layer = layui.layer;
var util = layui.util;
//var $ = layui.$;
var jQuery = layui.$;
var question_type = "chat"; // 默认对话问答文生文，当前在使用聊天功能
util.on('lay-on',{
//对话问答(文生文)
'chat-nav-show':function () {
jQuery("#chat-nav").show();
jQuery("#draw-nav").hide();
jQuery("#discuss-nav").hide();
//对话问答-点击后顶部导航栏显示第一个标签页ChatGPT
var showDivId = "chat-chatgpt-content";
jQuery("#" + showDivId).show();
jQuery("#" + showDivId).siblings().hide();
//对话问答-点击后顶部导航栏显示第一个标签页ChatGPT+底部光标跟随
jQuery("#chat-nav").find("li").removeClass("layui-this");
jQuery("#chat-nav").find("li").eq(1).addClass("layui-this");
// 显示最下面【输入问题】对话框
jQuery("#footer-chat").show();
//底部输入框对话类型
question_type = "chat";
},
//对话问图(文生图)
'draw-nav-show':function () {
jQuery("#draw-nav").show();
jQuery("#chat-nav").hide();
jQuery("#discuss-nav").hide();
//左侧对话问图-点击后顶部导航栏显示第一个标签页ChatGPT
var showDivId = "draw-chatgpt-content";
jQuery("#" + showDivId).show();
jQuery("#" + showDivId).siblings().hide();
//左侧对话问图-点击后顶部导航栏显示第一个标签页ChatGPT+底部光标跟随
jQuery("#draw-nav").find("li").removeClass("layui-this");
jQuery("#draw-nav").find("li").eq(1).addClass("layui-this");
// 显示最下面【输入问题】对话框
jQuery("#footer-chat").show();
//底部输入框对话类型
question_type = "draw";
},
//左侧话题讨论
'discuss-nav-show':function () {
jQuery("#discuss-nav").show();
jQuery("#chat-nav").hide();
jQuery("#draw-nav").hide();
//左侧话题讨论-点击后顶部导航栏显示第一个标签页ChatGPT
var showDivId = "discuss-content";
jQuery("#" + showDivId).show();
jQuery("#" + showDivId).siblings().hide();
jQuery("#discuss-nav").find("li").removeClass("layui-this");
jQuery("#discuss-nav").find("li").eq(1).addClass("layui-this");
// 隐藏最下面【输入问题】对话框
jQuery("#footer-chat").hide();
},
//给lay-on="nav-change-content"添加函数说明,根据标签页切换显示不同的内容
'nav-change-content':function (e) {
var showDivId = jQuery(e).attr("lay-data");
jQuery("#" + showDivId).show(); // 显示自己的内容
jQuery("#" + showDivId).siblings().hide(); // 隐藏所有同级 div 的内容
},
//给主页底部【发送】按钮添加事件
'question-send':function () {
//输入问题...对话框内容
var question = jQuery("#question-input").val();
//非空判断
if (question == null || question == "") {
layer.msg("提问词不能为空,请先输入问题！");
return;
}
if(question_type == "chat") {//文生文
//前端发送ajax请求到后端restful
jQuery.ajax({
url:"/openai/chat",
type: "get",
data:{question:question},
success:function (result) {
}
});
}else if(question_type == "draw"){//文生图
//前端发送ajax请求到后端restful
jQuery.ajax({
url:"/openai/draw",
type: "post",
data:{question:question},
success:function (result) {
}
});
}
},
//关于我们
'about-us':function () {
layer.msg('触发了事件-关于我们');
},
});
//头部事件
util.event('lay-header-event', {
menuLeft: function(othis){ // 左侧菜单事件
layer.msg('展开左侧菜单的操作', {icon: 0});
},
menuRight: function(){ // 右侧菜单事件
layer.open({
type: 1,
title: '更多',
content: '<div style="padding: 15px;">处理右侧面板的操作</div>',
area: ['260px', '100%'],
offset: 'rt', // 右上角
anim: 'slideLeft', // 从右侧抽屉滑出
shadeClose: true,
scrollbar: false
});
}
});
});
</script>
</body>
</html>2、OpenAIController
java
package com.xx.controller;
import com.xx.common.Result;
import com.xx.exception.BusinessException;
import com.xx.utils.ValidationUtil;
import io.swagger.v3.oas.annotations.Operation;
import jakarta.annotation.Resource;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.ai.openai.OpenAiChatModel;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
/**
* @auther xx
* @create 2024-11-02 19:04
*/
@RestController
@RequestMapping("/openai")
public class OpenAIController {
private Logger log = LoggerFactory.getLogger(this.getClass());
@Resource
private OpenAiChatModel openAiChatClient;
@GetMapping(value = "/chat")
@Operation(summary = "调用 Open AI 聊天接口")
public Result chat(String question) {
//测试假如等于XXX敏感词
if (question.equals("abcd")) {
throw new BusinessException("敏感词");
}
if (ValidationUtil.isEmpty(question)) {
// 输入为空
return Result.error("请求参数不能为空");
}
// 调用 Open AI 接口
return Result.ok(openAiChatClient.call(question));
}
}3、调通后端AI后前台进行显示和页面细节调整
html
if(question_type == "chat") {//文生文
//前端发送ajax请求到后端restful
jQuery.ajax({
url:"/openai/chat",
type: "get",
data:{question:question},
success:function (result) {
if(result.code == 200){
var createHTML = ' <div class="layui-card layui-panel">\n' +
' <div class="layui-card-header layui-font-16">\n' +
question+' \n' +
' </div>\n' +
result.result+' <div class="layui-card-body">\n' +
' \n' +
' </div>\n' +
' </div>';
jQuery("#chat-chatgpt-content").prepend(createHTML);
jQuery("#chat-chatgpt-content").val("");
jQuery("#question-input").val("");
}else{
layer.msg(result.code+"\t"+result.message);
}
}
});4、openai生成图片
https://docs.spring.io/spring-ai/reference/api/image/openai-image.html
java
package com.xx.controller;
import com.xx.common.Result;
import com.xx.exception.BusinessException;
import com.xx.utils.ValidationUtil;
import io.swagger.v3.oas.annotations.Operation;
import jakarta.annotation.Resource;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.ai.image.ImagePrompt;
import org.springframework.ai.image.ImageResponse;
import org.springframework.ai.openai.OpenAiChatModel;
import org.springframework.ai.openai.OpenAiImageModel;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
/**
* @auther xx
* @create 2024-11-02 19:04
*/
@RestController
@RequestMapping("/openai")
public class OpenAIController {
private Logger log = LoggerFactory.getLogger(this.getClass());
@Resource
private OpenAiImageModel openAiImageClient;
@GetMapping(value = "/draw")
@Operation(summary = "绘图功能")
public Result draw(String question) {
String imageUrl = null;
if (ValidationUtil.isEmpty(question)) {
// 输入为空
return Result.error("请求参数不能为空");
}
// 调用 Open AI 接口，土生图调用openai不稳定，暂时写死图片地址,调用成功返回结果如下：
ImageResponse imageResponse = openAiImageClient.call(new ImagePrompt(question));
imageUrl = imageResponse.getResult().getOutput().getUrl();
//自己写死
// imageUrl = "http://gips2.baidu.com/it/u=195724436,3554684702&fm=3028&app=3028&f=JPEG&fmt=auto?w=1280&h=960";
return Result.ok(imageUrl);
}
}
html
<!-- 前端模板如下: -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>小薛博客LLM大模型实战</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 引入 layui.css -->
<link href="/layui/css/layui.css" rel="stylesheet">
</head>
<body>
<div class="layui-layout layui-layout-admin">
<!--11111111-->
<div class="layui-header">
<div class="layui-logo layui-hide-xs layui-bg-black">小薛博客LLM大模型实战</div>
<!-- 头部区域（可配合layui 已有的水平导航） -->
<ul id="chat-nav" class="layui-nav layui-layout-left">
<!-- 移动端显示 -->
<li class="layui-nav-item layui-show-xs-inline-block layui-hide-sm" lay-header-event="menuLeft">
<i class="layui-icon layui-icon-spread-left"></i>
</li>
<li class="layui-nav-item layui-hide-xs layui-this" lay-on="nav-change-content" lay-data="chat-chatgpt-content"><a href="javascript:;">ChatGPT</a></li>
<li class="layui-nav-item layui-hide-xs" lay-on="nav-change-content" lay-data="chat-tongyi-content"><a href="javascript:;">通义千问</a></li>
<li class="layui-nav-item layui-hide-xs" lay-on="nav-change-content" lay-data="chat-wenxin-content"><a href="javascript:;">文心一言</a></li>
<li class="layui-nav-item layui-hide-xs" lay-on="nav-change-content" lay-data="chat-xunfei-content"><a href="javascript:;">科大讯飞</a></li>
</ul>
<ul id="draw-nav" class="layui-nav layui-layout-left">
<!-- 移动端显示 -->
<li class="layui-nav-item layui-show-xs-inline-block layui-hide-sm" lay-header-event="menuLeft">
<i class="layui-icon layui-icon-spread-left"></i>
</li>
<li class="layui-nav-item layui-hide-xs" lay-on="nav-change-content" lay-data="draw-chatgpt-content"><a href="javascript:;">ChatGPT</a></li>
<li class="layui-nav-item layui-hide-xs" lay-on="nav-change-content" lay-data="draw-tongyi-content"><a href="javascript:;">通义千问</a></li>
<li class="layui-nav-item layui-hide-xs" lay-on="nav-change-content" lay-data="draw-wenxin-content"><a href="javascript:;">文心一言</a></li>
<li class="layui-nav-item layui-hide-xs" lay-on="nav-change-content" lay-data="draw-xunfei-content"><a href="javascript:;">科大讯飞</a></li>
</ul>
<!-- 头部区域（可配合layui 已有的水平导航） -->
<ul id="discuss-nav" class="layui-nav layui-layout-left" style="display: none">
<!-- 移动端显示 -->
<li class="layui-nav-item layui-show-xs-inline-block layui-hide-sm" lay-header-event="menuLeft">
<i class="layui-icon layui-icon-spread-left"></i>
</li>
<li class="layui-nav-item layui-hide-xs" lay-on="nav-change-content" lay-data="discuss-content"><a href="javascript:;">推荐</a></li>
<li class="layui-nav-item layui-hide-xs" lay-on="nav-change-content" lay-data="discuss-content-new"><a href="javascript:;">最新</a></li>
</ul>
<ul class="layui-nav layui-layout-right">
<li class="layui-nav-item layui-hide layui-show-sm-inline-block">
<a href="javascript:;">
<img src="//unpkg.com/[email protected]/img/layui/icon-v2.png" class="layui-nav-img">
tester
</a>
<dl class="layui-nav-child">
<dd><a href="javascript:;">Your Profile</a></dd>
<dd><a href="javascript:;">Settings</a></dd>
<dd><a href="javascript:;">Sign out</a></dd>
</dl>
</li>
<li class="layui-nav-item" lay-header-event="menuRight" lay-unselect>
<a href="javascript:;">
<i class="layui-icon layui-icon-more-vertical"></i>
</a>
</li>
</ul>
</div>
<!--22222222-->
<div class="layui-side layui-bg-black">
<div class="layui-side-scroll">
<!-- 左侧导航区域（可配合layui已有的垂直导航） -->
<ul class="layui-nav layui-nav-tree" lay-filter="test">
<li class="layui-nav-item layui-nav-itemed">
<a class="" href="javascript:;">AI功能集</a>
<dl class="layui-nav-child">
<dd><a href="javascript:;" lay-on="chat-nav-show">对话问答(文生文)</a></dd>
<dd><a href="javascript:;" lay-on="draw-nav-show">对话问图(文生图)</a></dd>
</dl>
</li>
<li class="layui-nav-item" lay-on="discuss-nav-show"><a href="javascript:;">话题讨论</a></li>
<li class="layui-nav-item" lay-on="about-us"><a href="javascript:;">关于我们</a></li>
</ul>
</div>
</div>
<!--3333333-->
<div class="layui-body">
<!-- 内容主体区域 -->
<div style="padding-top: 15px;padding-bottom: 80px">
<div>
<div id="chat-chatgpt-content">
</div>
<div id="chat-tongyi-content" class="layui-card layui-panel" style="display: none">
<div class="layui-card-header layui-font-16">
tongyi提出的问题1
</div>
<div class="layui-card-body">
tongyi回答的问题
</div>
</div>
<div id="chat-wenxin-content" class="layui-card layui-panel" style="display: none">
<div class="layui-card-header layui-font-16">
wenxin提出的问题1
</div>
<div class="layui-card-body">
wenxin回答的问题
</div>
</div>
<div id="chat-xunfei-content" class="layui-card layui-panel" style="display: none">
<div class="layui-card-header layui-font-16">
xunfei提出的问题1
</div>
<div class="layui-card-body">
xunfei回答的问题
</div>
</div>
<div id="draw-chatgpt-content" class="layui-card layui-panel" style="display: none">
</div>
<div id="draw-tongyi-content" class="layui-card layui-panel" style="display: none">
<div class="layui-card-header layui-font-16">
draw-tongyi
</div>
<div class="layui-card-body">
draw-tongyi问题
</div>
</div>
<div id="draw-wenxin-content" class="layui-card layui-panel" style="display: none">
<div class="layui-card-header layui-font-16">
draw-wenxin
</div>
<div class="layui-card-body">
draw-wenxin画图
</div>
</div>
<div id="draw-xunfei-content" class="layui-card layui-panel" style="display: none">
<div class="layui-card-header layui-font-16">
draw-xunfei
</div>
<div class="layui-card-body">
draw-xunfei回答
</div>
</div>
<div id="discuss-content" class="layui-card layui-panel" style="display: none">
<div class="layui-card-header layui-font-16">
话题讨论-推荐
</div>
<div class="layui-card-body">
话题讨论-推荐详细情况
</div>
</div>
<div id="discuss-content-new" class="layui-card layui-panel" style="display: none">
<div class="layui-card-header layui-font-16">
话题讨论-最新
</div>
<div class="layui-card-body">
话题讨论-最新详细情况
</div>
</div>
</div>
</div>
</div>
<!--4444444-->
<div id="footer-chat" class="layui-footer" style="height: 80px;line-height: 80px;">
<!-- 底部固定区域 -->
<div style="width: 80%;">
<div class="layui-input-group" style="width: 100%;">
<input type="text" id="question-input" style="margin-top: 20px;margin-left: 120px;" placeholder="输入问题..."
class="layui-input">
<div class="layui-input-suffix">
<button type="button" id="question-send" style="margin-left: 80px;" lay-on="question-send" class="layui-btn layui-btn-radius">发送
</button>
</div>
</div>
</div>
</div>
</div>
<!-- 引入 layui.js -->
<script src="/layui/layui.js"></script>
<script>
//JS
layui.use(['element', 'layer', 'util'], function(){
var element = layui.element;
var layer = layui.layer;
var util = layui.util;
//var $ = layui.$;
var jQuery = layui.$;
var question_type = "chat"; // 默认对话问答文生文，当前在使用聊天功能
util.on('lay-on',{
//对话问答(文生文)
'chat-nav-show':function () {
jQuery("#chat-nav").show();
jQuery("#draw-nav").hide();
jQuery("#discuss-nav").hide();
//对话问答-点击后顶部导航栏显示第一个标签页ChatGPT
var showDivId = "chat-chatgpt-content";
jQuery("#" + showDivId).show();
jQuery("#" + showDivId).siblings().hide();
//对话问答-点击后顶部导航栏显示第一个标签页ChatGPT+底部光标跟随
jQuery("#chat-nav").find("li").removeClass("layui-this");
jQuery("#chat-nav").find("li").eq(1).addClass("layui-this");
// 显示最下面【输入问题】对话框
jQuery("#footer-chat").show();
//底部输入框对话类型
question_type = "chat";
},
//对话问图(文生图)
'draw-nav-show':function () {
jQuery("#draw-nav").show();
jQuery("#chat-nav").hide();
jQuery("#discuss-nav").hide();
//左侧对话问图-点击后顶部导航栏显示第一个标签页ChatGPT
var showDivId = "draw-chatgpt-content";
jQuery("#" + showDivId).show();
jQuery("#" + showDivId).siblings().hide();
//左侧对话问图-点击后顶部导航栏显示第一个标签页ChatGPT+底部光标跟随
jQuery("#draw-nav").find("li").removeClass("layui-this");
jQuery("#draw-nav").find("li").eq(1).addClass("layui-this");
// 显示最下面【输入问题】对话框
jQuery("#footer-chat").show();
//底部输入框对话类型
question_type = "draw";
},
//左侧话题讨论
'discuss-nav-show':function () {
jQuery("#discuss-nav").show();
jQuery("#chat-nav").hide();
jQuery("#draw-nav").hide();
//左侧话题讨论-点击后顶部导航栏显示第一个标签页ChatGPT
var showDivId = "discuss-content";
jQuery("#" + showDivId).show();
jQuery("#" + showDivId).siblings().hide();
jQuery("#discuss-nav").find("li").removeClass("layui-this");
jQuery("#discuss-nav").find("li").eq(1).addClass("layui-this");
// 隐藏最下面【输入问题】对话框
jQuery("#footer-chat").hide();
},
//给lay-on="nav-change-content"添加函数说明,根据标签页切换显示不同的内容
'nav-change-content':function (e) {
var showDivId = jQuery(e).attr("lay-data");
jQuery("#" + showDivId).show(); // 显示自己的内容
jQuery("#" + showDivId).siblings().hide(); // 隐藏所有同级 div 的内容
},
//给主页底部【发送】按钮添加事件
'question-send':function () {
//输入问题...对话框内容
var question = jQuery("#question-input").val();
//非空判断
if (question == null || question == "") {
layer.msg("提问词不能为空,请先输入问题！");
return;
}
if(question_type == "chat") {//文生文
//前端发送ajax请求到后端restful
jQuery.ajax({
url:"/openai/chat",
type: "get",
data:{question:question},
success:function (result) {
if(result.code == 200){
var createHTML = ' <div class="layui-card layui-panel">\n' +
' <div class="layui-card-header layui-font-16">\n' +
question+' \n' +
' </div>\n' +
result.result+' <div class="layui-card-body">\n' +
' \n' +
' </div>\n' +
' </div>';
jQuery("#chat-chatgpt-content").prepend(createHTML);
jQuery("#chat-chatgpt-content").val("");
jQuery("#question-input").val("");
}else{
layer.msg(result.code+"\t"+result.message);
}
}
});
}else if(question_type == "draw"){//文生图
//前端发送ajax请求到后端restful
jQuery.ajax({
url:"/openai/draw",
type: "get",
data:{question:question},
success:function (result) {
if(result.code == 200){
var createHTML = '<div>\n' +
' <div class="layui-card-header layui-font-16">\n' +
question +
' </div>\n' +
' <div class="layui-card-body">\n<img src="' +
result.result+
'"> </div>\n' +
' </div>';
jQuery("#draw-chatgpt-content").prepend(createHTML);
jQuery("#draw-chatgpt-content").val("");
jQuery("#question-input").val("");
}else{
layer.msg(result.code+"\t"+result.message);
}
}
});
}
},
//关于我们
'about-us':function () {
layer.msg('触发了事件-关于我们');
},
});
//头部事件
util.event('lay-header-event', {
menuLeft: function(othis){ // 左侧菜单事件
layer.msg('展开左侧菜单的操作', {icon: 0});
},
menuRight: function(){ // 右侧菜单事件
layer.open({
type: 1,
title: '更多',
content: '<div style="padding: 15px;">处理右侧面板的操作</div>',
area: ['260px', '100%'],
offset: 'rt', // 右上角
anim: 'slideLeft', // 从右侧抽屉滑出
shadeClose: true,
scrollbar: false
});
}
});
});
</script>
</body>
</html>