Component processing method, apparatus, device, and storage medium

Abstract

The embodiment of the application discloses a kind of component processing method, device, equipment and storage medium, applicable to computer technology field, the method comprises: obtaining component image, component image is the image representation of first component to be generated;Component image is identified to image, and the mark-up language information of first component is determined according to image identification result;Obtain the data structure information of first component, and the rendering tree corresponding to first component is generated according to mark-up language information and the data structure information of first component;The data structure information of first component is used to configure the style and data content of first component;According to rendering tree, component rendering is obtained first component.Using the embodiment of the application, the complexity of component rendering generation can be reduced, the flexibility and efficiency of component rendering generation are improved, and the applicability is high.

Description

Technical Field

[0001] This application relates to the field of computer technology, and in particular to a component processing method, apparatus, device, and storage medium. Background Technology

[0002] In current software development and deployment processes, component-based solutions are widely adopted to improve code reusability and development efficiency. However, traditional component rendering and display solutions have many problems in practical applications. For example, when adding a new component, it is often necessary to rearrange the component protocol from the perspective of structure and style, and then release the component and display it by releasing a new version. These problems affect the efficiency of component rendering and display and increase complexity. Summary of the Invention

[0003] This application provides a component processing method, apparatus, device, and storage medium, which can reduce the complexity of component rendering and improve the flexibility and efficiency of component rendering and has high applicability.

[0004] On one hand, embodiments of this application provide a component processing method, the method comprising: Obtain a component image, wherein the component image is a graphical representation of the first component to be generated; The component image is subjected to image recognition, and the markup language information of the first component is determined based on the image recognition result; Obtain the data structure information of the first component, and generate a rendering tree corresponding to the first component based on the markup language information and the data structure information of the first component; the data structure information of the first component is used to configure the style and data content of the first component; The first component is obtained by rendering the component based on the rendering tree.

[0005] On the other hand, embodiments of this application provide a component processing apparatus, the apparatus comprising: The image acquisition module is used to acquire component images, wherein the component images are graphical representations of the first component to be generated; An image recognition module is used to perform image recognition on the component image and determine the markup language information of the first component based on the image recognition result; The data processing module is used to obtain the data structure information of the first component, and generate a rendering tree corresponding to the first component based on the markup language information and the data structure information of the first component; the data structure information of the first component is used to configure the style and data content of the first component. The component rendering module is used to render the first component based on the rendering tree.

[0006] On the other hand, embodiments of this application provide an electronic device, including a processor and a memory, which are interconnected; The memory is used to store computer programs; The processor is used to execute the component processing method provided in the embodiments of this application when the computer program is invoked.

[0007] On the other hand, embodiments of this application provide a computer-readable storage medium storing a computer program that is executed by a processor to implement the component processing method provided in embodiments of this application.

[0008] On the other hand, embodiments of this application provide a computer program product, which includes a computer program that, when executed by a processor, implements the component processing method provided in embodiments of this application.

[0009] In this embodiment, the rendering tree is automatically generated by the markup language information and data structure information obtained through image recognition, realizing the dynamic recognition and rendering of components. When adding a new component, there is no need to perform complex protocol alignment and page version upgrades. Only the component image and data structure information need to be determined, thereby reducing the complexity of adding and updating components and improving the efficiency of component rendering and display. Attached Figure Description

[0010] 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.

[0011] Figure 1 This is a schematic diagram illustrating the principle of the component processing method provided in the embodiments of this application; Figure 2 This is a flowchart illustrating the component processing method provided in an embodiment of this application; Figure 3 This is a schematic diagram of a scenario for determining markup language information provided in an embodiment of this application; Figure 4 This is a scene diagram illustrating the determination of the rendering tree provided in an embodiment of this application; Figure 5 This is a schematic diagram of a scenario for determining a node tree provided in an embodiment of this application; Figure 6a This is one of the schematic diagrams of data configuration information provided in the embodiments of this application; Figure 6b This is a second schematic diagram of the data configuration information provided in the embodiments of this application; Figure 6c This is the third schematic diagram of the data configuration information provided in the embodiments of this application; Figure 7 This is a schematic diagram of the data processing flow provided in the embodiments of this application; Figure 8 This is a schematic diagram of the component structure provided in the embodiments of this application; Figure 9 This is a schematic diagram of the components provided in the embodiments of this application; Figure 10 This is a schematic diagram illustrating a scenario for obtaining component configuration information provided in an embodiment of this application; Figure 11 This is one of the flowcharts illustrating the component preview provided in the embodiments of this application; Figure 12 This is the second flowchart illustrating the component preview provided in the embodiments of this application; Figure 13 This is a schematic diagram of the component processing device provided in the embodiments of this application; Figure 14 This is a schematic diagram of the structure of the electronic device provided in the embodiments of this application. Detailed Implementation

[0012] The technical solutions of the embodiments of this application will be clearly and completely described below with reference to the accompanying drawings. Obviously, the described embodiments are only some embodiments of this application, and not all embodiments. Based on the embodiments of this application, all other embodiments obtained by those skilled in the art without creative effort are within the scope of protection of this application.

[0013] This application provides a component processing method that can generate and preview specific components individually, which helps improve the efficiency of component generation and display.

[0014] join Figure 1 , Figure 1 This is a schematic diagram illustrating the principle of the component processing method provided in the embodiments of this application. For example... Figure 1 As shown, when it is necessary to generate the first component, the electronic device 10 can acquire the component image of the first component, that is, acquire the image representation of the first component. Further, the electronic device 10 can recognize the component image, determine the markup language information of the first component based on the image recognition result, and acquire the data structure information of the first component, and then generate the rendering tree corresponding to the first component based on the markup language information and the data structure information of the first component.

[0015] The process of determining markup language information and the process of obtaining data structure information can be executed simultaneously or in any order, without any restrictions.

[0016] The data structure information of the first component is used to describe the style and data content of the first component, and the markup language information of the first component is used to describe the style of each component element of the first component and the structural relationship between each component element.

[0017] The rendering tree corresponding to the first component is the object directly manipulated by the rendering engine, including all visible component elements of the first component.

[0018] Based on this, the electronic device 10 can render components according to the rendering tree to obtain the first component, and further display the first component.

[0019] For example, the first component rendered and displayed by the electronic device 10 can be as follows: Figure 1 As shown, the electronic device displays the first component on a website page (such as a video website). The first component can display thumbnails and titles of multiple popular videos (such as "Zhang San's Past" and "Animal World") through different sub-cards. Users can enter the video playback page by clicking on the card and then watch the corresponding popular video.

[0020] The component processing method provided in this application embodiment can be executed independently by the electronic device 10. For example, if the electronic device 10 is a terminal device with display function, the electronic device 10 can generate and display the first component based on the above method. Alternatively, the component processing method provided in this application embodiment can be jointly executed by the electronic device 10 and the display device. For example, if the electronic device 10 is a server and the display device is a monitor, the electronic device 10 performs component rendering based on the above method, and the display device displays the first component.

