1.一种基于线框图转化的网站前端开发方法，其特征在于，包括：
将每个单一的前端页面视为基本单元，由低保真线框图转化生成单一页面，生成过程包括初稿转化阶段和终稿生成阶段；
所述初稿转化阶段具体包括：
接收图像数据，将所述图像数据中的有效信息转换为便于语言模型理解的内容；
调用大型语言模型并采用提示工程技术优化输入，以提升所述大型语言模型的生成质量，得到初稿文件，其中，所述提示工程技术包括上下文设置、链式提示、使用示例、负面提示和元提示中的一种或多种；
在单轮迭代中同时生成多个所述初稿文件，采用智能筛选机制对所述初稿文件进行评分和筛选，得到最优初稿文件；
所述终稿生成阶段具体包括：
根据接收到的自然语言输入对所述最优初稿文件进行修改；
调用大型语言模型，通过提示工程技术优化所述自然语言输入，得到需求对应的功能代码；
在代码注入算法的辅助下，将功能级代码注入到初稿文件的对应位置，实现页面更新；
在多组单一页面转化完成后，通过页面路由分配算法和窗口跳转代码注入实现多个所述单一页面的对接，生成完整的网站前端页面；
其中，所述代码注入算法的核心是块序列号机制，将块视为基本单位，根据二分法为前端页面的所有块赋予序列号；初稿文件的块序列号通过均分设定值范围得出，后续新增块序列号为前后块序列号的均值，修改块代码则通过序列号机制直接覆盖实现修改，更新后，允许用户选择继续提交自然语言需求或导出页面；
所述页面路由分配算法接收用户的自然语言输入，调用大型语言模型生成网站整体架构并分配页面路由，而窗口跳转代码注入利用前期提示工程留下的注入锚点将对应不同业务场景的跳转代码段注入到恰当位置，最终实现网站的全面前端构建；
所述大型语言模型为GPT模型；
所述上下文设置具体包括：通过给所述大型语言模型指定特定的角色和专业背景，引导模型从特定视角或专业知识领域解决问题；
所述链式提示具体包括：拆解复杂提示，转而构建一系列相关提示，逐步引导所述大型语言模型提供所需信息；
所述使用示例具体包括：给出一个或多个期望结果的示例，以帮助所述大型语言模型更好地理解代码生成的预期；
所述负面提示具体包括：明确指出不想要的信息类型，帮助所述大型语言模型更准确地聚焦于所需答案，包括广泛使用负面提示设定代码生成的边界，降低生成结果与低保真线框图的偏差；
所述元提示具体包括：直接向所述大型语言模型说明正在进行提示工程，询问如何改进提示获得更好的答案，以增大提示工程的信息熵。
2.根据权利要求1所述的基于线框图转化的网站前端开发方法，其特征在于，所述上下文设置，具体包括：
上下文设置还额外提供经过设计的背景信息或上下文，帮助模型理解请求的语境。
3.根据权利要求1所述的基于线框图转化的网站前端开发方法，其特征在于，所述链式提示，具体包括：
将前端页面设计拆分为多个元素，引导模型逐步理解低保真线框图的内容，所述元素包括：布局、图像、颜色和边界。
4.根据权利要求1所述的基于线框图转化的网站前端开发方法，其特征在于，所述使用示例，具体包括：
设定常见的网站布局示例。
5.根据权利要求1所述的基于线框图转化的网站前端开发方法，其特征在于，所述采用智能筛选机制对所述初稿文件进行评分和筛选，得到最优初稿文件的步骤，具体包括：
基于经过精炼的关键词和原始低保真线框图动态构成的评判标准向量，引导所述大型语言模型进行综合权衡，挑选出与标准最为契合、相似度最高的代码作为所述最优初稿，期间允许用户在预览界面中查看生成的初稿文件，并根据用户指令决定是进入终稿生成阶段还是转而重新修改低保真线框图。
6.一种基于线框图转化的网站前端开发装置，其特征在于，包括：
存储器，用于存储程序指令；
处理器，用于调用所述存储器中存储的所述程序指令以实现如权利要求1至5中任一项所述的基于线框图转化的网站前端开发方法。
7.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质存储有程序代码，所述程序代码用于实现如权利要求1至5中任一项所述的基于线框图转化的网站前端开发方法。

