gemini3生成的应用落地指南：结合第三方接口部署你在aistudio上做的AI应用-AI Express News

上周写了几篇关于在 aistudio 里利用 gemini3 搞各种小应用的教程，没想到还挺火，还不光是微信公众号里阅读量不错，我把视频同时也发在某音，某书上数据都不错，甚至我随手发了一个在 B 站上，也出乎意料的好，说明大家是真有这个需求啊，想学但又不知道从哪儿下手。

但你说做教程容易吗？是真不容易。你自己觉得已经讲得够清楚了，该说的都说了，步骤也拆得够细了吧？结果评论区还是一堆人在问。这时候你就明白了，原来你以为的"简单"、你以为的"说清楚了"，在别人那儿可能压根儿就不是那么回事儿。但这些人的问题其实挺有价值的，能让你发现自己教程里哪些地方没讲透，也能给你下一期内容提供灵感。

当然也有影响情绪的，比如评论区总会冒出来那么一波人，一副"我很专业"的样子，跑过来说什么"这么简单的东西还用你教？"、"这都不会?"之类的风凉话。我就纳闷了，既然这么简单，那当初你怎么不教？现在跑出来指点江山算毛线？

这个跟我给我的 AI 陪跑课讲还不一样，我那个是一对一，完全根据对方的情况来变动，想讲多细讲多细，但这种面对全部人就不一样了，确实很多时候我也没有表达那么清楚，毕竟每个人的基础不一样，理解程度也不一样。各位就见谅了，实在还不清楚的地方，你就给我留言……

图片[2]-gemini3生成的应用落地指南：结合第三方接口部署你在aistudio上做的AI应用-AI Express News

ps：你们可以看在我之前在这篇文章里特意提及了一个 AI 编程学习路径，你们要是自己感兴趣的也可以按照这个路径尝试着走，不要试图一步到位。

今天的主题是关于涉及到 AI 的部分，如何部署或者跑起来，之前关于纯前端的可以看我以前的文章或者视频：

用三个视频教会你把Gemini3在线应用真正"落地"运行(包括转成微信小程序)

为了让你体验更直观一些，我们还是先从 AIstudio 里搞出满意的demo，它出来的交互效果都比较好（主要是省钱啊……），然后再在这个基础上进行进一步的完善加工。（当然你也可以直接从编程工具开始，这不是唯一路径）

我们来做一个四格漫画生成器吧，可以发给别人都能用的那种。

1，我们打开 Google 的 aistudio，开始 build。

2，提交你的需求。比如我输入的需求为：

“设计一个四格漫画生成器，用户输入一个主题，选择一个漫画风格，即可生成一个四格漫画”

3，验收在在 aistudio 里 build 出来的效果：

我把界面改成中文的～

效果是这样的：

这个时候我们还只能在 aistudio 网页上查看和使用：

https://ai.studio/apps/drive/1s6iO0nppsJqZhCWlwmPVfYCHVBXVqvA5?fullscreenApplet=true

4，我们按照以前的教程里说的进行一个本地化，下载代码，本地 AI 编辑器进行预览。

这个时候你会发现报错：

很简单，api 无效，没有正确的 key，如果你在平台绑了卡充了值，你是可以获取到谷歌官方的一个 key 的，就在aistudio 左下角有一个 get API key。

一般来说，就是复制这个密钥，你填在文件里有一个叫.env的文件里即可。

然后按照用三个视频教会你把Gemini3在线应用真正"落地"运行(包括转成微信小程序)里的一样，你可以直接 build 个 dist 目录直接部署就可以用。

但问题就来了：

- 这个 api 很贵

- 对网络有要求

- 如果是公开访问的，有心人在开发者模式下是会查看到 key 的

5，这个时候就需要第三方便宜的 api 了，比如我这个linggan.io上有一个专门的第三方资源，这里有 api。

我选择其中一个，进行一个改造，相当于是吧 aistudio 里的 Google 的官方 api 地址改成一个第三方的。

打开第三方的这个 api 网站，创建个 key：

然后点开开发文档，找下相关模型的文档，你把内容复制一下，一会儿直接扔给 AI，比如这个漫画生成器，我们想用最新的 nano banana pro 模型：

有的第三方甚至直接支持官方接口替换，就是吧 Google 的官方 api 地址换成它的，然后把那个 key 改成它的即可。

你不懂也没关系，你直接复制这个api 的节点信息（如接口域名等）绘画接口和获取结果的接口的文档还有代码示例，前面加一句，帮我把接口改成这个第三方的，api 信息如下：xxx，最后再把你的 key 复制进去。

正常了之后就会通过这个 api 生成对应的图片：

当然这个过程，大概率你不会一次成型，会各种报错，你把错误复制给 AI，让它帮你改，你就记住，需要它做的事情就是，走我们提供的那个新的第三方的 api，同时填写正确的 key，你不知道填在哪儿，你就复制给它，让它去填。

同样的，你可以改模型，比如上图的我们的模型是老版本的香蕉模型（所以图中的中文是乱码的），我们可以改成 pro，对应的模型名字是要跟给你提供 api 的第三方的名字一样，不要乱写，比如我们示例中的接口要用最新的香蕉模型的话模型名字为：nano-banana-pro

然后我们看Nano Banana pro 产出的效果：

这个时候一个自带 AI 功能的画图应用就做好了，你也可以直接根据前面的教程那样 build 成dist 目录，直接在本地打开或者部署到线上甚至小程序，但我只建议你自己这么用或者发给靠谱的朋友用，而不是公开地址，因为这个方式会暴露 key 的……简单来说就是，别人用了你的这个 key ，又知道你的 api 节点地址，同时你还没有白名单，那对方就不用花钱生图了，他可劲儿生成图片，而买单的人是你。

5，我们在暂时没办法实现一个后台的前提下，又很想用这种相对简单的方式可以自己用起来，那我更建议你不要把 api 相关信息写死在代码里，变成那种前端可配的，像这样：

自己输入你的 key 甚至对应的 api 地址，这样就相对安全一些，如果你发给别人用，让他自己填写自己买的 key，照样可以用。

然后我发现不对，因为很多第三方的模型命名跟官方并不一样，对应的路径也不同，所以我们可以再加一个可以在设置里自己填模型的名字，绘图或者返图路径地址的，这样可使用性就比较好。

一样，出现问题，复制返回的错误信息给 AI，见招拆招，比如下面这种：

测试一下就可以成功了：

我们在这个模式下测试画漫画～

第三方 api 日志里返回正常。

图片效果如下，用的是nano-banana-pro模型出的图：

看上去是不是好像很简单？实际上对于新手一点都不简单……不信你按照我这个操作一遍就知道了，你会遇到各种各样的问题，甚至让你直接中途就放弃了……

但我想说的就是，你要从零到一，慢慢摸索着通过 AI 实现一个可用的产品，这一关必须经历啊，就要靠大量的跟 AI 的对话，慢慢调教好它，一开始你可能会说出很多废话或者无效的需求，但你遇到的错误多了，再多问问，慢慢就熟练了，而这个试错尝试的过程最好的实验场景就是在 aistudio 上啊！

最后我们归纳总结一下，就当是一个省流简约版的教程，后续更复杂的版本你们要喜欢，我后面再发。

1. 在AI Studio创建原型