使用自然語言產生頁面

使用自然語言來建立一個由 AI 創建的 生成式頁面 。 生成頁面是一種 AI 驅動的體驗，旨在簡化、加速和改進模型導向應用程式中的應用程式設計流程。 透過與應用程式代理互動，你可以在模型驅動應用程式中建立功能完整的頁面，透過自然語言描述所需內容，並指定要參考哪些 Microsoft Dataverse 表格、Power Platform 連接器（預覽）或 Dataverse 自訂 API（預覽）。 你甚至可以附上你想要頁面外觀的圖片。

在您描述頁面後，系統會處理您的需求和規範，並智慧地產生 React 程式碼，該程式碼透過選取正確的元件和確定最佳版面配置來涵蓋前端使用者體驗以及相應的商務規則。 透過互動式對話體驗，您可以即時最佳化頁面設計，調整元素、版面配置和功能，以完美配合您的願景。

選擇如何建立你的生成頁面

生成式頁面支援兩種創作體驗。 兩者產出的頁面類型相同。 差別在於你在哪裡創作，以及哪個 AI 模型驅動這個生成。

使用 AI 程式碼生成工具，如 GitHub Copilot CLI，從本地開發環境中建立並編輯生成頁面。 此方法之所以被推薦，是因為以下優點：

  • 存取最新的 AI 模型。 因為 AI 是由你安裝的工具提供，你隨時都能使用最新且最強大的 Frontier 模型。
  • 全球公有雲上可取得 ，不限於特定地區。
  • 程式碼優先的工作流程。 直接在您慣用的 IDE 中使用 TypeScript 和 React，並可對產生的程式碼使用 npm install 與 IntelliSense 支援。
  • 在單次執行中建置更多內容。 一個自然語言請求可以產生多個頁面，建立支援的 Dataverse 表格，並將所有資料放入正確的應用程式與解決方案中。

更多資訊： 使用 AI 程式碼生成工具建立與編輯生成式頁面

在 Power Apps 中進行瀏覽器內製作

make.powerapps.com 直接在瀏覽器中使用對話式介面建立生成式頁面。 這種體驗最適合喜歡留在 Power Apps 設計器、不需要本地開發環境的創客。 它在美國、英國、澳洲和新加坡均有提供。

本文其餘部分將描述瀏覽器內的使用體驗。

必要條件

這很重要

連接器支援、自訂 API 支援，以及用於生成頁面的 Application Insights 遙測是預覽功能。 預覽功能不供生產時使用，而且功能可能受限。 自訂 API 會在登入使用者的情境中執行，並受 Dataverse 安全規範。

