Intelligent page editing method and system based on component dynamic generation

Abstract

The invention relates to the technical field of configuration editing, in particular to an intelligent page editing method and system based on component dynamic generation, and the method comprises the steps: extracting data binding, event response and rendering rules by analyzing teaching component codes, generating JSON Schema, an event mapping table and a view template, and storing the JSON Schema, the event mapping table and the view template in a database after logic optimization and intelligent completion. And setting priority rules of equipment performance, user intention and domain knowledge, generating a preliminary strategy instruction by utilizing a rule engine in combination with stored data, predicting component combination probability through machine learning, and fusing to generate a final strategy. And generating a DOM tree based on the strategy instruction dynamic loading component, collecting page interaction data and feeding back the page interaction data to the rule engine to form a strategy optimization closed loop. According to the method, dynamic generation and intelligent adaptation of the teaching component are realized, and the flexibility and cross-end adaptation capability of page editing are improved.

Description

Technical Field

[0001] The present invention relates to the technical field of configuration editing, and specifically to an intelligent page editing method and system based on component dynamic generation. Background Art

[0002] With the rapid development of online education, the diverse and personalized requirements of teaching scenarios have put forward higher requirements for page editing technology. The intelligent page editing technology based on component dynamic generation improves the flexibility and development efficiency of the teaching interface through modular design. However, the existing technical solutions still face a series of technical challenges in practical applications:

[0003] First of all, the component dynamic adaptation ability needs to be improved. The current mainstream component libraries are mostly designed based on static functions, and there are certain limitations in dealing with the dynamic requirements of teaching scenarios. For example, in a mathematics course, it is necessary to dynamically update the relevant component content according to the wrong question data of students. However, the existing technology mainly relies on hard-coded logic, which restricts the flexibility of component reuse. When the teaching logic is adjusted, it is often necessary to re-develop components, thus increasing the development and maintenance costs.

[0004] Secondly, the cross-scenario intelligent adaptation mechanism needs to be improved. Although the existing responsive design can achieve basic page layout adaptation, there are still deficiencies in the in-depth matching of device performance and teaching processes. For terminal devices with limited computing resources, there is room for optimization in the component function dynamic degradation mechanism of the existing technology, which may lead to performance fluctuations when complex components are running, affecting the user experience; at the same time, the component combination strategy still relies on empirical configuration in automatically generating adapted pages, and the intelligent orchestration ability for teaching links such as "preview - practice - assessment" needs to be enhanced, thus affecting the utilization efficiency of teaching resources.

[0005] Furthermore, the integration degree of knowledge and technology in the education field is insufficient. The in-depth integration of subject-specific components and the subject knowledge system still needs to be strengthened. Teachers need to take into account both technical operations and teaching content during use, which increases the operation complexity of the tool to a certain extent. In addition, the collection and integration mechanism of component interaction data, such as the operation paths of students' experiments and answering behaviors, is not yet mature, resulting in a lack of sufficient data support for the optimization of teaching strategies and imposing certain restrictions on the deepening of intelligent teaching.

[0006] In order to improve the flexibility and domain adaptability of page editing, an intelligent page editing method and system based on component dynamic generation are proposed. Summary of the Invention

[0007] The purpose of the present invention is to provide an intelligent page editing method and system based on component dynamic generation, so as to improve the flexibility and domain adaptability of page editing. By parsing the teaching component code, data binding, event response, and rendering rules are extracted to generate a JSON Schema, an event mapping table, and a view template, which are stored in the database after logical optimization and intelligent completion. Priority rules for device performance, user intent, and domain knowledge are set, and a rule engine is used to generate preliminary policy instructions in combination with the stored data. The probability of component combination is predicted through machine learning, and the final policy is generated by fusion. Based on the policy instructions, components are dynamically loaded to generate a DOM tree, and page interaction data is collected and fed back to the rule engine to form a policy optimization closed loop, realizing the dynamic generation and intelligent adaptation of teaching components, thereby improving the flexibility of page editing and cross-terminal adaptation ability.

[0008] To achieve the above object, the present invention provides the following technical solutions:

[0009] An intelligent page editing method based on component dynamic generation, comprising:

[0010] Parse the teaching component code, extract teaching data binding information, teaching event response information, and teaching rendering rules, generate a JSON Schema, an event mapping table, and a view template, and save them to the logical metadata database and the view template library through logical optimization and intelligent completion;

[0011] Set priority rules for clarifying the priority order of device performance, user intent, and domain knowledge; define a priority rule engine for generating preliminary policy instructions according to the priority rules, the logical metadata database, and the view template library; use a machine learning algorithm to predict the combined probability distribution of components and generate a component recommendation list; combine the preliminary policy instructions and the component recommendation list to generate a final policy instruction;

[0012] According to the component identification list in the final policy instruction, load the logical metadata database and the view template library, generate component instances, and merge them into a DOM tree;

[0013] Collect the interaction data of the DOM tree to obtain page performance metrics and feedback them to the priority rule engine to optimize the final policy instruction.

