粉丝11.7万获赞37.5万

前段时间都很兴奋地在 google studio 上面搭建各种炫酷的应用,你们想不想把它做成一个真正的网站产品呢?这个视频会手把手的教没有编程基础的技术小白们怎么部署 jammy ai studio 搭建的网站。 这是我之前用谷歌 ai studio 生成的一个可以一句话生成用户旅程图的工具,并且可以通过动态调整场景变量,为用户发掘更多的产品机会。 因为可以动态调整,所以用户可以发掘很多之前很难察觉的一些设计机会点。这个工具发布之后,引发了大家的强烈好奇,但是我在把它分享给小伙伴的时候,却发现谷歌产品在国内用起来还是频频受阻。而且 jimmy 它生成的是一个纯前端应用,如果直接部署就会暴露我的 jimmy api key, 这是非常严重的一个隐私安全问题。这个视频会展示免费部署的全部过程,不会编程的小伙伴也可以跟着这个视频一起把你们搭建的酷炫的 ai 应用免费的部署出来,把它变成一个真正的产品。首先我们要在 google ai studio 里把你的项目保存到 gitop 上面, 我们点击右上角这个 github 的 logo, 命名一下你仓库的名字,并且一句话描述一下这个仓库,然后你可以选择它的可见性。最后我们点击这个 create git repo, 然后我们再点击这个 stage and commit all changes, 我 们点击右上角这个链接,我们就可以看到 github 里面我们这个项目。 接着我们在 github 的 桌面应用上把这个项目克隆进来,点击 fire 克隆仓库,选择我们刚刚创建的仓库,点击克隆它就克隆到本地了。 今天我们用 code code 还有智普的 g l m 模型改造我们这个项目 code code, 它是需要接入 ai 模型才能进行 ai 编程的,但我们国内用户却很难订阅它原生的这些套餐,所以我们选择接入国内的智普的 g l m 四点六模型, 它性价比比 cloud code 这个原生套餐要高很多,只要用七分之一的价格就能用上编程能力毫不逊色的 g o m 四点六模型。我们要调用这个模型是要订阅它们的这些呃 call 脸的套餐的,最近它们有跨年的特惠,大家可以去关注一下。可是首先我们用 cursor 打开我们刚刚刻容的文件夹, 这里你用任何 ide 都可以。在打开 cloud code 之前,我们需要配置一下智普的 g o m 模型,大家如果想知道如何安装 cloud code 之后也可以出一篇帖子,手把手教自己怎么安装。这个视频就不多赘述了, 我们要去 big model 的 这个网站获取 apikey, 如果你这里还没有创建右上角添加新的 apikey, 然后你这里写一个名称,点确定 这个 apikey 就 创建好了。我们复制这个 apikey, 然后打开 cloud code mate 这个工具,我们点击右上角的这个三个点, 然后选择使用智普的 g l m 模型,然后填入我们刚刚复制的 apikey, 然后选创建配置,这样我们的模型就配置好了。接着我们在 cursor 的 这刚刚打开的项目文件夹里面启动 cloud code, 启动好之后,我们输入命令斜杠猫的进入选择模型,然后选举 g l m 四点六模型, 现在我们就可以开始用 ai 改造这个项目了。对于我们这些没有编程基础的技术小白来说,在大刀阔斧的改造这个项目之前,我们需要用 ai 评估一下这个项目代码有什么问题, 并让他提出解决方案。这是我的提示词,我让他先审查这个项目,看看是否有架构上或者是安全的问题,然后提出解决方案。很快 ai 就 帮我们分析好了,他指出了好几个这个项目的安全隐患。我们刚说到这个 api key 泄露的风险,果然他也提到了, 因为谷歌 ai studio 搭建的一般都是纯前端应用,如果是用到了 ai 功能的话,那我们的 api key 很 容易就被别人获取到。 除了我们刚说到 apikey 的 情况,这里还指出了文件的架构缺失了一些部分。所以对于我们这些之前没有编程经验的技术小白来说,在开始布置你用 jamina 搭建的纯前端应用之前,务必让 ai 去评估一下你的代码,所以他也给出了我们解决方案,所以我们要将这个纯前端的 应用改成一个前后端的一个应用,让我们的 apikey 可以 让它开始执行。很快我们的网站就搭建好了, 我们的 api key 被放到了后端,并并且我们的 ui 设计基本上保留了和谷歌 ai studio 搭建的一模一样。我们都知道 jammy 它搭建前端的审美非常强,所以如果你们让 jammy 搭建了很多酷炫的前端,那就用智谱的 gim 四点六模型来改造一下。 改造搭建的后端也算是一种落地的斜修,我们再来看看功能,可以看到他依然生成了和之前质量一样高的用户里程图。这个案例我们是在说有很多外国游客来中国旅行,那我们中国的一些餐馆,他如何找到更多的接触这些客户的机会? 旅程图提供了从外国用户再来中国之前的接触点,到他们来餐厅就餐的 menu 的 设计,服务员的沟通培训,再到他们支付的便捷提升等等, 在各种方面都为我们的餐馆提供了吸引外国游客服务升级机会。可以说深层质量还是一如既往的高。值得一提的是,我在改造这个项目的时候,为了让国内用户用得更方便,我将将原有的 l i studio 接入了谷歌的 api, 换成了接入智普的 g 四点六模型, 可以看到这个深层质量丝毫不逊色。另外在交互上面,我们在改造的时候用 g l m 四点六模型也非常的顺畅, 可以看到在原有的模型当中,我要去使用另外一个这个产品的核心功能,改变环境变量时,我每选择一个环境的变量的改动,这个用户旅程图就会立马开始更新,并且要花费一定的时间。但是这样的交互其实并不是很合理,因为用户可能想同时修改好几个变量, 所以我在改造的时候,我们把这个模块截图给到我们的 ai 模型,并且描述一下刚刚的交互问题, 直接让 ai 帮我们修改交互问题。这个是修改之后的,我们在这里调整一下场景变量,可以发现我可以修改多个场景变量,之后它才会出现一个这样的按钮,让我来选择是否重新生成我们的用户里程图,并且它还会有个抖动的提醒我们点击的一个小动效。这些都是智普 g l m 模型帮我设计的, 这多科智普全新的 g l m 四点六 v 模型支持图片视觉的理解能力,这样我们就不用用非常复杂的语言去描述我们遇到的问题, web coding 的 效率可以大大的提升。我们把这个网站部署一下,首先我们打开 github desktop 描述一下这个 commit, 接着点击这个 commit to working demo, 然后再点击右上角的这个 publish, 这样我们这次的修改就被推送到了 github 上。我们用 whatsail 免费部署一下这个网站,点击 add new project, 选择我们的项目,点击 import, 它已经智能识别出来我们的项目的一些配置。我们只需要在 environment variable 里面设置一些我们用到的 api key, 点击 deploy, 那 我们的网站就部署好了。我们在部署的网站上来试一下我们这个产品的功能。这个用户旅程图的质量还是非常高的,从老人就医的各个阶段都提供了很多建设性的设计体验提升的意见, 从线上的软件到线下医院的 vr 布局的设计非常全面。再试一下另外一个核心功能,我们在修改环境的变量之后,我们的用户旅程图也随之发生了改变,可以看到我们的旅程图的两个核心功能都被很好的保留了下来, 并且我们的这个 ai 工具换成了质朴的 api, 它的生成质量高标准的完成了,因 因为这个 ai 工具里面调用了智普的 api 会有费用的产生,所以我还设计了用户的健全系统和支付系统。在完善了功能上线之后,我会给大家提供免费的积分,让大家免费使用这个工具, 请大家多多期待。另外,大家对于这个工具还有什么想要新增的 feature, 或者想要改变的交互形式,可以在评论区告诉我。提供有建设性意见的小伙伴,我还会提供更多免费的积分,欢迎大家多多留言。 如果你也是零编程基础的技术小白,还在为各种 ai 搭建的炫酷的前端应用感到惊叹吗?收藏这只视频,开始脚踏实地的把我们的想法转变为能真正落地的给其他人用的产品吧!国产模型智普 g o m 能帮助我们快速的改造这些 ai 产品。你有什么在等待部署的 ai 的 前端应用吗? 你在部署 ai 产品时遇到了什么问题,欢迎在评论区里分享讨论。关注我万万岁,一起用想象力驾驭 ai 科技吧!

