devbox
空白诗007
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

H5 与AI对话聊天框_聊天对话h5模板

作者：空白诗007 | 2024-07-30 11:24:47

赞

踩

聊天对话h5模板

 一：最终实现效果展示

 

 二：具体实现

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5. 	<meta name="renderer" content="webkit">
  6. 	<meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>文心千帆</title>
  9.     <style>
  10. 		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;}
  11.         * {
  12.             box-sizing: border-box;			
  13.         }
  14.         body {
  15.             background-color: #64a6ff;
  16. 			background-image: linear-gradient(270deg,#2a71ff,#64a6ff);
  17.             font-family: "Calibri", "Roboto", sans-serif;
  18.         }
  19.         .chat_window {
  20.             position: absolute;
  21.             width: calc(100% - 20px);
  22.             max-width: 800px;
  23.             height: 750px;
  24.             border-radius: 10px;
  25.             background-color: #fff;
  26.             left: 50%;
  27.             top: 50%;
  28.             transform: translateX(-50%) translateY(-50%);
  29.             box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
  30.             background-color: #f8f8f8;
  31.             overflow: hidden;
  32.         }
  33.         .top_menu {
  34.             background-color: #fff;
  35.             width: 100%;
  36.             padding: 10px 0;
  37. 			height: 40px;
  38.             box-shadow: 0 1px 30px rgba(0, 0, 0, 0.1);
  39.         }
  40.         .top_menu .buttons {
  41.             margin: 3px 0 0 20px;
  42.             position: absolute;
  43.         }
  44.         .top_menu .buttons .button {
  45.             width: 12px;
  46.             height: 12px;
  47.             border-radius: 50%;
  48.             display: inline-block;
  49.             margin-right: 5px;
  50.             position: relative;
  51.         }
  52.         .top_menu .buttons .button.close {
  53.             background-color: #f5886e;
  54.         }
  55.         .top_menu .buttons .button.minimize {
  56.             background-color: #fdbf68;
  57.         }
  58.         .top_menu .buttons .button.maximize {
  59.             background-color: #a3d063;
  60.         }
  61.         .top_menu .title {
  62.             text-align: center;
  63.             color: #333;
  64.             font-size: 14px;
  65.         }
  66.         .messages {
  67.             position: relative;
  68.             list-style: none;
  69.             padding: 20px 10px 0 10px;
  70.             margin: 0;
  71.             height: 610px;
  72. 			overflow: hidden;
  73. 			overflow-y: scroll;
  74.         }
  75.         .messages .message {
  76.             clear: both;
  77.             overflow: hidden;
  78.             margin-bottom: 20px;
  79.             transition: all 0.5s linear;
  80.             opacity: 0;
  81.         }
  82.         .messages .message.left .avatar {
  83.            background-color: #f5886e;
  84. 		   background-size: 100%;
  85.             float: left;
  86.         }
  87.         .messages .message.left .text_wrapper {
  88.             background-color: #ffe6cb;
  89.             margin-left: 20px;
  90.         }
  91.         .messages .message.left .text_wrapper::after,
  92.         .messages .message.left .text_wrapper::before {
  93.             right: 100%;
  94.             border-right-color: #ffe6cb;
  95.         }
  96.         .messages .message.left .text {
  97.             color: #c48843;
  98.         }
  99.         .messages .message.right .avatar {
  100.             background-color: #fdbf68;
  101.             float: right;
  102.         }
  103.         .messages .message.right .text_wrapper {
  104.             background-color: #c7eafc;
  105.             margin-right: 20px;
  106.             float: right;
  107.         }
  108.         .messages .message.right .text_wrapper::after,
  109.         .messages .message.right .text_wrapper::before {
  110.             left: 100%;
  111.             border-left-color: #c7eafc;
  112.         }
  113.         .messages .message.right .text {
  114.             color: #45829b;
  115.         }
  116.         .messages .message.appeared {
  117.             opacity: 1;
  118.         }
  119.         .messages .message .avatar {
  120.             width: 50px;
  121.             height: 50px;
  122.             border-radius: 50%;
  123.             display: inline-block;
  124.         }
  125.         .messages .message .text_wrapper {
  126.             display: inline-block;
  127.             padding: 20px;
  128.             border-radius: 6px;
  129.             width: calc(100% - 85px);
  130.             min-width: 100px;
  131.             position: relative;
  132.         }
  133.         .messages .message .text_wrapper::after,
  134.         .messages .message .text_wrapper:before {
  135.             top: 18px;
  136.             border: solid transparent;
  137.             content: " ";
  138.             height: 0;
  139.             width: 0;
  140.             position: absolute;
  141.             pointer-events: none;
  142.         }
  143.         .messages .message .text_wrapper::after {
  144.             border-width: 13px;
  145.             margin-top: 0px;
  146.         }
  147.         .messages .message .text_wrapper::before {
  148.             border-width: 15px;
  149.             margin-top: -2px;
  150.         }
  151.         .messages .message .text_wrapper .text {
  152.             font-size: 18px;
  153.             font-weight: 300;
  154.         }
  155.         .bottom_wrapper {
  156.             position: relative;
  157.             width: 100%;
  158.             background-color: #fff;
  159.             padding: 20px;
  160. 			height:100px;
  161.             position: absolute;
  162.             bottom: 0;
  163.         }
  164.         .bottom_wrapper .message_input_wrapper {
  165.             display: inline-block;
  166.             height: 45px;
  167.             border-radius: 10px;
  168.             border: 1px solid #bcbdc0;
  169.             width: calc(100% - 160px);
  170.             position: relative;
  171.             padding: 0 20px;
  172.         }
  173.         .bottom_wrapper .message_input_wrapper .message_input {
  174.             border: none;
  175.             height: 100%;
  176.             box-sizing: border-box;
  177.             width: calc(100% - 40px);
  178.             position: absolute;
  179.             outline-width: 0;
  180.             color: #333;
  181. 			background-color: #fff;
  182.         }
  183.         .bottom_wrapper .send_message {
  184.             width: 140px;
  185.             height: 45px;
  186.             display: inline-block;
  187.             border-radius: 10px;
  188.             background-color: #64a6ff;
  189.             border: 2px solid #64a6ff;
  190. 			background-image: linear-gradient(90deg,#2a71ff,#64a6ff);
  191.             color: #fff;
  192.             cursor: pointer;
  193.             transition: all 0.2s linear;
  194.             text-align: center;
  195.             float: right;
  196.         }
  197.         .bottom_wrapper .send_message:hover {
  198.             color: #fff;
  199.             background-color: #64a6ff;
  200.         }
  201.         .bottom_wrapper .send_message .text {
  202.             font-size: 18px;
  203.             font-weight: 300;
  204.             display: inline-block;
  205.             line-height: 48px;
  206.         }
  207.         .message_template {
  208.             display: none;
  209.         }
  210.     </style>
  211. </head>
  212. <body>
  213.     <div class="chat_window">
  214.         <div class="top_menu">
  215.             <div class="buttons">
  216.                 <div class="button close"></div>
  217.                 <div class="button minimize"></div>
  218.                 <div class="button maximize"></div>
  219.             </div>
  220.             <div class="title">文心千帆</div>
  221.         </div>
  222.         <ul class="messages"></ul>
  223.         <div class="bottom_wrapper clearfix">
  224.             <div class="message_input_wrapper">
  225.                 <input class="message_input" placeholder="请输入..." />
  226.             </div>
  227.             <div class="send_message">
  228.                 <div class="icon"></div>
  229.                 <div class="text">发送</div>
  230.             </div>
  231.         </div>
  232.     </div>
  233.     <div class="message_template">
  234.         <li class="message">
  235.             <div class="avatar"></div>
  236.             <div class="text_wrapper">
  237.                 <div class="text"></div>
  238.             </div>
  239.         </li>
  240.     </div>
  241.     <script src="./static/js/jquery.js"></script>
  242.     <script>
  243.         (function() {
  244.             var Message;
  245.             Message = function(arg) {
  246.                 this.text = arg.text, this.message_side = arg.message_side;
  247.                 this.draw = (function(_this) {
  248.                     return function() {
  249.                         var $message;
  250.                         $message = $($('.message_template').clone().html());
  251.                         $message.addClass(_this.message_side).find('.text').html(_this.text);
  252.                         $('.messages').append($message);
  253.                         return setTimeout(function() {
  254.                             return $message.addClass('appeared');
  255.                         }, 0);
  256.                     };
  257.                 })(this);
  258.                 return this;
  259.             };
  260.  
  261.             $(function() {
  262.                 var getMessageText, message_side, sendMessage;
  263.                 var canInput = false;
  264.                 message_side = 'right';
  265.                 getMessageText = function() {
  266.                     var $message_input;
  267.                     $message_input = $('.message_input');
  268.                     return $message_input.val();
  269.                 };
  270.                 sendMessage = function(text,role) {
  271.                     var $messages, message;
  272.                     if (text.trim() === '') {
  273.                         return;
  274.                     }
  275.                     $('.message_input').val('');
  276.                     $messages = $('.messages');
  277.                     message_side = message_side === 'left' ? 'right' : 'left';
  278.                     message = new Message({
  279.                         text: text,
  280.                         message_side: message_side
  281.                     });
  282.  
  283.                     message.draw();
  284.                     $messages.animate({
  285.                         scrollTop: $messages.prop('scrollHeight')
  286.                     }, 300);
  287.                 };
  288.                 $('.send_message').click(function(e) {
  289.                     var msg_url = "https://www.XXX.com/active/shop/run";
  290.                     var msg_content = getMessageText();
  291.                     if(msg_content === '' || msg_content.trim().length === 0)
  292.                     {
  293.                         return;
  294.                     }
  295.                     sendMessage(msg_content,'user');
  296.                     $('.message_input').attr('readonly', true);
  297.                     // 请求Ajax
  298.                     $.ajax({
  299.                         type: 'POST',
  300.                         url: msg_url,
  301.                         data: {msg: msg_content},
  302.                         dataType: 'json',
  303.                         beforeSend:function(){
  304.                             $(".title").text('正在输入中...');
  305.                         },
  306.                         success: function (resp){
  307.                             $(".title").text('文心千帆');
  308.                             var datas = resp;
  309.                             if (datas.code == 1) {
  310.                                 sendMessage(datas.msg,'assistant');
  311.                             } else {
  312.                                 alert(datas.msg);
  313.                             }
  314.                             $('.message_input').attr('readonly', false);
  315.                             return false;
  316.                         }
  317.                     });
  318.                     
  319.                 });
  320.                 $('.message_input').keyup(function(e) {
  321.                     if (e.which === 13) {
  322.                         var msg_url = "https://www.XXX.com/active/shop/run";
  323.                         var msg_content = getMessageText();
  324.                         var canInput = true;
  325.                         if(msg_content === '' || msg_content.trim().length === 0)
  326.                         {
  327.                             return;
  328.                         }
  329.                         sendMessage(msg_content,'user');
  330.                         $('.message_input').attr('readonly', true);
  331.                         // 请求Ajax
  332.                         $.ajax({
  333.                             type: 'POST',
  334.                             url: msg_url,
  335.                             data: {msg: msg_content},
  336.                             dataType: 'json',
  337.                             beforeSend:function(){
  338.                                 $(".title").text('正在输入中...');
  339.                             },
  340.                             success: function (resp){
  341.                                 $(".title").text('文心千帆');
  342.                                 var datas = resp;
  343.                                 if (datas.code == 1) {
  344.                                     sendMessage(datas.msg,'assistant');
  345.                                 }  else {
  346.                                     alert(datas.msg);
  347.                                 }
  348.                                 $('.message_input').attr('readonly', false);
  349.                                 return false;
  350.                             }
  351.                         });
  352.                     }
  353.                 });
  354.                 sendMessage('你好! :)','assistant');
  355.                 
  356.             });
  357.  
  358.         }).call(this);
  359.     </script>
  360. </body>
  361. </html>

PHP 代码

  1. <?php
  2. // +----------------------------------------------------------------------
  3. // | Author: xiaozhe
  4. // +----------------------------------------------------------------------
  5. namespace api\food\controller;
  6. use cmf\controller\RestBaseController;
  7. use bdchat\Chat;
  8.  
  9. class ShopController extends RestBaseController
  10. {
  11.  
  12.     public function run() {
  13.         // 对话
  14.         $datas = $this->request->post();
  15.         $msg = $datas['msg'];
  16.         if (empty($msg)) {
  17.             $result['code'] = 0;
  18.             $result['msg'] = '请求参数有误！';
  19.             exit(json_encode($result));
  20.         }
  21.         include_once CMF_ROOT . 'vendor/baidubce/Chat.php';
  22.         $chat = new Chat('client_id','client_secret');
  23.         $messages = [];
  24.         $my_msg = [];
  25.         $my_msg['role'] = 'user';
  26.         $my_msg['content'] = $msg;
  27.         $messages['messages'][] = $my_msg;
  28.         $data = json_encode($messages,JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES);
  29.         $response = $chat->runErnieBotTurbo($data);
  30.         $res = json_decode($response,true);
  31.         if (empty($res['result'])) {
  32.             $result['msg'] = '这个问题我还不是很清楚，您换个问法再试试';
  33.         } else {
  34.             $result['msg'] = $res['result'];
  35.         }
  36.         $result['code'] = 1;
  37.         exit(json_encode($result));
  38.     }
  39.     
  40.  
  41. }
  1. <?php
  2. namespace bdchat;
  3. class Chat {
  4.  
  5.     private $client_id;
  6.     private $client_secret;
  7.     private $message;
  8.     public function __construct($client_id, $client_secret) {
  9.         $this->client_id = $client_id;
  10.         $this->client_secret = $client_secret;
  11.     }
  12.  
  13.     public function runErnieBot($message) {
  14.         $curl = curl_init();
  15.         curl_setopt_array($curl, array(
  16.             CURLOPT_URL => "https://aip.baidubce.com/rpc/2.0/ai_custom/v1/wenxinworkshop/chat/completions?access_token={$this->getAccessToken()}",
  17.             CURLOPT_TIMEOUT => 30,
  18.             CURLOPT_RETURNTRANSFER => true,
  19.             CURLOPT_CUSTOMREQUEST => 'POST',
  20.             CURLOPT_POSTFIELDS =>$message,
  21.             CURLOPT_HTTPHEADER => array(
  22.                 'Content-Type: application/json'
  23.             ),
  24.  
  25.         ));
  26.         $response = curl_exec($curl);
  27.         curl_close($curl);
  28.         return $response;
  29.     }
  30.  
  31.     public function runErnieBotTurbo($message) {
  32.         $curl = curl_init();
  33.         curl_setopt_array($curl, array(
  34.             CURLOPT_URL => "https://aip.baidubce.com/rpc/2.0/ai_custom/v1/wenxinworkshop/chat/eb-instant?access_token={$this->getAccessToken()}",
  35.             CURLOPT_TIMEOUT => 30,
  36.             CURLOPT_RETURNTRANSFER => true,
  37.             CURLOPT_CUSTOMREQUEST => 'POST',
  38.             CURLOPT_POSTFIELDS =>$message,
  39.     
  40.             CURLOPT_HTTPHEADER => array(
  41.                 'Content-Type: application/json'
  42.             ),
  43.  
  44.         ));
  45.         $response = curl_exec($curl);
  46.         curl_close($curl);
  47.         return $response;
  48.     }
  49.     
  50.     
  51.     /**
  52.      * 使用 AK，SK 生成鉴权签名（Access Token）
  53.      * @return string 鉴权签名信息（Access Token）
  54.      */
  55.     private function getAccessToken(){
  56.         $curl = curl_init();
  57.         curl_setopt_array($curl, array(
  58.             CURLOPT_URL => "https://aip.baidubce.com/oauth/2.0/token?client_id=".$this->client_id."&client_secret=".$this->client_secret."&grant_type=client_credentials",
  59.             CURLOPT_TIMEOUT => 30,
  60.             CURLOPT_RETURNTRANSFER => true,
  61.             CURLOPT_CUSTOMREQUEST => 'POST',
  62.             CURLOPT_HTTPHEADER => array(
  63.                 'Content-Type: application/json',
  64.                 'Accept: application/json'
  65.             ),
  66.  
  67.         ));
  68.         $response = curl_exec($curl);
  69.         curl_close($curl);
  70.         $rtn = json_decode($response);
  71.         return $rtn->access_token;
  72.     }
  73. }

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/空白诗007/article/detail/903519
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号