[0014] Further, the logical optimization includes data source optimization, event processing logic optimization, and rendering logic optimization; the rendering logic optimization includes: using a reduction algorithm to merge duplicate rendering logics, and using a template inheritance mechanism to remove duplicate UI components.

[0015] Further, the data source optimization includes:

[0016] Static structure aggregation, including: performing structure clustering analysis on data sources according to the field topology structure and type constraints of the JSON Schema, and when the field similarities of more than two data sources exceed a preset threshold, merging them into a unified data interface and generating a standardized data binding configuration item;

[0017] Dynamic dependency merging, including: constructing a dependency relationship graph by tracing the data reference paths between teaching components, and if different teaching components have explicit or implicit dependencies on the same data source, performing a physical merging operation.

[0018] Furthermore, the optimization of the event handling logic includes: constructing an event call relationship graph for parsing the event handling logic in the event mapping table to generate an event trigger relationship graph; according to the event trigger relationship graph, detecting whether different events point to the same API endpoint; if it is detected that more than two events call the same API endpoint, using an event aggregation algorithm to merge the events and storing the unified API endpoint.

[0019] Furthermore, the generation process of the preliminary policy instruction includes:

[0020] Setting device performance rules for collecting the device performance, calculating the device performance level using a weighted scoring algorithm, retrieving a rendering mode that matches the device performance level from the view template library, and generating a rendering mode downgrade instruction;

[0021] Setting user intent rules for collecting the user intent, identifying user demand characteristics, and screening candidate components that meet the user intent and the device performance from the logical meta-database, and generating a functional component append instruction;

[0022] Setting domain knowledge rules for retrieving knowledge graph associated components from the logical meta-database according to the domain knowledge, and generating a domain component binding instruction;

[0023] Stacking the rendering mode downgrade instruction, the functional component append instruction, and the domain component binding instruction according to the priority rules to form an initial instruction;

[0024] For the initial instruction, eliminating conflicting instructions through a weighted decision algorithm to generate the preliminary policy instruction.

[0025] Furthermore, the calculation process of the user demand characteristics includes:

[0026] Obtaining the click coordinates and timestamp sequence of the user in the target component area from the user intent;

[0027] Identifying the aggregation area of the click coordinates through a density clustering algorithm and calculating the clustering center;

[0028] Calculate the weighted sum of the time decay factor and the spatial kernel function based on the time stamp sequence and the clustering center to obtain the component click heat value;

[0029] Use the exponentially weighted moving average method to calculate the idle time of the page block to obtain the cognitive stagnation duration.

[0030] Furthermore, the process of forming the initial instruction includes:

[0031] Adopt a policy instruction stack structure and push the outputs of the device performance rule, the user intention rule, and the domain knowledge rule;

[0032] Execute a policy override mechanism for overriding low-priority rules with high-priority rules;

[0033] Perform policy merging on non-conflicting instructions to generate the initial instruction.

[0034] An intelligent page editing system dynamically generated based on components includes:

[0035] A metadata extraction module that parses the teaching component code, extracts teaching data binding information, teaching event response information, and teaching rendering rules, generates a JSON Schema, an event mapping table, and a view template, and saves them to a logical metadata database and a view template library through logical optimization and intelligent completion;

[0036] A component recommendation strategy generation module that sets priority rules to clarify the priority order of device performance, user intention, and domain knowledge; defines a priority rule engine to generate preliminary policy instructions according to the priority rules, the logical metadata database, and the view template library; uses a machine learning algorithm to predict the combined probability distribution of components to generate a component recommendation list; combines the preliminary policy instructions and the component recommendation list to generate final policy instructions;

[0037] A page generation module that loads the logical metadata database and the view template library according to the component identification list in the final policy instruction, generates component instances, and merges them into a DOM tree; collects the interaction data of the DOM tree to obtain page performance metrics, and feedbacks them to the priority rule engine to optimize the final policy instruction.

[0038] Compared with the prior art, the beneficial effects of the present invention are:

[0039] 1. The present invention parses the teaching component code, extracts data binding, event response, and rendering rules, and generates JSON Schema, an event mapping table, and a view template. By combining logical optimization and intelligent completion strategies, it stores them in the logical meta-database and the view template library, achieving decoupling of component logic and views. In terms of logical optimization, through the template inheritance mechanism and dynamic rendering strategy, it realizes structured management of multi-terminal view templates. According to different teaching requirements and device environments, it can retrieve adapted components from the logical meta-database and load appropriate rendering schemes from the view template library, improving component reusability and reducing repetitive development and maintenance costs.

[0040] 2. The present invention sets priority rules for device performance, user intent, and domain knowledge, uses a priority rule engine to generate preliminary policy instructions, and combines machine learning algorithms to predict the probability distribution of component combinations, optimizing the component recommendation strategy. It can dynamically adjust the component layout and interaction logic of the teaching page according to the user's learning behavior, teaching objectives, and device characteristics. At the same time, combined with the data dependency relationship in the logical meta-database, it automatically filters and adapts components, enhancing the personalized recommendation ability of teaching resources, thereby improving the flexibility of page editing and domain adaptability.

