Interactive dynamic problem solving visualization method and device based on AI learning system and related products

Abstract

The invention provides an interactive dynamic problem solving visualization method and device based on an AI learning system and a related product, and relates to the technical field of education science and technology. The method comprises the steps of receiving question content input by a user; identifying and answering the question content based on an AI learning system, and generating a question, a question solving process and a question solving result; the question, the question solving process and the result are submitted to a dynamic answer generator, the question solving process is converted into a front-end interactive code by the dynamic answer generator based on the question, the question solving process and the result, and an animation effect and an interactive module are fused and displayed; receiving interaction operation input by the user through the interaction module, and updating the problem solving process and result in real time according to the interaction operation. Dynamic interaction in the question solving process is fused into the AI learning system for the first time, compared with a traditional static answer output method, the method is more visual and dynamic and has the deep participation sense, the user is helped to understand the answering process and the back principle, and the learning initiative and learning efficiency of the user are improved.

Description

Technical Field

[0001] This application relates to the field of educational technology, and in particular to an interactive dynamic problem-solving visualization method, device, and related products based on an AI learning system. Background Technology

[0002] Currently, most large-scale AI (Artificial Intelligence) models are text-based, presenting solutions in static text format. They lack dynamic deduction and interactive demonstrations for complex problems (such as geometric and physical calculations), making it very difficult for users to understand complex and dynamic changes. Plain text-based solutions and answers are also not easy for users to understand, as follows: 1) Not intuitive: For geometry or physics problems, some learning systems may display static images or lengthy theoretical explanations, but students cannot intuitively observe the impact of parameter changes on the problem results, resulting in low engagement and poor learning outcomes.

[0003] 2) Limited technology: Traditional problem-solving systems only output fixed answers and a few static explanations, making it difficult to balance quantitative calculations with interactive perception. They lack visualization and dynamic interaction of the problem-solving process, and cannot truly improve students' thinking ability and participation in problem-solving.

[0004] Therefore, the aforementioned technical problems urgently need to be solved. Summary of the Invention

[0005] In view of the above problems, this application is made to provide an interactive dynamic problem-solving visualization method, apparatus, and related products based on an AI learning system that overcomes or at least partially solves the above problems. The technical solution is as follows: Firstly, an interactive dynamic problem-solving visualization method based on an AI learning system is provided, the method comprising: Receive user input regarding the question content; The AI ​​learning system identifies and answers the questions, generating questions, solutions, and results. Submit the question, solution process, and result to the dynamic solution generator. The dynamic solution generator will then convert the solution process into interactive front-end code based on the question, solution process, and result, and integrate display animation effects and interactive modules. It receives interactive operations input by users through the interactive module and updates the problem-solving process and results in real time based on the interactive operations.

[0006] In one possible implementation, a dynamic solution generator transforms the problem-solving process into interactive front-end code based on the problem, solution process, and result, integrating animation effects and interactive modules, including: The dynamic solution generator extracts a JSON object containing variables, results, and formulas based on the question, solution process, and result. The dynamic solution generator obtains the first prompt word containing the front-end code generation specification, submits the first prompt word to the preset large model, and receives the preliminary front-end code returned by the preset large model; Based on JSON objects, the initial front-end code is adjusted to transform the problem-solving process into interactive front-end code, integrating display animation effects and interactive modules.

[0007] In one possible implementation, before the dynamic solution generator obtains the first prompt word containing the front-end code generation specification, the method further includes: Create a host node on the original page containing the generated question, solution process, and result. The host node is used to subsequently mount the shadow root node. Calling the default method that represents mounting the shadow creates the shadow root node, thereby generating an isolated Document Object Model (DOM) container, so that the style files generated by the default large model only apply to this container. After receiving the initial front-end code returned by the preset large model, the method further includes: The initial front-end code is injected into the shadow root node.

[0008] In one possible implementation, the front-end code generation specifications include technology stack constraints, component generation specifications, and validation rules.

[0009] In one possible implementation, a dynamic solution generator extracts a JSON object containing variables, results, and formulas based on the problem, solution process, and result, including: The dynamic solution generator obtains the second hint word and submits the second hint word, the question, the solution process, and the result to the preset large model. Receives a JSON object containing variables, results, and formulas returned by a pre-defined large model.

[0010] In one possible implementation, the second prompt word is constructed based on a pre-defined large model that returns a JSON object containing variables, results, and formulas according to the question, solution process, and results. The second prompt word includes task description, JSON specification, processing requirements, input example, output example, current task, and output requirements.

[0011] In one possible implementation, the initial front-end code is adjusted based on a JSON object, including: Based on the JSON object, the variables in the JSON object are bound to the front-end tags in the initial front-end code; When the pre-defined JavaScript glue code detects changes in variables within the JSON object, it automatically triggers a redraw function to update the problem-solving process and results in real time.

[0012] In one possible implementation, the method further includes: Use the formulas in the JSON object as a list of geometric constraints; Output the constraint descriptions from the list of geometric constraints; A pre-built geometric constraint solving engine is provided on the browser side for parsing interactive front-end code; The problem-solving process and results are updated in real time based on interactive operations, including: The geometric constraint solving engine is used to solve for the new position corresponding to the interactive operation according to the constraint description. The graphics drawing component draws according to the new position corresponding to the solved interactive operation, and updates the problem-solving process and results in real time.

