Intelligent page editing method and system based on component dynamic generation

Abstract

The present application relates to the technical field of configuration editing, in particular to an intelligent page editing method and system based on component dynamic generation, comprising: extracting data binding, event response and rendering rules by analyzing teaching component codes to generate JSON Schema, event mapping table and view template, and storing them in a database after logical optimization and intelligent completion. Setting priority rules of device performance, user intention and domain knowledge, generating preliminary strategy instructions by combining stored data with a rule engine, and predicting component combination probability through machine learning to fuse and generate the final strategy. Based on the strategy instruction, the component is dynamically loaded to generate a DOM tree, and the page interaction data is collected and fed back to the rule engine to form a strategy optimization closed loop. This method realizes the dynamic generation and intelligent adaptation of teaching components, and improves the flexibility and cross-end adaptation capability of page editing.

Description

Technical Field

[0001] This invention relates to the field of configuration editing technology, specifically to an intelligent page editing method and system based on dynamic component generation. Background Technology

[0002] With the rapid development of online education, the diversification and personalization of teaching scenarios have placed higher demands on page editing technology. Intelligent page editing technology based on dynamic component generation improves the flexibility and development efficiency of teaching interfaces through modular design. However, existing technical solutions still face a series of technical challenges in practical applications:

[0003] First, the dynamic adaptability of components needs improvement. Most current mainstream component libraries are based on static functional design, which limits their ability to handle dynamic needs in teaching scenarios. For example, in math courses, relevant component content needs to be dynamically updated based on students' incorrect answers. However, existing technologies mainly rely on hard-coded logic, which restricts the flexibility of component reuse. When the teaching logic changes, components often need to be redeveloped, increasing development and maintenance costs.

[0004] Secondly, the cross-scenario intelligent adaptation mechanism still needs improvement. While existing responsive design can achieve basic page layout adaptation, it still falls short in terms of deep matching between device performance and teaching processes. For terminal devices with limited computing resources, there is room for optimization in the dynamic degradation mechanism of component functions in existing technologies, which may lead to performance fluctuations in complex components during runtime, affecting user experience. At the same time, component composition strategies still rely on experience-based configuration in automatically generating adapted pages, and the intelligent arrangement capability for teaching links such as "preview-practice-assessment" needs to be enhanced, thus affecting the efficiency of teaching resource utilization.

[0005] Furthermore, the integration of knowledge and technology in the field of education is insufficient. The deep integration of subject-specific components with the subject knowledge system still needs to be strengthened. Teachers need to balance technical operation with teaching content during use, which increases the complexity of the tools to some extent. In addition, the mechanisms for collecting and integrating component interaction data, such as student experimental operation paths and answer behaviors, are not yet mature, resulting in a lack of sufficient data support for optimizing teaching strategies and hindering the deepening of intelligent teaching.

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

[0007] The purpose of this invention is to provide an intelligent page editing method and system based on dynamic component generation, thereby improving the flexibility and domain adaptability of page editing. By parsing the teaching component code to extract data binding, event response, and rendering rules, a JSON Schema, event mapping table, and view template are generated and stored in a database after logical optimization and intelligent completion. Priority rules based on device performance, user intent, and domain knowledge are set. A rule engine, combined with stored data, generates preliminary strategy instructions, and machine learning is used to predict component combination probabilities, ultimately generating the final strategy. Based on the strategy instructions, components are dynamically loaded to generate a DOM tree, and page interaction data is collected and fed back to the rule engine, forming a closed loop for strategy optimization. This achieves dynamic generation and intelligent adaptation of teaching components, thereby improving the flexibility and cross-platform adaptability of page editing.

[0008] To achieve the above objectives, the present invention provides the following technical solution:

[0009] Intelligent page editing methods based on dynamically generated components include:

[0010] The teaching component code is parsed to extract teaching data binding information, teaching event response information and teaching rendering rules, and to generate JSON Schema, event mapping table and view template. These are then saved to the logical meta database and view template library through logic optimization and intelligent completion.

[0011] Priority rules are set to clarify the order of priority between device performance, user intent, and domain knowledge; a priority rule engine is defined to generate preliminary policy instructions based on the priority rules, the logical metadata database, and the view template library; a machine learning algorithm is used to predict the combination probability distribution of components to generate a component recommendation list; and the preliminary policy instructions and the component recommendation list are combined to generate a final policy instruction.

[0012] Based on the component identifier list in the final strategy instruction, the logical metadata database and the view template library are loaded, component instances are generated, and merged into a DOM tree;

[0013] The interaction data of the DOM tree is collected to obtain page performance metrics, which are then fed back to the priority rule engine to optimize the final strategy instructions.

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

