PSD layer intelligent adaptation method, system, device and medium
By using computer vision models and dynamic mapping rule bases, PSD files can be intelligently adapted to low-code platforms, solving the problems of low version control and detection efficiency, and improving development efficiency and user experience.
Patent Information
- Authority / Receiving Office
- CN · China
- Patent Type
- Applications(China)
- Current Assignee / Owner
- Filing Date
- 2025-11-11
- Publication Date
- 2026-03-10
AI Technical Summary
In existing technologies, version control and iteration synchronization issues between PSD files and low-code platforms lead to low development efficiency, poor detection efficiency and accuracy, require a large amount of manual adjustment, and affect user experience and project progress.
A pre-trained computer vision model is used to identify the layer features of PSD files. Combined with a dynamic mapping rule base and an automatic layer tree reorganization algorithm, platform code snippets are automatically generated to perform conflict detection and test case generation, thereby achieving intelligent layer adaptation.
It improves the compatibility of PSD files with low-code platforms, reduces manual intervention, ensures accuracy and consistency, enhances development efficiency and team collaboration efficiency, and ensures the stability of adaptation results.
Smart Images

Figure CN121636339A_ABST
Abstract
Description
Technical Field
[0001] This invention relates to the field of PSD file processing technology, and in particular to a PSD layer intelligent adaptation method, system, device and medium. Background Technology
[0002] In the current design field, PSD files (Photoshop Documents) are a widely used design file format, carrying a wealth of design information. Designers parse the layer information in PSD files, converting it into materials needed by image slicing tools, and then apply it to front-end development, thereby transforming design concepts into actual interactive interfaces.
[0003] However, with the rapid development of low-code platforms, a significant contradiction has arisen between their rapid iteration and update capabilities and the relatively slow update speed of PSD files. To meet ever-changing market demands and business scenarios, low-code platforms frequently expand functionality, optimize interfaces, and update components, leading to rapid iterations of platform template image configurations. However, due to design processes, version management, and other factors, PSD files struggle to keep pace with the changes made by low-code platforms. This mismatch has caused numerous problems, severely impacting development efficiency and user experience, specifically in the following aspects: 1. Version Control and Iteration Synchronization Issues: The rapid iteration of low-code platforms leads to frequent changes in template image configurations, while PSD files cannot be updated in real time. This results in a significantly reduced pass rate when converting design drafts into platform-usable components or code due to version inconsistencies. For example, a new platform version may have adjusted the style, layout, or interaction methods of certain components, but the PSD file may still retain the old version's design. Incompatibility issues will arise during the adaptation process, requiring a significant amount of time and effort to troubleshoot and fix, thus delaying project development.
[0004] 2. Issues with Detection Efficiency and Accuracy: Existing detection methods lack flexibility when dealing with changes in PSD file layer names. During low-code platform iterations, component naming rules may be adjusted to better adapt to new features and business logic. However, existing detection methods often rely on fixed layer name matching rules. Once a layer name changes, they cannot accurately identify the layer type and attributes, leading to detection failures. This not only increases the complexity and time cost of detection but may also miss truly problematic layers due to misjudgments, affecting the overall adaptation quality.
[0005] 3. Manual Adjustment Requirements: Due to the frequent occurrence of the above-mentioned failures in the checks, artists have to manually adjust the PSD files to match the low-code platform's template image configuration. This process not only increases the workload of artists, but manual adjustments are also prone to human error, further affecting the accuracy and efficiency of the adaptation. For example, when adjusting layer names, styles, or hierarchical relationships, oversights may lead to new mismatches, requiring repeated modifications and verifications, creating a vicious cycle. Summary of the Invention
[0006] The purpose of this invention is to provide a PSD layer intelligent adaptation method, system, device and medium, which realizes efficient and intelligent adaptation of PSD layers to low-code platforms, improves development efficiency and the matching degree between design drawings and platform templates, and reduces manual intervention, thereby solving at least one of the above-mentioned problems in the prior art.
[0007] In a first aspect, the present invention provides a method for intelligent adaptation of PSD layers, the method specifically comprising: Input a PSD file, use a pre-trained computer vision model to identify each layer, analyze the layer type, visual features and interaction state to obtain multimodal features of the layer; The multimodal features of the layers are matched with a dynamically updated mapping rule library to generate corresponding platform code snippets or component identifiers for each layer or layer group. The mapping rule library is used to set the conversion relationship between design attributes and low-code platform target component code. Based on the platform code snippets or component identifiers and the component nesting rules of the target platform template, the layer tree automatic reorganization algorithm is used to analyze the layer hierarchy of the current PSD and execute the automatic reorganization of the layer tree. When the layer tree is automatically reorganized, a layer-level lock is applied to the layer being edited, and a conflict detection algorithm is run to detect whether there are any overlapping conflicts in the collaborative editing content; Based on the adaptation results and mapping rule base after automatic reorganization of the layer tree, test cases covering multiple adaptation scenarios are automatically generated through the rule engine.
[0008] Secondly, the present invention provides a PSD layer intelligent adaptation system, the system specifically comprising: The first adaptation module is used to input PSD files, and uses a pre-trained computer vision model to identify each layer, analyze the layer type, visual features and interaction state, and obtain multimodal features of the layer. The second adaptation module is used to match the multimodal features of the layers with the dynamically updated mapping rule library, and generate corresponding platform code snippets or component identifiers for each layer or layer group. The mapping rule library is used to set the conversion relationship between design attributes and low-code platform target component code. The third adaptation module is used to analyze the layer hierarchy of the current PSD based on the platform code snippet or component identifier and the component nesting rules of the target platform template, and then perform automatic layer tree reorganization. The fourth adaptation module is used to apply layer-level locks to the layer being edited when the layer tree is automatically reorganized, and at the same time run a conflict detection algorithm to detect whether there are any overlapping conflicts in the collaborative editing content; The fifth adaptation module is used to automatically generate test cases covering multiple adaptation scenarios based on the adaptation results and mapping rule base after automatic reorganization of the layer tree and the rule engine.
[0009] Thirdly, the present invention provides a computer device, including: a memory and a processor, and a computer program stored in the memory, wherein when the computer program is executed on the processor, it implements the PSD layer intelligent adaptation method as described in any of the above methods.
[0010] Fourthly, the present invention provides a computer-readable storage medium having a computer program stored thereon, wherein the computer program, when executed by a processor, implements the PSD layer intelligent adaptation method as described in any of the above methods.
[0011] Compared with the prior art, the present invention has at least one of the following technical effects: 1. This invention achieves efficient and intelligent adaptation of PSD layers to low-code platforms, improving development efficiency and the matching degree between design drawings and platform templates, and reducing manual intervention.
[0012] 2. This invention ensures that corresponding platform code snippets or component identifiers can be generated quickly and accurately based on layer characteristics, realizing the effective conversion between design attributes and platform code.
[0013] 3. This invention scientifically and rationally selects the optimal rule from multiple matching rules, ensuring that the generated code snippets or component identifiers best match the requirements of the current layer and platform.
[0014] 4. This invention accurately analyzes and reorganizes the layer hierarchy based on platform rules, so that the reorganized layer tree structure conforms to the target platform template requirements.
[0015] 5. This invention effectively prevents layer editing conflicts, ensures the accuracy and consistency of collaborative editing, and improves team collaboration efficiency.
[0016] 6. This invention automatically generates comprehensive test cases covering multiple adaptation scenarios, discovers potential problems in advance, and ensures the stability and reliability of the adaptation results. Attached Figure Description
[0017] To more clearly illustrate the technical solutions in the embodiments of this application, the drawings used in the embodiments will be briefly introduced below. Obviously, the drawings described below are only some embodiments of this application. For those skilled in the art, other drawings can be obtained based on these drawings without creative effort.
[0018] Figure 1 This is a flowchart illustrating a PSD layer intelligent adaptation method according to an embodiment of the present invention; Figure 2 This is a schematic diagram of the structure of a PSD layer intelligent adaptation system provided in an embodiment of the present invention; Figure 3 This is a schematic diagram of the structure of a computer device provided in an embodiment of the present invention. Detailed Implementation
[0019] In the following description, specific details such as particular system architectures and techniques are set forth for illustrative purposes and not for limitation, in order to provide a thorough understanding of the embodiments of this application. However, those skilled in the art will understand that this application may also be implemented in other embodiments without these specific details. In other instances, detailed descriptions of well-known systems, apparatuses, circuits, and methods have been omitted so as not to obscure the description of this application with unnecessary detail.
[0020] It should be understood that, when used in this application specification and the appended claims, the term "comprising" indicates the presence of the described features, integrals, steps, operations, elements and / or components, but does not exclude the presence or addition of one or more other features, integrals, steps, operations, elements, components and / or a collection thereof.
[0021] It should also be understood that the term “and / or” as used in this application specification and the appended claims means any combination of one or more of the associated listed items and all possible combinations, and includes such combinations.
[0022] As used in this application specification and the appended claims, the term "if" may be interpreted, depending on the context, as "when," "once," "in response to determination," or "in response to detection." Similarly, the phrase "if determined" or "if detected [the described condition or event]" may be interpreted, depending on the context, as meaning "once determined," "in response to determination," "once detected [the described condition or event]," or "in response to detection [the described condition or event]."
[0023] Furthermore, in the description of this application and the appended claims, the terms "first," "second," "third," etc., are used only to distinguish descriptions and should not be construed as indicating or implying relative importance.
[0024] References to "one embodiment" or "some embodiments" as described in this specification mean that one or more embodiments of this application include a specific feature, structure, or characteristic described in connection with that embodiment. Therefore, the phrases "in one embodiment," "in some embodiments," "in other embodiments," "in still other embodiments," etc., appearing in different parts of this specification do not necessarily refer to the same embodiment, but rather mean "one or more, but not all, embodiments," unless otherwise specifically emphasized. The terms "comprising," "including," "having," and variations thereof mean "including but not limited to," unless otherwise specifically emphasized.
[0025] In this application embodiment, the entity executing the process includes a terminal device. This terminal device includes, but is not limited to, devices capable of executing the methods disclosed in this application, such as servers, computers, smartphones, and tablets. Figure 1 A flowchart illustrating a PSD layer intelligent adaptation method according to an embodiment of the present invention is shown below, in detail: S101, Input PSD file, use pre-trained computer vision model to identify each layer, analyze the layer type, visual features and interaction state, and obtain multimodal features of the layer.
[0026] In this embodiment, since PSD files may contain complex layer structures and diverse image data, preprocessing is required to ensure that the computer vision model can accurately recognize and process them. The preprocessing process includes parsing the file format, separating the layers in the PSD file into independent image data units. Simultaneously, the image data of each layer is standardized, for example, by adjusting the image size to meet the input requirements of the computer vision model. Typically, the image size is uniformly adjusted to the fixed size used during model training to ensure stable model operation. Furthermore, the color space of the image is converted, unifying the different color modes (such as RGB, CMYK, etc.) that the PSD file may use into a color mode that the model can process. For example, converting a CMYK color mode image to an RGB color mode eliminates the impact of color differences on model recognition.
[0027] Load the pre-trained computer vision model. This model is trained on a large amount of labeled design layer data and is capable of recognizing different types of layers and extracting various features from them. When loading the model, initialization configuration is required, including setting model operating parameters such as batch size. This parameter determines the number of layer images the model can process at a time and should be set appropriately based on the system's hardware resources and processing efficiency. Simultaneously, the model's internal state is initialized to ensure it is in a runnable state, preparing it for subsequent layer recognition and feature extraction.
[0028] Each layer in the preprocessed PSD file is sequentially input into the initialized computer vision model. The model analyzes and processes each layer image, extracting layer feature information using deep learning structures such as Convolutional Neural Networks (CNNs). During feature extraction, the model determines the layer type based on pre-learned knowledge. For example, for layers containing text content, the model identifies text features such as font, size, and color, and combines this with the text arrangement and layout to determine that the layer is a text layer. For layers containing image elements, the model analyzes the image's texture, shape, and color distribution to determine that the layer is an image layer, and further distinguishes between different types such as background images, decorative images, and icon images. For layers with interactive functions, such as button layers, the model recognizes the layer's shape, color changes, and potential interactive tooltips (such as style changes when the mouse hovers over the image) to accurately determine that the layer is a button layer. In this way, the model can accurately identify the type of each layer.
[0029] After determining the layer type, the computer vision model further extracts the layer's visual features. For text layers, in addition to the basic features mentioned earlier such as font, size, and color, it also extracts text layout features, such as text alignment (left, right, center, etc.), line spacing, and character spacing. For image layers, the model extracts texture features by analyzing the distribution and variation patterns of pixels to obtain texture details; it also extracts shape features to identify the outlines and shapes of major objects in the image; and it extracts color features, including the dominant hue and color distribution ratio. For button layers, in addition to shape and color features, it extracts visual features such as border style and shadow effects, which accurately describe the button's appearance and visual effects.
[0030] For layers with interactive functionality, such as button layers and link layers, computer vision models also need to identify their interaction states. Taking a button layer as an example, the model analyzes the style changes of the button under different interaction states, such as the normal state, the mouse hover state, and the clicked state. In the normal state, the button may have a default color, border, and shadow effect; when the mouse hovers over the button, the button's color may brighten, the border may thicken, or the color may change; when the button is clicked, the button may produce a dent effect or further color changes. By identifying these style changes under interaction states, the model can accurately obtain the layer's interaction state information, providing a comprehensive description of the interaction features for subsequent generation of code or components adapted to low-code platforms.
[0031] After determining the layer type, extracting visual features, and recognizing interactive states, this information is integrated to form the layer's multimodal features. These multimodal features include layer type information, clarifying the layer's role and function in the design; visual features detail the layer's appearance and style, providing a basis for accurately reproducing the design in the low-code platform; and interactive state information ensures the layer's correct behavior in interactive scenarios. By integrating these multimodal features, the attributes and characteristics of each layer can be comprehensively and accurately described, providing rich data support for subsequent mapping and adaptation of layers to low-code platform components.
[0032] In this embodiment, each layer in the input PSD file can be identified and processed by the computer vision model to obtain accurate multimodal features of the layer, providing basic data for the entire PSD layer intelligent adaptation method and ensuring that the subsequent adaptation process can be carried out accurately and efficiently.
[0033] S102, Match the multimodal features of the layer with the dynamically updated mapping rule library to generate a corresponding platform code snippet or component identifier for each layer or layer group. The mapping rule library is used to set the conversion relationship between design attributes and low-code platform target component code.
[0034] In this embodiment, a mapping rule base is constructed. This rule base is created by developers based on the component types, attributes, and common design specifications supported by the low-code platform. Developers conduct a detailed analysis of various components in the low-code platform to clarify the design attribute range corresponding to each component. For example, for a button component, its design attributes may include the button's shape (rectangle, circle, rounded rectangle, etc.), color (background color, text color), size (width, height), border style (solid line, dashed line, no border), and style changes under interactive states (normal, hover, click), etc. Then, for each design attribute, its code representation or component identifier in the low-code platform is defined.
[0035] To ensure the mapping rule base can adapt to the rapid iteration and design specification changes of the low-code platform, a dynamic update mechanism is needed. This mechanism is implemented through integration with the low-code platform's version management system. When the low-code platform undergoes feature updates, component adjustments, or design specification changes, the version management system records the relevant change information. The system periodically monitors the version management system's change logs, and once a change related to mapping rules is detected, such as adding a new component type, modifying a component's attribute definition, or adjusting design specifications, the mapping rule base update process is triggered. During the update process, developers modify and improve the mapping rule base accordingly based on the change information. For example, if the low-code platform adds a button component with an icon and text combination, developers will add the corresponding design attribute mapping relationship for that component to the mapping rule base, including how design attributes such as the icon's position, size, and spacing with the text are converted into code representations in the low-code platform. After the update is complete, the version number of the mapping rule base is incremented, and the update time and content are recorded for subsequent traceability and management.
[0036] After completing the construction and dynamic update settings of the mapping rule base, the system reads the multimodal features of the layers obtained through computer vision model recognition. These features include information such as layer type (e.g., text layer, image layer, button layer), visual features (e.g., color, shape, size, texture), and interaction state (e.g., normal, hover, click). To improve the accuracy and efficiency of matching, the read multimodal features of the layers need to be preprocessed. The preprocessing process includes standardizing the feature data, such as converting the color representation to RGB values or hexadecimal color codes, and standardizing the shape description to standard geometric shape names (e.g., circle, square, rectangle). Simultaneously, the feature data is normalized to map feature values from different ranges to the same numerical interval, avoiding inaccurate matching results due to differences in the units of feature values.
[0037] Based on the layer type, a subset of relevant mapping rules is selected from the mapping rule library. For example, if a layer is identified as a button layer, the system will extract all mapping rules related to the button component from the library. Then, the layer's visual features and interaction states are initially matched against the selected mapping rules. The matching process uses an item-by-item comparison, comparing each feature of the layer with the corresponding design attribute in the mapping rule. For example, for the background color feature of a button layer, the system will find the design attribute definition related to the button's background color in the mapping rules and compare whether the two are consistent or meet a preset similarity threshold. If all features of a layer completely match or meet the similarity requirement of a mapping rule, the layer is considered to have initially matched this mapping rule successfully.
[0038] In actual PSD files, multiple layers may be combined to form a component with a specific function; for example, a layer group containing icons and text might constitute a navigation button. Therefore, the system needs to identify layers as groups. By analyzing factors such as the positional relationships, hierarchical relationships, and visual relevance between layers, closely related layers are grouped into a layer group. For the identified layer group, the system comprehensively considers the characteristics of all layers within the group and performs a comprehensive match with the component mapping rules in the mapping rule library. For example, for a navigation button layer group containing icon and text layers, the system matches its overall shape, size, color, and the layout of the icons and text with the design attributes of navigation button components in the mapping rule library. During the comprehensive matching process, the system assigns corresponding weights based on the importance of different features and calculates a matching score through weighted summation. If the matching score exceeds a preset threshold, the layer group is considered to have successfully matched a certain component mapping rule.
[0039] When a layer or layer group successfully matches a rule in the mapping rule library, the system generates a corresponding platform code snippet or component identifier based on that rule. For layers or layer groups that can be directly mapped to existing components in the low-code platform, the system generates a corresponding component identifier, such as a unique identifier for a button component. This identifier is associated with the button component class name in the low-code platform, ensuring accurate reference to the component during subsequent layer tree reorganization and code generation. For layers or layer groups requiring some code generation, the system generates specific platform code snippets based on the code template and layer feature parameters defined in the mapping rules. For example, for a button layer with specific styles and interactive effects, the system fills the button's shape, color, size, and interactive state into the code template based on the button code template in the mapping rules, generating complete HTML, CSS, and JavaScript code snippets to implement the button's functionality and style in the low-code platform.
[0040] To ensure that the generated platform code snippets or component identifiers can be used accurately on the low-code platform, the system verifies the matching results. The verification process includes rendering and testing the generated code snippets or component identifiers in a simulated environment of the low-code platform to check whether the generated components can be displayed and interacted with correctly, and whether their style and functionality are consistent with the design requirements. If problems are found during verification, such as abnormal component display or unexpected interactive effects, the system analyzes the cause of the problem, which may be due to inaccurate mapping rules, imprecise feature matching, or code generation errors. Based on the analysis results, the mapping rule base is adjusted and optimized accordingly, or the feature matching algorithm is improved. Then, the matching and code generation process is repeated until verification is successful.
[0041] In this embodiment, the multimodal features of layers in the PSD file can be accurately matched with a dynamically updated mapping rule base to generate corresponding platform code snippets or component identifiers for each layer or layer group, thereby achieving efficient adaptation of PSD layers to low-code platform components.
[0042] S103: Based on the platform code snippet or component identifier and the component nesting rules of the target platform template, the layer tree automatic reorganization algorithm is used to analyze the layer hierarchy relationship of the current PSD and execute the automatic reorganization of the layer tree.
[0043] In this embodiment, data interaction is performed with a low-code platform to obtain the component nesting rules of the target platform template. These rules define in detail how different types of components are nested hierarchically and their positional relationships within the low-code platform. For example, in a webpage layout, a navigation bar component is typically nested at the top of the page, and it may contain multiple button and text components, which are arranged according to a specific layout. The system parses the obtained component nesting rules, transforming them into a data structure that the system can understand and process. During the parsing process, the hierarchical attributes of each component are clarified, such as the identification information of parent and child components, as well as their horizontal and vertical arrangement order, spacing, and other layout parameters. Simultaneously, special conditions in the rules are identified and processed, such as changes in the nesting relationship of certain components under specific interactive states (e.g., mouse hover).
[0044] Using a PSD file parsing tool, the system reads the layer information from the current PSD file, extracting the original layer hierarchy of each layer, including the layer order, layer group structure, and layer coordinates on the canvas. By analyzing this information, the system constructs a layer tree structure for the current PSD file, where each node represents a layer or layer group, and the parent-child relationship between nodes indicates the layer hierarchy. During the layer tree construction process, the system categorizes and labels layers, grouping layers with the same or related functions into the same type of component node based on previously generated component identifiers. For example, all layers with button component identifiers are grouped into button component nodes, facilitating subsequent matching with the component nesting rules of the target platform.
[0045] Based on previously generated platform code snippets or component identifiers, the system maps and associates layers in the current PSD file with components in the target platform template. For each layer or layer group, the system searches for a match for its corresponding component identifier in the target platform's component library. For example, if a layer group is identified as a navigation bar component, the system will find the navigation bar-related component definition in the target platform's component library and establish a mapping relationship between the two. During the mapping process, the system considers the matching of component attributes and parameters. For example, the color, font size, and other attributes of the navigation bar component need to match the visual characteristics of the layers in the PSD file to ensure that the reconstructed component is consistent with the original design in appearance and function. If there are attribute mismatches, the system will make appropriate adjustments and conversions according to the conversion relationships in the mapping rule library to ensure the accuracy of the mapping.
[0046] Based on the target platform's component nesting rules and the mapping between layers and platform components, the system adjusts the layer hierarchy of the current PSD file. Starting from the root node of the layer tree, the system checks each node's child nodes to ensure they conform to the target platform's component nesting rules. For child nodes that do not conform, the system redetermines their correct parent node and their order within the parent node according to the rules. For example, if the target platform's rules stipulate that a button component must be nested within a specific container component, and the current PSD file's button component's parent node does not meet the requirement, the system moves the button component to a container component that conforms to the rules and adjusts its position within the container. During this adjustment process, the system considers the relative positions and layout parameters between layers to ensure the adjusted layers maintain a visually reasonable layout. Simultaneously, for layer group structures, the system performs appropriate splitting or merging operations according to the component nesting rules to adapt to the target platform's component organization.
[0047] After adjusting the layer hierarchy, the system optimizes the layer positions and sizes to ensure the reorganized layers display and interact correctly on the target platform. The system calculates and corrects the position coordinates and size of each layer based on the target platform's layout specifications and component default sizes. For example, for text layers, the system automatically adjusts the width and height based on the target platform's font rendering rules and the length of the text content to ensure complete text display and aesthetically pleasing layout. For image layers, the system appropriately adjusts the image size based on the target platform's display resolution and image scaling rules to avoid distortion or blurring. During the adjustment process, the system considers the spacing and alignment between layers to ensure a neat and harmonious layout for the entire page.
[0048] The system validates the results of the automatic layer tree reorganization, checking whether the reorganized layers conform to the component nesting rules and layout requirements of the target platform template. The validation process includes a comprehensive check of layer hierarchy, position coordinates, size, and component attributes. The system compares the reorganized layer tree structure with the expected structure of the target platform to check for discrepancies. If any non-compliance is found, the system records error information and makes corresponding adjustments and corrections based on the error type. For example, if the hierarchy of a layer is still incorrect, the system reanalyzes its relationship with surrounding layers and adjusts it again. Simultaneously, the system provides feedback on the validation results to the designers, allowing them to understand the reorganization status promptly and intervene manually as needed.
[0049] In this embodiment, based on the platform code snippets or component identifiers and the component nesting rules of the target platform template, the layer tree automatic reorganization algorithm can accurately analyze the layer hierarchy relationship of the current PSD and perform automatic layer tree reorganization to achieve efficient adaptation of PSD files to low-code platforms.
[0050] S104: When the layer tree is automatically reorganized, apply a layer-level lock to the layer being edited, and run a conflict detection algorithm to detect whether there are any overlapping modification conflicts in the collaborative editing content.
[0051] In this embodiment, when the automatic layer tree reorganization starts, all layers in the current PSD file are monitored in real time. Through interaction with the user interface, the system can obtain information about the layers the user is currently editing. For example, when the user selects a layer in the design software interface and performs operations such as modifying attributes or moving its position, the system immediately captures the unique identifier of that layer, such as the layer name or ID, to clearly identify the layer object currently being edited. Simultaneously, the system records the time when the user begins editing, serving as a time reference for subsequent judgment of the editing status and conflict detection.
[0052] Once a layer being edited is identified, the system immediately applies a layer-level lock. This layer-level locking is based on a layer status flag mechanism. Internally, the system sets a specific status flag, such as "locked," for locked layers. This flag prevents other editing operations or automatic reorganization algorithms from modifying the layer. Specifically, when another user or system process attempts to operate on a locked layer, the system first checks the layer's status flag. If the layer is found to be "locked," the system rejects the operation request and returns a corresponding message to the requester, informing them that the layer is being edited and cannot be modified. For the automatic layer tree reorganization algorithm, when traversing the layer tree for analysis and reorganization, locked layers are skipped, ensuring that the layer being edited retains its original state during the reorganization process.
[0053] While applying layer-level locking, the system initializes a conflict detection algorithm. This algorithm is primarily based on the analysis of layer operation records and status information. The system creates a conflict detection data structure to store the operation history and current status of each layer. This data structure records the modification time, modified content (such as attribute changes, position movements, etc.), and modifier information for each layer. Simultaneously, the system sets a conflict detection time window, which is configured appropriately based on actual business needs and the frequency of editing operations, for example, ranging from a few minutes to over ten minutes. Within this time window, the system monitors and analyzes the layer's operation records in real time to determine if any overlapping modification conflicts exist.
[0054] During the automatic layer tree reorganization process, the system continuously collects collaborative editing content from different users or editing processes. Through integration and communication interfaces with design software, the system can obtain operation information of each user on the PSD file, including operations such as adding layers, deleting layers, modifying layer attributes, and adjusting layer levels. This operation information is transmitted to the conflict detection module in real time and updated in the conflict detection data structure. For example, when user A modifies the color attribute of a layer, the system records information such as the layer identifier of the operation, the modification time, and the color values before and after the modification, and adds it to the operation record of the corresponding layer in the conflict detection data structure.
[0055] The system runs a conflict detection algorithm to perform conflict analysis based on the information in the conflict detection data structure. The conflict detection algorithm will traverse the operation records of all layers and compare the operations of different users or editing processes on the same layer or related layers in the same time window. The specific judgment logic is as follows: (1) Attribute conflict detection of the same layer: For the same layer, if different users make different modifications to the same attribute (such as color, size, transparency, etc.) in the same time window, it is determined that there is an attribute conflict. For example, if user A changes the color of the layer to red, while user B changes the color of the same layer to blue in the same time window, the system will detect this attribute conflict. (2) Layer hierarchy conflict detection: When adjusting the layer hierarchy, if different users make different modifications to the parent-child relationship, upper and lower layer order, etc. of the same layer or related layers, resulting in an inconsistent layer hierarchy structure, it is determined that there is a hierarchy conflict. For example, if user A moves layer A below layer B, while user B moves layer A above layer C in the same time window, the system will detect this hierarchy conflict. (3) Layer operation dependency conflict detection: There are dependencies between certain layer operations, such as deleting a layer group first and then operating on the layers within that layer group. If the operations of different users violate this dependency relationship, it is determined that there is an operation dependency conflict. For example, if user A deletes a layer group, and user B tries to modify the properties of a layer within that layer group in the same time window, the system will detect this operation dependency conflict.
[0056] When the conflict detection algorithm detects overlapping modification conflicts, the system immediately takes appropriate measures and provides conflict information to the relevant users. For attribute conflicts, the system can handle them according to preset conflict resolution strategies, such as prioritizing the result of the last modification or prompting the user to manually negotiate a solution. For hierarchical relationship conflicts and operation dependency conflicts, the system will prevent the execution of the conflicting operation and return detailed conflict prompts to the user, informing them of the specific content and location of the conflict and guiding the user to coordinate and modify accordingly. Simultaneously, the system will record the conflict resolution results in a log file for subsequent auditing and analysis.
[0057] During the automatic layer tree reorganization process, the system continuously monitors the layers being edited. When it detects that the user has completed an editing operation on a layer, such as saving the changes or after a prolonged period of inactivity (exceeding a preset idle time threshold), the system unlocks the layer-level lock and restores its status to normal. After the layer-level lock is unlocked, the layer can rejoin the automatic layer tree reorganization process and receive further modifications and processing. Simultaneously, the system continues to monitor and detect conflicts in other layers being edited, ensuring the smooth progress of the entire automatic layer tree reorganization process.
[0058] In this embodiment, when the layer tree is automatically reorganized, a layer-level lock can be applied to the layer being edited. At the same time, a conflict detection algorithm is run to effectively detect whether there are any overlapping conflicts in the collaborative editing content, thus ensuring the accuracy of the automatic reorganization of the layer tree and the efficiency of collaborative editing.
[0059] S105, based on the adaptation results and mapping rule base after automatic reorganization of the layer tree, automatically generates test cases covering multiple adaptation scenarios through the rule engine.
[0060] In this embodiment, data related to the adaptation results after automatic layer tree reorganization is collected, including the platform code snippets and component identifiers generated for each layer or layer group, as well as their specific locations and hierarchical relationships within the target platform template. Simultaneously, all currently valid mapping rules are extracted from a dynamically updated mapping rule library. These rules detail the conversion relationships between design attributes and low-code platform target component code, such as the color representation of a specific color value in the platform code within the design file, or the platform component type corresponding to a certain layer type. The collected adaptation result data and mapping rules are integrated to form a complete dataset, serving as the basis for subsequent test case generation.
[0061] Based on the business requirements and actual application of the low-code platform, we analyzed and identified various adaptation scenarios that needed to be covered. These scenarios include adaptation for different screen sizes, such as screen display on different devices like mobile phones, tablets, and computers; adaptation for different operating systems, such as the different requirements of iOS, Android, and Windows systems for interface elements and interaction methods; and adaptation for different business function modules, such as the unique design and interaction requirements of login modules, shopping cart modules, and product display modules. After clarifying the scope of adaptation scenarios, we defined corresponding feature parameters for each scenario so that targeted test cases could be generated subsequently based on these parameters.
[0062] The initialization process involves loading the integrated dataset (adapted result data and mapping rules) into the rule engine. A rule engine is a software component that processes and analyzes input data according to preset rules and outputs corresponding results. During initialization, the rule engine parses and preprocesses the loaded data, establishing relationships between data and rules to ensure quick and accurate retrieval of relevant data and rules when generating test cases later. Simultaneously, the rule engine's operating parameters are configured, such as rule matching priority and test case generation limits, to ensure the rule engine functions as expected.
[0063] For each defined adaptation scenario, the rule engine filters relevant adaptation result data and mapping rules from the integrated dataset based on the scenario's characteristic parameters. Then, using this filtered data and rules, it generates the basic framework of test cases. For example, for adaptation scenarios with different screen sizes, the rule engine determines key elements such as the display range and layout of layers or components to be tested in that scenario based on the parameters of different screen sizes, and constructs the framework structure of test cases based on this. The test case framework includes basic information such as the test case title, description, preconditions, and test steps.
[0064] Based on the generated test case framework, the rule engine further extracts specific test data from the adaptation result data and mapping rules, and calculates the corresponding expected results. Test data can include various attribute values of layers, such as color, size, position, and transparency, as well as component interaction state information, such as whether it is clickable or displayed. According to the mapping rules and the requirements of the adaptation scenario, the rule engine processes and transforms this test data to generate test data that meets the requirements of the target platform. Simultaneously, based on the adaptation results after automatic layer tree reorganization and business logic, it calculates the expected output results under the given test data, such as interface display effects and interaction response results. The populated test data and expected results are then added to the test case framework to form complete test cases.
[0065] The generated test cases may contain duplicates or redundancies. To improve testing efficiency and reduce testing costs, the rule engine optimizes and deduplicates the generated test cases. By comparing key information such as test data, expected results, and test steps, duplicate test cases are identified and merged or deleted. Simultaneously, the test cases are optimized to remove unnecessary test steps and data, ensuring that each test case is independent and effective, accurately testing specific adaptation scenarios and functionalities.
[0066] Optimized test cases are stored in a dedicated test case library for subsequent test execution and management. The test case library employs a well-designed database structure, enabling the categorization, storage, and rapid retrieval of test cases. Each test case is assigned a unique identifier and its generation time, applicable scenario, associated adaptation results, and mapping rules are recorded, facilitating tester tracking and maintenance. During test execution, testers can select appropriate test cases from the library as needed, ensuring the comprehensiveness and systematic nature of the testing process.
[0067] In this embodiment, based on the adaptation results after automatic reorganization of the layer tree and the mapping rule base, the rule engine can automatically generate test cases covering multiple adaptation scenarios, which effectively improves testing efficiency and accuracy and ensures the reliability and stability of the PSD layer intelligent adaptation method in different scenarios.
[0068] In some embodiments, in step S101 above, the input PSD file uses a pre-trained computer vision model to identify each layer, analyze the layer type, visual features, and interaction state, and obtain multimodal features of the layers, specifically including: Obtain the PSD file, render each layer in the PSD file as an independent rasterized image, and extract the name and text content of each layer as text information. Visual feature vectors are obtained by using a convolutional neural network model to extract visual features from rasterized images. Natural language processing models are used to semantically encode text information to obtain text feature vectors. Visual feature vectors and text feature vectors are fused to generate a joint feature vector that uniformly represents the visual and textual information of the layer. The joint feature vector is input into a multi-task decoding network to classify layer types and layer interaction states, identify the visual features of layers, and output multimodal features of layers that include layer type, visual features, and interaction states.
[0069] In this embodiment, after obtaining the PSD file, a professional image processing library, such as the relevant development kit (SDK) provided by Adobe or other open-source PSD parsing libraries, is used to parse the PSD file. During the parsing process, each layer in the PSD file is separated to ensure that each layer can be manipulated independently. For each layer, the system renders it as an independent rasterized image. This process is similar to displaying a layer separately in image editing software and saving it as an image. In this way, the visual information of the layers can be fixed in the form of images, which is convenient for subsequent visual feature extraction. At the same time, the system extracts the name of each layer and the text content contained in the layer, and stores them separately as text information. For example, if a layer is named "Button-Confirm" and contains the text "Click to Confirm", then "Button-Confirm" and "Click to Confirm" are extracted as the text information of that layer.
[0070] The rasterized images rendered from each layer are input into a pre-trained Convolutional Neural Network (CNN) model. This CNN model is trained on a large amount of labeled image data and has the ability to extract effective visual features from images. During model processing, the image is processed through multiple convolutional layers, pooling layers, and other structures. Convolutional layers perform convolution operations on the image using different convolutional kernels to extract local features such as edges and textures; pooling layers downsample the feature maps output by the convolutional layers, reducing the amount of data while retaining the main features. After multiple layers of processing, the model finally outputs a visual feature vector, which numerically represents various visual features of the rasterized image, such as color distribution, shape features, and texture details. Different images will generate different visual feature vectors due to their different visual content, thus uniquely representing the visual features of the image.
[0071] The extracted text information from each layer is input into a pre-trained Natural Language Processing (NLP) model. This NLP model is trained on a large amount of text data and is capable of understanding the semantic information of the text. When processing the text, the model performs preprocessing operations such as word segmentation and part-of-speech tagging, converting the text into a format that the computer can understand. Then, the text is semantically encoded through encoding layers within the model, such as Recurrent Neural Networks (RNNs) and their variants (e.g., Long Short-Term Memory Networks (LSTM), Gated Recurrent Units (GRU)) or Transformer architectures. These encoding layers capture the semantic relationships and contextual information in the text, converting the text into a text feature vector. This text feature vector reflects the semantic content of the text in numerical form, such as the layer function represented by the layer name and the information conveyed by the text content.
[0072] To comprehensively represent the visual and textual information of a layer, it is necessary to fuse the visual feature vectors and textual feature vectors. Fusion can be achieved through a simple concatenation method, where the values of the two vectors are joined sequentially to form a longer joint feature vector. Alternatively, a weighted fusion method can be used, assigning different weights to the two vectors based on their importance in representing the layer's information, and then summing the weighted vectors to obtain the joint feature vector. Through this fusion operation, the joint feature vector can simultaneously contain the layer's visual features and textual semantic information, providing richer information for subsequent accurate identification of layer type, visual features, and interaction states.
[0073] The generated joint feature vector is input into a pre-trained multi-task decoding network. A multi-task decoding network is a neural network model capable of handling multiple related tasks simultaneously. In this scheme, it needs to classify layer types and layer interaction states, as well as identify the visual features of layers. During model processing, the multi-task decoding network performs different tasks through multiple internal branch networks based on the information in the joint feature vector. For the layer type classification task, the network determines the layer type based on its visual and textual features, such as button, text box, or image. For the interaction state classification task, the network determines the current interaction state of the layer, such as clickable, selected, or disabled. For the visual feature recognition task, the network further refines its understanding of the layer's visual features, such as recognizing specific visual attributes like button color, shape, and size. Finally, the multi-task decoding network outputs multimodal features of the layer, including layer type, visual features, and interaction state. These features are presented in a structured data format, providing an accurate basis for subsequent layer adaptation operations.
[0074] In this embodiment, a PSD file is input, and a pre-trained computer vision model is used to accurately identify each layer, analyze the layer type, visual features, and interaction state, and obtain comprehensive and accurate multimodal features of the layers, laying a solid foundation for the successful implementation of the entire PSD layer intelligent adaptation method.
[0075] In some embodiments, step S102 above, which involves matching the multimodal features of the layers with a dynamically updated mapping rule base to generate a corresponding platform code snippet or component identifier for each layer or layer group, specifically includes: Construct a mapping rule library, which includes multiple mapping rules. Each mapping rule includes triggering conditions based on layer multimodal features and the corresponding target platform component code or component identifier. Match the multimodal features of the layer with the triggering conditions of multiple mapping rules in the mapping rule base; When multiple mapping rules are matched, the optimal rule is determined from the multiple mapping rules according to the preset conflict resolution strategy; Based on the target output corresponding to the determined optimal rule, generate the corresponding platform code snippet or component identifier for the layer.
[0076] In this embodiment, based on the characteristics and requirements of different target platforms (such as web platforms, mobile application platforms, etc.), the relationships between various common layer types, visual features, and interaction states and their corresponding target platform component codes or component identifiers are collected and organized. For example, for a web platform, a layer with a rectangular shape, blue fill, white text, and labeled "button" might correspond to a target component in HTML.<button>The tag includes the corresponding CSS style code; for mobile application platforms, layers with the same characteristics may correspond to button component identifiers in a specific UI component library.
[0077] Based on these collected relationships, multiple mapping rules were formulated. Each mapping rule contains two main parts: triggering conditions based on the multimodal characteristics of the layer and the corresponding target platform component code or component identifier. The triggering conditions describe in detail which multimodal characteristics the layer must meet (such as layer type, color, size, text content, interaction state, etc.) to trigger the rule; the target output specifies the target platform component code or component identifier to be generated when the triggering conditions are met. These mapping rules are systematically organized and stored to form a mapping rule library. Furthermore, to adapt to different projects and constantly changing needs, the mapping rule library is designed to be dynamically updated, allowing developers to add, modify, or delete mapping rules as needed.
[0078] After obtaining the accurate multimodal features of a layer, the system initiates a matching process. The multimodal features of each layer or layer group are treated as a whole and compared one by one with the trigger conditions of multiple mapping rules in the mapping rule library. During the comparison, the system carefully checks whether each aspect of the layer's multimodal features meets the trigger condition requirements. For example, if the trigger condition requires the layer type to be "button," the color to be "blue," and the text content to contain "submit," the system will verify whether the current layer is indeed a button type, whether its color is blue, and whether the text content contains the word "submit." Only when the layer's multimodal features fully meet all the trigger condition requirements is the layer considered to have successfully matched the mapping rule. This comprehensive comparison method ensures that mapping rules that accurately match the layer features are found.
[0079] In actual matching, a situation may arise where multimodal features of a single layer simultaneously satisfy the triggering conditions of multiple mapping rules, resulting in rule conflicts. To resolve these conflicts, the system employs a pre-defined conflict resolution strategy to determine the optimal rule. This strategy comprehensively considers multiple factors, such as rule priority, matching degree, and applicable scenarios.
[0080] Rule priority can be set based on the importance and generality of the rules; rules with higher priority are more likely to be selected in case of conflicts. Matching degree is evaluated by calculating the similarity between the multimodal features of the layer and the triggering conditions; the higher the similarity, the higher the matching degree, and the greater the likelihood of the rule being selected. Applicability scenario considers the rule's applicability in different projects or page layouts, prioritizing rules more suitable for the current scenario. The system will comprehensively evaluate and rank multiple matched rules based on these factors, ultimately determining the optimal rule as the basis for subsequently generating platform code snippets or component identifiers.
[0081] After determining the optimal rule, the system generates a corresponding platform code snippet or component identifier for the layer based on the target output corresponding to that rule. If the target output is a platform code snippet, the system will fill in the relevant information of the layer (such as color, size, text content, etc.) into the code template according to the code structure and style requirements defined in the rule, generating a complete code snippet that can be directly used on the target platform. For example, for a button layer on a web platform, the generated code snippet may contain HTML tags and CSS styles to render the button effect on the webpage consistent with the PSD layer.
[0082] If the target output is a component identifier, the system will search for the corresponding component in the target platform's component library and return its unique identifier so that the component can be accurately referenced during subsequent platform development. In this way, the system can automatically generate code snippets or component identifiers adapted to the target platform for each layer or layer group based on the multimodal characteristics of the layers and the mapping rule library, greatly improving development efficiency and code consistency.
[0083] In this embodiment, the multimodal features of layers can be effectively matched with a dynamically updated mapping rule base to generate corresponding platform code snippets or component identifiers for each layer or layer group, providing strong support for the smooth conversion of PSD files to different platforms.
[0084] Furthermore, the step of determining the optimal rule from multiple mapping rules according to a preset conflict resolution strategy specifically includes: Identify all mapping rules that match the multimodal features of the current layer, and form a candidate rule set; For each mapping rule in the candidate rule set, its score is calculated on multiple evaluation dimensions, including rule confidence, feature matching degree, and platform version adaptability. Assign a preset weight coefficient to each evaluation dimension, and calculate the weighted comprehensive score of each mapping rule based on the score of each evaluation dimension and the weight coefficient. Compare the weighted composite scores of all mapping rules in the candidate rule set, and determine the mapping rule with the highest weighted composite score as the optimal rule.
[0085] In this embodiment, after matching the trigger conditions of the layer's multimodal features with those of all mapping rules in the mapping rule base, all mapping rules that satisfy the multimodal features of the current layer are collected. For example, if the current layer is a button layer with a specific color, shape, and interaction state, there may be multiple mapping rules in the mapping rule base for different combinations of features of the button layer. As long as the trigger conditions of these rules are satisfied by the multimodal features of the layer, they will be included in the candidate rule set. In this way, all mapping rules that may be applicable to the current layer are summarized together to form a candidate rule set.
[0086] For each mapping rule in the candidate rule set, the system will score it from multiple evaluation dimensions, including rule confidence, feature matching degree, and platform version compatibility.
[0087] Rule confidence primarily reflects the reliability and stability of mapping rules. The system evaluates a rule's confidence based on its historical usage, test results, and expert experience. For example, if a mapping rule has been successfully applied in multiple similar projects without errors or anomalies, its rule confidence score will be high; conversely, if a rule is newly added or has encountered problems during use, its rule confidence score will be relatively low.
[0088] Feature matching score measures the degree of match between the triggering conditions of a mapping rule and the multimodal features of the current layer. The system will compare the consistency between the features specified in the triggering conditions, such as layer type, color, size, text content, and interaction state, and the actual features of the current layer. For example, if the triggering condition requires the layer color to be red, and the current layer color is dark red, the system will give a feature matching score based on the color similarity algorithm; if all features of the layer are completely consistent with the triggering conditions, then the rule will get the highest score in the feature matching score dimension.
[0089] Considering that different target platforms may have multiple versions, and that different versions may have varying levels of support for components and code, platform version compatibility is used to evaluate the degree of compatibility between the target platform code snippets or component identifiers generated by mapping rules and the current target platform version. The system pre-collects relevant information for each version of the target platform, including supported component types and code syntax rules. When evaluating mapping rules, it checks whether the results generated by the rule meet the requirements of the current platform version. For example, if the current target platform version does not support a specific UI component, but a mapping rule's result includes the component identifier, then that rule will score lower on the platform version compatibility dimension.
[0090] After calculating the scores of each mapping rule on each evaluation dimension, a preset weight coefficient is assigned to each evaluation dimension. These weight coefficients are set according to the importance of different evaluation dimensions in determining the optimal rule. For example, if the reliability of a rule is considered the most important factor in a project, then the weight coefficient for rule confidence will be set higher; while if the project focuses more on the accurate matching of layer features and rules, then the weight coefficient for feature matching will be increased accordingly.
[0091] Based on the scores of each evaluation dimension and their corresponding weight coefficients, a weighted composite score for each mapping rule is calculated using a weighted summation method. For example, assuming the weight of rule confidence is 0.4, the weight of feature matching is 0.3, and the weight of platform version adaptation is 0.3, if a mapping rule scores 80 points in the rule confidence dimension, 90 points in the feature matching dimension, and 70 points in the platform version adaptation dimension, then the weighted composite score for this mapping rule is 80 × 0.4 + 90 × 0.3 + 70 × 0.3 = 80 points.
[0092] The weighted composite score of all mapping rules in the candidate rule set is compared, and the mapping rule with the highest score is determined as the optimal rule. For example, if there are three mapping rules in the candidate rule set with weighted composite scores of 80, 75, and 70 respectively, then the mapping rule with a score of 80 will be selected as the optimal rule. This optimal rule will serve as the basis for subsequently generating corresponding layer platform code snippets or component identifiers, ensuring that the generated code or components can accurately adapt to the target platform and meet the project's requirements and standards.
[0093] In this embodiment, the optimal rule is scientifically and reasonably determined from multiple matching mapping rules according to the preset conflict resolution strategy, which effectively solves the rule conflict problem and improves the accuracy and efficiency of layer adaptation.
[0094] In some embodiments, in step S103 above, the step of analyzing the layer hierarchy of the current PSD using an automatic layer tree reorganization algorithm based on the platform code snippet or component identifier and the component nesting rules of the target platform template, and then performing automatic layer tree reorganization, specifically includes: The root-level component is determined based on the platform code snippet or component identifier. Based on the component nesting rules of the target platform template corresponding to the root-level component, the target tree skeleton containing the necessary container nodes is constructed in memory. Traverse the original layer tree of the PSD file, and for each layer node identified as a platform-specific component, map it to the corresponding node position in the target tree skeleton; When a required container node is detected as missing from the original layer count, a virtual container node is created at the corresponding position in the target tree skeleton. Based on the target tree skeleton after mapping, the depth level and sibling node order of each layer are recalculated to generate a new layer tree structure after reorganization.
[0095] In this embodiment, the obtained platform code snippets or component identifiers are parsed to determine the root-level component. For example, if the target platform is for web front-end development, and the generated code snippet indicates that the root-level component is a container component containing the overall page layout, such as in HTML... If the container has a specific class name for overall style control, the container component is determined as a root-level component.
[0096] After determining the root-level component, the target tree skeleton is constructed in memory according to the component nesting rules of the target platform template corresponding to the root-level component. The component nesting rules of the target platform template specify the hierarchical relationship and nesting mode between different components in detail. For example, in web development, it can be specified that the navigation bar component must be nested in the page header container component, and the content area component is nested in the page body container component. According to these rules, the system gradually constructs a tree structure containing all the required container nodes from the root-level component, and this tree structure is the target tree skeleton, which provides a basic framework for subsequent layer mapping and restructuring.
[0097] After the construction of the target tree skeleton is completed, the original layer tree of the PSD file is traversed. The original layer tree records the original hierarchical relationship of each layer in the PSD file, including the information of parent layers and child layers. During the traversal process, the system analyzes and identifies each layer node to determine whether it is a specific platform component. For example, by analyzing the layer name, attributes, and previously generated component identifiers, it is identified whether the layer corresponds to a button component, a picture component, etc. in the target platform.
[0098] For each layer node identified as a specific platform component, it is mapped to the corresponding node position in the target tree skeleton according to its characteristics and the structure of the target tree skeleton. For example, if a layer is identified as a button component, and according to the rules of the target platform template, the button component should be nested in a specific container component, then the system will map the button layer node to the corresponding container node in the target tree skeleton, ensuring that the layer in the restructured structure meets the component nesting requirements of the target platform.
[0099] In the process of mapping the nodes of the PSD original layer tree to the target tree skeleton, it is detected in real time whether there is a missing required container node in the original layer tree. For example, the target platform template specifies that a specific component must be nested in a specific container component, but there is no corresponding container layer in the PSD original layer tree.
[0100] When such a situation is detected, a virtual container node is created at the corresponding position in the target tree skeleton. The virtual container node is a logical node that does not directly correspond to an actual layer in the PSD file, but it serves to carry other component nodes in the target tree skeleton to meet the component nesting rules of the target platform template. For example, if a container node for wrapping a picture component is missing, the system will create a virtual container node above the picture component node in the target tree skeleton and set its relevant attributes and styles to ensure that the subsequent generated code structure is correct.
[0101] After completing the mapping of all layer nodes and the creation of virtual container nodes, the target tree skeleton has fully reflected the reasonable hierarchical relationship of the PSD layers in the target platform. At this time, the system will recalculate the depth level and sibling node order of each layer according to the mapped target tree skeleton.
[0102] The depth level represents the hierarchical depth of the layer in the tree structure, and the depth level of the root-level component is 0, the depth level of its child nodes is 1, and so on. The sibling node order determines the arrangement order of the layers in the same level. The system determines the depth level and order of each layer node in the sibling nodes by traversing the target tree skeleton, and generates a new layer tree structure after reorganization according to this information. The new layer tree structure accurately reflects the hierarchical and arrangement relationship of the PSD layers in the target platform, providing a reliable basis for subsequent generation of code that meets the requirements of the target platform.
[0103] In this embodiment, the layer tree automatic reorganization algorithm can be used to analyze and reorganize the layer hierarchy relationship of the PSD file according to the platform code snippet or component identifier and the component nesting rules of the target platform template, ensuring that the generated code structure is reasonable and the component nesting is correct, and improving the efficiency and quality of the conversion of the PSD file to the target platform.
[0104] In some embodiments, in the step S104, the layer level lock is applied to the layer being edited, and a conflict detection algorithm is run to detect whether there is a modification overlap conflict in the collaborative editing content, specifically including: In response to a user editing operation or an access request of an automatic processing flow, a target layer is applied with a corresponding type of layer level lock, and the type of the layer level lock includes an exclusive lock for preventing writing and a shared lock for allowing reading; During the locking of the layer, all editing operations on the layer are continuously recorded to generate operation records containing operation types, target attributes and state changes; When it is necessary to merge modifications from different sources, multiple change sets generated based on the same baseline version are determined according to the operation records, and it is judged whether there is a modification overlap conflict between the change sets; If the modifications between the change sets are non-overlapping, all modifications are automatically merged, and if there are overlapping conflicts, a conflict resolution process is triggered.
[0105] In this embodiment, the system monitors user editing operations or access requests of automatic processing flows in real time. When an access request for a target layer is detected, the system applies a layer-level lock of a corresponding type to the target layer according to the nature of the request and the current editing environment.
[0106] If the user initiates a write operation, such as modifying the color, size, position, or other attributes of the layer, or deleting, copying, or performing other operations on the layer, the system applies an exclusive lock to the target layer. The exclusive lock prevents other users or automatic processing flows from simultaneously performing write operations on the layer, ensuring that only one subject can modify the layer at the same time, thereby avoiding data inconsistency and conflicts. For example, in a design team, designer A is modifying the color of a key layer, and the system applies an exclusive lock to the layer. When designer B attempts to modify the color of the layer, the system prompts that the layer is locked and cannot be written.
[0107] When the user initiates a read operation, such as viewing attribute information of the layer, previewing layer effects, or an automatic processing flow only reads layer data for analysis without modification, the system applies a shared lock to the target layer. The shared lock allows other users or automatic processing flows to simultaneously perform read operations on the layer, improving the efficiency of collaborative editing. For example, designer C wants to view the size information of a layer, and designer D also wants to view the style attributes of the layer. The system applies a shared lock to the layer, and both designers can simultaneously obtain relevant information of the layer without conflicts.
[0108] During the period when the layer is locked, the system continuously records all editing operations on the layer. The system generates detailed operation records for each editing operation, which include operation type, target attribute, and state change.
[0109] Operation type is used to explicitly record the specific operation performed by the user or automatic processing flow on the layer, such as modifying color, adjusting size, moving position, adding special effects, etc. For example, if the user modifies the color of the layer from red to blue, the operation type is recorded as "color modification".
[0110] Target attribute is used to indicate the layer attribute targeted by the operation, such as color attribute, size attribute, transparency attribute, etc. In the above example of color modification, the target attribute is "color".
[0111] State change is used to record the state change of layer properties before and after the operation. Continuing with the color modification example, state change will record that the color was red before the operation and the color was changed to blue after the operation. Through these detailed operation records, the system can accurately track the changes of the layer during the editing process, providing a basis for subsequent conflict detection and merging.
[0112] When it is necessary to merge modifications from different sources, for example, multiple users edit the same layer at different times, or automatic processing flows and user operations both produce modifications to the layer, the system will determine multiple change sets based on the same baseline version according to the operation records. The baseline version refers to the initial state of the layer at the beginning of this collaborative editing, and all subsequent modifications are based on this version.
[0113] These change sets are analyzed one by one to determine whether there is a modification overlap conflict between them. Modification overlap conflict refers to multiple change sets making different modifications to the same property of the layer. For example, user A modifies the width of the layer from 100 pixels to 120 pixels, and user B modifies the width of the layer from 100 pixels to 150 pixels within the same time period, and these two change sets have a modification overlap conflict on the width property of the layer. The system can accurately identify whether there is a conflict by comparing the target properties and state changes of the operations in the change sets.
[0114] According to the results of conflict detection, the system will take different processing methods. If the change sets are non-overlapping modifications, that is, different change sets modify different properties of the layer, or although they modify the same property, the modified values do not conflict (for example, one change set increases the transparency of the layer by 10%, and another change set increases the brightness of the layer by 20%), the system will automatically merge all modifications. The merged layer will integrate the modification effects of all change sets to ensure that the final state of the layer meets the requirements of all modifications.
[0115] If there is an overlap conflict, the system will trigger a conflict resolution process. The conflict resolution process can include various ways, such as prompting the user to manually resolve the conflict, allowing the user to choose which modification of the change set to keep or make manual adjustments; or using a pre-set conflict resolution strategy, such as automatically selecting the modification of one change set as the final result according to the order of modification time, user permission level, etc. Through the conflict resolution process, the system can properly handle conflicts and ensure the accuracy and consistency of layer editing.
[0116] In this embodiment, the layer level lock can be effectively applied to the target layer, the editing operation can be recorded, the modification overlap conflict in the collaborative editing content can be detected, and corresponding processing can be performed according to the conflict situation, thereby ensuring the smooth progress of multi-person collaborative layer editing.
[0117] In some embodiments, in step S105, the adaptation result after automatic reorganization of the layer tree and the mapping rule library are used to automatically generate test cases covering multiple adaptation scenarios by a rule engine, specifically including: A test scenario rule library is constructed, which includes multiple test scenario rules for setting multiple test dimensions based on component types and corresponding test parameter generation logic, the test dimensions including layout dimension, interaction state dimension, content data dimension, and platform compatibility dimension; The adaptation result after automatic reorganization of the layer tree is parsed, and for each component in the adaptation result, the relevant test dimensions are matched from the test scenario rule library according to the component type, and the test scenario matrix covering multiple-dimensional scenarios is generated by combining the test parameters of each test dimension; For each test scenario in the test scenario matrix, the corresponding test input data and expected result verification logic are generated and filled into the test script template, and the executable specific test cases are output.
[0118] In this embodiment, a comprehensive and detailed test scenario rule library is constructed. The rule library contains multiple test scenario rules, each of which sets multiple test dimensions and corresponding test parameter generation logic for different component types.
[0119] The layout dimension focuses on the display effect of the component under different screen sizes, resolutions, and layout methods. For example, for a button component, the width of the button under different width screens is set to be adaptive, such as being fixed at 80% of the screen width on small screen devices, and being fixed at 300 pixels on large screen devices. At the same time, the position and alignment of the component in different layout containers (such as linear layout, relative layout, etc.) are also considered.
[0120] The interaction state dimension involves the performance of the component under various interaction states, such as normal state, hover state, click state, and disabled state. For example, for an input box component, the border is blue in the normal state, the border color is darkened when hovering, the cursor blinks when clicked, and it becomes gray and cannot be input in the disabled state. The rule library will define the parameters such as style and behavior under each interaction state in detail.
[0121] The content data dimension is used to test the content data carried by the component. For text components, different lengths, fonts, and colors of text content are tested; for picture components, different sizes, formats, and resolutions of picture loading and display are considered. For example, whether the text component will automatically wrap or display ellipsis when displaying long text is tested.
[0122] The platform compatibility dimension is used to consider the compatibility of components on different operating systems (such as Windows, macOS, iOS, Android, etc.) and browsers (such as Chrome, Firefox, Safari, etc.). For example, some special effects can be normally displayed in the Chrome browser, but may appear abnormal in the Safari browser, and the rule library will record these differences and set the corresponding test parameters. Through these detailed test dimensions and parameter generation logic, the test scenario rule library provides a basis for subsequent generation of comprehensive test cases.
[0123] After completing the construction of the test scenario rule library, the system parses the adaptation results of the automatically reorganized layer tree. For each component in the adaptation results, the system will match the relevant test dimensions from the test scenario rule library according to its component type. For example, if there is a button component in the adaptation results, the system will find the layout, interaction state, content data, and platform compatibility test dimensions related to the button component from the rule library. Then, the system will combine different test parameter combinations according to the test parameter generation logic of each test dimension. Taking the button component as an example, there may be two parameters of small screen and large screen in the layout dimension, four parameters of normal, hover, click, and disabled in the interaction state dimension, two parameters of short text and long text in the content data dimension, and two parameters of Windows and iOS in the platform compatibility dimension. By combining these parameters, the system will generate a test scenario matrix that covers multiple-dimensional scenarios. This matrix contains all possible test scenario combinations, ensuring that the performance of the button component in different situations can be fully tested.
[0124] For each test scenario in the test scenario matrix, the system will generate corresponding test input data and expected result verification logic. Specifically, According to the parameter combination of the test scenario, specific input data is generated. For example, in the scenario of testing the button component displaying long text on a small screen device and in the hover state, the test input data may include a screen width of 320 pixels, a button text of a longer descriptive text, and a mouse hovering over the button. Define the correct performance and results of the component under this test scenario. Continuing the above button component scenario, the expected result verification logic may include that the button width should adapt to the screen width and not exceed the maximum limit, the button text should be displayed completely and automatically wrapped, and the border color of the button in the hover state should comply with the preset rules.
[0125] The system populates the generated test input data and expected result verification logic into a pre-designed test script template. The test script template is a general framework containing the basic structure and flow for executing tests. By filling in the specific content, the system outputs executable test cases. These test cases can be run directly in the test environment to comprehensively and accurately test the adaptation results after the automatic reorganization of the layer tree, ensuring it functions correctly in various scenarios.
[0126] In this embodiment, based on the adaptation results and mapping rule base automatically reorganized by the layer tree, test cases covering multiple adaptation scenarios can be automatically generated using the rule engine, thereby improving testing efficiency and accuracy and ensuring the quality of graphical interface design and development.
[0127] Reference Figure 2 An embodiment of the present invention provides a PSD layer intelligent adaptation system 2, the system 2 specifically comprising: The first adaptation module 201 is used to input PSD files, use a pre-trained computer vision model to identify each layer, parse the layer type, visual features and interaction state, and obtain multimodal features of the layer. The second adaptation module 202 is used to match the multimodal features of the layer with the dynamically updated mapping rule library, and generate a corresponding platform code snippet or component identifier for each layer or layer group. The mapping rule library is used to set the conversion relationship between design attributes and low-code platform target component code. The third adaptation module 203 is used to analyze the layer hierarchy of the current PSD based on the platform code snippet or component identifier and the component nesting rules of the target platform template, and to perform automatic layer tree reorganization. The fourth adaptation module 204 is used to apply a layer-level lock to the layer being edited when the layer tree is automatically reorganized, and at the same time run a conflict detection algorithm to detect whether there are any overlapping conflicts in the collaborative editing content; The fifth adaptation module 205 is used to automatically generate test cases covering multiple adaptation scenarios through the rule engine based on the adaptation results and mapping rule library after automatic reorganization of the layer tree.
[0128] It is understandable that, such as Figure 1 The content of the PSD layer intelligent adaptation method embodiment shown is applicable to the PSD layer intelligent adaptation system embodiment. The specific functions implemented by the PSD layer intelligent adaptation system embodiment are the same as those shown below. Figure 1 The PSD layer smart adaptation method shown in the example is the same, and the beneficial effects achieved are the same as those shown. Figure 1 The beneficial effects achieved by the PSD layer intelligent adaptation method embodiment shown are also the same.
[0129] It should be noted that the information interaction and execution process between the above systems are based on the same concept as the method embodiments of the present invention. For details on their specific functions and technical effects, please refer to the method embodiments section, which will not be repeated here.
[0130] Those skilled in the art will clearly understand that, for the sake of convenience and brevity, the above-described division of functional units and modules is merely an example. In practical applications, the above functions can be assigned to different functional units and modules as needed, that is, the internal structure of the system can be divided into different functional units or modules to complete all or part of the functions described above. The functional units and modules in the embodiments can be integrated into one processing unit, or each unit can exist physically separately, or two or more units can be integrated into one unit. The integrated unit can be implemented in hardware or as a software functional unit. Furthermore, the specific names of the functional units and modules are only for easy differentiation and are not intended to limit the scope of protection of this application. The specific working process of the units and modules in the above system can be referred to the corresponding process in the foregoing method embodiments, and will not be repeated here.
[0131] Reference Figure 3 The present invention also provides a computer device 3, including: a memory 302 and a processor 301, and a computer program 303 stored on the memory 302. When the computer program 303 is executed on the processor 301, it implements the PSD layer intelligent adaptation method as described in any of the above methods.
[0132] The computer device 3 may be a desktop computer, laptop, handheld computer, or cloud server, etc. The computer device 3 may include, but is not limited to, a processor 301 and a memory 302. Those skilled in the art will understand that... Figure 3 The computer device 3 is merely an example and does not constitute a limitation on the computer device 3. It may include more or fewer components than shown in the figure, or combine certain components, or different components, such as input / output devices, network access devices, etc.
[0133] The processor 301 may be a Central Processing Unit (CPU), or it may be other general-purpose processors, digital signal processors (DSPs), application-specific integrated circuits (ASICs), field-programmable gate arrays (FPGAs), or other programmable logic devices, discrete gate or transistor logic devices, discrete hardware components, etc. A general-purpose processor may be a microprocessor or any conventional processor.
[0134] In some embodiments, the memory 302 may be an internal storage unit of the computer device 3, such as a hard disk or memory of the computer device 3. In other embodiments, the memory 302 may be an external storage device of the computer device 3, such as a plug-in hard disk, smart media card (SMC), secure digital (SD) card, flash card, etc., equipped on the computer device 3. Furthermore, the memory 302 may include both internal and external storage units of the computer device 3. The memory 302 is used to store the operating system, applications, boot loader, data, and other programs, such as the program code of the computer program. The memory 302 can also be used to temporarily store data that has been output or will be output.
[0135] This invention also provides a computer-readable storage medium storing a computer program thereon, which, when executed by a processor, implements the PSD layer intelligent adaptation method as described in any of the above methods.
[0136] In this embodiment, if the integrated unit is implemented as a software functional unit and sold or used as an independent product, it can be stored in a computer-readable storage medium. Based on this understanding, all or part of the processes in the methods of the above embodiments can be implemented by a computer program instructing related hardware. The computer program can be stored in a computer-readable storage medium, and when executed by a processor, it can implement the steps of the various method embodiments described above. The computer program includes computer program code, which can be in the form of source code, object code, executable files, or certain intermediate forms. The computer-readable medium can include at least: any entity or device capable of carrying computer program code to a photographing device / terminal device, a recording medium, a computer memory, a read-only memory (ROM), a random access memory (RAM), an electrical carrier signal, a telecommunication signal, and a software distribution medium. Examples include USB flash drives, portable hard drives, magnetic disks, or optical disks. In some jurisdictions, according to legislation and patent practice, computer-readable media cannot be electrical carrier signals or telecommunication signals.
[0137] In the above embodiments, the descriptions of each embodiment have different focuses. For parts that are not described in detail or recorded in a certain embodiment, please refer to the relevant descriptions of other embodiments.
[0138] Those skilled in the art will recognize that the units and algorithm steps of the various examples described in conjunction with the embodiments disclosed herein can be implemented in electronic hardware, or a combination of computer software and electronic hardware. Whether these functions are implemented in hardware or software depends on the specific application and design constraints of the technical solution. Those skilled in the art can use different methods to implement the described functions for each specific application, but such implementation should not be considered beyond the scope of this application.
[0139] In the embodiments disclosed in this application, it should be understood that the disclosed devices / terminal equipment and methods can be implemented in other ways. For example, the device / terminal equipment embodiments described above are merely illustrative. For instance, the division of modules or units is only a logical functional division, and in actual implementation, there may be other division methods. For example, multiple units or components may be combined or integrated into another system, or some features may be ignored or not executed. Furthermore, the displayed or discussed mutual coupling or direct coupling or communication connection may be through some interfaces; the indirect coupling or communication connection between devices or units may be electrical, mechanical, or other forms.
[0140] The units described as separate components may or may not be physically separate. The components shown as units may or may not be physical units; that is, they may be located in one place or distributed across multiple network units. Some or all of the units can be selected to achieve the purpose of this embodiment according to actual needs. < / button>
Claims
1. A method for intelligent adaptation of PSD layer, characterized in that, The method specifically comprises: inputting a PSD file, identifying each layer using a pre-trained computer vision model, analyzing the type, visual features and interaction state of the layer, and obtaining the multi-modal features of the layer; matching the multi-modal features of the layer with a dynamically updated mapping rule library to generate corresponding platform code snippets or component identifiers for each layer or layer group, and the mapping rule library is used to set the conversion relationship between design attributes and target component codes of a low-code platform; according to the platform code snippets or component identifiers and the component nesting rules of the target platform template, using a layer tree automatic reorganization algorithm to analyze the layer hierarchy relationship of the current PSD and execute layer tree automatic reorganization; when the layer tree is automatically reorganized, a layer level lock is applied to the layer being edited, and a conflict detection algorithm is run to detect whether there is a modification overlap conflict in the collaborative editing content; based on the adaptation results after the layer tree automatic reorganization and the mapping rule library, a test case covering multiple adaptation scenarios is automatically generated through a rule engine.
2. The method of claim 1, wherein, The input PSD file, the pre-trained computer vision model is used to identify each layer, analyze the type, visual features and interaction state of the layer, and obtain the multi-modal features of the layer, specifically comprising: acquire the PSD file, render each layer in the PSD file into an independent raster image, and extract the name and text content of each layer as text information; use a convolutional neural network model to extract visual features from the raster image and obtain a visual feature vector; use a natural language processing model to encode the semantic of the text information and obtain a text feature vector; fuse the visual feature vector and the text feature vector to generate a joint feature vector for unified representation of layer visual and text information; input the joint feature vector into a multi-task decoding network to classify the layer type and the interaction state of the layer, identify the visual features of the layer, and output the multi-modal features of the layer including the layer type, visual features and interaction state.
3. The method of claim 1, wherein, The matching of the multi-modal features of the layer with the dynamically updated mapping rule library to generate corresponding platform code snippets or component identifiers for each layer or layer group specifically comprises: constructing a mapping rule library, the mapping rule library comprising a plurality of mapping rules, the mapping rules comprising a trigger condition based on the multi-modal features of the layer and a corresponding target platform component code or component identifier; matching the multi-modal features of the layer with the trigger conditions of the plurality of mapping rules in the mapping rule library; when multiple mapping rules are matched, determining the optimal rule from the multiple mapping rules according to a preset conflict resolution strategy; generating a corresponding platform code snippet or component identifier for the layer according to the target output corresponding to the determined optimal rule.
4. The method of claim 3, wherein, The determination of the optimal rule from the multiple mapping rules according to the preset conflict resolution strategy specifically comprises: determine all mapping rules matched with the current multi-modal features of the layer to form a candidate rule set; for each mapping rule in the candidate rule set, calculate its score in multiple evaluation dimensions, including rule confidence, feature matching degree and platform version adaptation degree; A preset weight coefficient is assigned to each evaluation dimension, and a weighted comprehensive score of each mapping rule is calculated according to the score of each evaluation dimension and the weight coefficient; The weighted comprehensive scores of all mapping rules in the candidate rule set are compared, and the mapping rule with the highest weighted comprehensive score is determined as the optimal rule.
5. The method of claim 1, wherein, The automatic reorganization algorithm of the layer tree is used to analyze the layer hierarchy relationship of the current PSD according to the component nesting rules of the platform code fragment or the component identification and the target platform template, and the automatic reorganization of the layer tree is performed, specifically including: A root-level component is determined according to the platform code fragment or the component identification, and a target tree skeleton containing necessary container nodes is constructed in the memory based on the component nesting rules of the target platform template corresponding to the root-level component; The original layer tree of the PSD file is traversed, and each layer node identified as a specific platform component is mapped to the corresponding node position in the target tree skeleton; When it is detected that a necessary container node required by the missing rule in the original layer tree is missing, a virtual container node is created at the corresponding position in the target tree skeleton; According to the target tree skeleton after the mapping is completed, the depth level and the sibling node order of each layer are recalculated to generate a new layer tree structure after the reorganization.
6. The method of claim 1, wherein, The layer level lock is applied to the layer being edited, and a conflict detection algorithm is run to detect whether there is a modification overlap conflict in the collaborative editing content, specifically including: In response to an access request of a user editing operation or an automatic processing flow, a target layer is applied with a corresponding type of layer level lock, and the type of the layer level lock includes an exclusive lock for preventing writing and a shared lock for allowing reading; During the locking of the layer, all editing operations on the layer are continuously recorded to generate operation records containing operation types, target attributes and state changes; When it is necessary to merge modifications from different sources, a plurality of change sets generated based on the same baseline version are determined according to the operation records, and it is judged whether there is a modification overlap conflict between the change sets; If the change sets are non-overlapping modifications, all modifications are automatically merged, and if there is an overlap conflict, a conflict resolution process is triggered.
7. The method according to any one of claims 1 to 6, characterized in that, Based on the adaptation result after the automatic reorganization of the layer tree and the mapping rule library, test cases covering multiple adaptation scenarios are automatically generated by a rule engine, specifically including: A test scenario rule library is constructed, the test scenario rule library includes a plurality of test scenario rules, the test scenario rules are used to set a plurality of test dimensions based on component types and corresponding test parameter generation logics, and the test dimensions include layout dimensions, interaction state dimensions, content data dimensions and platform compatibility dimensions; The adaptation result after the automatic reorganization of the layer tree is parsed, for each component in the adaptation result, the related test dimensions are matched from the test scenario rule library according to the component type, the test parameters of each test dimension are combined to generate a test scenario matrix covering multiple-dimensional scenarios; For each test scenario in the test scenario matrix, corresponding test input data and expected result verification logic are generated and filled into a test script template, and executable specific test cases are output.
8. A PSD layer intelligent adaptation system, characterized in that, The system specifically includes: The first adaptation module is configured to input a PSD file, identify each layer using a pre-trained computer vision model, analyze the type, visual features and interaction state of the layer, and obtain the multi-modal features of the layer. The second adaptation module is configured to match the multi-modal features of the layer with a dynamically updated mapping rule library to generate corresponding platform code segments or component identifiers for each layer or layer group, and the mapping rule library is configured to set the conversion relationship between the design attributes and the target component code of the low-code platform. The third adaptation module is configured to analyze the layer hierarchy of the current PSD using a layer tree automatic reorganization algorithm according to the platform code segments or component identifiers and the component nesting rules of the target platform template, and execute the layer tree automatic reorganization. The fourth adaptation module is configured to apply a layer level lock to the layer being edited while running a conflict detection algorithm to detect whether there is a modification overlap conflict in the collaborative editing content during the layer tree automatic reorganization. The fifth adaptation module is configured to automatically generate test cases covering multiple adaptation scenarios based on the adaptation results after the layer tree automatic reorganization and the mapping rule library through a rule engine.
9. A computer device, comprising: The computer program is stored in the memory and executed on the processor to implement the PSD layer intelligent adaptation method according to any one of claims 1-7. The computer program is stored in the memory and executed on the processor to implement the PSD layer intelligent adaptation method according to any one of claims 1-7.
10. A computer-readable storage medium, characterized in that,