[0013] In one possible implementation, the method further includes: When generating the initial front-end code, each graphic element is assigned a unique identifier. When the large model generates the first side text response, it will automatically wrap the keywords with preset tags. Create a visual-text search graph, using the unique identifier of the graphic element as the key and the keywords in the text answer on the first side as the value; When a user triggers a keyword in the text response on the first side, the visual-text search graph is read, and the corresponding graph in the second-side graph drawing component is automatically highlighted, blinked, or has a numerical label displayed. When the user triggers the second-side graph, the visual-text search graph is read, and the corresponding keywords in the text answer on the first side are automatically highlighted.

[0014] Secondly, an interactive dynamic problem-solving visualization device based on an AI learning system is provided, the device comprising: The receiving unit is used to receive the question content input by the user; The generation unit is used to identify and answer the question content based on the AI ​​learning system, and generate the question, the solution process and the result; The problem-solving visualization unit is used to submit the problem, solution process, and result to the dynamic solution generator. The dynamic solution generator then converts the solution process into interactive front-end code based on the problem, solution process, and result, and integrates display animation effects and interactive modules. The interaction unit is used to receive interactive operations input by the user through the interaction module, and to update the problem-solving process and results in real time based on the interactive operations.

[0015] Thirdly, an electronic device is provided, comprising a processor and a memory, wherein the memory stores a computer program, and the processor is configured to run the computer program to perform the interactive dynamic problem-solving visualization method based on the AI ​​learning system described in any of the preceding claims.

[0016] Fourthly, a storage medium is provided that stores a computer program, wherein the computer program is configured to execute the interactive dynamic problem-solving visualization method based on the AI ​​learning system described above at runtime.

[0017] Fifthly, a computer program product is provided, including a computer program configured to execute the interactive dynamic problem-solving visualization method based on the AI ​​learning system described above at runtime.

[0018] Using the above technical solutions, this application provides an interactive dynamic problem-solving visualization method, device, and related products based on an AI learning system. The method receives user-inputted questions; identifies and answers the questions using an AI learning system, generating a question, a solution process, and a result; submits the question, solution process, and result to a dynamic solution generator, which then converts the solution process into interactive front-end code, integrating animation effects and interactive modules; and receives user input through the interactive modules, updating the solution process and result in real time based on the interactive operations. As can be seen, the dynamic solution generator of this application generates interactive front-end code with dynamic interaction and animation features. For the first time, it integrates dynamic interaction in the problem-solving process into the AI ​​learning system. Compared with the traditional static answer output method, it is more intuitive, dynamic and has a deeper sense of participation, helping users understand the solution process and the underlying principles, improving users' learning initiative and learning efficiency, especially providing innovative solutions to dynamic problems such as geometry and physics problems. At the same time, it improves the ability of AI to solve complex problems in teaching scenarios, giving it the new advantage of not only being able to answer questions, but also demonstrating how to solve them. Attached Figure Description

[0019] To more clearly illustrate the technical solutions of the embodiments of this application, the accompanying drawings used in the description of the embodiments of this application will be briefly introduced below.

[0020] Figure 1 A flowchart is shown below illustrating the interactive dynamic problem-solving visualization method based on an AI learning system provided in this application embodiment; Figure 2 A flowchart is shown for an interactive dynamic problem-solving visualization method based on an AI learning system provided in another embodiment of this application; Figure 3 This illustration shows a schematic diagram of adjusting the side length of a triangle according to an embodiment of this application; Figure 4 A schematic diagram illustrating the interactive dynamic problem-solving visualization provided in an embodiment of this application is shown; Figure 5 This paper shows a structural diagram of an interactive dynamic problem-solving visualization device based on an AI learning system provided in an embodiment of this application. Figure 6 A structural diagram of an electronic device provided in an embodiment of this application is shown. Detailed Implementation

[0021] Exemplary embodiments of the present application will now be described in more detail with reference to the accompanying drawings. While exemplary embodiments of the present application are shown in the drawings, it should be understood that the present application may be implemented in various forms and should not be limited to the embodiments set forth herein. Rather, these embodiments are provided so that this application will be thorough and complete, and will fully convey the scope of the present application to those skilled in the art.

[0022] It should be noted that the terms "first," "second," etc., in the specification, claims, and accompanying drawings of this application are used to distinguish similar objects and are not necessarily used to describe a specific order or sequence. It should be understood that such use can be interchanged where appropriate so that the embodiments of this application described herein can be implemented in orders other than those illustrated or described herein. Furthermore, the term "comprising" and its variations should be interpreted as open-ended terms meaning "including but not limited to."

[0023] To address the aforementioned technical problems, embodiments of this application provide an interactive, dynamic problem-solving visualization method based on an AI learning system, such as... Figure 1 As shown, the interactive dynamic problem-solving visualization method based on the AI ​​learning system may include the following steps S101 to S104: Step S101: Receive the question content input by the user.

[0024] This step introduces multimodal input methods, including text, images, and voice, especially supporting image recognition in mathematical problem-solving scenarios.

[0025] Step S102: Based on the AI ​​learning system, the problem content is identified and answered, generating the question, solution process and result.