[0021] Among them, the server can be an independent physical server, such as a component backend server or a website backend server, or a server cluster or distributed system composed of multiple physical servers. It can also be a cloud server that provides basic cloud computing services such as cloud services, cloud databases, cloud computing, cloud functions, cloud storage, network services, cloud communication, middleware services, domain name services, security services, CDN, and big data and artificial intelligence platforms.

[0022] The terminal device can be a smartphone, tablet, laptop, desktop computer, smartwatch, vehicle terminal, aircraft, smart home appliance (such as smart TV) or wearable device, etc.

[0023] See Figure 2 , Figure 2 This is a flowchart illustrating the data processing method provided in an embodiment of this application. Figure 2 As shown, the data processing method provided in this application embodiment can be described using a terminal device as an example. The method may include the following steps: S21, Obtain component image.

[0024] In some embodiments, the component image is a graphical representation of the first component to be generated. In other words, when it is necessary to generate and display the first component, the component image of the first component can be obtained first.

[0025] Specifically, when obtaining the component image of the first component, the design image of the first component can be captured by a screenshot tool, or the design image of the first component can be obtained by exporting it from the component design software, or the design image of the first component can be obtained from the component design backend through the API interface, and the design image of the first component can be determined as the component image of the first component.

[0026] Optionally, the image of the relevant object can be obtained through the component drawing page, and the obtained image can be determined as the component image of the first component.

[0027] Optionally, when obtaining the component image of the first component, a first prompt message may also be determined, which includes descriptive information related to the first component.

[0028] The first prompt information is used to instruct the image generation model to generate a component image of the first component.

[0029] Based on this, the first prompt information can be input into the image generation model to obtain the component image of the first component generated by the image generation model.

[0030] The descriptive information related to the first component may include, but is not limited to, information describing the component style, component elements, data content corresponding to component elements, structural relationships between component elements, component type, component function, appearance features, and component attributes. The specific information can be determined based on the actual application scenario requirements and is not limited here.

[0031] For example, the descriptive information related to the first component can be used to describe the main function or purpose of the first component, to describe the appearance characteristics of the first component (such as shape, color, material, etc.), to describe the size and proportion of each component element of the first component, to describe the environment or background of the first component (the scenario in which it may be installed or used), to describe the overall style of the first component (such as realistic, cartoon, science fiction, etc.), and to describe the resolution, size, and format requirements of the first component, etc.

[0032] The image generation model mentioned above can be a trained large language model, a generative adversarial network (GAN), or other deep learning models. The specific model can be determined based on the actual application scenario requirements and is not limited here.

[0033] Image generation models can quickly and accurately generate component images that meet the needs of real-world scenarios, reducing design costs and time and improving efficiency in image acquisition. By providing initial prompts, the image generation model can automatically generate component images that meet requirements, reducing the complexity of manual design and improving the automation level of image generation. Furthermore, the model can generate component images in various styles (such as realistic, cartoon, and science fiction) based on different descriptive information, satisfying the needs of different application scenarios and enhancing the diversity and adaptability of components.

[0034] S22, perform image recognition on the component image, and determine the markup language information of the first component based on the image recognition result.

[0035] In some feasible implementations, markup language information is used to provide a structured representation of the first component, including but not limited to Hyper Text Markup Language (HTML), Extensible Markup Language (XML), or other markup languages ​​based on XML or HTML, such as Extensible Hyper Text Markup Language (XHTML), etc., without limitation.

[0036] Specifically, when performing image recognition on component images, deep learning models (such as YOLO and SSD) can be used to perform image recognition on the component images to obtain image recognition results. Alternatively, template matching technology can be used to match the component images with different component template images, and the image recognition result can be determined based on the matched component template images. Or, optical character recognition (OCR) technology can be used to perform image recognition on the component images to obtain image recognition results.

[0037] The image recognition results of the component images can include one or more of the following: component type, component attributes, structural relationships between various component elements, and component style. The specific details can be determined based on the actual application scenario requirements and are not limited here.

[0038] The component type can represent the functional type of a component, or its display type (such as a text box, image, button, or link). Component properties represent the component's text label, default value (such as the default value for a text box), component identifier, etc. The structural relationships between component elements represent the hierarchical relationships between the various component elements, such as which components are child components and the layout relationships between child components.

[0039] In particular, when performing image recognition on component images, key areas of the component images can be labeled, such as image areas and text areas, which helps to improve the accuracy of image recognition.

[0040] Optionally, when determining the markup language information of the first component based on the image recognition results, the style feature information of the first component and the structural relationships between the various component elements in the first component can be determined based on the image recognition results.

[0041] The structural relationships between the component elements in the first component are used to represent the hierarchical relationships between them. Examples include the relationship between parent and child elements (if one element directly contains another, the former is called the parent element of the latter, and the latter is the child element of the former), the relationship between sibling elements (if two elements share a common parent element, they are called sibling elements), the stacking context relationship, and the stacking hierarchy relationship (within the same stacking context, component elements are ordered according to their stacking hierarchy), etc. These can be determined based on the actual application scenario requirements and are not limited here.

[0042] The component elements in the first component include, but are not limited to, text elements, image elements, animation elements, audio elements, video elements, hyperlinks, form elements, button elements, etc. The specific elements can be determined based on the actual application scenario requirements and are not limited here.

[0043] Text elements can include various forms such as headings, paragraphs, and lists, and can have different fonts, sizes, colors, and other attributes. Image elements can be photos, icons, charts, etc. Animation elements can display content through moving images or frames in sequence. Audio elements can add sound effects to web pages. Video elements can enrich the presentation of information on a web page by playing video content. Hyperlinks are used to connect different web pages or different parts of a web page. Form elements can include text boxes, password boxes, radio buttons, checkboxes, drop-down lists, submit buttons, etc. Button elements can be used to trigger specific actions or events, such as submitting a form or opening a link; buttons can be text buttons, image buttons, or icon buttons.

[0044] The style features of the first component include, but are not limited to, the size (height and width), position, color (background color, border color, text color), font format (font type, size, style), border style and background, layout and alignment of each component element.

[0045] like Figure 3 As shown, after determining the component image for the first component used to display popular movies and TV series, key areas of the component image can be annotated, such as annotating... Figure 3The text and image regions in the component image shown are used to improve the accuracy of image recognition. For example, the areas containing "Hot Broadcast," "Movie," and "TV Series" in the component image are labeled as text regions, while the areas containing the characters in TV series and movies are labeled as image regions.

[0046] Furthermore, after labeling the key regions of the component image, the component image can be image recognized using a deep learning model combined with OCR technology to obtain the image recognition result. Based on the image recognition result, the XML information of the first component can be determined to describe the structural information of each component element of the first component.

[0047] Determining the markup language information of the first component through image recognition results can improve the accuracy and completeness of the markup language information, providing a reliable foundation for the subsequent generation of the rendering tree. The markup language information can accurately describe the structural information between the various component elements in the first component, and it also facilitates the rapid parsing and recognition of the structural layout information of the first component by relevant devices, thereby improving the generation efficiency of the first component.

