使用自然语言生成页面

通过人工智能使用自然语言构建一个生成式页面。 生成式页面是一种 AI 驱动的体验,旨在简化、加速和改进模型驱动应用中的应用设计过程。 通过与应用程序智能体交互,您可以通过使用自然语言描述所需内容并指定要引用的 Microsoft Dataverse 表,在模型驱动应用程序中创建功能齐全的页面。 您甚至可以附上您希望页面外观的图像。

在你描述页面之后,系统会处理你的要求和规范,并智能地生成 React 代码,通过选择正确的组件和确定最佳布局来涵盖前端用户体验,以及相应的业务逻辑。 通过交互式对话体验,您可以实时完善页面设计,调整元素、布局和功能以完全符合您的愿景。

必备条件

  • Power Platform 环境必须位于美国地区。 此功能尚不可用于其他区域。

在模型驱动应用中创建生成式页面

  1. 登录到 Power Apps

  2. 打开一个模型驱动应用程序进行编辑。

  3. 在应用程序设计器中,选择添加页面>描述页面

    将打开整页生成式页面体验。

  4. 在文本框中,键入要创建的页面类型的说明。 描述应包括功能要求和可选的任何 UX 规范。 例如,您可以输入创建一个页面,以现代风格展示账户记录的卡片库。包含名称、顶部实体图像,以及网站、电子邮件和电话号码。通过使用账户表中的数据使卡片库可滚动

  5. 根据需要添加表和图片,选择添加数据>添加表。 您可以链接最多六个 Dataverse 表。 在截图中,已添加账户表。 将表添加到生成式页面

  6. 选择性上传图片以指导生成的页面 UI,选择添加数据>附加图片来上传图片以指导生成的页面 UI。 这可以是粗糙的餐巾纸草图或更高分辨率的图像。

  7. (可选)选择要用于生成页面的 AI 模型。 选择要用于生成页面的 AI 模型

  8. 完成页面描述后,选择生成页面

代理将开始一个多步骤生成过程,你可以实时观察:

  • 实时思维流:智能体首先阐述对提示的理解,列出需求、假设及执行方案。
  • 代码生成:接下来,它会根据计划为页面编写基础代码。
  • 转译:然后转译生成的代码,以确保兼容性和正确呈现。
  • 最终呈现:最后显示已完成的用户体验。

如果在此过程结束时未显示用户体验,可以通过选择 “预览 ”选项卡来查看它。

生成的页面用户体验

查看生成的代码、迭代和发布

生成页面后,有多个选项可以优化和完成该页面:

  1. 查看和编辑生成的代码 选择“ 代码 ”选项卡以查看应用代理生成的代码。 查看生成式页面代码并迭代设计

    可以通过两种方式优化输出:

    • 以迭代方式与应用代理聊天,以修复错误、调整布局或添加功能。
    • 通过选择“代码”选项卡上的 “编辑” 手动编辑代码。进行一些编辑后,可以选择“ 保存 ”以将更改提交为新迭代,也可以 选择“取消” 以放弃更改。
  2. 比较迭代 使用代理完成两次或更多次迭代后,可以在“代码”选项卡上选择“ 比较 ”以查看当前迭代和上一次迭代之间的代码差异。

    备注

    此功能目前仅在当前会话中的第二次迭代开始可用。

  3. 附加屏幕截图以供快速参考 在聊天体验中,单击“ 附加>添加”屏幕截图 ,以包含当前预览版的屏幕截图,与应用代理的下一次交互。 有助于调整页面的视觉效果。

  4. 保存和发布 在命令栏中,选择“ 保存 ”以避免在页面上丢失进度。
    如果对页面感到满意,请选择“ 保存并发布 ”以发布应用的所有挂起更改,包括任何生成页面。

重要提示

尽管代理尽最大努力尝试生成完整且生产可用的代码,包括对可访问性和安全最佳实践的考虑,但您最终负有验证这些代码的责任。 确保生成的代码满足组织的标准和合规性要求。

将生成式页面添加到解决方案

生成页面具有对解决方案的感知能力,并可以通过应用添加到解决方案中,以便在不同环境之间方便地移动。 若要将生成页添加到解决方案,请执行以下步骤:

重要提示

