腳本之家服務(wù)器常用軟件

快捷導(dǎo)航

前端實(shí)現(xiàn)類似chatgpt的對(duì)話頁面(案例)

更新時(shí)間：2023年03月13日 12:16:46 作者：館主阿牛

這篇文章主要介紹了前端實(shí)現(xiàn)類似chatgpt的對(duì)話頁面(案例),需要的朋友可以參考下

前言

自從去年11月份chatgpt出圈之后，他的熱度就居高不減，也出現(xiàn)了很多人借助接口開發(fā)的國內(nèi)版本，那么本篇博客就從前端的角度來看看前端如何實(shí)現(xiàn)類似chatgpt的對(duì)話功能！

最終效果

在這里插入圖片描述

因?yàn)檫@是我寫在一個(gè)項(xiàng)目中的，單獨(dú)提出來可能配色效果不同，但功能和做法只要我們掌握了，那么自己想怎么寫就怎么寫！

頁面布局

這一塊比較簡(jiǎn)單，分析過chatgpt的頁面的就會(huì)知道，他的頁面布局方式是采用flex布局的，flex布局確實(shí)好用，那么我也是基于Bootsrap+jquery+flex布局完成了簡(jiǎn)易版的對(duì)話功能！主要有兩個(gè)地方用到了flex布局！

flex布局一

在這里插入圖片描述

這里的頭像和文字采用的就是flex布局，并且文字和圖片頂部對(duì)齊，防止文字較多依舊和圖片中間對(duì)齊的bug。
需要設(shè)置css:

display: flex;
align-items: flex-start;

其中align-items: flex-start;的作用就是讓文字與圖片頂部對(duì)齊！

flex布局二（重點(diǎn)）

第二處用到flex布局的地方就是這個(gè)搜索框：

在這里插入圖片描述

很多人覺得這個(gè)對(duì)話框很簡(jiǎn)單，flex布局實(shí)現(xiàn)輸入框和按鈕在同一行確實(shí)簡(jiǎn)單，但你要好好看看chatgpt的官網(wǎng)，都是有小細(xì)節(jié)的，這里面還是有很多知識(shí)點(diǎn)的。

首先，我要說的是這個(gè)輸入框用的textarea，而不是input，區(qū)別在于，input輸入的內(nèi)容是不能換行的，但textarea文本框可以，但使用textarea的問題是，參數(shù)rows設(shè)置為一行，這個(gè)文本框的高度會(huì)很低，達(dá)不到chatgpt的那個(gè)頁面要求，rows設(shè)置大一點(diǎn)或者這個(gè)文本框的高度給高一點(diǎn)會(huì)有一個(gè)問題就是輸入時(shí)他的光標(biāo)不會(huì)在文本框的高度中間，而是在第一行，我們是沒法通過其他方式讓輸入光標(biāo)垂直居中的，因此這也不符合chatgpt頁面的要求，所以這確實(shí)是個(gè)值的學(xué)習(xí)的一點(diǎn)！看了chatgpt頁面的做法后，我悟了，下面一張圖來說明chatgpt是如何做的：

在這里插入圖片描述

如圖，你只要將textarea邊框取消掉，然后focus偽類將邊框效果也取消掉，外邊再套一個(gè)div邊框?qū)extarea文本框和按鈕套在里面就好了！

.ipt{
   display:flex;
   align-items: center;
   position: absolute;
   bottom: 60px;
   margin: 0 15px;
   padding-right: 15px;
   border-radius: 15px;
   width: calc(100% - 30px);
   height: 50px;
   border: 1px solid #e7eaec;
}
.ipt textarea {
   resize: none;
   overflow-y: auto;
   border: none;
   box-shadow: none;
}
.ipt textarea:focus{
   border: none !important;
   box-shadow: none !important;
}

最后，將這個(gè)輸入框定位到頁面底部就好！

js部分

首先，頁面部分，我們添加消息到頁面，包括用戶的問題以及ai的回復(fù)，添加消息到頁面時(shí)需要向上滾動(dòng)：

// 添加用戶消息到窗口
function addUserMessage(message) {
  var messageElement = $('<div class="row message-bubble"><img class="chat-icon" src="' + userIcon + '"><p class="message-text">' + message + '</p></div>');
  chatWindow.append(messageElement);
  chatInput.val('');
  chatWindow.animate({ scrollTop: chatWindow.prop('scrollHeight') }, 500);
}