[0048] S23, obtain the data structure information of the first component, and generate the rendering tree corresponding to the first component based on the markup language information and the data structure information of the first component.

[0049] In some feasible implementations, the data structure information of the first component is used to configure the style and data content of the first component.

[0050] In other words, the data structure information of the first component is used to configure the identifier, component type, sub-component related information, dynamic style configuration information, container style configuration information, and data content involved in the component elements, etc. It does not focus on the structural information between the various component elements of the first component, that is, the data structure information of the first component does not need to configure the hierarchical relationship between the various component elements of the first component.

[0051] It should be noted that the process of obtaining the data structure information of the first component and the process of determining the markup language information in step S22 can be executed simultaneously or in any order, without any restriction.

[0052] Optionally, the data structure information of the first component may include at least one of the following: The component identifier of the first component; The template type of the first component; The data content associated with the first component; The component identifier of the child component of the first component; Dynamic style configuration information for the first component; The container style configuration information for the first component.

[0053] The component identifier of the first component is a unique identifier for the component, used to uniquely identify the component in a webpage or application. It can be a simple string or number, or other unique identifier, without any restrictions.

[0054] The template type defines how the first component is presented or its layout structure. For example, a component might be a button, a card, a dialog box, or a horizontal or vertical poster; the template type determines the basic structure of the component.

[0055] The component identifier of a subcomponent specifies other components contained within it, such as sub-cards. Furthermore, each subcomponent also has its own configuration information, including component identifier, template type, etc.

[0056] The data content associated with the first component refers to the text, images, or other media content displayed within the component.

[0057] The dynamic style configuration information of the first component is the style of the component configured according to specific conditions, such as the setting of attributes such as color, font size, margin, and border.

[0058] The container style configuration information of the first component defines the style of the outer container of the component, including the component's size (width and height), background color, border, padding, and layout method (such as flex layout, grid layout), etc.

[0059] As an example, the first component is a card component, and the data structure information of the first component can be as follows: message Card { string id = 1; string type = 2; repeated Card children_list = 3; string card_contents = 4; string dynamic_style_index = 5; StyleContainer style_container = 6; } message StyleContainer{ repeated line_size line_info = 1; string background_pic = 2; int title_show_model = 3; map<string, string> card_style_info = 4; } The `id` field is used to configure the unique identifier of the first component within the page, used to find the card component within the corresponding page. The value of this field is the component identifier of the first component. The `type` field is used to configure the template type corresponding to the first component, that is, to identify the function or style category of the first component. Different values ​​of this field identify different template types. The `repeated Card children_list` field is used to configure the child components (child cards) of the first component. It is configured in the form of a list and can be a repeated list. The `repeated` keyword indicates that a first component can include multiple child components, thereby building a tree-structured component layout. The `card_contents` field is used to configure the data content associated with the first component (card data content). This data content is usually the specific information seen on the page, such as text, images, or other display content. Different values ​​of this field are used to configure different data content. The `dynamic_style_index` field is used to configure the dynamic style of the first component. Different values ​​of this field correspond to different dynamic style configuration indices. The `style_container` field of `StyleContainer` is used to configure the container style for the first component. The `StyleContainer` field defines the style and layout information of the first component. Specifically, it uses repeated `line_size` and `line_info` fields to configure information related to line size, determining the display characteristics of the lines in the layout (such as margins and spacing). The `string background_pic` field configures the background image for the first component, setting a visual background. The `int title_show_model` field configures the title's display mode, indicating the title's style or display method. A map is used...<string, string> The `card_style_info` field configures the style indexes for different component types in the first component.

[0060] The data structure information of the first component can be pre-configured or generated based on at least one of the markup language information of the first component and / or the component image.

[0061] After determining the markup language information of the first component, this information can be parsed. The component elements and attributes involved in the markup language information are mapped to the corresponding configuration fields in the data structure information template. After deleting unused configuration fields, the data structure information of the first component is generated based on the final data structure information template. Specifically, a markup language parser can be used to parse the markup language document and, according to the mapping rules between component elements and configuration fields, map the component elements and attributes to the corresponding configuration fields. Then, after obtaining the values ​​of each configuration field, the data structure information is obtained.

[0062] Alternatively, when determining the data structure information of the first component, the style feature information can be input into the pre-trained large language model based on the style feature information in the image recognition results of the component image, and the large language model can generate the data structure information of the first component.

[0063] Alternatively, the relevant configuration information for the first component can be obtained through the component configuration page, and then the relevant configuration information for the first component can be converted into the data structure information of the first component.

[0064] In some feasible implementations, when generating the rendering tree of the first component based on its data structure information and markup language information, a template engine can be used to construct the rendering tree based on the markup language information and data structure information. Specifically, in the rendering template, a specific syntax (such as Vue's template syntax, React's JSX, etc.) is used to describe the component's structure and style.

[0065] Specifically, the markup language information and data structure information of the first component can be added to the corresponding position of the rendering template, and then the template engine can be used to render the template with the bound markup language information and data structure information into an actual XML or HTML structure, thereby obtaining the first component.

[0066] Optionally, when generating the rendering tree corresponding to the first component based on the data structure information and markup language information of the first component, the node tree corresponding to the first component can be determined first based on the markup language information and the data structure of the first component, and then the rendering tree corresponding to the first component can be generated based on the node tree.

[0067] The node tree is used to describe the data content associated with the first component and the structural relationships between the various component elements of the first component.

[0068] In other words, the node tree corresponding to the first component includes not only the information described by the markup language information of the first component (such as the structural relationship between component elements and the style information of the first component), but also the data content associated with the first component.

[0069] Among them, the node tree can be a Document Object Model (DOM) tree.

[0070] In this embodiment, the component's node tree is an object model that represents the component's content in a tree structure. It defines the component's structure, style, and content, organizing the various elements, text, and attributes within the component into a structure that can be accessed and manipulated by a programming language (typically JavaScript). Each element in the component can be viewed as a node in the node tree, and the nodes in the node tree are the object representation of the component. Nodes in the node tree are of various types, including element nodes, text nodes, attribute nodes, and document nodes. Among these, element nodes are one of the basic components constituting the component, and can represent tags in markup language information (HTML or XML).

[0071] In this node tree, the nodes are organized hierarchically to form a tree structure. Each node can have multiple child nodes, and each child node has a parent node. This hierarchical relationship allows for a structured representation of the structural relationships between the various component elements, and can represent the values, attributes, styles, and other information of component elements through the node hierarchy.

[0072] like Figure 4 As shown, Figure 4 This is a schematic diagram of the scene for determining the rendering tree provided in an embodiment of this application. After determining the node tree, iterates from the root node of the node tree, recursively visiting each node. For each node in the node tree, it is determined whether the node needs to be rendered when it is reached. During the traversal, nodes in the node tree that do not need to be rendered are filtered out. For each node in the node tree that needs to be rendered, the final Cascading Style Sheets (CSS) style of the node is determined, and the determined CSS style is applied to the node.

