解决Google Ai Studio做完应用不会部署和调用API

大家好，这几个月想必大家都被google ai studio 这个功能给刷频了吧，然后我看到大家都在用它来做各种应用。但是做应用简单，难的是怎么部署到网页里面去让大家都能看见，更难的是怎么调用google API接口来支持AI功能。前一个问题有很多教程，后一个问题教程不多。

 

那么，经过我1周的摸索，我终于解决了这两个大难题，所以本篇文章主要分为3块：

1. 怎么在google ai studio 上做应用

2. 做完应用怎么部署到线上

3. 怎么调用google API接口

 

如果大家第1个问题和第2个问题都会，那就直接跳过看第3个问题就行。

先给大家看下效果。

 

该视频暂不支持预览，审核通过之后可正常播放

✦ 1.怎么在google ai studio 上做应用

Google AI Studio 是一个基于网页的集成开发环境 (IDE)，可以帮助我们快速、便捷地利用 Google 先进的生成式 AI 模型进行原型设计和构建应用程序。在这里，我们不需要具备非常专业的编程知识，也能够轻松开发应用，说白了，就是咱设计师可以自己给自己做应用，

再也不像之前那样，脑子里有很多想法，但苦于不会写代码的问题了。

那怎么操作呢？这个其实不难，我们只需要打开 https://aistudio.google.com/ 网站，点击【Build】，然后在输入框中写下你的奇思妙想就行。如果大家没有头绪，可以看下平台里推荐的应用，慢慢就会熟悉了。

 

比如，我在这里想开发的灵感如下：

我想设计一个网站，当用户上传一张包装渲染图之后，你需要识别出这个包装的一系列拍摄手法，包括布光的方式、拍摄的角度、构图的陈列、场景的搭配等，并形成提示词。整个界面需要极简高级，有设计感。提示词的输出需要根据拍摄手法分开展示。

 

然后在编辑器中不断调试，最终的效果如下：

 

我们上传一张包装，看看效果：

可以发现，它确实将包装的拍摄方式（布光策略、镜头与视角、构图美学和场景与道具）进行了解析，然后还给出了一套完整的提示词。我们复制这段提示词给到XFUN智能包装设计平台，效果如下图2，基本是模仿了上图水果包装的拍摄手法。

 

 

✦ 2.做完应用怎么部署到线上

ok，到这里，我们已经完成了50%的工作量，接下来就是怎么把这个产品部署到线上让人家使用呢？操作如下，我们点击右上角的【保存到github】，然后输入项目名和项目介绍，点击【Greate Git repo】。

 

再继续点击右下角【Stage and commit all changes】。

 

然后，我们打开Github，找到刚刚命名的项目。

 

点击“index.html”,再点击【Edit this file】，我们需要编辑下这边的代码，将红框里面的代码输入进去，再点击【Commit changes···】，弹窗里面点击再次点击【Commit changes】就行。

 

接下来，我们还要用到一个软件，就是Vercel。这是一个云端开发与托管平台。点击【Add New···】下的Project，再点击【import】，再点击弹窗里的【Deploy】，也就是部署的意思。

 

部署完成之后，根据来到这个界面，我们点击【Visit】，这个时候，我发现我打开浏览器一片空白，但是我上一次部署的时候就是可以的，这里我就不知道怎么回事了。我们先不管这个问题，因为这个功能需要用到google API，所以我们先把API的事情解决了再说。

 

 

✦ 3.怎么调用google API 接口

首先，我们需要了解下什么是API。API 的全称是 Application Programming Interface，也就是应用程序编程接口。它是一套预先定义好的规则和协议，允许不同的软件应用之间相互通信、交换数据和功能。我们可以把 API 想象成一个餐厅的服务员。假设您（一个程序）走进一家餐厅（另一个程序或服务），想点一份宫保鸡丁。

• 您不会自己冲进后厨，告诉厨师怎么切菜、怎么炒。

• 您会看菜单（这是 API 文档），上面写着餐厅能提供什么菜。

• 您告诉服务员（这就是 API）：“我想要一份宫保鸡丁”。

• 服务员去后厨下单，厨师做好菜，再由服务员把菜端给您。

在这个过程中，API（服务员）起到了一个沟通桥梁的作用。它定义了您可以如何请求，以及会得到什么样的反馈，而完全不需要您关心后厨（程序的内部实现）的复杂工作。再详细的API了解大家可以自己去查资料，我们只需要了解它是用来对接接口的就行。所以回到 google ai studio，点击右上角的【部署应用】，打开弹窗。

 

弹窗里面的英文解释为：您的代码已部署为 Cloud Run 服务，现在可以使用了。您现在可以查看并自定义应用程序界面。因为这里我已经部署过了，大家没有部署的，需要选择一个项目或者创建一个新项目，大家自己操作下就行。

 

然后回到首页，点击左下角的【获取API密钥】。

 

重点来了，因为我已经设置过结算信息了，所以显示这个界面，如果大家还没有设置过，红框里面的蓝色字我记得应该是“设置结算”，反正就是要你帮卡。这一步很多小伙伴都卡在这里了，因为打开发现需要绑定外国的Visa卡，这里我建议大家去办一张Visa卡，也就3天的时间，比网上找各种代办什么的会靠谱很多，因为这张卡是是我们自己的，后续很多事情都可以掌控在自己手里。我办的事招商的，亲测有效。

 

之后，我们将卡号绑定好之后，按照箭头点击【复制密钥】按钮，再次来到Vercel界面，点击【setting】，按照下图箭头指示定位到红框内，然后将刚刚的密钥粘贴到第二个输入框（Value）中，第一个输入框（Key）要输入“GEMINI_API_KEY”。然后点击【Save】即可。

 

 

最后按照指示，我们重新部署下。

可以看到，我们在下方的已经可以看到刚刚在studio上生成的应用了，再次点击【Visit】按钮，就会发现，已经可以使用了，而且这个链接大家都能用哦！

 

总结：

ok，今天的分享到这里就结束了，这个教程是我花了好几天，看了很多资料才跑通的，大家如果想自己开发产品，可以自己按照教程尝试一下哈，另外，如果在部署的过程中遇到什么问题，也可以问问gemini 怎么解决，现在的AI很厉害的，我刚刚还看到李飞飞对使用AI的原则定义，分享给大家：

1. 不要用工具做蠢事 要永远思考“我为什么要用AI”和“我该怎么用它”。

2. 不要因为AI而变懒 AI可以快速给你答案，但不能代替真正的学习和思考。 正确用法是：用AI帮你提出更好的问题、理清思路，而不是直接抄答案。

3. 不要用AI做坏事

 

谢谢！

 

原文链接：https://mp.weixin.qq.com/s/vYD9EI-8KtU8JKoMrcLuLw