[0026] After the user inputs information, the AI ​​learning system first determines whether the uploaded file is an image, plain text, or speech. This can be done using file extension validation: files with extensions like png or jpg are considered images; files with extensions like wma, mp3, cd, or wave are considered speech. The system then converts the image or speech to text and generates a question, solution process, and result.

[0027] Step S103: Submit the question, solution process, and result to the dynamic solution generator. The dynamic solution generator will then convert the solution process into interactive front-end code based on the question, solution process, and result, and integrate display animation effects and interactive modules.

[0028] Step S104: Receive the interactive operation input by the user through the interactive module, and update the problem-solving process and results in real time based on the interactive operation.

[0029] This embodiment's dynamic solution generator generates interactive front-end code with dynamic interaction and animation features. For the first time, it integrates dynamic interaction during the problem-solving process into an AI learning system. Compared with traditional static answer output methods, it is more intuitive, dynamic, and deeply engaging, helping users understand the solution process and the underlying principles, improving users' learning initiative and efficiency. It provides innovative solutions, especially for dynamic problems such as geometry and physics problems. At the same time, it enhances AI's ability to solve complex problems in teaching scenarios, giving it the new advantage of not only answering questions but also demonstrating how to solve them.

[0030] This application embodiment provides a possible implementation method. Step S103 involves a dynamic solution generator converting the problem-solving process into interactive front-end code based on the problem, solution process, and result, and integrating display animation effects and interactive modules. Specifically, this may include the following steps a1 to a3: Step a1: The dynamic solution generator extracts a JSON object containing variables, results, and formulas based on the question, solution process, and result. Here, JSON stands for JavaScript Object Notation, which is a lightweight data exchange format that uses a text format that is completely independent of programming languages ​​to store and represent data.

[0031] Step a2: The dynamic solution generator obtains the first prompt word containing the front-end code generation specification, submits the first prompt word to the preset large model, and receives the preliminary front-end code returned by the preset large model. Here, the large model, also known as the Large Language Model (LLM), has three characteristics: First, as the name suggests, it is large in scale, with network parameters reaching tens of billions, hundreds of billions, or even more. Second, it is general, meaning it is not limited to specific problems or domains. Third, it is emergent, meaning it generates unexpected new capabilities.

[0032] The large model can be an open-source large model. The parameter scale of the large model can be flexibly configured according to actual needs, such as different orders of magnitude such as 671 billion, 14 billion, 32 billion, 7 billion or 1.5 billion. The selection of the number of parameters mainly depends on the computing resource conditions and model performance requirements. This embodiment does not impose any restrictions on this.

[0033] Step a3: Based on the JSON object, adjust the initial front-end code to transform the problem-solving process into interactive front-end code, integrating display animation effects and interactive modules.

[0034] This embodiment uses a dynamic solution generator to extract a JSON object containing variables, results, and formulas based on the problem, solution process, and result, solving the problem of knowing which elements or variables are dynamic. Based on the JSON object, the initial front-end code is adjusted to transform the solution process into interactive front-end code, integrating display animation effects and interactive modules to achieve dynamic visualization of the solution process. This effectively contrasts with traditional static text and image display formats, helping students understand the solution process and the underlying principles.

[0035] This application embodiment provides a possible implementation method. Before step a2, where the dynamic solution generator obtains the first prompt word containing the front-end code generation specification, it may also include the following steps b1 and b2: Step b1: Create a host node on the original page containing the generated question, solution process, and result. The host node is used to mount the shadow root node later. Here, root refers to the root, and the shadow root node is used to mount isolated DOM (Document Object Model) content. Step b2: Call the preset method representing the mounted shadow to create the shadow root node, thereby generating an isolated Document Object Model (DOM) container, so that the style files generated by the preset large model only apply to this container. After receiving the preliminary front-end code returned by the preset large model in step a2, the method further includes: injecting the preliminary front-end code into the shadow root node.

[0036] This embodiment is based on the component-based encapsulation of the shadow DOM, which can solve the problem of front-end page container isolation. The style of the generated interactive HTML (hypertext markup language) page is isolated from the style of the original page, and will not mess up the original style and layout.

[0037] This application provides a possible implementation method. The front-end code generation specifications mentioned in step a2 may include technology stack constraints, component generation specifications, validation rules, etc. Here, the component generation specifications include layout structure, control specifications, chart specifications, etc.

[0038] This application provides a possible implementation method in which step a1 is achieved by a dynamic solution generator extracting a JSON object containing variables, results, and formulas based on the problem, solution process, and results. Specifically, this may include the following steps a1-1 and a1-2: Step a1-1: The dynamic solution generator obtains the second hint word and submits the second hint word, the question, the solution process, and the result to the preset large model. Here, the second hint word is constructed based on the requirement that the preset large model return a JSON object containing variables, results, and formulas according to the question, solution process, and result. The second hint word includes task description, JSON specification, processing requirements, input example, output example, current task, output requirements, etc.

[0039] Step a1-2: Receive the JSON object containing variables, results, and formulas returned by the preset large model.

[0040] This embodiment utilizes prompt word engineering to translate static values ​​in the question, solution process, and result into dynamic variables, generating a JSON object containing variables, results, and formulas. This forms the basis for enabling interaction.