[0073] For each node in the node tree that needs to be rendered, a corresponding render object is created. This render object is a visual object with geometric and style information, which determines how the node is displayed on the screen. After all render objects are created, the browser organizes all render objects into a render tree according to the structure of the node tree. That is, the render tree only includes the data content that needs to be displayed on the page. The components are rendered through the render tree to obtain the components displayed on the page.

[0074] For example, if the first component is used to display popular movies and TV series, the rendering tree includes the data content that needs to be displayed on the page, such as the "Hot Videos" text indicating that the video and TV series are popular, movie images and their text descriptions, and TV series images and their text descriptions. Therefore, after the component is rendered according to the rendering tree, the first component ultimately displayed on the page is... Figure 4 The first component shown.

[0075] In some feasible implementations, when determining the node tree corresponding to the first component based on the markup language information and data structure information of the first component, the markup language information can be represented in a tree structure to obtain a tag tree.

[0076] The tag tree is the parsing result of markup language information. It is a tree-like data structure in which each node represents a markup language tag (such as an XML tag). Each node in the tag tree includes the tag name, attributes, and child nodes. The nodes are connected in a hierarchical structure through parent-child relationships. Each node and the hierarchical structure of the tag tree can be obtained by isomorphically parsing the markup language information.

[0077] When constructing the tag tree, markup language information is read line by line, tags and attributes are identified, and a node object is created for each tag. Further, the nesting relationship (i.e., hierarchical structure) of each node object is determined based on the markup language information, and the node objects are arranged into a tree structure to obtain the tag tree of the first component.

[0078] Furthermore, after obtaining the tag tree of the first component, or simultaneously with determining the tag tree of the first component, or before determining the tag tree of the first component, the various data contents associated with the first component can be obtained. Then, after obtaining the tag tree of the first component and obtaining the various data contents associated with the first component, according to the data structure information of the first component, the various data contents associated with the first component are added to the corresponding nodes in the tag tree, thus obtaining the node tree corresponding to the first component.

[0079] In other words, first, a document node of the node tree is created. Then, starting from the root node of the tag tree, each node of the tag tree is recursively traversed and converted into a node in the node tree. The nodes of the node tree are connected according to the structural information of each node in the tag tree. Thus, according to the data structure information of the first component, the data content associated with each converted node is added to that node to obtain the final node tree.

[0080] In this embodiment, the tag tree is a static tree structure generated based on markup language information. Nodes describe the basic structure and style attributes of components, but do not include business logic or data content corresponding to each component element. The node tree is a dynamic tree structure on top of the tag tree, incorporating data content and logic. The rendering tree is a tree structure composed of rendering objects generated based on the node tree; it is a concrete instance responsible for rendering and interaction.

[0081] Based on the above implementation method, markup language information and data structure information can be effectively combined to generate a node tree containing complete data content and style, providing a rich information foundation for subsequent rendering.

[0082] Combination Figure 5 , Figure 5 This is a schematic diagram of a scenario for determining a node tree provided in an embodiment of this application. When acquiring the various data contents associated with the first component, the data configuration information of the first component can be obtained. The data configuration information of the first component includes the data source and / or data processing method of each data content associated with the first component. Based on this, the corresponding data content can be acquired according to the data source. For each data content, the data content can be processed according to the corresponding data processing method to obtain processed data content. Then, each processed data content is added to the corresponding node in the tag tree to obtain the node tree corresponding to the first component.

[0083] The data configuration information of the first component includes the data source of the data content required by each component element and / or the data processing method of the data content required by each component element.

[0084] The data configuration information of the first component can associate component elements with the data source and / or data processing method of the data content through different fields.

[0085] As an example, such as Figure 6a As shown, Figure 6a This is one of the schematic diagrams illustrating the data configuration information provided in the embodiments of this application. The data configuration information of the first component may include... Figure 6a The data content configuration table shown is as follows: Figure 6a The configuration table shown defines the data source and processing method for different fields in the component, and different fields correspond to different component elements of the first component.

[0086] Here, "fields" represent the data items (component elements) that need to be configured in the first component. The title item is represented by the title field, the score item by the score field, and the image item by the picture field.

[0087] Here, "Data Source" indicates the source of the data content corresponding to the field; a "union" field indicates data from multiple data sources, which can be replaced with a specific data source. "Operational Configuration" indicates that the data content corresponding to this field is configured by operations personnel, and it can also be replaced with a specific data source.

[0088] Among them, the processing method indicates the data processing method of the data content corresponding to the field. Pass-through means that the data content is passed through directly without any additional processing. Rounding means that the data content needs to be rounded. Method A is the preset processing method. If it can be configured by the operations team, it means that the data content will preferentially use the data processing method configured by the operations team.

[0089] Optionally, the data configuration information in the first component also includes data source configuration information. The data source configuration information is used to configure the attribute information of the data content, including but not limited to data type, identification information, and character type.

[0090] As an example, such as Figure 6b As shown, Figure 6b This is a second schematic diagram of the data configuration information provided in the embodiments of this application. The data configuration information of the first component may also include... Figure 6b The data source configuration information shown is used to configure the attribute information of data content from multiple data sources (the data source is a union field).

[0091] Here, "field" represents the specific name of the data content in the data source, such as title, score, and different versions of images (e.g., horizontal new_pic_hz or vertical new_pic_vt). Media asset type indicates the data type of the data content; for example, the cid field indicates that the data content is a video album identifier, and the vid field indicates that the data content is an episode identifier. "tab_id" represents the unique identifier of the data source, and the "type" field indicates the character type of the data content, such as string or float.

[0092] As an example, such as Figure 6c As shown, Figure 6c This is the third schematic diagram of the data configuration information provided in the embodiments of this application. The data source configuration information of the first component can also be obtained through... Figure 6c The configuration table shown configures the data attributes of the data content configured by the operators, such as data type, identification information, and character type. For example... Figure 6c The size of the image will be configured by the operations staff.

[0093] After obtaining the data configuration information of the first component, the process of acquiring and processing the data content can be carried out simultaneously with the process of determining the node tree. For example, when adding data content to a node in the tag tree, the data content can be acquired and processed according to the data configuration information, and then the processed data content can be added to the corresponding node. Alternatively, the data content can be acquired and processed first according to the data configuration information of the first component, and then the processed data content can be added to the corresponding node in the tag tree, ultimately obtaining the node tree.

[0094] like Figure 7 As shown, Figure 7 This is a schematic diagram of the data processing flow provided in an embodiment of this application, which may specifically include the following steps: S701, read data configuration information.

[0095] After obtaining the data configuration information of the first component, the data configuration information can be read and parsed.

[0096] S702, determine the data content to be acquired, as well as the data source and data processing method.

[0097] After parsing the data configuration information, the data content to be acquired, as well as the corresponding data source and data processing method, can be determined based on the parsing results of the data content configuration in the data configuration information.