// 添加回復(fù)消息到窗口
function addBotMessage(message) {
  var messageElement = $('<div class="row message-bubble"><img class="chat-icon" src="' + botIcon + '"><p class="message-text">' + message + '</p></div>');
  chatWindow.append(messageElement);
  chatInput.val('');
  chatWindow.animate({ scrollTop: chatWindow.prop('scrollHeight') }, 500);
}

這里消息添加帶頁面后，清空了輸入框的內(nèi)容，接下來還需要給輸入框添加加一個(gè)鍵盤事件，也就是點(diǎn)擊enter鍵也可以發(fā)送消息！

// 處理 Enter 鍵按下
chatInput.keypress(function(e) {
  if (e.which == 13) {
    chatBtn.click();
  }
});

最后就是發(fā)送消息與獲得消息的一部分了：

// 處理用戶輸入
chatBtn.click(function() {
  var message = chatInput.val();
  if (message.length == 0){
    common_ops.alert("請(qǐng)輸入內(nèi)容！")  // 彈窗  
    return  
  }
  addUserMessage(message);
  
  chatBtn.attr('disabled',true) // 消息發(fā)送后讓提交按鈕不可點(diǎn)擊

  // 發(fā)送信息到后臺(tái)
  $.ajax({
    url: '/chat',
    method: 'POST',
    data: {
      "prompt": JSON.stringify(message)
    },
    success: function(res) {
      res = JSON.parse(res);
      addBotMessage(res.content);
      chatBtn.attr('disabled',false)  // 成功接受消息后讓提交按鈕再次可以點(diǎn)擊
    },
    error: function(jqXHR, textStatus, errorThrown) {
      addBotMessage('<span style="color:red;">' + '出錯(cuò)啦！請(qǐng)稍后再試!' + '</span>');
      chatBtn.attr('disabled',false) 
    }
  });
});

這些邏輯都很簡(jiǎn)單，我不再總結(jié)，需要注意的是，我在發(fā)送消息到后臺(tái)等待相應(yīng)的過程讓按鈕的狀態(tài)是不可點(diǎn)擊的，直到后臺(tái)返回消息才可以進(jìn)行下一次問答！但這里我沒有處理鍵盤事件，也就是說你可以點(diǎn)擊enter繼續(xù)向后臺(tái)發(fā)送消息，這也是一個(gè)bug，只不過我沒有處理，你們不需要的可以去掉這個(gè)鍵盤事件就好了，當(dāng)然也可以在發(fā)送消息到獲得回答的這個(gè)時(shí)間段像禁用發(fā)送按鈕一樣，禁止enter鍵盤事件或者解綁這個(gè)鍵盤事件，這個(gè)你們自己去完成，這里我不在多說（總要留點(diǎn)東西讓你們自己去思考去感悟?。?/p>

完整代碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="../../static/css/bootstrap.min.css" rel="external nofollow"  rel="stylesheet">
    <title>chat</title>
    <style>
        .answer{
          width: 100%;
          position: relative;
          height: 70vh;
        }
    
        .ipt{
          display:flex;
          align-items: center;
          position: absolute;
          bottom: 60px;
          margin: 0 15px;
          padding-right: 15px;
          border-radius: 15px;
          width: calc(100% - 30px);
          height: 50px;
          border: 1px solid #e7eaec;
        }
        .ipt textarea {
          resize: none;
          overflow-y: auto;
          border: none;
          box-shadow: none;
        }
        .ipt textarea:focus{
            border: none !important;
            box-shadow: none !important;
        }

        #chatWindow {
          max-height: calc(70vh - 120px);
          height:auto;
          overflow-y: auto;
        }
    
        .message-bubble {
            padding: 10px;
            margin: 5px;
            display: flex;
            align-items: flex-start;
            border-bottom: 1px dashed #e7eaec;
        }
    
    
        .message-bubble p {
            font-size: 18px;
            margin-left:15px;
        }
    
        .chat-icon {
            width: 30px;
            height: 30px;
            border-radius: 3px;
        }
    </style>
</head>
<body>
    <div>
      <div class="row">
          <div class="col-xs-12">
            <div>
              <h1 class="text-center m-b-lg">Chat with ChatGPT</h1>
            </div>
            <div class="answer">
              <div id="chatWindow" class="mb-3"></div>
              <div class="input-group ipt">
                <div class="col-xs-12">
                  <textarea id="chatInput" class="form-control" rows="1"></textarea>
                </div>
                <button id="chatBtn" class="btn btn-primary" type="button">Go !</button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div> 
