本发明涉及一种电数字数据处理，尤其涉及用户界面的实现，具体为一种基于流式输出的前端渲染优化方法。
背景技术：
1、当前，gpt等生成式预训练模型广泛应用，数据处理与分析、实时交互体验成为了关键议题。流式输出技术作为连接ai模型与用户界面的桥梁，在实时数据传输与展示方面发挥着重要作用。然而，在复杂多变的网络环境和大规模数据处理需求下，传统的流式输出技术在稳定性和效率方面面临诸多挑战；前端渲染作为展示层的核心技术，直接影响用户体验。在ai服务中，前端渲染不仅需要处理来自gpt等模型的实时数据流，还需确保数据格式的正确展示，这对于提升整体服务的响应速度和用户满意度至关重要。
2、gpt模型在处理大规模数据时，依赖于稳定的服务器环境和高速网络连接，然而，服务器负载波动、网络延迟或中断等因素，导致流式输出过程中出现卡顿或延迟，影响数据的实时性和连续性，由于gpt模型返回的数据量因查询复杂度和模型内部处理机制的不同而差异显著，这导致在流式传输过程中，数据流的密度不均匀，时而稀疏时而密集，进一步加剧了输出的不稳定性。
3、前端在接收到流式数据后，需要实时解析并渲染markdown文档，markdown文档依赖特定格式的字符来定义样式，这些字符必须成对出现才能正确解析。然而，在流式传输的场景下，由于数据是逐步传输的，容易导致出现字符片段被分割传输的情况，导致markdown样式无法正确渲染，出现格式混乱或错误。
4、因此，有必要对现有技术中的基于流式输出的前端渲染方法进行改进，以解决上述问题。
技术实现思路
1、本发明克服了现有技术的不足，提供一种基于流式输出的前端渲染优化方法，旨在解决现有技术中流式输出的不稳定性和卡顿问题，以及markdown文档格式在流式输出中的正确展示问题。
2、为达到上述目的，本发明采用的技术方案为：一种基于流式输出的前端渲染优化方法，包括：
3、s1、创建gpt流式输出环境，包括：消息组件、流式消息栈和消息结束标志；
4、s2、gpt推送流式消息到消息组件；
5、s3、消息组件将流式消息数据存入流式消息栈内；
6、s4、流式消息栈内容新增时，消息组件处理消息栈内数据；
7、s5、gpt推送流式消息结束后，通知消息组件，消息组件记录消息结束标志并清理消息栈内数据；
8、s6、流式消息栈内无数据时且消息结束标志出现，流式消息输出结束。
9、本发明一个较佳实施例中，步骤s2中，gpt服务器按照流式输出的方式，将生成的文本进行分割，并通过gpt推送方法逐个推送到前端消息组件，文本分割包括：
10、s21、识别markdown的特殊字符和结构；
11、s22、根据markdown的特殊字符和结构确定分割点；
12、s23、根据分割点分割文本并添加分割标记；
13、s24、推送分割后的文本片段。
14、本发明一个较佳实施例中，识别出markdown中的特殊字符和结构，包括：标题、列表、代码块、链接、图片、强调文本。
15、本发明一个较佳实施例中，分割点设置在不影响markdown语法和渲染效果的位置，包括：空格、标点符号和换行符处。
16、本发明一个较佳实施例中，在确定分割点后，将gpt生成的文本分割成多个片段；对于每个片段，当包含markdown的特殊字符或结构的开始部分，但不包含结束部分，在片段的末尾添加一个开始分割标记；当片段包含结束部分但不包含开始部分，在片段的开头添加结束分割标记。
17、本发明一个较佳实施例中，在步骤s4中，处理消息栈内数据前对s2分割的片段进行解析：
18、s41、检查取出的文本片段是否包含分割标记；
19、s42、文本片段包含开始分割标记，创建一个新的markdown对象，以表示该结构的开始；
20、s43、文本片段包含结束分割标记，查找并更新对应的markdown对象，以表示该结构的结束。
21、本发明一个较佳实施例中，在步骤s4中，处理消息栈内数据的步骤包括：
22、s44、检查取出的字是否为换行符，如果是，则清空当前markdown对象的所有属性，并继续处理下一个字。
23、s45、检查取出的字是否为markdown的特殊字符：
24、a.当取出的字是markdown的特殊字符，进一步判断该字符是否为包裹类字符，并根据markdown对象的当前状态进行相应的处理：
25、当已存在相同的包裹类字符，则删除markdown对象中该字符的属性，并更新显示容器；
26、当不存在相同的包裹类字符，在markdown对象中创建一个该字符类型的属性，并创建一个对应的div元素插入显示容器中；
27、b.当取出的字不是markdown的特殊字符，则将其视为普通字符，并根据markdown对象的当前状态进行插入处理：
28、当markdown对象中存在任何属性，将当前普通字符插入对应的div元素中；
29、当markdown对象中不存在任何属性，将普通字符直接插入显示容器。
30、本发明一个较佳实施例中，在步骤s3中，对流式消息栈的处理过程进行监控和日志记录，日志记录包括：流式消息的处理时间、流式消息渲染时间和流式消息错误信息。
31、本发明一个较佳实施例中，创建一个缓冲队列，作为临时存储的存储空间；当gpt推送流式消息速度大于消息组件处理速度时，gpt推送流式消息到缓冲队列，再由消息组件从缓冲队列中取出并处理数据。
32、本发明提供了一种基于流式输出的前端渲染系统，包括：
33、消息组件模块，用于接收gpt推送的流式消息，负责前端与gpt服务器之间的交互，通过api或websocket等方式实时获取gpt生成的内容；
34、流式消息栈模块，用于暂存接收到的流式消息数据，该模块作为一个临时存储区，可以确保消息的顺序性和完整性，避免消息丢失或错乱；
35、消息结束标志模块，用于标识流式消息是否已完全接收，该模块决定了何时停止等待新消息的到来，并开始进行最终的处理和渲染；
36、文本分割模块，用于对gpt生成的文本进行分割，该模块首先识别markdown的特殊字符和结构，然后确定分割点，将文本分割成多个片段，并添加分割标记；
37、文本解析模块，用于对gpt生成的文本进行解析，解析文本片段，并根据markdown的语法创建相应的html结构；
38、推送方法选择模块，用于选择gpt推送消息的方法，根据网络环境和前端需求，选择使用websocket或http长轮询来接收gpt服务器的流式消息，当网络环境稳定时，优先选择websocket；当网络环境不稳定时，设置回退机制，自动切换到http长轮询；
39、缓冲队列模块，用于作为临时存储的存储空间；
40、错误处理模块，用于处理流式输出过程中出现的网络错误或数据格式错误；
41、渲染模块，用于将解析后的markdown文本渲染到前端页面上，根据解析后的html结构，将文本内容展示给用户。
42、本发明解决了背景技术中存在的缺陷，本发明具备以下有益效果：
43、（1）本发明通过创建gpt流式输出环境，包括消息组件、流式消息栈和消息结束标志，本发明确保了流式消息的顺序性和完整性；gpt生成的文本通过流式方式推送，消息组件实时接收并存入流式消息栈，有效避免了消息丢失或错乱的问题，从而提升了流式输出的稳定性。
44、（2）本发明通过在步骤s2中进行文本分割结合gpt推送方法的推动判断，gpt生成的文本被合理切割成多个片段，并添加分割标记，确保了流式消息在传输过程中不会因为单个消息过大而造成网络拥堵或延迟，提高了流式输出的稳定性，再根据网络环境自动选择对应的gpt推送方法包括websocket和http长轮询，两者结合，使得文本处理速度得到优化，传输速率变高。
45、（3）本发明步骤s2中，文本分割时特别考虑了markdown的特殊字符和结构如标题、列表、代码块等，确保分割点选择在不影响markdown语法和渲染效果的位置，通过添加分割标记，本发明确保了markdown语法在流式传输过程中的完整性，结合步骤s4中对分割标记的解析处理，使得即使在流式传输的场景下，markdown样式也能被正确解析和渲染，避免了格式混乱或错误的问题。
46、（4）本发明引入缓冲队列作为临时存储空间，本发明有效解决了gpt推送速度过快时前端处理不及时的问题。当消息处理速度跟不上推送速度时，缓冲队列能够缓存多余的消息，避免前端渲染卡顿。
1.一种基于流式输出的前端渲染优化方法，其特征在于，包括步骤：
2.根据权利要求1所述的一种基于流式输出的前端渲染优化方法，其特征在于：步骤s2中，gpt服务器按照流式输出的方式，将生成的文本进行分割，并通过gpt推送方法逐个推送到前端消息组件，文本分割包括：
3.根据权利要求2所述的一种基于流式输出的前端渲染优化方法，其特征在于：识别出markdown中的特殊字符和结构，包括：标题、列表、代码块、链接、图片、强调文本。
4.根据权利要求2所述的一种基于流式输出的前端渲染优化方法，其特征在于：分割点设置在不影响markdown语法和渲染效果的位置，包括：空格、标点符号和换行符处。
5.根据权利要求2所述的一种基于流式输出的前端渲染优化方法，其特征在于：在确定分割点后，将gpt生成的文本分割成多个片段；对于每个片段，当包含markdown的特殊字符或结构的开始部分，但不包含结束部分，在片段的末尾添加一个开始分割标记；当片段包含结束部分但不包含开始部分，在片段的开头添加结束分割标记。
6.根据权利要求1所述的一种基于流式输出的前端渲染优化方法，其特征在于：在步骤s4中，处理消息栈内数据前对s2分割的片段进行解析：
7.根据权利要求1所述的一种基于流式输出的前端渲染优化方法，其特征在于：在步骤s4中，处理消息栈内数据的步骤包括：
8.根据权利要求1所述的一种基于流式输出的前端渲染优化方法，其特征在于：在步骤s3中，对流式消息栈的处理过程进行监控和日志记录，日志记录包括：流式消息的处理时间、流式消息渲染时间和流式消息错误信息。
9.根据权利要求1所述的一种基于流式输出的前端渲染优化方法，其特征在于：创建一个缓冲队列，作为临时存储的存储空间；当gpt推送流式消息速度大于消息组件处理速度时，gpt推送流式消息到缓冲队列，再由消息组件从缓冲队列中取出并处理数据。
10.一种基于流式输出的前端渲染系统，所述系统运行时基于权利要求1-9任一项所述的一种基于流式输出的前端渲染优化方法，其特征在于，包括：
