Method and system for editing partial style of HTML page
Patent Information
- Application Number
- CN202611200614.3
- Authority / Receiving Office
- CN · China
- Patent Type
- Applications(China)
- Current Assignee / Owner
- Filing Date
- 2026-08-07
- Publication Date
- 2026-10-30
AI Technical Summary
[0019]由以上技术方案可知,本说明书提供的HTML页面的局部风格编辑方法及系统,该方法包括:基于目标页面的目标结构化文档的标记代码、样式规则代码、目标元素的待编辑样式属性对应的计算样式以及主题设计令牌,构建编辑上下文;对编辑上下文和用户输入的自然语言风格编辑指令的解析结果进行打包处理,得到增强编辑指令,从而可以生成清晰的语义化风格编辑指令;基于增强编辑指令驱动AI编辑模型生成多个候选编辑方案;基于多个候选编辑方案分别对应的影响范围评分,从多个候选编辑方案中确定目标编辑方案,其中,影响范围评分用于量化评估候选编辑方案对目标页面中非目标元素的波及程度,基于目标编辑方案对目标页面进行局部风格编辑,从而,覆盖了全面的可选择的局部风格编辑方案,并基于影响范围评分评估各编辑方案导致目标页面全局风格漂移的风险程度,可以避免使用风险程度较大的编辑方案修改全局风格,提高了局部风格编辑的准确性和可控性。
Smart Images