今天教大家白嫖这个见证迷你三 a pro 啊,一年免费版费,因为我有六个谷歌邮箱啊,全部都认证成功了啊,下面开始教程啊,在教程开始之前呢,有两个准备工作哈,第一个就是你要有这个中信银行的微萨卡, 然后我发的呢也有教程,大家可以翻我主页这个大家看视频的教程去申请就行了。然后你申请的呢,是这张卡是这张白色的,这张在你后续付款的时候呢,你付完款之后呢,你 就是订阅成功之后,然后你可以再取消订阅。还有一个就是你要准备一个和你 ip 一 致的这个邮政编码,因为我的 ip 是 在那个美国的加尼福尼亚嘛,所以呢,我就搜了这个加尼福尼亚的这个编码,然后这个呢留着备用哈。 还有第三个就是你要去闲鱼上面去下单一个学生认证的这个你就直接搜京东 mini 学生自助认证就行,我花了四块钱啊,这个你下单之后先放在那好,然后这几个呢,准备工作已完成之后呢,就是要进入这个谷歌京东 mini 的 这个官网,你进入他们的官网之后呢,就在这里右上方,这里有一个升级, 你点进来之后呢,就是这个界面哈,你进入这个界面之后,他这里有一个请你检查是否符合要求,你点进来这个界面, 点进来这个界面之后,好,你进入到这个界面了哈,剩下的你就打开你的这个咸鱼刚刚下单这里哈,因为你咸鱼下单之后,他会发你一个教程, 你就按照他们的教程走就行。咸鱼上面那个学生资格认证成功之后哈,就会进入到这付款的界面,这个付款的界面呢,如果你是自己申请的那个中信银行的威萨卡哈,那你直接点卡这里进来这个界面之后呢,你再把你的中信银行的那个威萨卡卡号, 还有这个什么信息都填上就行,这个持卡人姓名填你的,然后这里有个油边,这个油边你就随便,刚刚不是准备的有吗?你就随便找一个油边填上来就行,然后直接点下一步就可以了。 如果你不想自己去申请这个中信银行微大卡的话,你也可以去闲鱼上面去下单一个虚拟卡,闲鱼上面也有哈,你在闲鱼上面之后,你再点左上方这里再刷新一下,刷新之后呢,它就会显示已订阅。 好,现在呢就已经订阅成功了。最后一步就是你认证成功之后啊,不管你是用的自己的你的中信银行的卡,还是在闲鱼上面下单的虚拟卡,这个时候还有最后一步,就是不要忘记取消订阅。取消订阅呢,就是进入这个谷歌精灵的官网,然后左下方呢有一个管理订阅,管理订阅,你点进来, 点进来之后有一个取消会员资格,然后点取消,然后取消继续。 还有这里有一个取消订阅,你就直接取消了就行,然后继续点取消就行。虽然说是取消了这个订阅,但是呢,这个功能它是没有消失的哈,它是有一年的这个免费使用的时间的。