[0041] This application embodiment provides a possible implementation method. In step a3, the initial front-end code is adjusted based on the JSON object, which may specifically include the following steps a3-1 and a3-2: Step a3-1: Based on the JSON object, bind the variables in the JSON object to the front-end tags in the initial front-end code; In step a3-2, when the pre-defined JavaScript glue code detects changes in variables within the JSON object, it automatically triggers a redraw function to update the problem-solving process and results in real time.

[0042] This embodiment achieves automatic triggering of the redraw function when data changes by automatically binding interactive event hooks, without the need to write complex event listener code.

[0043] This application provides a possible implementation method, which further includes: using formulas in a JSON object as a list of geometric constraints; outputting constraint descriptions based on the list of geometric constraints; and pre-setting a geometric constraint solving engine on the browser side that parses the interactive front-end code.

[0044] Step S104 involves updating the problem-solving process and results in real time based on interactive operations, which may specifically include the following steps c1 and c2: Step c1: Use the geometric constraint solving engine to solve for the new position corresponding to the interactive operation according to the constraint description; In step c2, the graphics drawing component draws according to the new position corresponding to the solved interactive operation, and updates the problem-solving process and results in real time.

[0045] This embodiment solves the problem of poorly calculated coordinates causing the graphic to fall apart when the user drags it. Instead of directly calculating coordinates, it uses formulas in a JSON object as a list of geometric constraints. A lightweight geometric constraint solver is pre-installed on the browser side for parsing. Instead of outputting a line, it outputs constraint descriptions. The geometric constraint solver uses the constraint solver to find the new position corresponding to the interactive operation according to the constraint descriptions. The graphics drawing component draws according to the new position corresponding to the interactive operation, updating the solution process and results in real time.

[0046] This application provides a possible implementation method, which further includes the following steps d1 to d4: Step d1: When generating the initial front-end code, assign a unique identifier to each graphic element. When the large model generates the first side text response, it will automatically wrap the keywords with preset tags. Step d2: Create a visual-text search graph, using the unique identifier of the graphic element as the key and the keywords in the text response on the first side as the value. Step d3: When the user triggers the keyword in the text response on the first side, read the visual-text search graph and automatically highlight, flash, or display the numerical label of the corresponding graph in the graph drawing component on the second side. Step d4: When the user triggers the second side of the graph, read the visual-text search graph and automatically highlight the corresponding keywords in the text answer on the first side.

[0047] This embodiment solves the problem that users don't know where to look when viewing images or where to match text, and addresses the issue of traditional learning systems where text parsing and image matching are separate; for example, when a user reads "when the slider slides down," they don't know which part of the image is the slider, etc.; this embodiment implements visual-text bidirectional highlighting and focusing marking.

[0048] The above introduces Figure 1 The embodiments shown have various implementation methods for each stage. The interactive dynamic problem-solving visualization method based on an AI learning system in this application will be further explained below through specific embodiments.

[0049] This specific embodiment provides a solution based on an AI learning system, which constructs a more interactive and intuitive problem-solving experience through dynamic, interactive problem-solving and visualization. Its main objective is: 1) Achieve dynamic visualization of the problem-solving process, effectively contrasting with traditional static text and image displays, and helping users (such as students) understand the solution process and the underlying principles; 2) Provide user interaction functions, allowing users (such as students) to dynamically adjust parameters (such as side length and angle) and observe the dynamic changes of the answer in real time, so as to cultivate thinking and hands-on skills; 3) Enhance AI's ability to solve complex problems in teaching scenarios, giving it the new advantage of not only being able to answer questions but also demonstrating how to solve them.

[0050] like Figure 2 As shown, it includes a question generation stage and a dynamic solution generation stage, as detailed below: User input is processed by a multimodal classifier to determine whether it is text, image, or speech. If it is an image, it undergoes OCR (Optical Character Recognition) to convert it into text, which is then parsed to extract the question structure. If it is speech, it undergoes ASR (Automatic Speech Recognition) to convert it into text, which is then parsed to extract the question structure. If it is text, it directly proceeds to text parsing to extract the question structure.

[0051] For example, after a user uploads an image of a geometry problem, the system can automatically recognize the geometric figures in the image, including elements such as points, lines, angles, and area labels, and parse them into a solvable mathematical expression using OCR and AI algorithms.

[0052] The process involves: user uploading images, OCR recognition and object classification, and AI analysis of geometric problem models.

[0053] Text parsing extracts the question structure and the large model agent (an intelligent system that can autonomously understand tasks, formulate plans, and call tools to perform complex operations), which is the question generation stage.

[0054] Next, the solution process and results are generated and submitted to the dynamic solution generator. The dynamic solution generator uses an AI model to generate HTML code with dynamic interaction and animation features, including relevant images and dynamic formula updates, as well as unified specifications for the UI (User Interface) styles of components and front-end pages.

[0055] (1) The process of decoupling and extracting variables, results and formulas.

[0056] The dynamic solution generator obtains the second hint, and submits the second hint, the problem, the solution process, and the result to the preset large model. Here, the second hint is constructed based on the requirement that the preset large model return a JSON object containing variables, results, and formulas based on the problem, solution process, and result. The second hint includes task description, JSON specifications, processing requirements, input examples, output examples, current task, and output requirements. Subsequently, the system receives the JSON object containing variables, results, and formulas returned by the preset large model.

