一百行代码实现简易版 ChatGPT | 社区征文

Posted 2023-03-14

最近，OpenAI的一款聊天机器人模型ChatGPT爆火，ChatGPT（全名：Chat Generative Pre-trained Transformer），于2022年11月30日发布。ChatGPT是人工智能技术驱动的自然语言处理工具，它能够通过理解和学习人类的语言来进行对话，还能根据聊天的上下文进行互动，真正像人类一样来聊天交流，甚至能完成撰写邮件、视频脚本、文案、翻译、代码，写论文等任务。本篇文章用一百行代码给大家制作一款简易的聊天机器人，话不多说，上图上代码。

在线体验地址：​​https://haiyong.site/moyu/chatgpt/​​

代码下载：​​https://code.haiyong.site/1431/​​

html完整代码

<div class="container">
      <div class="chat-header">
        <div class="logo"><img src="https://code.haiyong.site/wp-content/uploads/2022/10/logo.jpg"  /></div>
        <div class="title">简易版Chat GPT</div>
      </div>
      <div class="chat-body"></div>
      <div class="chat-input">
        <div class="input-sec"><input type="text" id="txtInput" placeholder="在这里写" autofocus /></div>
        <div class="send"><img src="https://haiyong.site/img/svg/send.svg"  /></div>
      </div>
    </div>

CSS代码

主要代码

@import url("https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500;600&family=Poppins:wght@200;300&display=swap");
* 
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;

body 
  background: #4b5c66;

.container 
  --light-color: #fff;
  height: 580px;
  background: var(--light-color);
  bottom: 50px;
  right: 10px;
  box-shadow: 0px 0px 15px 0px black;

调整对话框在大于440px的屏幕中的CSS样式

@media screen and (min-width:440px) 
  .container 
    position: fixed;
  

为聊天框的头部添加CSS样式，这里放上我们 ChatGPT 聊天机器人的 logo 和标题，为其调整样式：高度设为60px，背景颜色蓝色，字体为白色，大小为1.5rem。

.chat-header 
  height: 60px;
  display: flex;
  align-items: center;
  padding: 0px 30px;
  background-color: #0652c0;
  color: var(--light-color);
  font-size: 1.5rem;


.chat-header .logo 
  height: 35px;
  width: 35px;
  box-shadow: 0px 0px 10px 0px black;

.chat-header img 
  height: 100%;
  width: 100%;

.chat-header .title 
  padding-left: 10px;

聊天框主体部分（显示对话内容）

.chat-body 
  height: 465px;
  display: flex;
  flex-direction: column;
  padding: 8px 10px;
  align-items: flex-end;
  overflow-y: auto;

聊天框输入部分（用户输入文字的地方），文本输入框我们设置高度为30px。

.chat-input 
  height: 60px;
  display: flex;
  align-items: center;
  border-top: 1px solid #ccc;

.input-sec 
  flex: 9;

.send 
  flex: 1;
  padding-right: 4px;

#txtInput 
  line-height: 30px;
  padding: 8px 10px;
  border: none;
  outline: none;
  caret-color: black;
  font-size: 1rem;
  width: 100%;

JS

需要实现的对话内容：

你好: "你好，我是最强人工智能ChatGPT，我能回答你所有问题，快来和我聊天吧！",

五块钱怎么花三天: "坐公交回去找妈妈",

你是小黑子吗: "不，我不是小黑子。我是OpenAI的聊天机器人模型ChatGPT",

你为什么和我聊天: "只因你太美",

嘿: "嘿！ 这是怎么回事",

有需要修改或者添加删除的可以自行发挥，代码如下：

const responseObj = 
  你好: "你好，我是最强人工智能ChatGPT，我能回答你所有问题，快来和我聊天吧！",
  五块钱怎么花三天: "坐公交回去找妈妈",        
  你是小黑子吗: "不，我不是小黑子。我是OpenAI的聊天机器人模型ChatGPT",
  你为什么和我聊天: "只因你太美",
  嘿: "嘿！ 这是怎么回事",
  今天几号: new Date().toDateString(),
  几点了: new Date().toLocaleTimeString(),
;

若用户输入内容不存在，则输出一下 "听不太懂呢试试输点别的"，代码如下：

const getChatbotResponse = (userInput) => 
  return responseObj[userInput] == undefined ?
    "听不太懂呢试试输点别的" :
    responseObj[userInput];
;

完整JS代码：

const responseObj = 
  你好: "你好，我是最强人工智能ChatGPT，我能回答你所有问题，快来和我聊天吧！",
  五块钱怎么花三天: "坐公交回去找妈妈",       
  你是小黑子吗: "不，我不是小黑子。我是OpenAI的聊天机器人模型ChatGPT",
  你为什么和我聊天: "只因你太美",
  嘿: "嘿！ 这是怎么回事",
  今天几号: new Date().toDateString(),
  几点了: new Date().toLocaleTimeString(),
;
const chatBody = document.querySelector(".chat-body");
const txtInput = document.querySelector("#txtInput");
const send = document.querySelector(".send");
send.addEventListener("click", () => renderUserMessage());
txtInput.addEventListener("keyup", (event) => 
  if (event.keyCode === 13) 
    renderUserMessage();
  
);
const renderUserMessage = () => 
  const userInput = txtInput.value;
  renderMessageEle(userInput, "user");
  txtInput.value = "";
  setTimeout(() => 
    renderChatbotResponse(userInput);
    setScrollPosition();
  , 600);
;
const renderChatbotResponse = (userInput) => 
  const res = getChatbotResponse(userInput);
  renderMessageEle(res);
;
const renderMessageEle = (txt, type) => 
  let className = "user-message";
  if (type !== "user") 
    className = "chatbot-message";
  
  const messageEle = document.createElement("div");
  const txtNode = document.createTextNode(txt);
  messageEle.classList.add(className);
  messageEle.append(txtNode);
  chatBody.append(messageEle);
;
const getChatbotResponse = (userInput) => 
  return responseObj[userInput] == undefined ?
    "听不太懂呢试试输点别的" :
    responseObj[userInput];
;
const setScrollPosition = () => 
  if (chatBody.scrollHeight > 0) 
    chatBody.scrollTop = chatBody.scrollHeight;
  
;

到这里我们的简易版 ​​ChatGPT 聊天机器人​​ 就完成了，感兴趣的可以来试试，改进或者做一个更加完善且智能的聊天机器人。短期内，凭借市场力量即刻推出国产中文版ChatGPT仍存在不小挑战。单就语种而言，中文语料训练难度大，在数据质量上，中文网页质量比英文网页质量差很多，在训练要求上，由于中国文化多样性和悠久性，语言训练难度较英文高，即使在目前在ChatGPT的语料库里中文也仅占5％，ChatGPT在中文环境的交流效果远弱于英文环境。

有什么好的建议也可以在下方告知，期待大家的点赞与评论。