一百行代码实现搭建简易版 ChatGPT 聊天机器人，网页搭建

最近，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>

一百行代码实现搭建简易版 ChatGPT 聊天机器人，网页搭建

猜你喜欢