企业官网建设流程全解析

站长工具爱站,地方网站用什么域名,互联网广告营销公司,网站建设中html代码前言 上篇分享[《LangChain1.0实战之多模态RAG系统#xff08;三#xff09;——多模态RAG系统PDF解析功能实现》]中#xff0c;笔者详细分享了基于 LangChain 的多模态 RAG 系统如何处理 PDF 文档——从解析、文本分块到引用溯源#xff0c;并通过完整代码示例展示了如何…前言上篇分享[《LangChain1.0实战之多模态RAG系统三——多模态RAG系统PDF解析功能实现》]中笔者详细分享了基于 LangChain 的多模态 RAG 系统如何处理 PDF 文档——从解析、文本分块到引用溯源并通过完整代码示例展示了如何实现一个具备文档引用功能的问答系统为实际构建多模态 RAG 应用提供了具体指导。后端核心功能已基本开发完成。但一个完整的系统离不开与之匹配的前端界面。在当前 AI 编程逐渐成为主流的背景下Vibe Coding氛围编程正深刻改变开发方式开发者通过自然语言描述需求由大语言模型LLM直接生成软件。在笔者之前的文章《[Gemini3.0深度解析它在重新定义智能会是前端工程师噩梦吗》]中曾探讨过这一趋势。Vibe Coding 已不再是国外模型的专属。字节跳动推出的 AI 编程工具Trae已开放 Solo 模式号称能够高效、自动化地实现“从自然语言到软件”的全流Trae 程开发。在本期分享中笔者将带领大家使用 Trae Solo一步步完成多模态 RAG 系统前端页面的搭建与实现。本系列内容适合所有对 LangChain 感兴趣的学习者无论之前是否接触过 LangChain。当然如果大家已经学习过我的专栏《深入浅出LangChainLangGraph AI Agent 智能体开发》相信可以更快上手。该专栏基于笔者在实际项目中的深度使用经验系统讲解了使用LangChain/LangGraph如何开发智能体目前已更新30讲并持续补充实战与拓展内容。欢迎感兴趣的同学关注笔者微信公众号大模型真好玩每期分享涉及的代码均可在公众号私信:LangChain智能体开发免费获取。PS:鉴于后台私信越来越多我建了一些大模型交流群大家在日常学习生活工作中遇到的大模型知识和问题都可以在群中分享出来大家一起解决如果大家想交流大模型知识可以关注我并回复加群。一、Vibe Coding 最佳实践指南笔者在文章 [Chatbox支持接入LangGraph智能体一切都靠Trae Solo!]利用 Trae Solo 快速生成了一个 FastAPI 中间层将笔者开发的智能体与Chatbox前端页面无缝衔接。对于这类需求明确、结构简单的任务Trae Solo 确实能做到近乎“一键生成”。然而当面对一个稍具规模、功能复杂的系统级项目时通过多次实践笔者发现不能期望Trae Solo能瞬间“理解”全部需求一次性生成完美无瑕的代码。这正是当前阶段Vibe Coding氛围编程的真实写照它并非“替代”开发者而是一个需要被“引导”和“协同”的强大工具。高效的Vibe Coding不仅要求开发者具备扎实的专业知识和项目经验以便提出精准需求和定位问题更需要一套系统的方法论来引导 大模型。经过反复实践与总结笔者分享自己常用的“三步走”最佳指南显著提升大模型生成代码的准确性与可用性。第一步构建结构化的提示词清晰、完整的提示词是成功的关键因素。为了让大模型充分理解你的意图必须提供一份结构严谨的提示词。在文章[《与大模型对话的艺术提示词工程指南一》]中笔者分享了通用场景的提示词技巧。对于具体的开发任务笔者进一步将其细化为以下几个核心要素角色定位首先明确赋予大模型一个特定的“身份”和“能力集”。例如“你是一位资深的前端开发工程师精通 HTML、CSS、JavaScript 及 React 框架能够根据产品需求独立完成高质量的前端页面开发。”清晰的需求描述在阐明能力后具体、无歧义地描述需求。例如“请基于我已开发的后端 API附上接口文档构建一个多模态 RAG 系统的管理前端。核心功能需包括文档上传区、对话历史列表、实时问答交互界面并确保问答结果能高亮显示引用的原文片段。”明确的任务目标将需求转化为可执行的具体任务。例如“请使用 Vite 脚手架创建 React 项目采用 Ant Design 作为 UI 组件库构建符合上述需求的前端单页应用。请保持后端 API 调用方式不变主要逻辑集中在src/pages/chat目录下。”代码风格与规范约束为防止大模型“自由发挥”导致代码风格混乱必须提前约定规范。例如“请遵循函数式组件编写使用 TypeScript 进行类型定义。目录结构需按功能模块划分组件文件采用 PascalCase 命名工具函数采用 camelCase 命名。”第二步 提示词优化第一步编写的提示词其首要目标是保证“人类视角”下的完整性。然而要让大模型最有效地理解最好使用更符合 AI“思维习惯”的语言进行二次编写。一个非常实用的技巧是不要直接将你的“大白话”提示词丢给目标大模型或智能体如 Trae Solo而是先请另一个擅长文本处理的大模型如 DeepSeek对其进行优化。优化的目标是使语言更条理清晰、逻辑通顺、指令明确。亲测表明经过这层“翻译”或“润色”后再提交给 Trae Solo 等代码生成工具得到的代码质量更高初次运行的通过率显著提升后续需要修正的 Bug 也更少。第三步 精准的问题定位对于复杂项目大模型生成的代码几乎不可能一次性完美运行。当出现Bug时笔者身边许多开发者习惯于直接将整段报错信息抛给大模型这种模糊的提问方式往往收效甚微。更高效的做法是开发者先进行初步的、粗粒度的问题定位再引导大模型进行精准修复。具体流程如下人工分析根据报错栈信息初步判断问题可能出现的文件或代码模块例如可能是src/components/ChatWindow.tsx中的状态更新逻辑有问题。提供上下文向大模型提问时不仅要提供错误信息更要提供相关文件的完整代码或关键片段作为上下文。精准提问提问方式应为“我在运行项目时遇到了[具体错误]。初步分析问题可能出在ChatWindow.tsx组件。以下是该文件的完整代码及相关依赖模块的代码请帮我分析并修复这个错误。”通过这种方式你将从一个被动的“错误提交者”转变为主动的“调试引导者”极大提升了大模型排查和修复问题的效率。理论阐述再多不如动手实践。接下来笔者将完整演示如何运用以上“三步法”通过Trae Solo为多模态 RAG 后端开发一个功能完备、界面美观的前端应用。二、Trae Solo 前端开发实践实践是检验真理的唯一标准。下面笔者将严格遵循前文所述的“三步走”指南带领 Trae Solo 一步步构建多模态 RAG 系统的前端。首先在包含后端代码的项目文件夹中打开Trae这样在向Trae进行提问时Trae就会自动分析上下文后端代码中的内容更精确的依据后端接口生成前端页面。2.1 编写结构化提示词依据指南第一步首先需要构建一份结构清晰、要素完整的原始提示词。1. 角色定位明确赋予****Trae Solo一个专业身份和能力范围你是一名前端编程大师具备熟练运用ReactTypeScript组件化开发的技能熟练运用TailWind CSS antd构建现代化框架样式与组件库的技能具备使用vite脚手架开发前端项目的技能能够完成用户提出的所有需求。2. 清晰的需求详细描述业务场景与功能点在backend/src文件夹下是我利用fastapi编写的后端代码用户可以请求接口完成大模型智能问答、大模型图片分析、大模型音频转写、大模型PDF问答解析四个功能。该前端项目名称为多模态大模型RAG系统用户进入后首先会有一个排列智能问答、图片分析、音频转写和PDF解析的四个功能选项选择功能选项会进入与大模型的对话框。在智能问答选项中用户可以与大模型进行对话问答。在图片分析选项中用户除了可以与大模型进行对话问答外还可以上传图片大模型依据图片内容和用户提问进行回答。在音频转写选项中用户除了可以与大模型进行对话问答外还可以上传音频大模型依据音频内容和用户提问进行回答。在PDF转写选项中用户除了可以与大模型进行对话问答外还可以上传PDF大模型依据PDF内容作为参照对用户提问进行回答回答中还包含对PDF的引用。与大模型的对话都以流式输出的方式输出。3. 明确的任务将需求转化为具体的开发指令请在保持我后端核心代码不发生大规模变动的前提下使用vite脚手架利用react框架antd UI库帮我构建一个前端项目用户请求我的后端接口。4. 代码规范约束为防止代码风格失控必须提前约定规范在前端编写中你应该遵循如下规范确保前端代码的可维护性(1) 组件设计采用容器/展示分离逻辑与视图容器组件管理数据、状态和逻辑。展示组件接收props渲染UI通常无状态。 (2) 目录结构按业务或功能模块组织组件与页面分开存放src/pages/ 存放页面src/components/ 存放公共组件src/modules/ 存放业务模块。(3) 导入导出保持导入导出清晰一致优先使用具名导出单文件单组件可用默认导出。单文件多组件/工具必须用具名导出。导入顺序库 - 组件 - 资源 - 样式。 (4) 样式管理避免全局样式污染组件样式独立管理。CSS Modules/Styled Components推荐。覆盖Antd样式通过自定义类名或使用configProvider全局配置。(5) 路由与页面使用路由实现页面级代码分割按需加载。配置页面路由/pages/Home/index.jsx - /home。懒加载页面组件使用 React.lazy() 和 Suspense2.2 DeepSeek提示词优化原始提示词已经具备了所有要素但其表述偏向“大白话”逻辑连贯性有待加强。现在笔者执行第二步使用另一个大模型这里选用 DeepSeek对提示词进行优化使其更符合大模型的“阅读习惯”。原始输入提示词:我想要为我fastapi的后端编写一个前端页面请对我的提示词进行优化使提示词条理清晰逻辑通顺。我的提示词如下“你是一名前端编程大师具备熟练运用ReactTypeScript组件化开发的技能熟练运用TailWind CSS antd构建现代化框架样式与组件库的技能具备使用vite脚手架开发前端项目的技能能够完成用户提出的所有需求。 在backend/src文件夹下是我利用fastapi编写的后端代码用户可以请求接口完成大模型智能问答、大模型图片分析、大模型音频转写、大模型PDF问答解析四个功能。 请在保持我后端核心代码不发生大规模变动的前提下使用vite脚手架利用react框架antd UI库帮我构建一个前端项目用户请求我的后端接口。 该前端项目名称为多模态大模型RAG系统用户进入后首先会有一个排列智能问答、图片分析、音频转写和PDF解析的四个功能选项选择功能选项会进入与大模型的对话框在智能问答选项中用户可以与大模型进行对话问答。在图片分析选项中用户除了可以与大模型进行对话问答外还可以上传图片大模型依据图片内容和用户提问进行回答。在音频转写选项中用户除了可以与大模型进行对话问答外还可以上传音频大模型依据音频内容和用户提问进行回答。在PDF转写选项中用户除了可以与大模型进行对话问答外还可以上传PDF大模型依据PDF内容作为参照对用户提问进行回答回答中还包含对PDF的引用。与大模型的对话都以流式输出的方式输出。 在前端编写中你应该遵循如下规范确保前端代码的可维护性 (1) 组件设计采用容器/展示分离逻辑与视图容器组件管理数据、状态和逻辑。展示组件接收props渲染UI通常无状态。 (2) 目录结构按业务或功能模块组织组件与页面分开存放src/pages/ 存放页面src/components/ 存放公共组件src/modules/ 存放业务模块。 (3) 导入导出保持导入导出清晰一致优先使用具名导出单文件单组件可用默认导出。单文件多组件/工具必须用具名导出。导入顺序库 - 组件 - 资源 - 样式。 (4) 样式管理避免全局样式污染组件样式独立管理。CSS Modules/Styled Components推荐。覆盖Antd样式通过自定义类名或使用configProvider全局配置。 (5) 路由与页面使用路由实现页面级代码分割按需加载。配置页面路由/pages/Home/index.jsx - /home。懒加载页面组件使用 React.lazy() 和 Suspense ”DeepSeek优化后结果:**角色与技能定位** 你是一名资深前端工程师精通以下技术栈- React TypeScript 的组件化开发- Tailwind CSS Ant Design (antd) 用于现代化 UI 构建- Vite 脚手架进行项目开发与构建**项目概述** 我已在 backend/src 下基于 FastAPI 开发了后端服务支持以下四个核心功能1. 大模型智能问答2. 大模型图片分析3. 大模型音频转写4. 大模型 PDF 问答解析现需要你基于现有后端使用 **Vite React TypeScript antd Tailwind CSS** 开发一个前端项目项目命名为 **“多模态大模型RAG系统”** 。后端核心代码应保持不变前端通过调用接口与后端交互。**核心功能需求**1. **首页导航** - 进入系统后首页清晰展示四个功能入口智能问答、图片分析、音频转写、PDF解析。2. **功能页面与交互** - 每个功能对应一个独立的对话页面支持用户与大模型进行**流式对话**答案逐步输出。 - **智能问答**纯文本对话界面。 - **图片分析**在对话基础上支持上传图片模型依据图片内容与用户提问进行回答。 - **音频转写**在对话基础上支持上传音频模型依据音频内容与用户提问进行回答。 - **PDF解析**在对话基础上支持上传PDF模型以PDF内容为参照回答问题并在答案中提供引用来源。**前端代码规范** 请严格按照以下架构与规范进行开发3. **组件设计** - 采用容器组件管理数据、状态、逻辑与展示组件接收 props 渲染 UI分离的模式。4. **目录结构** - src/pages/存放页面级组件如 Home, ChatPage 等 - src/components/存放可复用的公共组件 - src/modules/按业务模块组织例如chat, upload, utils 等5. **导入导出** - 优先使用具名导出单文件单组件可使用默认导出。 - 导入顺序第三方库 → 内部组件 → 静态资源 → 样式文件。6. **样式管理** - 使用 CSS Modules 或 Styled Components 避免全局样式污染。 - 覆盖 antd 样式时通过自定义类名或 ConfigProvider 全局配置实现。7. **路由与代码分割** - 配置路由映射例如/pages/Home/index.tsx → /home。 - 使用 React.lazy() 与 Suspense 实现页面级懒加载提升性能。**补充要求**- 所有对话界面需实现**流式输出**Server-Sent Events 或 WebSocket。- 文件上传组件需支持常见格式图片jpg/png音频mp3/wavPDFpdf并提供上传状态反馈。- 界面风格保持现代、简洁符合 Ant Design 设计语言并适当运用 Tailwind CSS 进行样式定制。优化后的提示词层级分明、指令明确消除了冗余和歧义。此时将其提交给 Trae Solo能够确保指令被最高效、最准确地执行。2.3 Trae Solo 自动开发现在笔者将优化后的提示词交给 Trae Solo开始Trae Solo的表演。1. 输入提示词将上述优化后的文本粘贴到 Trae 对话框中2. 环境自动搭建Trae 接收到指令后并未立即开始编码而是首先分析后端代码结构然后自动执行命令行指令来搭建开发环境如创建 Vite 项目、安装依赖。这一特性极大简化了环境配置流程。用户在中部对话框的输入会被实时转化为右侧终端的命令执行实现了自然语言驱动开发环境配置。3. 结构化编码环境就绪后Trae 开始按照设定的规范编写代码。从其输出的中间过程可以看出它有条不紊地创建目录、编写组件逻辑清晰。4. 生成项目结构首版代码生成后查看目录结构完全符合之前约定的规范。语义化的文件命名和模块化组织使得代码可读性和可维护性很高。2.4 Bug修复与功能添加即便是一个数千行代码的规范项目Trae Solo也难以一次性生成无bug代码。此时便需要运用指南的第三步精准的问题定位与引导修复。1. 精准定位修复 Bug例如在 PDF 页面遇到了Encountered two children with the same key的错误。不应简单粘贴报错而是将错误信息与疑似出问题的pdf.tsx文件代码一同提供给 Trae并引导其分析问题所在。这种提供上下文的方式能极大提高修复效率。2. 环境相关错误处理对于如localStorage is not defined这类与环境相关的运行时错误同样通过指明问题的页面和代码片段引导 Trae 进行条件判断或兼容性修复。3. 功能迭代与补充在核心功能测试通过后发现需要补充两个特性对话历史记录和PDF引用可点击溯源。对于这类明确的小功能点这里直接用自然语言向 Trae 提出需求它会高效地实现。2.5 最终效果所有开发与调试完成后指示 Trae 执行npm run dev启动开发服务器对各功能进行逐一测试。系统首页清晰展示四个功能入口。智能问答纯文本流式对话界面。图片分析支持上传图片并结合图片内容进行问答。音频转写支持上传音频文件并基于其内容进行交互。PDF解析回答支持上传PDF模型回答时提供可点击的引用来源实现溯源。三、前端关键代码解析在 Trae Solo 的助力下笔者快速获得了一个功能完整的前端项目。现在笔者深入代码内部审视大模型生成的实现细节并解析大家最为关注的几个核心设计。3.1 模块化架构与路由设计核心设计项目采用了清晰的分层与模块化架构充分体现了 React 的最佳实践。1. 路由层 (Home.tsx)项目使用react-router-dom(v7) 作为路由管理核心。Home.tsx作为布局组件定义了系统的整体导航结构。它将四个核心功能智能问答、图片分析、音频转写、PDF解析映射到不同的路由路径实现了功能模块的隔离与按需加载。2. 组件复用策略尽管四个功能页面text.tsx,image.tsx,audio.tsx,pdf.tsx在 UI 和交互上高度相似但 Trae Solo 并没有简单复制代码而是巧妙地运用了组件组合与属性驱动的设计模式。它们共用同一个核心的ChatPage组件通过传入不同的props如title,extraUploadComponent,apiEndpoint等来定制化各自的行为与界面极大地提升了代码的可维护性和复用性。3.2 流式对话交互的实现核心技术对于大模型问答这类需要实时反馈的场景流式输出至关重要。Trae Solo 生成的代码优雅地实现了这一功能。状态管理在ChatPage/index.tsx中使用useState维护一个messages数组该数组实时存储并更新用户与模型之间的完整对话记录。历史记录在localstorage中当然这只是demo, 真实生产环境中历史记录要保存在数据库中。流式数据获取与渲染当用户发送消息时前端会调用对应的后端流式接口。核心逻辑在于使用fetchAPI 的Response.body获取一个ReadableStream并通过reader逐块 (chunk) 读取服务器推送的数据。增量更新当后端返回的数据类型为content_delta内容增量时代码会立即更新当前正在回复的消息内容实现文字的逐字输出效果。完成处理当接收到message_complete标识时结束当前消息的流式接收并将完整的消息对象存入messages状态准备下一次交互。3.3 PDF 引用溯源功能的实现核心价值这是 RAG 系统的关键特性。AI 不仅回答了问题还能指明答案的来源。数据结构后端在流式响应的最后会返回一个references数组其中包含了引用的原文片段、所在页码等元数据。前端渲染与交互ChatPage/index.tsx在接收到完整的消息和引用数据后会调用renderContentWithReferences函数进行处理。该函数的核心逻辑是智能匹配将回答文本中标记的引用占位符如[1]与references数组中的具体条目进行关联。可交互渲染将普通的数字标记渲染成可点击的链接或按钮。溯源展示当用户点击引用标记时通过弹出框Modal、侧边栏或高亮等形式展示对应的原文片段和出处完美实现了“答案可追溯来源可查验”的 RAG 核心体验。关于该项目的全部代码大家可关注笔者的同名微信公众号大模型真好玩并回复LangChain智能体开发即可获得。四、 总结本篇分享笔者系统性地展示了如何利用 Trae Solo高效构建多模态 RAG 系统的前端界面完成了整个全栈应用的闭环。回顾本次实践 笔者不仅成功获得了可用的前端项目更重要的是系统总结并验证了一套行之有效的Vibe Coding 最佳实践指南——从编写结构化的提示词、进行提示词优化到精准定位和修复问题。这套方法论有效提升了大模型编程的确定性与产出质量。至此基于 LangChain 1.0 构建多模态 RAG 系统的系列核心教程已告一段落。然而智能体Agent开发领域的探索永无止境。别忘了LangGraph 也已正式发布 1.0 版本其强大的多智能体编排能力将为应用开发打开全新的想象空间。此外LangChain 官方推出的 deepAgents 等框架正不断降低着复杂智能体系统的开发门槛。笔者对此将不断跟随并一直更新下去让大家每个人都掌握智能体开发必备技能。如何学习大模型 AI 由于新岗位的生产效率要优于被取代岗位的生产效率所以实际上整个社会的生产效率是提升的。但是具体到个人只能说是“最先掌握AI的人将会比较晚掌握AI的人有竞争优势”。这句话放在计算机、互联网、移动互联网的开局时期都是一样的道理。我在一线互联网企业工作十余年里指导过不少同行后辈。帮助很多人得到了学习和成长。我意识到有很多经验和知识值得分享给大家也可以通过我们的能力和经验解答大家在人工智能学习中的很多困惑所以在工作繁忙的情况下还是坚持各种整理和分享。但苦于知识传播途径有限很多互联网行业朋友无法获得正确的资料得到学习提升故此将并将重要的AI大模型资料包括AI大模型入门学习思维导图、精品AI大模型学习书籍手册、视频教程、实战学习等录播视频免费分享出来。第一阶段10天初阶应用该阶段让大家对大模型 AI有一个最前沿的认识对大模型 AI 的理解超过 95% 的人可以在相关讨论时发表高级、不跟风、又接地气的见解别人只会和 AI 聊天而你能调教 AI并能用代码将大模型和业务衔接。大模型 AI 能干什么大模型是怎样获得「智能」的用好 AI 的核心心法大模型应用业务架构大模型应用技术架构代码示例向 GPT-3.5 灌入新知识提示工程的意义和核心思想Prompt 典型构成指令调优方法论思维链和思维树Prompt 攻击和防范…第二阶段30天高阶应用该阶段我们正式进入大模型 AI 进阶实战学习学会构造私有知识库扩展 AI 的能力。快速开发一个完整的基于 agent 对话机器人。掌握功能最强的大模型开发框架抓住最新的技术进展适合 Python 和 JavaScript 程序员。为什么要做 RAG搭建一个简单的 ChatPDF检索的基础概念什么是向量表示Embeddings向量数据库与向量检索基于向量检索的 RAG搭建 RAG 系统的扩展知识混合检索与 RAG-Fusion 简介向量模型本地部署…第三阶段30天模型训练恭喜你如果学到这里你基本可以找到一份大模型 AI相关的工作自己也能训练 GPT 了通过微调训练自己的垂直大模型能独立训练开源多模态大模型掌握更多技术方案。到此为止大概2个月的时间。你已经成为了一名“AI小子”。那么你还想往下探索吗为什么要做 RAG什么是模型什么是模型训练求解器 损失函数简介小实验2手写一个简单的神经网络并训练它什么是训练/预训练/微调/轻量化微调Transformer结构简介轻量化微调实验数据集的构建…第四阶段20天商业闭环对全球大模型从性能、吞吐量、成本等方面有一定的认知可以在云端和本地等多种环境下部署大模型找到适合自己的项目/创业方向做一名被 AI 武装的产品经理。硬件选型带你了解全球大模型使用国产大模型服务搭建 OpenAI 代理热身基于阿里云 PAI 部署 Stable Diffusion在本地计算机运行大模型大模型的私有化部署基于 vLLM 部署大模型案例如何优雅地在阿里云私有部署开源大模型部署一套开源 LLM 项目内容安全互联网信息服务算法备案…学习是一个过程只要学习就会有挑战。天道酬勤你越努力就会成为越优秀的自己。如果你能在15天内完成所有的任务那你堪称天才。然而如果你能完成 60-70% 的内容你就已经开始具备成为一名大模型 AI 的正确特征了。这份完整版的大模型 AI 学习资料已经上传CSDN朋友们如果需要可以微信扫描下方CSDN官方认证二维码免费领取【保证100%免费】