在模型導向應用程式中建立生成頁面

  1. 登入Power Apps。

  2. 開啟模型導向應用程式進行編輯。

  3. 在應用程式設計器中，選擇 新增頁面>生成頁面。

    將開啟一個對話。 要建立新頁面，請選擇 「描述頁面」。 開啟全頁生成頁面體驗。

    備註

    同一個對話框也會列出你環境中現有的生成頁面，你可以將它們加入這個應用程式。 預設情況下，列表會篩選為 已發佈 頁面;如果你找不到想要的頁面，請將篩選器切換到 「全部 」。

  4. 在文字框中輸入你想建立的頁面類型的描述。 包含功能需求，並可選擇性地提供任何使用者體驗規範。 例如，您可以輸入建立頁面，以卡片庫的形式展示帳戶記錄，並採用現代風格的外觀和風格。頁面頂端包含名稱、實體影像，以及網站、電子郵件和電話號碼。使用帳戶表中的資料，使該卡片庫可捲動。 如果你希望頁面支援多種語言，請依照 「生成頁面在地化」的指引操作。

    Tip

    不知道該從哪裡開始？ 智慧應用程式目錄內含提示目錄，提供適用於常見頁面模式（例如資源庫、Kanban 看板、儀表板等）的預先建置提示範本和參考圖片，可供您作為起點使用。

  5. 適當地新增資料來源、自訂 API 及圖片：

    • 要使用 Dataverse 資料，請選擇 新增資料>表。 您最多可以連結六個 Dataverse 資料表。 以下截圖中，帳戶資料表已被新增。
    • 若要使用Power Platform 連接器（預覽）的資料，請選擇 新增資料>連接器，選擇已準備好的連線參考，並選擇頁面應使用的連接器資料。 在你的提示中，描述你希望頁面如何使用所選資料。
    • 若要執行以 Dataverse 外掛實現的伺服器端商業邏輯，請選擇 「新增>自訂 API （預覽版），然後選擇你想讓頁面呼叫的已準備好的自訂 API。 在你的提示中，描述頁面何時應該呼叫自訂 API、應該提供哪些值，以及如何使用回應。 例如， 新增一個批准按鈕。選擇後，呼叫目前訂單的 ApproveOrder 自訂 API，並傳達審核者的意見。然後顯示退貨狀態。在生成頁面新增一個表格

  6. 可選擇新增 資料>並附上圖片，上傳一張或多張圖片來引導你產生頁面的使用者介面。 這可以是餐巾紙上的草圖或高解析度影像。 圖片可以代表你想建立的整個頁面的結構或版面，也可以是你想模仿的特定區段或元件的視覺化。

    備註

    如果你想讓產生的頁面顯示特定圖片，而不是將圖片附加到提示上，你可以（1）將圖片包含在有參考的資料表中，讓代理從中取得圖片，（2）公開架設圖片並提供代理 URL，或（3）將圖片加入為網頁資源，並提供代理該網頁資源的網址。

  7. 可選擇啟用或停用 「包含圖片 （預覽）」工具，讓代理程式能利用精心策劃且安全的 25,000 張庫存圖片庫中的圖片，支援預設/佔位圖片、裝飾性背景、靜態內容區塊，以及更豐富的空白或錯誤狀態等使用場景。 包含圖片工具，從庫存圖片庫中新增圖片

  8. 選擇您要用於生成頁面的 AI 模型。 選擇您想要用於生成頁面的 AI 模型

    備註

    GPT-4.1 目前是 Power Apps Maker 體驗中唯一可用於生成頁面的模型。

    Tip

    想使用最新的 AI 模型嗎？ 你可以透過使用 AI 程式碼生成工具建立和編輯生成頁面來達成這個目標，這些工具讓你能接觸到較新的 Frontier 模型。

  9. 完成頁面描述後，選取生成頁面。

代理程式會開始一個你可以即時觀察的多步驟建置流程：

  • 思考流：代理人首先說明對你的提示的解讀、列出需求、假設及執行計畫。
  • 程式碼產生：接下來，它根據計劃為您的頁面編寫底層程式碼。
  • 轉譯：然後轉譯產生的程式碼以確保相容性和正確的渲染。
  • 最終渲染：最後，展示完成的使用者體驗。

如果在此程式結束時未顯示使用者體驗，您可以選取 [預覽] 索引標籤來檢視它。

產生的頁面使用者體驗

查看生成的程式碼、迭代並發佈

產生頁面後，您有數個選項來精簡和完成頁面：

  1. 檢視和編輯產生的程式碼 選取 [程式碼 ] 索引標籤，以檢視應用程式代理程式所產生的程式碼。 查看生成頁面程式碼並迭代設計

    您可以透過兩種方式精簡輸出：

    • 反覆與應用程式代理程式聊天，以修正錯誤、調整版面配置或新增功能。
    • 選取 [程式碼] 索引標籤上的 [編輯] ，以手動編輯程式碼。進行一些編輯之後，您可以選取 [儲存] 以將變更認可為新的反覆專案，或選取 [取消] 以捨棄變更。

    了解用於資料操作的 dataApi 物件方法

  2. 比較反覆專案 使用客服專員完成兩個或多個反覆專案後，您可以選取 [程式碼] 索引標籤上的 [比較] ，以檢視目前和上一個反覆專案之間的程式碼差異。

    備註

    此功能目前僅在當前工作階段中的第二次迭代開始提供使用。

  3. 附上截圖以便快速查閱在聊天體驗中，選擇附加>「新增截圖」，以附上你下一次與應用程式客服互動時預覽的截圖。 截圖有助於調整頁面的視覺效果。 你也可以附加其他圖片，幫助細膩整頁或頁面特定部分的視覺效果。

  4. 檢查無障礙問題（新增） 每次程式碼產生後，螢幕底部的 無障礙助理 會掃描生成的程式碼，並評估其無障礙性。 你可以直接在螢幕上看到高階狀態更新，並可選擇在面板中開啟詳細結果。 選擇 自動修正 ，將任何違規事件直接傳給代理，讓它嘗試自動解決。

  5. 儲存並發佈 在命令列中，選取 儲存以避免 遺失頁面上的進度。 當你對頁面感到滿意後，選擇 「儲存並發佈 」以發布所有待處理的應用程式變更，包括任何生成頁面。

這很重要

雖然智能代理會盡最大努力產生完整的可用於生產環境的程式碼，包括無障礙性和安全性最佳實務的考量，但您最終有責任驗證程式碼。 確保產生的程式碼符合貴組織的標準與合規要求。

生成式頁面常見的任務

本節涵蓋在模型驅動應用程式中使用生成式頁面時，常見的情境與任務。

以自訂 API 執行伺服器端商業邏輯（預覽版）

當你的頁面需要明確執行伺服器端的商業邏輯時，例如批准訂單、重新計算價格或驗證交易，請使用 Dataverse 自訂 API。 自訂 API 通常會使用 Dataverse 外掛來實作此操作。

此功能不同於在 Dataverse 資料列建立、更新或刪除時自動執行的外掛程式。 這些外掛在生成頁面執行相應資料操作時已經執行，不需要新增到頁面上。 當頁面需要在特定時間呼叫命名操作時，新增自訂 API。

若要使用自訂 API：

  1. 在生成式頁面設計器中，選擇 新增>自訂 API。

  2. 從目前環境中選擇自訂 API。 生成式頁面支援全域以及繫結至資料表的動作與函式。

  3. 在提示中，說明應該觸發操作的是什麼、要傳遞哪些輸入值，以及頁面應該如何使用回應。 例如：

    Add an Approve button to the order details. When the user selects it, call `ApproveOrder` for the current order, pass the text from the reviewer comment field, and display the returned order status.

當生成頁面嵌入模型驅動的應用程式表單時，你可以要求代理使用目前的記錄作為表格綁定自訂 API 的輸入。

關於建立自訂 API 並使用外掛實作邏輯的資訊，請到 「建立並使用自訂 API」。

使用 Application Insights（預覽）監控生成頁面

當你在 Power Platform 管理中心設定 Application Insights 為環境匯出資料時，Power Apps 會自動匯出已發佈生成頁面的遙測資料。 你不需要加入遙測程式碼、安裝 Application Insights JavaScript SDK，或將連接字串提供給頁面。

以下可取得的遙測數據：

活動 應用洞察表 詳細資料
頁面載入 pageViews 記錄已完成的生成頁面載入，包含頁面 ID、頁面名稱、應用程式、主機類型、載入時間及導航來源。
未處理錯誤 exceptions 記錄歸因於生成式頁面的未處理頁面轉譯錯誤及未處理的 Promise 拒絕。
資料 API 操作 dependencies 記錄支援 dataApi 操作的持續時間與結果，包括建立、更新、刪除、檢索及查詢操作。
導航 pageViews 記錄從生成式頁面發起的導覽，包括來源頁面和目標頁面的資訊。

Application Insights 的生成式頁面遙測目前為預覽功能。 在功能推出期間，可用性可能會因環境而異。

關於設定匯出的資訊，請參閱 「匯出資料至應用程式洞察」。 欲了解模型驅動應用程式遙測如何呈現與查詢，請參閱模型 驅動應用程式的遙測事件。

建立一個頁面來接受輸入參數

生成式頁面可以接受輸入參數 recordId、 entityName，並 data 允許它們在導航到時接收上下文資料。 要設定頁面接受參數，請在提示中描述該頁面應該接受什麼參數，代理程式會自動接線初始化程式碼。 例如：

Set up the page to accept an account recordId. When the page loads, use these to fetch and display the corresponding account details.

Configure this page to accept a data parameter containing a custom filter object. Use it to filter the displayed records when the page loads.

將生成頁面嵌入表單中

你可以在模型驅動的應用程式表單中新增生成頁面，使其出現在某個區塊或分頁中。首先，建立並發佈一個為表單設計的生成頁面，並 設定它接受 recordId 輸入參數。

