揭秘 Claude AI 最强编程智能体背后的秘密

(0 comments)

在当今AI蓬勃发展的时代,编程与AI的结合给开发者带来了极大的便利。今天,我就带大家深入了解Claude AI的一个开源编程代理项目——fragment,并揭开其实现背后的神秘面纱,让大家轻松上手、玩转它。

1.项目介绍及启动流程

你还记得那个国外教你跟AI对话、写网站的小女孩吗?像这样的对话式编程工具有很多,Claude AI就是其中之一。 Fragment作为其开源版本,功能强大。通过与它对话,您可以生成代码并实时运行显示效果。那么如何启动这个项目呢? 1. 获取源码:首先我们需要到项目的GITHUB源码地址,滑动到下面的启动文档,根据文档,先复制get clone命令,粘贴并执行,并将代码下载到本地。 2. 进入项目并安装依赖:下载后,复制CD命令进入项目,然后复制NPMI命令安装项目依赖。安装依赖项后,使用“code.”命令打开项目。 3、配置相关文件及参数:然后来到文档,根据提示在项目中创建一个.ENV.logo文件,将相应的代码复制到该文件中。然后打开上面的“e to be API key”链接,进入网页,将生成的“key”复制进去,这个“key”就是生成显示效果的关键。 4. 启动项目:当一切准备就绪后,我们回到文档,复制项目启动命令,粘贴到命令行中并执行。这样,项目就能顺利启动了。

2.代码生成及运行显示原理

项目已经上线了,那么如何将对话转化为代码并运行显示效果呢?这里发生了很多事情。 1. 选择代码类型和AI模型:发送消息上面的第一个选项用于选择生成什么样的代码。例如,如果您想生成“VOE”代码,则可以选择“VUEE.jsd”。右侧第二个选项用于选择使用哪种AI来帮助你编写代码。有‘open i’的‘GBT4O’型号、‘ENOPPC’的‘cloud3.5’型号、以及Google的‘GEMINI’型号等等。如果您的计算机上安装了 Orama,您还可以使用下面的 Rama 3.1 模型,它可以帮助您在本地生成代码,而无需互联网连接。这里我们首先选择“GPT4o mini”模型,然后设置第三方“API key”和“base url”开始与其通信。 2. 接口调用和后端处理:当我们试图让它生成一个漂亮的登录页面时,过了一会儿代码就生成了。打开调试面板看后面的操作,点击发送,可以看到它调用了接口,发送了用户的问题、用户选择的AI模型、需要写入的语言类型后端,后端也会返回相应的代码。这个接口就像一个神奇的“转换器”,直接将问题转换成相应的代码。 3. 项目代码结构及核心逻辑:本项目是一个使用next.js开发的前后端一体化的全站项目。 app文件夹是项目的入口文件夹,里面包含了项目的所有代码和配置。 .TX文件是项目前端页面的入口文件。点击进去,你会看到‘聊天输入’组件是发送问题的输入框,‘预览’组件是右侧代码的预览组件。 API文件夹是项目后端的代码文件夹,包含所有后端代码。 chat文件夹下的路由文件对应的是点击发送按钮时调用的接口。该接口中通过接收前端传递过来的模型名称生成对应的AI大模型实例,并通过schema参数规范模型的输出格式,并使用to pn方法进行优化提示语传递到大模型上。 ,这是整个项目的亮点。它就像一根接力棒,告诉AI大模型以熟练且无错误的软件工程师的角度回答用户问题,从而得到完美的代码,最终通过 string object 方法调用大模型,生成用户想要的代码,并将结果以流的形式返回给前端。

3.如何实现在线预览

代码生成了,但是如何实现在线预览呢?事实上,前端拿到代码后,调用了后端的‘300’接口。该界面中使用了一个名为“code-interpret”的第三方在线代码预览组件,类似于“代码沙箱”。一个类在线代码编辑器,通过调用接口,让它创建一个在线vie项目,并将当前生成的代码添加到这个项目的APP.vie文件中,最后让它返回一个预览地址,前端- end 然后使用 IPHONE 标签挂载到页面上,就会显示对应的预览效果。

有兴趣的同学不妨下载代码亲自体验一下。有什么不懂的也可以问我。如果您还想了解更多前沿编程知识,请点击“关注”,我们下一期再见。希望今天分享的内容能够让大家在探索编程与AI的结合上更进一步。也期待大家在评论区分享自己的经验和想法,以便我们共同互动和交流。

Atualmente sem classificação

Comentários


Atualmente não há comentários

Faça login antes de comentar: Entrar

Postagens recentes

Arquivo

2024
2023
2022
2021
2020

Categorias

Tag

Autores

Feeds

RSS / Átomo