[0015] Furthermore, the data source optimization includes:

[0016] Static structure aggregation includes: performing structural clustering analysis on the data source based on the field topology and type constraints of the JSON Schema; when the field similarity of more than two data sources exceeds a preset threshold, they are merged into a unified data interface and standardized data binding configuration items are generated.

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

[0018] Furthermore, the event handling logic optimization includes: constructing an event call relationship graph to parse the event handling logic in the event mapping table and generate an event trigger relationship graph; detecting whether different events point to the same API endpoint based on the event trigger relationship graph; if more than two events are detected calling the same API endpoint, merging the events using an event aggregation algorithm and storing a unified API endpoint.

[0019] Furthermore, the process of generating the preliminary strategy instructions includes:

[0020] Set device performance rules to collect device performance, use a weighted scoring algorithm to calculate device performance level, retrieve rendering modes that match the device performance level from the view template library, and generate rendering mode downgrade instructions;

[0021] Set user intent rules to collect user intent, identify user demand characteristics, and filter candidate components that match the user intent and device performance from the logical meta database to generate functional component append instructions;

[0022] Set domain knowledge rules to retrieve knowledge graph related components from the logical meta database based on the domain knowledge and generate domain component binding instructions;

[0023] According to the priority rules, the rendering mode downgrade instruction, the functional component append instruction, and the domain component binding instruction are superimposed to form the initial instruction;

[0024] The initial instruction is used to eliminate conflicting instructions through a weighted decision algorithm to generate the preliminary strategy instruction.

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

[0026] Obtain the user's click coordinates and timestamp sequence in the target component area from the user's intent;

[0027] The clustering regions of the click coordinates are identified using a density clustering algorithm, and the cluster centers are calculated.

[0028] Based on the timestamp sequence and the cluster center, the weighted sum of the time decay factor and the spatial kernel function is calculated to obtain the component click heat value;

[0029] The inactivity time of page blocks was calculated using the exponentially weighted moving average method to obtain the cognitive stagnation time.

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

[0031] A policy instruction stack structure is used to push the outputs of the device performance rules, the user intent rules, and the domain knowledge rules onto the system.

[0032] The execution policy override mechanism is used to override low-priority rules with high-priority rules;

[0033] Non-conflicting instructions are merged using a strategy to generate the initial instruction.

[0034] A component-based intelligent page editing system, including:

[0035] The metadata extraction module parses the teaching component code, extracts teaching data binding information, teaching event response information, and teaching rendering rules, and generates JSON Schema, event mapping table, and view template. It then saves these to the logical metadata database and view template library through logic optimization and intelligent completion.

[0036] The 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 strategy instructions based on the priority rules, the logical metadata database, and the view template library; uses machine learning algorithms to predict the combination probability distribution of components and generate a component recommendation list; and combines the preliminary strategy instructions and the component recommendation list to generate a final strategy instruction.

[0037] The page generation module loads the logical metadata database and the view template library according to the component identifier list in the final strategy instruction, generates component instances, and merges them into a DOM tree; it collects the interaction data of the DOM tree, obtains page performance indicators, and feeds them back to the priority rule engine to optimize the final strategy instruction.

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

[0039] 1. This invention parses the teaching component code, extracts data binding, event response, and rendering rules, and generates a JSONSchema, event mapping table, and view template. Combining logic optimization and intelligent completion strategies, these are stored in a logic metadata database and a view template library, achieving decoupling between component logic and view. In terms of logic optimization, a template inheritance mechanism and dynamic rendering strategy enable structured management of multi-platform view templates. Based on different teaching needs and device environments, it can retrieve appropriate components from the logic metadata database and load suitable rendering schemes from the view template library, improving component reusability and reducing redundant development and maintenance costs.

[0040] 2. This invention sets priority rules for device performance, user intent, and domain knowledge, uses a priority rule engine to generate initial strategy instructions, and combines machine learning algorithms to predict the probability distribution of component combinations to optimize component recommendation strategies. This allows for dynamic adjustment of the component layout and interaction logic of the teaching page based on user learning behavior, teaching objectives, and device characteristics. Simultaneously, by incorporating data dependencies in a logical metadata database, it automatically filters and adapts components, enhancing the personalized recommendation capability of teaching resources, thereby improving the flexibility and domain adaptability of page editing.