要將頁面加入表單：

  1. 在表單設計器中開啟表單。
  2. 在左側窗格，選擇 元件，然後展開 顯示。
  3. 選擇 生成頁面。
  4. 選擇你想嵌入的生成頁面。
  5. 可選擇性地，提供頁面接受的任何額外靜態輸入的值。
  6. 儲存後發佈表單。

當使用者開啟記錄時，表單會自動將目前的記錄 ID 作為輸入傳遞給生成頁面 recordId 。 你不需要為 recordId 設定靜態值。

前往生成式頁面

你可以用 Xrm.Navigation.navigateTo程式方式導航到生成頁面，如果目標頁面設定為接收輸入參數，則會傳遞輸入參數。 如需範例與完整 API 細節，請參閱 「使用用戶端 API 導航至與離開生成頁面」。

在頁面中使用特定的圖片

請使用這三種方法之一，在生成頁面中使用特定圖片。

將影像儲存在 Dataverse 表格中

將圖片包含在你的生成頁面參考的 Dataverse 表格中，並指示代理人從那裡取回圖片。 在建立頁面時，告訴經紀人如何從你的表格中取得正確的圖片。

Build a product catalog page showing products from the Product table. Display the product image from the ProductImage column, along with the name, description, and price.

在外部託管影像並透過 URL 參考

將您的影像架設在外部伺服器或內容傳遞網路（CDN）上，並提供代理人員圖片的網址：

Display the company logo using this URL: https://example.com/images/logo.png at the top of the page.

將圖片加入網路資源

將影像當做解決方案中的 Web 資源上傳，並透過其 Web 資源 URL 來參考該影像：

  1. 在你的解決方案中將圖片作為網頁資源加入。
  2. 請注意網頁資源名稱（例如， new_/images/banner.png）。
  3. 請在提示詞或程式碼中引用，使用此處描述的網路資源網址格式：
Use the banner image from web resource new_/images/banner.png as the page header background.

將生成式頁面新增至解決方案

生成式頁面具備解決方案識別能力，可以透過應用程式新增至解決方案，以便在不同環境之間進行切換。 若要將生成式頁面新增至解決方案，請執行下列動作：

這很重要

如果您的生成式頁面是在預覽階段期間建立的，您必須在模型應用程式設計工具中載入生成式頁面，以啟動一次性移轉至新的解決方案感知資料模型。 當頁面載入設計器時，你會看到「正在升級你的頁面」的進度訊息。 遷移完成前不要關閉視窗。

  1. 將包含生成式頁面的應用程式加入解決方案
    • 在 Power Apps 中，選取左側導覽窗格中的 解決方案 ，然後開啟所需的解決方案。
    • 選取 [新增現有 > 的應用程式 > 模型導向應用程式]。
    • 選取包含生成式頁面的應用程式。
  2. 匯出解決方案 （以受控或不受控的形式）
    • 請確定應用程式網站地圖已包含在解決方案中。 如果沒有，則應在相依性檢查期間要求。
    • 系統也會根據生成式頁面 (顯示為 UX Agent 專案資料列) 對網站地圖的相依性要求該頁面。

備註

如果在相依性檢查期間未要求產生式頁面，請檢查下列項目：

  • 在預覽期間建立的頁面只有在已遷移後才會顯示。 在設計工具中載入它們以觸發移轉。
  • 如果解決方案包含網站地圖，且你的生成頁面已被遷移，試著對網站地圖做些小改動，例如重新排序或命名頁面、重新發布應用程式，然後再嘗試匯出。

匯出後，您可以將應用程式和生成式頁面匯入到另一個環境。 在目標環境中以設計器開啟時，僅能看到第一個提示詞和已發佈的程式碼。 完整的經紀人對話不會隨頁面轉移。

本地化生成式頁面

要將生成頁面本地化，請確保你的提示涵蓋以下項目：

  • 請指定你的語言。 告訴客服你希望頁面支援哪些語言，最好是語言名稱和 LCID。
  • 請求翻譯文字。 請客服為頁面上所有使用者可見的標籤和文字建立翻譯字典，針對每種語言。
  • 啟用 RTL 支援。 如果你的環境包含阿拉伯語或希伯來語等 RTL 語言，請客服實作適當的右至左版面配置支援。
  • 使用區域格式。 請客服人員依據 Dataverse 使用者設定中的偏好格式化日期、數字和貨幣，而非硬編碼格式或區域代碼。

