共用方式為


使用自然語言產生頁面

使用自然語言建立使用 AI 建立的生成頁面。 生成頁面是一種 AI 驅動的體驗,旨在簡化、加速和改進模型導向應用程式中的應用程式設計流程。 透過與應用程式 Agent 互動,您可以用自然語言描述需求並指定要參照的 Microsoft Dataverse 資料表,在模型導向應用程式中建立完整可用的頁面。 您甚至可以附加您希望頁面呈現的影像。

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

先決條件

  • Power Platform 環境必須位於美國區域。 此功能在其他地區尚不可用。

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

  1. 登入 Power Apps

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

  3. 在應用程式設計工具中,選取新增頁面>描述頁面

    開啟全頁生成頁面體驗。

  4. 在文字方塊中,鍵入您想要建立的頁面類型的描述。 描述應包括功能要求以及可選的任何 UX 規格。 例如,您可以輸入建立頁面,以卡片庫的形式展示帳戶記錄,並採用現代風格的外觀和風格。頁面頂端包含名稱、實體影像,以及網站、電子郵件和電話號碼。使用帳戶表中的資料,使該卡片庫可捲動

  5. 選取新增資料>新增資料表,以加入合適的資料表與影像。 您最多可以連結六個 Dataverse 資料表。 在螢幕擷取畫面中,新增了帳戶表。 在生成頁面中新增資料表

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

    Note

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

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

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

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

代理會開始一個多步驟的建置過程,你可以即時觀察:

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

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

產生的頁面使用者體驗

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

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

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

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

    • 反覆與應用程式代理程式聊天,以修正錯誤、調整版面配置或新增功能。
    • 選取 [程式碼] 索引標籤上的 [編輯] ,以手動編輯程式碼。進行一些編輯之後,您可以選取 [儲存] 以將變更認可為新的反覆專案,或選取 [取消] 以捨棄變更。
  2. 比較反覆專案 使用客服專員完成兩個或多個反覆專案後,您可以選取 [程式碼] 索引標籤上的 [比較] ,以檢視目前和上一個反覆專案之間的程式碼差異。

    Note

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

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

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

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

重要

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

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

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

重要

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

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

Note

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

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

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

限制

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

  • 您的頁面僅能連接至 Dataverse 資料表 (單一頁面最多可達六個)。 不能使用其他資料來源。
  • 您的提示最多可以有 50,000 個字元。
  • 僅支援美式英語。
  • 不支援協作。 確保每次只有一個製作者在生成頁面上工作,以避免意外衝突。
  • 僅支援以下資料類型:
    • 選擇
    • Currency
    • Customer
    • 日期和時間
    • 只有日期
    • 十進位數字
    • 浮點數
    • 影像
    • 查閱
    • 多行文字
    • 執行狀態
    • 狀態原因
    • 文字
    • 整數
    • 是/否
    • 唯一識別碼

常見問題

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

確認您的環境位於美國區域。