[0098] Optionally, the data content configuration can be as follows: Figure 6a The configuration method shown allows you to determine the data content to be acquired by using different fields in the data content configuration, and adaptively determine the corresponding data source and data processing method.

[0099] S703 reads different data source configurations.

[0100] After determining the data source corresponding to the data content, different data source configurations can be read from the data configuration information.

[0101] For each piece of data, the attribute information of the data content can be determined according to the data source configuration corresponding to that data content in the data configuration information, such as the version, data type, identifier, and character type of each piece of data.

[0102] The data source configuration can be as follows: Figure 6b Configure it as shown.

[0103] The reading of the data source configurations for each data item can be performed simultaneously or sequentially. In the case of sequential reading, the order in which the configuration information of different data sources is read can be determined according to actual needs and is not restricted here.

[0104] S704, retrieve the corresponding data content.

[0105] After determining the attribute information of each data item, the data content that matches the attribute information of that data item can be obtained based on the data source corresponding to each data item.

[0106] The acquisition of each data item can be carried out simultaneously or sequentially. In the case of sequential acquisition, the order of acquisition of each data item can be determined according to actual needs and is not restricted here.

[0107] S705 processes the corresponding data content according to the data processing method.

[0108] After acquiring all data items, each data item can be processed according to the data processing method determined in S702, such as pass-through processing, rounding processing, or other data processing methods.

[0109] The processing of each data item can be carried out simultaneously or sequentially. In the case of sequential processing, the order of processing each data item can be determined according to actual needs and is not restricted here.

[0110] based on Figure 7 After obtaining the processed data as shown, the final node tree can be constructed based on the processed data and the label tree.

[0111] In this embodiment, a node tree is generated by combining markup language information with data structure information. The node tree contains not only the structural information of components but also their data content and style information, providing comprehensive support for the generation of the rendering tree. When generating the rendering tree, filtering out nodes that do not need to be rendered and applying the final CSS styles to the nodes that do need to be rendered effectively reduces redundant operations during the rendering process and improves rendering efficiency.

[0112] S24, Render the component according to the rendering tree to obtain the first component.

[0113] In some feasible implementations, after obtaining the rendering tree of the first component, the component can be rendered based on the rendering tree to obtain the first component. The rendering tree, also known as the view tree, contains only the nodes that need to be rendered and their style information, and is used for page layout and interface drawing.

[0114] Optionally, after the first component is rendered, it can be displayed on the corresponding page, such as displaying the first component for showcasing different TV series on the homepage of a video application.

[0115] The component display method provided in this application achieves efficient component generation and rendering through multiple steps, including image generation, image recognition, markup language information generation, and rendering tree generation. This method not only improves the automation level and efficiency of component generation but also ensures the accuracy and completeness of the generated components through multi-technology fusion and structured representation. Furthermore, this method supports the generation and rendering of complex components, is suitable for various application scenarios, and has broad application prospects.

[0116] On the other hand, in traditional component rendering and display processes, a complete component protocol usually needs to be built all at once. This protocol not only includes the component's style information and data content, but also involves the hierarchical structure of the elements within the component. For example, in Figure 8 The component structure shown requires a four-layer protocol to define. The first layer (Line) is the outermost division, limiting the line height. The second layer (Component) further divides the area defined by Line into components. The third layer (Grid) further divides the area defined by the second layer, allowing for finer organization and positioning of elements within the components. The fourth layer (Item) uses each focusable element as the finest level, Item. However, this approach requires multi-party coordination to align protocols and often necessitates version upgrades. In scenarios where client-side upgrades are slow, the upgrade cycle is lengthy, leading to inefficient deployment of new components. Furthermore, adding new components requires close collaboration between the front-end and back-end, necessitating a new version release for support. This lack of flexibility and inability to implement configurable operations further reduces development efficiency.

[0117] For example Figure 9 As shown, Figure 9 This is a schematic diagram of the components provided in an embodiment of this application. Figure 9 In the paid components shown, the item style displayed for the price packages is further subdivided into drawing elements. For example, the Chinese text "SVIP 39 yuan, Non-SVIP 69 yuan" in the figure requires the corresponding component protocol to include not only text content, line height, text color, font, and background, but also protocol information for different levels of components. The component processing method provided in this application only requires markup language information and data structure information for configuring the component's style and data content to render and display the component, reducing the complexity of adding and updating components. It can separate component style and data content from structural information, eliminating the need for backend development of style or layout structure information, thus reducing the coupling between the frontend and backend. This makes frontend and backend development and maintenance more independent and efficient, improving the system's maintainability and scalability.

[0118] The component processing method provided in this application embodiment can not only render and display components, but also preview components.

[0119] Specifically, in response to a preview operation for the second component, the configuration operation for the second component can be obtained through the preview configuration page and / or configuration management page, and the component configuration information corresponding to the configuration operation can be determined.

[0120] The second component can be the first component or other components. The second component can be a component that has been rendered and displayed or a component that has not been rendered and displayed. The specific requirements can be determined based on the actual application scenario. No restrictions are imposed here.

[0121] The preview operation for the second component can be triggered by the relevant touch button on the page.

[0122] The preview configuration page provides configuration options or configuration information input areas for the second component. Configuration operations for the second component can be selection operations for configuration options on the preview configuration page, and component configuration information can be the configuration options selected during the selection operation. Alternatively, configuration operations for the second component can be input operations in the configuration information input area of ​​the preview configuration page, and component configuration information can be the input information obtained through the configuration information input area.

[0123] The configuration management page may include touch buttons that trigger preview operations, as well as the aforementioned configuration options and / or configuration information input areas.

[0124] The component configuration information of the second component is used to configure any one or more of the following: the style of the second component, the associated data content, the data source and data processing method of the associated data content, the structural information between the various component elements of the second component, the template type, the dynamic style configuration information, and the container configuration information.

[0125] Furthermore, after obtaining the component configuration information, the data structure information of the second component can be determined based on the component configuration information.

[0126] The data structure information of the second component describes its style, associated data content, structural information between its various component elements, and data configuration information. In other words, the data structure information of the second component can be considered a combination of the data configuration information and data structure information of the first component; that is, the data structure information of the second component includes all the configuration information required to generate the second component.

[0127] Optionally, the component configuration information of the second component also includes configuration information related to the container (such as background, title, etc.), configuration information related to the child components (child component type, child component style), component functions, component type, and any other information related to the component. The data structure information of the second component is used to describe all the content of the second component and is used for the drawing of the second component.

[0128] Based on this, after obtaining the data structure information of the second component, the second component can be displayed on the component preview page according to the data structure information.

[0129] The process of displaying the second component on the component preview page can be achieved through the same steps as the rendering and display process of the first component, or it can be achieved through an H5-based component or framework, based on the data structure information of the second component, to realize the online drawing and preview of the second component, or it can be achieved through an Android emulator based on the data structure information of the second component. The specific method can be determined based on the actual application scenario requirements, and there are no restrictions here.

