本发明涉及软件工程，具体而言，涉及一种基于线框图转化的网站前端开发方法、装置和存储介质。
背景技术：
1、在当前的数字化和技术迅猛发展的时代背景下，代码生成技术展现出显著的价值和广阔的发展潜力。尤其是基于大型语言模型的自动代码生成方法，这种技术正以前所未有的速度进步和创新，为各种编程任务提供了极大的便利性和效率。同时，网站前端开发作为一个传统而关键的编码领域，在数字化时代中扮演着至关重要的角色。它不仅是企业与客户沟通的桥梁，也是塑造用户体验和品牌形象的关键途径。然而，尽管网站前端开发的价值不断增加，传统的开发方法仍然面临着如开发周期过长、对快速变化的市场需求适应性不足等局限性。然而，目前的代码生成技术主要依赖自然语言输入，这要求用户将前端设计图转换为描述性自然语言，以便使用。这一转换过程中，某些设计细节难以用语言准确描述，从而影响生成代码的准确性和适用性。
2、在传统的代码生成方法中，通常将需要解决的代码问题以自然语言形式输入到大型语言模型，以获得可运行的代码解决方案。这些方法基于结构类似的经典语言模型，并利用数据集进行模型训练，以从通用模型中提炼出解决特定问题的人工智能模型。然而，传统的训练（微调）模型方法存在明显局限。首先，单轮问询中模型的文本输入和输出量均受限，导致传统方法无法直接生成整个软件项目，而只能生成功能级的代码片段，需要有编程基础的程序员手动整合到项目中。其次，这些方法的输入通常限于自然语言，这是由于模型训练数据集主要由自然语言构成。但目前最先进的大型语言模型如gpt-4 turbo已经提供了基于图像生成代码的能力，为解决设计相关的复杂代码开发任务开辟了新的可能性。尤其在网站开发这一与代码和视觉设计密切相关的领域，传统技术在输入限制下的生成效果并不理想。
3、因此，如何将先进的代码生成技术应用于网站前端开发任务中，降低网站前端开发工作量，提高开发效率成为需要解决的技术问题。
技术实现思路
1、本发明旨在至少解决现有技术或相关技术中存在的技术问题之一，公开了一种基于线框图转化的网站前端开发方法、装置和存储介质，解决了从设计图到页面代码转化的技术难题，降低了网站前端开发工作量，提高了开发效率。
2、本发明的第一方面公开了一种基于线框图转化的网站前端开发方法，包括：将每个单一的前端页面视为基本单元，由低保真线框图转化生成单一页面，生成过程包括初稿转化阶段和终稿生成阶段；初稿转化阶段具体包括：接收图像数据，将图像数据中的有效信息转换为便于语言模型理解的内容；调用大型语言模型并采用提示工程技术优化输入，以提升大型语言模型的生成质量，得到初稿文件，其中，提示工程技术包括上下文设置、链式提示、使用示例、负面提示和元提示中的一种或多种；在单轮迭代中同时生成多个初稿文件，采用智能筛选机制对初稿文件进行评分和筛选，得到最优初稿文件；终稿生成阶段具体包括：根据接收到的自然语言输入对最优初稿文件进行修改；调用大型语言模型，通过提示工程技术优化自然语言输入，得到需求对应的功能代码；在代码注入算法的辅助下，将功能级代码注入到初稿文件的对应位置，实现页面更新；在多组单一页面转化完成后，通过页面路由分配算法和窗口跳转代码注入实现多个单一页面的对接，生成完整的网站前端页面。
3、在该技术方案中，本发明提出了一种创新的面向网站开发的线框图转化技术，命名为flexgpt（front layout expert gpt）。这一技术以当前性能卓越的大型语言模型gpt-4 turbo为核心，无需经过繁琐的训练和微调过程，即可直接处理图像输入。考虑到仅依赖大型语言模型根据线框图生成网站前端代码可能导致结果的不准确性，flexgpt采用了精细化的提示工程技术来优化输入，进而提升代码生成的精确度和相关性。提示工程通过精心设计输入给大型语言模型的“提示”，确保输出结果的准确性和适用性。
4、根据本发明公开的基于线框图转化的网站前端开发方法，优选地，上下文设置，具体包括：通过给大型语言模型指定特定的角色和专业背景，引导模型从特定视角或专业知识领域解决问题；上下文设置还额外提供经过设计的背景信息或上下文，帮助模型理解请求的语境。
5、根据本发明公开的基于线框图转化的网站前端开发方法，优选地，链式提示，具体包括：拆解复杂提示，转而构建一系列相关提示，逐步引导大型语言模型提供所需信息；将前端页面设计拆分为多个元素，引导模型逐步理解低保真线框图的内容，元素包括：布局、图像、颜色和边界。
6、根据本发明公开的基于线框图转化的网站前端开发方法，优选地，使用示例，具体包括：给出一个或多个期望结果的示例，以帮助大型语言模型更好地理解代码生成的预期，包括设定常见的网站布局示例。
7、根据本发明公开的基于线框图转化的网站前端开发方法，优选地，负面提示，具体包括：明确指出不想要的信息类型，帮助大型语言模型更准确地聚焦于所需答案，包括广泛使用负面提示设定代码生成的边界，降低生成结果与低保真线框图的偏差。
8、根据本发明公开的基于线框图转化的网站前端开发方法，优选地，元提示，具体包括：直接向大型语言模型说明正在进行提示工程，询问如何改进提示获得更好的答案，以增大提示工程的信息熵，用尽量清晰凝练的提示引导模型生成美观、符合设计的前端页面。
9、根据本发明公开的基于线框图转化的网站前端开发方法，优选地，采用智能筛选机制对初稿文件进行评分和筛选，得到最优初稿文件的步骤，具体包括：基于经过精炼的关键词和原始低保真线框图动态构成的评判标准向量，引导大型语言模型进行综合权衡，挑选出与标准最为契合、相似度最高的代码作为最优初稿，期间允许用户在预览界面中查看生成的初稿文件，并根据用户指令决定是进入终稿生成阶段还是转而重新修改低保真线框图。
10、在该技术方案中，在代码生成过程中引入了一种创新的基于动态评价指标的智能筛选机制。具体来说，面对同一轮的输入，flexgpt能够自动生成一系列的前端页面方案，并将这些方案作为智能筛选的候选项。通过收集用户输入的低保真线框图和自然语言提示，并提取其中的关键词，flexgpt构建了一组动态评价指标。这些指标与生成的前端页面一起被反向输入到大型语言模型中，模型据此评估并选出在给定评价指标体系下表现最佳的前端页面。
11、根据本发明公开的基于线框图转化的网站前端开发方法，优选地，代码注入算法的核心是块序列号机制，将块视为基本单位，根据二分法为前端页面的所有块赋予序列号；初稿文件的块序列号通过均分设定值范围得出，后续新增块序列号为前后块序列号的均值，修改块代码则通过序列号机制直接覆盖实现修改，更新后，允许用户选择继续提交自然语言需求或导出页面；页面路由分配算法接收用户的自然语言输入，调用大型语言模型生成网站整体架构并分配页面路由，而窗口跳转代码注入利用前期提示工程留下的注入锚点将对应不同业务场景的跳转代码段注入到恰当位置，最终实现网站的全面前端构建。
12、在该技术方案中，为了解决代码片段组合问题，flexgpt还创新地提出了一种代码注入方法。这种方法通过为前端页面的每个部分（如div块）分配序列号，利用这些序列号指导大型语言模型插入或修改特定部分的代码。借助自动化工具，序列号可以按顺序排列，从而高效地实现代码块的插入或覆盖。针对整体软件项目的组合问题，flexgpt提出了一种页面对接方法，采用智能锚点识别技术和自建的跳转功能代码库。在单页面生成过程中，flexgpt会在涉及跳转的元素处预设锚点。在所有页面生成完成后，模型会在这些锚点处插入跳转功能代码，以实现前端页面之间的顺畅对接。
13、本发明的第二方面公开了一种基于线框图转化的网站前端开发装置，包括：存储器，用于存储程序指令；处理器，用于调用存储器中存储的程序指令以实现如上述任一技术方案的基于线框图转化的网站前端开发方法。
14、本发明的第三方面公开了一种计算机可读存储介质，该计算机可读存储介质存储有程序代码，程序代码用于实现如上述任一技术方案的基于线框图转化的网站前端开发方法。
15、本发明的有益效果至少包括：本发明（flexgpt）利用强大的大型语言模型能力，结合精心设计的提示工程技术和自研的智能筛选、代码注入及页面对接策略，实现了从低保真线框图到复杂的网站前端项目的转化，为自定义设计需求和无编程经验的用户提供了理想的解决方案。此外，从提示工程的角度考虑，本发明的效果也显著优于现有方案：例如，draw-a-ui在处理界面设计较为复杂的低保真线框图时，其生成效果显著下降，而本发明能够有效处理复杂布局，如圣杯布局、瀑布流布局等，生成相应的高质量前端页面，这一能力展示了本发明在技术上的先进性和在实际应用中的广泛适用性。
1.一种基于线框图转化的网站前端开发方法，其特征在于，包括：
2.根据权利要求1所述的基于线框图转化的网站前端开发方法，其特征在于，所述上下文设置，具体包括：
3.根据权利要求1所述的基于线框图转化的网站前端开发方法，其特征在于，所述链式提示，具体包括：
4.根据权利要求1所述的基于线框图转化的网站前端开发方法，其特征在于，所述使用示例，具体包括：
5.根据权利要求1所述的基于线框图转化的网站前端开发方法，其特征在于，所述负面提示，具体包括：
6.根据权利要求1所述的基于线框图转化的网站前端开发方法，其特征在于，所述元提示，具体包括：
7.根据权利要求1所述的基于线框图转化的网站前端开发方法，其特征在于，所述采用智能筛选机制对所述初稿文件进行评分和筛选，得到最优初稿文件的步骤，具体包括：
8.根据权利要求1至7中任一项所述的基于线框图转化的网站前端开发方法，其特征在于，所述代码注入算法的核心是块序列号机制，将块视为基本单位，根据二分法为前端页面的所有块赋予序列号；初稿文件的块序列号通过均分设定值范围得出，后续新增块序列号为前后块序列号的均值，修改块代码则通过序列号机制直接覆盖实现修改，更新后，允许用户选择继续提交自然语言需求或导出页面；
9.一种基于线框图转化的网站前端开发装置，其特征在于，包括：
10.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质存储有程序代码，所述程序代码用于实现如权利要求1至8中任一项所述的基于线框图转化的网站前端开发方法。