浏览器诞生了三十年,但是你见过会自己写 app 的 浏览器吗?呃,今天就带大家看一下 google labs 最新放出的新的产品 disco。 这不是一个 chrome 的 皮肤,而是 google 把它定义为 discovery vehicle, 就是 探索的主体。它彻底打破了我们对搜索和标签的认知,它的核心逻辑不再只是给你一堆链接,而是直接为你生成一个工具。 平时我们要策划一次旅行,可能要开非常多的网页,定酒店、看攻略、查地图,非常多的步骤。但是在 disco 里,你看到这里 james three 的 模型会读取你所有打开的网页内容,理解你的意图,然后把几十个页面重组成一个完全定制交互式的迷你的 app。 所以你不需要会写代码, ar 直接帮你把散乱的信息变成一个好用的系统。比如这个 plan a trip, 你 只要跟他说你要去哪里旅行,他生成的这个界面里不仅会有整合好的行程表,还会有动态的地图、酒店推荐,甚至有预算计算器等等,包括集成 google maps 的 一些推荐的信息,天气预报。所有的信息都来自于真实的网页,你不需要自己去点击跳转。 比如这是生成太阳系的一个模型,甚至拖动滑块来模拟不同引力参数下的轨道变化, 深度的去学习太阳系的一些知识。通过这个把关,太阳系的模型极大的降低了认知的门槛。再看这个 meal plan, 它能根据你浏览的食谱网站,自动生成一周的买菜清单和烹饪日程。 最后,这个案例展示了 disco 处理长周期多变量项目的能力。呃,设计自家的花园或者进行装修规划时,设计植物的习性、空间布局、养护时间等大量的专业知识,普通人很难统计。 disco 的 解决方案是根据用户查阅的植物数据库和设计簿客, disco 可以 生成一个定制化的管理面板,他可能生成一个植物种植园布局的建议图,养护时间表,基于植物的一些特性啊,然后自动生成浇水、施肥的提醒日程。他把知识直接转化成可执行的操作指南。 我也写了一篇文章,是关于 disco 这个产品的一些介绍和它所在的创新之处,这里面也有各项案例的一些举例,大家感兴趣可以去查看。 最后呢,我想总结一下,其实 disco 这些案例证明了一个观点,未来的浏览器不应该止止步与展示的信息,而应该具备组织信息,甚至利用信息重构工具的能力。 用户其实不喜欢管理几十个标签,我们每次打开我们的浏览器,可以看到上面密密麻麻的标签页,这由于浏览器功能匮乏而被迫产生的行为。但 disco 证明, ai 可以 作为中间层,以帮助用户去收纳 和降低这几十个页面带来的商值,作为一个清晰的界面。当然,目前这个产品还在一个内测阶段,如果大家感兴趣的话,可以去他的官网去点击 join 啊 waitinglist。