如需詳細實作指引與程式碼範本，請參考 Power Platform Skills 倉庫中的 在地化說明 。

備註

生成頁面的網站地圖條目預設不會本地化。 網站地圖在地化則需在應用程式設計器中獨立處理。

局限性

這些是生成頁面的目前限制：

  • 你可以將最多六個 Dataverse 資料表連結到單一頁面。
  • 支援的資料來源包括 Dataverse 表格及（預覽版）Power Platform 連接器。
  • 預覽版支援自訂 API 動作與函式。 使用 EntityCollection 綁定類型或 Entity 參數的自訂 API 不被支援。
  • 您的提示最多可以有 50,000 個字元。
  • 當你透過 Power Apps （make.powerapps.com） 建立生成式頁面時，只有美式英語是支援的提示語言。
  • 不支援協作。 確保每次只有一個製作者在生成頁面上工作，以避免意外衝突。
  • 僅支援以下資料類型：
    • 選擇
    • 貨幣
    • 客戶
    • 日期與時間
    • 只有日期
    • 十進位數
    • 浮點數
    • 影像
    • 查詢
    • 多行文字
    • 狀態
    • 狀態原因
    • 文字
    • 整數
    • 是/否
    • 唯一識別碼

常見問題

我可以在 Plan Designer 中開始設計我的應用程式，然後使用生成頁面嗎？

是的，雖然目前計畫與生成頁面之間沒有直接整合，但你可以用計畫來定義表格和應用程式，然後切換到模型驅動的應用程式設計器來建立任何想要的生成頁面。

使用產生頁面是否需要額外的費用或點數？

否，生成式頁面 (與計畫) 的建立者體驗不需要額外的 AI 或訊息點數。

什麼樣的影像最適合指導 UI 生成？

這取決於你的目標。 如果您確切地知道最終頁面的外觀，清晰詳細的草圖或線框圖（無論是手繪還是數位）是最有效的。 若您僅有一般概念並希望 Agent 補充細節，快速白板草圖甚至餐巾紙上的手繪圖都能發揮良好效果。

我可以將生成頁面與畫布應用程式或其他類型的應用程式一起使用嗎？

不，生成頁面目前僅受模型導向應用程式支援。

有沒有辦法跨環境重複使用或複製生成頁面？

是的，生成式頁面是具解決方案感知的元素，可以跨環境移動。 只有最後發佈的程式碼版本和第一個提示會與解決方案一起維護;完整的修訂歷程會保留在原始環境中。

我可以手動編輯產生的程式碼嗎？

是。 您可以選取 [程式碼] 索引標籤上的 [編輯] 來手動編輯產生的程式碼。您的變更會儲存為新的疊代。 如果您選擇不保留編輯，請選取 [取消 ] 以取消編輯。

生成頁面所產生的程式碼是否能確保適用於生產環境，並符合我組織的標準？

編號 雖然代理會盡全力產生高品質且適用於生產環境的程式碼，同時考慮無障礙性和安全性的最佳實務，但仍需由您負責驗證輸出結果。 務必檢視產生的程式碼，確保其符合貴組織的標準、政策及合規要求。

我如何對該功能提供意見反應？

對生成頁面提供意見反應的最佳方式是使用每次迭代後可用的聊天體驗中的讚/反對按鈕。 我們還強烈建議您在共用相關內容範例和其他記錄檔案上選取是，以便我們可以偵錯或嘗試重新建立您在使用該功能時遇到的任何問題。

如果在我的環境中沒有看到啟用的生成頁面，該怎麼辦？

請確認您的環境位於 Power Apps Maker 工作室體驗所支援的區域之一：美國、英國、澳洲或新加坡。 即使你的地區未被列出，你仍可利用全球公共雲端的 AI 程式碼生成工具創建和編輯生成頁面。 更多資訊： 使用 AI 程式碼生成工具建立與編輯生成式頁面

  • Last updated on