[0130] See Figure 10 , Figure 10 This is a schematic diagram illustrating a scenario for obtaining component configuration information provided in an embodiment of this application. For example... Figure 10 As shown, the configuration management page of the Content Management System (CMS) allows configuration of component types, styles, functionalities, and other related information. Based on the configuration operations performed on the second component, the configuration information of some components can be determined through this page. After receiving the "click online preview" action (preview action), the second component can be further configured through the preview configuration page. This includes configuring the component's style, data source, sub-components, and container. The final component configuration information can be determined through the preview configuration page based on the configuration operations performed on the second component.

[0131] When determining the data structure information of the second component based on the component configuration information, a first request can be sent to the component backend. The first request includes the obtained component configuration information and the page size of the component preview page.

[0132] The first request is used to request the component backend to return the data structure information of the second component that matches the page size.

[0133] Based on this, after determining the component configuration information of the second component, the data structure information of the second component can be obtained from the component backend.

[0134] Optionally, the first request may not include the page size of the component preview page. The page size of the component preview page can be determined by requesting the component backend through the first request, and the data structure information that matches the page size can be determined based on the component configuration information.

[0135] See Figure 11 , Figure 11 This is one of the flowcharts illustrating the component preview process provided in this application embodiment. When previewing a component using an H5-based component or framework, after obtaining the component configuration information of the second component, in response to the preview operation for the second component, a preview request (first request) is sent to the component backend while (or subsequently) launching the H5 page. This preview request includes all the contents of the component configuration information. After receiving the component configuration information of the second component, the component backend assembles the component configuration information into the data structure information of the second component, thereby enabling the H5 page to draw and display the second component based on the data structure information and the data configuration information in the component configuration information. See Figure 12 , Figure 12 This is the second flowchart illustrating the component preview provided in the embodiments of this application. Figure 12 The component preview process shown may include the following steps: S121, Send component configuration information to the preview service.

[0136] When implementing online rendering and previewing of the second component using an Android emulator, configuration operations for the second component can be obtained through a CMS-based preview configuration page, and the component configuration information of the second component can be determined based on these operations. Afterwards, the component configuration information of the second component can be sent to the preview service through the CMS-based preview configuration page.

[0137] S122, pass component configuration information to the component backend.

[0138] Furthermore, after the preview service obtains the component configuration information of the second component, it can directly pass the component configuration information to the component backend, and the component backend can assemble the data structure information according to the component configuration information.

[0139] S123, Assemble data structure information based on component configuration information, and query page size.

[0140] After receiving the component configuration information of the second component, the component backend queries the page size of the component preview page based on the component configuration information and assembles the data structure information of the second component that matches the page size.

[0141] S124, returns data structure information and page dimensions to the preview service.

[0142] After the component backend determines the data structure information of the second component and the page size of the component preview page, it passes the data structure information and page size to the preview service.

[0143] S125 transmits data structure information and page dimensions to the Android emulator.

[0144] After receiving the data structure information of the second component and the page size of the component preview page, the preview service can pass the data structure information and page size to the Android emulator through the Android Debug Bridge (ABD), and the Android emulator will draw the image of the second component based on the data structure information and page size.

[0145] S126, Draw the second component.

[0146] After receiving the data structure information of the second component and the page size of the component preview page, the Android emulator draws the image of the second component based on the data structure information and the page size.

[0147] S127, Return the image of the second component to the preview service.

[0148] After the Android emulator finishes rendering the image, it returns the image of the second component to the preview service.

[0149] S128, return the image of the second component to the CMS.

[0150] After receiving the image of the second component drawn by the Android emulator, the preview service can return the image of the second component to the CMS, which will then display the image of the second component on the component preview page, thus completing the online preview of the second component.

[0151] The preview service and Android emulator can be deployed on the same device or on different devices; there are no restrictions. For example, the preview service and CMS can be deployed on the terminal device, while the Android emulator can be deployed on the server. Figure 12 The component backend in the context provides component processing (such as preview services) for the server. For example, the preview service and Android emulator are deployed on the terminal device, and the CMS is also deployed on the terminal device. The terminal device interacts with the component backend based on the CMS, preview service, and Android emulator to complete the preview process of the second component.

[0152] Optionally, embodiments of this application can also modify existing components. Specifically, in response to a component modification operation for any component, the modification operation for that component can be obtained through the configuration modification page, and the modification configuration information corresponding to the modification operation can be determined. The data structure information of the second component is determined based on the modified configuration information, and then the modified component can be displayed on the component preview page based on the data structure information of the second component.

[0153] The aforementioned component modification operations can be triggered through the relevant touch buttons on the page.

[0154] The Modify Configuration page provides configuration options or configuration information input areas for components. Modification operations for components can be selection operations for configuration options on the Modify Configuration page, and component configuration information can be the configuration options selected during the selection operation. Alternatively, modification operations for components can also be input operations in the configuration information input area of ​​the Modify Configuration page, and component configuration information can be the input information obtained through the configuration information input area.

[0155] The component configuration information determined through the modification operation is the same as the component configuration information of the second component. It is also used to configure any one or more of the following: component style, associated data content, data source and data processing method of associated data content, structural information between various component elements of the component, template type, dynamic style configuration information, container configuration information, etc.

[0156] Furthermore, after determining the component configuration information through modification operations, the modified data structure information can be determined based on the component configuration information. For details, please refer to the process of determining the data structure information of the second component based on the component configuration information of the second component, which will not be elaborated here.

[0157] In addition to rendering and displaying components, the component processing method provided in this application embodiment can also implement a component preview function. This allows users to view the component's style, data content, structure, and other information through the preview function before the component is officially rendered and displayed, thereby enabling adjustments and optimizations in advance.

[0158] See Figure 13 , Figure 13 This is a schematic diagram of the component processing apparatus provided in an embodiment of this application. The component processing apparatus provided in an embodiment of this application includes: Image acquisition module 131 is used to acquire component images, wherein the component images are image representations of the first component to be generated; Image recognition module 132 is used to perform image recognition on the component image and determine the markup language information of the first component based on the image recognition result; The data processing module 133 is used to obtain the data structure information of the first component, and generate a rendering tree corresponding to the first component based on the markup language information and the data structure information of the first component; the data structure information of the first component is used to configure the style and data content of the first component. The component rendering module 134 is used to render the first component based on the rendering tree.

[0159] In some feasible implementations, the image recognition module 132 described above is used for: Based on the image recognition results, determine the style feature information of the first component and the structural information between the component elements in the first component; Based on the structural information and the style feature information, markup language information for the first component is generated.

[0160] In some feasible implementations, the data processing module 133 described above is used for: The node tree corresponding to the first component is determined based on the markup language information and the data structure information of the first component. The node tree is used to describe the data content associated with the first component and the structural relationship between each component element. The rendering tree corresponding to the first component is generated based on the node tree.

[0161] In some feasible implementations, the data processing module 133 described above is used for: The markup language information is represented in a tree structure to obtain a tag tree; Obtain the data content associated with the first component, and add the data content associated with the first component to the corresponding node in the tag tree according to the data structure information of the first component, so as to obtain the node tree corresponding to the first component.