[0057] For example, consider a Pythagorean theorem problem where the variables are the side lengths a and b of a triangle, and the adjustable ranges of a and b are restricted. The adjustable range of a is [1, 10], with a default value of 3; the adjustable range of b is [1, 10], with a default value of 4; the result is c; and the formula is a^2 + b^2 = c^2.

[0058] (2) Generate preliminary front-end code.

[0059] The dynamic solution generator obtains a first hint word containing the front-end code generation specifications, submits the first hint word to a preset large model, and receives the preliminary front-end code returned by the preset large model. The front-end code generation specifications mentioned here may include technology stack constraints, component generation specifications, validation rules, etc. Here, component generation specifications include layout structure, control specifications, chart specifications, etc.

[0060] (3) Component-based encapsulation based on shadow DOM.

[0061] This solves the problem of front-end page container isolation, ensuring that the styles of the generated interactive HTML pages are isolated from the styles of the original pages, thus avoiding disruption of the original styles and layout.

[0062] Before generating interactive HTML, an isolated DOM container needs to be generated to ensure that the CSS (cascading style sheets) style files generated by the large model only apply to this container, rather than external styles, thus shielding the influence of external CSS files.

[0063] The first step is to create a host node on the original page containing the generated questions, solutions, and results. The host node is used to mount the shadow root node later. Here, root refers to the root, and the shadow root node is used to mount isolated DOM content.

[0064] The second step is to call the default method representing the mounted shadow, create the shadow root node, and thus generate an isolated Document Object Model (DOM) container, so that the style files generated by the default large model only apply to this container.

[0065] The third step is to inject the initial front-end code into the shadow root node.

[0066] This embodiment utilizes the concept of shadow DOM to achieve style sandbox isolation.

[0067] (4) Automated hook binding for interactive events.

[0068] To solve the problem of how to control the graphics with a slider, we can use a JSON object to bind the variables in the JSON object to the front-end tags in the initial front-end code. When the pre-built JavaScript glue code detects changes in the variables in the JSON object, it automatically triggers a redraw function to update the solution process and results in real time.

[0069] For example, by adding the variable `data-bind="a"` from a JSON object to the front-end tag in the initial front-end code, the glue code will automatically scan for these attributes and establish listeners; the code for the slider with side length 'a' is...<data-bind="a"> The code for the slider with side length b is:<data-bind="b"> After the tag is assigned to the relevant attributes, the system's built-in JavaScript listener will automatically trigger the data-observer's redraw function when it detects a change in data-bind, eliminating the need for AI to write complex event listener code.

[0070] (5) Input constraint solver rendering.

[0071] This solves the problem of poorly calculated coordinates causing the graphic to fall apart when the user drags it. Instead of directly calculating coordinates, it uses formulas from a JSON object as a list of geometric constraints. A lightweight geometric constraint solver is pre-built into the browser for parsing. Instead of outputting a line, it outputs constraint descriptions. The geometric constraint solver uses the constraint descriptions to solve for the new position corresponding to the interactive operation. The graphics drawing component draws according to the solved new position corresponding to the interactive operation, updating the solution process and results in real time.

[0072] Front-end solving: When the user drags point A on the right side of the webpage, the browser's solving engine will calculate the new positions of points B and C in real time, forcibly maintaining a vertical relationship.

[0073] Rendering: Canvas draws based on valid coordinates calculated by the solver. Canvas is a drawing technology that allows developers to dynamically generate graphic content through scripts.

[0074] (6) Visual-text bidirectional highlighting.

[0075] It solves the problem that users don't know where to look when viewing images or which text to match, and it also addresses the issue of traditional learning systems where text analysis and image matching are separate; for example, when a user reads "when the slider slides down," they don't know which part of the image is the slider.

[0076] The specific steps are as follows: When generating the initial front-end code, each graphic element is assigned a unique identifier UUID. When the large model generates the text response on the left, it will automatically wrap the keywords (such as slider, angle, etc.) with preset tags. Create a visual-text search graph map, using the unique identifier of each graphic element as the key and the keywords in the text answer on the left as the value; When a user triggers a keyword in the text response on the left, the visual-text search graph is read, and the corresponding graphic in the Canvas drawing component on the right is automatically highlighted, blinked, or has a numerical label displayed. When a user triggers the graphic on the right, the visual-text search graph is read, and the corresponding keywords in the text answer on the left are automatically highlighted.

[0077] This embodiment implements visual-text bidirectional highlighting and focusing marking.

[0078] Combining (1) to (6), the dynamic solution generator transforms the solution process into interactive code on the front end based on the question, solution process and result, and integrates display animation effects and interactive modules; it receives interactive operations input by users through the interactive modules and updates the solution process and result in real time according to the interactive operations.

[0079] Based on the parameters extracted in (1), interactive functions are provided for users. Users can freely adjust some parameters in the question (such as the side length and angle of the triangle) and recalculate and display them on the front end in real time.

[0080] For example, if the user inputs the question "Given a right triangle ABC, with side lengths a=3 and b=4, find the length of the hypotenuse c".

