纯html+css+js实现Kimi聊天机器人（含打字机效果）（极致的简单）

先放上效果演示吧

什么是Kimi？

Kimi由月之暗面开发，和ChatGPT、Claude、Gemini、文心一言、讯飞星火这样的产品类似，Kimi是一款面向普通用户（C端）的智能助手，旨在提供高效的信息查询和对话服务。它的访问网址是：，目前也提供了手机端，可以从各大应用商店下载“Kimi智能助手”

Kimi也为我们提供了方便的Api接口，通过使用Kimi的api接口可以实现自定义机器人的角色，这里我将机器人定义为了一名前端大师。

复制代码
var apiUrl = 'https://api.moonshot.cn/v1/chat/completions';
var requestData = {
    model: "moonshot-v1-8k",
    messages: [
      {
        role: "system", content: `
      你是一名前端大师，你能解决几乎所有关于前端的问题
      ` },
      { role: "user", content: message }
    ],
    temperature: 0.3
  };

  fetch(apiUrl, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'Authorization': 'your_key'
    },
    body: JSON.stringify(requestData)
  })
复制代码

整体布局上我嵌套了多层的div盒子，后续如果想在我的基础上进行二次开发，只需要在viewport中再插入一个column就可新增添一行内容

index.html:

复制代码
<body>
  <!--内容-->
  <div class="viewport" style="margin-top: 0">

    <div class="column">
      <div class="point panel" style="height: 750px;">
        <div class="inner">
          <h3 class="tit" style="position: absolute;left: 25px;">Kimi机器人</h3>
          <div id="chat-container" style="margin-top: 35px;"></div>

          <div id="input-container" style="margin-top: 25px;">
            <input type="text" id="user-input" placeholder="请输入消息...">
            <button id="send-button" style="position: relative; right: 5px;">发送</button>
          </div>

        </div>
      </div>
    </div>
  </div>
</body>
复制代码

index.css:

复制代码
/* 内容 */
.viewport {
    /* 限定大小 */
    min-width: 1024px;
    max-width: 1920px;
    min-height: 780px;
    margin: 0 auto;

    display: flex;
    padding: 1rem 0.833rem 0;
    padding-top: 0;
}

.column {
    flex: 3;
    position: relative;
}

.column:nth-child(2) {
    flex: 4;
    margin: 1.333rem 0.833rem 0;
}

.panel {
    /* 边框 */
    box-sizing: border-box;
    border: 2px solid;
    border-image: url(../images/border/10.png) 51 38 21 132;
    border-width: 2.125rem 1.583rem 0.875rem 5.5rem;
    /* border-width: 1.5rem 1rem 0.875rem 1rem; */
    position: relative;
    margin-bottom: 0.833rem;
}


.panel .inner {
    /* 装内容 */
    /* height: 60px; */
    position: absolute;
    top: -2.125rem;
    right: -1.583rem;
    bottom: -0.875rem;
    left: -5.5rem;
    padding: 1rem 1.5rem;
    /* background-color: rgba(243, 235, 241, 0.314); */
}

.panel h3 {
    font-size: 20px;
    /*font-weight: normal;*/
    color: #fff;
}
复制代码

chatBox.css:

复制代码
#chat-container {
  display: flex;
  flex-direction: column;
  /* 纵向排列 */
  align-items: flex-start;
  /* 左对齐 */
  width: 100%;
  height: 80%;
  /* 占据80%的高度 */
  overflow-y: auto;
  /* 如果内容超出容器高度，则显示滚动条 */
  padding: 10px;
  /* background-color: rgba(0, 0, 0, 0.1); */
  /* 浅色透明背景 */
  color: #000;
  -ms-overflow-style: none; 
}

#chat-container::-webkit-scrollbar {
  display: none; /* Chrome Safari */
}

.user-message .avatar {
  float: right;
}

.user-message {
  display: flex;
  /* 使用 flex 布局 */
  align-items: center;
  /* 垂直居中 */
  background-color: #fff;
  border-radius: 10px;
  padding: 10px;
  margin-bottom: 10px;
  margin-left: auto;
  /* 右对齐 */
  max-width: 80%;
  /* 最大宽度 */
  word-wrap: break-word;
  /* 超出宽度时自动换行 */
  text-align: right;
  /* 文字右对齐 */
}

.bot-message {
  background-color: #f5f5f5;
  border-radius: 10px;
  padding: 10px;
  margin-bottom: 10px;
  float: left;
  clear: both;
  max-width: 50%;
  /* 将最大宽度设置为屏幕宽度的50% */
  word-wrap: break-word;
  /* 允许文本在单词边界换行 */
  display: flex;
  /* 使用flex布局 */
  flex-direction: column;
  /* 将元素排列成列 */
  align-items: flex-start;
  /* 左对齐元素 */
}

#input-container {
  display: flex;
  align-items: center;
  padding: 10px;
  background-color: #f2f2f2;
}

#user-input {
  flex-grow: 1;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  margin-right: 10px;
}

#send-button {
  padding: 10px 20px;
  border: 1px solid #007bff;
  border-radius: 5px;
  background-color: #007bff;
  color: #fff;
  cursor: pointer;
}

