前端實現(xiàn)類似chatgpt的對話頁面(案例)
前言
自從去年11月份chatgpt出圈之后，他的熱度就居高不減，也出現(xiàn)了很多人借助接口開發(fā)的國內(nèi)版本，那么本篇博客就從前端的角度來看看前端如何實現(xiàn)類似chatgpt的對話功能！
最終效果
因為這是我寫在一個項目中的，單獨提出來可能配色效果不同，但功能和做法只要我們掌握了，那么自己想怎么寫就怎么寫！
頁面布局
這一塊比較簡單，分析過chatgpt的頁面的就會知道，他的頁面布局方式是采用flex布局的，flex布局確實好用，那么我也是基于Bootsrap+jquery+flex布局完成了簡易版的對話功能！主要有兩個地方用到了flex布局！
flex布局一
這里的頭像和文字采用的就是flex布局，并且文字和圖片頂部對齊，防止文字較多依舊和圖片中間對齊的bug。
需要設(shè)置css:
display: flex; align-items: flex-start;
其中align-items: flex-start;的作用就是讓文字與圖片頂部對齊！
flex布局二（重點）
第二處用到flex布局的地方就是這個搜索框：
很多人覺得這個對話框很簡單，flex布局實現(xiàn)輸入框和按鈕在同一行確實簡單，但你要好好看看chatgpt的官網(wǎng)，都是有小細節(jié)的，這里面還是有很多知識點的。
首先，我要說的是這個輸入框用的textarea，而不是input，區(qū)別在于，input輸入的內(nèi)容是不能換行的，但textarea文本框可以，但使用textarea的問題是，參數(shù)rows設(shè)置為一行，這個文本框的高度會很低，達不到chatgpt的那個頁面要求，rows設(shè)置大一點或者這個文本框的高度給高一點會有一個問題就是輸入時他的光標(biāo)不會在文本框的高度中間，而是在第一行，我們是沒法通過其他方式讓輸入光標(biāo)垂直居中的，因此這也不符合chatgpt頁面的要求，所以這確實是個值的學(xué)習(xí)的一點！看了chatgpt頁面的做法后，我悟了，下面一張圖來說明chatgpt是如何做的：
如圖，你只要將textarea邊框取消掉，然后focus偽類將邊框效果也取消掉，外邊再套一個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;
}最后，將這個輸入框定位到頁面底部就好！
js部分
首先，頁面部分，我們添加消息到頁面，包括用戶的問題以及ai的回復(fù)，添加消息到頁面時需要向上滾動：
// 添加用戶消息到窗口
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)容，接下來還需要給輸入框添加加一個鍵盤事件，也就是點擊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("請輸入內(nèi)容！") // 彈窗
return
}
addUserMessage(message);
chatBtn.attr('disabled',true) // 消息發(fā)送后讓提交按鈕不可點擊
// 發(fā)送信息到后臺
$.ajax({
url: '/chat',
method: 'POST',
data: {
"prompt": JSON.stringify(message)
},
success: function(res) {
res = JSON.parse(res);
addBotMessage(res.content);
chatBtn.attr('disabled',false) // 成功接受消息后讓提交按鈕再次可以點擊
},
error: function(jqXHR, textStatus, errorThrown) {
addBotMessage('<span style="color:red;">' + '出錯啦！請稍后再試!' + '</span>');
chatBtn.attr('disabled',false)
}
});
});這些邏輯都很簡單，我不再總結(jié)，需要注意的是，我在發(fā)送消息到后臺等待相應(yīng)的過程讓按鈕的狀態(tài)是不可點擊的，直到后臺返回消息才可以進行下一次問答！但這里我沒有處理鍵盤事件，也就是說你可以點擊enter繼續(xù)向后臺發(fā)送消息，這也是一個bug，只不過我沒有處理，你們不需要的可以去掉這個鍵盤事件就好了，當(dāng)然也可以在發(fā)送消息到獲得回答的這個時間段像禁用發(fā)送按鈕一樣，禁止enter鍵盤事件或者解綁這個鍵盤事件，這個你們自己去完成，這里我不在多說（總要留點東西讓你們自己去思考去感悟?。?/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("請輸入內(nèi)容！")
return
}
addUserMessage(message);
// messages.push({"role": "user", "content": message})
chatBtn.attr('disabled',true) // 消息發(fā)送后讓提交按鈕不可點擊
// 發(fā)送信息到后臺
$.ajax({
url: '/chat',
method: 'POST',
data: {
"prompt": JSON.stringify(message)
},
success: function(res) {
res = JSON.parse(res);
addBotMessage(res.content);
chatBtn.attr('disabled',false) // 成功接受消息后讓提交按鈕再次可以點擊
},
error: function(jqXHR, textStatus, errorThrown) {
addBotMessage('<span style="color:red;">' + '出錯啦！請稍后再試!' + '</span>');
chatBtn.attr('disabled',false)
}
});
});
// 處理 Enter 鍵按下
chatInput.keypress(function(e) {
if (e.which == 13) {
chatBtn.click();
}
});
});
</script>
</html>
這里面用到的layer.js就是一個彈窗組件，百度可以搜到，common.js是我自己對layer.js方法的封裝，這個頁面其實你不這兩個js文件也行，因為整個頁面只有下面的代碼用到了彈窗：
if (message.length == 0){
common_ops.alert("請輸入內(nèi)容！")
return
}其實簡陋點，一個alert就搞定了！
結(jié)語
如果你覺得博主寫的還不錯的話，可以訂閱下面的這個flask專欄，這是博主唯一的付費專欄，我做的這個頁面也是最近項目的一部分，這個項目也是用flask做的，我會將他全部總結(jié)開源到這個flask專欄中。
到此這篇關(guān)于前端實現(xiàn)類似chatgpt的對話頁面(案例)的文章就介紹到這了,更多相關(guān)chatgpt對話功能內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了理解JavaScript中的window對象,本文通過實例代碼詳細介紹Window對象的一些重要用途，需要的朋友可以參考下2022-07-07
很長時間沒看正則表達式了，碰巧今天用到，溫故知新了一把,這里記錄下來，分享給大家，都是些基礎(chǔ)的知識，重點給大家講解的是正則表達式中4種常用的方法,50% 的舉一反三練習(xí)中的原創(chuàng)。2015-04-04
Bootstrap中datetimepicker使用小結(jié)
這篇文章主要為大家詳細介紹了Bootstrap中datetimepicker的使用方法，一款功能強大的日期選擇控件，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-12-12
JavaScript實現(xiàn)復(fù)制或剪切內(nèi)容到剪貼板功能的方法
這篇文章主要介紹了JavaScript實現(xiàn)復(fù)制或剪切內(nèi)容到剪貼板功能的方法,我們平時看到的網(wǎng)頁上很多一鍵復(fù)制功能就是如此實現(xiàn),需要的朋友可以參考下2016-05-05
這篇文章主要介紹了純js實現(xiàn)web端錄音與播放功能,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2019-04-04
JavaScript函數(shù)式編程(Functional Programming)箭頭函數(shù)(Arrow functions)
這篇文章主要介紹了JavaScript函數(shù)式編程(Functional Programming)箭頭函數(shù)(Arrow functions)用法,結(jié)合實例形式分析了javascript函數(shù)式編程中箭頭函數(shù)相關(guān)概念、原理、用法及操作注意事項,需要的朋友可以參考下2019-05-05
這篇文章主要介紹了JS實現(xiàn)隨機亂撞彩色圓球特效的方法,可實現(xiàn)彩色小球的碰撞效果,涉及隨機函數(shù)與頁面樣式的操作技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-05-05
javascript其實是非常需要單元測試的，但是qmock總感覺不好使？或是文檔的新舊有問題，反正我暫時是只需要函數(shù)調(diào)用的次數(shù)判斷，結(jié)果就寫了個kmock2011-02-02
JS動態(tài)修改iframe內(nèi)嵌網(wǎng)頁地址的方法
這篇文章主要介紹了JS動態(tài)修改iframe內(nèi)嵌網(wǎng)頁地址的方法,涉及javascript動態(tài)修改iframe中src屬性的技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-04-04
這篇文章主要為大家詳細介紹了js html5 css俄羅斯方塊游戲?qū)崿F(xiàn)代碼，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-10-10