Transcription
大家好。今天我想向大家展示如何使用谷歌的 nano banana 图像模型来构建一个应用程序，该应用程序可以将任何照片转换成三种不同风格的专业头像。我认为如果你是 AI 编程新手，这是最适合构建的应用程序之一。而且，制作朋友的头像也很有趣。
好的，我们将分五个步骤来构建这个应用程序。首先，我们将与 AI 合作起草规范。然后，我们将构建用户界面和脚手架。我们将创建三个用于不同头像风格的提示，然后连接谷歌的 nano banana API。最后，我们将尝试修复任何错误或问题。
在本视频中，我将使用的所有提示都可以在描述中链接的文档中找到。那么，让我们开始吧。
所以，这里我有一个空的 Cursor 项目，并且我已经将 Cloud Code 加载到终端中，但如果你想构建这个应用程序，你也可以只使用 Cursor 的 Agent。
那么，第一步是让 AI 编写规范，对吧？所以，让我复制并粘贴这个提示。提示是让 AI 编写一个规范来创建一个专业的头像应用程序。这是它的工作方式。请包含需求、技术栈和两个里程碑。对于第一个里程碑，我总是喜欢先设置用户界面，这样我就可以看到应用程序实时更新，以供后续里程碑使用。另一个最佳实践是，我总是喜欢包含一个指向我正在使用的文档的链接。在这种情况下，是谷歌的 nano banana 图像 API，这样 AI 就能获得正确的上下文。
好了，现在让我们让 AI 来编写规范，等规范完成后我们再回来。
好的，我们回来了，AI 已经创建了一个规范。所以，在让 AI 构建任何东西之前，审查规范、审计它、简化它非常重要。好了，让我们来看看。所以，这里的一切看起来都很好。预览上传的图像进行处理。我认为这没有必要。让我们去掉它。三个定义的专业风格。是的。与谷歌的 Gemini Nano Banana API 集成。嗯，让我们直接粘贴文档。对。让我们向下滚动并排切换。是的。缩放功能。我们真的不需要缩放功能。所以，让我们去掉它。滑动条比较视图。同样，我认为我们不需要它。所以，让我们去掉它。所以，我在这里做的很多事情就是让需求更简单，对吧？让我们看看。图像保留。好的，这一切看起来都很好。技术栈前端。好的，这实际上很重要，因为 AI 在安装这些不同的库方面确实很糟糕，特别是对于 Tailwind，你希望使用版本 3 而不是版本 4，因为版本 4 是今年最近发布的，AI 还没有足够的上下文来真正了解发生了什么。所以，一定要尝试满足，你希望使用版本 3。其他一切看起来都很好。让我们继续向下看，然后看看里程碑一，对吧？所以，里程碑一是我们要构建的。所以，它将构建所有这些东西。安装 Tailwind。让我们说，你知道，安装 Tailwind CSS 版本 3。并确保它不会做任何我们不希望它做的事情。好的。是的，我认为里程碑一看起来相当不错。
所以，现在让我们让 AI 来构建里程碑一。确保你使用 Tailwind CSS 版本 3 和 React with Vite。这些东西来自经验，因为你知道，我在这方面经历了很多错误。所以，我试图通过预先指定来避免它。而且，让我们也说运行 localhost，这样我就可以测试应用程序。好的。它现在将根据我们的规范构建里程碑一，它将安装一堆库，等里程碑一完成后我们再回来。
好的，我实际上忘记了再做一件事，以确保它确实按照我们想要的要求进行构建。让我们复制这张图片到这里，然后说，你知道，根据这张图片构建里程碑一，这样它就有了一个参考框架。同样，这张图片也将在我链接到描述中的文档中提供给你。所以，我们会回来看看它是否做得对。
我们回来了，尽管我们尽了最大努力，但看起来 Tailwind 有点问题。好了，让我们复制并粘贴所有这些内容给 AI 来修复它，并说，记住使用 Tailwind 3，看看它是否能解决问题。现在，这是 AI 开发中一个非常令人恼火的部分。它不太擅长理解这些库。希望这次它能解决。我们完成后再回来。
好的，现在我们有一个基本可用的应用程序。我不知道为什么它没有占据这个空间，但让我们尝试在这里拖入一张图片。我们将在这里拖入一张头像。好了，就这样。我们可以选择三种不同的风格。让我们生成专业的头像。当然，它不起作用，因为我们还没有连接谷歌的 nano banana API。所以，首先，让我们尝试修复这个间距问题，对吧？所以，让我们说应用程序没有占据全部宽度。你能修复吗？好了，就是这样。而且，当它这样做的时候，让我们看看里程碑二。所以，里程碑二，我们要连接谷歌的 API。所以，有几件事我们需要做。所以，首先，我们需要为这三种不同的风格创建三个不同的 AI 提示。如何创建 AI 提示？我喜欢做的是去 Claude 或 ChatGPT，拖入一张你喜欢的肖像风格的图片。所以，在这种情况下，这张图片看起来我认为很棒。我们只是要求 AI 编写提示。你能帮我写一个 AI 提示，将我的照片转换成这种头像风格吗？对吧？然后说目标是 500 个字符。好的。而且，AI 会为你写提示。所以，让我们来看看。好了，这看起来相当不错，但这里有一些我们不想要的细节。例如，我们不希望每个人都穿深色西装。这个细节太具体了。我更看重照片的风格，而不是人们应该穿什么。好的。所以，它将编辑提示并使其更好。而且，好了，就是这样。现在，让我们让它创建一个提示文件，其中包含我们想要的三个不同头像风格的 AI 提示。好的。而且，当我们在这样做的时候，让我们也检查一下应用程序现在是否格式正确。让我们重新启动。看起来没有。看起来仍然存在间距错误。所以，我们可以继续尝试让它像这样修复。用户界面仍然存在间距错误。所以，你知道，AI 可以同时为你做多项任务。你只需不断地给它任务，它就会将其添加到这个待办事项列表中。而且，它似乎已经创建了 prompt.md 文件。所以，我们在这里有我们的提示。看起来很棒。但我实际上已经准备好了三个不同的提示，我想使用。所以，让我们直接粘贴进去。企业经典。我实际上有一个提示叫做将这张照片转换成专业的商务头像，具有干净均匀的光照，主体居中，等等。创建一个专业的。我还有另一个提示。同样，所有这些提示都将在我将在描述中链接的文档中提供。好的，所以，让我们，让我们去掉这些东西。这太详细了。让我们去掉这些东西。然后，主要提示，让我们把它放在这里，用于创意专业。然后，对于行政肖像，我也有一个提示。好了，所以，让我们把它放进去。这里还有很多额外的细节。我认为我们不需要所有这些东西。让我们去掉它。好的。所以，现在我们有了这个空的提示文件，只有我们的提示。同样，我制作这些提示的方法是，从互联网上获取图片，然后让 AI 描述它们。而且，我在所有这些提示的底部还添加了“让主体看起来很棒，并且与其原始外观准确”。非常科学，对吧？好的。所以，现在我们有了所有这些东西。嗯，让我们确保一切正常。好的。所以，让我们仔细检查一下我们的应用程序。是的，我不知道间距是怎么回事。我们最终会修复它，但让我们实际上让它现在根据 prompt.md 中的提示来构建里程碑二。而且，我们将使用谷歌的 API，对吧？所以，让我给你看这个。所以，你必须去 Google AI Studio。你进入 API 密钥部分，然后在这里创建一个新的 API 密钥。你必须选择一个项目。让我们说我的第一个项目。然后说创建一个新的 API 密钥。它将创建一个你想复制到 Cursor 的 API 密钥。好的。所以，让我们复制这个 API 密钥。然后说使用这个 API 密钥用于 Google API。对吧？不仅如此，为了给它更多的上下文，让我们去搜索 Google 图像生成 API。所以，这是 Google 图像生成 API 的文档。而且，你知道，我们之前粘贴了文档的 URL，但让我们更具体一些，对吧？让我们实际找到图像到图像生成的代码。这里有一些示例代码。所以，让我们直接复制并粘贴这段代码。这是来自 Google API 文档的图像到图像生成的示例代码。好了，我们给了它很多上下文，对吧？我们给了它 API 密钥。我们从文档中给了它示例代码。所以，希望它能一次性完成我们想要的事情。我们会回来看看它是否真的有效。
好了，我们回来了。嗯，这花了大约五分钟才生成。现在我们有了一个漂亮的应用程序。让我们看看它是否真的有效。所以，我将在这里使用我的照片。将它拖放到里面。我将选择行政肖像，然后生成专业的头像。好了，它显然不起作用。它将我的照片变成了白人。这显然不起作用，对吧？所以，让我们直接给它一些反馈。应用程序没有使用实际的 API。让我们粘贴一张它看起来的截图。而且，设计也不太适合输出。所以，让我们让它修复输出。所以，我将再次复制这张图片。另外，我想看到两张图片并排显示，就像这样。好的。所以，让我们看看它是否能修复这个。而且，如果它不能修复，我们将进一步排查。
好了，我们回来了，我想给大家看看真正的困难，对吧？真正的故障排除。所以，它仍然没有生成我想要的图像。如果你看看它在这里做了什么，它说 API 被配置为使用 Gemini 2.0 flash 模型。但如果你看看这里的文档，模型实际上是 Gemini 2.5 flash image preview。所以我不知道它从哪里得到 Gemini 2.0 flash。所以，让我们说我使用 Gemini 2.5 flash image preview 代替。顺便说一句，图像生成仍然没有使用我上传的图像。好了，所以我们只是给它更多的反馈来让它正确地做。希望这次是第三次成功。
好的，我们回来了，这是决定性的时刻。所以，我将把这张图片上传到我们的头像应用程序中。选择行政肖像，看看它会生成什么。好了，就是这样。所以，它看起来确实在转换我的脸。它让我看起来和我实际的样子有点不同，但至少它和我原来的照片有点接近，而且它转换成了行政肖像。嗯，让我们再试一次用别的东西。让我们应用这个，并将其变成一个创意专业人士。所以，我认为这看起来更好。它在背景中添加了很多光照。它让我更聚焦。是的，我认为这看起来很棒。所以，我们可以点击下载头像来下载头像。保存它。然后我可以将其上传到我的 LinkedIn 或与我的朋友分享。而且，只是为了好玩，让我们实际做别人的。所以，我的朋友史蒂夫，他是一个相当受欢迎的 YouTube。我将把这个东西上传到这里。让我们再次选择行政肖像，因为我真的很喜欢黑白风格。好了，就是这样。所以，它对史蒂夫做得比对我好得多，我必须说，对于行政肖像。出于某种原因，他把手指放在嘴唇上。我不知道为什么，但是，是的，我认为现在我可以把这个发给史蒂夫，然后玩得开心。而且，让我们再做一个。让我们，我有一个朋友叫 Satchin。你可能认识他。这是一张相当低分辨率的照片。所以，让我们把它放在这里，然后选择企业经典，看看它会生成什么。好了，看起来很棒。所以，它给了 Sachin 一套西装，一个非常干净的镜头，对吧？而且，它的分辨率要高得多。
所以，现在我们在这五个步骤中构建了我们的应用程序。我们让 AI 编写了规范，对吧？然后我们让它构建了用户界面，实际上也构建了后端服务器。然后我们为头像风格创建了三个提示。所以，我们通过使用图片然后让 AI 编写提示来创建它们。然后我们连接了谷歌的 nano banana API。而且，你知道，当你连接 API 时，注意 AI 在做什么非常重要。例如，它使用了错误的模型。而且，我们还提供了大量上下文和来自实际 API 文档的示例代码。对吧？然后，最后我们修复了任何错误。令人惊讶的是，你会发现很多这些应用程序的错误实际上只是激励库和前期工作。所以，如果你在那里遇到问题，不要放弃，对吧？那是糟糕的部分，无聊的部分。一旦你设置好了 Tailwind 等等，你就可以进入构建应用程序的有趣部分了。
所以，现在我们有了这个，我们可以将这个应用程序提交到 GitHub，然后与我们的朋友分享。并且，请记住，每次生成图像时，成本可能只有几分之一美分，对吧？因为它是调用 API，而且可能有一些免费使用，但请记住这一点。所以，我不会公开分享这个链接给所有人，但是，你知道，你可以用它来为你的朋友生成有趣的图片。
好的，今天就到这里。而且，如果你喜欢这些教程，我的频道上有很多关于 Cursor 和 Cloud Code 的内容。所以，请点赞和订阅，我会制作更多这样的教程。非常感谢你的观看。