// Import the web socket library
const WebSocket = require("ws");
// Load the .env file into memory so the code has access to the key
const dotenv = require("dotenv");
dotenv.config();
function main() {
  // Connect to the API
  const url = "wss://api.openai.com/v1/realtime?model=gpt-4o-realtime-preview-2024-10-01";
  const ws = new WebSocket(url, {
      headers: {
          "Authorization": "Bearer " + process.env.OPENAI_API_KEY,
          "OpenAI-Beta": "realtime=v1",
      },
  });
}
main();

發(fā)送函數(shù)調(diào)用的結(jié)果。

請(qǐng)求響應(yīng)。
2. 我們通過(guò)將以下情況添加到Handemessage（）函數(shù)中的Switch語(yǔ)句：>來(lái)處理此操作。
3. 如果我們現(xiàn)在運(yùn)行腳本並請(qǐng)求添加兩個(gè)數(shù)字的結(jié)果，則該模型應(yīng)調(diào)用該功??能並提供結(jié)果。
>此功能相對(duì)簡(jiǎn)單，但是由於該函數(shù)是由客戶(hù)端執(zhí)行的，因此可能是任何東西。在下一部分中，我們將看到兩個(gè)更複雜功能的示例。

此示例的完整代碼可在此處找到。

>今天建立MLOPS技能

>

不需要React知識(shí)才能使其啟動(dòng)並運(yùn)行。但是，您需要熟悉反應(yīng)以修改或擴(kuò)展它。

他們的應(yīng)用在此存儲(chǔ)庫(kù)中託管。要設(shè)置它，請(qǐng)使用以下git命令克隆開(kāi)始：

npm init -y && touch index.js

要安裝該應(yīng)用程序，我們使用以下NPM（節(jié)點(diǎn)軟件包管理）命令：>

安裝完成後，在項(xiàng)目的根文件夾中創(chuàng)建一個(gè)名為.env的文件，然後粘貼以下內(nèi)容：

npm install ws dotenv

替換＆lt; openai_api_key＆gt;使用OpenAI API鍵。

// Import the web socket library
const WebSocket = require("ws");
// Load the .env file into memory so the code has access to the key
const dotenv = require("dotenv");
dotenv.config();
function main() {
  // Connect to the API
  const url = "wss://api.openai.com/v1/realtime?model=gpt-4o-realtime-preview-2024-10-01";
  const ws = new WebSocket(url, {
      headers: {
          "Authorization": "Bearer " + process.env.OPENAI_API_KEY,
          "OpenAI-Beta": "realtime=v1",
      },
  });
}
main();

一個(gè)由應(yīng)用程序的Web用戶(hù)界面組成的React前端。 >

>要啟動(dòng)應(yīng)用程序，有必要同時(shí)啟動(dòng)繼電器服務(wù)器和前端。要啟動(dòng)繼電器服務(wù)器，請(qǐng)使用以下命令：>

啟動(dòng)React前端使用命令：>

完成加載後，將在瀏覽器上打開(kāi)一個(gè)選項(xiàng)卡，並在其上運(yùn)行該應(yīng)用程序。

ws.on(<event>, <function>);

// Add inside the main() function of index.js after creating ws
async function handleOpen() {
  console.log("Connection is opened");
}
ws.on("open", handleOpen);

我們首先單擊“連接”按鈕。這將向?qū)崟r(shí)API發(fā)送“ Hello”消息，我們將收到一個(gè)問(wèn)候。

>使用它，按和交談而無(wú)需釋放按鈕。釋放按鈕時(shí)發(fā)送消息。

該應(yīng)用程序還具有VAD（語(yǔ)音活動(dòng)檢測(cè)）模式，在該模式中，我們不需要按任何按鈕。在此模式下，應(yīng)用程序?qū)⒉粩嗍章?tīng)，使我們能夠與助手進(jìn)行積極的對(duì)話(huà)。要使用它，只需按“ VAD”按鈕並說(shuō)話(huà)。

函數(shù)

>有時(shí)我請(qǐng)求天氣報(bào)告，而響應(yīng)表明當(dāng)時(shí)無(wú)法訪問(wèn)它。但是，這些信息始終顯示在右側(cè)。作為演示應(yīng)用程序，它並不是要成為功能齊全的產(chǎn)品，而是用於展示API的功能。

了解客戶(hù)端

本節(jié)需要對(duì)REACT的高級(jí)了解才能遵循，因?yàn)槲覀兘榻B了應(yīng)用程序的一些實(shí)現(xiàn)詳細(xì)信息。

>

在此useFect（）調(diào)用中定義了與API的集成。最初呈現(xiàn)控制臺(tái)頁(yè)面時(shí)，執(zhí)行此useFect（）中的代碼。與我們的node.js腳本類(lèi)似，它概述瞭如何響應(yīng)API事件。主要的區(qū)別是其使用RealtimeClient客戶(hù)端包裝器。 >

npm init -y && touch index.js