昨天的程式碼應該可以正常使用，那我今天來說說昨天的程式碼都做了些甚麼吧

首先先來看到js的部分

1. $(document).ready(function() { ... });：這是一個jQuery的事件處理器，它告訴瀏覽器當文檔（網頁）完全載入後，執行其中的程式碼。這確保了在DOM元素都可用之後再執行JavaScript程式碼。

2. const msgContainer = $('.msg-container');：這行程式碼用於選擇具有類名為.msg-container的元素，並將其儲存在名為msgContainer的常數中，以便稍後使用。

3. $('.chat-form').on('submit', event => { ... });：這行程式碼選擇了具有類名.chat-form的表單元素，然後綁定了一個事件處理器，當表單提交時執行。在這個事件處理器中，它阻止了表單的默認提交行為（使用event.preventDefault()），然後執行以下操作。

4. const message = $('.chat-box').val();：它選擇了具有類名.chat-box的輸入元素，然後讀取其值，並將其存儲在名為message的變數中。

5. $('.chat-box').val('');：這一行清空了具有類名.chat-box的輸入框，以便用戶可以輸入新的消息。

6. $('.msg-container').append(...);：這行程式碼用於將用戶輸入的消息添加到具有類名.msg-container的元素中。它使用jQuery的.append()方法，將包含用戶消息的HTML程式碼添加到聊天容器中。

7. $.ajax({ ... });：這是一個使用jQuery的Ajax請求，它用於向後端發送消息並接收回應。

• 它包含了以下設置：
  • method: 'POST'：指定HTTP請求的方法為POST。
  • url: '/send_msg'：指定發送請求的URL為/send_msg。
    • /send_msg這部分代碼是後端的Python/Flask代碼，它實現了以下功能：
      • 定義了一個Flask路由，當接收到/send_msg的POST請求時，將調用send_msg函數處理。
      • send_msg函數獲取用戶提交的消息，然後調用chat函數來處理這個消息。
      • chat函數使用OpenAI的GPT-3模型生成機器人的回應。它使用了一些參數來配置模型的行為，例如temperature用於控制生成的文本的多樣性，max_tokens用於限制生成文本的最大長度，timeout則是超時時間。
      • 最後，chat函數返回機器人生成的回應。
  • data: { message: message }：將用戶輸入的消息作為數據發送到後端。
  • success: function(response) { ... }：當請求成功時執行的回調函數。它接收後端的回應，然後將機器人的回應添加到聊天容器中，同時調用scrollToBottom()函數實現滾動到底部的效果。
  • function scrollToBottom() { ... }：這是一個自定義的JavaScript函數，用於將聊天容器滾動到底部的位置。它通過設置msgContainer的scrollTop屬性來實現這一效果，以確保最新的消息可見。

替代方案

之前有看到別人的使用的huggingface來做替代放案，這樣就不用花費openAI的金鑰額度了，官網
可以透過稍微修改就可以完成了，有興趣的可以去看看他的影片