共用方式為


AI:建立 Azure OpenAI 資源並部署模型

若要開始在應用程式中使用 Azure OpenAI,您需要建立 Azure OpenAI 服務,並部署可用來執行工作模型,例如將自然語言轉換成 SQL、產生電子郵件/SMS 訊息內容等等。

在此練習中,您將會:

  • 建立 Azure OpenAI 服務資源。
  • 部署模型。
  • 使用 Azure OpenAI 服務資源中的值來更新 .env 檔案。

Microsoft雲端案例概觀

建立 Azure OpenAI 服務資源

  1. 在瀏覽器中流覽 Azure 入口網站 並登入。

  2. 在入口網站頁面頂端的搜尋列中輸入 openai,然後從出現的選項中選取 [Azure OpenAI]。

    Azure 入口網站中的 Azure OpenAI 服務

  3. 選取工具列中的 [建立 ]。

    備註

    雖然本教學課程著重於 Azure OpenAI,但如果您有 OpenAI API 金鑰並想要使用它,您可以略過本節,並直接前往下方的 更新專案的 .env 檔案 一節。 在 .envOPENAI_API_KEY將 OpenAI API 金鑰指派給 (您可以忽略與 OpenAI 相關的任何其他.env指示)。

  4. Azure OpenAI 模型可在特定區域中使用。 請流覽 Azure OpenAI 模型可用性 檔,以瞭解哪些區域支援本教學課程中使用的 gpt-4o 模型。

  5. 執行下列工作:

    • 選取您的 Azure 訂用帳戶。
    • 選取要使用的資源群組(視需要建立新的資源群組)。
    • 根據您稍早查看的文件,選取支援 gpt-4o 模型的區域。
    • 輸入資源名稱。 它必須是唯一值。
    • 選取 標準 S0 定價層。
  6. 選取 [下一步 ],直到您進入 [ 檢閱 + 提交 ] 畫面為止。 選取 ,創建

  7. 建立 Azure OpenAI 資源之後,流覽至該資源並選取 [資源管理 ] -->[金鑰] 和 [端點 ]。

  8. 找出 KEY 1端點 值。 您將在下一節中使用這兩個值,以便將它們複製到本機檔案。

    OpenAI 金鑰和端點

  9. 選取 [資源管理 ] --[>模型部署]。

  10. 選取 [ 管理部署] 按鈕以移至 Azure OpenAI Studio。

  11. 選取工具列中的 [部署模型 ] -->[部署基底模型 ]。

    Azure OpenAI 部署基底模型

  12. 從模型清單中選取 gpt-4o ,然後選取 [ 確認]。

    備註

    Azure OpenAI 支援 數種不同類型的模型。 每個模型都可以用來處理不同的案例。

  13. 下列對話框隨即顯示。 花點時間檢查所提供的預設值。

    Azure OpenAI 建立模型部署

  14. 每分鐘令牌速率限制 (thousands) 值變更為 100K。 這可讓您對模型提出更多要求,並避免在執行下列步驟時達到速率限制。

  15. 請選擇 部署

  16. 部署模型之後,請選取 [ 遊樂場 ] -->Chat

  17. [ 部署] 下拉式清單應該會顯示 gpt-4o 模型。

    Azure OpenAI Chat 遊樂場

  18. 請花點時間閱讀所提供的 系統訊息 文字。 這會告訴模型如何在使用者與其互動時運作。

  19. 在聊天區域中找出文本框,然後輸入 摘要什麼是 Generative AI 及其使用方式。 選取 Enter 將訊息傳送至模型,並讓它產生回應。

  20. 試驗其他提示和回應。 例如,輸入 提供關於法國首都的簡短歷程記錄 ,並注意產生的回應。

更新項目的 .env 檔案

  1. 返回 Visual Studio Code,並在專案的根目錄開啟 .env 檔案。

  2. 從 Azure OpenAI 資源複製 KEY 1 值,並將其指派給OPENAI_API_KEY位於 openai-acs-msgraph 資料夾根目錄中的 .env 檔案:

    OPENAI_API_KEY=<KEY_1_VALUE>
    
  3. 複製 *Endpoint 值,並將它指派給 OPENAI_ENDPOINT.env 檔案中。 /如果值存在,請從值的結尾移除字元。

    OPENAI_ENDPOINT=<ENDPOINT_VALUE>
    

    備註

    您會看到 和 OPENAI_MODEL 的值OPENAI_API_VERSION已在 .env 檔案中設定。 模型值會設定為 gpt-4o ,這符合您稍早在本練習中建立的模型部署名稱。 API 版本會設定為 Azure OpenAI 參考文件中定義的支援值。

  4. 儲存 .env 檔案。

啟動應用程式服務

是時候啟動您的應用程式服務,包括資料庫、API 伺服器和 Web 伺服器。

  1. 在下列步驟中,您將在 Visual Studio Code 中建立三個終端機視窗。

    Visual Studio Code 中的三個終端機視窗

  2. 以滑鼠右鍵按兩下 Visual Studio Code 檔案清單中的 .env 檔案,然後選取 [ 在整合式終端機中開啟]。 在繼續之前,請確定您的終端機位於專案的根目錄 - openai-acs-msgraph

  3. 從下列 其中一個選項 中選擇,以啟動 PostgreSQL 資料庫:

    • 如果您已安裝並執行 Docker Desktop ,請在終端機視窗中執行 docker-compose up ,然後按 Enter

    • 如果您已安裝 Podman-compose 並執行 Podman, 請在終端機視窗中執行 podman-compose up ,然後按 Enter

    • 若要使用 Docker Desktop、Podman、nerdctl 或您已安裝的另一個容器運行時間直接執行 PostgreSQL 容器,請在終端機視窗中執行下列命令:

      • Mac、Linux 或 Windows 子系統 Linux 版 (WSL):

        [docker | podman | nerdctl] run --name postgresDb -e POSTGRES_USER=web -e POSTGRES_PASSWORD=web-password -e POSTGRES_DB=CustomersDB -v $(pwd)/data:/var/lib/postgresql/data -p 5432:5432 postgres
        
      • 使用 PowerShell 的 Windows:

        [docker | podman] run --name postgresDb -e POSTGRES_USER=web -e POSTGRES_PASSWORD=web-password -e POSTGRES_DB=CustomersDB -v ${PWD}/data:/var/lib/postgresql/data -p 5432:5432 postgres
        
  4. 資料庫容器啟動時,請按 + Visual Studio Code 終端機工具列 中的圖示來建立第二個終端機視窗。

    終端機工具列中的 Visual Studio Code + 圖示。

  5. cd 進入 伺服器/typescript 資料夾,然後執行下列命令來安裝相依性並啟動 API 伺服器。

    • npm install
    • npm start
  6. 在 Visual Studio Code +中再次按圖示,以建立第三個終端機視窗。

  7. cd 進入 客戶端 資料夾,然後執行下列命令來安裝相依性並啟動網頁伺服器。

    • npm install
    • npm start
  8. 瀏覽器將會啟動,而且系統會帶您前往 http://localhost:4200

    已啟用 Azure OpenAI 的應用程式螢幕快照

後續步驟