[0081] The JSON object returned by the preset large model, containing variables, results, and formulas, is as follows: 'a' and 'b' are variables, 'c' is the result, and the formula is 'a^2 + b^2 = c^2'. When the front-end dynamically adjusts its response, such as... Figure 3 As shown, the values ​​of a or b are adjusted based on the input variables, c is recalculated in real time, and the geometric image is updated. Figure 4 As shown; here the color scheme is selected based on the first prompt word in (2).

[0082] This embodiment achieves the following technical effects: a) For the first time, dynamic interaction in the problem-solving process is integrated into the AI ​​question-answering system, which is more intuitive, dynamic and has a deeper sense of participation compared with the traditional static answer output method; b) It improves users' initiative and efficiency in learning, especially by providing innovative solutions to dynamic problems such as geometry and physics problems; c) It has good scalability and can be applied not only to solving mathematical problems, but also to more educational fields such as physical model calculations and dynamic simulation of chemical reactions.

[0083] It should be noted that the sequence numbers of the steps in the above embodiments do not imply the order of execution. The execution order of each process should be determined by its function and internal logic, and should not constitute any limitation on the implementation process of the embodiments of this application. In practical applications, all the above possible implementation methods can be arbitrarily combined in a combined manner to form possible embodiments of this application, which will not be described in detail here.

[0084] Based on the interactive dynamic problem-solving visualization method based on the AI ​​learning system provided in the above embodiments, and based on the same inventive concept, this application also provides an interactive dynamic problem-solving visualization device based on the AI ​​learning system.

[0085] Figure 5 This is a structural diagram of the interactive dynamic problem-solving visualization device based on an AI learning system provided in an embodiment of this application. Figure 5 As shown, the interactive dynamic problem-solving visualization device based on the AI ​​learning system may specifically include a receiving unit 510, a generating unit 520, a problem-solving visualization unit 530, and an interaction unit 540.

[0086] The receiving unit 510 is used to receive the question content input by the user; The generation unit 520 is used to identify and answer the question content based on the AI ​​learning system, and generate the question, the solution process and the result; The problem-solving visualization unit 530 is used to submit the problem, solution process and result to the dynamic solution generator. The dynamic solution generator converts the solution process into interactive front-end code based on the problem, solution process and result, and integrates display animation effects and interactive modules. The interaction unit 540 is used to receive interactive operations input by the user through the interaction module and update the problem-solving process and results in real time based on the interactive operations.

[0087] This application embodiment provides a possible implementation, wherein the problem-solving visualization unit 530 is further used for: The dynamic solution generator extracts a JSON object containing variables, results, and formulas based on the question, solution process, and result. The dynamic solution generator obtains the first prompt word containing the front-end code generation specification, submits the first prompt word to the preset large model, and receives the preliminary front-end code returned by the preset large model; Based on JSON objects, the initial front-end code is adjusted to transform the problem-solving process into interactive front-end code, integrating display animation effects and interactive modules.

[0088] This application embodiment provides a possible implementation, wherein the problem-solving visualization unit 530 is further used for: Before the dynamic solution generator obtains the first hint word containing the front-end code generation specification, a host node is created on the original page where the generated question, solution process and result are located. The host node is used to mount the shadow root node later. Calling the default method that represents mounting the shadow creates the shadow root node, thereby generating an isolated Document Object Model (DOM) container, so that the style files generated by the default large model only apply to this container. After receiving the preliminary front-end code returned by the preset large model, the preliminary front-end code is injected into the shadow root node.

[0089] This application provides a possible implementation method, wherein the front-end code generation specification includes technology stack constraints, component generation specifications, and verification rules.

[0090] This application embodiment provides a possible implementation, wherein the problem-solving visualization unit 530 is further used for: The dynamic solution generator obtains the second hint word and submits the second hint word, the question, the solution process, and the result to the preset large model. Receives a JSON object containing variables, results, and formulas returned by a pre-defined large model.

[0091] This application provides a possible implementation method whereby the second prompt word is constructed based on the need to pre-set a large model that returns a JSON object containing variables, results, and formulas according to the question, solution process, and results. The second prompt word includes task description, JSON specification, processing requirements, input example, output example, current task, and output requirements.

[0092] This application embodiment provides a possible implementation, wherein the problem-solving visualization unit 530 is further used for: Based on the JSON object, the variables in the JSON object are bound to the front-end tags in the initial front-end code; When the pre-defined JavaScript glue code detects changes in variables within the JSON object, it automatically triggers a redraw function to update the problem-solving process and results in real time.

[0093] This application embodiment provides a possible implementation, wherein the problem-solving visualization unit 530 is further used for: Use the formulas in the JSON object as a list of geometric constraints; Output the constraint descriptions from the list of geometric constraints; A pre-built geometric constraint solving engine is provided on the browser side for parsing interactive front-end code; The interaction unit 540 is also used for: The geometric constraint solving engine is used to solve for the new position corresponding to the interactive operation according to the constraint description. The graphics drawing component draws according to the new position corresponding to the solved interactive operation, and updates the problem-solving process and results in real time.