</body>
<script src="../../static/plugins/jquery-2.1.1.js"></script>
<script src="../../static/js/bootstrap.min.js"></script>
<script src="../../static/plugins/layer/layer.js"></script>
<script src="../../static/js/common.js"></script>
<script>
    $(document).ready(function() {
        var chatBtn = $('#chatBtn');
        var chatInput = $('#chatInput');
        var chatWindow = $('#chatWindow');
        var userIcon = '/static/images/user/{{ current_user.avatar }}'
        var botIcon = '/static/images/aichat/chatgpt.png';
        

        // 添加用戶消息到窗口
        function addUserMessage(message) {
          var messageElement = $('<div class="row message-bubble"><img class="chat-icon" src="' + userIcon + '"><p class="message-text">' + message + '</p></div>');
          chatWindow.append(messageElement);
          chatInput.val('');
          chatWindow.animate({ scrollTop: chatWindow.prop('scrollHeight') }, 500);
        }

        // 添加回復(fù)消息到窗口
        function addBotMessage(message) {
          var messageElement = $('<div class="row message-bubble"><img class="chat-icon" src="' + botIcon + '"><p class="message-text">' + message + '</p></div>');
          chatWindow.append(messageElement);
          chatInput.val('');
          chatWindow.animate({ scrollTop: chatWindow.prop('scrollHeight') }, 500);
        }

        // 處理用戶輸入
        chatBtn.click(function() {
          var message = chatInput.val();
          if (message.length == 0){
            common_ops.alert("請(qǐng)輸入內(nèi)容！")    
            return  
          }
          addUserMessage(message);

          // messages.push({"role": "user", "content": message})
          
          chatBtn.attr('disabled',true) // 消息發(fā)送后讓提交按鈕不可點(diǎn)擊

          // 發(fā)送信息到后臺(tái)
          $.ajax({
            url: '/chat',
            method: 'POST',
            data: {
              "prompt": JSON.stringify(message)
            },
            success: function(res) {
              res = JSON.parse(res);
              addBotMessage(res.content);
              chatBtn.attr('disabled',false)  // 成功接受消息后讓提交按鈕再次可以點(diǎn)擊
            },
            error: function(jqXHR, textStatus, errorThrown) {
              addBotMessage('<span style="color:red;">' + '出錯(cuò)啦！請(qǐng)稍后再試!' + '</span>');
              chatBtn.attr('disabled',false) 
            }
          });
        });

        // 處理 Enter 鍵按下
        chatInput.keypress(function(e) {
          if (e.which == 13) {
            chatBtn.click();
          }
        });
  });
</script>
</html>

這里面用到的layer.js就是一個(gè)彈窗組件，百度可以搜到，common.js是我自己對(duì)layer.js方法的封裝，這個(gè)頁面其實(shí)你不這兩個(gè)js文件也行，因?yàn)檎麄€(gè)頁面只有下面的代碼用到了彈窗：

if (message.length == 0){
 	common_ops.alert("請(qǐng)輸入內(nèi)容！")    
  	return  
}

其實(shí)簡(jiǎn)陋點(diǎn)，一個(gè)alert就搞定了！

結(jié)語

如果你覺得博主寫的還不錯(cuò)的話，可以訂閱下面的這個(gè)flask專欄，這是博主唯一的付費(fèi)專欄，我做的這個(gè)頁面也是最近項(xiàng)目的一部分，這個(gè)項(xiàng)目也是用flask做的，我會(huì)將他全部總結(jié)開源到這個(gè)flask專欄中。

到此這篇關(guān)于前端實(shí)現(xiàn)類似chatgpt的對(duì)話頁面(案例)的文章就介紹到這了,更多相關(guān)chatgpt對(duì)話功能內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

在ChatGPT的API中支持多輪對(duì)話的實(shí)現(xiàn)方法

欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

前端實(shí)現(xiàn)類似chatgpt的對(duì)話頁面(案例)

目錄

前言

最終效果

頁面布局

flex布局一

flex布局二（重點(diǎn)）

js部分

完整代碼

結(jié)語

相關(guān)文章

最新評(píng)論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線小工具