#send-button:hover {
  background-color: #0056b3;
}

#send-button2 {
  padding: 10px 20px;
  border: 1px solid #007bff;
  border-radius: 5px;
  background-color: #007bff;
  color: #fff;
  cursor: pointer;
}

#send-button2:hover {
  background-color: #0056b3;
}

.avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  float: left;
  margin-right: 10px;
}

.username {
  font-weight: bold;
  margin-bottom: 5px;
}

.message-content {
  overflow-wrap: break-word;
}

.bot-message .message-content {
  padding-left: 55px;
}
复制代码

当进入页面的时候会有一个入场动画，Kimi机器人进行简单的自我介绍，使用onload实现

onload.js:

复制代码
document.addEventListener('DOMContentLoaded', function () {
  console.log('DOMContentLoaded事件触发，脚本开始执行');
  var chatContainer = document.getElementById("chat-container");

  var botMessageDiv = document.createElement("div");
  botMessageDiv.classList.add("bot-message");
  chatContainer.appendChild(botMessageDiv);

  botMessageDiv.innerHTML = `
      <div class="avatar-container">
        <img src="../static/images/avatar/R-C.jpg" class="avatar" alt="Kimi Avatar">
        <span class="username">Kimi</span>
      </div>
    `;
  var index = 0;
  kimiResponse = `我是一名前端大师，你可以询问我所有关于前端的问题，我都会一一耐心解答`
  var typingInterval = setInterval(function () {
    if (index < kimiResponse.length) {
      botMessageDiv.innerHTML += kimiResponse.charAt(index);
      index++;
    } else {
      clearInterval(typingInterval);
    }
  }, 50);

});
复制代码

每次进行对话，对话框均由js代码动态生成

KimiApi.js:

复制代码
document.getElementById("send-button").addEventListener("click", function () {
  var userInput = document.getElementById("user-input").value;
  if (userInput.trim() !== "") {
    sendMessage(userInput);
    document.getElementById("user-input").value = ''
  }
});

function sendMessage(message) {
  var chatContainer = document.getElementById("chat-container");
  var userMessageDiv = document.createElement("div");
  userMessageDiv.classList.add("user-message");
  userMessageDiv.innerHTML = `
    <div class="message-content">${message}</div>
    <div class="avatar-container">
      <span class="username">用户</span>
      <img src="../static/images/avatar/1.png" class="avatar"  alt="User Avatar">
    </div>
  `;
  chatContainer.appendChild(userMessageDiv);

  var botMessageDiv = document.createElement("div");
  botMessageDiv.classList.add("bot-message");
  chatContainer.appendChild(botMessageDiv);

  // 准备机器人的思考状态
  var dots = '';
  var dotInterval = setInterval(function () {
    if (dots.length < 6) {
      dots += '.';
    } else {
      dots = '.';
    }
    botMessageDiv.innerHTML = `
      <div class="avatar-container">
        <img src="../static/images/avatar/R-C.jpg" class="avatar" alt="Kimi Avatar">
        <span class="username">Kimi</span>
      </div>
      <div class="message-content" id="bot-mes">正在思考中${dots}</div>
    `;
  }, 500);

  // 发送消息到API
  var apiUrl = 'https://api.moonshot.cn/v1/chat/completions';
  var requestData = {
    model: "moonshot-v1-8k",
    messages: [
      {
        role: "system", content: `
      你是一名前端大师，你能解决几乎所有关于前端的问题
      ` },
      { role: "user", content: message }
    ],
    temperature: 0.3
  };

  fetch(apiUrl, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'Authorization': 'your_key'
    },
    body: JSON.stringify(requestData)
  })
    .then(response => response.json())
    .then(data => {
      clearInterval(dotInterval); // 停止生成省略号
      var kimiResponse = data.choices[0].message.content;
      var index = 0;
      botMessageDiv.innerHTML = `
      <div class="avatar-container">
        <img src="../static/images/avatar/R-C.jpg" class="avatar" alt="Kimi Avatar">
        <span class="username">Kimi</span>
      </div>
    `;
      var typingInterval = setInterval(function () {
        if (index < kimiResponse.length) {
          botMessageDiv.innerHTML += kimiResponse.charAt(index);
          index++;
        } else {
          clearInterval(typingInterval);
        }
      }, 50);
    })
    .catch(error => {
      console.error('发生错误:', error);
    });
}
复制代码

 

posted @   努力学习2333  阅读(1271)  评论(0)  编辑  收藏  举报
相关博文：
· Python可视化训练
· 2023/4/17 SCRUM个人博客
· 日常API之图灵聊天机器人
· 探索Kimi智能助手：如何用超长文本解锁高效信息处理新境界
· kimi AI web Api接口对接代码实现
阅读排行：
· 全网最简单！3分钟用满血DeepSeek R1开发一款AI智能客服，零代码轻松接入微信、公众号、小程
· .NET 10 首个预览版发布，跨平台开发与性能全面提升
· 《HelloGitHub》第 107 期
· 全程使用 AI 从 0 到 1 写了个小工具
· 从文本到图像：SSE 如何助力 AI 内容实时呈现？（Typescript篇）
点击右上角即可分享
微信分享提示