技术领域
[0001]本发明涉及软件工程技术领域，具体而言，涉及一种基于线框图转化的网站前端开发方法、装置和存储介质。
背景技术
[0002]在当前的数字化和技术迅猛发展的时代背景下，代码生成技术展现出显著的价值和广阔的发展潜力。尤其是基于大型语言模型的自动代码生成方法，这种技术正以前所未有的速度进步和创新，为各种编程任务提供了极大的便利性和效率。同时，网站前端开发作为一个传统而关键的编码领域，在数字化时代中扮演着至关重要的角色。它不仅是企业与客户沟通的桥梁，也是塑造用户体验和品牌形象的关键途径。然而，尽管网站前端开发的价值不断增加，传统的开发方法仍然面临着如开发周期过长、对快速变化的市场需求适应性不足等局限性。然而，目前的代码生成技术主要依赖自然语言输入，这要求用户将前端设计图转换为描述性自然语言，以便使用。这一转换过程中，某些设计细节难以用语言准确描述，从而影响生成代码的准确性和适用性。
[0003]在传统的代码生成方法中，通常将需要解决的代码问题以自然语言形式输入到大型语言模型，以获得可运行的代码解决方案。这些方法基于结构类似的经典语言模型，并利用数据集进行模型训练，以从通用模型中提炼出解决特定问题的人工智能模型。然而，传统的训练（微调）模型方法存在明显局限。首先，单轮问询中模型的文本输入和输出量均受限，导致传统方法无法直接生成整个软件项目，而只能生成功能级的代码片段，需要有编程基础的程序员手动整合到项目中。其次，这些方法的输入通常限于自然语言，这是由于模型训练数据集主要由自然语言构成。但目前最先进的大型语言模型如GPT-4 Turbo已经提供了基于图像生成代码的能力，为解决设计相关的复杂代码开发任务开辟了新的可能性。尤其在网站开发这一与代码和视觉设计密切相关的领域，传统技术在输入限制下的生成效果并不理想。
[0004]因此，如何将先进的代码生成技术应用于网站前端开发任务中，降低网站前端开发工作量，提高开发效率成为需要解决的技术问题。
发明内容
[0005]本发明旨在至少解决现有技术或相关技术中存在的技术问题之一，公开了一种基于线框图转化的网站前端开发方法、装置和存储介质，解决了从设计图到页面代码转化的技术难题，降低了网站前端开发工作量，提高了开发效率。
[0006]本发明的第一方面公开了一种基于线框图转化的网站前端开发方法，包括：将每个单一的前端页面视为基本单元，由低保真线框图转化生成单一页面，生成过程包括初稿转化阶段和终稿生成阶段；初稿转化阶段具体包括：接收图像数据，将图像数据中的有效信息转换为便于语言模型理解的内容；调用大型语言模型并采用提示工程技术优化输入，以提升大型语言模型的生成质量，得到初稿文件，其中，提示工程技术包括上下文设置、链式提示、使用示例、负面提示和元提示中的一种或多种；在单轮迭代中同时生成多个初稿文件，采用智能筛选机制对初稿文件进行评分和筛选，得到最优初稿文件；终稿生成阶段具体包括：根据接收到的自然语言输入对最优初稿文件进行修改；调用大型语言模型，通过提示工程技术优化自然语言输入，得到需求对应的功能代码；在代码注入算法的辅助下，将功能级代码注入到初稿文件的对应位置，实现页面更新；在多组单一页面转化完成后，通过页面路由分配算法和窗口跳转代码注入实现多个单一页面的对接，生成完整的网站前端页面。
[0007]在该技术方案中，本发明提出了一种创新的面向网站开发的线框图转化技术，命名为FlexGPT（Front Layout Expert GPT）。这一技术以当前性能卓越的大型语言模型GPT-4 Turbo为核心，无需经过繁琐的训练和微调过程，即可直接处理图像输入。考虑到仅依赖大型语言模型根据线框图生成网站前端代码可能导致结果的不准确性，FlexGPT采用了精细化的提示工程技术来优化输入，进而提升代码生成的精确度和相关性。提示工程通过精心设计输入给大型语言模型的“提示”，确保输出结果的准确性和适用性。
[0008]根据本发明公开的基于线框图转化的网站前端开发方法，优选地，上下文设置，具体包括：通过给大型语言模型指定特定的角色和专业背景，引导模型从特定视角或专业知识领域解决问题；上下文设置还额外提供经过设计的背景信息或上下文，帮助模型理解请求的语境。
[0009]根据本发明公开的基于线框图转化的网站前端开发方法，优选地，链式提示，具体包括：拆解复杂提示，转而构建一系列相关提示，逐步引导大型语言模型提供所需信息；将前端页面设计拆分为多个元素，引导模型逐步理解低保真线框图的内容，元素包括：布局、图像、颜色和边界。
[0010]根据本发明公开的基于线框图转化的网站前端开发方法，优选地，使用示例，具体包括：给出一个或多个期望结果的示例，以帮助大型语言模型更好地理解代码生成的预期，包括设定常见的网站布局示例。
[0011]根据本发明公开的基于线框图转化的网站前端开发方法，优选地，负面提示，具体包括：明确指出不想要的信息类型，帮助大型语言模型更准确地聚焦于所需答案，包括广泛使用负面提示设定代码生成的边界，降低生成结果与低保真线框图的偏差。
[0012]根据本发明公开的基于线框图转化的网站前端开发方法，优选地，元提示，具体包括：直接向大型语言模型说明正在进行提示工程，询问如何改进提示获得更好的答案，以增大提示工程的信息熵，用尽量清晰凝练的提示引导模型生成美观、符合设计的前端页面。
[0013]根据本发明公开的基于线框图转化的网站前端开发方法，优选地，采用智能筛选机制对初稿文件进行评分和筛选，得到最优初稿文件的步骤，具体包括：基于经过精炼的关键词和原始低保真线框图动态构成的评判标准向量，引导大型语言模型进行综合权衡，挑选出与标准最为契合、相似度最高的代码作为最优初稿，期间允许用户在预览界面中查看生成的初稿文件，并根据用户指令决定是进入终稿生成阶段还是转而重新修改低保真线框图。
[0014]在该技术方案中，在代码生成过程中引入了一种创新的基于动态评价指标的智能筛选机制。具体来说，面对同一轮的输入，FlexGPT能够自动生成一系列的前端页面方案，并将这些方案作为智能筛选的候选项。通过收集用户输入的低保真线框图和自然语言提示，并提取其中的关键词，FlexGPT构建了一组动态评价指标。这些指标与生成的前端页面一起被反向输入到大型语言模型中，模型据此评估并选出在给定评价指标体系下表现最佳的前端页面。
[0015]根据本发明公开的基于线框图转化的网站前端开发方法，优选地，代码注入算法的核心是块序列号机制，将块视为基本单位，根据二分法为前端页面的所有块赋予序列号；初稿文件的块序列号通过均分设定值范围得出，后续新增块序列号为前后块序列号的均值，修改块代码则通过序列号机制直接覆盖实现修改，更新后，允许用户选择继续提交自然语言需求或导出页面；页面路由分配算法接收用户的自然语言输入，调用大型语言模型生成网站整体架构并分配页面路由，而窗口跳转代码注入利用前期提示工程留下的注入锚点将对应不同业务场景的跳转代码段注入到恰当位置，最终实现网站的全面前端构建。
[0016]在该技术方案中，为了解决代码片段组合问题，FlexGPT还创新地提出了一种代码注入方法。这种方法通过为前端页面的每个部分（如div块）分配序列号，利用这些序列号指导大型语言模型插入或修改特定部分的代码。借助自动化工具，序列号可以按顺序排列，从而高效地实现代码块的插入或覆盖。针对整体软件项目的组合问题，FlexGPT提出了一种页面对接方法，采用智能锚点识别技术和自建的跳转功能代码库。在单页面生成过程中，FlexGPT会在涉及跳转的元素处预设锚点。在所有页面生成完成后，模型会在这些锚点处插入跳转功能代码，以实现前端页面之间的顺畅对接。
[0017]本发明的第二方面公开了一种基于线框图转化的网站前端开发装置，包括：存储器，用于存储程序指令；处理器，用于调用存储器中存储的程序指令以实现如上述任一技术方案的基于线框图转化的网站前端开发方法。
[0018]本发明的第三方面公开了一种计算机可读存储介质，该计算机可读存储介质存储有程序代码，程序代码用于实现如上述任一技术方案的基于线框图转化的网站前端开发方法。
[0019]本发明的有益效果至少包括：本发明（FlexGPT）利用强大的大型语言模型能力，结合精心设计的提示工程技术和自研的智能筛选、代码注入及页面对接策略，实现了从低保真线框图到复杂的网站前端项目的转化，为自定义设计需求和无编程经验的用户提供了理想的解决方案。此外，从提示工程的角度考虑，本发明的效果也显著优于现有方案：例如，draw-a-ui在处理界面设计较为复杂的低保真线框图时，其生成效果显著下降，而本发明能够有效处理复杂布局，如圣杯布局、瀑布流布局等，生成相应的高质量前端页面，这一能力展示了本发明在技术上的先进性和在实际应用中的广泛适用性。
附图说明
[0020]图1示出了根据本发明的一个实施例的基于线框图转化的网站前端开发方法的系统架构示意图。
[0021]图2示出了根据本发明的一个实施例的基于线框图转化的网站前端开发装置的示意框图。
具体实施方式
[0022]为了能够更清楚地理解本发明的上述目的、特征和优点，下面结合附图和具体实施方式对本发明进行进一步的详细描述。
[0023]在下面的描述中阐述了很多具体细节以便于充分理解本发明，但是，本发明还可以采用其他不同于在此描述的其他方式来实施，因此，本发明并不限于下面公开的具体实施例的限制。
[0024]传统的代码生成技术主要关注于单一功能的代码生成，但在处理大型工程项目时，它们在理解和生成能力上常显不足。与此同时，大型语言模型通常通过将自然语言转换成代码来进行编程，但这种方法在网站开发的实际生产实践中并不总是理想。事实上，手工或电子绘图方式更加符合网站界面设计的工业标准流程。在这样的背景下，由图像转化而来的代码在实际应用中更受欢迎，因为它更贴合网站开发的实际需求和流程。低保真线框图（Low-Fidelity Wireframe）是一种简化的设计表示，用于在早期的网站或应用开发阶段规划和展示页面布局和内容安排。这些线框图通常是手绘的或使用基本的图形工具创建的，重点在于快速传达设计的基本结构和功能，而不是细节或视觉设计。为了满足高效率网站开发的需求，本发明提出了一种基于线框图转化的网站前端开发方法，实现了基于大型语言模型的低保真线框图向网站前端页面转化的技术（FlexGPT），该方法填补了从设计图到页面代码转化的空白，采用提示工程技术，通过智能筛选和多轮迭代的用户需求采集，实现了精准且高效的网站前端开发。
[0025]如图1所示，根据本发明的一个实施例，本发明公开的基于线框图转化的网站前端开发方法包括：图像编码、初稿阶段的模型调度、初稿阶段的提示工程与代码生成、智能筛选、用户预览、终稿阶段的模型调度、终稿阶段的提示工程与代码生成、代码注入、导出页面、页面对接等步骤。具体地：
[0026]将每个单一的前端页面视为基本单元，由一张低保真线框图转化生成。在单页转化的流程中，将整个过程区分为初稿转化和终稿生成两个阶段。
[0027]初稿转化阶段：
[0028]首先接收图像数据，并将其通过Base64编码转换为ASCII字符串，这一步骤是为了使语言模型能够更有效地处理和理解设计图的内容，确保原始数据的充分利用。在代码生成过程，调用大型语言模型，并采用多种提示工程技术来优化输入，以引导模型生成更高质量的输出。本发明使用了如上下文设置、链式提示、使用示例、负面提示和元提示等提示工程技术，这些都是优化代码生成过程的有效手段：
[0029]上下文设置通过给模型指定特定的角色和专业背景，引导模型从特定视角或专业知识领域解决问题。此外，上下文设置还额外提供经过设计的背景信息或上下文，帮助模型理解请求的语境。例如当用户申请生成校园官方网站时，将模型的角色设定为校园网站设计开发者和运维人员。
[0030]链式提示拆解复杂提示，转而构建一系列相关提示，逐步引导模型提供所需信息。这种方法类似于分解复杂问题为一系列更简单的问题。将前端页面设计拆分为布局、图像、颜色、边界等多个元素，引导大模型逐步理解低保真线框图的内容。
[0031]使用示例给出一个或多个期望结果的示例，这可以帮助模型更好地理解代码生成的预期。对于前端页面开发，本发明设定了常见的网站布局示例，如单栏布局、圣杯布局、双飞翼布局、瀑布流布局等，通过研究示例的特点，模型可以更精准地实现低保真线框图地设计效果。
[0032]负面提示明确指出不想要的信息类型，帮助模型更准确地聚焦于所需答案。本发明广泛使用负面提示设定代码生成的边界，降低生成结果与低保真线框图的偏差，降低模型生成的“幻觉”现象。
[0033]元提示直接向模型说明正在进行提示工程，询问如何改进提示获得更好的答案。使用元提示方法增大提示工程的信息熵，用尽量清晰凝练的提示引导模型生成美观、符合设计的前端页面。
[0034]通过上述步骤，应用多种提示工程技术强化输入处理，在单轮迭代中同时生成多个初稿文件。随后采用智能筛选机制对初稿进行评分和筛选，以选出最优的生成结果。这一筛选过程基于经过精炼的关键词和原始低保真线框图动态构成的评判标准向量，引导大型语言模型进行综合权衡，挑选出与标准最为契合、相似度最高的代码作为最终的初稿，旨在降低模型随机性对结果的影响。用户在预览界面中可查看生成的初稿文件，并据此决定是进入终稿生成阶段还是转而重新修改低保真线框图。
[0035]在该实施例中，动态评价指标的智能筛选可能被机器学习算法替代，这些算法可以根据训练数据自动调整和优化输出结果，也就传统的训练/微调模型的方法，这可能会提供更高的精确度和适应性，但需要大量的数据支撑和资源消耗。
[0036]终稿生成阶段：
[0037]根据用户使用自然语言输入对初稿的修改需求，再度调用大型语言模型，通过提示工程技术优化自然语言输入，得到需求对应的功能代码。在代码注入算法的辅助下，功能级代码被注入到初稿文件的对应位置，实现页面更新。代码注入算法的核心是块序列号机制，该算法将块视为基本单位，根据二分法为前端页面的所有块赋予序列号。初稿文件的块序列号通过均分设定值范围得出，后续新增块序列号为前后块序列号的均值（向下取整）。修改块代码则通过序列号机制直接覆盖实现修改。更新后，用户同样可以选择继续提交自然语言需求或导出页面。完成多组单页转化后，通过页面路由分配算法和窗口跳转代码注入实现页面对接。页面路由分配算法接收用户的自然语言输入，调用大型语言模型生成网站整体架构并分配页面路由，而窗口跳转代码注入利用前期提示工程留下的注入锚点将对应不同业务场景的跳转代码段注入到恰当位置，最终实现网站的全面前端构建。
[0038]在该实施例中，除了基于块序列号的代码注入，还可以考虑使用基于标签或其他分区的方法来识别和插入代码片段。这种方式可能同样可以对应于HTML元素，从而实现代码注入的过程。智能锚点和跳转功能代码库的替代方案包括：使用预定义的模板或框架来自动化页面之间的跳转，这可能涉及更多的手工设置，为不同的网站提供定制化的模板方案。
[0039]如图2所示，根据本发明的又一个实施例还公开了一种基于线框图转化的网站前端开发装置200，包括：存储器201，用于存储程序指令；处理器202，用于调用存储器中存储的程序指令以实现如上述实施例的基于线框图转化的网站前端开发方法。
[0040]根据本发明的又一个实施例还公开了一种计算机可读存储介质，该计算机可读存储介质存储有程序代码，程序代码用于实现如上述实施例的基于线框图转化的网站前端开发方法。
[0041]根据上述实施例可知本发明的核心创新在于将线框图转化为前端页面的优化技术，以及自动化地构建多个前端页面以形成完整软件项目的方法。这一过程主要涵盖以下几个关键点：
[0042]（1）基于块序列号的代码注入方法：本方法在创新性地对前端页面进行块状分区的基础上，采用类似于二分法的策略计算新块的序列号。通过结合提示工程，可以生成带有序列号的代码片段，有效实现了代码片段的组合。这一方法解决了在单次询问中受限于文本输入和输出量的问题，提高了代码生成的灵活性和实用性。
[0043]（2）结合智能锚点识别技术和跳转功能代码库的页面对接工具：为构建前端项目，建立了包含常用跳转功能的代码库。利用大型语言模型的智能识别能力，本发明能够精确地识别出需要跳转功能的元素，并在相应位置插入锚点。这一步骤是构建整体软件项目的关键环节，它使页面组合变得更加高效和准确。
[0044]（3）构建动态评价指标的智能筛选技术：本发明通过结合关键词提取和低保真线框图来构建一系列动态评价指标，并将这些指标反向输入到大型语言模型中。这种方法优化了输出结果，显著提升了系统的整体生成效果。
[0045]与传统方案相比，本发明具有如下显著差异：首先，在功能范围上，传统方案主要针对单一前端页面的生成，无法直接构建完整的软件项目。它们更多地提供一个基础的开发模板，而用户仍需具备一定的编程技能来进一步开发。其次，在界面样式和优化能力方面，传统方案生成的界面样式相对简单，且缺乏多轮优化的能力。相比之下，本发明在经过第一轮生成和智能筛选后，所产生的前端页面在复杂度上已远超这些传统方法。并且，本发明能够根据第二轮的自然语言修改需求进行优化，生成的页面在精美程度和实用性方面接近于现实世界的实际网页，实质上为用户提供了即时可用的前端页面解决方案。此外，从提示工程的角度考虑，本发明的效果也显著优于现有方案。例如，draw-a-ui在处理界面设计较为复杂的低保真线框图时，其生成效果显著下降。而本发明能够有效处理复杂布局，如圣杯布局、瀑布流布局等，生成相应的高质量前端页面。这一能力展示了本发明在技术上的先进性和在实际应用中的广泛适用性。
[0046]上述实施例的各种方法中的全部或部分步骤是可以通过程序来控制相关的硬件来完成，该程序可以存储于可读存储介质中，存储介质包括只读存储器(Read—OnlyMemory，ROM) 、随机存储器(Random Access Memory，RAM) 、可编程只读存储器(Programmable Read-only Memory，PROM) 、可擦除可编程只读存储器(ErasableProgrammable Read Only Memory，EPROM) 、一次可编程只读存储器(One-timeProgrammable Read-Only Memory，OTPROM) 、电子抹除式可复写只读存储器(Electrically-Erasable Programmable Read-Only Memory，EEPROM) 、只读光盘(CompactDisc Read—Only Memory，CD-ROM) 或其他光盘存储器、磁盘存储器、磁带存储器、或者能够用于携带或存储数据的可读的任何其他介质。
[0047]以上所述仅为本发明的优选实施例而已，并不用于限制本发明，对于本领域的技术人员来说，本发明可以有各种更改和变化。凡在本发明的精神和原则之内，所作的任何修改、等同替换、改进等，均应包含在本发明的保护范围之内。