[0162] In some feasible implementations, the data processing module 133 described above is used for: Obtain the data configuration information of the first component, which includes the data source of each data content associated with the first component; Obtain the data content associated with the first component from the data source.

[0163] In some feasible implementations, the data configuration information of the first component also includes the data processing methods for each data content associated with the first component; The aforementioned data processing module 133 is used for: For each data item associated with the first component, the data content is processed according to the corresponding data processing method to obtain the processed data content; Based on the data structure information of the first component, the processed data content is added to the corresponding node in the tag tree to obtain the node tree corresponding to the first component.

[0164] In some feasible implementations, the data processing module 133 described above is used for: In response to a preview operation for the second component, the configuration operation for the second component is obtained through the preview configuration page, and the component configuration information corresponding to the configuration operation is determined. The data structure information of the second component is determined based on the component configuration information. The data structure information of the second component is used to describe the style of the second component, the structural information between the various component elements of the second component, and the data configuration information of the second component. The aforementioned component rendering module 134 is used for: The second component is displayed on the component preview page based on its data structure information.

[0165] In some feasible implementations, the data processing module 133 described above is used for: Send a first request to the component backend. The first request carries the component configuration information and the page size of the component preview page. The first request is used to request the component backend to return the data structure information of the second component that matches the page size. Obtain the data structure information of the second component returned by the backend of the component.

[0166] In some feasible implementations, the image acquisition module 131 described above is used for: Determine the first prompt information, which includes descriptive information related to the first component, and the first prompt information is used to indicate the component image of the first component in the image generation model; The first prompt information is input into the image generation model to obtain the component image of the first component.

[0167] In some feasible implementations, the first component is a card component, and the data structure information of the first component includes at least one of the following: The component identifier of the first component; The template type of the first component; The component identifier of the sub-component of the first component; The data content associated with the first component; The dynamic style configuration information of the first component; The container style configuration information of the first component.

[0168] In specific implementation, the aforementioned component processing device can perform the above-described actions through its built-in functional modules. Figure 2 The implementation methods provided for each step are detailed in the above-mentioned implementation methods, and will not be repeated here.

[0169] See Figure 14 , Figure 14 This is a schematic diagram of the structure of the electronic device provided in an embodiment of this application. For example... Figure 14 As shown, the electronic device 1400 in this embodiment can be Figure 1 The illustrated electronic device 10, taking electronic device 1400 as an example of a terminal device, includes: a processor 1401, a network interface 1404, and a memory 1405. Furthermore, the electronic device 1400 may also include: an object interface 1403, and at least one communication bus 1402. The communication bus 1402 is used to implement communication between these components. The object interface 1403 may include a display screen and a keyboard; optionally, the object interface 1403 may also include a standard wired interface or a wireless interface. The network interface 1404 may optionally include a standard wired interface or a wireless interface (such as a Wi-Fi interface). The memory 1405 may be high-speed RAM or non-volatile memory (NVM), such as at least one disk storage device. Optionally, the memory 1405 may also be at least one storage device located remotely from the aforementioned processor 1401. Figure 14 As shown, the memory 1405, which is a computer-readable storage medium, may include an operating system, a network communication module, an object interface module, and a device control application.

[0170] exist Figure 14 In the illustrated electronic device 1400, the network interface 1404 provides network communication functionality; the object interface 1403 is primarily used to provide an input interface for objects; and the processor 1401 can be used to call the device control application stored in the memory 1405 to achieve: Obtain a component image, wherein the component image is a graphical representation of the first component to be generated; The component image is subjected to image recognition, and the markup language information of the first component is determined based on the image recognition result; Obtain the data structure information of the first component, and generate a rendering tree corresponding to the first component based on the markup language information and the data structure information of the first component; the data structure information of the first component is used to configure the style and data content of the first component; The first component is obtained by rendering the component based on the rendering tree.

[0171] In some feasible implementations, the processor 1401 described above is used for: Based on the image recognition results, determine the style feature information of the first component and the structural information between the component elements in the first component; Based on the structural information and the style feature information, markup language information for the first component is generated.

[0172] In some feasible implementations, the processor 1401 described above is used for: The node tree corresponding to the first component is determined based on the markup language information and the data structure information of the first component. The node tree is used to describe the data content associated with the first component and the structural relationship between each component element. The rendering tree corresponding to the first component is generated based on the node tree.

[0173] In some feasible implementations, the processor 1401 described above is used for: The markup language information is represented in a tree structure to obtain a tag tree; Obtain the data content associated with the first component, and add the data content associated with the first component to the corresponding node in the tag tree according to the data structure information of the first component, so as to obtain the node tree corresponding to the first component.

[0174] In some feasible implementations, the processor 1401 described above is used for: Obtain the data configuration information of the first component, which includes the data source of each data content associated with the first component; Obtain the data content associated with the first component from the data source.

[0175] In some feasible implementations, the data configuration information of the first component also includes the data processing methods for each data content associated with the first component; The processor 1401 described above is used for: For each data item associated with the first component, the data content is processed according to the corresponding data processing method to obtain the processed data content; Based on the data structure information of the first component, the processed data content is added to the corresponding node in the tag tree to obtain the node tree corresponding to the first component.

[0176] In some feasible implementations, the processor 1401 described above is used for: In response to a preview operation for the second component, the configuration operation for the second component is obtained through the preview configuration page, and the component configuration information corresponding to the configuration operation is determined. The data structure information of the second component is determined based on the component configuration information. The data structure information of the second component is used to describe the style of the second component, the structural information between the various component elements of the second component, and the data configuration information of the second component. The second component is displayed on the component preview page based on its data structure information.

[0177] In some feasible implementations, the processor 1401 described above is used for: Send a first request to the component backend. The first request carries the component configuration information and the page size of the component preview page. The first request is used to request the component backend to return the data structure information of the second component that matches the page size. Obtain the data structure information of the second component returned by the backend of the component.

[0178] In some feasible implementations, the processor 1401 described above is used for: Determine the first prompt information, which includes descriptive information related to the first component, and the first prompt information is used to indicate the component image of the first component in the image generation model; The first prompt information is input into the image generation model to obtain the component image of the first component.

[0179] In some feasible implementations, the first component is a card component, and the data structure information of the first component includes at least one of the following: The component identifier of the first component; The template type of the first component; The component identifier of the sub-component of the first component; The data content associated with the first component; The dynamic style configuration information of the first component; The container style configuration information of the first component.

[0180] It should be understood that in some feasible implementations, the processor 1401 described above 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. The general-purpose processor may be a microprocessor or any conventional processor. The memory may include read-only memory and random access memory, and provides instructions and data to the processor. A portion of the memory may also include non-volatile random access memory. For example, the memory may also store device type information.

[0181] In specific implementation, the aforementioned electronic device 1400 can perform the above-described actions through its built-in functional modules. Figure 2 The implementation methods provided for each step are detailed in the above-mentioned implementation methods, and will not be repeated here.

