本发明揭示了一种基于大型语言模型(LLM)的模块化界面生成方法及系统,旨在自动化生成网站的一套规范的界面代码,提高网站开发速度。该系统通过集成LLM大模型技术,实现从用户输入到界面生成的全流程自动化处理,结合由LLM选择代码的方式使代码部分更符合开发标准,并使用模块化生成确保界面代码的生成不受大型语言模型(LLM)的回复量限制。
本发属于人工智能技术领域,特别涉及一种利用大型语言模型(LLM)进行前端界面代码生成的技术,以及相关的界面渲染技术。
背景技术:在传统的前端界面代码生成领域,通常直接由界面描述生成前端界面代码。这种生成方法存在代码内容少和稳定性低的缺陷,尤其是在面对需要生成复杂描述的界面时,这些系统往往力不从心。此外,它们也不能基于有限的描述生成符合业务需求的、结构合理的一套网站代码,导致生成的前端界面代码在内容的可用性上存在不足。
本发明旨在提供一种利用大型语言模型(LLM)的前端界面代码生成方法及系统,以实现在涉及界面描述有限、生成内容要求高的前端界面代码生成过程中的有效输出和再次生成。针对这一技术难题,本发明的技术方案如下:
用户层:
数据采集 本发明首先涉及到用户界面层的数据提交阶段,用户通过表单提交的网站描述,包括网站名称、主题描述、内容描述和带有示例数据的excel文档等。
001 本发明的实施始于用户界面层的数据采集阶段,该阶段涉及用户提交的前端界面描述数据的采集。
002 在数据采集阶段,系统通过前端表单接收用户提交的界面描述数据,数据包括网站名称、主题描述、内容描述、交互需求和带有示例数据的excel文档等
数据采集层:
数据提取和参数化封装 表单接收的数据转换为结构化的数据集,为后续处理流程提供数据支撑
003 系统通过 xlsx(SheetJS)库从用户上传的 Excel 文件中提取出示例数据,并将其转化为结构化的 JSON 数据,以确保数据能够被系统正确识别和后续处理。
004 将表单数据处理成可供合并的结构
005 将结构化的表单数据和提取出的JSON格式示例数据合并后,转化为结构化的数据集,为后续处理流程提供数据支撑
参数处理层:
参数关联性拓展 将预处理后的数据通过输入目的分类,插入对应的提示模板,由AI拓展为界面生成过程中所需各个步骤和各个模块所需的上下文变量,以实现生成的界面的各模块和参数关联。
006 系统将预处理数据按输入目的分类,如网站名称、主题描述、交互需求、示例数据等,以便为后续生成提供清晰的结构支持。
007 系统将分类后的数据插入预定义的提示模板中,确保数据与各模块的需求准确对应,从而减少错误并提高处理效率。
008 AI根据模板中的上下文和界面生成需求,自动生成每个模块所需的上下文变量,以确保生成过程的准确性和一致性。
009 系统通过上下文关联技术,精确匹配每个模块所需的变量和数据项,确保各模块及其参数之间的高度关联,满足不同的界面定制需求。
010 拓展后的参数信息存储在结构化数据库中,便于后续的快速调用和更新,从而提升整体生成和更新的效率。
模型处理层:
模型行为拓展 本发明实现了一种模型行为拓展机制,该机制将对界面模块的操作总结为对操作的描述,将这些描述注入提示模板中,由AI根据描述选择对界面模块的操作。将对代码层的操作交由系统,生成更加稳定的代码并由此对将由AI生成的代码体量扩大。
011 系统首先将界面模块的操作进行总结,转化为操作描述,这些描述包括操作类型、对象和条件等基本信息。此过程的目的是为AI提供清晰的操作框架,确保后续选择合适的操作。
012 这些操作描述被插入到预定义的提示模板中,确保每个操作具备足够的上下文信息。此过程的目的是为AI提供充足的上下文支持,使其能够准确选择操作并生成代码。
013 AI根据对该界面模块的描述,从操作描述中选择最适合的操作。此过程的目的是通过AI的智能选择,确保生成的操作符合模块的功能需求,并提高生成代码的准确性和效果。
代码生成层:
操作需求转化为动态参数化替换 本发明实现了一种将抽象操作需求转化为具体界面组件功能的动态参数化替换机制,从上下文变量提选择操作需求,系统根据需求从数据集中提取相关配置参数,并将这些需求映射到具体的占位符选择。通过对模板中占位符的动态替换,界面组件将根据需求被转化为具备相应功能和行为的实际组件。此机制通过根据用户的操作需求灵活选择和替换占位符,实现各种界面元素的样式与行为定制,确保不同需求下的高度适配性和功能实现。
014 系统将AI的操作分类为页面结构操作、样式设置操作、交互逻辑操作和渲染配置操作,检索出对应操作所需模板,并从数据集中检索对应的配置参数,为界面组件的生成提供精确的基础数据。
015 系统将提取的操作需求映射到模板中的占位符,并根据需求内容替换占位符的默认值,从而使模板能够反映用户的具体需求。
016 替换后的占位符被转化为实际的界面组件配置,组件的功能和行为由配置参数决定,系统根据这些配置实时调整组件的功能属性。
017 系统根据用户需求灵活调整和替换组件的样式、行为和参数,确保界面元素在不同需求下能够高度适配,同时保留用户期望的功能实现。
模型生成内容校验
018 系统根据内容模块的结构要求和数据集中的示例数据,生成相应的数据,以满足具体需求。
019 生成的数据与知识库中的现有数据进行比对,若发现知识库中已有类似数据,则将生成的数据作为有效数据使用;若未找到匹配数据,则视为无效数据,系统会重新生成。
020 经过验证的有效数据将被存入知识库,进一步丰富和完善知识库的内容,提升系统的数据管理能力
代码块的逻辑组装与前端界面生成 本发明通过精确的组装逻辑,将多个界面组件(如页面结构、样式、逻辑和渲染配置)动态拼接成完整的前端界面代码。系统根据需求,从模板中提取各模块(如表示主体内容的代码、样式设置、交互逻辑和配置项),并通过参数替换和逻辑关联将其有序组合。每个模块的组装不仅依赖于配置,还需与其他模块对接,确保最终界面的兼容性和一致性。此机制通过自动化替换确保生成的代码具有高效适配性和可扩展性。
021 系统根据用户需求,从模板中提取各界面模块的代码片段,包括页面结构、样式设置、交互逻辑和渲染配置,为后续的代码组装提供必要的组件。
022 系统对提取的代码片段进行参数替换,将模板中的占位符替换为实际的配置值,使得代码能够反映用户的具体需求。
023 替换后的代码片段通过逻辑关联规则进行有序组合,系统按照页面的整体逻辑将各模块代码拼接为完整的前端界面代码。
024 系统在组装代码时,检查各模块之间的接口和依赖关系,确保代码在功能和结构上的兼容性,避免因逻辑冲突导致的界面问题。
025 组装完成的界面代码经过验证后生成完整的页面文件,确保其在不同需求场景下的适配性和扩展性,为最终的用户界面提供稳定、高效的实现。
界面渲染层: