最近，OpenAI 的一款聊天机器人模型 ChatGPT 爆火。本篇文章旨在为大家提供一款简易的聊天机器人，只需一百行代码即可制作。话不多说，先上效果：
一百行代码实现简易版chatgpt聊天机器人
CSS代码：
.container-fluid {padding-right: 15px;padding-left: 15px;margin-right: auto;margin-left: auto
}.row {margin-right: -15px;margin-left: -15px
}.navbar-brand:hover,
.navbar-brand:focus {text-decoration: none;
}.navbar-toggler:hover {text-decoration: none
}.mt-5, .my-5 {margin-top: 3rem !important
}.mr-5, .mx-5 {margin-right: 3rem !important
}.form-group {margin-bottom: 15px
}.checkbox, .radio {position: relative;display: block;margin-top: 10px;margin-bottom: 10px
}.btn-primary:active:focus
.form-control {display: block;width: 100%;height: 34px;padding: 6px 12px;font-size: 14px;line-height: 1.42857143;color: #555;background-color: #fff;background-image: none;border: 1px solid #ccc;border-radius: 4px;-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);-webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;-o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s
}HTML完整代码：
<div class="container"><div class="chat-header"><div class="logo"><img src="https://code.haiyong.site/wp-content/uploads/2022/10/logo.jpg" alt="cwt" /></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" alt="send" /></div></div></div><!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>ChatGPT</title>
</head><body><div class="container-fluid"><a class="navbar-brand" href="">首页</a><button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation"></button><a class="navbar-brand" href="chat4">Chatgbt4</a><button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation"></button></div><div class="container mt-5">{{ans|safe}}<form method="post"><div class="form-group"><label for="question">问题：</label><input type="text" class="form-control" id="question" name="question"></div><button type="submit" class="btn btn-primary">提交</button><br><br><button type="submit" class="btn btn-primary">清除聊天记录</button></form><br><p></p></div></body></html>