[0182] This application also provides a computer-readable storage medium storing a computer program that is executed by a processor to perform... Figure 2 The methods provided in each step are detailed in the implementation methods provided in the above steps, and will not be repeated here.

[0183] The aforementioned computer-readable storage medium can be an internal storage unit of the component processing apparatus or electronic device provided in any of the foregoing embodiments, such as a hard disk or memory of the electronic device. The computer-readable storage medium can also be an external storage device of the electronic device, such as a plug-in hard disk, smart media card (SMC), secure digital (SD) card, flash card, etc., equipped on the electronic device. The aforementioned computer-readable storage medium can also include magnetic disks, optical disks, read-only memory (ROM), or random access memory (RAM), etc. Furthermore, the computer-readable storage medium can include both internal storage units and external storage devices of the electronic device. The computer-readable storage medium is used to store the computer program and other programs and data required by the electronic device. The computer-readable storage medium can also be used to temporarily store data that has been output or will be output.

[0184] This application provides a computer program product, which includes a computer program that is executed by a processor. Figure 2 The methods provided for each step in the process.

[0185] The terms "first," "second," etc., used in the claims, description, and drawings of this application are used to distinguish different objects, not to describe a specific order. Furthermore, the terms "comprising" and "having," and any variations thereof, are intended to cover non-exclusive inclusion. For example, a process, method, system, product, or electronic device that includes a series of steps or units is not limited to the listed steps or units, but may optionally include steps or units not listed, or may optionally include other steps or units inherent to these processes, methods, products, or electronic devices. References to "embodiment" herein mean that a particular feature, structure, or characteristic described in connection with an embodiment may be included in at least one embodiment of this application. The presentation of this phrase in various places in the specification does not necessarily refer to the same embodiment, nor is it a separate or alternative embodiment mutually exclusive with other embodiments. It will be explicitly and implicitly understood by those skilled in the art that the embodiments described herein can be combined with other embodiments. The term "and / or" as used in this application's description and appended claims refers to any combination of one or more of the associated listed items and all possible combinations, and includes such combinations.

[0186] 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, computer software, or a combination of both. To clearly illustrate the interchangeability of hardware and software, the components and steps of the various examples have been generally described in terms of functionality in the foregoing description. Those skilled in the art can implement the described functions using different methods for each specific application, but such implementations should not be considered beyond the scope of this application.

[0187] The above-disclosed embodiments are merely preferred embodiments of this application and should not be construed as limiting the scope of this application. Therefore, any equivalent variations made in accordance with the claims of this application shall still fall within the scope of this application.

Claims

1. A component processing method, characterized in that, The method includes: Obtain a component image, wherein the component image is a graphical representation of the first component to be generated; The component image is subjected to image recognition, and the markup language information of the first component is determined based on the image recognition result; Obtain the data structure information of the first component, and generate a rendering tree corresponding to the first component based on the markup language information and the data structure information of the first component; the data structure information of the first component is used to configure the style and data content of the first component; The first component is obtained by rendering the component based on the rendering tree.

2. The method according to claim 1, characterized in that, The step of determining the markup language information of the first component based on the image recognition result includes: Based on the image recognition results, determine the style feature information of the first component and the structural information between the component elements in the first component; Based on the structural information and the style feature information, markup language information for the first component is generated.

3. The method according to claim 1 or 2, characterized in that, The step of generating the rendering tree corresponding to the first component based on the markup language information and the data structure information of the first component includes: The node tree corresponding to the first component is determined based on the markup language information and the data structure information of the first component. The node tree is used to describe the data content associated with the first component and the structural relationship between each component element. The rendering tree corresponding to the first component is generated based on the node tree.

4. The method according to claim 3, characterized in that, Determining the node tree corresponding to the first component based on the markup language information and the data structure information of the first component includes: The markup language information is represented in a tree structure to obtain a tag tree; Obtain the data content associated with the first component, and add the data content associated with the first component to the corresponding node in the tag tree according to the data structure information of the first component, so as to obtain the node tree corresponding to the first component.

5. The method according to claim 4, characterized in that, The acquisition of the data associated with the first component includes: Obtain the data configuration information of the first component, which includes the data source of each data content associated with the first component; Obtain the data content associated with the first component from the data source.

6. The method according to claim 5, characterized in that, The data configuration information of the first component also includes the data processing methods for each data item associated with the first component; The step of adding the data content associated with the first component to the corresponding nodes in the tag tree according to the data structure information of the first component, to obtain the node tree corresponding to the first component, includes: For each data item associated with the first component, the data content is processed according to the corresponding data processing method to obtain the processed data content; Based on the data structure information of the first component, the processed data content is added to the corresponding node in the tag tree to obtain the node tree corresponding to the first component.

7. The method according to claim 1, characterized in that, The method further includes: In response to a preview operation for the second component, the configuration operation for the second component is obtained through the preview configuration page, and the component configuration information corresponding to the configuration operation is determined. The data structure information of the second component is determined based on the component configuration information. The data structure information of the second component is used to describe the style of the second component, the structural information between the various component elements of the second component, and the data configuration information of the second component. The second component is displayed on the component preview page based on its data structure information.

8. The method according to claim 7, characterized in that, Determining the data structure information of the second component based on the component configuration information includes: Send a first request to the component backend. The first request carries the component configuration information and the page size of the component preview page. The first request is used to request the component backend to return the data structure information of the second component that matches the page size. Obtain the data structure information of the second component returned by the backend of the component.

9. The method according to claim 1, characterized in that, The acquisition of component images includes: Determine the first prompt information, which includes descriptive information related to the first component, and the first prompt information is used to indicate the component image of the first component in the image generation model; The first prompt information is input into the image generation model to obtain the component image of the first component.

10. The method according to claim 1, characterized in that, The first component is a card component, and the data structure information of the first component includes at least one of the following: The component identifier of the first component; The template type of the first component; The component identifier of the sub-component of the first component; The data content associated with the first component; The dynamic style configuration information of the first component; The container style configuration information of the first component.

11. A component processing apparatus, characterized in that, The device includes: The image acquisition module is used to acquire component images, wherein the component images are graphical representations of the first component to be generated; An image recognition module is used to perform image recognition on the component image and determine the markup language information of the first component based on the image recognition result; The data processing module is used to obtain the data structure information of the first component, and generate a rendering tree corresponding to the first component based on the markup language information and the data structure information of the first component; the data structure information of the first component is used to configure the style and data content of the first component. The component rendering module is used to render the first component based on the rendering tree.

12. An electronic device, characterized in that, It includes a processor and a memory, which are interconnected; The memory is used to store computer programs; The processor is configured to execute the method according to any one of claims 1 to 10 when the computer program is invoked.

13. A computer-readable storage medium, characterized in that, The computer-readable storage medium stores a computer program that is executed by a processor to implement the method of any one of claims 1 to 10.

14. A computer program product, characterized in that, The computer program product includes a computer program that, when executed by a processor, implements the method according to any one of claims 1 to 10.

Images