[0041] 3. After generating the final strategy instructions, this invention loads teaching components from the logical metadata database and view template library based on the component identifier list, dynamically binds data sources and interactive events, and merges them into a DOM tree, thereby achieving automated generation and intelligent rendering of teaching pages. By collecting interactive data from the DOM tree in real time, the system can calculate page performance metrics, such as component response time and user interaction frequency, and feed these optimization results back to the priority rule engine to dynamically adjust subsequent strategy instructions. This continuously optimizes page loading speed and improves the flexibility and domain adaptability of page editing. Attached Figure Description

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

[0043] Figure 2 A schematic diagram of the initial strategy instruction flow provided by the present invention;

[0044] Figure 3 This is a schematic diagram of the intelligent page editing system based on dynamic component generation provided by the present invention. Detailed Implementation

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

[0046] Please see Figures 1 to 3 This invention provides an intelligent page editing method and system based on dynamically generated components, the technical solution of which is as follows:

[0047] Example 1:

[0048] Existing online education platforms mostly rely on static component libraries to build course pages, which has certain limitations in terms of 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, resulting in low reusability and high development and maintenance costs; interaction logic is implemented through hard coding, and there is a lack of dynamic configuration capabilities for adjusting teaching strategies; traditional responsive design cannot automatically optimize the layout according to the scenario, and there is a lack of intelligent degradation strategies for low-performance devices, which affects the teaching experience.

[0049] To solve these problems, such as Figure 1 As shown, the intelligent page editing method based on dynamically generated components includes:

[0050] The teaching component code is parsed to extract teaching data binding information, teaching event response information, and teaching rendering rules, generating JSON Schema, event mapping table, and view template. These are then saved to the logical metadata database and view template library through logic optimization and intelligent completion.

[0051] Specifically, in the pages of online education platforms, teaching components serve as core elements, undertaking crucial teaching tasks. They not only include rich interactive functions but also involve the processing of dynamic data. Taking a mathematical formula editor as an example, it typically includes: a text box for entering formulas; a rendering area for real-time visualization of the formula; and a submit button for verifying the formula's correctness. When analyzing the code of such components, the following three key aspects need to be focused on:

[0052] First, there's the teaching data binding information, referring 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, there's the teaching event response information, covering event listeners in the component and their triggering logic. For example, the click event of the submit button might be bound to a function that sends the formula text to the backend API for verification and displays the result; the event name and processing logic need to be recorded. Finally, there are the teaching rendering rules, representing the view structure and rendering logic of the teaching component, including HTML templates, CSS styles, and conditional rendering rules. For example, a mathematical formula editor might use different technologies to render formulas on different devices.

[0053] Furthermore, the specific process of generating the JSON Schema, event mapping table, and view template includes:

[0054] First, a JSON Schema is generated, including: API calls. By capturing the call chain of network request libraries such as fetch and axios, important information such as the interface URL, request method, and request parameter structure can be extracted, which helps to understand how the teaching component interacts with external data sources. Next, state management is bound. By analyzing Redux / Vuex's mapStateToProps or Vue's computed property, the global state fields that the teaching component depends on and their types can be extracted, revealing the relationship between the component and the global state. Then, local data is defined. By parsing local data declarations such as props and state, field names, data types, and default values ​​can be extracted, providing a foundation for understanding the internal data structure of the teaching component. Integrating the above information, a standardized JSON Schema is generated, containing fields such as type, properties, and required, comprehensively describing the complete contract of the component's data interface, providing a reference for subsequent testing, deployment, and maintenance.

[0055] Next, an event mapping table is generated. The event binding code is located through AST parsing, extracting event types (such as click and drag) and callback function references. Then, the callback function tracing phase begins, tracking the internal logic of callback functions and identifying key operations, including: API calls (extracting backend service endpoints and request load structures), state updates (analyzing setState or Vuex commit operations to record state change paths), and user feedback (capturing the triggering conditions of interactive prompts such as alerts and toasts). To enhance the understanding of component dynamic behavior, monitoring logic is injected at runtime to record the actual parameters of event triggers and the response data returned by the server in real time (such as the data format of incorrect question verification results). Based on this information, an event mapping table is built, storing key information such as event name, associated service endpoint, request parameter template, and error handling strategy, forming a complete and clear description of the link between events and services.

[0056] Finally, the view template is generated. The template structure is extracted, JSX, Vue templates, or HTML fragments are parsed, static structure and dynamic interpolation expressions are separated, and conditional rendering logic is identified, extracting device adaptation rules. Next, styles and rendering logic are separated, CSS is parsed, class names, selectors, and media query rules are extracted, and they are associated with specific DOM nodes. Simultaneously, the initialization code for technologies such as WebGL, Canvas, and SVG is identified, and key configuration items such as shader configurations and drawing parameters are extracted. Then, the view template is generated. Based on the conditional rendering rules, the PC, mobile, and plain text degradation schemes for the same component are split into independent templates. Data binding fields (such as ${formula}) are preserved to ensure template compatibility with JSON Schema fields.

