共用方式為

開始使用 Azure OpenAI 與 JavaScript 中的小幫手和函式呼叫

  • 發行項

本文說明如何部署和執行 無伺服器 Azure OpenAI 小幫手快速入門。 此範例會使用 JavaScript、具有函式呼叫的 Azure OpenAI 服務助理和 Azure Functions 來實作小幫手應用程式。

架構概觀

Azure OpenAI 小幫手可讓您透過自定義指示，以及透過程式代碼解釋器和自定義函式等進階工具來建立專為您需求量身打造的 AI 助理。 在本文中，我們會提供開始使用助理 API 的深入逐步解說。

Diagram showing architecture from client to backend app.此圖顯示從用戶端到後端應用程式的架構。

此應用程式是以兩個主要元件為基礎所建置：

  • 具有 Vanilla CSS 和 JavaScript 檔案的簡單 HTML 頁面，並裝載在 Azure Static Web Apps 上。

  • 使用 Azure Functions 和 OpenAI JavaScript SDK 建置的無伺服器 API。 無伺服器應用程式會將助理定義傳送至 OpenAI 端點，包括函式呼叫。 端點會回應後續函式呼叫，以及完成該呼叫所需的參數。

    • 範例的函式呼叫會根據傳送至 Azure 函式的股票符號產生隨機股票刻度值來模擬 API 呼叫。 此模擬可以取代為您解決方案中的遠端 API。

    Diagram showing Azure Functions integration with Azure OpenAI where Azure OpenAI can return follow-up function names which Azure Functions should call.顯示 Azure Functions 與 Azure OpenAI 整合的圖表，其中 Azure OpenAI 可以傳回 Azure Functions 應該呼叫的後續函式名稱。

必要條件

開發容器環境可提供完成本文所需的所有相依性。 您可以在 GitHub Codespaces (瀏覽器中) 或使用 Visual Studio Code 在本機執行開發容器。

若要使用本文，您需要下列必要條件：

  1. Azure 訂用帳戶 - 免費建立一個訂用帳戶
  2. Azure 帳戶權限 - 您的 Azure 帳戶必須具有 Microsoft.Authorization/roleAssignments/write 權限，例如，使用者存取系統管理員或擁有者。
  3. GitHub 帳戶。

開啟開發環境

使用下列指示來部署預先設定的開發環境，其中包含完成本文所需的所有相依性。

GitHub Codespaces 會使用網頁版 Visual Studio Code 作爲使用者介面，執行由 GitHub 管理的開發容器。 如需最直接的開發環境，請使用 GitHub Codespaces，使得您有已預先安裝的正確開發人員工具和相依性，以便完成本文。

重要

所有 GitHub 帳戶每個月最多可以使用 Codespaces 60 小時，且有 2 個核心執行個體。 如需詳細資訊，請參閱 GitHub Codespaces 每月包含的儲存體和核心時數。

  1. 開始在 Azure-Samples/azure-openai-assistant-javascript GitHub 存放庫分的 main 分支上建立新的 GitHub Codespace 的流程。

  2. 以滑鼠右鍵按下列按鈕，然後選取 在新視窗中開啟連結，以同時使用開發環境和檔案。

    Open in GitHub Codespaces在 GitHub Codespaces 中開啟

  3. 在 [建立 Codespace] 頁面上，檢閱 Codespace 組態設定，然後選取 [建立新的 Codespace]

  4. 等候 Codespace 開始。 此啟動程序可能需要幾分鐘的時間。

  5. 在畫面底部的終端機中，使用 Azure Developer CLI 登入 Azure。

    azd auth login

  6. 從終端機複製程式碼，然後將它貼到瀏覽器中。 遵循指示使用 Azure 帳戶進行驗證。

  7. 本文中的其餘工作會在此開發容器的內容中進行。

部署和執行

範例存放庫包含將函式應用程式部署至 Azure 所需的所有程式碼和組態檔。 下列步驟會逐步引導您完成將範例部署至 Azure 的程序。

將助理應用程式部署至 Azure

重要

在本節中建立的 Azure 資源會產生立即成本，主要是來自 Azure AI 搜尋服務資源。 即使您在命令完整執行之前中斷命令，這些資源仍可能會產生成本。

  1. 執行下列 Azure Developer CLI 命令來佈建 Azure 資源並部署原始程式碼：

    azd up

  2. 提示您輸入環境名稱時，請將它保持簡短和小寫。 例如： myenv 。 它用來作為資源組名的一部分。

  3. 出現提示時，選取要在其中建立資源的訂用帳戶。

  4. 第一次提示您選取位置時，請選取您附近的位置。 此位置會用於大部分的資源，包括裝載。

  5. 如果提示您輸入 OpenAI 模型的位置，請選取您附近的位置。 如果有與您的第一個位置相同的位置，請選取該位置。

  6. 等候應用程式部署。 部署可能需要 5-10 分鐘的時間才能完成。

  7. 成功部署應用程式之後，您會看到終端機中顯示的URL。

  8. 選取標示 Deploying service web 為在瀏覽器中開啟小幫手應用程式的URL。

使用小幫手應用程式

您可以使用助理應用程式來取得 的股票市場價格 MSFT。 下列步驟會逐步引導您使用小幫手應用程式的程式。 助理可以在電子郵件中傳送答案給您。 由於未設定電子郵件傳送功能，請將提示修改為不使用該指示。

  1. 在瀏覽器中，複製並貼上下列提示：

    Based on the latest financial data and current stock market trends, can you provide a detailed analysis of Microsoft's current state? Please include insights into their recent performance, market position, and future outlook. Additionally, retrieve and include the latest closing price of Microsoft's stock using its ticker symbol (MSFT).

  2. 選取 [執行] 按鈕。 您的結果看起來應該 類似 下列回應。

    Screenshot of assistant app's first answer.助理應用程式第一個答案的螢幕快照。

清除資源

清除 Azure 資源

在本文中建立的 Azure 資源會向您的 Azure 訂用帳戶計費。 如果您預計未來不需要這些資源，請將其刪除，以避免產生更多費用。

執行下列 Azure Developer CLI 命令來刪除 Azure 資源並移除原始程式碼：

azd down --purge

清除 GitHub Codespaces

刪除 GitHub Codespaces 環境，可確保您可將您為帳戶取得的每個核心免費時數權利數量最大化。

重要

如需 GitHub 帳戶權利的詳細資訊，請參閱 GitHub Codespaces 每月包含的儲存體和核心時數。

  1. 登入 GitHub Codespaces 儀表板 (https://github.com/codespaces)。

  2. 找出您目前執行中的 Codespaces，而其來源為 Azure-Samples/azure-openai-assistant-javascript GitHub 存放庫。

    Screenshot of all the running Codespaces including their status and templates.執行中 Codespaces 的螢幕擷取畫面，包括其狀態和範本。

  3. 開啟操作功能表 ， ...針對codespace，然後選取 [ 刪除]。

取得協助

此範例存放庫可提供疑難排解資訊。

如果您的問題未解決，請將您的問題記錄至存放庫的問題。

相關內容