当前位置： 首页 > news >正文

4、前后端联调文生文、文生图事件

news 2025/5/16 10:08:23

4、前后端联调文生文、文生图事件

原文地址

1、底部【发送按钮】事件触发调用后端AI程序逻辑

<!-- 前端模板如下: -->
<!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>//JSlayui.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();//对话问答-点击后顶部导航栏显示第一个标签页ChatGPTvar 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();//左侧对话问图-点击后顶部导航栏显示第一个标签页ChatGPTvar 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();//左侧话题讨论-点击后顶部导航栏显示第一个标签页ChatGPTvar 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请求到后端restfuljQuery.ajax({url:"/openai/chat",type: "get",data:{question:question},success:function (result) {}});}else if(question_type == "draw"){//文生图//前端发送ajax请求到后端restfuljQuery.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

<!-- 前端模板如下: -->
<!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/outeres@0.0.10/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>//JSlayui.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();//对话问答-点击后顶部导航栏显示第一个标签页ChatGPTvar 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();//左侧对话问图-点击后顶部导航栏显示第一个标签页ChatGPTvar 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();//左侧话题讨论-点击后顶部导航栏显示第一个标签页ChatGPTvar 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请求到后端restfuljQuery.ajax({url:"/openai/chat",type: "get",data:{question:question},success:function (result) {}});}else if(question_type == "draw"){//文生图//前端发送ajax请求到后端restfuljQuery.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

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());@Resourceprivate 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后前台进行显示和页面细节调整

if(question_type == "chat") {//文生文//前端发送ajax请求到后端restfuljQuery.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

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());@Resourceprivate 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);}
}

<!-- 前端模板如下: -->
<!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/outeres@0.0.10/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>//JSlayui.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();//对话问答-点击后顶部导航栏显示第一个标签页ChatGPTvar 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();//左侧对话问图-点击后顶部导航栏显示第一个标签页ChatGPTvar 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();//左侧话题讨论-点击后顶部导航栏显示第一个标签页ChatGPTvar 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请求到后端restfuljQuery.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请求到后端restfuljQuery.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>
http://www.xdnf.cn/news/469801.html

相关文章：

  • 趋势跟踪策略的回测
  • AI Agent开发第67课-彻底消除RAG知识库幻觉-文档分块全技巧(1)
  • pgsql14自动创建表分区
  • SpringBoot 自动装配流程
  • [Java实战]Spring Boot 3实现 RBAC 权限控制（二十五）
  • SpringBoot项目使用POI-TL动态生成Word文档
  • 去年开发一款鸿蒙Next Os的window工具箱
  • 软考软件评测师——软件工程之系统维护
  • ADS1220高精度ADC（TI）——应用 源码
  • 采用sherpa-onnx 实现 ios语音唤起的调研
  • 每周靶点：NY-ESO-1、GPC3、IL27分享
  • Linux操作
  • Oracle APEX IR报表列宽调整
  • [ctfshow web入门] web75
  • 运维实施30-FTP服务
  • 欧拉计划 Project Euler 73（分数有范围计数）题解
  • ABP User Interface-Angular UI中文详解
  • Loki的部署搭建
  • JS手写代码篇---手写 Object.create
  • 哈夫曼树完全解析：从原理到应用
  • 接口测试知识详解
  • 亚马逊运营中评论体系构建与高效索评策略解析！
  • 4寸工业三防手持机PDA，助力仓储高效管理
  • 【在qiankun模式下el-dropdown点击，浏览器报Failed to execute ‘getComputedStyle‘ on ‘Window‘: parameter 1 is not o
  • 亚马逊，temu测评采购低成本养号策略：如何用一台设备安全批量管理买家账号
  • 英语学习笔记
  • 移动端网络调试全流程：从常见抓包工具到Sniffmaster 的实战体验
  • Web》》url 参数 # 、 ？ 、@
  • manuskript开源程序是面向作家的开源工具
  • Cursor vs VS Code vs Zed