[0041] 3. After generating the final policy instructions, the present invention loads teaching components from the logical meta-database and the view template library according to the component identifier list, dynamically binds data sources and interaction events, and merges them into a DOM tree, thus realizing the automatic generation and intelligent rendering of the teaching page. By collecting the interaction data of the DOM tree in real time, the system can calculate page performance metrics such as component response time and user interaction frequency, and feedback these optimization results to the priority rule engine to dynamically adjust subsequent policy instructions. It can continuously optimize the page loading speed and improve the flexibility of page editing and domain adaptability. BRIEF DESCRIPTION OF THE DRAWINGS

[0042] Figure 1 It is a schematic flow chart of an intelligent page editing method based on dynamic component generation provided by the present invention;

[0043] Figure 2 It is a schematic flow chart of generating preliminary policy instructions provided by the present invention;

[0044] Figure 3 It is a schematic structural diagram of an intelligent page editing system based on dynamic component generation provided by the present invention. DETAILED DESCRIPTION OF THE EMBODIMENTS

[0045] The following will clearly and completely describe the technical solutions in the embodiments of the present invention with reference to the accompanying drawings in the embodiments of the present invention. Obviously, the described embodiments are only a part of the embodiments of the present invention, rather than all embodiments. All other embodiments obtained by those of ordinary skill in the art based on the embodiments of the present invention without creative efforts shall fall within the protection scope of the present invention.

[0046] Please refer to Figures 1 to 3 , the present invention provides an intelligent page editing method and system based on component dynamic generation, and the technical solutions are as follows:

[0047] Embodiment 1:

[0048] Most existing online education platforms rely on static component libraries to build course pages, and there are certain limitations in dynamic content adjustment, personalized learning path configuration, and cross-device adaptation. Static components are difficult to automatically adjust according to subject characteristics, teaching data, and student behavior, with low reusability, resulting in high development and maintenance costs; the interaction logic is implemented through hard coding, and there is a lack of dynamic configuration ability for teaching strategy adjustment; traditional responsive design cannot automatically optimize the layout according to the scenario, and there is a lack of intelligent degradation strategy for low-performance devices, affecting the teaching experience.

[0049] To solve these problems, as Figure 1 shown, the intelligent page editing method based on component dynamic generation includes:

[0050] Parse the teaching component code, extract the teaching data binding information, teaching event response information, and teaching rendering rules, generate a JSON Schema, an event mapping table, and a view template, and save them to the logic meta-database and the view template library through logical optimization and intelligent completion.

[0051] Specifically, in the page of the online education platform, the teaching component is the core element and undertakes key teaching tasks. It not only includes rich interaction functions but also involves the processing of dynamic data. Taking a math formula editor as an example, it usually includes: a text box for entering formulas; a rendering area for real-time display of the visual effect of the formula; and a submit button for verifying the correctness of the formula. When parsing the code of such components, the following three key aspects need to be focused on:

[0052] First is the teaching data binding information, which refers to the part of the component related to the data source, such as obtaining and maintaining teaching data through API calls or state management tools. Second is the teaching event response information, which covers the event listeners in the component and their triggering logic. For example, the click event of a submit button may bind a function to send formula text to the backend API for verification and display the result. The event name and processing logic need to be recorded. Finally, the teaching rendering rules represent the view structure and rendering logic of the teaching component, including HTML templates, CSS styles, and conditional rendering rules. For example, a math formula editor uses different technologies to render formulas on different devices.

[0053] Furthermore, the specific processes of generating JSON Schema, event mapping tables, and view templates include:

[0054] First is to generate JSON Schema, including: Invoking the API, by capturing the call chain of network request libraries such as fetch and axios, important information such as interface URLs, request methods, and request parameter structures can be extracted, which helps to understand the interaction method between the teaching component and the external data source. Then bind the state management. By analyzing the mapStateToProps of Redux / Vuex or the computed properties of Vue, the global state fields and their types that the teaching component depends on can be extracted, and the association between the component and the global state can be seen. Then define local data. By parsing local data declarations such as props and state, the field names, data types, and default values can be extracted, providing a basis for understanding the internal data structure of the teaching component. Integrating the above information, a standardized JSON Schema is generated, which contains fields such as type, properties, and required, comprehensively describing the complete contract of the component data interface and providing a reference for subsequent testing, deployment, and maintenance.

