Code stream real-time rendering method and device, electronic equipment and readable storage medium
By processing the HTML code stream output by the large model through a streaming parsing mechanism and adopting different processing methods for different types of tags, real-time rendering of web pages is achieved, solving the problem of excessive time spent generating web pages and improving rendering efficiency and user experience.
Patent Information
- Application Number
- CN202511108124.6
- Authority / Receiving Office
- CN · China
- Patent Type
- Applications(China)
- Current Assignee / Owner
- Filing Date
- 2025-08-07
- Publication Date
- 2025-11-07
AI Technical Summary
In existing technologies, the generation and rendering of HTML code based on large models takes too long, resulting in excessively long waiting times for users.
A streaming parsing mechanism is used to process the HTML code stream continuously output by the large model. Different processing methods are used for different types of tags. Complete script tags are extracted to the script management system for independent processing, and the content of frame tags is processed independently by creating subpages. This allows script and frame content to be processed in parallel, enabling real-time rendering.
It improves the rendering efficiency of webpage generation, shortens the waiting time for users to see the first part of the webpage content, and reduces unnecessary computation.
Smart Images

Figure CN120910378A_ABST
Abstract
Description
TECHNICAL FIELD
[0001] The present disclosure relates to the technical field of data processing, in particular to the technical field of artificial intelligence such as large language models, hypertext markup language, streaming processing, web page generation, and more particularly to a code stream real-time rendering method and device, electronic equipment, computer readable storage medium and computer program product. BACKGROUND
[0002] With the continuous development of large model (also known as large language model, English full name: Large Language Model, English abbreviation: LLM) technology, it has been widely used in various industries and various scenarios.
[0003] Taking the generation of a web page using a large model as an example, it is usually necessary to complete all HTML (Hyper Text Markup Language) code generation by the large model, and then parse and render the web page according to the complete HTML code, which takes too long to wait. SUMMARY
[0004] The present disclosure provides a code stream real-time rendering method and device, electronic equipment, computer readable storage medium and computer program product.
[0005] In a first aspect, the present disclosure provides a code stream real-time rendering method, comprising: obtaining a hypertext markup language code stream for generating a target web page continuously output by a large model; performing streaming processing on the continuously obtained code stream according to a preset streaming parsing mechanism: in response to detecting a complete script tag, extracting a to-be-processed script corresponding to the complete script tag to a preset script management system to independently process the to-be-processed script using the script management system; in response to detecting a frame tag, creating a sub-page for the frame tag and processing and displaying the content of the frame tag in the sub-page; presenting a real-time streaming processing result including the real-time processing result of the to-be-processed script by the script management system, the real-time processing and real-time display of the frame tag content in the sub-page, as a real-time web page rendering result corresponding to part of the code received from the code stream.
[0006] In a second aspect, the embodiments of the present disclosure provide a device for real-time rendering of a code stream, comprising: a code stream continuous acquisition unit configured to acquire a code stream of a hypertext markup language for generating a target webpage continuously output by a large model; a streaming processing unit configured to perform streaming processing on the continuously acquired code stream according to a preset streaming parsing mechanism, the streaming processing unit comprising: a complete script tag processing subunit configured to, in response to detecting a complete script tag, extract a to-be-processed script corresponding to the complete script tag to a preset script management system to independently process the to-be-processed script by using the script management system; a frame tag processing subunit configured to, in response to detecting a frame tag, create a sub-page for the frame tag, and process and display content of the frame tag in the sub-page; and a real-time rendering unit configured to present a real-time streaming processing result comprising a real-time processing result of the to-be-processed script by the script management system, and content of the frame tag processed and displayed in real time in the sub-page, as a real-time webpage rendering result corresponding to part of the code received from the code stream.
[0007] In a third aspect, the embodiments of the present disclosure provide an electronic device, comprising: at least one processor; and a memory communicatively connected to the at least one processor; wherein the memory stores instructions executable by the at least one processor, and the instructions are executed by the at least one processor to enable the at least one processor to implement the method for real-time rendering of a code stream as described in the first aspect.
[0008] In a fourth aspect, the embodiments of the present disclosure provide a non-transitory computer-readable storage medium storing computer instructions for enabling a computer to implement the method for real-time rendering of a code stream as described in the first aspect.
[0009] In a fifth aspect, the embodiments of the present disclosure provide a computer program product comprising a computer program, which, when executed by a processor, enables the steps of the method for real-time rendering of a code stream as described in the first aspect.
[0010] The real-time rendering scheme of the code stream provided by the present disclosure adopts a preset streaming parsing mechanism for streaming processing of the HTML code stream continuously output by the large model for generating the target webpage, which adopts different processing methods for different types of tags, that is, the scripts corresponding to the complete script tags are extracted to the script management system for independent processing, and the content of the frame tags is independently processed through the subpages created for them, so that the scripts and the frame content can be processed in parallel with the rest of the code stream in the script management system and the subpages respectively, and then the parallel processing results can be independently presented and rendered as the corresponding part of the target webpage, improving the rendering and display efficiency of the target webpage generated based on the HTML code stream, shortening the waiting time for the user to see the first part of the webpage content, and indirectly reducing the invalid calculation amount.
[0011] It should be understood that the content described in this part is not intended to identify the key or important features of the embodiments of the present disclosure, nor is it intended to limit the scope of the present disclosure. Other features of the present disclosure will become apparent through the following description. BRIEF DESCRIPTION OF DRAWINGS
[0012] Other features, objects, and advantages of the present disclosure will become more apparent through reading the following detailed description of non-limiting embodiments made with reference to the accompanying drawings: Figure 1 is an exemplary system architecture to which the present disclosure can be applied; Figure 2 a flowchart of a real-time rendering method of a code stream provided by an embodiment of the present disclosure; Figure 3 a two-branch schematic diagram for processing frame tags in a subpage provided by an embodiment of the present disclosure; Figure 4 a schematic diagram of the processing method of single-closing tags and other double-closing tags that may be involved in the streaming processing process provided by an embodiment of the present disclosure; Figure 5 a flowchart of a method for adjusting a code stream and a real-time webpage rendering result according to a received modification instruction provided by an embodiment of the present disclosure; Figure 6 a flowchart of a real-time rendering method based on an HTML code stream provided by an embodiment of the present disclosure; Figure 7 a structural block diagram of a real-time rendering device of a code stream provided by an embodiment of the present disclosure; Figure 8 a structural schematic diagram of an electronic device suitable for executing a real-time rendering method of a code stream provided by an embodiment of the present disclosure. DETAILED DESCRIPTION
[0013] Exemplary embodiments of the present disclosure are described below with reference to the accompanying drawings, which include various details of the embodiments of the present disclosure to assist in understanding them. These should be considered as merely exemplary. Thus, those skilled in the art will recognize that variations and modifications of the embodiments described herein can be made without departing from the scope and spirit of the present disclosure. Also, for the sake of brevity and clarity, descriptions of well-known functions and constructions are omitted herein. It should be noted that the embodiments in the present disclosure and the features in the embodiments can be combined with each other without conflict.
[0014] In the technical solutions of the present disclosure, the collection, storage, use, processing, transmission, provision and disclosure of user personal information comply with relevant laws and regulations and do not violate public order and good customs.
[0015] Figure 1 An exemplary system architecture 100 of an embodiment of a real-time rendering method, device, electronic device and computer readable storage medium to which the code stream of the present disclosure can be applied is shown.
[0016] As shown in Figure 1 The system architecture 100 can include terminal devices 101, 102, 103, a network 104 and a server 105. The network 104 serves as a medium to provide a communication link between the terminal devices 101, 102, 103 and the server 105. The network 104 can include various connection types, such as wired, wireless communication links or optical fiber cables, etc.
[0017] A user can use the terminal devices 101, 102, 103 to interact with the server 105 through the network 104 to receive or send messages, etc. The terminal devices 101, 102, 103 and the server 105 can be installed with various applications for realizing information communication between them, such as large model-based web generation applications, model training applications, instant messaging applications, etc.
[0018] The terminal devices 101, 102, 103 and the server 105 can be hardware or software. When the terminal devices 101, 102, 103 are hardware, they can be various electronic devices with display screens, including but not limited to smartphones, tablet computers, laptop computers and desktop computers, etc. When the terminal devices 101, 102, 103 are software, they can be installed in the above-mentioned electronic devices, which can be implemented as multiple software or software modules, or as a single software or software module, without specific limitation here. When the server 105 is hardware, it can be implemented as a distributed server cluster composed of multiple servers, or as a single server. When the server 105 is software, it can be implemented as multiple software or software modules, or as a single software or software module, without specific limitation here.
[0019] The server 105 can provide various services through various built-in applications. Taking a large model-based web page generation application that can provide web page generation services as an example, the server 105 can achieve the following effects when running the web page generation application: first, receiving a web page design requirement input by a user through a terminal device 101, 102, 103 through the network 104, and then obtaining a code stream of a hypertext markup language for generating a target web page continuously output by a large model according to the received web page design requirement; then, the continuously obtained code stream is processed in a streaming manner according to a preset streaming parsing mechanism: in response to detecting a complete script tag, the to-be-processed script corresponding to the complete script tag is extracted to a preset script management system to process the to-be-processed script independently using the script management system; in response to detecting a frame tag, a sub-page is created for the frame tag, and the content of the frame tag is processed and displayed in the sub-page; finally, the real-time streaming processing result containing the real-time processing result of the script management system on the to-be-processed script, the real-time processing and real-time display of the frame tag content in the sub-page, is presented as a real-time web page rendering result corresponding to part of the code received from the code stream.
[0020] Further, the real-time web page rendering result can be transmitted back to the terminal device 101, 102, 103 through the network 104 for the user to view the real-time rendering of the target web page in real time.
[0021] It should be noted that the web page design requirement can be temporarily obtained from the terminal device 101, 102, 103 through the network 104, or can be pre-stored in the server 105 locally through various ways. Therefore, when the server 105 detects that the local has already stored these data (for example, before starting to process the remaining to-be-processed web page generation task), it can choose to directly obtain these data from the local, and in this case, the example system architecture 100 can also not include the terminal device 101, 102, 103 and the network 104.
[0022] Since generating HTML code based on design requirements and rendering web pages based on HTML code in real time requires more computing resources and stronger computing power, the real-time rendering method of the code stream provided by the subsequent embodiments of the present disclosure is generally executed by a server 105 with strong computing power and more computing resources, and accordingly, the real-time rendering device of the code stream is also generally arranged in the server 105. However, it should also be pointed out that when the terminal devices 101, 102, and 103 also have computing power and computing resources that meet the requirements, the terminal devices 101, 102, and 103 can also complete the above-mentioned operations by the server 105 through the web generation application installed thereon, and then output the same results as the server 105. Especially in the case where there are multiple terminal devices with different computing power, but the web generation application judges that the terminal device has strong computing power and more remaining computing resources, the terminal device can be allowed to execute the above-mentioned operations, thereby appropriately reducing the computing pressure of the server 105, and accordingly, the real-time rendering device of the code stream can also be arranged in the terminal devices 101, 102, and 103. In this case, the example system architecture 100 can also not include the server 105 and the network 104.
[0023] It should be understood that Figure 1 The number of terminal devices, networks, and servers in the system architecture 100 is only illustrative. According to the implementation needs, there can be any number of terminal devices, networks, and servers.
[0024] It should be understood that Figure 2 , Figure 2 A flowchart of a real-time rendering method of a code stream provided by an embodiment of the present disclosure is shown in FIG. 2, wherein the flow 200 includes the following steps: Step 201: obtaining a code stream of a hypertext markup language for generating a target web page continuously output by a large model; This step is intended to obtain, by the execution subject of the real-time rendering method of the code stream (for example, the server 105 shown in FIG. 1), the HTML code stream for generating the target web page continuously output by the large model in response to the web design requirements initiated by the user. Figure 1 This step is intended to obtain, by the execution subject of the real-time rendering method of the code stream (for example, the server 105 shown in FIG. 1), the HTML code stream for generating the target web page continuously output by the large model in response to the web design requirements initiated by the user.
[0025] Wherein, “large model continuous output” means that the large language model generates the HTML code (i.e., in the form of multiple HTML code segments or HTML code blocks) of the target web page in an incremental generation manner, rather than outputting the complete document at one time. When implemented, it needs to rely on the streaming API (Application Programming Interface) interface of the model, and push the code segment through the chunk transmission mechanism at a fixed time interval or a logical paragraph (such as after generating a complete tag). The large model can adopt a mark-based generation control (such as explicit separation<script>区块),以便解析器快速识别关键标签,进一步的,还可以额外考虑输出缓冲策略,平衡生成速度与传输稳定性,从而避免因网络延迟导致流中断或乱序。
[0026] 在此基础上,"超文本标记语言的代码流”则强调本申请所描述的HTML代码流是数据格式为非闭合的HTML片段序列。与传统完整HTML文档不同,这些片段可能缺乏闭合标签或上下文依赖(如前半段在上一分块,后半段在下一分块)。具体实现时需在传输协议层(如WebSocket套接字或SSE,英文全称为:Server-Sent Events,中文可译为:服务器推送事件)封装分块元数据(如分块序号、标签状态标记),帮助解析器判断片段边界;对于网络抖动或分块丢失。进一步的,还可以考虑设计轻量级重传机制或容错规则(如跳过残缺标签,等待后续分块补全)。
[0027] 且在本步骤中,一方面前端渲染引擎可通过监听流接口实时接收HTML代码块,并维护接收缓冲区以处理分块乱序或延迟;另一方面,可向大模型反馈渲染进度信号(如已成功解析的DOM节点位置,DOM是将网页所有内容以树形式呈现的一种表现形式),以便于大模型动态调整后续生成优先级(如优先输出首屏可见区域代码)。进一步的,对于有些高延迟场景,还可尝试引入推测性生成(例如使大模型提前生成多套备选代码流分支)与缓存预取(对高频标签如<header>预加载资源),以进一步降低等待耗时。
[0028] 步骤202:对持续获取到的代码流按下述预设的流式解析机制进行流式处理:步骤2021:响应于检测到完整的脚本标签,将与完整的脚本标签所对应的待处理脚本提取至预设的脚本管理系统,以利用脚本管理系统独立处理待处理脚本;在步骤201的基础上,本步骤旨在针对检测到的完整的脚本标签,具体提供一种流式解析机制的处理方式,即将与完整的脚本标签所对应的待处理脚本提取至预设的脚本管理系统,以利用脚本管理系统独立处理待处理脚本。
[0029] 其中,步骤202中描述的"预设的流式解析机制”要求解析器具备增量式标签识别能力,例如可通过维护一个动态的标签状态机(如基于栈结构跟踪未闭合的起始标签),实时分析流入的HTML代码片段是否构成完整的语法单元。当代码流中出现<script起始标记时,解析器即进入脚本捕获模式,持续缓存后续字符直至匹配到对应的< / script> End tag, which is determined as "complete script tag" at this time.
[0030] Further, to improve the detection efficiency as much as possible, a multi-level buffer verification strategy can also be considered, for example, temporarily storing the incomplete tag fragments (such as cross-chunk <script>console.log("),并结合正则匹配与上下文分析(如排除注释或字符串中的伪结束标记)确保提取准确性。且对于可能存在的异常情况(如网络中断导致标签截断),还可以考虑触发延迟补全请求或丢弃残缺脚本以避免阻塞主流程。
[0031] 其中,本步骤中描述的"提取至预设的脚本管理系统”提供了一种针对脚本的解耦执行与安全控制方案,即提取操作需剥离脚本标签的原始上下文(包括属性如SRC或TYPE,其中SRC的英文全称为:Source,中文直译为来源或源文件,作用为用于指定外部资源的路径属性,因此SRC属性长用于指代外部资源链接,TYPE属性用于指代类型信息),将其内容(内联代码或外部资源链接)封装为可调度任务单元,注入到独立的脚本管理系统中。该系统可实现沙箱化执行环境,支持脚本的并行加载、依赖解析及执行顺序控制(通过依赖图拓扑排序避免竞态)。一种包括且不限于的实现方式可以为:将检测的不同的完整的脚本标签所对应的不同的待处理脚本按检测到的顺序依次提取至脚本管理系统,并控制脚本管理系统按照接收顺序以同步的方式处理不同的待处理脚本,从而保障脚本之间的执行依赖。
[0032] 同时,还可以考虑集成资源隔离策略,限制脚本对主DOM树的直接访问权限,强制其通过消息通道提交修改请求,由主线程统一审核后应用变更,从而避免并行处理导致的DOM冲突。
[0033] 而本步骤中描述的"独立处理待处理脚本”则强调非阻塞与实时反馈。脚本管理系统需采用优先级队列机制,区分关键渲染脚本(如首屏样式计算)与延迟脚本(如统计分析),结合空闲时间调度优化资源占用;对于外部脚本,预加载器可提前解析SRC并触发流式获取,而内联脚本则直接提交至相应的编译器。而执行结果则可通过差分更新协议(仅传递变更部分而非全量DOM)实时回传至主渲染管线,与流式解析的其他结果(如普通HTML片段)合并后触发渐进式渲染,确保脚本逻辑的生效不影响用户对已渲染内容的交互体验。
[0034] 进一步的,除了检到的完整的脚本标签,若仅在当前的HTML代码块中检测到不完整的脚本标签,则上述执行主体将不对不完整的脚本标签进行处理直至不完整的脚本标签被补全为完整的脚本标签,即在本轮次的解析中对其进行舍弃,留置在下一轮的解析中尝试看能否在下一HTML代码块的补全下称为完整的脚本标签。之所以一定要等待脚本标签完整,因为只有完整的脚本标签才能够获取到正确的脚本,通常情况下无法通过常规的补全方式对不完整的脚本标签进行补全后得到正确的脚本。
[0035] 步骤2022:响应于检测到框架标签,为框架标签创建子页面,并将框架标签的内容在子页面中进行处理和展示;在步骤201的基础上,本步骤旨在由上述执行主体旨在针对检测到的框架标签,具体提供一种流式解析机制的处理方式,即为该框架标签创建子页面,并将框架标签的内容在子页面中进行处理和展示。
[0036] 与步骤2021所描述的脚本标签类似,本步骤所描述的"响应于检测到框架标签”要求解析器应具备即时标签分类能力,即在流式处理过程中,通过实时扫描HTML代码片段识别<frame>或<iframe>等框架标签的起始标记,并准确捕获其属性集(如SRC、Name或Sandbox)。且由于框架标签可能因代码流分块而断裂(如标签属性分散在多个数据包中),解析器还可以采用前缀匹配缓冲机制,临时缓存不完整的标签片段直至获取全部关键属性,或尝试进行补全和 / 或封闭处理。进一步的,还需处理嵌套框架(如子页面内嵌框架)及动态生成的框架(如脚本插入的iframe),通过维护框架层级映射表确保父子页面关系的正确性。
[0037] 在此基础上,"为框架标签创建子页面”这一操作的核心则是隔离化上下文构建。当检测到完整框架标签后,主解析器可及时的发起子页面实例化流程:首先根据标签属性初始化独立浏览上下文(如严格沙箱模式限制DOM访问或放宽策略允许部分API),分配专属的渲染进程与内存空间;其次建立资源加载管道,若框架含SRC属性则异步请求目标URL(Uniform Resource Locator,统一资源定位符)内容,否则准备接收后续流入的标签内HTML流。其中,该子页面的创建可完全脱离主线程,采用并行化渲染线程池管理,确保其加载、解析与绘制过程不影响主页面的流式渲染进度。
[0038] 其中,本步骤描述的"将框架标签的内容在子页面中进行处理和展示”这一操作,主要在于流式内容路由与状态同步。对于无SRC的框架,主解析器可将后续属于该框架的HTML片段(直至匹配到闭合标签或同级新框架)通过跨进程消息通道实时转发至子页面,子页面内部同样采用流式解析机制逐步渲染;而对于含SRC的框架,子页面自主管理远程内容的获取与渲染,但可能需要一些额外的性能优化策略来加速资源加载。无论内容来源为何,子页面的渲染状态(如尺寸变化、加载完成事件)均通过双向事件代理系统同步至主页面,触发主文档的布局重计算与可视区域调整。
[0039] 进一步的,子页面的用户交互事件(如点击、滚动)需经过安全策略过滤层判断是否允许冒泡至主页面,以平衡功能性与隔离性。
[0040] 步骤203:将包含脚本管理系统对待处理脚本的实时处理结果、子页面中实时处理和实时展示的框架标签内容在内的实时流式处理结果,呈现为与接收自代码流的部分代码相对应的实时网页渲染结果。
[0041] 在步骤202的基础上,本步骤旨在由上述执行主体将实时的流式处理结果呈现为与接收自代码流的部分代码相对应的实时网页渲染结果,该实时的流式处理结果包括脚本管理系统对待处理脚本的实时处理结果、子页面中实时处理和实时展示的框架标签内容。
[0042] 其中,"脚本管理系统的实时处理结果”可通过异步回调通道与主渲染流程协同。脚本管理系统在沙箱中执行脚本(如修改DOM或样式)后,会将操作指令序列(如"在ID为header的元素后插入新节点”)封装为轻量级差分协议,通过事件总线传递至主线程。而主线程基于版本化DOM树对比差异,优先应用与当前已流式解析的HTML结构直接相关的修改(如仅更新已渲染区域),而将未到达流位置的动态插入请求暂存至延迟执行队列,避免因脚本超前执行导致布局抖动。对于依赖型脚本(如B模块需等待A模块执行完毕),管理系统通过依赖图谱状态机动态调整结果回传顺序,确保逻辑正确性。
[0043] "子页面中的框架标签实时内容”则需整合依赖和跨进程渲染同步。子页面在独立上下文中渲染框架内容时,需将视觉输出(如绘制完成的位图)转化为视窗描述符(包含尺寸、滚动位置及关键交互区域坐标),通过共享内存或低延迟IPC(InterProcessCommunication,进程间通信)通道传递至主页面。主页面根据框架标签的布局属性(如width="100%")动态计算其占位区域,将子页面内容以合成层形式嵌入,并应用裁剪与变形以适配父文档流。对于动态调整的框架(如内容高度变化触发iframe伸缩),通过增量布局引擎在主页面的重排过程中预留弹性空间,避免频繁回流导致的性能损耗。
[0044] 而在实时呈现环节则还需考虑多时序流的对齐问题。由于脚本结果、框架内容与普通HTML流的到达顺序和耗时不同,可以尝试维护一个基于时间戳的渲染优先级队列,以确保三者按代码流原始顺序生效。例如,若某段HTML流中的后紧跟脚本修改指令,而框架内容尚未加载完成,则优先渲染静态并保留脚本修改的占位符,待框架内容到达后触发复合重绘。视觉上,通过分块渐进绘制技术(如仅渲染视口内区域)和过渡动画(如骨架屏到内容的淡入效果)掩盖流式加载的离散性,使用户感知为连贯的页面"生长”过程。
[0045] 本公开实施例提供的代码流的实时渲染方法,对大模型持续输出的用于生成目标网页的HTML代码流采用预设的流式解析机制进行流式处理,该流式解析机制针对不同类型的标签采用了不同的处理方式,即将完整的脚本标签对应的脚本提取至脚本管理系统进行独立处理,将框架标签的内容则通过为其创建的子页面进行独立处理,使得脚本和框架内容可分别在脚本管理系统和子页面中与代码流的其余部分进行并行处理,进而得以将并行处理结果独立的呈现和渲染为构成目标网页的相应部分,提升了基于HTML代码流生成目标网页的渲染展示效率,缩短了用户看到首部分网页内容的等待耗时,也间接能够减少无效的运算量。
[0046] 为加深对步骤2022所描述方案的理解,还请参考图3,图3为本公开实施例提供的一种在子页面中处理框架标签的两分支示意图,对上位方案描述:"将框架标签的内容在子页面中进行处理和展示”具体分两种情况进行具体展开描述:情况一:响应于框架标签通过外部资源链接加载资源,将完整的外部资源链接提取至子页面中进行资源加载和加载结果的展示;即当解析器检测到框架标签包含SRC属性时,可首先对外部资源链接进行标准化处理(如补全相对路径、消除缓存干扰参数),然后在子页面初始化阶段创建专用的资源加载会话。该会话会继承主页面的安全策略和网络参数,同时建立独立的带宽分配队列以避免阻塞主页面关键请求。
[0047] 在子页面加载过程中实施渐进式的渲染优化,即优先获取和解析HTML骨架,预加载关键CSS(层叠样式表) / JS(JavaScript,Java脚本)资源,对媒体内容启用懒加载策略。且加载状态可通过多级事件中继系统反馈至主页面,包括开始加载、首字节到达等关键节点,使主页面能够动态调整占位区域样式(如加载动画与错误回退)。
[0048] 情况二:响应于框架标签通过超文本标记语言的文档源码加载资源,将持续获取到的文档源码转移至子页面中以递归调用流式解析机制的方式进行流式处理,并将流式处理的实时结果在子页面中进行展示。
[0049] 即当框架标签不含SRC属性但后续接收到内联HTML流(即此种情况为通过SRCdoc加载资源)时,主解析器会启动文档片段转移协议:首先在子页面初始化与原框架标签属性匹配的空白文档上下文,随后通过结构化克隆算法将流入的HTML片段(含可能嵌套的脚本 / 样式)序列化为传输格式。子页面内部激活与主页面同构的递归解析器实例,该实例同样具备脚本提取、框架检测等流处理能力,形成处理链的层级展开。对于嵌套框架标签,会进一步创建孙级页面并建立跨级通信中继,确保事件冒泡与尺寸同步能穿透多层框架结构。即此种情况的核心在于递归式流处理架构的构建。
[0050] 需要说明的是,上述两种情况的共性部分包含视觉同步与安全隔离的深度整合。子页面的布局变化通过视口映射系统转换为相对于主页面的绝对坐标,触发主文档的增量重排;交互事件则经过沙箱策略过滤器决定是否允许冒泡至主页面。对于动态插入的内容(如脚本创建的iframe),会追溯其逻辑来源框架并继承相同的处理策略,确保处理逻辑的一致性。整个系统通过资源加载优先级调度器和跨进程内存池优化资源利用率,使多级框架的并行处理既保持隔离性又能高效协同。
[0051] 在上述内容的基础上,针对情况二在不同的具体情况下还可以细分为多种处理方式:一种细分情况为:若框架标签所包含的内联HTML代码流中完整的次级脚本标签,则在将持续获取到的文档源码转移至子页面中,并在子页面中以递归调用流式解析机制的方式进行流式处理的过程中,可将完整的次级脚本标签对应的待处理脚本提取至与子页面对应的子脚本管理系统,以利用子脚本管理系统独立处理与完整的次级脚本标签对应的待处理脚本。此时的子脚本管理系统仅对应与该框架标签所创建的子页面,与上层的脚本管理系统之间相互隔离、但功能一致。同理,本步骤描述的次级脚本标签是指该脚本标签为出现在内联HTML代码流中的脚本标签。
[0052] 另一种细分情况为:若在流式处理过程中,在持续获取到的文档源码中检测到不完整的代码块,还可以对不完整的代码块的末尾添加空框架标签,得到利用框架标签和空框架标签所确定出的封闭后代码块;进而得以将封闭后代码块转移至子页面中以递归调用流式解析机制的方式进行流式处理。
[0053] 具体的封闭方式可参见下述示例,若原始的不完整代码块为:"<html><head><head><body>1234<iframesrcdoc="<html><head>< / head><bo”。
[0054] 按上述方式对其进行封闭处理后的代码块可以为:"<html><head><head><body>1234<iframesrcdoc="<html><head>< / head><bo>>< / iframe>”。
[0055] 在上述任意实施例的基础上,还请参见图4,图4为本公开实施例提供的在流式处理过程中还可能涉及的单闭合标签和其它双闭合标签的处理方式的示意图,其示意图400包括如下两种不同的处理方式:步骤401:响应于检测到单闭合标签,对处于输出完成状态的单闭合标签的内容进行解析;其中,单闭合标签处理的关键在于即时解析触发机制。当解析器检测到形如或<input / >这类单闭合标签时,可通过其尾部斜杠字符判定为输出完成状态,进而及时的启动原子化解析流程:提取标签全部属性(含可能因分块传输而分散的多个属性片段)进行标准化处理(如布尔属性值补全、URL编码转换),随后直接生成对应的轻量级DOM节点插入当前渲染树。
[0056] 而对于可能影响布局的单闭合标签(如),还可以同步发起资源预加载请求但延迟实际尺寸计算,通过占位符尺寸预测算法(基于alt文本长度或width / height属性)临时确定占位空间,待资源加载完成后再触发精确重排。
[0057] 步骤402:响应于检测到除脚本标签和框架标签外的其它双闭合标签,将处于左标签完整状态的其它双闭合标签进行右标签补全处理,并基于右标签补全后所确定出的其它双闭合标签的内容进行解析。
[0058] 当解析器识别到除脚本和框架外的双闭合标签起始标记(如)时,可以首先在标签栈中记录其类型和属性集,随后进入右标签预测状态:持续监控后续输入流,若在合理时间窗口内未检测到对应结束标记,则自动生成虚拟结束标签实现语法补全。补全操作遵循上下文敏感规则,例如在内部缺失时优先补全当前项而非直接闭合列表。对于属性不完整的起始标签(如<a href="中途断流),采用属性值占位策略临时填充空值,待后续数据到达时通过DOM节点属性热更新机制修正。进一步的,所有补全操作可记录至语法修正日志供后续差异化渲染,避免全量DOM比对的开销。
[0059] 在上述任意实施例的基础上,还请参见图5,图5为本公开实施例提供的一种根据接收到的修改指令调整代码流和实时网页渲染结果的方法的流程图,其流程500包括如下步骤:步骤501:接收向大模型发起目标网页的生成请求的对象对实时网页渲染结果提出的修改指令;步骤502:响应于接收到修改指令,控制大模型暂停输出原用于生成目标网页的代码流,并控制大模型根据修改指令输出用于生成按修改指令修改后的新目标网页的新代码流;步骤503:对持续接收到的新代码流按流式解析机制进行流式处理,并利用实时的流式处理结果对之前呈现的实时网页渲染结果进行实时调整。
[0060] 针对基于用户交互驱动的动态网页修改需求,本实施例提供了一种具体的实现方案,其核心在于双向流控制与增量式DOM协同。当接收端(如浏览器界面)捕获到用户通过交互工具或开发者面板提交的修改指令(如"将主题色改为深蓝"或"删除侧边栏模块")时,上述执行主体可首先对指令进行语义解构与上下文关联分析,提取关键操作类型(样式调整、结构变更或内容替换)和定位参数(例如CSS查询路径),同时评估当前渲染状态中受影响区域的DOM树版本号,确保指令基于最新渲染快照执行。
[0061] 随后可通过双向通信管道向大模型发送中断信号与修改指令包,大模型接收到信号后立即冻结当前代码流生成线程,启动上下文感知的重生成引擎:该引擎会结合原始生成意图、当前已输出代码片段的内存镜像以及新指令语义,重新计算网页结构的差异化生成路径,并通过增量式代码补丁算法优先输出与修改区域直接相关的新HTML / CSS代码流(如仅重生成导航栏而非整个页面),同时保持未修改区域的生成上下文一致性。
[0062] 而在新代码流进入解析环节时,上述执行主体可启用差异敏感型流处理模式:普通HTML片段走标准解析通道,而标记为指令响应区的特殊片段则触发DOM比对机制,即通过比对新旧虚拟DOM树的拓扑结构差异,计算出最小化的节点操作序列(如将替换为<section>并保留子节点),在内存中构建版本化DOM变更集。渲染引擎根据变更集实施分层热更新策略:对样式修改采用CSSOM变量覆盖(避免重排),对局部结构变动执行子树替换(保持未变动区域的交互状态),对内容更新应用渐进式重绘(配合过渡动画)。
[0063] 本实施例所提供的方案的整个过程通过渲染时序仲裁器确保模型输出、解析计算与界面重绘的节奏同步,在用户无感知的情况下完成从指令提交到视觉反馈的端到端实时调整,同时维护完整的操作历史栈以支持撤销 / 重做功能。系统还会基于修改频率和范围自动调节大模型的输出粒度,在频繁微调时切换为CSS变量级输出,在大范围重构时启用区块化流式生成,实现交互响应性与渲染效率的动态平衡。
[0064] 图6为本公开实施例提供的一种基于HTML代码流的实时渲染方法的流程示意图;为加深对整个方案的理解,本实施例还结合实际场景,给出一整套完整的方案来实现流式HTML实时渲染,主要包括下述几个主要功能系统:1、流式代码解析系统,具备以下功能:增量解析:接收模型输出的HTML代码块,逐块解析DOM结构;节点完整性检查:检测标签是否闭合,未闭合时暂存并等待后续代码补全;代码补全机制:对缺失的闭合标签或属性进行智能预测与补全(如基于历史模式匹配)。
[0065] 2、动态脚本管理系统,具备以下功能:脚本抽离:分离<script>标签内容,存储至独立缓冲区;分步执行:在DOM节点完整后,逐步执行关联脚本,避免阻塞渲染。
[0066] 3、实时渲染管道,具备以下功能:异步渲染队列:将解析后的DOM片段加入渲染队列,优先显示静态内容;增量更新:根据新代码块动态更新页面,避免全量重绘;错误隔离:局部解析失败不影响整体渲染,通过占位符标记异常区域。
[0067] 下述对上述提及的一些功能进行具体展开说明:代码分析补全系统,用于基于现有的不完整的代码片段进行分析,并实现闭合补全,生成一个完整的可运行的HTML代码。
[0068] 针对script标签,1)检测不完整的Script标签,将会被剔除;2)检测到完整的script标签,会提取并通过脚本管理系统统一管理。
[0069] 针对iframe标签,1)通过SRC加载内容的,将会在最终生成完整标签后才会被解析渲染;2)通过SRCdoc加载内容的,会在解析过程中实时进行补全,并实时解析其SRCdoc,进行深层代码解析,通过代理页面实现渲染元素插入,最终实现iframe内容流式渲染。
[0070] 针对其它标签,1)单闭合标签,在流式输出成完成标签后才会解析渲染,否则本次解析舍弃;2)双闭合标签,在其左标签完整输出前舍弃,左标签完整输出后进行实时解析补全其又标签,实现次标签实时渲染。
[0071] 脚本解析管理系统,通过HTML代码实时解析,实时获取并抽离script标签,并区分以下场景:1)通过SRC加载远程资源的Script脚本,将会同步等待加载完成,才会继续执行后续脚本队列,保证后续脚本依赖被完全加载;2)本地执行代码片单的Script脚本,将会通过新建Script标签,以当前窗口作为context(拼接)进行脚本执行。
[0072] iframe管理系统,针对通过SRC加载子页内容的iframe标签,将会实时检测标签完整性,在完整加载后进行渲染;针对通过SRCdoc加载子页内容的,则可创建一个新的iframe页面,渲染特定模版。通过内容劫持,将流式生成的SRCdoc通过流式代码解析器进行深层代码解析,并通过缓冲区生成一个离线文档,通过劫持代理最终渲染到空白iframe中,实现流式解析渲染。
[0073] 按上述功能最终可实现的效果可参见图6所示的流程示意图。且按照本实施例所提供方案,可在用户侧实现网页内容随模型输出逐步显示,无需等待完整加载的效果,而在开发者侧也可以提供API配置渲染策略(如优先级、错误处理)。在多端交互场景下,模型端可流式输出HTML代码块至前端,而解析端则可以实时解析处理代码,生成可渲染DOM,以及渲染端将新的可渲染DOM与原DOM进行diff计算,增量添加到渲染页面上,并适时执行脚本。共同搭配实现网页的高效率渲染、呈现。
[0074] 进一步参考图7,作为对上述各图所示方法的实现,本公开提供了一种代码流的实时渲染装置的一个实施例,该装置实施例与图2所示的方法实施例相对应,该装置具体可以应用于各种电子设备中。
[0075] 如图7所示,本实施例的代码流的实时渲染装置700可以包括:代码流持续获取单元701、流式处理单元702、实时渲染单元703,且该流式处理单元702中包含有完整脚本标签处理子单元7021和框架标签处理子单元7022。其中,代码流持续获取单元701,被配置成获取大模型持续输出的用于生成目标网页的超文本标记语言的代码流;流式处理单元702,被配置成对持续获取到的代码流按下述预设的流式解析机制进行流式处理,流式处理单元包括:完整脚本标签处理子单元7021,被配置成响应于检测到完整的脚本标签,将与完整的脚本标签所对应的待处理脚本提取至预设的脚本管理系统,以利用脚本管理系统独立处理待处理脚本;框架标签处理子单元7022,被配置成响应于检测到框架标签,为框架标签创建子页面,并将框架标签的内容在子页面中进行处理和展示;实时渲染单元703,被配置成将包含脚本管理系统对待处理脚本的实时处理结果、子页面中实时处理和实时展示的框架标签内容在内的实时流式处理结果,呈现为与接收自代码流的部分代码相对应的实时网页渲染结果。
[0076] 在本实施例中,代码流的实时渲染装置700中:代码流持续获取单元701、流式处理单元702、实时渲染单元703,以及包含于流式处理单元702中的完整脚本标签处理子单元7021和框架标签处理子单元7022的具体处理及其所带来的技术效果可分别参考图2对应实施例中的步骤201-203以及包含于步骤202中的步骤2021和步骤2022的相关说明,在此不再赘述。
[0077] 在本实施例的一些其它可选实现方式中,流式处理单元702还可以包括:不完整脚本标签处理子单元,被配置成响应于检测到不完整的脚本标签,不对不完整的脚本标签进行处理直至不完整的脚本标签被补全为完整的脚本标签。
[0078] 在本实施例的一些其它可选实现方式中,框架标签处理子单元7022包括:外部资源链接处理模块,被配置成响应于框架标签通过外部资源链接加载资源,将完整的外部资源链接提取至子页面中进行资源加载和加载结果的展示。
[0079] 在本实施例的一些其它可选实现方式中,框架标签处理子单元7022可以包括:文档源码处理模块,被配置成响应于框架标签通过超文本标记语言的文档源码加载资源,将持续获取到的文档源码转移至子页面中以递归调用流式解析机制的方式进行流式处理,并将流式处理的实时结果在子页面中进行展示。
[0080] 在本实施例的一些其它可选实现方式中,文档源码处理模块可以被进一步配置成:将持续获取到的文档源码转移至子页面中,并在子页面中以递归调用流式解析机制的方式进行流式处理:响应于在子页面的文档源码中检测到完整的次级脚本标签,将完整的次级脚本标签对应的待处理脚本提取至与子页面对应的子脚本管理系统,以利用子脚本管理系统独立处理与完整的次级脚本标签对应的待处理脚本。
[0081] 在本实施例的一些其它可选实现方式中,文档源码处理模块可以被进一步配置成:响应于在持续获取到的文档源码中检测到不完整的代码块,对不完整的代码块的末尾添加空框架标签,得到利用框架标签和空框架标签所确定出的封闭后代码块;将封闭后代码块转移至子页面中以递归调用流式解析机制的方式进行流式处理。
[0082] 在本实施例的一些其它可选实现方式中,完整脚本标签处理子单元7021可以被进一步配置成:将检测的不同的完整的脚本标签所对应的不同的待处理脚本按检测到的顺序依次提取至脚本管理系统,并控制脚本管理系统按照接收顺序以同步的方式处理不同的待处理脚本。
[0083] 在本实施例的一些其它可选实现方式中,流式处理单元702还可以包括:单闭合标签处理子单元,被配置成响应于检测到单闭合标签,对处于输出完成状态的单闭合标签的内容进行解析。
[0084] 在本实施例的一些其它可选实现方式中,流式处理单元702还可以包括:其它双闭合标签处理子单元,被配置成响应于检测到除脚本标签和框架标签外的其它双闭合标签,将处于左标签完整状态的其它双闭合标签进行右标签补全处理,并基于右标签补全后所确定出的其它双闭合标签的内容进行解析。
[0085] 在本实施例的一些其它可选实现方式中,代码流的实时渲染装置700还可以包括:修改指令接收单元,被配置成接收向大模型发起目标网页的生成请求的对象对实时网页渲染结果提出的修改指令;指令处理单元,被配置成响应于接收到修改指令,控制大模型暂停输出原用于生成目标网页的代码流,并控制大模型根据修改指令输出用于生成按修改指令修改后的新目标网页的新代码流;按指令调整单元,被配置成对持续接收到的新代码流按流式解析机制进行流式处理,并利用实时的流式处理结果对之前呈现的实时网页渲染结果进行实时调整。
[0086] 本实施例作为对应于上述方法实施例的装置实施例存在,本实施例提供的代码流的实时渲染装置,对大模型持续输出的用于生成目标网页的HTML代码流采用预设的流式解析机制进行流式处理,该流式解析机制针对不同类型的标签采用了不同的处理方式,即将完整的脚本标签对应的脚本提取至脚本管理系统进行独立处理,将框架标签的内容则通过为其创建的子页面进行独立处理,使得脚本和框架内容可分别在脚本管理系统和子页面中与代码流的其余部分进行并行处理,进而得以将并行处理结果独立的呈现和渲染为构成目标网页的相应部分,提升了基于HTML代码流生成目标网页的渲染展示效率,缩短了用户看到首部分网页内容的等待耗时,也间接能够减少无效的运算量。
[0087] 根据本公开的实施例,本公开还提供了一种电子设备,该电子设备包括:至少一个处理器;以及与至少一个处理器通信连接的存储器;其中,存储器存储有可被至少一个处理器执行的指令,该指令被至少一个处理器执行,以使至少一个处理器执行时能够实现上述任意实施例所描述的代码流的实时渲染方法。
[0088] 根据本公开的实施例,本公开还提供了一种可读存储介质,该可读存储介质存储有计算机指令,该计算机指令用于使计算机执行时能够实现上述任意实施例所描述的代码流的实时渲染方法。
[0089] 根据本公开的实施例,本公开还提供了一种计算机程序产品,该计算机程序在被处理器执行时能够实现上述任意实施例所描述的代码流的实时渲染方法。
[0090] 图8示出了可以用来实施本公开的实施例的示例电子设备800的示意性框图。电子设备旨在表示各种形式的数字计算机,诸如,膝上型计算机、台式计算机、工作台、个人数字助理、服务器、刀片式服务器、大型计算机、和其它适合的计算机。电子设备还可以表示各种形式的移动装置,诸如,个人数字处理、蜂窝电话、智能电话、可穿戴设备和其它类似的计算装置。本文所示的部件、它们的连接和关系、以及它们的功能仅仅作为示例,并且不意在限制本文中描述的和 / 或者要求的本公开的实现。
[0091] 如图8所示,设备800包括计算单元801,其可以根据存储在只读存储器(ROM)802中的计算机程序或者从存储单元808加载到随机访问存储器(RAM)803中的计算机程序,来执行各种适当的动作和处理。在RAM 803中,还可存储设备800操作所需的各种程序和数据。计算单元801、ROM 802以及RAM 803通过总线804彼此相连。输入 / 输出(I / O)接口805也连接至总线804。
[0092] 设备800中的多个部件连接至I / O接口805,包括:输入单元806,例如键盘、鼠标等;输出单元807,例如各种类型的显示器、扬声器等;存储单元808,例如磁盘、光盘等;以及通信单元809,例如网卡、调制解调器、无线通信收发机等。通信单元809允许设备800通过诸如因特网的计算机网络和 / 或各种电信网络与其他设备交换信息 / 数据。
[0093] 计算单元801可以是各种具有处理和计算能力的通用和 / 或专用处理组件。计算单元801的一些示例包括但不限于中央处理单元(CPU)、图形处理单元(GPU)、各种专用的人工智能(AI)计算芯片、各种运行机器学习模型算法的计算单元、数字信号处理器(DSP)、以及任何适当的处理器、控制器、微控制器等。计算单元801执行上文所描述的各个方法和处理,例如代码流的实时渲染方法。例如,在一些实施例中,代码流的实时渲染方法可被实现为计算机软件程序,其被有形地包含于机器可读介质,例如存储单元808。在一些实施例中,计算机程序的部分或者全部可以经由ROM 802和 / 或通信单元809而被载入和 / 或安装到设备800上。当计算机程序加载到RAM 803并由计算单元801执行时,可以执行上文描述的代码流的实时渲染方法的一个或多个步骤。备选地,在其他实施例中,计算单元801可以通过其他任何适当的方式(例如,借助于固件)而被配置为执行代码流的实时渲染方法。
[0094] 本文中以上描述的系统和技术的各种实施方式可以在数字电子电路系统、集成电路系统、场可编程门阵列(FPGA)、专用集成电路(ASIC)、专用标准产品(ASSP)、芯片上系统的系统(SOC)、负载可编程逻辑设备(CPLD)、计算机硬件、固件、软件、和 / 或它们的组合中实现。这些各种实施方式可以包括:实施在一个或者多个计算机程序中,该一个或者多个计算机程序可在包括至少一个可编程处理器的可编程系统上执行和 / 或解释,该可编程处理器可以是专用或者通用可编程处理器,可以从存储系统、至少一个输入装置、和至少一个输出装置接收数据和指令,并且将数据和指令传输至该存储系统、该至少一个输入装置、和该至少一个输出装置。
[0095] 用于实施本公开的方法的程序代码可以采用一个或多个编程语言的任何组合来编写。这些程序代码可以提供给通用计算机、专用计算机或其他可编程数据处理装置的处理器或控制器,使得程序代码当由处理器或控制器执行时使流程图和 / 或框图中所规定的功能 / 操作被实施。程序代码可以完全在机器上执行、部分地在机器上执行,作为独立软件包部分地在机器上执行且部分地在远程机器上执行或完全在远程机器或服务器上执行。
[0096] 在本公开的上下文中,机器可读介质可以是有形的介质,其可以包含或存储以供指令执行系统、装置或设备使用或与指令执行系统、装置或设备结合地使用的程序。机器可读介质可以是机器可读信号介质或机器可读储存介质。机器可读介质可以包括但不限于电子的、磁性的、光学的、电磁的、红外的、或半导体系统、装置或设备,或者上述内容的任何合适组合。机器可读存储介质的更具体示例会包括基于一个或多个线的电气连接、便携式计算机盘、硬盘、随机存取存储器(RAM)、只读存储器(ROM)、可擦除可编程只读存储器(EPROM或快闪存储器)、光纤、便捷式紧凑盘只读存储器(CD-ROM)、光学储存设备、磁储存设备、或上述内容的任何合适组合。
[0097] 为了提供与用户的交互,可以在计算机上实施此处描述的系统和技术,该计算机具有:用于向用户显示信息的显示装置(例如,CRT(阴极射线管)或者LCD(液晶显示器)监视器);以及键盘和指向装置(例如,鼠标或者轨迹球),用户可以通过该键盘和该指向装置来将输入提供给计算机。其它种类的装置还可以用于提供与用户的交互;例如,提供给用户的反馈可以是任何形式的传感反馈(例如,视觉反馈、听觉反馈、或者触觉反馈);并且可以用任何形式(包括声输入、语音输入或者、触觉输入)来接收来自用户的输入。
[0098] 可以将此处描述的系统和技术实施在包括后台部件的计算系统(例如,作为数据服务器)、或者包括中间件部件的计算系统(例如,应用服务器)、或者包括前端部件的计算系统(例如,具有图形用户界面或者网络浏览器的用户计算机,用户可以通过该图形用户界面或者该网络浏览器来与此处描述的系统和技术的实施方式交互)、或者包括这种后台部件、中间件部件、或者前端部件的任何组合的计算系统中。可以通过任何形式或者介质的数字数据通信(例如,通信网络)来将系统的部件相互连接。通信网络的示例包括:局域网(LAN)、广域网(WAN)和互联网。
[0099] 计算机系统可以包括客户端和服务器。客户端和服务器一般远离彼此并且通常通过通信网络进行交互。通过在相应的计算机上运行并且彼此具有客户端-服务器关系的计算机程序来产生客户端和服务器的关系。服务器可以是云服务器,又称为云计算服务器或云主机,是云计算服务体系中的一项主机产品,以解决传统物理主机与虚拟专用服务器(VPS,Virtual Private Server)服务中存在的管理难度大,业务扩展性弱的缺陷。
[0100] 根据本公开实施例的技术方案,对大模型持续输出的用于生成目标网页的HTML代码流采用预设的流式解析机制进行流式处理,该流式解析机制针对不同类型的标签采用了不同的处理方式,即将完整的脚本标签对应的脚本提取至脚本管理系统进行独立处理,将框架标签的内容则通过为其创建的子页面进行独立处理,使得脚本和框架内容可分别在脚本管理系统和子页面中与代码流的其余部分进行并行处理,进而得以将并行处理结果独立的呈现和渲染为构成目标网页的相应部分,提升了基于HTML代码流生成目标网页的渲染展示效率,缩短了用户看到首部分网页内容的等待耗时,也间接能够减少无效的运算量。
[0101] 应该理解,可以使用上面所示的各种形式的流程,重新排序、增加或删除步骤。例如,本发公开中记载的各步骤可以并行地执行也可以顺序地执行也可以不同的次序执行,只要能够实现本公开公开的技术方案所期望的结果,本文在此不进行限制。
[0102] 上述具体实施方式,并不构成对本公开保护范围的限制。本领域技术人员应该明白的是,根据设计要求和其他因素,可以进行各种修改、组合、子组合和替代。任何在本公开的精神和原则之内所作的修改、等同替换和改进等,均应包含在本公开保护范围之内。< / script>
Claims
1. A method for real-time rendering of a code stream, comprising: obtaining a code stream of hypertext markup language for generating a target webpage continuously output by a large model; stream processing the continuously obtained code stream according to a preset stream parsing mechanism as follows: in response to detecting a complete script tag, extracting a to-be-processed script corresponding to the complete script tag to a preset script management system to independently process the to-be-processed script by using the script management system; in response to detecting a frame tag, creating a sub-page for the frame tag and processing and displaying content of the frame tag in the sub-page; presenting a real-time stream processing result including a real-time processing result of the to-be-processed script by the script management system and real-time processing and real-time display of the content of the frame tag in the sub-page as a real-time webpage rendering result corresponding to part of the code received from the code stream.
2. The method of claim 1, further comprising: in response to detecting an incomplete script tag, not processing the incomplete script tag until the incomplete script tag is completed as the complete script tag.
3. The method of claim 1, wherein, the processing and displaying of the content of the frame tag in the sub-page comprises: in response to the frame tag loading a resource through an external resource link, extracting a complete external resource link to the sub-page for resource loading and display of a loading result.
4. The method of claim 1, wherein, the processing and displaying of the content of the frame tag in the sub-page comprises: in response to the frame tag loading a resource through a document source code of the hypertext markup language, transferring the continuously obtained document source code to the sub-page for stream processing in a recursive manner of calling the stream parsing mechanism, and displaying a real-time result of the stream processing in the sub-page.
5. The method of claim 4, wherein, the transferring of the continuously obtained document source code to the sub-page for stream processing in a recursive manner of calling the stream parsing mechanism comprises: transferring the continuously obtained document source code to the sub-page and stream processing in the sub-page in a recursive manner of calling the stream parsing mechanism: in response to detecting a complete secondary script tag in the document source code of the sub-page, extracting a to-be-processed script corresponding to the complete secondary script tag to a sub-script management system corresponding to the sub-page to independently process the to-be-processed script corresponding to the complete secondary script tag by using the sub-script management system.
6. The method of claim 4, wherein, the transferring of the continuously obtained document source code to the sub-page for stream processing in a recursive manner of calling the stream parsing mechanism comprises: in response to detecting an incomplete code block in the continuously obtained document source code, adding an empty frame tag to the end of the incomplete code block to obtain a closed code block determined by using the frame tag and the empty frame tag; transferring the closed code block to the sub-page for stream processing in a recursive manner of calling the stream parsing mechanism.
7. The method of claim 1, wherein, The to-be-processed script corresponding to the complete script tag is extracted to a preset script management system, so that the script management system processes the to-be-processed script independently. The different to-be-processed scripts corresponding to the different complete script tags detected are extracted to the script management system in the order of detection, and the script management system is controlled to process the different to-be-processed scripts in a synchronous manner according to the receiving order.
8. The method of claim 1, wherein, The continuously acquired code stream is processed in the following preset stream parsing mechanism, and the method further comprises: In response to detecting a single closed tag, the content of the single closed tag in the output completion state is parsed.
9. The method of claim 1, wherein, The continuously acquired code stream is processed in the following preset stream parsing mechanism, and the method further comprises: In response to detecting other double closed tags except the script tag and the frame tag, the other double closed tags in the left tag complete state are right tag completed, and the content of the other double closed tags determined after the right tag completion is parsed.
10. The method of any one of claims 1-9, further comprising: receiving a modification instruction proposed by an object initiating a generation request of the target webpage to the large model to the real-time webpage rendering result; in response to receiving the modification instruction, controlling the large model to pause outputting the code stream originally used to generate the target webpage, and controlling the large model to output a new code stream used to generate a new target webpage modified according to the modification instruction according to the modification instruction; processing the continuously received new code stream in the stream parsing mechanism, and adjusting the previously presented real-time webpage rendering result in real time using the real-time stream processing result.
11. A real-time rendering device of a code stream, comprising: a code stream continuous acquisition unit configured to acquire a hypertext markup language code stream continuously output by a large model for generating a target webpage; a stream processing unit configured to process the continuously acquired code stream in the following preset stream parsing mechanism, the stream processing unit comprising: a complete script tag processing sub-unit configured to, in response to detecting a complete script tag, extract a to-be-processed script corresponding to the complete script tag to a preset script management system, so that the script management system processes the to-be-processed script independently; a frame tag processing sub-unit configured to, in response to detecting a frame tag, create a sub-page for the frame tag, and process and display the content of the frame tag in the sub-page; a real-time rendering unit configured to present a real-time stream processing result including a real-time processing result of the to-be-processed script by the script management system, and real-time processing and real-time display of the content of the frame tag in the sub-page, as a real-time webpage rendering result corresponding to part of the code received from the code stream.
12. An electronic device, comprising: at least one processor; and a memory connected in communication with the at least one processor; wherein, The memory stores instructions executable by the at least one processor, the instructions being executed by the at least one processor to enable the at least one processor to perform the method of real-time rendering of a code stream of any one of claims 1-10.
13. A non-transitory computer readable storage medium storing computer instructions for causing a computer to perform the method of real-time rendering of a code stream of any one of claims 1-10.
14. A computer program product comprising a computer program which, when executed by a processor, implements the steps of the method of real-time rendering of a code stream of any one of claims 1-10.
Citation Information
Cited By
Streaming data analysis method, system and equipment based on state machine and storage medium
CN121523771A
A DOM structure content positioning method based on markup language topology constraint
CN122414128A