Android Studio 中的 Gemini 现已支持多模态图像附件功能

作者 / Android Studio 开发者产品经理 Paris Hsu

在开发生命周期的每个阶段，Android Studio 中的 Gemini 都已成为您的 AI 助手，助您更轻松地构建高质量的应用。我们很高兴地与您分享一项重大升级：Android Studio 中的 Gemini 现已支持多模态输入，您可在提示中直接添加图像！这为团队协作和界面开发工作流程解锁了更多新的可能性。

• Android Studio 中的 Gemini

  https://developer.android.com/gemini-in-android

您可以下载最新的 Android Studio Canary 版来体验这项新功能。我们列举了一些可以尝试的用例，目前仍在努力将此功能引入未来的稳定版本。在此过程中，我们十分期待了解您的想法与反馈。欢迎您观看视频了解更多内容：

• 下载最新的 Android Studio Canary 版

  https://developer.android.com/studio/preview

图像附件 - 交互新维度

我们在 2024 Google I/O 大会上首次预览了 Gemini 的多模态功能。借助这项技术，Android Studio 中的 Gemini 能够理解简单的线框图，并将其转换为可运行的 Jetpack Compose 代码。

• 2024 Google I/O 大会

  https://www.youtube.com/watch?v=ddcZnW1HKUY&t=1791s&ab_channel=GoogleforDevelopers

现在，您可以在 Gemini 聊天窗口中找到图像附件图标。只需将 JPEG 或 PNG 文件作为附件添加到提示中，即可静待 Gemini 理解并响应视觉信息。我们观察到，具有强烈色彩对比度的图像效果最佳。

1.1 聊天窗口中新增 "附加图像文件" 图标

1.2 聊天中的多模态响应示例

我们建议您尝试各种提示和图像。您可从以下这些引人注目的用例入手：

• 快速界面原型设计和迭代：将应用界面的简单线框图或高保真原型转换为可运行的代码。

• 图表说明和文档：让 Gemini 解释复杂架构或数据流程图的组成部分和关系，从而获得更深入的理解。

• 界面问题排查：捕获界面错误屏幕截图，并向 Gemini 寻求解决方案。

快速界面原型设计和迭代

Gemini 的多模态支持可让您将视觉设计转换为可运行的界面代码。您只需上传图像并使用清晰的提示即可。无论您是提供自己制作的草图还是设计师的模型图，这一功能都可以发挥作用。

以下是一个示例提示："请根据提供的图像编写 Android Jetpack Compose 代码，生成一个尽可能接近该图像的界面。请确保包括导入语句、使用 Material3 并添加代码注释。" 然后，您可以根据需要添加与图像相关的特定或附加说明。

2. 在 Android Studio 中使用 Gemini 从高保真原型生成 Compose 代码的示例 (代码输出)

• 代码输出

  https://gist.github.com/parishsu/0348bfc8b2e931feba1d0d0ee20beb25

对于更复杂的界面，请优化您的提示以明确所需的特定功能。例如，在转换计算器原型时，添加 "使交互和计算按预期工作" 的提示，会生成一个功能完备的计算器：

3. 在 Android Studio 中使用 Gemini 从线框图生成 Compose 代码的示例 (代码输出)

• 代码输出

  https://gist.github.com/parishsu/f4f0ceb1c9a80eadba58adc34361f71c

请注意：此功能提供的是一个初始的设计框架。这是一个很好的 "初稿"，需要您进行编辑和调整。常见的优化包括确保导入正确的可绘制资源和图标。您可以将生成的代码理解为高效的起点，从而加快您的界面开发工作流程。

图表说明和文档

借助 Gemini 的多模态能力，您还可以尝试上传图表图像，并要求提供解释或生成文档。

提示示例：上传 Now in Android 架构图，并输入 "解释此图中的组件和数据流" 或 "撰写有关此图的文档"。

4. 要求 Gemini 根据 NowInAndroid 架构图生成文档的示例

• NowInAndroid 架构图

  https://github.com/android/nowinandroid/blob/main/docs/ArchitectureLearningJourney.md

界面问题排查

利用 Gemini 的视觉分析能力来快速识别和解决 bug。上传有问题的界面屏幕截图，Gemini 将分析图像并提供潜在的解决方案。您还可以添加相关的代码片段，以获得更精确的帮助。

在下面的示例中，我们使用了 Compose 界面检查，发现按钮在平板电脑屏幕上拉伸得太宽，因此我们截取了屏幕截图并要求 Gemini 提供解决方案——它能够利用窗口大小类别 (Window Size Classes) 来提供正确的解决方案。

5. 使用 "图像附件" 功能修复界面错误的示例 (代码输出)

• Compose 界面检查

  https://developer.android.com/develop/ui/compose/tooling/debug#compose_ui_check

• 窗口大小类别

  https://developer.android.com/develop/ui/compose/layouts/adaptive/use-window-size-classes

• 代码输出

  https://gist.github.com/parishsu/bc86038b6ffd2025dcca49088859ecb7

即刻体验 Android Studio

欢迎您即刻体验最新的 Android Studio Canary 版，尝试全新多模态功能！

• 最新的 Android Studio Canary 版

  https://developer.android.com/studio/preview

Google 一如既往地致力于负责任地使用 AI。未经您的同意，Android Studio 不会将任何源代码发送至服务器。您可以在 Android Studio 中 Gemini 的隐私承诺中了解更多相关信息。

• 负责任地使用 AI

  https://ai.google/responsibility/principles/

• 隐私承诺

  https://developer.android.com/studio/preview/gemini/data-and-privacy

我们诚邀您提供反馈，以便我们了解您喜欢的内容以及希望体验的功能。如果您发现错误，欢迎您向我们报告问题，并查看已知问题。

• 报告问题

  https://developer.android.com/studio/report-bugs?gclid=Cj0KCQiAyracBhDoARIsACGFcS5_ZKVzK7iq7z71JY3wNmHy_6rRsbo8GMA5QFicCMWn_lWg4xeq_GsaAm3oEALw_wcB&gclsrc=aw.ds

• 已知问题

  https://developer.android.com/studio/known-issues

谷歌开发者特别招募活动进行中

诚邀热爱技术的你加入

通过多种形式 (文章/视频/coding 等) 创作与 Google 技术相关的讲解分享、实践案例或活动感受等内容，以及分享您应用 AI 技术的故事经历与成果。我们将为您提供平台和资源，助力您在分享中提升技能。更有惊喜权益等您领取，快来报名参与吧！