[0055] Then is to generate the event mapping table. Locate the event binding code through AST parsing and extract the event types (such as click and drag) and callback function references. Then, enter the callback function tracing stage, trace the internal logic of the callback function, and identify key operations, including: API calls (extract the backend service endpoints and request payload structures), state updates (analyze the setState or Vuex's commit operations and record the state change path), and user feedback (capture the triggering conditions of interaction prompts such as alert and toast). To enhance the understanding of the component's dynamic behavior, monitoring logic will also be injected at runtime to record the actual parameters triggered by the event and the response data returned by the server (such as the data format of the wrong question verification result) in real time. Based on this information, an event mapping table is constructed, which stores key information such as event names, associated service endpoints, request parameter templates, and error handling strategies, forming a complete and clear link description between events and services.

[0056] Finally, generate a view template. Extract the template structure, parse JSX, Vue templates, or HTML fragments, separate the static structure from dynamic interpolation expressions, identify conditional rendering logic, and extract device adaptation rules. Then, separate the styles from the rendering logic, perform CSS parsing, extract class names, selectors, and media query rules, and associate them with specific DOM nodes. At the same time, identify the initialization code for technologies such as WebGL, Canvas, and SVG, and extract key configuration items such as shader configurations and drawing parameters. Then generate the view template. According to the conditional rendering rules, split the PC, mobile, and plain text degradation solutions of the same component into independent templates. Preserve the data binding fields (such as ${formula}) to ensure compatibility between the template and the fields in the JSON Schema.

[0057] Furthermore, the logic optimization includes data source optimization, event handling logic optimization, and rendering logic optimization; the rendering logic optimization includes: using a logical reduction algorithm to merge the repeated rendering logic of the view template, and using a template inheritance mechanism to remove the repeatedly appearing UI components.

[0058] Among them, the data source optimization is used to optimize the data binding configuration of teaching components, improving data reusability and retrieval efficiency. The event handling logic optimization is used to optimize the event triggering relationship in the event mapping table, reducing redundant event calls; the rendering logic optimization improves the logic and efficiency of the rendering process of the view template, enhancing the page rendering performance.

[0059] Among them, the specific process of the rendering logic optimization includes: First, use the AST (Abstract Syntax Tree) to parse the component template code and construct the rendering structure tree of the component. Then, use a logical reduction algorithm to detect whether there are similar patterns in conditional rendering and loop rendering, and perform reduction processing. Secondly, calculate the HTML structure similarity of different teaching components, identify the repeated UI fragments, extract the similar UI structures as basic components, and dynamically fill the content through the template inheritance mechanism. Through the above steps, the rendering logic can be effectively optimized, reducing the conditional rendering calculation amount, improving the rendering speed, and thus enhancing the flexibility of page editing.

[0060] Furthermore, the data source optimization includes: Static structure aggregation, including performing a structural clustering analysis on the data source according to the field topology structure and type constraints of the JSON Schema. When the field similarity of more than two data sources exceeds a preset threshold, merge them into a unified data interface and generate standardized data binding configuration items; Dynamic dependency merging, including constructing a dependency relationship graph by tracing the data reference paths between teaching components. If different teaching components have explicit or implicit dependencies on the same data source, perform a physical merge operation.

[0061] Specifically, the implementation process of static structure aggregation includes: components such as the formula editor and the wrong-question notebook in the mathematics module rely on the historical operation data of students. The data source of the formula editor: {"formulaId": "string", "formulaText": "string", "createdAt": "timestamp"}; the data source of the wrong-question notebook: {"errorId": "string", "errorText": "string", "createdAt": "timestamp"}. Through analysis, it is found that the field structures of the two data sources are highly similar (both contain unique identifiers, text content, and timestamps), and the similarity exceeds 80%. The two data sources are merged into a unified interface, and the formula and wrong-question history records of students are returned.

[0062] The implementation process of dynamic dependency merging includes: analyzing the data reference paths in the component code, such as Props passing or state sharing, to generate a dependency relationship graph between components. Explicit and implicit dependencies are identified through this graph: Explicit dependencies refer to teaching components directly calling the same API endpoint to obtain data; implicit dependencies refer to teaching components indirectly depending on the same data source through other components or global states. If multiple teaching components have explicit or implicit dependencies on the same data source, these dependencies are merged in the logical meta-database, and the data source is uniformly managed to ensure that the data is loaded only once and shared among components.

[0063] Through static structure aggregation, similar data sources are merged, reducing the number of backend APIs. Dynamic dependency merging ensures that the same data source is loaded only once, reducing unnecessary network calls, thereby improving system efficiency. Structure similarity merging prevents redundancy at the design level, while dependency relationship merging eliminates actual redundancy at the runtime level. The two form a complete closed-loop for data source optimization. These optimizations reduce data redundancy in the online education web page and improve the performance and efficiency of page editing.

[0064] Furthermore, the optimization of the event handling logic includes: constructing an event call relationship graph for parsing the event handling logic in the event mapping table to generate an event trigger relationship graph; according to the event trigger relationship graph, detecting whether different events point to the same API endpoint; if it is detected that more than two events call the same API endpoint, the events are merged using an event aggregation algorithm, and the unified API endpoint is stored.

[0065] Specifically, in the online education page, the specific steps to optimize the event handling logic are as follows: First, extract the event mapping table to obtain all events and their corresponding handling logics, such as events like "submit answer" and "verify exercise" and their handling functions; then, construct an event trigger relationship graph, mapping events and their handling logics to nodes and edges in the graph. For example, if the "submit answer" event triggers an API call to / api / check-answer, it is represented in the graph as "submit answer" pointing to " / api / check-answer", and label specific API endpoints for each handling logic to facilitate subsequent analysis of shared call situations; next, traverse the event trigger relationship graph to find cases where multiple events point to the same API endpoint. When it is detected that more than two events call the same API, record these events and their associated APIs, and according to the event characteristics and business requirements, select a suitable aggregation method, such as merging multiple events into a common handling function or implementing a batch processing interface at the backend; then, adjust the code logic so that it can uniformly handle requests for multiple events and call the API at once; finally, update the event mapping table, pointing relevant events to the unified handling logic and API endpoints to ensure the accuracy and timeliness of the mapping table. Through this series of steps, the event handling logic can be optimized, duplicate calls can be reduced, and the performance and efficiency of page editing can be improved.

[0066] Set priority rules for clarifying the priority order of device performance, user intent, and domain knowledge; define a priority rule engine for generating preliminary policy instructions based on the priority rules, the logical metadata database, and the view template library; use machine learning algorithms to predict the combined probability distribution of components and generate a component recommendation list; combine the preliminary policy instructions and the component recommendation list to generate final policy instructions.

[0067] Among them, in this embodiment, the priorities of these three types of information, namely device performance, user intent, and domain knowledge, decrease in sequence. Device performance refers to the hardware and network capabilities of the user terminal device, which directly affects page rendering speed and interaction fluency. User intent reflects the user's behavior and needs on the platform and can be inferred from the user's behaviors such as clicks, dwell time, and interaction frequency. Domain knowledge covers professional knowledge and resources related to educational content, such as knowledge graphs, course outlines, or exercise questions, etc., to support the provision of relevant teaching materials.

[0068] Further, as Figure 2 shown, set device performance rules, user intent rules, and domain knowledge rules respectively according to device performance, user intent, and domain knowledge, combine the logical metadata database and the view template library, input them into the priority rule engine, and after eliminating conflicting instructions, obtain preliminary policy instructions. Specifically, the generation process of the preliminary policy instructions includes:

[0069] Set device performance rules to collect the device performance, calculate the device performance level using a weighted scoring algorithm, retrieve a rendering mode that matches the device performance level from the view template library, and generate a rendering mode downgrade instruction.

[0070] Among them, obtain device performance information through an interface, including CPU frequency, memory size, GPU capabilities, and the current network status (such as bandwidth and latency). Design a weighted formula based on these parameters to calculate the performance level. For example, the CPU frequency accounts for 20%, the memory size accounts for 30%, and the GPU performance accounts for 50%. After weighted summation, an overall score is obtained and divided into three levels: "high", "medium", and "low". Select an appropriate rendering mode according to the performance level: use "WebGL" rendering for high-performance devices, "Canvas" for medium-performance devices, and downgrade to "SVG" for low-performance devices to ensure smooth page operation. For example, for a low-performance device, generate an instruction {render_mode: SVG}.

[0071] Set user intent rules to collect the user intent, identify user demand characteristics, and filter candidate components that match the user intent and the device performance from the logical meta-database, and generate a functional component append instruction.

[0072] Among them, collect user intent by analyzing user behavior data such as answer records, browsing history, and page interactions. For example, if the user's wrong-answer rate exceeds 50%, it indicates that they need intensive practice. Further combine data such as the user's click heatmap and dwell time on the page to identify the user's demand for specific functions, such as whether the user prefers interactive practice or video explanations. Add corresponding functional components according to the identified needs within the range allowed by the device performance. For example, add an "intensive practice" module for users who need intensive practice. Finally, generate an instruction such as {add_component: enhanced-practice} to implement the addition of functions.

[0073] Set domain knowledge rules to retrieve knowledge graph associated components from the logical meta-database according to the domain knowledge, and generate a domain component binding instruction.

[0074] Among them, according to the page theme, such as "trigonometric functions", retrieve and match relevant components from a preset knowledge base, such as a formula derivation tool or a visual demonstration. Bind these function components associated with the theme to the page to enhance the teaching effect. For example, add a "unit circle demonstration" component to assist students in understanding the concept of trigonometric functions. The final generated instruction is {link_component: unit-circle} to achieve the linking and display of the components.

[0075] According to the priority rules, superimpose the rendering mode downgrading instruction, the function component appending instruction, and the domain component binding instruction to form an initial instruction.

[0076] For the initial instruction, eliminate conflicting instructions through a weighted decision algorithm to generate the preliminary policy instruction.

[0077] Check whether there are contradictions in the initial instruction, assign weighted scores to potential conflicting instructions (such as 80% for performance priority, 15% for user intention priority, and 5% for domain knowledge priority), retain high-weight instructions, adjust or remove low-weight instructions, and generate a preliminary policy instruction according to the scores.

[0078] By applying device performance rules, user intention rules, and domain knowledge rules in an orderly manner, and combining priority settings with a weighted decision algorithm, the performance optimization, user demand satisfaction, and richness of teaching content are balanced. This method not only improves the operating efficiency and user experience of online education web pages but also enhances the flexibility of page editing.

[0079] Furthermore, the calculation process of the user demand characteristics includes:

[0080] Obtain the click coordinates and timestamp sequence of the user in the target component area from the user intention;

[0081] Identify the aggregation area of the click coordinates through a density clustering algorithm and calculate the clustering center;

[0082] According to the timestamp sequence and the clustering center, calculate the weighted sum of the time decay factor and the spatial kernel function to obtain the component click heat value;

[0083] Adopt the exponentially weighted moving average method to calculate the idle time of the page block to obtain the cognitive stagnation duration.

[0084] Specifically, extract the click coordinates and timestamps of the user in the target component area from the user intention. Record the clicks on the formula editor to generate a sequence, such as [(x1, y1, t1), (x2, y2, t2),...], where (x1, y1) and (x2, y2) are coordinates, and t1 and t2 are timestamps. Apply a density clustering algorithm (such as DBSCAN) to analyze the click coordinates, identify dense clustering areas, and calculate the center point of each cluster. Combine the weighted sum of the time decay factor (higher weight is given to the most recent click) and the spatial kernel function (based on the distance from the click to the clustering center), and use the timestamp sequence and the clustering center to calculate the click heat value of each component, expressed as:

[0085] H i =w T ×T i +w s×S i ;

[0086] where H i is the click heat value of click event i. For a component, its total click heat value H is the sum of the click heat values of all click events. T i is the time decay factor of click event i, S i is the spatial kernel function of click event i, and w T and w s are the weights of the time decay factor and the spatial kernel function respectively;

[0087] where the time decay factor T and the spatial kernel function S are expressed as:

[0088]

[0089] where γ is the decay coefficient, which controls the speed of time decay. The larger γ is, the faster the decay speed. t is the time stamp when the current click event occurs, t0 is the reference time, which can be a certain fixed starting time, d is the distance from the current click coordinate to the cluster center calculated using the Euclidean distance formula, σ is the bandwidth parameter of the Gaussian kernel function, which controls the influence range of the kernel function. The larger σ is, the wider the influence range, and e is the natural constant.

[0090] By calculating the click heat value and the cognitive stagnation duration, the user behavior can be quantitatively analyzed, so as to locate the user's interest points and learning difficulties. For components with a high heat value, they can be preferentially displayed; for components with a low heat value, repositioning or function enhancement can be considered. This not only realizes the accurate identification of user needs, but also can be personalized according to user needs, optimize resource allocation, thereby improving the flexibility of page editing and the adaptability to different educational fields.

[0091] Furthermore, the process of forming the initial instruction includes:

[0092] Adopt a policy instruction stack structure and push in the outputs of the device performance rule, the user intention rule, and the domain knowledge rule;

[0093] Execute the policy override mechanism, which is used to override low-priority rules with high-priority rules;

[0094] Perform policy merging on non-conflicting instructions to generate the initial instruction.

[0095] Specifically, a stack structure is used to manage the outputs of different rules. The instructions are traversed from the bottom to the top of the stack, and the rule at the bottom of the stack (such as device performance) has the highest priority. If a low-priority rule conflicts with a high-priority rule, the high-priority rule is retained. Domain knowledge requires adding a "3D demonstration" component (which requires high-performance WebGL rendering), but the device performance level is "low", and "SVG" rendering is required. The device performance rule overrides the domain knowledge rule, and the "3D demonstration" is ignored. All non-conflicting configurations in the stack are integrated into a JSON object. A complete instruction including the rendering mode, functional components, and associated components is generated. Through the policy instruction stack, policy override mechanism, and policy merging, the orderly integration of device performance, user intent, and domain knowledge is achieved. This method not only ensures the performance stability of the online education web page, but also improves the flexibility of page editing and the adaptability to different education fields.

[0096] According to the component identification list in the final policy instruction, load the JSON Schema and event mapping table of the corresponding component from the logical meta-database, and load the view template that matches the device performance from the view template library, and generate a component instance through a dynamic binder;

[0097] Collect the interaction data of the DOM tree to obtain page performance metrics, and feedback them to the priority rule engine to optimize the final policy instruction.

[0098] Through component dynamic parsing and intelligent optimization, the present invention realizes the generation and dynamic rendering of personalized teaching pages, and improves the reusability, interaction flexibility, and cross-terminal adaptability of teaching components. Specifically, first, by parsing the teaching component code, extracting data binding, event response, and rendering rules, generating JSON Schema, event mapping tables, and view templates, and constructing a standardized logical meta-database and view template library, the structured management and reusability of components are enhanced. Second, based on the priority rules of device performance, user intent, and domain knowledge, using the priority rule engine and machine learning algorithms, intelligently predict the component combination method, optimize the teaching content and interaction logic, and can dynamically adjust the component layout and function configuration according to the teaching scenario to improve the personalized recommendation ability. Finally, the system loads the optimal components according to the policy instruction, generates component instances in combination with the logical meta-database and view template library, and dynamically renders the DOM tree to ensure cross-device compatibility and rendering efficiency. At the same time, real-time collect user interaction data, optimize page performance metrics, and feedback them to the priority rule engine to achieve the adaptive optimization of the teaching page, continuously improve the learning experience and response ability, thereby reducing the course development and maintenance costs, improving the intelligence level of online education, and making the teaching interface more flexible, efficient, and personalized.

[0099] Embodiment 2:

[0100] When a company promoted its intelligent classroom product, it found that the flexibility and intelligence of the existing teaching pages were difficult to meet the diverse teaching needs. For example, the interaction requirements for different courses are different. For instance, mathematics requires a formula editor, and programming courses require a code running environment, but the existing system cannot automatically recommend appropriate components according to the course type; the course content needs to be adjusted in real time according to the students' learning progress and answering situations, but the static component library is difficult to support the dynamic combination and real-time rendering of teaching components, affecting the personalized teaching effect. To solve these problems, based on Embodiment 1, as Figure 3 shown, an intelligent page editing system based on dynamic component generation is introduced. The specific process includes:

[0101] Refer to Figure 3 the metadata extraction module to parse the teaching component code, extract the teaching data binding information, teaching event response information, and teaching rendering rules, generate JSON Schema, event mapping table, and view template, and save them to the logical metadata database and view template library through logical optimization and intelligent completion methods.

[0102] Furthermore, the specific steps of intelligent completion include:

[0103] When parsing the teaching components, the system will automatically scan the generated JSON Schema, event mapping table, and view template to check for missing fields, configuration items, or logic. By analyzing the context of the component code, extract the code patterns, variables, or known configuration information related to the missing information. Then, use a machine learning model (such as an SVM model) to predict the missing information based on historical data and the configurations of similar components. For example, the model may learn that a mathematics formula editor usually contains a formulaText field and infer its type as a string, and thus supplement it to the JSON Schema. The inferred information will be filled into the corresponding JSON Schema, mapping table, or template and marked as "intelligent completion" to distinguish it from the manually configured part. After that, perform syntax and semantic verification on the completed information to ensure its consistency with the component code and business logic. The verification results and related information (such as the completed fields and inference methods) will be recorded in the log for subsequent optimization algorithms or tracing the completion process. This intelligent completion method can efficiently supplement the missing configurations and ensure that the teaching data binding, event response, and rendering rules are completely saved to the logical metadata database and view template library.

[0104] Refer to Figure 3The component recommendation strategy generation module sets priority rules to clarify the priority order of device performance, user intent, and domain knowledge; defines a priority rule engine to generate preliminary policy instructions based on the priority rules, the logical metadata database, and the view template library; uses machine learning algorithms to predict the combined probability distribution of components and generate a component recommendation list; combines the preliminary policy instructions and the component recommendation list to generate the final policy instructions.

[0105] Specifically, the generation process of the final policy instructions is as follows: First, extract the teaching scenario features, including the current course theme, teaching objectives, and data requirements, and parse the logical metadata database to obtain component compatibility features, while parsing the view template library to obtain device adaptation features. Based on these features, train a decision tree model, screen components that meet the current teaching needs from the logical metadata database, screen components that adapt to the current device performance from the view template library, calculate the recommendation probability of each component, eliminate incompatible components, generate a recommendation list, select components with an adaptation probability ≥ 0.6, and merge them with the functional components in the preliminary policy instructions to ensure that the teaching objectives match the recommended components, forming the final policy instructions. Finally, perform conflict verification on the final policy instructions, exclude functional conflicts or device adaptation contradictions between components, update and determine the final policy instructions, and achieve accurate component recommendation and policy generation through multi-dimensional feature analysis and model decision-making.

[0106] For the scenario of generating dynamic teaching content in the mathematics discipline, select core teaching components such as formula editors, geometric figure drawing, and exercise panels, and test their performance under different policy instructions. Table 1 shows the comparison of the data results of the preliminary policy instructions and the final policy instructions.

[0107] Table 1 Comparison of Data Results

[0108] Test metrics Initial strategy instructions Final strategy instructions Page rendering time (ms) 680 520 Average number of component loads 5 4.2 Interactive response time (ms) 210 157 Component recommendation accuracy 77％ 84％

[0109] Reference Figure 3 The page generation module loads the logical metadata database and the view template library according to the component identification list in the final policy instructions, generates component instances, and merges them into a DOM tree; collects the interaction data of the DOM tree to obtain page performance indicators and feedback them to the priority rule engine to optimize the final policy instructions.

[0110] Load the JSON Schema of each component from the logical meta-database according to the component identifier. At the same time, load the HTML template and CSS style of the corresponding component from the view template library to ensure the consistency of the user interface layout and visual effects. Create an instance for each component, bind the logical configuration and view template to the instance, and dynamically obtain data from the backend according to the data source defined in the JSON Schema and inject it into the component instance. Set up event listeners to ensure that user interaction behaviors (such as clicks and inputs) can trigger the predefined event handling logic. Combine the HTML fragments of each component into a complete DOM tree according to the predefined page structure, and apply CSS styles to ensure the consistency of the page layout and design requirements. Finally, mount the generated DOM tree into the page to present an interactive terminal page.

[0111] Capture the user's interaction behaviors through JavaScript event listeners, such as click, scroll, and input operations, and record the page performance metrics, including but not limited to load time, rendering frame rate (FPS), and memory occupancy, etc. Analyze the user behavior data, such as click hotspots and page dwell time, to evaluate the usage of each component by users. Send the performance and behavior data to the priority rule engine for evaluating the effectiveness of the current policy instructions. The engine optimizes the policy instructions according to the feedback data. For example, if a certain component causes too low a frame rate on a low-end device, adjust the priority rules and reduce the rendering complexity of the component when generating the policy next time.

[0112] Although the embodiments of the present invention have been shown and described, those of ordinary skill in the art can understand that various changes, modifications, substitutions, and variations can be made to these embodiments without departing from the principles and spirit of the present invention. The scope of the present invention is defined by the appended claims and their equivalents.

Claims

1. An intelligent page editing method based on component dynamic generation, characterized in that Including: Parse the teaching component code, extract teaching data binding information, teaching event response information, and teaching rendering rules, generate JSON Schema, event mapping table, and view templates, and save them to the logic metadata database and view template library through logical optimization and intelligent completion; Set priority rules for clarifying the priority order of device performance, user intent, and domain knowledge; Define a priority rule engine for generating preliminary policy instructions based on the priority rules, the logic metadata database, and the view template library; Use machine learning algorithms to predict the combined probability distribution of components and generate a component recommendation list; Combine the preliminary policy instructions and the component recommendation list to generate final policy instructions; According to the component identification list in the final policy instructions, load the logic metadata database and the view template library, generate component instances, and merge them into a DOM tree; Collect the interaction data of the DOM tree, obtain page performance metrics, and feedback them to the priority rule engine to optimize the final policy instructions.

2. The intelligent page editing method based on component dynamic generation according to claim 1, wherein The logical optimization includes data source optimization, event handling logic optimization, and rendering logic optimization; The rendering logic optimization includes: using a reduction algorithm to merge duplicate rendering logics and using a template inheritance mechanism to remove duplicate UI components.

3. The intelligent page editing method based on component dynamic generation according to claim 2, wherein The data source optimization includes: Static structure aggregation, including: performing structure clustering analysis on the data source based on the field topology structure and type constraints of the JSON Schema. When the field similarity of more than two data sources exceeds a preset threshold, merge them into a unified data interface and generate a standardized data binding configuration item; Dynamic dependency merging, including: constructing a dependency relationship graph by tracing the data reference paths between teaching components. If different teaching components have explicit or implicit dependencies on the same data source, perform a physical merge operation.

4. The intelligent page editing method based on component dynamic generation according to claim 2, wherein The event handling logic optimization includes: constructing an event call relationship graph for parsing the event handling logic in the event mapping table to generate an event trigger relationship graph; according to the event trigger relationship graph, detecting whether different events point to the same API endpoint; if it is detected that more than two events call the same API endpoint, use an event aggregation algorithm to merge the events and store the unified API endpoint.

5. The intelligent page editing method based on component dynamic generation according to claim 1, characterized in that The generation process of the preliminary policy instructions includes: Set device performance rules for collecting the device performance, calculating the device performance level using a weighted scoring algorithm, retrieving the rendering mode that matches the device performance level from the view template library, and generating a rendering mode downgrade instruction; Set user intent rules for collecting the user intent, identifying user requirement characteristics, and screening candidate components that meet the user intent and the device performance from the logic metadata database to generate a functional component append instruction; Set domain knowledge rules for retrieving knowledge graph associated components from the logic metadata database according to the domain knowledge and generating a domain component binding instruction; According to the priority rules, stack the rendering mode downgrade instruction, the functional component append instruction, and the domain component binding instruction to form an initial instruction; For the initial instruction, conflict instructions are eliminated through a weighted decision algorithm to generate the preliminary policy instruction.

6. The intelligent page editing method based on component dynamic generation according to claim 5, characterized in that The calculation process of the user demand characteristics includes: Obtaining the click coordinates and timestamp sequence of the user in the target component area from the user intention; Identifying the aggregation area of the click coordinates through a density clustering algorithm and calculating the clustering center; Calculating the weighted sum of the time decay factor and the spatial kernel function according to the timestamp sequence and the clustering center to obtain the component click heat value; Calculating the no-operation time of the page block using the exponential weighted moving average method to obtain the cognitive stagnation duration.

7. The intelligent page editing method based on component dynamic generation according to claim 5, wherein, The process of forming the initial instruction includes: Adopting a policy instruction stack structure and pushing the outputs of the device performance rule, the user intention rule, and the domain knowledge rule; Executing a policy override mechanism for overriding low-priority rules with high-priority rules; Performing policy merging on non-conflict instructions to generate the initial instruction.

8. An intelligent page editing system based on component dynamic generation, characterized in that, Including: A metadata extraction module that parses the teaching component code, extracts teaching data binding information, teaching event response information, and teaching rendering rules, generates a JSON Schema, an event mapping table, and a view template, and saves them to the logical metadata database and the view template library through logical optimization and intelligent completion; A component recommendation strategy generation module that sets priority rules to clarify the priority order of device performance, user intention, and domain knowledge; Defining a priority rule engine for generating preliminary policy instructions according to the priority rules, the logical metadata database, and the view template library; Using a machine learning algorithm to predict the combined probability distribution of components and generate a component recommendation list; Combining the preliminary policy instruction and the component recommendation list to generate a final policy instruction; A page generation module that loads the logical metadata database and the view template library according to the component identifier list in the final policy instruction, generates component instances, and merges them into a DOM tree; Collecting the interaction data of the DOM tree to obtain page performance metrics and feedbacking them to the priority rule engine to optimize the final policy instruction.

Images