[0094] This application embodiment provides a possible implementation, wherein the problem-solving visualization unit 530 is further used for: When generating the initial front-end code, each graphic element is assigned a unique identifier. When the large model generates the first side text response, it will automatically wrap the keywords with preset tags. Create a visual-text search graph, using the unique identifier of the graphic element as the key and the keywords in the text answer on the first side as the value; The interaction unit 540 is also used for: When a user triggers a keyword in the text response on the first side, the visual-text search graph is read, and the corresponding graph in the second-side graph drawing component is automatically highlighted, blinked, or has a numerical label displayed. When the user triggers the second-side graph, the visual-text search graph is read, and the corresponding keywords in the text answer on the first side are automatically highlighted.

[0095] Based on the same inventive concept, embodiments of this application also provide an electronic device, including a processor and a memory, wherein the memory stores a computer program, and the processor is configured to run the computer program to execute the interactive dynamic problem-solving visualization method based on the AI ​​learning system of any of the above embodiments.

[0096] In an exemplary embodiment, an electronic device is provided, such as Figure 6 As shown, Figure 6The illustrated electronic device 600 includes a processor 601 and a memory 603. The processor 601 and the memory 603 are connected, for example, via a bus 602. Optionally, the electronic device 600 may also include a transceiver 604. It should be noted that in practical applications, the transceiver 604 is not limited to one type, and the structure of this electronic device 600 does not constitute a limitation on the embodiments of this application.

[0097] Processor 601 may be a CPU (Central Processing Unit), GPU (Graphics Processing Unit), DSP (Digital Signal Processor), ASIC (Application Specific Integrated Circuit), FPGA, or other programmable logic devices, transistor logic devices, hardware components, or any combination thereof. It can implement or execute the various exemplary logic blocks, modules, and circuits described in conjunction with the disclosure of this application. Processor 601 may also be a combination that implements computational functions, such as including one or more microprocessor combinations, a combination of a DSP and a microprocessor, etc.

[0098] Bus 602 may include a pathway for transmitting information between the aforementioned components. Bus 602 may be a PCI (Peripheral Component Interconnect) bus or an EISA (Extended Industry Standard Architecture) bus, etc. Bus 602 can be divided into address bus, data bus, control bus, etc. For ease of representation, Figure 6 The bus is represented by a single thick line, but this does not mean that there is only one bus or one type of bus.

[0099] The memory 603 may be a ROM (Read Only Memory) or other type of static storage device capable of storing static information and instructions, RAM (Random Access Memory) or other type of dynamic storage device capable of storing information and instructions, or an EEPROM (Electrically Erasable Programmable Read Only Memory), CD-ROM (Compact Disc Read Only Memory) or other optical disc storage, optical disc storage (including compressed optical discs, laser discs, optical discs, digital universal optical discs, Blu-ray discs, etc.), magnetic disk storage media or other magnetic storage devices, or any other medium capable of carrying or storing desired program code in the form of instructions or data structures and accessible by a computer, but not limited thereto.

[0100] The memory 603 stores computer program code that executes the scheme of this application, and its execution is controlled by the processor 601. The processor 601 executes the computer program code stored in the memory 603 to implement the content shown in the foregoing method embodiments.

[0101] Among them, electronic devices include, but are not limited to: mobile terminals such as mobile phones, laptops, digital radio receivers, PDAs (personal digital assistants), PADs (tablet computers), PMPs (portable multimedia players), and in-vehicle terminals (such as in-vehicle navigation terminals), as well as fixed terminals such as digital TVs and desktop computers. Figure 6 The electronic device shown is merely an example and should not impose any limitation on the functionality and scope of use of the embodiments of this application.

[0102] Based on the same inventive concept, this application also provides a storage medium storing a computer program, wherein the computer program is configured to execute the interactive dynamic problem-solving visualization method based on the AI ​​learning system of any of the above embodiments at runtime.

[0103] Based on the same inventive concept, this application also provides a computer program product, including a computer program configured to execute the interactive dynamic problem-solving visualization method based on the AI ​​learning system of any of the above embodiments at runtime.

[0104] Those skilled in the art will clearly understand that the specific working process of the systems, devices, and modules described above can be referred to the corresponding process in the foregoing method embodiments. For the sake of brevity, it will not be repeated here.

[0105] Those skilled in the art will understand that the technical solution of this application, or all or part of it, can be embodied in the form of a software product. This computer software product is stored in a storage medium and includes several program instructions to cause an electronic device (e.g., a personal computer, server, or network device) to execute all or part of the steps of the methods described in the embodiments of this application when running the program instructions. The aforementioned storage medium includes various media capable of storing program code, such as a USB flash drive, portable hard drive, read-only memory (ROM), random access memory (RAM), magnetic disk, or optical disk.

[0106] Alternatively, all or part of the steps of the foregoing method embodiments can be implemented by hardware (such as electronic devices like personal computers, servers, or network devices) associated with program instructions. The program instructions can be stored in a computer-readable storage medium. When the program instructions are executed by the processor of the electronic device, the electronic device executes all or part of the steps of the methods described in the embodiments of this application.

[0107] The above embodiments are only used to illustrate the technical solutions of this application, and are not intended to limit it. Although this application has been described in detail with reference to the foregoing embodiments, those skilled in the art should understand that within the spirit and principles of this application, modifications can still be made to the technical solutions described in the foregoing embodiments, or equivalent substitutions can be made to some or all of the technical features therein; and these modifications or substitutions do not cause the corresponding technical solutions to leave the protection scope of this application.

