整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
自GitHub
機器之心編譯
參與：吳攀、晏奇
Facebook 近日在 GitHub 上開源了一個可用于在多種開放可用的對話數據集上訓練和評估人工智能模型的框架 ParlAI，機器之心在本文中對這一項目的 README.md 內容進行了編譯介紹。項目地址如下：
官網地址：http://parl.ai
GitHub：https://github.com/facebookresearch/ParlAI
ParlAI（讀音為 par-lay）是一個用于對話人工智能研究的框架，是用 Python 實現的。該框架的目標是為研究者提供：
一個用于訓練和測試對話模型的統一框架
一次性在許多數據集上進行多任務訓練
無縫集成 Amazon Mechanical Turk，以便數據收集和人工評估
這第一個版本支持超過 20 種任務，也囊括了許多流行的數據集，比如 SQuAD、bAbI tasks、MCTest、WikiQA、WebQuestions、SimpleQuestions、WikiMovies、QACNN & QADailyMail、CBT、BookTest、bAbI Dialog tasks、Ubuntu Dialog、OpenSubtitles、Cornell Movie 和 VQA-COCO2014。
還包括使用 PyTorch 和 Lua Torch 訓練神經模型的示例，其包含了在 GPU 上的批訓練或在 CPU 上的 hogwild 訓練。另外使用 Theano 或 TensorFlow 也是很直接的。
我們的目標是讓那些在它們之上訓練的任務和智能體能夠以一種基于社區的方式成長。
這個版本還是早期的 Beta 版，使用過程中可能會有一些冒險，或遇到一些難題。
目標
用于評估模型的統一框架
可按需下載任務/數據集，且為它們提供了同樣簡單的接口
統一的數據集輸入和評估框架/標準
agents/ 目錄鼓勵研究者提交他們的訓練代碼，以便在該 repo 中分享
協助重現
最終目標是實現通用的對話，包括許多不同的技能
無縫地組合模擬的和真實的語言任務
鼓勵多任務模型的開發和評估
有助于減少模型在特定數據集上的過擬合
最終目標是實現與人類的真實對話
通過 Mechanical Turk，在與人類的實時對話上訓練和評估
只需簡單的設置，就可以連接 Mechanical Turk 上的人類與你的對話代理
允許比較不同研究組的 Turk 實驗
能夠引導一個可與人類交互的對話模型的數據集配置
激勵構建將進入本 repo 的新數據集
特性
所有的數據集都像自然對話：單一格式/API
既有固定數據集（會話日志），也有交互式任務（在線/RL）
既有真實任務，也有模擬任務
支持其它媒體，比如 VQA 中的視覺
可以使用 Mechanical Turk 來運行/收集數據/評估
Python 框架
PyTorch 的訓練示例
可使用 zmq 與其它非 Python 的工具箱對話，給出了 Lua Torch 的示例
支持模型的 hogwild 訓練和批訓練
基本示例
從「1k training examples」bAbI 任務的任務 1 中展示 10 個隨機樣本：
python examples/display_data.py -t babi:task1k:1
同時在 bAbI 任務的多任務與 SQuAD 數據集上展示 100 個隨機樣本：
python examples/display_data.py -t babi:task1k:1,squad -n 100
在 Movies Subreddit 數據集的驗證集上評估 IR 基線模型：
python examples/eval_model.py -m ir_baseline -t "#moviedd-reddit" -dt valid
給出該 IR 基線模型的預測：
python examples/display_model.py -m ir_baseline -t "#moviedd-reddit" -dt valid
在「10k training examples」bAbI 任務 1 上訓練一個簡單的基于 CPU 的記憶網絡，其使用了 Hogwild（需要 zmq 和 Lua Torch），有 8 個線程（Python 進程）：
python examples/memnn_luatorch_cpu/full_task_train.py -t babi:task10k:1 -n 8
在 SQuAD 數據集上訓練一個「注意 LSTM」模型，其中批大小為 32（PyTorch 和 regex）
python examples/drqa/train.py -t squad -b 32
要求
ParlAI 目前支持 Python3。
核心模組的依賴內容參見 requirement.txt。其中部分模型（在 parlai/agents 中）有進一步要求，比如需要 PyTorch 或 Lua Torch——所有這些模組的要求都可以參見 requirements_ext.txt 這個文檔。
安裝 ParlAI
首先，復制該 repository，然后進入復制的目錄。
鏈接安裝：運行 python setup.py develop 來將復制的目錄鏈接到你的 site-packages。如果你打算根據你的運行修改任何的 parlai 代碼或者提交一個 pull request，特別是如果你想在 repository 上添加另外的任務的話，那么我們推薦上述安裝過程。所有需要的數據都將被下載到 ./data，而且，如果要求任何模型的文件（目前僅是 memnn 模型），它們都將被下載到 ./downloads。
復制后的安裝內容（僅將 parlai 用作一個依賴項）：運行 python setup.py install 來將內容復制到你的 site-packages 文件夾。所有數據都會被默認下載到 python 的 site-packages 文件夾中（你可以通過命令行來改寫路徑），不過一旦對代碼作出了任何改動，你都需要重新運行一次安裝。如果你僅想將 parlai 作為一個依賴項使用（比如用于訪問任務或核心代碼），那么目前這樣就可以了。但是如果你想要清除下載的數據，那么刪除 site-packages/parlai 中的 data 和 downloads 文件夾（如果可以的話）。
Worlds, agents 和 teachers
ParlAI 中的主要概念（類）：
world——它定義了環境（它可以非常簡單，可以僅兩個代理相互對話）。
agent——這是世界里的一個代理，比如一個學習器。（存在很多學習器。）
teacher——這是一種可以和學習者對話的代理，它用于實現前面提到的任務。
在定義完 ParlAI 中的 world 和 agent 之后，一個主 loop 可被用來訓練、測試或顯示，它叫做 world.parley() 函數。我們在左邊的面板中給出了個實例的主要骨架，parley() 函數真實的代碼寫在右側面板。
Actions 和 Observations
所有的 agent（包括 teacher）都以簡單的格式互相對話——observation/action 對象（這是一個 python 字典）。這被用于傳遞 agent 之間的文本、標簽和獎勵。這和當在對話（行動）或聽（觀察）時是同類對象，但是不同視角（在這些字段中有不同的值）。這些領域如下所述：
盡管'text'（文本）領域將幾乎可能在全部交流（exchange）中被使用，但是技術上來說，基于你的數據集，這些領域中的每個都是可選的。
對于一個固定的監督式學習數據集（比如 bAbI）來說，一個典型的從數據集進行交流（exchange）例子可以像如下這樣（該測試集不包含標簽）：
Teacher: {
'text': 'Sam went to the kitchen\nPat gave Sam the milk\nWhere is the milk?',
'labels': ['kitchen'],
'label_candidates': ['hallway', 'kitchen', 'bathroom'],
'episode_done': False
}
Student: {
'text': 'hallway'
}
Teacher: {
'text': 'Sam went to the hallway\nPat went to the bathroom\nWhere is the milk?',
'labels': ['hallway'],
'label_candidates': ['hallway', 'kitchen', 'bathroom'],
'episode_done': True
}
Student: {
'text': 'hallway'
}
Teacher: {
... # starts next episode
}...
代碼
代碼被設置進了幾個主要目錄：
core：它包含了框架的首要代碼。
agents：包含了可以憑不同任務交互的代理（比如：機器學習模型）。
example：包含了不同循環的一些基本樣例（構建詞典、訓練/評價、顯示數據）。
tasks：包含了可來自于 ParlAI 的不同任務的代碼。
mturk：包含了設置 Mechanical Turk 的代碼和作為樣例的 MTurk 任務。
下面我們會更具體地說明每個目錄，我們根據依賴項（dependency）來組織行文。
Core 庫
core 庫包含了如下文件：
agent.py：這個文件包含了一些可被你自己模型延展的基本 agent。
Agent：這是所有 agent 的基本類，實現了 act() 方法，該方法接受一個觀察表（table）并且返回一個作為回復的表。
Teacher：它是 Agent 的子代，也實現了針對返回量度（returning metric）的報告方法。任務實現了 Teacher 這個類。
MultiTaskTeacher：它創造了一個基于「任務字符串」的 teacher 集，該集可以傳遞給 Teacher。在其中它創建了多個 teacher 并且在它們之間交替輪換。
create_task_teacher：它從一段給定的任務字符串中實例化了一個 teacher（比如「babi:task:1」或「squad」）。
build_data.py：用于設置任務數據的基本功能。如果你的文件系統需要不同的功能，你可以覆蓋它。
dialog_teacher.py：包含了用于和固定交談（chat）日志進行對話（dialog）的一個基本 teacher 類，同時它也包含了一個用于儲存數據的數據類（data class）。
dict.py：包含了從觀察中構建一般 NLP 風格字典的代碼。
DictionaryAgent：在一個字典中跟蹤索引和詞頻的 agent，可以將一個句子解析成它字典或 back 中的指數（indice）。
fbdialog_teacher.py：包含了一個 teacher 類，該類實現了一個 setup_data 函數，這個函數用 Facebook 的 Dialog 數據格式來解析數據。
metrics.py：計算對話的評價量度，比如對排名的量度等。
params.py：用 argparse 來為 ParlAI 解釋命令行 argument。
thread_utils.py：用于 Hogwild 多線程（多重處理）的工具類/函數。
SharedTable：提供一個鎖保護、記憶分享、類字典的用于追蹤度量的的界面。
worlds.py：包含了一套用于內部開展任務的基本 world。
World：所有 world 的基本類，實現了 parley，shutdown，__enter__，和__exit__。
DialogPartnerWorld：用于雙 agent 回合交流的默認 world。
MultiAgentDialogWorld：用于兩到多個 agent 的循環（round-robin）回合 agent 交流。
HogwildWorld：當使用多線程（多重處理）時。這是用于設置一個對每個線程而言分別獨立的 world 的默認 world。
Agents 目錄
agents 目錄包含了已被認可進入 ParlAI 框架用于分享的 agent。目前有這些可用的目錄：
drqa：這是一個很周全的 LSTM 模型，它叫「DrQA」（問答博士，論文地址：https://arxiv.org/abs/1704.00051）。它用 PyTorch 框架實現，在 SQuAD 數據集上，它得到的結果相比其它模型更具競爭力。
memnn：它是在 Lua Torch 中用于端到端記憶網絡的代碼。
remote_agent：連接 ZMQ 的任意 agent 的基本類（memnn_luatorch_cpu 就使用這個）。
ir_baseline：簡單的信息檢索基準（baseline），它用 TFIDF-權重匹配為候選者的反饋評分。
repeat_label：僅重復（repeating）發送給它的所有數據的基本類（如連接（piping）到一個文件、調試）。
實例
這個目錄包含了部分基本循環的具體例子。
base_train.py：一個非常簡單的例子，展示了一個使用默認 Agent 親本類的訓練/驗證循環的輪廓。
display_data.py：使用 agent.repeat_label 來顯示來命令行給出的特定任務的數據。
display_model.py：顯示對一個給定模型在命令行給出的特定任務之上的預測。
eval_model.py：使用命名后的 agent 來計算一個命令行給出的特定任務的評價量度（evaluation metric）數據。
build_dict.py：使用 core.dict.DictionaryAgent 建立一個來自命令行給出的特定任務的 dictionary。
memnn_luatorch_cpu：展示了一些在幾個數據集上訓練端到端記憶網絡的例子。
drqa：展示了如何在 SQuAD 訓練集上訓練一個周全的 LSTM「DrQA」模型（論文地址：https://arxiv.org/abs/1704.00051）。
任務
這個第一版本支持超過 20 種任務，包括 SQuAD、bAbI tasks、MCTest、WikiQA、WebQuestions、SimpleQuestions、WikiMovies、QACNN、QADailyMail、CBT、BookTest、bAbI Dialog tasks、Ubuntu、OpenSubtitles、Cornell Movie 和 VQA-COCO2014 等流行的數據集。
我們的第一版包含以下數據集，見下圖左欄；獲取它們也非常簡單，只需在命令行的選項中指定對應任務的名稱即可，如右欄的數據集展示實用程序所示。查閱當前完整任務列表請訪問：https://github.com/facebookresearch/ParlAI/blob/master/parlai/tasks/task_list.py
在 ParlAI 中選擇一個任務非常簡單，只需要在命令行中指定它既可，如上圖（右）所示。如果該數據集之前沒有被使用過，那 ParlAI 將會自動下載它。因為在 ParlAI 中，所有的數據集的處理方式都是一樣的（使用單個對話 API），所以原則上一個對話代理可以在這些數據集之間切換訓練和測試。還不止于此，你可以簡單地通過提供一個逗號分隔的列表來一次性指定許多任務（多任務），比如命令「-t babi,squad」可以使用這兩個數據集，甚至還可以使用「-t #qa」命令一次性指定所有的 QA 數據集或使用「-t #all」一次性指定 ParlAI 中的每一個任務。我們的目標是使其可以輕松地創建和評估非常豐富的對話模型。
每個任務文件夾包含：
build.py 文件，用于設置任務的數據（下載數據等，僅在第一次請求時完成，如果某個任務從未被使用，那么就不會下載它）。
agents.py 文件，包含了默認的或特定的教師（teacher）類別，可被 core.create_task 用來從命令行參數上實例化這些類別（如有需要）。
worlds.py 文件，是可選的，可用于需要定義新環境或復雜環境的任務。
要添加你自己的任務：
（可選）實現 build.py 以下載任何所需的數據
實現 agents.py，至少包含一個 DefaultTeacher（擴展 Teacher 或它的一個衍生）
如果你的數據是 FB Dialog 格式的，那么屬于 FbDialogTeacher 類別
如果不是 FB Dialog 格式：
如果你的數據是基于文本的，你可以使用擴展的 DialogTeacher，并因此要使用 core.data.TextData，在這種情況下，你僅需要編寫你自己的 setup_data 函數，其可根據在 core.data 中所描述的格式而在數據之上提供一個 iterable.
如果你的數據使用了其它字段，那么就要編寫你自己的 act() 方法，其提供了當你的任務每次被調用時的觀察。
MTurk
ParlAI 的一個重要方面是與 Mechanical Turk 的無縫集成，可用于數據收集、訓練和評估。在 ParlAI 中，人類 Turker 也被視為代理（agent），因此在一個標準的框架中可以進行人-人、人-bot、多人和多 bot 群聊等形式的對話，也可以按照需求切換角色，而無需對代理的代碼進行修改。這是因為 Turker 也可以使用觀察/動作（observation/action）詞典中的字段來通過同樣接口的一個版本進行接收和發送。我們在這第一版中提供了兩個示例——收集數據和人類對 bot 的評估。
mturk 庫包含以下目錄和文件：
core：該目錄包含了設置支持 MTurk 聊天接口的 AWS 后端的核心代碼，以及用于 HIT 創建和許可的代碼。
tasks：該目錄包含了兩個第一版提供的示例 MTurk 任務。
qa_data_collection：從 Turker 獲取問題和答案，給出了 SQuAD 的一個隨機段落
model_evaluator：在 Reddit 電影對話日志數據集上評估該信息檢索基線模型
run_mturk.py：用于調用 mturk 核心代碼的文件，包含用戶指定的任務模塊、對話日志模型代理、HIT 的數量和每個 HIT 的回報。
運行示例 MTurk 任務和代理：
在 run_mturk.py 中，去掉任務模塊和你想使用的代理類別的注釋
對于 create_hits 方法，如有需要，改變 num_hits 和 hit_reward。如果你想僅在 MTurk 沙箱中運行該樣本，那么就將 is_sandbox 設置為 True；如果設置為 False，則就可讓 Turker 來處理這個工作并得到報酬。
運行 python run_mturk.py
添加你自己的 MTurk 任務和對話模型：
在 mturk/tasks 目錄為你自己的任務創建一個新的文件夾
部署 task_config.py，至少在 task_config 目錄中包含以下字段：
hit_title：關于該 HIT 包含的任務類型的一個短的描述性標題。在 Amazon Mechanical Turk 網站上，該 HIT 標題以搜索結果的形式呈現，并且出現在該 HIT 被提及的任何地方。
hit_description：一個 description（描述）包含了該 HIT 所包含的任務類型的詳細信息。在 Amazon Mechanical Turk 網站上，該 HIT 描述出現在搜索結果的擴展視圖中，并且也會出現在該 HIT 和分配（assignment）屏幕上。
hit_keywords：描述該 HIT 的一個或多個詞或短語，用逗號隔開。在 Amazon Mechanical Turk 網站上，這些詞被用于搜索 HIT。
worker_agent_id：一個指示 Turker 在對話中的作用的短名字
task_description：一個詳細的任務描述，將會出現在 HIT 任務預覽頁面，并會顯示在聊天頁面的左側。支持 HTML 格式。
實現 agents.py，至少有一個從 Agent 擴展的代理類別。
編寫你自己的 __init__() 方法以打包你的對話模型代理（具體示例可見 mturk/tasks/model_evaluator/agents.py 文件）。
編寫你自己的 act() 方法，其會返回你的對話模型的響應，以及有助于 Turker 了解接下來應該做的事情的幫助文本。
在 run_mturk.py 文件中導入你的任務模塊和代理類別，然后運行 python run_mturk.py
團隊
ParlAI 目前由 Alexander H. Miller、Will Feng 和 Jason Weston 維護。其他主要貢獻者還包括（不完整列表）：Adam Fisch、Jiasen Lu、Antoine Bordes、Devi Parikh 和 Dhruv Batra。
證書
ParlAI 采用 BSD 授權。我們也提供了額外的專利授權。
網頁開發中，iframe 就像一個個嵌套的“小窗口”，為我們展示來自不同源的網頁內容。但如何讓這些“小窗口”與主頁面進行溝通呢？今天，就來揭秘 iframe 父子頁面通信的技巧，讓你的網頁交互更上一層樓！
由于瀏覽器的同源策略限制，來自不同源的 iframe 頁面之間無法直接訪問彼此的數據和方法。想要實現通信，我們需要借助一些技巧來跨越這道“次元壁壘”。
<iframe src="child.html" id="myIframe"></iframe>
<script>
const iframe=document.getElementById('myIframe');
const message={ type: 'greeting', content: 'Hello from parent!' };
iframe.onload=()=> {
iframe.contentWindow.postMessage(message, 'http://localhost:5173'); // 假設子頁面地址
};
</script>
子頁面 (child.html)：
<script>
window.addEventListener('message', (event)=> {
if (event.origin !=='http://localhost:8080') return; // 安全校驗，確保消息來自預期源
console.log(event.data); // 輸出：{ type: 'greeting', content: 'Hello from parent!' }
});
</script>
postMessage 方法是 HTML5 新增的跨文檔消息傳遞機制，它允許不同源的窗口之間進行安全通信。
iframe 父子頁面通信是網頁開發中的常見需求，掌握 postMessage 、DOM操作 和 window.name 三種方法，能夠幫助你輕松應對各種通信場景，打造更流暢的網頁交互體驗！
在不斷發展的 Web 開發環境中，創建引人入勝的交互式聊天應用程序已成為一項流行且具有挑戰性的任務。利用 ChatGPT、FastAPI 和 ReactJS 等強大工具，開發人員可以制作動態和智能的對話界面。本博客將指導您完成在 FastAPI 后端設置 ChatGPT 并將其與 ReactJS 前端無縫集成以創建功能齊全的聊天應用程序的過程。
ChatGPT 由 OpenAI 開發，是一種最先進的語言模型，它利用了 GPT（生成式預訓練轉換器）架構。它可以根據收到的輸入生成類似人類的文本，使其成為創建對話界面的理想候選者。
FastAPI 是一個現代、快速（高性能）的 Web 框架，用于基于標準 Python 類型提示使用 Python 3.7+ 構建 API。它易于使用，性能高，并自動生成 API 文檔。
由 Facebook 開發的 ReactJS 是一個用于構建用戶界面的 JavaScript 庫。它允許開發人員創建可重用的 UI 組件，并在基礎數據更改時有效地更新視圖。React 基于組件的架構使其非常適合構建交互式和動態應用程序。
在深入研究 FastAPI 之前，請確保已安裝 Python 3.7 或更高版本。您可以使用以下命令安裝 FastAPI 和輕量級 ASGI 服務器 Uvicorn：
JavaScript的
pip install fastapi uvicornFastAPI 遵循聲明性語法，允許開發人員使用 Python 類型提示定義 API。創建一個新文件，例如，，然后從導入必要的模塊開始：main.py
from fastapi import FastAPI接下來，初始化 FastAPI 應用程序：
app=FastAPI()這將設置一個基本的 FastAPI 應用程序。若要測試它，請運行以下命令：
JavaScript的
uvicorn main:app --reload在瀏覽器中訪問，您應該會看到 FastAPI 文檔。http://127.0.0.1:8000
要集成 ChatGPT，請安裝 OpenAI Python 庫：
JavaScript的
pip install openai在 OpenAI 平臺上創建一個帳戶并獲取 API 密鑰。使用此密鑰對 OpenAI API 的請求進行身份驗證。在您的文件中，導入模塊并設置 OpenAI API 密鑰：main.pyopenai
import openaibrbropenai.api_key="your-api-key"現在，在 FastAPI 中創建一個端點來處理聊天請求：
from fastapi import WebSocketbrbr@app.websocket("/chat")brasync def chat_endpoint(websocket: WebSocket):br await websocket.accept()br while True:br data=await websocket.receive_text()br response=generate_chat_response(data)br await websocket.send_text(response)這里是一個函數，它將用戶的消息發送到 ChatGPT 并接收模型的響應。generate_chat_response
FastAPI 支持 WebSocket 連接進行實時通信。WebSocket 端點是異步的，允許服務器和客戶端之間進行持續通信。
在函數中，啟動 WebSocket 連接，循環使用 持續偵聽傳入消息。chat_endpointawait websocket.accept()data=await websocket.receive_text()
然后，服務器使用該函數生成響應，并使用 將其發送回客戶端。generate_chat_responseawait websocket.send_text(response)
使用 Create React App 創建一個新的 ReactJS 項目：
JavaScript的
npx create-react-app chat-appbrcd chat-app這將設置一個基本的 ReactJS 項目。在首選代碼編輯器中打開項目。
為聊天界面創建一個新組件，例如 .此組件將處理用戶輸入、顯示消息和管理 WebSocket 連接。Chat.js
JavaScript的
import React, { useState, useEffect } from 'react';brbrconst Chat=()=> {br const [messages, setMessages]=useState([]);br const [input, setInput]=useState('');br const [socket, setSocket]=useState(null);brbr useEffect(()=> {br // Initialize WebSocket connectionbr const newSocket=new WebSocket('ws://localhost:8000/chat');brbr newSocket.onopen=()=> {br console.log('WebSocket connection opened');br };brbr newSocket.onmessage=(event)=> {br // Handle incoming messagesbr const newMessages=[...messages, event.data];br setMessages(newMessages);br };brbr setSocket(newSocket);brbr // Clean up WebSocket connection on component unmountbr return ()=> {br newSocket.close();br };br }, [messages]);brbr const sendMessage=()=> {br // Send user message to the serverbr socket.send(input);brbr // Update local state with user messagebr const newMessages=[...messages, input];br setMessages(newMessages);brbr // Clear input fieldbr setInput('');br };brbr return (br <div>br <div>br {messages.map((message, index)=> (br <div key={index}>{message}</div>br ))}br </div>br <inputbr type="text"br value={input}br onChange={(e)=> setInput(e.target.value)}br />br <button onClick={sendMessage}>Send</button>br </div>br );br};brbrexport default Chat;此組件在掛載時初始化 WebSocket 連接，偵聽傳入消息，并相應地更新 UI。該函數將用戶的輸入發送到服務器。sendMessage
在組件中，鉤子處理 WebSocket 初始化和消息處理。該函數將用戶的輸入發送到服務器，使用用戶的消息更新本地狀態，并清除輸入字段。Chat.jsuseEffectsendMessage
該組件呈現消息列表和輸入字段，供用戶鍵入。當用戶發送消息時，它會出現在聊天界面中，從而創建無縫交互。Chat.js
在 中，定義用于發送和接收消息的 API 端點：main.py
from fastapi import WebSocketbrbr@app.websocket("/chat")brasync def chat_endpoint(websocket: WebSocket):br await websocket.accept()br while True:br data=await websocket.receive_text()br response=generate_chat_response(data)br await websocket.send_text(response)端點處理 WebSocket 連接，并在服務器和客戶端之間持續交換消息。/chat
為了管理 ReactJS 中的狀態，該組件使用鉤子。狀態數組保存聊天歷史記錄，而狀態管理用戶的當前輸入。Chat.jsuseStatemessagesinput
FastAPI 和 ReactJS 之間的 WebSocket 通信支持聊天界面的實時更新。當組件掛載并且傳入消息觸發 UI 更新時，將建立 WebSocket 連接。Chat.js
通過實施用戶身份驗證來保護聊天應用程序。您可以使用令牌或與用戶身份驗證系統（如 OAuth）集成。確保只有經過身份驗證的用戶才能訪問聊天。
定制 ChatGPT 響應以增強用戶體驗。您可以預處理用戶消息、添加上下文并設置響應格式，以使對話更加自然和引人入勝。
請考慮實現不同的對話狀態，例如問候語、查詢和告別。根據檢測到的狀態，調整 ChatGPT 的行為以提供更符合上下文的響應。
在部署 FastAPI 后端之前，請安裝其他依賴項：
JavaScript的
pip install gunicorn uvicorn[standard]創建包含以下內容的文件：main.py
from fastapi import FastAPIbrfrom fastapi.staticfiles import StaticFiles brapp=FastAPI() brapp.mount("/static", StaticFiles(directory="static"), name="static") br# ... (rest of the FastAPI code)此配置允許 FastAPI 提供靜態文件，例如 ReactJS 構建文件。
構建用于生產的 ReactJS 項目：
JavaScript的
npm run build這將生成一個目錄，其中包含優化的生產就緒文件。build
要部署前端，您可以使用靜態文件托管服務，如 Netlify、Vercel 或 GitHub Pages。將目錄的內容上傳到托管平臺。build
更新組件中的 WebSocket URL 以指向生產服務器。此外，為敏感信息（如 API 密鑰）設置環境變量，并確保安全處理它們。Chat.js
當您繼續開發聊天應用程序時，請考慮探索其他功能和增強功能。這可能包括實現多媒體支持、用戶消息的情緒分析，或與其他 AI 模型集成以豐富對話。
構建具有智能功能的聊天應用程序是一項具有挑戰性但有益的工作。繼續探索 ChatGPT、FastAPI 和 ReactJS 的功能，以創建創新且用戶友好的對話界面。隨著技術的進步，創建更復雜、更引人入勝的聊天應用程序的可能性也在增加。
祝您編碼愉快！
原文標題：Building a Dynamic Chat Application: Setting Up ChatGPT in FastAPI and Displaying Conversations in ReactJS
原文鏈接：https://dzone.com/articles/building-a-dynamic-chat-application-setting-up-cha
作者：Atul Naithani
編譯：LCR
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
