在当今AI蓬勃发展的时代，编程与AI的结合给开发者带来了极大的便利。今天，我就带大家深入了解Claude AI的一个开源编程代理项目——fragment，并揭开其实现背后的神秘面纱，让大家轻松上手、玩转它。
你还记得那个国外教你跟AI对话、写网站的小女孩吗？像这样的对话式编程工具有很多，Claude AI就是其中之一。 Fragment作为其开源版本，功能强大。通过与它对话，您可以生成代码并实时运行显示效果。那么如何启动这个项目呢？
1. 获取源码：首先我们需要到项目的GITHUB源码地址，滑动到下面的启动文档，根据文档，先复制get clone命令，粘贴并执行，并将代码下载到本地。
2. 进入项目并安装依赖：下载后，复制CD命令进入项目，然后复制NPMI命令安装项目依赖。安装依赖项后，使用“code.”命令打开项目。
3、配置相关文件及参数：然后来到文档，根据提示在项目中创建一个.ENV.logo文件，将相应的代码复制到该文件中。然后打开上面的“e to be API key”链接，进入网页，将生成的“key”复制进去，这个“key”就是生成显示效果的关键。
4. 启动项目：当一切准备就绪后，我们回到文档，复制项目启动命令，粘贴到命令行中并执行。这样，项目就能顺利启动了。
项目已经上线了，那么如何将对话转化为代码并运行显示效果呢？这里发生了很多事情。
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 方法调用大模型，生成用户想要的代码，并将结果以流的形式返回给前端。
代码生成了，但是如何实现在线预览呢？事实上，前端拿到代码后，调用了后端的‘300’接口。该界面中使用了一个名为“code-interpret”的第三方在线代码预览组件，类似于“代码沙箱”。一个类在线代码编辑器，通过调用接口，让它创建一个在线vie项目，并将当前生成的代码添加到这个项目的APP.vie文件中，最后让它返回一个预览地址，前端- end 然后使用 IPHONE 标签挂载到页面上，就会显示对应的预览效果。
有兴趣的同学不妨下载代码亲自体验一下。有什么不懂的也可以问我。如果您还想了解更多前沿编程知识，请点击“关注”，我们下一期再见。希望今天分享的内容能够让大家在探索编程与AI的结合上更进一步。也期待大家在评论区分享自己的经验和想法，以便我们共同互动和交流。
트위터에 공유 페이스북에 공유
Indie123
코멘트
현재 댓글이 없습니다