3.代码的迭代更新(1)
上一节课我们让train开发了一个最基本的AI应用,那我们再接着来看,首先我们上一节课的话,它最后是预览的时候,它调用了这一个命令。如果他执行这个命令的话,我们来看一下他这个命令是个什么意思。这个MPS的话是在我们安装了这个no的环境的情况下,也就是说我们要启动这个服务的话,它会执行这个loader这个命令,不是,是执行这个node环境里面的这个MPS的这个命令。OK.
那那首先的话咱们得有这个nodel环境,所以的话像我们的这个开发环境的话,我们还是得在本地的电脑上进行一个安装的。那如果你没有安装的话,他可能就执行失败了,好吧?OK,那这个的话这个环境的安装,大家看这个node对吧?大家可以去看一下,或者是看后面的这个我的这个开发课程,大家可以去找一下这个node环境。这个的话就是可以去node官网,然后把这个node的安装程序给它下来,进行一个安装。这个导购官网。
OK, 给大家进行下载和安装。所以的话这些环境的话,它我们提前安装好会比较好一些。然后的话在这里,我们看我们是可以访问这个链接,对吧?就按住control键,去点击这条链接,我们的浏览器就会自动跳转到这个页面对吧?然后打开这个链接好。除此之外,我们也可以直接点预览,这里有个眼睛预览,预览的话它会打开一个页面,给我们看到这个预览的效果。它实际上它本质是内嵌了一个浏览器,在咱们这里OK,那在这里的话我们可以看一下左边它的一个基本的内容。
那我们可以看到这里是资源管理器,然后这个是编译器的搜索。比如说我要搜索哪些代码,那么可以在这里搜索好。这里的话有一个源代码管理,比如说我要发布到giu b上,那么我们就得需要把它进行一个初始化我们的这个库,进行一个发布,在这里的话我们可以点预览,对吧?这就是我们刚刚启动服务之后,可以看到的一个月效果。然后如果你要做一些程序的调配,那可以在这里进行设置一下。
好,这个是远程的一个连接,这里是比较核心的,就是我们比如说编辑需要安装VS code哪些插件,那么我们可以在这里进行一个安装OK。好比如说像我安装了这个doctor插件,那么在这里它就会有这个docker的一个内容。好。
接着我们再回来。我们现在的话,比如说我想要让他重新做什么事情,我们在这里的话我们可以是点击重试,它就会重新的去让大语言模型进行一个回复,好吧。好,我们在这里,我们可以看到它这里的话有一个删除,对吧?这边还有一个什么回退到本轮对话发起前,那什么意思呢?就是说我们在做这个事情,比如说我让他生成一个to do list web应用,那么他给我们去做了什么事情,他给我们生成了这几个代码对吧?
我想要回退这个代码,就说我已经生成了对吧,然后已经填写上去了对吧?然后又修改了这个代码,然后又运行了。但是我现在突然发现这个不是我所想要的。我想要回退到这之前的那个时候,最原始的这个状态。这个时候的话我就可以让他点击一下回退。那么回去之后他就会什么,他就会把我们在这个操作里面做了哪些事情,比如说对代码进行删除对吧啊,我想要对他重新删除,把之前他删除的代码又恢复回来,对吧?这是添加的,添加的就删除然后他删除了的就加回来我让他做这个事情对不对?
好,那这个时候我们就可以点击确定,那么这个时候就已经删除了对吧?你看我的文件夹全部没有了OK。好,那这个时候的话,我们比如说我现在要做其他事情了,对吧?那我现在要做什么事情呢?
我要帮我做一个to do list的web应用,然后我还需要有一些其他的需求,对吧?那你可以把这个需求你写的更加详细,比如说使用GS是是做出做出这种漂浮的这个3D面板,做出漂浮的3D面板。需要使用对吧?作为票务3D面板以及很多的例子特效指的to do你页面非常的酷炫。好,那我们就希望他做出用cgs r做出这种漂浮的3D面板,然后做出很多例子特效出来。我们这个时候的话我们就有什么更多的需求和要求了,对吧?那好,我们现在的话又可以让他去进行生成。这里的话我们比如说我们可以用这个GPT4.1来看一下它整体的一个效果。
好,那么这里的话他也是一样的,他会思考对吧?只不过就是说每一个AI模型的能力不一样。他有时候可能生成的比较好,有时候可能生成比较差对吧?或者是复杂一点的,他也有可能他生成不出这么好看的效果出来,那么都有可能都有可能。好,那么接下来的话它已经生成了第一个页面,那接下来它会生成第二个?慢点JS页面好。
那么我们在这里的话,我们来看一下他做了哪些事情对吧?OK,那这里的话它引用了这个cgs没问题对吧?运行这个慢点JS他看让他看一下是不是有这种3D效果和粒子面板。我们直接点预览,我们看一下效果。真的有对吧?真的有啊,然后有这种漂浮的感觉?那我们现在再添加一下?吃个鸡腿。
好,点击添加,行不行?可以,还是挺酷炫的对吧?是不是比刚才就好看多了,对不对?那这一次的话他是他运行了当前的这个项目对吧?也是还是我们这个服务对吧?只不过这个服务它一直是开启的状态,所以的话我们这次就没有再让他重新开启。只不过我们现在他重新生成这两个页面,他在访问local house的时候,他就访问的是这个index HTL页面,OK,那我们就可以直接看到效果。好啊,如果你觉得不满意,那你还可以给他接受或者拒绝。
然后现在话你觉得我们还想要做什么事情?比如说我希望他这个输入框也是要透明的对吧?输入框也是透明的,那么OK我们点击全部接受之后,我们想让它再次修改对吧?那我们可以在这个聊天对话里面继续的输入请帮我把输入框的背景也修改为透明,也修改为半透明。我们看一下他能不能做,我们不是说他一生成完了就OK了,那我肯定需要根据自己需要修改,对吧?我看一下他能不能做出这个修改出来,我们输入进去。
好,那OK他现在的话就开始思考对吧?然后他找到了对应的这个CSS,我们可以看到这个对应的30,这里有减号有加号,对不对?那减就是说明他会把这一行删掉,然后让他重新添加一行新的进来。OK我们点击一下这个预览,我们看到输入框确实变透明了对吧?输入框确实变透明。好OK那我们点击接受OK这样的话我们就做好了这样子的一个应用对吧?然后我们又重新的撤回,我们之前的命令又重新的去执行。好,OK我们这一节课就先讲到这里。