如何實現一個前端對話

201812發表於2024-05-03
前端

初始：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>模擬gpt前端</title>
    <style>
        /* 樣式可以根據需要進行修改 */
        #chat-box {
            width: 300px;
            height: 200px;
            border: 1px solid #ccc;
            overflow-y: scroll;
            margin-bottom: 10px;
        }

        #question-input {
            width: 300px;
            height: 30px;
        }

        #send-button {
            margin-left: 10px;
        }
    </style>
</head>
<body>
<h1>帶有聊天框的多次一問一答</h1>
<div id="chat-box"></div>
<input type="text" id="question-input" placeholder="請輸入問題">
<button id="send-button" onclick="submitQuestion()">傳送</button>
<button onclick="continueQuestion()">繼續提問</button>

<script>
    function submitQuestion() {
        var question = document.getElementById("question-input").value;
        // 在這裡呼叫後端API或者查詢答案庫，獲取答案
        var answer = getAnswerFromBackend(question);
        // 將問題和答案新增到聊天框中
        var chatBox = document.getElementById("chat-box");
        chatBox.innerHTML += "<p><strong>我：</strong>" + question + "</p>";
        chatBox.innerHTML += "<p><strong>助手：</strong>" + answer + "</p>";
        // 滾動到聊天框底部
        chatBox.scrollTop = chatBox.scrollHeight;
        document.getElementById("question-input").value = ""; // 清空輸入框
    }

    function continueQuestion() {
        document.getElementById("question-input").value = ""; // 清空輸入框
    }

    function getAnswerFromBackend(question) {
        // 模擬從後端獲取答案的過程
        var answers = {
            "什麼是計算機？": "計算機是一種能夠執行指令並進行計算的機器。",
            "什麼是程式設計？": "程式設計是指使用特定的程式語言編寫計算機程式的過程。"
        };
        return answers[question] || "對不起，我無法回答這個問題。";
    }
</script>
</body>
</html>

效果如下：

然後我希望能夠實現多次聊天，接入自己後端的資料，並且呼叫markdown模式，可以這樣子修改程式碼：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Chatbot</title>
  <style>
    /* 樣式可以根據需要進行修改 */
    .chat-container {
      width: 400px;
      height: 500px;
      border: 1px solid #ccc;
      padding: 10px;
      overflow-y: scroll;
    }

    .message {
      margin-bottom: 10px;
    }

    .user-message {
      text-align: right;
    }

    .gpt-message {
      text-align: left;
    }

    .avatar {
      width: 30px;
      height: 30px;
      border-radius: 50%;
      margin-right: 10px;
    }

    .input-container {
      display: flex;
      margin-top: 10px;
    }

    .input-field {
      flex: 1;
      padding: 5px;
    }

    .send-button {
      padding: 5px 10px;
    }
  </style>
<!--  <script src="/js/marked.min.js"></script>-->
</head>
<body>
<div class="chat-container" id="chatContainer">
  <!-- 聊天記錄將在這裡顯示 -->
</div>
<!--<div id="response"></div>-->
<div class="input-container">
  <img src="/images/ziyuan/user1.png" alt="Avatar" class="avatar">
  <input type="text" id="inputField" class="input-field" placeholder="請輸入問題">
  <button id="sendButton" class="send-button">傳送</button>
</div>

<script>
  // 獲取DOM元素
  const chatContainer = document.getElementById('chatContainer');
  const inputField = document.getElementById('inputField');
  const sendButton = document.getElementById('sendButton');

  // 新增事件監聽器
  sendButton.addEventListener('click', function() {
    const userMessage = inputField.value;
    const gptMessage = getAnswerFromBackend(userMessage); // 呼叫後端API獲取答案


    // 建立訊息元素並新增到聊天容器中
    const userMsgElement = createMessageElement('user', userMessage);
    const gptMsgElement = createMessageElement('gpt', gptMessage);
    console.log("--gptMsgElement--: ",gptMsgElement)
    chatContainer.appendChild(userMsgElement);
    chatContainer.appendChild(gptMsgElement);

    // 清空輸入框並滾動到底部
    inputField.value = '';
    chatContainer.scrollTop = chatContainer.scrollHeight;
  });

  // 建立訊息元素的函式
  function createMessageElement(type, message) {
    const messageElement = document.createElement('div');
    messageElement.classList.add('message', type + '-message');

    // console.log("111:",message);
    const avatarElement = document.createElement('img');
    if(type === 'user'){
      avatarElement.src = '/images/ziyuan/user1.png';
    }
    else {
      avatarElement.src = '/images/ziyuan/gpt.png';
    }

    avatarElement.alt = 'Avatar';
    avatarElement.classList.add('avatar');

    const textElement = document.createElement('span');
    // textElement.textContent = message;
    textElement.innerHTML = marked(message);
    // console.log("marked 222: ",textElement.textContent)
    //設定markdown風格，，沒成功。。
    // textElement.style.fontFamily = 'Arial, sans-serif';
    // textElement.style.fontSize = '16px';
    // textElement.style.lineHeight = '1.5';

    messageElement.appendChild(avatarElement);
    messageElement.appendChild(textElement);

    return messageElement;
  }

  // 模擬從後端獲取答案的過程（實際應呼叫後端API）
  function getAnswerFromBackend(question) {
    // 這裡可以替換為實際的後端API呼叫邏輯
    // var inputdata = $('#inputField').val(); // 獲取輸入框的值
    var str = '出錯了，待會再試試吧...';
    $.ajax({
      // url: '/getres', // 後端介面地址
      url: '/sendQuestion', // 後端介面地址
      type: 'get', // 請求方法為POST
      async: false,
      data: { inputField: question }, // 要傳送的資料
      success: function(res) {
        console.log("返回狀態:"+res.state);
        console.log("返回資料:"+res.data);
        // $('#response').html('後端返回的資料：' + res.data);
        // return res.data;
        str=res.data;
      },
      error: function(error) {
        console.log(error.state);
      }
    });
    return str;
  }
</script>
<script src="/js/jquery-3.1.1.js"></script>
<script src="https://cdn.bootcss.com/marked/0.8.1/marked.min.js"></script>
</body>
</html>

接著，更改一下前端頁面的風格，美化一下，感覺暫時來說達到我要想要實現的東西，當然還是需要最佳化一下對話方塊之類的。。

相關文章