From 337f64bde92c5ee715d7fc568cfdeda8210a731a Mon Sep 17 00:00:00 2001
From: xuhuajiao <13476289682@163.com>
Date: Fri, 16 Aug 2024 15:06:06 +0800
Subject: [PATCH] =?UTF-8?q?=E7=AC=AC=E4=B8=80=E6=AC=A1=E6=8F=90=E4=BA=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ai_chat.html | 200 +++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 200 insertions(+)
 create mode 100644 ai_chat.html
diff --git a/ai_chat.html b/ai_chat.html
new file mode 100644
index 0000000..affed2a
--- /dev/null
+++ b/ai_chat.html
@@ -0,0 +1,200 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+  <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
+  <meta http-equiv="Pragma" content="no-cache" />
+  <meta http-equiv="Expires" content="0" />
+  <link rel="stylesheet" type="text/css" href="css/libs/reset.css">
+  <link rel="stylesheet" type="text/css" href="css/common.css">
+  <link rel="stylesheet" type="text/css" href="css/index.css">  
+  <title>AI数字人</title>
+  <!--[if lt IE 9]>
+  <script src="js/html5shiv.js"></script>
+  <script src="js/respond.min.js"></script>
+  <![endif]-->
+</head>
+<body>
+  <div class="ai-wrapper">
+	  <video class="ai-bg" src="./images/bg.mp4" autoplay="autoplay" loop="loop" muted="muted"></video>
+    <div class="ai-header-wrapper">
+      <div class="ai-header">
+        <div class="header-btn header-home" onclick="history.go(-1); return false;"><span></span><p>首页</p></div>
+        <div class="header-title">
+          <h2>AI编程机器人体验系统</h2>
+        </div>
+        <div class="header-btn header-login"><span></span><p>登录</p></div>
+      </div>
+    </div>
+
+    <div class="chat-wrapper">
+      <div class="chat-content">
+      </div>
+      <div class="chat-send">
+        <textarea cols="50" rows="7"></textarea>
+        <!-- <div class="send-button">send</div> -->
+        <div class="send-button-container">
+          <input type="button" value="发送" class="send-button">
+        </div>
+      </div>
+    </div>
+  </div>
+</body>
+<script type="text/javascript" src="js/libs/jquery-3.7.1.min.js"></script>
+<script type="text/javascript" src="js/libs/layer/layer.js"></script>
+<script type="text/javascript" src="js/libs/flexible.js"></script>
+<script>
+  $(document).ready(function() {
+      const $sendButton = $('.send-button');
+      const $textArea = $('.chat-send textarea');
+      const $chatContent = $('.chat-content');
+
+      let isBotReplying = false;
+      let isBotTyping = false;
+
+      // 默认进来AI数字人发送欢迎消息
+      function sendWelcomeMessage() {
+        const welcomeMessage = '您好！请问有什么问题可以帮您解答吗？';
+        appendMessage(welcomeMessage, false, false, true);
+      }
+      sendWelcomeMessage();
+
+      // 初始化时检查按钮状态
+      updateSendButtonState();
+      function updateSendButtonState() {
+        const message = $textArea.val().trim();
+        //  && !isBotReplying && !isBotTyping
+        if (message) {
+          $sendButton.prop('disabled', false).removeClass('send-disabled-button');
+        } else {
+          $sendButton.prop('disabled', true).addClass('send-disabled-button');
+        }
+      }
+
+      // 当 textarea 内容变化时更新按钮状态
+      $textArea.on('input', function() {
+        updateSendButtonState();
+      });
+
+      // 发送消息并接收机器人的回复
+      $sendButton.click(function() {
+        if (!isBotReplying && !isBotTyping) {
+          const message = $textArea.val().trim();
+          if (message) {
+            appendMessage(message, true, false);
+            $textArea.val('');
+            $sendButton.prop('disabled', true).addClass('send-disabled-button');
+
+            // loading
+            appendMessage('', false, true);
+            isBotReplying = true;
+
+            $.ajax({
+              url: 'http://192.168.99.86:3001/api/v1/workspace/dxhtsg/chat',
+              type: 'POST',
+              headers: {
+                'Authorization': 'Bearer XVSPT0T-6P54SZH-QP36QKJ-KK77TN6'
+              },
+              contentType:'application/json',
+              dataType: "json",
+              data: JSON.stringify({
+                'message': message,
+                'mode':'chat'
+              }),
+              success: function (res) {
+                $('.loading').parent().remove();
+                const botReply = res.textResponse.replace(/\【(\/)?SYS\】/gi, '飞天智能AI小助手');
+                // const botReply = res.textResponse.replace(/【(.*?)】/g, function(match, p1) {
+                //     return '【飞天智能AI小助手】';
+                // });
+                console.log(botReply);
+                // 添加完整的机器人回复
+                appendMessage('', false, false);
+                isBotTyping = true;
+                let i = 0;
+                const speed = 50; // 每个字符的打字速度，单位：毫秒
+
+                typeWriter();
+                function typeWriter() {
+                  if (!isBotTyping) {
+                    // 如果isBotReplying为false，则停止打字
+                    return;
+                  }
+                  if (i < botReply.length) {
+                    $chatContent.find('.bot-message:last-child p').append(botReply.charAt(i));
+                    i++;
+                    setTimeout(typeWriter, speed);
+                    $chatContent.scrollTop($chatContent[0].scrollHeight);
+                  } else {
+                    // 完成打字后更新状态
+                    isBotTyping = false;
+                    isBotReplying = false;
+                    $('#stop-btn').remove()
+                  }
+                }
+              },
+              error: function (err) {
+                console.log(err);
+              }
+            });
+          }
+        } else if (isBotTyping) {
+          console.log('isBotTyping',isBotTyping)
+          // 输入中
+          layer.msg('请等待当前对话完成，稍后再试。', {
+            offset: 50,
+            anim: 6
+          });
+        } else if (isBotReplying) {
+          // loading中
+          layer.msg('请等待当前对话完成，稍后再试。', {
+            offset: 50,
+            anim: 6
+          });
+        }
+      });
+
+      // 回车键发送消息
+      $textArea.keypress(function(event) {
+        if (event.which === 13) {
+          event.preventDefault(); // 防止默认换行行为
+          $sendButton.click();
+        }
+      });
+
+      function appendMessage(content, isUserMessage, isLoading, isWelcomeMessage) {
+        const className = isUserMessage ? 'user-message' : 'bot-message';
+        const avatarSrc = isUserMessage ? 'images/other/pic1.jpg' : 'images/other/pic2.jpg';
+        let messageContent
+
+        if (isLoading) {
+            messageContent = '<p class="loading"><img src="images/other/loading.png" alt="loading"></p>';
+        } else {
+            // 当isUserMessage为false时，才添加<span>停止输出</span>
+            messageContent = isUserMessage
+            ? `<p>${content}</p>`
+            : isWelcomeMessage
+                ? `<p>${content}</p>` // 如果是欢迎消息，即使isUserMessage为false，也不添加<span>停止输出</span>
+                : `<p>${content}<span id="stop-btn">停止输出</span></p>`;
+        }
+        
+        const messageHtml = `
+          <div class="chat-message ${className}">
+            ${messageContent}
+            <img src="${avatarSrc}" alt="${isUserMessage ? '用户' : 'AI数字人'}">
+          </div>
+        `;
+        $chatContent.append(messageHtml);
+        $chatContent.scrollTop($chatContent[0].scrollHeight);
+        
+        $('#stop-btn').click(function() {
+          isBotTyping = false;
+          isBotReplying = false;
+          $(this).removeAttr('id').addClass('remove-btn').html('用户取消')
+        });
+      }
+    });
+</script>
+</html>
\ No newline at end of file