Claims

1. An interactive dynamic problem-solving visualization method based on an AI learning system, characterized in that, The method includes: Receive user input regarding the question content; The AI ​​learning system identifies and answers the questions, generating questions, solutions, and results. Submit the question, solution process, and result to the dynamic solution generator. The dynamic solution generator will then convert the solution process into interactive front-end code based on the question, solution process, and result, and integrate display animation effects and interactive modules. It receives interactive operations input by users through the interactive module and updates the problem-solving process and results in real time based on the interactive operations.

2. The method according to claim 1, characterized in that, A dynamic solution generator, based on the question, solution process, and result, transforms the solution process into interactive front-end code, integrating animation effects and interactive modules, including: The dynamic solution generator extracts a JSON object containing variables, results, and formulas based on the question, solution process, and result. The dynamic solution generator obtains the first prompt word containing the front-end code generation specification, submits the first prompt word to the preset large model, and receives the preliminary front-end code returned by the preset large model; Based on JSON objects, the initial front-end code is adjusted to transform the problem-solving process into interactive front-end code, integrating display animation effects and interactive modules.

3. The method according to claim 2, characterized in that, Before the dynamic solution generator obtains the first prompt word containing the front-end code generation specification, the method further includes: Create a host node on the original page containing the generated question, solution process, and result. The host node is used to subsequently mount the shadow root node. Calling the default method that represents mounting the shadow creates the shadow root node, thereby generating an isolated Document Object Model (DOM) container, so that the style files generated by the default large model only apply to this container. After receiving the initial front-end code returned by the preset large model, the method further includes: The initial front-end code is injected into the shadow root node.

4. The method according to claim 3, characterized in that, The front-end code generation specifications include technology stack constraints, component generation specifications, and validation rules.

5. The method according to claim 3, characterized in that, The dynamic solution generator extracts a JSON object containing variables, results, and formulas based on the problem, solution process, and result, including: The dynamic solution generator obtains the second hint word and submits the second hint word, the question, the solution process, and the result to the preset large model. Receives a JSON object containing variables, results, and formulas returned by a pre-defined large model.

6. The method according to claim 5, characterized in that, The second prompt is constructed based on the pre-set large model that returns a JSON object containing variables, results, and formulas according to the question, solution process, and result; the second prompt includes task description, JSON specification, processing requirements, input example, output example, current task, and output requirements.

7. The method according to claim 2, characterized in that, Based on the JSON object, the initial front-end code was adjusted, including: Based on the JSON object, the variables in the JSON object are bound to the front-end tags in the initial front-end code; When the pre-defined JavaScript glue code detects changes in variables within the JSON object, it automatically triggers a redraw function to update the problem-solving process and results in real time.

8. The method according to claim 2, characterized in that, The method further includes: Use the formulas in the JSON object as a list of geometric constraints; Output the constraint descriptions from the list of geometric constraints; A pre-built geometric constraint solving engine is provided on the browser side for parsing interactive front-end code; The problem-solving process and results are updated in real time based on interactive operations, including: The geometric constraint solving engine is used to solve for the new position corresponding to the interactive operation according to the constraint description. The graphics drawing component draws according to the new position corresponding to the solved interactive operation, and updates the problem-solving process and results in real time.

9. The method according to claim 2, characterized in that, The method further includes: When generating the initial front-end code, each graphic element is assigned a unique identifier. When the large model generates the first side text response, it will automatically wrap the keywords with preset tags. Create a visual-text search graph, using the unique identifier of the graphic element as the key and the keywords in the text answer on the first side as the value; When a user triggers a keyword in the text response on the first side, the visual-text search graph is read, and the corresponding graph in the second-side graph drawing component is automatically highlighted, blinked, or has a numerical label displayed. When the user triggers the second-side graph, the visual-text search graph is read, and the corresponding keywords in the text answer on the first side are automatically highlighted.

10. An interactive dynamic problem-solving visualization device based on an AI learning system, characterized in that, The device includes: The receiving unit is used to receive the question content input by the user; The generation unit is used to identify and answer the question content based on the AI ​​learning system, and generate the question, the solution process and the result; The problem-solving visualization unit is used to submit the problem, solution process, and result to the dynamic solution generator. The dynamic solution generator then converts the solution process into interactive front-end code based on the problem, solution process, and result, and integrates display animation effects and interactive modules. The interaction unit is used to receive interactive operations input by the user through the interaction module, and to update the problem-solving process and results in real time based on the interactive operations.

11. An electronic device, characterized in that, The system includes a processor and a memory, wherein the memory stores a computer program, and the processor is configured to run the computer program to perform the interactive dynamic problem-solving visualization method based on the AI ​​learning system according to any one of claims 1 to 9.

12. A storage medium, characterized in that, The storage medium stores a computer program, wherein the computer program is configured to execute the interactive dynamic problem-solving visualization method based on the AI ​​learning system according to any one of claims 1 to 9 at runtime.

13. A computer program product, comprising a computer program, characterized in that, The computer program is configured to execute the interactive dynamic problem-solving visualization method based on the AI ​​learning system as described in any one of claims 1 to 9 at runtime.

Images