探索Google AI Studio的无限可能:从设计到代码的全新体验

科技   2024-07-09 15:37   浙江  

探索Google AI Studio的无限可能:从设计到代码的全新体验

在2024年的Google I/O开发者大会上,Google展示了一项令人兴奋的实时演示:Gemini能够将应用程序UI的线框草图转换为Jetpack Compose代码,直接在Android Studio中进行。这一功能基于Gemini的核心能力,虽然我们仍在不断优化这个功能以确保在Android Studio中的优秀体验,但你今天就可以在Google AI Studio中尝试这些基础功能。本文将深入探讨以下几个方面:

  • • 将设计转换为UI代码:将简单的应用UI图片转换为可运行的代码。

  • • 使用Gemini进行智能UI修复:获得如何改进或修复UI的建议。

  • • 在应用中集成Gemini提示:简化复杂任务并优化用户体验。

实验一:将设计转换为UI代码

首先,如何将设计转换为Compose UI代码?打开Google AI Studio的聊天提示部分,上传应用UI屏幕的图片(如下例所示),并输入以下提示:

"Act as an Android app developer. For the image provided, use Jetpack Compose to build the screen so that the Compose Preview is as close to this image as possible. Also make sure to include imports and use Material3."

然后,点击“运行”来执行查询并查看生成的代码。你可以将生成的输出直接复制到Android Studio中的新文件中。

示例图片:应用程序详细信息屏幕的设计草图示例代码生成过程演示:

在这个实验中,Gemini能够从图片中推断出详细信息并生成相应的代码元素。例如,原始图片中的植物详细信息屏幕有一个“护理说明”部分,带有一个可展开的图标——Gemini生成的代码中包括一个专门用于植物护理说明的可展开卡片,展示了其上下文理解和代码生成能力。

实验二:使用Gemini进行智能UI修复

受“Circle to Search”实验的启发,另一个有趣的实验是可以在屏幕截图上圈出问题区域,以及相关的Compose代码上下文,并让Gemini建议合适的代码修复方案。

你可以在Google AI Studio中探索这个概念:

  1. 1. 上传Compose代码和截图:上传一个UI屏幕的Compose代码文件以及其Compose预览的截图,并在截图中用红色轮廓标出问题区域——例如,底部导航栏中的项目应均匀分布。

  1. 1. 提示Gemini:打开聊天提示部分并输入:

    "Given this code file describing a UI screen and the image of its Compose Preview, please fix the part within the red outline so that the items are evenly distributed."
  1. 1. Gemini的解决方案:Gemini返回了成功解决UI问题的代码。

通过这个实验,你可以看到Gemini不仅能够理解UI设计,还能够提出智能的修复建议,从而显著提升开发效率。

实验三:在应用中集成Gemini提示

Gemini可以简化自定义应用功能的实验和开发。想象一下,你希望构建一个功能,基于用户手头的食材图片提供食谱建议。过去,这涉及复杂的任务,比如托管图像识别库、训练自己的食材到食谱模型,以及管理支持这一切的基础设施。

现在,通过Gemini,你可以通过一个简单的定制提示来实现这一点。让我们逐步演示如何将这个“Cook Helper”功能添加到你的Android应用中:

  1. 1. 探索Gemini提示库:发现示例提示或创建自己的提示。我们将使用“Cook Helper”提示。

  2. 2. 在Google AI Studio中进行实验:用不同的图片、设置和模型测试提示,确保模型响应如预期,并且提示与你的目标一致。

  1. 1. 生成集成代码:一旦你对提示的表现满意,点击“获取代码”,选择“Android (Kotlin)”。复制生成的代码片段。

  1. 1. 将Gemini API集成到Android Studio中:打开你的Android Studio项目。你可以使用Android Studio中提供的新的Gemini API应用模板,或者按照本教程进行操作。将复制的生成提示代码粘贴到你的项目中。

就是这样——你的应用现在拥有了一个由Gemini提供支持的Cook Helper功能。我们鼓励你尝试不同的示例提示,甚至创建自己的定制提示,以利用强大的Gemini功能增强你的Android应用。

将AI引入Android Studio中的方法

虽然这些实验充满希望,但必须记住大型语言模型(LLM)技术仍在发展中,我们在学习的过程中。LLM可能是非确定性的,意味着它们有时会产生意外的结果。这就是为什么我们对在Android Studio中集成AI功能采取谨慎和深思熟虑的方法。

我们的AI理念是增强开发者的能力,并确保他们保持“在环”状态。特别是当AI提出建议或编写代码时,我们希望开发者能够在将代码提交到生产环境之前仔细审核代码。这就是为什么新的Canary版本中的代码建议功能会自动弹出一个差异视图,让开发者预览Gemini提议的代码修改,而不是盲目地直接应用更改。

我们希望确保这些功能,如Android Studio中的Gemini,经过彻底测试,可靠且对开发者真正有用,然后再将它们引入IDE中。

未来展望

借助AI的能力,未来创建App只需要一句话即可完成。AI有可能彻底改变我们构建Android应用的方式,我们迫不及待地想看看我们可以一起创造什么。

虎哥Lovedroid
Android技术达人 近10年一线开发经验 关注并分享Android、Kotlin新技术,新框架 多年Android底层框架修改经验,对Framework、Server、Binder等架构有深入理解
 最新文章