[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 duplicate UI components.

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

[0059] The specific process of optimizing the rendering logic includes: First, using an AST (Abstract Syntax Tree) to parse the component template code and construct the component's rendering structure tree. Then, a logical reduction algorithm is used to detect similar patterns in conditional rendering and loop rendering, and reduction processing is performed. Next, the HTML structure similarity of different teaching components is calculated, duplicate UI fragments are identified, similar UI structures are extracted as basic components, and content is dynamically populated through a template inheritance mechanism. These steps effectively optimize the rendering logic, reduce the computational load of conditional rendering, and improve rendering speed, thereby enhancing the flexibility of page editing.

[0060] Furthermore, the data source optimization includes: static structure aggregation, which involves performing structural clustering analysis on the data sources based on the field topology and type constraints of the JSON Schema. When the field similarity of more than two data sources exceeds a preset threshold, they are merged into a unified data interface, and standardized data binding configuration items are generated; dynamic dependency merging, which involves constructing a dependency graph by tracing the data reference paths between teaching components. If different teaching components have explicit or implicit dependencies on the same data source, a physical merging operation is performed.

[0061] Specifically, the static structure aggregation implementation process includes: For example, the formula editor and error notebook components in the math module both rely on students' historical operation data. The formula editor data source is: {"formulaId": "string", "formulaText": "string", "createdAt": "timestamp"}; the error notebook data source is: {"errorId": "string", "errorText": "string", "createdAt": "timestamp"}. Through analysis, it was found that the field structures of the two data sources are highly similar (both contain unique identifiers, text content, and timestamps), with a similarity of over 80%. The two data sources are merged into a unified interface to return the student's formula and error history.

[0062] The dynamic dependency merging process includes: analyzing data reference paths in component code, such as props passing or state sharing, and generating a dependency graph between components. This graph identifies explicit and implicit dependencies: 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 state. If multiple teaching components have explicit or implicit dependencies on the same data source, these dependencies are merged in the logical metadata database to uniformly manage the data source, ensuring that data is loaded only once and shared among components.

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

[0064] Furthermore, the event handling logic optimization includes: constructing an event call relationship graph to parse the event handling logic in the event mapping table and generate an event trigger relationship graph; detecting whether different events point to the same API endpoint based on the event trigger relationship graph; if more than two events are detected calling the same API endpoint, merging the events using an event aggregation algorithm and storing a unified API endpoint.

[0065] Specifically, the steps to optimize event handling logic on an online education page are as follows: First, extract the event mapping table to obtain all events and their corresponding processing logic, such as events like "submit answer" and "verify exercise" and their processing functions; then, construct an event triggering relationship graph, mapping events and their processing logic to nodes and edges in the graph. For example, if the "submit answer" event triggers the API call / api / check-answer, then in the graph, "submit answer" points to " / api / check-answer," and each processing logic is labeled with a specific API endpoint for easy analysis of shared call behavior later; next, traverse the event triggering relationship graph... The process involves identifying instances where multiple events point to the same API endpoint. When two or more events are detected calling the same API, these events and their associated APIs are recorded. Based on event characteristics and business requirements, a suitable aggregation method is selected, such as merging multiple events into a single generic processing function or implementing a batch processing interface in the backend. Next, the code logic is adjusted to handle requests from multiple events uniformly and call the API all at once. Finally, the event mapping table is updated to point related events to a unified processing logic and API endpoint, ensuring the accuracy and timeliness of the mapping table. Through this series of steps, event processing logic can be optimized, duplicate calls reduced, and page editing performance and efficiency improved.

[0066] Priority rules are set to clarify the order of priority between device performance, user intent, and domain knowledge; a priority rule engine is defined to generate preliminary policy instructions based on the priority rules, the logical metadata database, and the view template library; a machine learning algorithm is used to predict the combination probability distribution of components to generate a component recommendation list; and the preliminary policy instructions and the component recommendation list are combined to generate the final policy instructions.

[0067] In this embodiment, the priority of the three types of information—device performance, user intent, and domain knowledge—decreases in that order. Device performance refers to the hardware and network capabilities of the user's terminal device, which directly affects page rendering speed and interaction smoothness. User intent reflects the user's behavior and needs on the platform and can be inferred from user clicks, dwell time, and interaction frequency. Domain knowledge encompasses professional knowledge and resources related to educational content, such as knowledge graphs, course outlines, or exercises, used to support the provision of relevant teaching materials.

[0068] Furthermore, such as Figure 2 As shown, device performance rules, user intent rules, and domain knowledge rules are set according to device performance, user intent, and domain knowledge, respectively. These rules are then combined with the logical metadata database and the view template library and input into the priority rule engine. After eliminating conflicting instructions, preliminary policy instructions are obtained. Specifically, the generation process of the preliminary policy instructions includes:

[0069] Set device performance rules to collect device performance data, use a weighted scoring algorithm to calculate device performance level, retrieve rendering modes that match the device performance level from the view template library, and generate rendering mode downgrade instructions.

[0070] This process involves obtaining device performance information via an interface, including CPU frequency, memory size, GPU capabilities, and current network conditions (such as bandwidth and latency). A weighted formula is designed based on these parameters to calculate the performance level. For example, CPU frequency accounts for 20%, memory size for 30%, and GPU performance for 50%. The weighted sum is then used to obtain a comprehensive score, categorized into "High," "Medium," and "Low." An appropriate rendering mode is selected based on the performance level: high-performance devices use "WebGL" rendering, medium-performance devices use "Canvas," and low-performance devices are downgraded to "SVG" to ensure smooth page execution. For example, for low-performance devices, the generation instruction is {render_mode: SVG}.

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

[0072] This process involves analyzing user behavior data such as answer records, browsing history, and page interactions to collect user intent. For example, if a user's error rate exceeds 50%, it indicates a need for intensive practice. Further analysis combines data on user click hotspots and dwell time on the page to identify user needs for specific functions, such as whether the user prefers interactive practice or video explanations. Within the limits of device performance, corresponding functional components are added based on the identified needs, such as adding an "Enhanced Practice" module for users requiring intensive practice. Finally, instructions like `{add_component:enhanced-practice}` are generated to implement the addition of the function.

[0073] The domain knowledge rules are set to retrieve knowledge graph related components from the logical meta-database based on the domain knowledge and generate domain component binding instructions.

[0074] Based on the page theme, such as "trigonometric functions," relevant components, such as formula derivation tools or visual demonstrations, are retrieved and matched from a pre-defined knowledge base. These theme-related functional components are then bound to the page to enhance teaching effectiveness. For example, a "unit circle demonstration" component can be added to help students understand the concept of trigonometric functions. The final generated instruction is {link_component: unit-circle}, which enables the linking and display of these components.

[0075] According to the priority rules, the rendering mode downgrade instruction, the functional component append instruction, and the domain component binding instruction are superimposed to form the initial instruction.

[0076] The initial instruction is used to eliminate conflicting instructions through a weighted decision algorithm to generate the preliminary strategy instruction.

[0077] Check for contradictions in the initial instructions, assign weighted scores to potentially conflicting instructions (e.g., performance priority 80%, user intent priority 15%, domain knowledge priority 5%), retain high-weight instructions, adjust or remove low-weight instructions, and generate preliminary strategy instructions based on the scores.

[0078] By systematically applying device performance rules, user intent rules, and domain knowledge rules, and combining them with priority settings and weighted decision-making algorithms, a balance is struck between performance optimization, meeting user needs, and the richness of teaching content. This approach not only improves the operational efficiency and user experience of online education web pages but also enhances the flexibility of page editing.

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

[0080] Obtain the user's click coordinates and timestamp sequence in the target component area from the user's intent;

[0081] The clustering regions of the click coordinates are identified using a density clustering algorithm, and the cluster centers are calculated.

[0082] Based on the timestamp sequence and the cluster center, the weighted sum of the time decay factor and the spatial kernel function is calculated to obtain the component click heat value;

[0083] The inactivity time of page blocks was calculated using the exponentially weighted moving average method to obtain the cognitive stagnation time.

[0084] Specifically, the user's click coordinates and timestamps within the target component area are extracted from the user's intent. Clicks recorded in the formula editor are generated as a sequence, such as [(x1,y1,t1),(x2,y2,t2),...], where (x1,y1) and (x2,y2) are coordinates, and t1 and t2 are timestamps. A density clustering algorithm (e.g., DBSCAN) is applied to analyze the click coordinates, identify dense clustering regions, and calculate the center point of each cluster. Combining a weighted sum of a time decay factor (giving higher weight to recent clicks) and a spatial kernel function (based on the distance from the click to the cluster center), the click heatmap value for each component is calculated using the timestamp sequence and cluster centers, expressed as:

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

[0086] Among them, H i Let T be 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. i S is the time decay factor for click event i. i For the spatial kernel function of click event i, w T and w s These are the weights of the time decay factor and the spatial kernel function, respectively.

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

[0088]

[0089] Where γ is the decay coefficient, which controls the rate of time decay. The larger γ is, the faster the decay rate. t is the timestamp of the current click event. t0 is the reference time, which can be a fixed start time. d is the distance from the current click coordinates 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. e is the natural constant.

[0090] By calculating click heat values ​​and cognitive pause durations, quantitative analysis of user behavior can be performed to pinpoint user interests and learning difficulties. Components with high heat values ​​can be prioritized for display; components with low heat values ​​can be repositioned or enhanced. This not only achieves accurate identification of user needs but also allows for personalized adjustments based on user requirements, optimizing resource allocation and improving the flexibility of page editing and adaptability to different educational fields.

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

[0092] A policy instruction stack structure is adopted to push the output of the device performance rules, the user intent rules, and the domain knowledge rules onto the system.

[0093] The execution policy override mechanism is used to override low-priority rules with high-priority rules;

[0094] Non-conflicting instructions are merged using a strategy to generate the initial instruction.

[0095] Specifically, a stack structure is used to manage the output of different rules, traversing instructions from the bottom to the top of the stack, with the bottom rule (e.g., device performance) having the highest priority. If a low-priority rule conflicts with a high-priority rule, the high-priority rule is retained. Domain knowledge requires the addition of a "3D demo" component (requiring high-performance WebGL rendering), but the device performance level is "low," requiring "SVG" rendering. The device performance rule overrides the domain knowledge rule, ignoring the "3D demo." All non-conflicting configurations in the stack are integrated into a single JSON object. A complete instruction containing rendering mode, functional components, and associated components is generated. Through the policy instruction stack, policy override mechanism, and policy merging, an orderly integration of device performance, user intent, and domain knowledge is achieved. This method not only ensures the performance stability of online education web pages, but also improves the flexibility of page editing and adaptability to different educational domains.

[0096] Based on the component identifier list in the final strategy instruction, the corresponding component's JSON Schema and event mapping table are loaded from the logical meta database, and a view template matching the device performance is loaded from the view template library. Component instances are then generated through a dynamic binder.

[0097] The interaction data of the DOM tree is collected to obtain page performance metrics, which are then fed back to the priority rule engine to optimize the final strategy instructions.

[0098] This invention achieves personalized teaching page generation and dynamic rendering through dynamic component parsing and intelligent optimization, improving the reusability, interactive flexibility, and cross-platform adaptability of teaching components. Specifically, it includes: 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 metadata database and view template library, enhancing the structured management and reusability of components. Second, based on priority rules of device performance, user intent, and domain knowledge, it uses a priority rule engine and machine learning algorithms to intelligently predict component combination methods, optimizing teaching content and interaction logic. This allows for dynamic adjustment of component layout and function configuration according to the teaching scenario, improving personalized recommendation capabilities. Finally, the system loads the optimal components according to strategy instructions, generates component instances by combining the logical metadata database and view template library, and dynamically renders the DOM tree, ensuring cross-device compatibility and rendering efficiency. Simultaneously, it collects user interaction data in real time, optimizes page performance indicators, and feeds this data back to the priority rule engine, achieving adaptive optimization of the teaching page, continuously improving the learning experience and responsiveness, thereby reducing course development and maintenance costs, enhancing the intelligence of online education, and making the teaching interface more flexible, efficient, and personalized.

[0099] Example 2:

[0100] When promoting its smart classroom product, a company discovered that the flexibility and intelligence of its existing teaching pages were insufficient to meet diverse teaching needs. For example, different courses have different interaction requirements; mathematics requires a formula editor, while programming courses require a code execution environment. However, the existing system cannot automatically recommend suitable components based on the course type. Course content needs to be adjusted in real-time based on students' learning progress and answering questions, but the static component library struggles to support the dynamic combination and real-time rendering of teaching components, impacting personalized teaching effectiveness. To address these issues, based on Implementation Example 1, such as... Figure 3 As 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 parses the teaching component code, extracts teaching data binding information, teaching event response information, and teaching rendering rules, and generates JSON Schema, event mapping table, and view template. These are then saved to the logical metadata database and view template library through logic optimization and intelligent completion.

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

[0103] When parsing teaching components, the system automatically scans the generated JSON Schema, event mapping table, and view templates to check for missing fields, configuration items, or logic. By analyzing the context of the component code, it extracts code patterns, variables, or known configuration information related to the missing information. Then, a machine learning model (such as an SVM model) is used to predict the missing information based on historical data and the configuration of similar components. For example, the model might learn that mathematical formula editors typically contain a `formulaText` field and infer its type as a string, thus adding it to the JSON Schema. The inferred information is then populated into the corresponding JSON Schema, mapping table, or template and marked as "intelligent completion" to distinguish it from manually configured parts. Afterward, the completed information undergoes syntactic and semantic validation to ensure consistency with the component code and business logic. The validation results and related information (such as the completed fields and inference methods) are logged for subsequent algorithm optimization or to trace the completion process. This intelligent completion method efficiently supplements missing configurations, ensuring that teaching data binding, event responses, 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 strategy instructions based on the priority rules, the logical metadata database, and the view template library; uses machine learning algorithms to predict the combination probability distribution of components and generate a component recommendation list; and combines the preliminary strategy instructions and the component recommendation list to generate a final strategy instruction.

[0105] Specifically, the final strategy instruction generation process is as follows: First, teaching scenario features are extracted, including the current course topic, teaching objectives, and data requirements. Component compatibility features are obtained from the logical metadata database, and device adaptation features are obtained from the view template library. Based on these features, a decision tree model is trained. Components that meet the current teaching needs are selected from the logical metadata database, and components that adapt to the current device performance are selected from the view template library. The recommendation probability of each component is calculated, incompatible components are eliminated, a recommendation list is generated, and components with an adaptation probability ≥ 0.6 are selected and merged with the functional components in the preliminary strategy instructions to ensure that the teaching objectives match the recommended components, forming the final strategy instruction. Finally, conflict verification is performed on the final strategy instruction to eliminate functional conflicts or device adaptation contradictions between components. The final strategy instruction is then updated and confirmed. Through multi-dimensional feature analysis and model decision-making, accurate component recommendation and strategy generation are achieved.

[0106] For dynamic teaching content generation scenarios in mathematics, core teaching components such as the formula editor, geometric figure drawing, and practice panel were selected to test their performance under different strategy commands. Table 1 shows a comparison of the data results for the initial strategy commands and the final strategy commands.

[0107] Table 1 Comparison of Data Results

[0108] Test metrics Preliminary strategy instructions Final strategy instructions Page rendering time (ms) 680 520 Average number of components loaded 5 4.2 Interaction response time (ms) 210 157 Component recommendation accuracy 77％ 84％

[0109] refer to Figure 3 The page generation module loads the logical metadata database and the view template library according to the component identifier list in the final strategy instruction, generates component instances, and merges them into a DOM tree; it collects the interaction data of the DOM tree, obtains page performance indicators, and feeds them back to the priority rule engine to optimize the final strategy instruction.

[0110] Based on the component identifier, the JSON schema for each component is loaded from the logical metadata database. Simultaneously, the corresponding HTML template and CSS styles are loaded from the view template library to ensure consistent layout and visual effects in the user interface. An instance is created for each component, and the logical configuration and view template are bound to this instance. Data is dynamically retrieved from the backend and injected into the component instance based on the data source defined in the JSON schema. Event listeners are set to ensure that user interactions (such as clicks and input) trigger predefined event handling logic. The HTML fragments of each component are combined into a complete DOM tree according to the predefined page structure, and CSS styles are applied to ensure consistent page layout and design requirements. Finally, the generated DOM tree is mounted onto the page, presenting an interactive terminal page.

[0111] Capture user interactions such as clicks, scrolling, and input using JavaScript event listeners, and record page performance metrics, including but not limited to load time, frame rate (FPS), and memory usage. Analyze user behavior data, such as click hotspots and page dwell time, to assess user engagement with various components. Send performance and behavior data to a priority rule engine to evaluate the effectiveness of current policy directives. The engine optimizes policy directives based on feedback data. For example, if a component causes low frame rates on low-end devices, adjust the priority rules to reduce the rendering complexity of that component in the next policy generation.

[0112] Although embodiments of the invention have been shown and described, it will be understood by those skilled in the art that various changes, modifications, substitutions and alterations can be made to these embodiments without departing from the principles and spirit of the invention, the scope of which is defined by the appended claims and their equivalents.

Claims

1. An intelligent page editing method based on component dynamic generation, characterized in that, The method comprises the following steps: Parsing the teaching component code, extracting teaching data binding information, teaching event response information and teaching rendering rules, generating JSON Schema, event mapping table and view template, saving to logical meta database and view template library through logical optimization and intelligent completion; Setting priority rules to determine the priority of device performance, user intent and domain knowledge; Defining a priority rule engine to generate preliminary strategy instructions based on the priority rules, the logical meta database and the view template library; Setting device performance rules to collect device performance, calculate device performance level using a weighted scoring algorithm, retrieve rendering modes from the view template library that match the device performance level, and generate rendering mode degradation instructions; Setting user intent rules to collect user intent, identify user demand characteristics, and filter candidate components from the logical meta database that meet the user intent and device performance, generating function component addition instructions; Setting domain knowledge rules to retrieve knowledge graph associated components from the logical meta database based on the domain knowledge, and generate domain component binding instructions; according to the priority rules, superimpose the rendering mode degradation instructions, the function component addition instructions and the domain component binding instructions to form initial instructions; Eliminating conflicting instructions from the initial instructions using a weighted decision algorithm to generate the preliminary strategy instructions; Obtaining user click coordinates and timestamp sequences in the target component area from the user intent; identifying the clustering area of the click coordinates by density clustering algorithm, and calculating the clustering center; according to the timestamp sequence and the clustering center, calculating the weighted sum of time decay factor and spatial kernel function to get the component click heat value; Using the exponential weighted moving average method to calculate the inaction time of the page block to get the cognitive stagnation duration; Using a strategy instruction stack structure to push the output of the device performance rules, the user intent rules and the domain knowledge rules; executing a strategy overlay mechanism to overlay high-priority rules over low-priority rules; merging non-conflicting instructions to generate the initial instructions; Using machine learning algorithms to predict the combination probability distribution of components to generate a component recommendation list; Generating the final strategy instructions based on the preliminary strategy instructions and the component recommendation list; Loading the logical meta database and the view template library according to the component identification list in the final strategy instructions, generating component instances, and merging them into a DOM tree; Collecting the interaction data of the DOM tree to obtain page performance indicators and feeding them back to the priority rule engine to optimize the final strategy instructions.

2. The intelligent page editing method based on component dynamic generation according to claim 1, characterized in that, 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 repeated rendering logic 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, characterized in that, The data source optimization includes: Static structure aggregation, including: according to the field topology and type constraint of the JSON Schema, performing structural clustering analysis on the data source, merging into a unified data interface when the field similarity of more than two data sources exceeds a preset threshold, and generating a standardized data binding configuration item; Dynamic dependency merging, including: constructing a dependency graph by tracking the data reference path between teaching components, and performing a physical merging operation if different teaching components have explicit or implicit dependencies on the same data source.

4. The intelligent page editing method based on component dynamic generation according to claim 2, characterized in that, The event processing logic optimization includes: constructing an event call relationship graph for parsing the event processing 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 more than two events call the same API endpoint are detected, using an event aggregation algorithm to merge the events, and storing a unified API endpoint.

5. The intelligent page editing system based on dynamic generation of components, characterized in that, It includes: A metadata extraction module 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 meta database and a view template library through logical optimization and intelligent completion; A component recommendation strategy generation module sets priority rules to clearly define the priority order of device performance, user intent and domain knowledge; A priority rule engine is defined to generate preliminary strategy instructions based on the priority rules, the logical meta database and the view template library; A device performance rule is set to collect the device performance, calculate the device performance level using a weighted scoring algorithm, retrieve a rendering mode from the view template library that matches the device performance level, and generate a rendering mode degradation instruction; A user intent rule is set to collect the user intent, identify user demand characteristics, and filter candidate components from the logical meta database that meet the user intent and the device performance, and generate a function component addition instruction; A domain knowledge rule is set to retrieve knowledge graph associated components from the logical meta database according to the domain knowledge, and generate a domain component binding instruction; According to the priority rules, the rendering mode degradation instruction, the function component addition instruction and the domain component binding instruction are superimposed to form an initial instruction; The initial instruction is processed through a weighted decision algorithm to eliminate conflicting instructions and generate the preliminary strategy instruction; From the user intent, the user's click coordinates and timestamp sequence in the target component area are obtained; the clustering center is calculated by identifying the aggregation area of the click coordinates through a density clustering algorithm; and the weighted sum of the time decay factor and the spatial kernel function is calculated according to the timestamp sequence and the clustering center to obtain the component click heat value; The exponential weighted moving average method is used to calculate the inaction time of the page block to obtain the cognitive stagnation duration. Adopting a strategy instruction stack structure, the outputs of the device performance rules, the user intention rules and the domain knowledge rules are pushed into the stack; a strategy covering mechanism is executed to cover high priority rules with low priority rules; non-conflict instructions are combined to generate the initial instructions; A machine learning algorithm is used to predict the combined probability distribution of components to generate a component recommendation list; The initial strategy instructions and the component recommendation list are combined to generate final strategy instructions; A page generation module loads the logical meta-database and the view template library according to the component identification list in the final strategy instructions, generates component instances and combines them into a DOM tree; Interaction data of the DOM tree is collected to obtain page performance indicators, which are fed back to the priority rule engine to optimize the final strategy instructions.

Images