如果在预览阶段创建了生成页面,则必须在模型应用设计器中加载生成页,以启动一次性迁移到新的解决方案感知数据模型。 当页面在设计器中加载时,你将看到“升级页面”进度消息。 在迁移完成之前不要关闭窗口。

  1. 将包含生成式页面的应用添加到解决方案
    • 在 Power Apps 中, 选择左侧导航窗格中的解决方案,然后打开所需的解决方案。
    • 选择 “添加现有的 > 应用 > 模型驱动应用”。
    • 选择包含生成页面的应用。
  2. 将该解决方案作为托管或非托管解决方案导出
    • 确保解决方案中包含应用站点地图。 若未存在,应在依赖性检查期间请求创建。
    • 生成式页面(显示为 UX 智能体项目行)也将根据其对站点地图的依赖项进行请求。

备注

如果在依赖项检查期间未请求生成页,请检查这些项目:

  • 仅在预览期间创建的页面已迁移时才会显示。 在设计器中加载它们以触发迁移。
  • 如果解决方案中包含站点地图并且已迁移生成页面,请尝试对站点地图进行轻微更改(例如重新排序或重命名页面),重新发布应用,然后再次尝试导出。

导出后,可以将应用和生成页面导入到另一个环境中。 在目标环境中的设计器中打开时,只有第一个提示和已发布的代码才可用。 完整的代理会话不会随页面一起传输。

限制

以下是生成式页面的当前限制:

  • 您的页面只能连接到 Dataverse 表(单个页面最多 6 张)。 您可以对这些表执行创建、读取、更新和删除(CRUD)操作。 不能使用其他数据源。
  • 提示符最多可以包含 50,000 个字符。
  • 仅支持美国英语。
  • 不支持协作功能。 确保一次只有一个制作者在处理生成式页面,以避免意外冲突。
  • 仅支持以下数据类型:
    • 单选
    • Currency
    • Customer
    • 日期和时间
    • 仅限日期
    • 十进制数
    • 浮点数
    • 图像
    • 查找
    • 多行文本
    • 执行状态
    • 状态描述
    • 文本
    • 整数
    • 是/否
    • 唯一标识符

常见问题解答

是否可以在计划设计器中开始设计应用,然后使用生成式页面?

是的,虽然目前计划和生成页面之间没有直接集成,但你可以使用计划来定义表和应用,然后切换到应用设计器以创建任何所需的生成页面。

使用生成式页面是否需要任何额外的费用或积分?

否,生成式页面(和计划)的制作者体验不需要任何额外的 AI 或消息积分。

什么样的图像最适合指导 UI 生成?

这取决于你的目标。 如果你确切地知道希望最终页面的外观、清晰和详细的草图或线框(无论是手绘还是数字)最有效。 如果你只有一个大致的概念,并希望助手完善详细信息,那么快速的白板草图,甚至餐巾纸上的绘图也可以发挥很好的作用。

我可以将生成式页面与画布应用或其他应用类型一起使用吗?

否,生成式页面目前仅在模型驱动应用中受支持。

有没有办法跨环境重用或克隆生成式页面?

是的,生成页面是具有解决方案感知能力的元素,可以跨环境移动。 只有最后发布的代码版本和第一个提示与解决方案一起维护;完整修订历史记录保留在原始环境中。

我可以手动编辑生成的代码吗?

是的。 可以通过选择“代码”选项卡上的“编辑”手动编辑生成的代码。更改将保存为新的迭代。 如果选择不保留编辑,请选择 “取消 ”以取消编辑。

生成页生成的代码是否保证可用于生产环境,并符合我组织的标准?

号码 尽管该智能体会尽力生成符合无障碍及安全最佳实践的高质量生产就绪代码,但您仍需自行验证输出结果。 请始终查看生成的代码,以确保它符合组织的标准、策略和合规性要求。

如何提供有关该功能的反馈?

反馈生成式页面的最佳方式是使用聊天体验中每次迭代后提供的“点赞/点踩”按钮。 我们强烈建议您在分享相关内容示例和额外日志文件选项中选择,以便我们调试或尝试重现您在使用该功能时遇到的任何问题。

如果我的环境中未启用生成式页面,该怎么办?

确认您的环境位于美国区域。