H5 与AI对话聊天框

已于 2023-12-06 09:37:00 修改
阅读量1.7k 收藏 14
点赞数 1
分类专栏： 前端 文章标签： 人工智能
于 2023-07-13 10:33:36 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_32845825/article/details/131432193
版权

 一：最终实现效果展示

 

 二：具体实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文心千帆</title>
    <style>
		body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,code,del,dfn,em,img,q,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,dialog,figure,footer,header,hgroup,nav,section,input,select,option,textarea{margin:0;padding:0;}
        * {
            box-sizing: border-box;			
        }
        body {
            background-color: #64a6ff;
			background-image: linear-gradient(270deg,#2a71ff,#64a6ff);
            font-family: "Calibri", "Roboto", sans-serif;
        }
        .chat_window {
            position: absolute;
            width: calc(100% - 20px);
            max-width: 800px;
            height: 750px;
            border-radius: 10px;
            background-color: #fff;
            left: 50%;
            top: 50%;
            transform: translateX(-50%) translateY(-50%);
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
            background-color: #f8f8f8;
            overflow: hidden;
        }
        .top_menu {
            background-color: #fff;
            width: 100%;
            padding: 10px 0;
			height: 40px;
            box-shadow: 0 1px 30px rgba(0, 0, 0, 0.1);
        }
        .top_menu .buttons {
            margin: 3px 0 0 20px;
            position: absolute;
        }
        .top_menu .buttons .button {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            display: inline-block;
            margin-right: 5px;
            position: relative;
        }
        .top_menu .buttons .button.close {
            background-color: #f5886e;
        }
        .top_menu .buttons .button.minimize {
            background-color: #fdbf68;
        }
        .top_menu .buttons .button.maximize {
            background-color: #a3d063;
        }
        .top_menu .title {
            text-align: center;
            color: #333;
            font-size: 14px;
        }
        .messages {
            position: relative;
            list-style: none;
            padding: 20px 10px 0 10px;
            margin: 0;
            height: 610px;
			overflow: hidden;
			overflow-y: scroll;
        }
        .messages .message {
            clear: both;
            overflow: hidden;
            margin-bottom: 20px;
            transition: all 0.5s linear;
            opacity: 0;
        }
        .messages .message.left .avatar {
           background-color: #f5886e;
		   background-size: 100%;
            float: left;
        }
        .messages .message.left .text_wrapper {
            background-color: #ffe6cb;
            margin-left: 20px;
        }
        .messages .message.left .text_wrapper::after,
        .messages .message.left .text_wrapper::before {
            right: 100%;
            border-right-color: #ffe6cb;
        }
        .messages .message.left .text {
            color: #c48843;
        }
        .messages .message.right .avatar {
            background-color: #fdbf68;
            float: right;
        }
        .messages .message.right .text_wrapper {
            background-color: #c7eafc;
            margin-right: 20px;
            float: right;
        }
        .messages .message.right .text_wrapper::after,
        .messages .message.right .text_wrapper::before {
            left: 100%;
            border-left-color: #c7eafc;
        }
        .messages .message.right .text {
            color: #45829b;
        }
        .messages .message.appeared {
            opacity: 1;
        }
        .messages .message .avatar {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            display: inline-block;
        }
        .messages .message .text_wrapper {
            display: inline-block;
            padding: 20px;
            border-radius: 6px;
            width: calc(100% - 85px);
            min-width: 100px;
            position: relative;
        }
        .messages .message .text_wrapper::after,
        .messages .message .text_wrapper:before {
            top: 18px;
            border: solid transparent;
            content: " ";
            height: 0;
            width: 0;
            position: absolute;
            pointer-events: none;
        }
        .messages .message .text_wrapper::after {
            border-width: 13px;
            margin-top: 0px;
        }
        .messages .message .text_wrapper::before {
            border-width: 15px;
            margin-top: -2px;
        }
        .messages .message .text_wrapper .text {
            font-size: 18px;
            font-weight: 300;
        }
        .bottom_wrapper {
            position: relative;
            width: 100%;
            background-color: #fff;
            padding: 20px;
			height:100px;
            position: absolute;
            bottom: 0;
        }
        .bottom_wrapper .message_input_wrapper {
            display: inline-block;
            height: 45px;
            border-radius: 10px;
            border: 1px solid #bcbdc0;
            width: calc(100% - 160px);
            position: relative;
            padding: 0 20px;
        }
        .bottom_wrapper .message_input_wrapper .message_input {
            border: none;
            height: 100%;
            box-sizing: border-box;
            width: calc(100% - 40px);
            position: absolute;
            outline-width: 0;
            color: #333;
			background-color: #fff;
        }
        .bottom_wrapper .send_message {
            width: 140px;
            height: 45px;
            display: inline-block;
            border-radius: 10px;
            background-color: #64a6ff;
            border: 2px solid #64a6ff;
			background-image: linear-gradient(90deg,#2a71ff,#64a6ff);
            color: #fff;
            cursor: pointer;
            transition: all 0.2s linear;
            text-align: center;
            float: right;
        }
        .bottom_wrapper .send_message:hover {
            color: #fff;
            background-color: #64a6ff;
        }
        .bottom_wrapper .send_message .text {
            font-size: 18px;
            font-weight: 300;
            display: inline-block;
            line-height: 48px;
        }
        .message_template {
            display: none;
        }
    </style>
</head>
<body>
    <div class="chat_window">
        <div class="top_menu">
            <div class="buttons">
                <div class="button close"></div>
                <div class="button minimize"></div>
                <div class="button maximize"></div>
            </div>
            <div class="title">文心千帆</div>
        </div>
        <ul class="messages"></ul>
        <div class="bottom_wrapper clearfix">
            <div class="message_input_wrapper">
                <input class="message_input" placeholder="请输入..." />
            </div>
            <div class="send_message">
                <div class="icon"></div>
                <div class="text">发送</div>
            </div>
        </div>
    </div>
    <div class="message_template">
        <li class="message">
            <div class="avatar"></div>
            <div class="text_wrapper">
                <div class="text"></div>
            </div>
        </li>
    </div>
    <script src="./static/js/jquery.js"></script>
    <script>
        (function() {
            var Message;
            Message = function(arg) {
                this.text = arg.text, this.message_side = arg.message_side;
                this.draw = (function(_this) {
                    return function() {
                        var $message;
                        $message = $($('.message_template').clone().html());
                        $message.addClass(_this.message_side).find('.text').html(_this.text);
                        $('.messages').append($message);
                        return setTimeout(function() {
                            return $message.addClass('appeared');
                        }, 0);
                    };
                })(this);
                return this;
            };

            $(function() {
                var getMessageText, message_side, sendMessage;
                var canInput = false;
                message_side = 'right';
                getMessageText = function() {
                    var $message_input;
                    $message_input = $('.message_input');
                    return $message_input.val();
                };
                sendMessage = function(text,role) {
                    var $messages, message;
                    if (text.trim() === '') {
                        return;
                    }
                    $('.message_input').val('');
                    $messages = $('.messages');
                    message_side = message_side === 'left' ? 'right' : 'left';
                    message = new Message({
                        text: text,
                        message_side: message_side
                    });

                    message.draw();
                    $messages.animate({
                        scrollTop: $messages.prop('scrollHeight')
                    }, 300);
                };
                $('.send_message').click(function(e) {
                    var msg_url = "https://www.XXX.com/active/shop/run";
                    var msg_content = getMessageText();
                    if(msg_content === '' || msg_content.trim().length === 0)
                    {
                        return;
                    }
                    sendMessage(msg_content,'user');
                    $('.message_input').attr('readonly', true);
                    // 请求Ajax
                    $.ajax({
                        type: 'POST',
                        url: msg_url,
                        data: {msg: msg_content},
                        dataType: 'json',
                        beforeSend:function(){
                            $(".title").text('正在输入中...');
                        },
                        success: function (resp){
                            $(".title").text('文心千帆');
                            var datas = resp;
                            if (datas.code == 1) {
                                sendMessage(datas.msg,'assistant');
                            } else {
                                alert(datas.msg);
                            }
                            $('.message_input').attr('readonly', false);
                            return false;
                        }
                    });
                    
                });
                $('.message_input').keyup(function(e) {
                    if (e.which === 13) {
                        var msg_url = "https://www.XXX.com/active/shop/run";
                        var msg_content = getMessageText();
                        var canInput = true;
                        if(msg_content === '' || msg_content.trim().length === 0)
                        {
                            return;
                        }
                        sendMessage(msg_content,'user');
                        $('.message_input').attr('readonly', true);
                        // 请求Ajax
                        $.ajax({
                            type: 'POST',
                            url: msg_url,
                            data: {msg: msg_content},
                            dataType: 'json',
                            beforeSend:function(){
                                $(".title").text('正在输入中...');
                            },
                            success: function (resp){
                                $(".title").text('文心千帆');
                                var datas = resp;
                                if (datas.code == 1) {
                                    sendMessage(datas.msg,'assistant');
                                }  else {
                                    alert(datas.msg);
                                }
                                $('.message_input').attr('readonly', false);
                                return false;
                            }
                        });
                    }
                });
                sendMessage('你好! :)','assistant');
                
            });

        }).call(this);
    </script>
</body>
</html>

PHP 代码

<?php
// +----------------------------------------------------------------------
// | Author: xiaozhe
// +----------------------------------------------------------------------
namespace api\food\controller;
use cmf\controller\RestBaseController;
use bdchat\Chat;

class ShopController extends RestBaseController
{

    public function run() {
        // 对话
        $datas = $this->request->post();
        $msg = $datas['msg'];
        if (empty($msg)) {
            $result['code'] = 0;
            $result['msg'] = '请求参数有误！';
            exit(json_encode($result));
        }
        include_once CMF_ROOT . 'vendor/baidubce/Chat.php';
        $chat = new Chat('client_id','client_secret');
        $messages = [];
        $my_msg = [];
        $my_msg['role'] = 'user';
        $my_msg['content'] = $msg;
        $messages['messages'][] = $my_msg;
        $data = json_encode($messages,JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES);
        $response = $chat->runErnieBotTurbo($data);
        $res = json_decode($response,true);
        if (empty($res['result'])) {
            $result['msg'] = '这个问题我还不是很清楚，您换个问法再试试';
        } else {
            $result['msg'] = $res['result'];
        }
        $result['code'] = 1;
        exit(json_encode($result));
    }
    

}

<?php
namespace bdchat;
class Chat {

    private $client_id;
    private $client_secret;
    private $message;
    public function __construct($client_id, $client_secret) {
        $this->client_id = $client_id;
        $this->client_secret = $client_secret;
    }

    public function runErnieBot($message) {
        $curl = curl_init();
        curl_setopt_array($curl, array(
            CURLOPT_URL => "https://aip.baidubce.com/rpc/2.0/ai_custom/v1/wenxinworkshop/chat/completions?access_token={$this->getAccessToken()}",
            CURLOPT_TIMEOUT => 30,
            CURLOPT_RETURNTRANSFER => true,
            CURLOPT_CUSTOMREQUEST => 'POST',
            CURLOPT_POSTFIELDS =>$message,
            CURLOPT_HTTPHEADER => array(
                'Content-Type: application/json'
            ),

        ));
        $response = curl_exec($curl);
        curl_close($curl);
        return $response;
    }

    public function runErnieBotTurbo($message) {
        $curl = curl_init();
        curl_setopt_array($curl, array(
            CURLOPT_URL => "https://aip.baidubce.com/rpc/2.0/ai_custom/v1/wenxinworkshop/chat/eb-instant?access_token={$this->getAccessToken()}",
            CURLOPT_TIMEOUT => 30,
            CURLOPT_RETURNTRANSFER => true,
            CURLOPT_CUSTOMREQUEST => 'POST',
            CURLOPT_POSTFIELDS =>$message,
    
            CURLOPT_HTTPHEADER => array(
                'Content-Type: application/json'
            ),

        ));
        $response = curl_exec($curl);
        curl_close($curl);
        return $response;
    }
    
    
    /**
     * 使用 AK，SK 生成鉴权签名（Access Token）
     * @return string 鉴权签名信息（Access Token）
     */
    private function getAccessToken(){
        $curl = curl_init();
        curl_setopt_array($curl, array(
            CURLOPT_URL => "https://aip.baidubce.com/oauth/2.0/token?client_id=".$this->client_id."&client_secret=".$this->client_secret."&grant_type=client_credentials",
            CURLOPT_TIMEOUT => 30,
            CURLOPT_RETURNTRANSFER => true,
            CURLOPT_CUSTOMREQUEST => 'POST',
            CURLOPT_HTTPHEADER => array(
                'Content-Type: application/json',
                'Accept: application/json'
            ),

        ));
        $response = curl_exec($curl);
        curl_close($curl);
        $rtn = json_decode($response);
        return $rtn->access_token;
    }
}

蹦跶哒的王小哲
关注
  • 1
    点赞
  • 踩
  • 14
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
自动聊天机器人简单实现（纯html5+jquery）
06-04
纯HTML5+jquery实现网页版机器人自动聊天
html5 web微信聊天窗口界面模板
12-19
html5 web微信聊天窗口界面模板,html5 web微信聊天窗口界面模板,html5 web微信聊天窗口界面模板,html5 web微信聊天窗口界面模板
亲测可用：ChatGPT手机H5版-100页智能AI聊天应用HTML5模板
GGbo6688的博客
05-20 439
Maigo是一款含100页ChatGPT手机H5智能AI聊天应用HTML5网站模板，使用Maigo 拥抱用户交互的未来，这是一款综合UI 模板，使您能够构建由下一代 GPT 技术提供支持的智能、引人入胜且功能丰富的 AI 聊天机器人移动应用程序。无论您是寻求增强客户服务的企业、寻求尝试聊天机器人的开发人员，还是对人工智能着迷的个人，Maigo都能为您提供工具，打造真正独特且迷人的移动体验。
vue.js实现h5机器人聊天（测试版）
10-15
主要介绍了vue.js实现h5机器人聊天测试版，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
简单的html5聊天对话展示（html+jq+css）
05-28
纯聊天框页面，展示对话内容。可用websocket对接后台的输出内容，实时展示在页面上。
AI人工智能对话系统网页版源码系统 附带完整的搭建教程
codeji的博客
11-24 1597
此外，随着互联网的普及和人们对智能对话系统的需求不断增加，AI人工智能对话系统网页版源码系统也逐渐成为了企业和个人的首选。该系统可以通过网页进行访问和交互，方便快捷地解决用户的问题和需求，同时还可以为企业提供定制化的服务，提高企业的竞争力和用户体验。AI人工智能对话系统网页版源码系统采用了自然语言处理技术，可以理解和分析用户输入的自然语言，从而进行智能化的回答和交互。用户可以通过对话系统进行连续的交互和提问，系统可以根据用户的意图和问题，进行自我学习和回答，从而完成复杂的任务。
html模拟聊天框实现，仅用html，css，js实现
m0_72190449的博客
12-23 9596
html模拟聊天框一共分为两大部分，一部分是登录，一部分是聊天框内容。
用css搭建一个h5聊天界面
weixin_42601608的博客
01-04 815
好的，那么你可以这样做： 创建一个 HTML 文件，并在里面添加一个 div 元素作为聊天界面的容器。 使用 CSS 给这个容器添加样式，例如设置背景颜色、边框等。 在 HTML 中添加一个文本输入框和一个按钮，用于输入聊天信息并发送。 使用 JavaScript 在点击按钮时将聊天信息添加到聊天界面中。 使用 CSS 给聊天信息添加样式，例如设置字体颜色、大小等。 这是一个基本的聊...
移动端h5聊天室布局
weixin_43550562的博客
03-07 905
h5聊天
实现chatGPT 聊天样式
weixin_40466351的博客
08-17 1798
1、因为GPT请求返回来得数据是markdown数据，主要是用marked解析markdown数据格式。根据此链接，找到了正确的js文件和css样式文件。2、然后用highlight实现代码的高亮显示。在下载的文档中看README.md 文档。最开始这里不晓得怎么引入， 然后用。提示没有require。
MUI实现h5即时通讯聊天页面样式
Serena_tz的博客
09-05 323
MUI实现h5即时通讯聊天页面样式
二开ChatGPT微信小程序源码 AI聊天微信小程序源码 适配H5和WEB端 支持AI聊天次数限制.zip
10-11
ChatGPT-MP(基于ChatGPT实现的微信小程序，适配H5和WEB端) 可二开包含前后台，支持打字效果输出流式输出，支持AI聊天次数限制，支持分享增加次数等功能。开源版禁止商用，仅供学习交流，禁止倒卖。 感谢Star！ 技术...
二开ChatGPT微信小程序源码 AI聊天微信小程序源码 适配H5和WEB端 支持AI聊天次数限制.rar
08-23
ChatGPT-MP(基于ChatGPT实现的微信小程序，适配H5和WEB端) 可二开包含前后台，支持打字效果输出流式输出，支持AI聊天次数限制，支持分享增加次数等功能。开源版禁止商用，仅供学习交流，禁止倒卖。 感谢Star！ 技术...
最新AI智能聊天对话问答助手系统源码+AI绘画系统+语音识别输入+文档分析
05-26
6、支持语音模式、可与ai直接语音对话支持 7、其他核心功能.. 二、使用安装教程 环境要求 Nginx >= 1.19.8 MySQL >= 5.7或者MySQL 8.0 PHP-7.4 PM2管理器 5.5 Redis 7.0.11 Node版本：>=16.19.1 在代码中我们提供了...
山东大学项目实训（五）——AI对话框功能完善
最新发布
W_Haojun的博客
05-30 518
修改代码之后，再次运行界面发现此时虽然满足了＂头像跟随对话框出现＂这一要求，但是此时头像出现在了对话框的左边,不符合常规对话app中头像在右边的布局,且此时对话框出现在中间,布局不合理,因此再次调整代码。可以看到在目前的页面中，头像位置固定在右上方，并且在发送消息时，并不会呈现出常规对话APP那样头像跟着对话框一起出现的情形（如QQ）因此我们需要修改代码，实现上述功能的同时使得界面更加美观。在经过前几周的学习、编写代码之后，本项目的前端已经基本搭建完成。为了确保每条消息的头像显示在消息的左边，需要调整。
h5仿微信聊天(高仿版)、微信聊天表情|对话框|编辑器
weixin_34007291的博客
04-23 4313
之前做过一版h5微信聊天移动端，这段时间闲来无事就整理了下之前项目，又重新在原先的那版基础上升级了下，如是就有了现在的h5仿微信聊天高仿版，新增了微聊、通讯录、探索、我四个模块 左右触摸滑屏切换，聊天页面优化了多图预览、视频播放，长按菜单UI，聊天底部编辑器重新优化整理(新增多表情)，弹窗则用到了自己开发的wcPop.js，具体看项目效果图吧！ html代码片段： <!-- //微聊...
vue中实现聊天的功能，vue2+vant；聊天界面滚动条始终在底部，H5中自己写一个聊天
qq_36808770的博客
04-25 836
在本地演示，所以使用的mock数据，真实环境的聊天需要接入websocket服务。界面里也加了两个按钮，用于模拟两个角色发消息。 因为我是在H5项目里，所以UI基于vant。 通过路由后面传递不同参数？user=1【1-查勘员，2-车主】，展示的界面也会略微不同。最下面会有效果截图，可自行查看。 data.js 因为我把初始聊天的数据单独抽离出来了，你们可以根据自身情况，是否抽离。 css 因为vant是基于less，所以我用的样式处理器是less、less-lo
【移动端聊天功能模板】Vue实现H5聊天系统，实现上下固定中间滚动布局，微信授权功能，自动滚动到底部【详细注释，一看就会】
seeeeeeeeeee的博客
08-03 8329
vue-vant实现仿微信聊天界面，上下固定中间滚动自适应高度。移动端聊天功能，H5聊天功能实现。
HTML和JS，css实现聊天机器人
m0_74958760的博客
01-31 371
HTML部分index.html。
uniapp对话聊天界面
02-20
UniApp是一款基于Vue.js的跨平台开发框架，可以用于开发iOS、Android、H5等多个平台的应用程序。对于实现对话聊天界面，UniApp提供了一些常用的组件和功能，可以帮助开发者快速构建出漂亮且功能丰富的聊天界面。 首先，UniApp提供了`uni-list`组件，可以用来展示聊天消息列表。开发者可以通过循环遍历消息列表数据，并使用条件渲染来展示不同类型的消息，比如文本消息、图片消息、语音消息等。 其次，UniApp还提供了`uni-input`组件，可以用来输入聊天内容。开发者可以监听输入框的输入事件，并将输入的内容保存到数据中。 另外，UniApp还支持使用WebSocket进行实时通信。开发者可以在页面的生命周期函数中创建WebSocket连接，并监听服务器发送过来的消息。当接收到新的消息时，可以将其添加到聊天消息列表中，并通过数据绑定实现实时更新。 除了以上提到的组件和功能，UniApp还提供了丰富的UI组件库和插件市场，开发者可以根据自己的需求选择合适的组件和插件来增强聊天界面的功能和交互体验。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值