Figure CN123012301A_ABST
Abstract
Description
Technical Field
[0001] This specification relates to the field of computer technology, and in particular to a method and system for editing the partial style of an HTML page. Background Technology
[0002] With the rapid development of Artificial Intelligence (AI), Large Language Model (LLM) technology has gradually become the core driving force for Hypertext Markup Language (HTML) page generation and style editing, which can lower the technical threshold for web page development.
[0003] In related technologies, AI editing models based on LLM technology respond to user instructions to perform local style editing on a certain area of the target page (such as changing the background color of a card to a more sophisticated level), and output a piece of rewritten HTML code or style rule code of the target page, thereby realizing local style editing of the HTML page.
[0004] However, in related technologies, since multiple elements in an HTML page may share a set of style rules, modifying the style of one element may accidentally modify the styles of other elements in the HTML page, causing a global style drift in the HTML page, which in turn causes an unexpected change in the overall visual style of the HTML page. Therefore, how to accurately and controllably edit the local style of an HTML page is a technical problem that urgently needs to be solved.
[0005] The information in the background section is merely information known only to the inventor and does not imply that such information had entered the public domain before the date of this application, nor does it imply that it can be considered prior art in this disclosure. Summary of the Invention
[0006] This specification provides a method and system for local style editing of HTML pages. It can generate local style editing schemes for target elements of a target page based on clear semantic style editing instructions. In addition, it can generate multiple candidate editing schemes through an AI editing model and determine the target editing scheme based on the influence range scores of the multiple candidate editing schemes. This reduces the risk of global style drift of the target page caused by local style editing and improves the accuracy and controllability of local style editing.
[0007] Firstly, this specification provides a method for editing the partial style of an HTML page, including: An editing context is constructed based on the markup code, style rule code, calculated styles corresponding to the editable style attributes of the target elements, and theme design tokens of the target page's structured document. The parsing results of the editing context and the natural language style editing instructions input by the user are packaged to obtain enhanced editing instructions; Based on the enhanced editing instructions, the AI editing model generates multiple candidate editing schemes; Based on the influence range scores corresponding to the multiple candidate editing schemes, a target editing scheme is determined from the multiple candidate editing schemes, wherein the influence range score is used to quantitatively evaluate the degree of impact of the candidate editing scheme on non-target elements in the target page; Based on the target editing scheme, perform partial style editing on the target page.
[0008] In some embodiments, the parsing results of the editing context and the user-input natural language style editing instructions are packaged to obtain enhanced editing instructions, including: The parsing results of the editing context, semantic style lock, and natural language style editing instructions are packaged to obtain enhanced editing instructions, wherein the semantic style lock is used to identify the prohibited modification attributes of protected styles in the target page.
[0009] In some embodiments, it also includes: The natural language style editing instructions are parsed to obtain a structured intent vector, which includes at least one of the following dimensions: hue, saturation, brightness, contrast, robustness, brand offset, and visual change amplitude. The parsing results of the editing context, semantic style lock, and natural language style editing instructions are packaged to obtain enhanced editing instructions, including: The editing context, semantic style lock, and structured intent vector are packaged to obtain enhanced editing instructions.
[0010] In some embodiments, the construction of the editing context based on the markup code of the target structured document of the target page, the style rule code, the calculated style corresponding to the editable style attribute of the target element, and the theme design token includes: Based on the target element, the calculated style corresponding to the style attribute to be edited of the target element, and the markup code and style rule code of the target page, the source chain of the target style is obtained by tracing back layer by layer. Based on the markup code and style rule code of the target page, as well as the semantic style rule library, the affected elements of the same style rule constraint are traced and counted upwards along the source chain of the target style to construct a style influence graph; The editing context is constructed based on the style influence diagram.
[0011] In some embodiments, before determining the target editing scheme from the multiple candidate editing schemes based on the influence range scores corresponding to the multiple candidate editing schemes, the method further includes: Based on the number of affected nodes, the DOM distance between the affected nodes and the target element, the degree of selector sharing, the magnitude of visual changes, and the semantic style lock conflict penalty corresponding to the multiple candidate editing schemes, the influence range score corresponding to the multiple candidate editing schemes is obtained.
[0012] In some embodiments, obtaining the impact range score corresponding to each of the multiple candidate editing schemes based on the number of affected nodes, the DOM distance between the affected nodes and the target element, the quantified value of selector sharing, the pre-calculated value of visual change magnitude, and the semantic style lock conflict penalty includes: The first scoring component is obtained by multiplying the number of affected nodes by the first weight coefficient. The second scoring component is obtained by multiplying the DOM distance between the affected node and the target element by the second weight coefficient. The third scoring component is obtained by multiplying the selectedor sharing degree quantification value with the third weight coefficient; The fourth scoring component is obtained by multiplying the pre-calculated value of the visual change amplitude with the fourth weighting coefficient. The fifth scoring component is obtained by multiplying the semantic style lock conflict penalty value by the fifth weight coefficient. The influence range score is obtained by summing the first rating component, the second rating component, the third rating component, the fourth rating component, and the fifth rating component.
[0013] In some embodiments, determining the target editing scheme from the multiple candidate editing schemes based on the influence range scores corresponding to the multiple candidate editing schemes includes: Based on the influence range scores corresponding to the multiple candidate editing schemes, the candidate editing scheme with the smallest influence range score is determined as the target editing scheme.
[0014] In some embodiments, before determining the target editing scheme from the multiple candidate editing schemes based on the influence range scores corresponding to the multiple candidate editing schemes, the method further includes: Each of the multiple candidate editing schemes is verified to obtain the verification results corresponding to each of the multiple candidate editing schemes; The step of determining the target editing scheme from the multiple candidate editing schemes based on their respective impact range scores includes: Based on the verification results corresponding to the multiple candidate editing schemes, the candidate editing schemes whose verification results are passed are obtained. From the candidate editing schemes that passed the verification, the candidate editing scheme with the smallest impact range score is determined as the target editing scheme.
[0015] In some embodiments, the step of verifying the plurality of candidate editing schemes respectively to obtain verification results corresponding to the plurality of candidate editing schemes includes: For each of the multiple candidate editing schemes, at least one verification dimension is performed. If the verification of any verification dimension fails, the verification result of the candidate editing scheme is determined to be a verification failure, and the verification dimension that failed the verification is recorded. If all verification dimensions pass the verification, the verification result of the candidate editing scheme is determined to be successful. The verification dimensions include at least one of the following: target range out-of-bounds verification, semantic style lock conflict verification, text contrast verification, target external rendering drift verification, and theme consistency verification.
[0016] In some embodiments, the method further includes: If the verification results of the multiple candidate editing schemes all fail, the AI editing model is driven to regenerate multiple candidate editing schemes based on the verification dimensions that caused the candidate editing schemes to fail the verification.
[0017] Secondly, this specification also provides a partial style editing system for an HTML page, comprising: at least one storage medium storing at least one instruction set; and at least one processor communicatively connected to the at least one storage medium, wherein the at least one processor reads the at least one instruction set during operation and executes the partial style editing method for an HTML page as described in any of the first aspects according to the instructions of the at least one instruction set.
[0018] Thirdly, this specification also provides a computer-readable non-transitory storage medium, wherein the computer-readable non-transitory storage medium stores at least one instruction set, which, when executed by at least one processor, implements the partial style editing method for an HTML page as described in the first aspect.
[0019] As can be seen from the above technical solutions, the HTML page local style editing method and system provided in this specification includes: constructing an editing context based on the markup code, style rule code, calculated style corresponding to the style attributes to be edited of the target element, and theme design token of the target page's structured document; packaging and processing the parsing results of the editing context and the natural language style editing instructions input by the user to obtain enhanced editing instructions, thereby generating clear semantic style editing instructions; driving an AI editing model to generate multiple candidate editing schemes based on the enhanced editing instructions; determining the target editing scheme from the multiple candidate editing schemes based on the influence range scores corresponding to each candidate editing scheme, wherein the influence range score is used to quantitatively evaluate the degree of impact of the candidate editing scheme on non-target elements in the target page; performing local style editing on the target page based on the target editing scheme, thereby covering a comprehensive range of selectable local style editing schemes, and assessing the risk level of each editing scheme causing global style drift of the target page based on the influence range score, which can avoid using editing schemes with a high risk level to modify the global style, thus improving the accuracy and controllability of local style editing.
[0020] The methods for editing the partial style of HTML pages and other functions of the system provided in this specification will be partially listed in the following description. The inventive aspects of the methods and systems for editing the partial style of HTML pages provided in this specification can be fully explained through practice or by using the methods, apparatus, and combinations described in the detailed examples below. Attached Figure Description
[0021] To more clearly illustrate the technical solutions in the embodiments of this specification, the accompanying drawings used in the description of the embodiments will be briefly introduced below. Obviously, the accompanying drawings described below are only some embodiments of this specification. For those skilled in the art, other drawings can be obtained based on these drawings without creative effort.
[0022] Figure 1 This diagram illustrates an application scenario of a partial style editing method for an HTML page provided by an embodiment of this specification. Figure 2 This specification shows a schematic diagram of the hardware structure of a local style editing system provided in an embodiment. Figure 3 A flowchart illustrating a method for editing the partial style of an HTML page according to an embodiment of this specification is shown. Figure 4 A flowchart illustrating another method for editing the partial style of an HTML page provided in an embodiment of this specification is shown. Figure 5This specification shows a schematic diagram of the structure of a target style source chain provided in an embodiment; Figure 6 This specification shows a schematic diagram of the structure of a style influence diagram provided in an embodiment. Figure 7 This diagram illustrates a flowchart of another method for editing the partial style of an HTML page, as provided in an embodiment of this specification. Figure 8 This specification illustrates a flowchart of yet another method for editing the partial style of an HTML page, as provided in an embodiment; and Figure 9 This diagram illustrates a flowchart of yet another method for editing the partial style of an HTML page, as provided in an embodiment of this specification. Detailed Implementation
[0023] The following description provides specific application scenarios and requirements for this specification, intended to enable those skilled in the art to make and use the contents of this specification. Various partial modifications to the disclosed embodiments will be apparent to those skilled in the art, and the general principles defined herein can be applied to other embodiments and applications without departing from the spirit and scope of this specification. Therefore, this specification is not limited to the embodiments shown, but rather to the widest scope consistent with the claims.
[0024] The terminology used herein is for the purpose of describing particular exemplary embodiments only and is not restrictive. For example, unless the context clearly indicates otherwise, the singular forms “a,” “an,” and “the” used herein may also include the plural forms. When used in this specification, the terms “comprising,” “including,” and / or “containing” mean that the associated integers, steps, operations, elements, and / or components are present, but do not exclude the presence of one or more other features, integers, steps, operations, elements, components, and / or groups, or that other features, integers, steps, operations, elements, components, and / or groups may be added to the system / method.
[0025] Considering the following description, these and other features of this specification, as well as the operation and function of the related components of the structure, and the economy of assembly and manufacture of the parts, can be significantly improved. All of these form part of this specification with reference to the accompanying drawings. However, it should be clearly understood that the drawings are for illustrative and descriptive purposes only and are not intended to limit the scope of this specification. It should also be understood that the drawings are not drawn to scale.
[0026] The flowcharts used in this specification illustrate operations implemented according to some embodiments of this specification. It should be clearly understood that the operations in the flowcharts may not be implemented in a sequential order. Instead, the operations may be implemented in reverse order or simultaneously. Furthermore, one or more additional operations may be added to the flowcharts. One or more operations may be removed from the flowcharts.
[0027] In this specification, "X includes at least one of A, B, or C" means that X includes at least A, or X includes at least B, or X includes at least C. That is, X may include only one of A, B, and C, or any combination of A, B, and C, as well as other possible content / elements. The arbitrary combination of A, B, and C can be A, B, C, AB, AC, BC, or ABC.
[0028] In this specification, unless explicitly stated otherwise, the relationships between structures can be direct or indirect. For example, when describing "A is connected to B," unless it is explicitly stated that A and B are directly connected, it should be understood that A can be directly connected to B or indirectly connected to B. Similarly, when describing "A is on top of B," unless it is explicitly stated that A is directly above B (AB is adjacent and A is above B), it should be understood that A can be directly above B or indirectly above B (AB is separated by other elements, and A is above B). And so on.
[0029] First, we will explain the terms used in this instruction manual.
[0030] Local style editing: Modify the style properties of only an element or area on the page, such as color, border, spacing, and font size.
[0031] Structured intent vector: A structured field that the system can process, converted from natural language style editing instructions, containing multi-dimensional style parameter components such as hue, saturation, contrast, and brand consistency.
[0032] Style source chain: refers to the style dependency path formed by matching style rules with selectors to declared style variables or tokens, and tracing back to the style attribute values corresponding to style variables or tokens, for a specific style (such as a card background) that is ultimately displayed on a page. The selectors determine the effective style rules for the element by matching the element's tag name, class name, or attributes.
[0033] Style Influence Diagram: This refers to a structural diagram showing the impact of modifying a style on a specific element on a page. The diagram includes the style source chain corresponding to the element and other elements affected by the style rules that are in effect in the style source chain.
[0034] AI editing models refer to intelligent models that can perceive the structure of HTML pages, generate global / local style editing schemes for HTML pages based on users' natural language commands, and perform global / local style editing on HTML pages. Large language models can provide AI editing models with capabilities such as natural language understanding, code generation, and contextual reasoning.
[0035] In the embodiments of this specification, the large language model, also referred to simply as a large model, is a natural language processing model based on deep learning technology. Its parameter count typically ranges from billions to hundreds of billions or even higher, possessing powerful language understanding and generation capabilities. Large language models can employ Transformer architectures or variants thereof, such as Generative Pre-trained Transformer (GPT) models and Bidirectional Encoder Representations from Transformers (BERT). This architecture utilizes an attention mechanism to achieve global modeling of sequential data, efficiently handling long-distance dependencies and thus performing exceptionally well in natural language tasks. Large language models can be used to perform various tasks such as text generation, language translation, text summarization, and question answering reasoning.
[0036] In some embodiments, large language models can also have the ability to understand and generate data from other modalities (such as visual, audio, etc.). In this case, large language models can also be called multimodal large language models (MLLMs). MLLMs provide a richer and more natural interactive experience by integrating multiple types of input and output, such as text, images, and sound.
[0037] It should be noted that the key technologies of large language models can be found in the detailed description in the paper "AS survey of Large Language Models" (paper number: arXiv:2303.18223v18, published on March 8, 2026), and will not be repeated here.
[0038] The following section introduces the application scenarios of this manual.
[0039] The technical solutions provided in this specification are applicable to scenarios where style editing is performed on specific areas of HTML pages. Examples include style editing of specific areas of HTML pages in fields such as finance, logistics, and healthcare.
[0040] However, in related technologies, since multiple elements in an HTML page may share a set of style rules, modifying the style of one element may accidentally modify the styles of other elements in the HTML page, causing a global style drift in the HTML page, which in turn causes an unexpected change in the overall visual style of the HTML page.
[0041] To address this, this specification provides a method for local style editing of HTML pages. It constructs an editing context based on the target structured document's markup code, style rule code, calculated styles corresponding to the editable style attributes of target elements, and theme design tokens. The parsing results of the editing context and user-inputted natural language style editing instructions are packaged to obtain enhanced editing instructions, thereby generating clear semantic style editing instructions. Based on these enhanced instructions, an AI editing model generates multiple candidate editing schemes. Based on the impact range scores corresponding to each candidate editing scheme, a target editing scheme is determined from the multiple candidate schemes. The impact range score is used to quantitatively evaluate the degree to which the candidate editing schemes affect non-target elements on the target page. Local style editing is performed on the target page based on the target editing scheme, thus covering a comprehensive range of selectable local style editing schemes. Furthermore, the impact range score assesses the risk of each editing scheme causing global style drift on the target page, avoiding the use of high-risk editing schemes to modify the global style, thereby improving the accuracy and controllability of local style editing.
[0042] It should be noted that the above description of application scenarios is only one of the many use cases provided in this specification. Those skilled in the art should understand that when the partial style editing method for HTML pages provided in this specification is applied to other use cases, the implementation method and technical effect are similar.
[0043] Figure 1 This diagram illustrates an application scenario of a partial style editing method for an HTML page provided according to embodiments of this specification. For example... Figure 1 As shown, the application scenario 100 includes: user 110, terminal device 120, server 130 and network 140.
[0044] User 110 can be the user who triggers partial style editing of the target page. For example, user 110 can perform a target operation on terminal device 120 to trigger partial style editing of the target page.
[0045] Terminal device 120 is an electronic device that provides interactive functions to user 110. For example, terminal device 120 may provide an interactive interface to user 110, where user 110 can perform interactive operations. In some embodiments, in response to detecting a target operation triggered by user 110, terminal device 120 executes the partial style editing method for an HTML page described herein. At this time, terminal device 120 may store data or instructions for executing the partial style editing method for an HTML page described herein, and may execute or be used to execute the data or instructions. In some embodiments, terminal device 120 may include a hardware device with data information processing capabilities and the necessary programs required to drive the hardware device to execute the partial style editing method for an HTML page described herein.
[0046] In some embodiments, terminal device 120 may include: mobile devices such as mobile phones and smartwatches, tablet computers, laptops, built-in devices in motor vehicles, or similar content, or any combination thereof, without limitation by this specification. In some embodiments, mobile devices may include smart home devices, smart mobile devices, virtual reality devices, augmented reality devices, or similar devices, or any combination thereof. In some embodiments, smart home devices may include smart TVs or desktop computers, or any combination thereof. In some embodiments, smart mobile devices may include smartphones, personal digital assistants, gaming devices, or navigation devices, or any combination thereof. In some embodiments, built-in devices in motor vehicles may include in-vehicle computers or in-vehicle televisions, etc.
[0047] like Figure 1 As shown, terminal device 120 can communicate with server 130. Server 130 can communicate with one or more terminal devices 120. In some embodiments, terminal devices can interact with the server via network 140 to receive or send messages, etc. For example, terminal device 120 can interact with the server via network 140 to send natural language style editing instructions to the server.
[0048] Server 130 can be a server that provides various services. For example, server 130 can be a cloud server or a local server. Server 130 can communicate with a terminal device 120 and receive data sent by that terminal device 120, or it can communicate with multiple terminal devices 120 and receive data sent by each terminal device 120.
[0049] In some embodiments, the partial style editing method for HTML pages described herein can be executed on server 130. In this case, server 130 may store data or instructions for executing the partial style editing method for HTML pages described herein, and may execute or be used to execute the data or instructions. Server 130 may include hardware devices with data processing capabilities and the necessary programs required to drive the hardware devices.
[0050] Network 140 is a medium used to provide a communication connection between terminal device 120 and server 130. Network 140 can facilitate the exchange of information or data. Figure 2 As shown, terminal device 120 and server 130 can be connected to network 140 respectively, and transmit information or data to each other through network 140.
[0051] In some embodiments, network 140 can be any type of wired or wireless network, or a combination thereof. For example, network 140 may include a cable network, a wired network, a fiber optic network, a telecommunications network, an intranet, the Internet, a local area network (LAN), a wide area network (WAN), a wireless local area network (WLAN), a metropolitan area network (MAN), a public switched telephone network (PSTN), a Bluetooth network™, a ZigBee™ short-range wireless network, a near field communication (NFC) network, or a similar network.
[0052] In some embodiments, network 140 may include one or more network access points. For example, network 140 may include wired or wireless network access points, such as base stations or internet exchange points, through which one or more components of terminal device 120 and server 130 can connect to network 140 to exchange data or information.
[0053] It is worth noting that, Figure 1 The number of terminal devices 120, servers 130, and networks 140 shown is merely illustrative. Any number of terminal devices 120, servers 130, and networks 140 can be used depending on implementation needs. Furthermore, the partial style editing method for HTML pages provided in this specification can be executed entirely on terminal device 120, entirely on server 130, or partially on terminal device 120 and partially on server 130.
[0054] In other words, Figure 1 and targeting Figure 1 The above description is only used to illustrate the possible application scenarios for the partial style editing method of HTML pages in this specification, and should not be construed as a limitation on the application scenarios.
[0055] It should be noted that in the embodiments of this specification, any processing of user personal information (including but not limited to collection, storage, use, processing, transmission, provision or disclosure) is carried out on the premise of obtaining user consent or having other legal basis (such as performance of contracts, legal obligations, etc.), and strictly complies with the provisions of relevant laws.
[0056] Figure 2 This diagram illustrates the hardware structure of a local style editing system 200 provided in an embodiment of this specification. The local style editing system 200 can execute the local style editing method P300 for HTML pages described in this specification. Technical details regarding the local style editing method P300 for HTML pages are described later and will not be repeated here. When the local style editing method for HTML pages is executed on terminal device 120, the local style editing system can be terminal device 120. When the local style editing method for HTML pages is executed on a server, the local style editing system 200 can be server 130. When the local style editing method for HTML pages is partially executed on terminal device 120 and partially executed on server 130, the local style editing system 200 can be a system including terminal device 120 and server 130.
[0057] like Figure 2 As shown, the local style editing system 200 includes at least one storage medium 230 and at least one processor 220. In some embodiments, the local style editing system 200 may further include an internal communication bus 210. In some embodiments, the local style editing system 200 may further include a communication port 250. In some embodiments, the local style editing system 200 may further include I / O components 260.
[0058] The internal communication bus 210 can connect different system components, including storage medium 230 and processor 220. I / O component 260 supports input / output between local style editing system 200 and other components.
[0059] Communication port 250 is used for data communication between the local style editing system 200 and the outside world. For example, the local style editing system 200 can connect to a network through communication port 250.
[0060] Storage medium 230 may include a data storage device. The data storage device may be a non-transitory storage medium or a transient storage medium. For example, the data storage device may include one or more of a disk 232, a read-only memory (ROM) 234, or a random access memory (RAM) 236. Storage medium 230 also includes at least one instruction set stored in the data storage device. The instruction set is computer program code, which may include programs, routines, objects, components, data structures, procedures, modules, etc., that execute the local style editing methods for HTML pages provided in this specification.
[0061] At least one processor 220 is communicatively connected to at least one storage medium 230 via an internal communication bus 210. The at least one processor 220 is used to execute the at least one instruction set described above. When the local style editing system 200 is running, the at least one processor 220 reads the at least one instruction set and executes the local style editing method for HTML pages provided in this specification according to the instructions of the at least one instruction set.
[0062] Processor 220 can execute all the steps included in the partial style editing method of an HTML page. Processor 220 can be in the form of one or more processors. Processor 220 can issue execution instructions. Processor 220 may include one or more hardware processors, such as microcontrollers, microprocessors, reduced instruction set computers (RISC), application-specific integrated circuits (ASICs), application-specific instruction set processors (ASIPs), central processing units (CPUs), graphics processing units (GPUs), physical processing units (PPUs), microcontroller units, digital signal processors (DSPs), field-programmable gate arrays (FPGAs), advanced RISC machines (ARMs), programmable logic devices (PLDs), any circuit or processor capable of performing one or more functions, or any combination thereof.
[0063] For illustrative purposes only, only one processor 220 is shown in the accompanying drawings of the local style editing system 200. However, it should be noted that the local style editing system 200 may also include multiple processors. Therefore, the operation and / or method steps disclosed in this specification may be executed by one processor as described herein, or they may be executed jointly by multiple processors. For example, if processor 220 of the local style editing system 200 in this specification executes steps A and B, it should be understood that steps A and B may also be executed jointly or separately by two different processors 220 (e.g., the first processor executes step A, the second processor executes step B, or the first and second processors jointly execute steps A and B).
[0064] Figure 3 This diagram illustrates a flowchart of a method for editing the local style of an HTML page according to an embodiment of this specification; this method P300 can be executed by a local style editing system 200. Figure 3 As shown, the method P300 provided in this specification may include S310-S350, wherein: S310: Construct an editing context based on the markup code, style rule code, calculated styles corresponding to the editable style attributes of the target element, and theme design token of the target page's structured document.
[0065] The target page refers to the HTML page where the user is currently making partial style edits. HTML pages are web pages written in the HTML language that can be rendered and displayed in a browser, including but not limited to: financial pages, logistics pages, map pages, and medical pages. Target pages can be generated based on AI editing models.
[0066] Specifically, the target structured document refers to the HTML document, which forms the basic skeleton of a webpage; markup code refers to the HTML source code, used to define the structure and semantics of the target page; style rule code can refer to Cascading Style Sheets (CSS) code, used to control the visual presentation of the target page; the target element refers to the area on the target page where the user wants to edit the style (such as function cards on a financial page); and a DesignToken is a variable that stores and names style attributes in data form. The editable style attributes of the target element are style attributes that the user can modify (such as color and font size). These editable style attributes can be located in the style rule code and directly control the visual presentation of the target element on the page. The computed style corresponding to the editable style attribute refers to the exact value that the editable style attribute can be used to render the page; for example, the computed style corresponding to the font size attribute is 16 pixels (px), and the computed style corresponding to the color attribute is blue.
[0067] It is understandable that the editing context refers to the set of structured input information that the AI editing model can understand and analyze when making decisions on local style editing. The local style editing system can locate the modifiable style variable corresponding to the style attribute to be edited of the target element from the editing context.
[0068] In some embodiments, the local style editing system can respond to a user's click operation on a target element on a target page and obtain the calculated style corresponding to the style attribute to be edited of the target element.
[0069] S320: Package the parsing results of the editing context and the natural language style editing instructions input by the user to obtain enhanced editing instructions.
[0070] Natural language style editing instructions refer to the clear or vague style requests (such as "make it more sophisticated") described by the user in natural language for the target element; the parsing result of natural language style editing instructions refers to the form (such as vector) of the style editing instructions that the machine can understand and process. Enhanced editing instructions are used to instruct the AI editing model to analyze the editing context based on the user's style requests for the target element and generate a corresponding style editing scheme.
[0071] Understandably, the target structured document of the target page covers the editable style attributes of each element on the target page, and the user's natural language style editing instructions contain the target element and the user's style requirements for the target element. Therefore, the local style editing system can locate the editable style attributes of the target element from the target structured document based on the user's natural language style editing instructions.
[0072] In some embodiments, the local style editing system can combine packaged data with prompts representing "generating multiple candidate editing schemes based on input content" as enhanced editing instructions. This improves the AI editing model's understanding of the user's style requirements.
[0073] In some embodiments, the local style editing system can modularly assemble the parsing results of the editing context and the natural language style editing instructions input by the user based on structured templates to obtain enhanced editing instructions.
[0074] Among them, the local style editing system can use identifiers to identify the parsing results of natural language style editing instructions, the editing context, and the editing object, i.e. the style attributes to be edited of the target element, into different modules, and assemble the corresponding modules together.
[0075] In other embodiments, the local style editing system can encapsulate the parsed results of the editing context and natural language style editing instructions into an editing table as an enhanced editing instruction.
[0076] The edit table can be a two-dimensional table, and the table header may include, but is not limited to, attribute fields such as the target element, the style attribute to be edited of the target element, the editable style variable of the style attribute to be edited, the current value and the target value of the editable style variable, and the target value refers to the style value after the style is edited.
[0077] S330: Based on enhanced editing instructions, the AI editing model generates multiple candidate editing schemes.
[0078] In this context, a candidate editing scheme refers to a local style editing scheme that modifies the style of a target element by editing the editable style variables corresponding to the style attributes to be edited. Editable style variables are declared in style rules, which include, but are not limited to: inline styles, scoped styles, inherited styles, and shared class modules.
[0079] Specifically, inline styles refer to writing the style attributes of the target element directly in the style attribute of the HTML tag; scoped styles refer to style rules that only apply to elements within a specific scope; inherited styles refer to child elements that automatically inherit the style attribute values of the parent element; and shared classes refer to multiple elements sharing a set of style rules by referencing the same class selector rule.
[0080] For example, alternative editing solutions could include modifying inline styles, modifying scoped styles, adding local classes, and adding CSS variables to style rules.
[0081] In some embodiments, the local style editing system can also generate multiple candidate editing scheme templates based on preset scheme rules, and then analyze and supplement the multiple candidate editing scheme templates based on the AI editing model driven by enhanced editing instructions to obtain multiple candidate editing schemes.
[0082] S340: Based on the impact range scores corresponding to multiple candidate editing schemes, determine the target editing scheme from the multiple candidate editing schemes.
[0083] The impact range score is used to quantitatively evaluate the extent to which candidate editing schemes affect non-target elements on the target page.
[0084] Understandably, since the local styles of multiple elements on the target page may be constrained by the same style rule, alternative editing solutions might modify the style properties of non-target elements while modifying the style properties of the target element, leading to a global style shift on the target page. The target editing solution has the least impact on non-target elements on the target page. Non-target elements can be elements that share inheritable style properties with the target element, elements that match the same selector as the target element, or elements that reference the same CSS variable as the target element.
[0085] It's also understandable that the target element is the corresponding node in the Document Object Model (DOM) tree obtained after the browser reads the HTML source code of the target page. The non-target element node in the DOM tree can be a descendant node, sibling node, ancestor node of the target element node, or a node hit by the same shared selector. The type of the non-target element node can be an element node or a text node.
[0086] In some embodiments, the local style editing system can determine the candidate editing scheme with the smallest influence range score from multiple candidate editing schemes as the target editing scheme based on the influence range scores corresponding to each candidate editing scheme.
[0087] Among them, the local style editing system can sort multiple candidate editing schemes in ascending order based on the influence range scores corresponding to each candidate editing scheme, and determine the candidate editing scheme with the smallest influence range score as the target editing scheme.
[0088] In some embodiments, the local style editing system can sort multiple candidate editing schemes in ascending order based on the influence range score using a preset large language model.
[0089] Therefore, by leveraging the powerful analytical and generative capabilities of a pre-defined large language model, the accuracy of ranking the impact range can be improved.
[0090] In other embodiments, the local style editing system can also sort multiple candidate editing schemes in ascending order based on the influence range score using a pre-trained sorting model, wherein the sorting model is a machine learning model.
[0091] Therefore, the local style editing system determines the candidate editing scheme with the smallest impact range score from multiple candidate editing schemes as the target editing scheme by using the impact range score corresponding to each candidate editing scheme. The impact range score provides a quantifiable measure of the risk of the candidate editing scheme, thereby improving the constraint on the local style editing behavior of the target element. This ensures that the obtained target editing scheme is strictly limited to the minimum risk level, thereby reducing the repair cost of high impact range schemes caused by misoperation.
[0092] S350: Perform partial style editing on the target page based on the target editing scheme.
[0093] The target editing scheme can include operation types and corresponding local style editing strategies. Operation types can be updating style attributes or adding local classes, and local style editing strategies can be deleting the current value of a style attribute and writing it to the target value, or adding a class in the style rules of the target element.
[0094] In some embodiments, the local style editing system can parse the local style editing strategy in the target editing scheme into a sequence of atomic operations that can be executed by the browser, locate the style rules corresponding to the target element in the target structured document of the target page, and execute the corresponding local style editing strategy based on the operation type of the target editing scheme.
[0095] In summary, the local style editing system constructs an editing context based on the target page's structured document's markup code, style rule code, calculated styles corresponding to the editable style attributes of target elements, and theme design tokens. It then packages the parsing results of the editing context and the user's input natural language style editing instructions to obtain enhanced editing instructions, thereby generating clear semantic style editing instructions. Based on these enhanced instructions, an AI editing model generates multiple candidate editing schemes. Based on the impact range scores corresponding to each candidate scheme, a target editing scheme is determined from these schemes. The impact range score quantifies the degree to which candidate editing schemes affect non-target elements on the target page. Local style editing is then performed on the target page based on the target editing scheme. This comprehensive coverage of selectable local style editing schemes, combined with the impact range score's assessment of the risk of each editing scheme causing global style drift on the target page, avoids using high-risk editing schemes to modify the global style, thus improving the accuracy and controllability of local style editing.
[0096] In some embodiments, the local style editing system can also package the parsing results of the editing context, semantic style lock, and natural language style editing instructions to obtain enhanced editing instructions.
[0097] Semantic style locks are used to identify the prohibited modification attributes of protected styles on the target page.
[0098] Specifically, "protected style cannot be modified" can mean that elements currently using a protected style cannot have their styles modified, or that the style attributes of a target element cannot be changed to a protected style. Protected styles include, but are not limited to: protected colors, protected sizes, protected fonts, and protected positional parameters. For example, on a financial page, protected colors include, but are not limited to: brand colors, rising colors, falling colors, important notification colors (such as risk warning colors), main button colors, profit colors, and loss colors; on a map page, protected colors include, but are not limited to: smooth traffic colors and congestion colors; protected sizes include, but are not limited to: input box height, button size, and navigation bar height; protected fonts include, but are not limited to: main title font and body text font; and protected positional parameters include, but are not limited to: left margin and right margin of the page.
[0099] In some embodiments, users can apply semantic style locks to protected styles on a target page in text form within natural language style editing instructions.
[0100] For example, a user's natural language style editing instruction could be "Change only the background color of card 1 to a solid dark blue, and prohibit modification of the brand color and risk warning color on the target page".
[0101] In other embodiments, the local style editing system can add semantic style lock rules to the style rules corresponding to the protected style.
[0102] For example, the local style editing system can add semantic style lock rules to the inline styles corresponding to the protected styles.
[0103] Therefore, the local style editing system also packages semantic style locks into enhanced editing instructions, clearly expressing that elements with style attributes of protected styles cannot have their styles modified, or that target elements cannot be modified to protected styles. This further constrains the compliance of the AI editing model in generating local style editing solutions for target elements and improves the accuracy of generating local style editing solutions.
[0104] In addition, in some embodiments, users can also add explicitly authorized editable styles in natural language style editing instructions. When the editable style is a protected style, it can also make protected styles with semantic style locks applied available, and can also modify the style attributes of elements whose current style is a protected style.
[0105] For example, in this case, the user's natural language style editing instructions could be: "Change the background color of card 1 to blue, and allow modification to brand blue"; or "Make the background color of card 1 more eye-catching, and allow modification to the color of card 2 to brand blue".
[0106] In some embodiments, the local style editing system can also parse natural language style editing instructions to obtain a structured intent vector.
[0107] The structured intent vector includes at least one of the following dimensions: hue, saturation, brightness, contrast, robustness, brand offset, and visual variation.
[0108] Specifically, hue represents the basic type of color (such as red), saturation represents the purity or vividness of the color, lightness represents the brightness of the color, contrast represents the difference in brightness between the brightest and darkest parts, robustness represents the degree to which users feel safe, reliable, and professional when using the target page after style editing, brand offset represents the offset between the style of the target element after style editing and the default style of the brand to which the target page belongs, visual change refers to the drastic change in pixel values before and after style editing of the target page, which can be calculated based on the pixel difference between the rendered screenshots of the page before and after editing; the structured intent vector is a quantitative expression of the degree of style editing of the target element based on at least one of these dimensions.
[0109] The local style editing system can parse natural language style editing instructions based on a preset large language model to obtain a structured intent vector. For example, the style intent vector can be a 7-dimensional vector represented as [Hue: 215°, Saturation: +34%, Brightness: +20%, Contrast: 4.8:1, Robustness: 0.86, Brand Shift: 0.12, Visual Change Range: 0.24]. Here, hue is 215°, saturation is increased by 34%, brightness is increased by 20%, contrast is changed to 4.8:1, robustness is 0.86, brand shift is 0.12, and visual change range is 0.24. The values of each dimension can also be normalized to between 0 and 1.
[0110] It is understandable that structured intent vectors may also include, but are not limited to, components such as the indentation range before text, the indentation range after text, and line spacing.
[0111] In some embodiments, the local style editing system may also pre-store multiple preset style intent rules and, based on the preset style intent rules, convert the user's natural language style editing instructions into corresponding structured intent vectors.
[0112] For example, the preset style intent rule A is used to map the "robust" in the natural language style editing instructions to a style intent vector of "low saturation, high contrast, low brightness".
[0113] Furthermore, the local style editing system can package the editing context, semantic style lock, and structured intent vector to obtain enhanced editing instructions.
[0114] In some embodiments, the local style editing system can modularly assemble the editing context, semantic style lock, and structured intent vector based on structured templates to obtain enhanced editing instructions.
[0115] In other embodiments, the local style editing system can encapsulate the editing context, semantic style lock, and structured intent vector into an editing table as an enhanced editing instruction.
[0116] In some embodiments, the local style editing system can also add a semantic style lock component to the structured intent vector to obtain an updated structured intent vector, and package the editing context and the updated structured intent vector to obtain enhanced editing instructions.
[0117] For example, a structured intent vector can be represented as [Hue: 215°, Saturation: +34%, Brightness: +20%, Contrast: 4.8:1, Robustness: 0.86, Brand Offset: 0.12, Visual Variation: 0.24, Semantic Style Lock: Prohibit modification of brand colors].
[0118] Therefore, the local style editing system parses natural language style editing instructions to obtain structured intent vectors, thereby transforming the ambiguity of natural language into the determinism of structured intent vectors. Furthermore, it packages the editing context, semantic style lock, and structured intent vectors to obtain enhanced editing instructions. This improves the AI editing model's understanding of editing instructions, reduces the risk of illusions, and enhances the accuracy of generating local style editing solutions.
[0119] Furthermore, in some embodiments, the local style editing system packages the editing context, semantic style lock, structured intent vector, brand specifications of the target page, application type, and the user's historical style preferences to obtain enhanced editing instructions, thereby further enriching the basic data information for the AI editing model to generate local style editing solutions.
[0120] Figure 4 This is a flowchart illustrating another method for editing the partial style of an HTML page, provided in an embodiment of this specification. Figure 4 Is Figure 3 Based on the illustrated embodiment, further, a possible implementation of S310 is described, in which the local style editing method P300 of the HTML page can be executed by the local style editing system 200. For example... Figure 4 As shown, the local style editing method P300 of this HTML page may include: S410-S430, where: S410: Based on the target element, the calculated style corresponding to the style attribute to be edited of the target element, and the markup code and style rule code of the target page, trace back layer by layer to obtain the source chain of the target style.
[0121] The target style source chain refers to the control source chain of the currently effective style attribute of the target element. That is, it is the style dependency path formed by starting from the target element, matching style rules through selectors to declared style variables or tokens, and tracing back to the style attribute value corresponding to the current style variable or token.
[0122] Specifically, based on the markup code and style rule code of the target page, the local style editing system can start from the style attribute to be edited (such as background color) of the target element and trace upwards along the currently effective selectors, declared style rules, referenced style variables, and computed styles of the target element to obtain the target style source chain of the target element. Among them, the style rules matched by the selectors can come from style sources such as inline styles, scoped styles, inherited styles, or shared classes. In some embodiments, the local style editing system can also analyze the initial page code based on a preset large language model to obtain the target style source chain of the target element.
[0123] Therefore, by leveraging the powerful semantic understanding, analysis, and generation capabilities of a pre-defined large language model, the accuracy of obtaining the source chain of the target style can be improved.
[0124] It should be noted that there can be one or more target style source chains. One target style source chain corresponds to one style attribute to be edited. For example, the background color of the card corresponds to one target style source chain, and the border size of the card corresponds to another target style source chain.
[0125] Understandably, if the user's sole purpose is to change the color style of the target element, the local style editing system can obtain the target color source chain of the target element from the initial page code of the target page; if the user's purpose is to change the color style and border specifications of the target element, the local style editing system can obtain the target color source chain and target specification source chain of the target element from the initial page code of the target page.
[0126] Taking a target element corresponding to a target style source chain as an example, the target style source chain of the target element can be as follows: Figure 5 As shown, the target style source chain describes the relationship between the target element, the selector, the style rules declared by the selector, the style variables referenced by the style rules, and the current values of the style variables.
[0127] For example, assuming the target element is card 0 on the financial page, and the target attribute style is the background color of card 0, then the selector can be a class selector with the class name ".product-card". The local style editing system can set the background color of card 0 to a style variable named "card-bg" in ".product-card" through declaration, and parse out the current value of the background color as blue.
[0128] In some embodiments, each style property to be edited of the target element may also correspond to multiple candidate style source chains. The multiple candidate style source chains are superimposed by CSS cascading rules to determine the final visual effect of the style property to be edited of the target element.
[0129] The local style editing system can trace back layer by layer to obtain multiple candidate style source chains based on the target element, the calculated style corresponding to the style attribute to be edited of the target element, and the markup code and style rule code of the target page, and determine the target style source chain from multiple candidate style source chains based on CSS cascading rules.
[0130] CSS cascading rules refer to the rules for prioritizing multiple candidate style source chains. A local style editing system can determine the highest-priority candidate style source chain as the target style source chain.
[0131] In some embodiments, the sources of style rule declarations are divided into multiple levels, such that declarations marked with "!important" have a higher level than declarations without this mark; the local style editing system can determine the priority order of multiple candidate style source chains based on the order of the declaration sources from high to low.
[0132] Among them, the local style editing system can determine the candidate style source chain corresponding to the highest-level declaration as the target style source chain.
[0133] In other embodiments, the local style editing system can determine the priority order of multiple candidate style source chains based on the chronological order of their appearance.
[0134] Among them, the local style editing system can determine the candidate style source chain corresponding to the earliest declaration as the target style source chain.
[0135] It should be noted that for a style attribute to be edited, the corresponding multiple candidate style source chains are of the same type. For example, for the color attribute, multiple candidate style source chains are all color source chains.
[0136] The candidate style source chain describes the relationship between the target element, candidate selectors, style rules declared by the candidate selectors, referenced candidate style variables, and the current value of the candidate style variables. For example, assuming the target attribute style is the background color of card 0, then in candidate style source chain A for card 0, candidate selector A could be a class selector with the class name ".product-card", and in candidate style source chain B for card 0, candidate selector B could be a selector with the custom rule name "[data-edit-id="card-02"]".
[0137] S420: Based on the markup code and style rule code of the target page, as well as the semantic style rule library, trace and count the affected elements of the same style rule constraint upward along the source chain of the target style, and construct a style influence graph.
[0138] The semantic style rule library contains the semantic style rules corresponding to each element on the target page. For example, in a financial page, the semantic style rules include, but are not limited to: using brand colors for elements such as brand logos and buy buttons, using profit colors for elements such as price increase data and upward arrows, and using risk warning colors for high-risk product labels.
[0139] Specifically, the local style editing system can traverse the markup code and style rule code of the target page, analyze the affected elements in the target page whose style attributes are still constrained by the style rule based on the style rules in the target style source chain and the semantic style rule library, and then construct a style influence diagram based on the target style source chain and the affected elements.
[0140] Understandably, the style influence graph not only records the relationship between the target element, selector, style rules declared by the selector, style variables, and the current values of the style variables, but also records other elements affected by the style rules matched by the selector.
[0141] In some embodiments, the local style editing system can perform contextual analysis on the markup code and style rule code of the target page, the style rules in the target style source chain, and the semantic style rule library based on a preset large language model, to obtain the affected elements in the target page whose style attributes are still constrained by the style rule output by the preset large language model.
[0142] Therefore, by leveraging the powerful semantic understanding, analysis, and generation capabilities of a pre-defined large language model, the accuracy of obtaining affected elements constrained by the same style rule can be improved.
[0143] Taking the example where the style rules in the target style source chain also constrain two other affected elements, the style influence diagram corresponding to the target element can be as follows: Figure 6 As shown, the solid line represents the source chain of the target style, one end of the dashed line represents the style rule matched by the selector, and the other end of the dashed line represents the two affected elements: element A and element B.
[0144] For example, assuming the target element is card 0, editing the style rules declared in ".product-card" may also constrain the style attributes of the brand logo and the buy button.
[0145] In some embodiments, the style influence graph of the target element may include the target style source chain, the affected element, and the semantic identifier of the current value of the style variable in the target style source chain. The semantic identifier may include, but is not limited to, ordinary decorative colors, brand colors, and risk warning colors.
[0146] Understandably, semantic tags can be used to identify whether the current value of a style variable in the target style source chain matches a protected style.
[0147] For example, in a finance page, suppose the target element is card 0. The semantic identifier of card 0's background color is a normal decorative color, which does not match the protected style.
[0148] Therefore, by adding semantic identifiers to the current values of style variables that the user wants to modify, the local style editing system strengthens the differences between different style variable values and can more comprehensively describe the style context information related to the user's local style requirements. This helps to limit the effective range of style variable modification values and improve the rationality of generating candidate editing schemes.
[0149] S430: Construct an editing context based on the style influence diagram.
[0150] In some embodiments, the local style editing system can convert the style influence map into a natural language description of the influence map summary, and package the style influence map and the influence map summary into an editing context.
[0151] The influence diagram summary serves as a textual description of the style influence diagram. The influence diagram summary may include, but is not limited to: the style attributes to be edited of the target element, the currently effective style rules, the style variables declared in the style rules, the current values of the style variables, and the affected elements constrained by the style rules.
[0152] In some embodiments, the influence graph summary may also include a constraint description on the style rules currently in effect for the target element. The constraint description may be that if the style rule is a shared rule, it cannot be modified, or a local rule that only constrains the target element may be created.
[0153] Understandably, after the local style editing corresponding to the current target element takes effect, the local style editing system obtains the updated target structured document of the target page; the local style editing system can update the editing context based on the markup code, style rule code, calculated style corresponding to the style attribute to be edited of the next target element, and theme design token of the updated target structured document.
[0154] In the embodiments described in this specification, the local style editing system obtains the editing context by acquiring the target style source chain corresponding to the target element and constructing a style influence graph. This constructs a complete style control path and a clear style influence relationship for local style editing of the target element, making the editing context traceable and interpretable, and providing high-quality input for the subsequent AI editing model to generate local style editing solutions.
[0155] In some embodiments, before determining the target editing scheme from multiple candidate editing schemes based on the influence range scores corresponding to each candidate editing scheme, the local style editing system may also obtain the influence range scores corresponding to each candidate editing scheme based on the number of affected nodes, the DOM distance between the affected nodes and the target element, the quantified value of selector sharing, the pre-calculated value of visual change amplitude, and the semantic style lock conflict penalty corresponding to each candidate editing scheme.
[0156] Here, the affected node refers to the DOM node in the DOM tree corresponding to the target page. The number of affected nodes corresponding to the candidate editing scheme refers to the number of nodes that will actually produce visual changes when the local style editing system operates on the candidate editing scheme. This may include the number of elements hit by the selector and / or the number of child elements affected by inherited styles. For example, the number of affected nodes may be 3.
[0157] DOM distance can be obtained based on the number of levels between DOM nodes in the DOM tree corresponding to the target page. For example, DOM distance can be 1.
[0158] In some embodiments, when there is only one affected node corresponding to each candidate editing scheme, the local style editing system can determine the DOM distance between the affected node and the target element based on the number of layers between the affected node and the DOM node corresponding to the target element.
[0159] The local style editing system can use the number of layers between the affected node and the corresponding DOM node of the target element as the DOM distance between the affected node and the target element.
[0160] In other embodiments, when there are multiple affected nodes corresponding to each candidate editing scheme, the local style editing system can determine the DOM distance between the affected nodes and the target element based on the number of layers between the multiple affected nodes and the DOM node corresponding to the target element.
[0161] Among them, the local style editing system can use the maximum value or the average value of multiple layers as the DOM distance between the affected node and the target element.
[0162] The selector sharing quantization value can be obtained based on the number of all elements that match the selector's style rule in the candidate editing scheme. For example, suppose the candidate editing scheme is to modify the style rule with the class name ".product-card". The number of elements hit by this style rule can be 2, then the selector sharing quantization value can be 2 or 0.2.
[0163] The local style editing system can obtain a pre-calculated value of the visual change amplitude based on the geometric information, the position of the changed elements, and the pixel difference in width and height of the changed elements before and after local style editing of the target page through candidate editing schemes. For example, the pre-calculated value of the visual change amplitude can be 0.2.
[0164] Semantic style lock conflict penalty refers to the degree of impact of a candidate editing scheme on elements with protected styles.
[0165] In some embodiments, the local style editing system can classify multiple protected styles of the target page into levels, for example, the level of brand color is higher than that of revenue color. Then, a lock conflict weight is assigned to each level. Next, based on whether at least one style variable involved in the candidate editing scheme conflicts with the semantic style lock of the protected style, and in the case of conflict, the lock conflict weights corresponding to the at least one style variable involved are summed to obtain the semantic style lock conflict penalty corresponding to the candidate editing scheme.
[0166] If modifying a style variable involved in a candidate editing scheme causes a style change in an element with a protected style, the local style editing system can determine that the style variable conflicts with the semantic style lock of the protected style.
[0167] For example, for a financial page, the local style editing system can classify protected colors such as brand color, profit color, and risk warning color into levels, and assign a lock conflict weight to each level. For example, the lock conflict weight corresponding to the brand color is 60, the lock conflict weight corresponding to the profit color is 80, the lock conflict weight corresponding to the risk warning color is 100, and the lock conflict weight corresponding to the ordinary decorative color is set to 0.
[0168] The semantic style lock conflict penalty can be expressed by the following formula:
[0169] in, This represents the lock conflict penalty value. This indicates the number of style variable types involved in the candidate editing scheme. Indicates the first Lock conflict weights corresponding to various style variables.
[0170] It should be noted that, in the absence of conflict, the semantic style lock conflict penalty corresponding to this candidate editing scheme is 0.
[0171] Therefore, the local style editing system can reflect the importance of protected styles based on lock conflict weights, and implement different levels of protection for semantic style locks corresponding to different levels of protected styles. This allows for accurate acquisition of the global style drift caused by other elements whose styles are modified to be protected styles, and improves the interpretability of the influence range score corresponding to the candidate editing scheme.
[0172] In other embodiments, the local style editing system can also obtain the lock conflict penalty value corresponding to each candidate editing scheme based on the lock conflict weight, style change range, and authorization coefficient involved in each candidate editing scheme.
[0173] Here, the style change magnitude represents the change value of the modified style variable, and the authorization coefficient represents whether the user explicitly authorizes the modification of the target element's style attribute to a protected style in the local style editing command. For example, explicitly authorizing the change of the card's background color to the new brand blue.
[0174] Specifically, in the absence of explicit authorization, the authorization coefficient can be set to a first preset value, and in the presence of explicit authorization, the authorization coefficient can be set to a second preset value. For example, the first preset value can be 1, and the second preset value can be 0.25.
[0175] In the event of a conflict, the local style editing system can multiply and sum the lock conflict weights, style change magnitudes, and authorization coefficients corresponding to at least one style variable involved in each candidate editing scheme, to obtain the semantic style lock conflict penalty corresponding to that candidate editing scheme, which can be expressed by the following formula:
[0176] in, Indicates the first The range of style changes corresponding to each style variable. Used to the first The style variation range of this style variable is constrained to be between 0 and 1. Indicates the first The authorization coefficient corresponding to each style variable.
[0177] For example, suppose that in candidate editing scheme A, the lock conflict weight corresponding to style variable A that conflicts with the semantic style lock of protected style A is 60, the style change range corresponding to style variable A is 8, and the user modifies style variable A to protected style A without authorization, with an authorization coefficient of 1, then the semantic style lock conflict penalty corresponding to candidate editing scheme A can be 24.
[0178] Therefore, the local style editing system can more accurately quantify the risk level caused by semantic style lock conflicts based on multiple dimensions such as lock conflict weight, style change range, and authorization coefficient, improve the accuracy and reliability of obtaining lock conflict penalty values, and provide a high-quality decision-making basis for subsequent evaluation and ranking of impact range scores.
[0179] In some embodiments, the local style editing system can perform weighted processing on the number of affected nodes, the DOM distance between the affected nodes and the target element, the degree of selector sharing, the magnitude of visual changes, and the semantic style lock conflict penalty corresponding to each candidate editing scheme to obtain the influence range score corresponding to the candidate editing scheme. The weighted processing can be weighted average processing or weighted summation processing.
[0180] Therefore, the local style editing system obtains the impact range score for each candidate editing scheme based on the number of affected nodes, the DOM distance between the affected nodes and the target element, the quantified value of selector sharing, the pre-calculated value of visual change amplitude, and the semantic style lock conflict penalty. This allows for a comprehensive score of the impact range from multiple dimensions, enabling a complete understanding of the potential risks to the target page caused by executing any candidate editing scheme and improving the interpretability of the impact range score obtained for each candidate editing scheme.
[0181] Figure 7This is a flowchart illustrating another method for editing the partial style of an HTML page, as provided in the embodiments of this specification. Figure 7 Is Figure 3 Based on the illustrated embodiment, further, prior to S340, a possible implementation of obtaining the influence range scores corresponding to multiple candidate editing schemes is described, and the local style editing method P300 of this HTML page can be executed by the local style editing system 200. For example... Figure 7 As shown, the local style editing method P300 of this HTML page can include: S710-S760, where: S710: The first score component is obtained by multiplying the number of affected nodes by the first weight coefficient.
[0182] The local style editing system can use the product of the number of affected nodes and a first weighting coefficient as the first scoring component. The local style editing system can pre-store the first weighting coefficient; for example, the first weighting coefficient could be 0.25.
[0183] Specifically, the first score component represents the breadth of impact of the candidate editing scheme on the target page, that is, how many nodes in the DOM tree are affected. Understandably, a higher first score component indicates a greater breadth of impact on the target page and a higher risk of global style changes; conversely, a lower first score component indicates a lower breadth of impact and a lower risk of global style changes.
[0184] S720: The second scoring component is obtained by multiplying the DOM distance between the affected node and the target element by the second weight coefficient.
[0185] The local style editing system can use the product of the DOM distance between the affected node and the target element and a second weighting coefficient as the second scoring component. The local style editing system can pre-store the second weighting coefficient; for example, the second weighting coefficient can be 0.25.
[0186] Specifically, the second score component characterizes the depth of impact of the candidate editing scheme on the target page; that is, the hierarchical distance of the affected node from the node corresponding to the target element in the DOM tree. Understandably, a higher second score component indicates a greater depth of impact on the target page and a higher risk of global style changes; conversely, a lower second score component indicates a lower depth of impact and a lower risk of global style changes.
[0187] S730: The third scoring component is obtained by multiplying the selector sharing degree quantification value with the third weight coefficient.
[0188] The local style editing system can use the product of the selector sharing degree quantification value and the third weighting coefficient as the third scoring component. The local style editing system can pre-store the third weighting coefficient; for example, the third weighting coefficient can be 0.25.
[0189] Specifically, the third score component characterizes the selector's reusability, that is, the degree of coupling between the candidate editing scheme and the target page. Understandably, a higher third score component indicates a higher degree of coupling between the candidate editing scheme and the target page, and a higher risk of changes in the target page's global style; conversely, a lower third score component indicates a lower degree of coupling between the candidate editing scheme and the target page, and a lower risk of changes in the target page's global style.
[0190] S740: The fourth scoring component is obtained by multiplying the pre-calculated value of the visual change amplitude with the fourth weighting coefficient.
[0191] The local style editing system can use the product of a pre-calculated value of the visual change magnitude and a fourth weighting coefficient as the fourth scoring component. The local style editing system can pre-store the fourth weighting coefficient; for example, the fourth weighting coefficient could be 0.25.
[0192] Specifically, the fourth score component represents the visual impact of the candidate editing scheme on the target page. It can be understood that the higher the fourth score component, the higher the visual impact of the candidate editing scheme on the target page, and the greater the visual perception change of the target page after the user edits it. Conversely, the lower the fourth score component, the lower the visual impact of the candidate editing scheme on the target page, and the smaller the visual perception change of the target page after the user edits it.
[0193] S750: The fifth scoring component is obtained by multiplying the semantic style lock conflict penalty value and the fifth weight coefficient.
[0194] The local style editing system can use the product of the semantic style lock conflict penalty value and the fifth weighting coefficient as the fifth scoring component. The local style editing system can pre-store the fifth weighting coefficient; for example, the fifth weighting coefficient could be 0.25.
[0195] Specifically, the fifth score component represents the degree of conflict risk that the candidate editing scheme poses to the protected styles on the target page. It can be understood that the higher the fifth score component, the higher the degree of conflict risk that the candidate editing scheme poses to the protected styles on the target page, and the greater the impact on the global style standardization of the target page. Conversely, the lower the fifth score component, the lower the degree of conflict risk that the candidate editing scheme poses to the protected styles on the target page, and the lower the impact on the global style standardization of the target page.
[0196] S760: Summing the first, second, third, fourth, and fifth rating components yields the influence range score.
[0197] The local style editing system can use the sum of the first, second, third, fourth, and fifth rating components as the range of influence score.
[0198] Specifically, the scope of influence score can be expressed by the following formula:
[0199] in, Indicates the first rating component. The score represents the scope of impact of the candidate editing scheme. This represents the first weighting coefficient. This represents the second rating component. This represents the DOM distance or the maximum value among multiple DOM distances. This represents the second weighting coefficient. This represents the third rating component. This represents the quantization value indicating the degree of selector sharing. This represents the third weighting coefficient. This represents the fourth rating component. This represents the pre-calculated value of the visual change amplitude. This represents the fourth weighting coefficient. This represents the fifth rating component. This represents the semantic style lock conflict penalty value. This represents the fifth weighting coefficient.
[0200] It should be noted that the first to fifth weight coefficients in the embodiments of this specification can be fixed values that are preset and stored, or they can be dynamically updated after each local style editing is performed.
[0201] In the embodiments of this specification, the local style editing system calculates a score component by summing the quantified scores of five aspects: the number of affected nodes, the DOM distance between the affected nodes and the target element, the quantified value of selector sharing, the pre-calculated value of visual change amplitude, and the semantic style lock conflict penalty, and the corresponding weight coefficients. The system then sums the five score components to obtain a comprehensive influence range score, which comprehensively evaluates each candidate editing scheme and improves the accuracy of obtaining the influence range score corresponding to each candidate editing scheme.
[0202] Figure 8 This is a flowchart illustrating yet another method for editing the partial style of an HTML page, as provided in the embodiments of this specification. Figure 8 Is Figure 3Based on the illustrated embodiment, further, before S340, multiple candidate editing schemes are verified separately, and the target editing scheme is determined based on the verification results. The local style editing method P300 of this HTML page can be executed by the local style editing system 200. For example... Figure 8 As shown, the local style editing method P300 of this HTML page may include: S810-S830, wherein: S810: Verify multiple candidate editing schemes separately to obtain the verification results corresponding to each candidate editing scheme.
[0203] The local style editing system can validate multiple candidate editing schemes based on preset strong rules. These rules are used to eliminate unexecutable candidate editing schemes. The validation result for each candidate editing scheme can be either "valid" or "failed".
[0204] For example, a default strong rule could be that the candidate editing scheme has a syntax error or an invalid style rule.
[0205] S820: Based on the verification results corresponding to multiple candidate editing schemes, obtain the candidate editing schemes whose verification results are passed.
[0206] In some embodiments, the local style editing system can obtain the confidence score of the verification result corresponding to the candidate editing scheme based on the degree of matching between the candidate editing scheme and the preset strong rules, and determine whether the verification result is passed based on the relationship between the confidence score and the preset threshold.
[0207] If the confidence score is greater than or equal to the preset threshold, the local style editing system can determine that the verification result is successful; if the confidence score is less than the preset threshold, the local style editing system can determine that the verification result is unsuccessful.
[0208] S830: From the candidate editing schemes that have passed the verification, determine the candidate editing scheme with the smallest impact range score as the target editing scheme.
[0209] In cases where multiple candidate editing schemes pass the verification, the local style editing system can obtain the influence range score corresponding to these multiple candidate editing schemes and determine the candidate editing scheme corresponding to the minimum value among the multiple influence range scores as the target editing scheme.
[0210] If the verification result shows that there is only one candidate editing scheme that passes the verification, the local style editing system can determine that candidate editing scheme as the target editing scheme.
[0211] In the embodiments of this specification, the local style editing system verifies multiple candidate editing schemes, and then determines the target editing scheme based on the scope of influence for the candidate editing schemes that pass the verification. This further improves the compliance and reliability of the target editing scheme, and reduces the computational overhead of the scope of influence scoring, thus avoiding the waste of computing resources.
[0212] Figure 9 This is a flowchart illustrating yet another method for editing the partial style of an HTML page, as provided in the embodiments of this specification. Figure 9 Is Figure 8 Based on the illustrated embodiment, a further description of a possible implementation of S810 is provided: the local style editing method P300 of the HTML page can be executed by the local style editing system 200. For example... Figure 9 As shown, the local style editing method P300 of this HTML page can include: S910-S930, where: S910: Perform verification on at least one verification dimension for each of the multiple candidate editing schemes.
[0213] The verification dimensions include at least one of the following: target range out-of-bounds verification, semantic style lock conflict verification, text contrast verification, target external rendering drift verification, and theme consistency verification.
[0214] Specifically, the target range out-of-bounds check can be used to determine whether the selector sharing degree quantization value of the candidate editing scheme is greater than a third preset value; for example, the third preset value can be 1.
[0215] Semantic style lock conflict checking can be used to determine whether the style change magnitude of a style variable is greater than a fourth preset value when a candidate editing scheme modifies a style variable to an unauthorized protected style; for example, the fourth preset value can be 2.
[0216] Text contrast verification can be used to determine whether the contrast between the text and the background is lower than a fifth preset value before and after the target page is modified based on the candidate editing scheme; for example, the fifth preset value can be 4.5:1.
[0217] The target-outside-rendering drift check can be used to determine whether there are obvious visual changes other than the target element in the rendered screenshots before and after the modification of the target page based on the candidate editing scheme. That is, whether the magnitude of the visual change is greater than the sixth preset value; for example, the sixth preset value can be 0.5%.
[0218] Theme consistency verification can be used to determine whether the page style of the rendered screenshot after modifying the target page based on the candidate editing scheme is consistent with the theme style of the target page. That is, whether the matching degree between the modified page style and the theme style is less than the seventh preset value; for example, the seventh preset value can be 90%. Theme style refers to the global constraints when the user designs the target page, including but not limited to: brand color scheme coordination, font system consistency, and spacing and rounded corner specifications.
[0219] In some embodiments, the local style editing system can perform verification on each candidate editing scheme in at least one verification dimension based on a preset large language system.
[0220] S920: If the verification fails in any verification dimension, determine that the verification result of the candidate editing scheme is "verification failed" and record the verification dimension that failed.
[0221] In some embodiments, if the quantization value of the selector sharing degree in a candidate editing scheme is greater than a third preset value, the local style editing system can determine that the verification result of the candidate editing scheme is that the verification fails.
[0222] In other embodiments, if a candidate editing scheme modifies a style variable to an unauthorized protected style, and the style change of the style variable is greater than a fourth preset value, the local style editing system can determine that the verification result of the candidate editing scheme is that the verification fails.
[0223] In some other embodiments, if the contrast between the text and the background is lower than a fifth preset value before and after the target page is modified based on the candidate editing scheme, the local style editing system can determine that the verification result of the candidate editing scheme is that the verification fails.
[0224] In some other embodiments, if the visual change of the rendered screenshots of the target page before and after modification based on the candidate editing scheme is greater than a sixth preset value, the local style editing system can determine that the verification result of the candidate editing scheme is that the verification fails.
[0225] In some other embodiments, if the matching degree between the page style modified based on the candidate editing scheme and the theme style is less than a seventh preset value, the local style editing system can determine that the verification result of the candidate editing scheme is that the verification fails.
[0226] Furthermore, the local style editing system records the verification dimensions that fail the verification, which can show the reasons for the failure of that dimension. This helps guide the AI editing model to understand and make subsequent adjustments to the editing plan.
[0227] S930: If all verification dimensions pass, the verification result of the candidate editing scheme is determined to be valid.
[0228] It is understood that if the selector sharing degree quantization value of the candidate editing scheme is less than or equal to the third preset value, the style variable is not modified to an unauthorized protected style (or the style variable is modified to an authorized protected style, or although the style variable is modified to an unauthorized protected style, the style change range of the style variable is less than or equal to the fourth preset value), the contrast between the text and the background before and after the modification of the target page based on the candidate editing scheme is higher than or equal to the fifth preset value, the visual change range of the rendered screenshot is less than or equal to the sixth preset value, and the matching degree between the page style and the theme style after the modification based on the candidate editing scheme is greater than or equal to the seventh preset value, the local style editing system can determine that the verification result of the candidate editing scheme is verified as passed.
[0229] In the embodiments of this specification, the local style editing system performs verification on each of the multiple candidate editing schemes in at least one verification dimension. If any verification dimension fails, the candidate editing scheme is determined to have failed verification, and the verification dimension that failed is recorded. If all verification dimensions pass verification, the candidate editing scheme is determined to have passed verification. This strictly limits the verification threshold, improves the security standard of candidate editing schemes, and provides high-quality candidate editing schemes for subsequent selection of target editing schemes. In turn, it helps to obtain the accuracy and reliability of target editing schemes. In addition, the verification dimensions are decoupled, which has scalability and controllability.
[0230] In the above embodiments, if the verification results of multiple candidate editing schemes all fail, the local style editing system can also drive the AI editing model to regenerate multiple candidate editing schemes based on the verification dimension that caused the candidate editing schemes to fail the verification.
[0231] In some embodiments, when the verification results of multiple candidate editing schemes all fail, the local style editing system can analyze the verification dimensions of the multiple candidate editing schemes that fail verification based on a preset large language model, summarize the reasons for the failure, and feed the reasons for the failure back to the AI editing model, driving the AI editing model to optimize the candidate editing schemes based on the reasons for the failure and regenerate multiple compliant candidate editing schemes.
[0232] The reasons for failing the validation may include excessive selector sharing, too many affected nodes, or modification of the style of an element whose style variable has been changed to a protected style.
[0233] For example, assuming a candidate editing scheme fails the semantic style lock conflict check, the AI editing model can strengthen the semantic style lock constraint rules.
[0234] Understandably, the local style editing system continues to determine the target editing scheme that passes the verification and has the smallest impact range score from the multiple newly generated candidate editing schemes, based on the impact range scores corresponding to the multiple newly generated candidate editing schemes, as well as verification of at least one dimension.
[0235] Therefore, when all candidate editing schemes fail verification, the local style editing system does not directly terminate and return an error. Instead, it uses the failure information as input conditions and constraint signals for the AI editing model to generate a new round of editing schemes. This further prevents the AI editing model from generating invalid schemes on the same type of error and helps it generate optimized and effective schemes. This forms a closed-loop learning architecture of "generation-verification-feedback", which can automatically correct errors without human intervention and improve the compliance of the generated local style editing schemes.
[0236] This specification, in another aspect, provides a computer-readable non-transitory storage medium storing at least one set of instructions for performing data processing executable instructions. When the at least one set of instructions is executed by a processor, it instructs the processor to implement the steps of the HTML page local style editing method P300 described herein. In some possible embodiments, various aspects of this specification can also be implemented as a program product comprising program code. When the program product is run on a local style editing system 200, the program code causes the local style editing system 200 to perform the steps of the HTML page local style editing method P300 described herein. The program product for implementing the above method may employ a portable compact disk read-only memory (CD-ROM) containing program code and may run on the local style editing system 200. However, the program product of this specification is not limited thereto. In this specification, the readable storage medium may be any tangible medium containing or storing a program that may be used by or in conjunction with an instruction execution system. The program product may employ any combination of one or more readable media. The readable medium may be a readable signal medium or a readable storage medium. A readable storage medium can be, for example, but not limited to, an electrical, magnetic, optical, electromagnetic, infrared, or semiconductor system, apparatus, or device, or any combination thereof. More specific examples of a readable storage medium include: an electrical connection having one or more wires, a portable disk, a hard disk, random access memory (RAM), read-only memory (ROM), erasable programmable read-only memory (EPROM or flash memory), optical fiber, portable compact disk read-only memory (CD-ROM), optical storage device, magnetic storage device, or any suitable combination thereof. A computer-readable storage medium can include a data signal propagated in baseband or as part of a carrier wave, carrying readable program code. Such propagated data signals can take many forms, including but not limited to electromagnetic signals, optical signals, or any suitable combination thereof. A readable storage medium can also be any readable medium other than a readable storage medium that can send, propagate, or transmit a program for use by or in connection with an instruction execution system, apparatus, or device. The program code contained on the readable storage medium can be transmitted using any suitable medium, including but not limited to wireless, wired, optical fiber, RF, etc., or any suitable combination thereof. Program code for performing the operations described herein may be written in any combination of one or more programming languages, including object-oriented programming languages such as Java and C++, as well as conventional procedural programming languages such as C or similar programming languages.
[0237] The foregoing has described specific embodiments of this specification. Other embodiments are within the scope of the appended claims. In some cases, the actions or steps recited in the claims may be performed in a different order than that shown in the embodiments and may still achieve the desired result. Furthermore, the processes depicted in the drawings do not necessarily require a specific or sequential order to achieve the desired result. In some embodiments, multitasking and parallel processing are possible or may be advantageous.
[0238] In summary, after reading this detailed disclosure, those skilled in the art will understand that the foregoing detailed disclosure may be presented by way of example only and may not be restrictive. Although not explicitly stated herein, those skilled in the art will understand that this specification requires various reasonable changes, improvements, and modifications to the embodiments. These changes, improvements, and modifications are intended to be made by this specification and are within the spirit and scope of the exemplary embodiments described herein.
[0239] Furthermore, certain terms in this specification have been used to describe embodiments of this specification. For example, "an embodiment," "an embodiment," and / or "some embodiments" mean that a particular feature, structure, or characteristic described in connection with that embodiment may be included in at least one embodiment of this specification. Therefore, it is to be emphasized and understood that two or more references to "an embodiment" or "an embodiment" or "alternative embodiment" in various parts of this specification do not necessarily refer to the same embodiment. Moreover, specific features, structures, or characteristics may be suitably combined in one or more embodiments of this specification.
[0240] It should be understood that in the foregoing description of the embodiments in this specification, various features are combined in a single embodiment, drawing, or description for the purpose of simplifying the description and to aid in understanding a feature. However, this does not mean that the combination of these features is necessary, and those skilled in the art, upon reading this specification, may readily identify some of the devices as separate embodiments. That is, the embodiments in this specification can also be understood as an integration of multiple secondary embodiments. And the content of each secondary embodiment is valid even if it contains fewer than all the features of a single foregoing disclosed embodiment.
[0241] Every patent, patent application, publication of a patent application, and other material, such as articles, books, specifications, publications, documents, and literature (excluding any related historical examination documents), cited in this disclosure is incorporated herein for all purposes, including, for example, in the specification and claims of this disclosure. However, in the event of any inconsistency or conflict between the descriptions, definitions, and / or terms used in the foregoing and those used in this disclosure, the descriptions, definitions, and / or terms used in this disclosure shall prevail.
[0242] Finally, it should be understood that the embodiments disclosed herein are illustrative of the principles of the embodiments described in this specification. Other modified embodiments are also within the scope of this specification. Therefore, the embodiments disclosed in this specification are merely examples and not limitations. Those skilled in the art can implement the applications described in this specification using alternative configurations based on the embodiments in this specification. Therefore, the embodiments in this specification are not limited to the embodiments precisely described in the applications.
Claims
1. A method for editing local styles in an HTML page, comprising: An editing context is constructed based on the markup code, style rule code, calculated styles corresponding to the editable style attributes of the target elements, and theme design tokens of the target page's structured document. The parsing results of the editing context and the natural language style editing instructions input by the user are packaged to obtain enhanced editing instructions; Based on the enhanced editing instructions, the AI editing model generates multiple candidate editing schemes; Based on the influence range scores corresponding to the multiple candidate editing schemes, a target editing scheme is determined from the multiple candidate editing schemes, wherein the influence range score is used to quantitatively evaluate the degree of impact of the candidate editing scheme on non-target elements in the target page; Based on the target editing scheme, perform partial style editing on the target page.
2. The method according to claim 1, wherein, The parsing results of the editing context and the user-input natural language style editing instructions are packaged to obtain enhanced editing instructions, including: The parsing results of the editing context, semantic style lock, and natural language style editing instructions are packaged to obtain enhanced editing instructions, wherein the semantic style lock is used to identify the prohibited modification attributes of protected styles in the target page.
3. The method according to claim 2, wherein, Also includes: The natural language style editing instructions are parsed to obtain a structured intent vector, which includes at least one of the following dimensions: hue, saturation, brightness, contrast, robustness, brand offset, and visual change amplitude. The parsing results of the editing context, semantic style lock, and natural language style editing instructions are packaged to obtain enhanced editing instructions, including: The editing context, semantic style lock, and structured intent vector are packaged to obtain enhanced editing instructions.
4. The method according to claim 1, wherein, The editing context is constructed based on the markup code, style rule code, calculated styles corresponding to the editable style attributes of the target elements, and theme design tokens of the target structured document of the target page, including: Based on the target element, the calculated style corresponding to the style attribute to be edited of the target element, and the markup code and style rule code of the target page, the source chain of the target style is obtained by tracing back layer by layer. Based on the markup code and style rule code of the target page, as well as the semantic style rule library, the affected elements of the same style rule constraint are traced and counted upwards along the source chain of the target style to construct a style influence graph; The editing context is constructed based on the style influence diagram.
5. The method according to claim 1, wherein, Before determining the target editing scheme from the multiple candidate editing schemes based on their respective influence range scores, the process also includes: Based on the number of affected nodes, the DOM distance between the affected nodes and the target element, the degree of selector sharing, the magnitude of visual changes, and the semantic style lock conflict penalty corresponding to the multiple candidate editing schemes, the influence range score corresponding to the multiple candidate editing schemes is obtained.
6. The method according to claim 5, wherein, The influence range score for each of the multiple candidate editing schemes is obtained based on the number of affected nodes, the DOM distance between the affected nodes and the target element, the quantified value of selector sharing, the pre-calculated value of visual change magnitude, and the semantic style lock conflict penalty. This includes: The first scoring component is obtained by multiplying the number of affected nodes by the first weight coefficient. The second scoring component is obtained by multiplying the DOM distance between the affected node and the target element by the second weight coefficient. The third scoring component is obtained by multiplying the selectedor sharing degree quantification value with the third weight coefficient; The fourth scoring component is obtained by multiplying the pre-calculated value of the visual change amplitude with the fourth weighting coefficient. The fifth scoring component is obtained by multiplying the semantic style lock conflict penalty value by the fifth weight coefficient. The influence range score is obtained by summing the first rating component, the second rating component, the third rating component, the fourth rating component, and the fifth rating component.
7. The method according to claim 5, wherein, The step of determining the target editing scheme from the multiple candidate editing schemes based on their respective impact range scores includes: Based on the influence range scores corresponding to the multiple candidate editing schemes, the candidate editing scheme with the smallest influence range score is determined as the target editing scheme.
8. The method according to claim 5, wherein, Before determining the target editing scheme from the multiple candidate editing schemes based on their respective influence range scores, the process also includes: Each of the multiple candidate editing schemes is verified to obtain the verification results corresponding to each of the multiple candidate editing schemes; The step of determining the target editing scheme from the multiple candidate editing schemes based on their respective impact range scores includes: Based on the verification results corresponding to the multiple candidate editing schemes, the candidate editing schemes whose verification results are passed are obtained. From the candidate editing schemes that passed the verification, the candidate editing scheme with the smallest impact range score is determined as the target editing scheme.
9. The method according to claim 8, wherein, The step of verifying the multiple candidate editing schemes respectively to obtain the verification results corresponding to the multiple candidate editing schemes includes: For each of the multiple candidate editing schemes, at least one verification dimension is performed. If the verification of any verification dimension fails, the verification result of the candidate editing scheme is determined to be a verification failure, and the verification dimension that failed the verification is recorded. If all verification dimensions pass the verification, the verification result of the candidate editing scheme is determined to be successful. The verification dimensions include at least one of the following: target range out-of-bounds verification, semantic style lock conflict verification, text contrast verification, target external rendering drift verification, and theme consistency verification.
10. The method according to claim 9, wherein, The method further includes: If the verification results of the multiple candidate editing schemes all fail, the AI editing model is driven to regenerate multiple candidate editing schemes based on the verification dimensions that caused the candidate editing schemes to fail the verification.
11. A partial style editing system for Hypertext Markup Language (HTML) pages, comprising: At least one storage medium storing at least one instruction set; as well as At least one processor is communicatively connected to the at least one storage medium, wherein the at least one processor reads the at least one instruction set during operation and performs the method as described in any one of claims 1-10 according to the instructions of the at least one instruction set.