Product prototype interface generation method and device, electronic equipment and storage medium

Abstract

The embodiment of the invention provides a product prototype interface generation method and device, electronic equipment and a storage medium, belongs to the technical field of artificial intelligence, and is suitable for the field of financial science and technology. The method comprises the steps of obtaining a product demand document of a target product; performing document analysis on the product demand document to obtain original document elements; performing structured conversion on the original document elements to obtain an initial document prompt template; performing logical reasoning on the initial document prompt template to obtain a product technical document; performing code conversion based on the product technical document to obtain a product prototype code; and performing page rendering based on the product prototype code to obtain a product prototype interface of the target product. According to the embodiment of the invention, the accuracy of product prototype interface generation can be improved.

Description

TECHNICAL FIELD

[0001] The present application relates to the technical field of artificial intelligence, and is suitable for the field of financial technology, in particular to a product prototype interface generation method and device, an electronic device and a storage medium. BACKGROUND

[0002] The product prototype interface generation technology is a method of verifying product design, function and user experience by quickly constructing an interactive model. The product prototype generation technology is suitable for many application scenarios. For example, in the financial technology scenario, a product prototype interface is generated according to the requirement document of an insurance product, a financial product or the like, thereby shortening the product development cycle.

[0003] At present, preset prototype components are mainly used for combination when generating a prototype interface. However, in the actual application process, the requirement document content of a product is relatively complex and contains many compliance clauses. The simple combination of prototype components cannot accurately generate a product prototype interface, thereby affecting the accuracy of product prototype interface generation.

[0004] Therefore, how to improve the accuracy of product prototype interface generation has become a technical problem to be solved. SUMMARY

[0005] The main purpose of the embodiments of the present application is to provide a product prototype interface generation method and device, an electronic device and a storage medium, which aims to improve the accuracy of product prototype interface generation.

[0006] To achieve the above purpose, a first aspect of the embodiments of the present application provides a product prototype interface generation method, which comprises the following steps:

[0007] Obtaining a product requirement document of a target product;

[0008] Performing document analysis on the product requirement document to obtain original document elements;

[0009] Performing structured conversion on the original document elements to obtain an initial document prompt template;

[0010] Performing logical reasoning on the initial document prompt template to obtain a product technical document;

[0011] Performing code conversion based on the product technical document to obtain product prototype code;

[0012] Performing page rendering based on the product prototype code to obtain a product prototype interface of the target product.

[0013] In some embodiments, the original document element includes: a product module element, an interaction description element, and a technical constraint element; the structured conversion of the original document element to obtain an initial document prompt template includes:

[0014] menu parsing of the product module element to obtain menu level information;

[0015] logical parsing of the menu level information and the interaction description element to obtain interaction logic information;

[0016] architectural decomposition of the technical constraint element to obtain prototype constraint condition information;

[0017] structured processing based on the menu level information, the interaction logic information, and the prototype constraint condition information to obtain the initial document prompt template.

[0018] In some embodiments, the menu parsing of the product module element to obtain menu level information includes:

[0019] hierarchical decomposition of the product module element to obtain at least one menu level;

[0020] element parsing of each of the menu levels to obtain menu sub-elements;

[0021] layout positioning of the menu sub-elements to obtain sub-element position information;

[0022] feature combination based on the menu sub-elements and the sub-element position information to obtain the menu level information.

[0023] In some embodiments, the logical parsing of the menu level information and the interaction description element to obtain interaction logic information includes:

[0024] element association based on the interaction description element and the menu level information to obtain an interaction relationship graph;

[0025] logical connection of the interaction relationship graph based on the interaction description element to obtain an interaction logic link;

[0026] standardized processing of the interaction logic link to obtain the interaction logic information.

[0027] In some embodiments, the product technical document includes a functional module topology, functional module permission information, and functional module layout information; the logical reasoning of the initial document prompt template to obtain a product technical document includes:

[0028] entity extraction of the initial document prompt template to obtain original entity information;

[0029] performing directed graph construction on the original entity information to obtain a prototype directed graph;

[0030] performing topological sorting based on the prototype directed graph to obtain the functional module topological graph;

[0031] performing permission analysis on the initial document prompt template to obtain the functional module permission information;

[0032] performing component layout on the initial document prompt template to obtain functional module layout information.

[0033] In some embodiments, the code conversion based on the product technical document to obtain product prototype code includes:

[0034] generating an element mapping table based on the functional module topological graph;

[0035] generating original product code based on the element mapping table and the functional module permission information;

[0036] performing layout adjustment on the original product code based on the functional module layout information to obtain initial product code;

[0037] performing code encapsulation on the initial product code to obtain target product code;

[0038] performing code verification on the target product code to obtain the product prototype code.

[0039] In some embodiments, after the page rendering based on the product prototype code to obtain the product prototype interface of the target product, the method further includes:

[0040] receiving a product prototype modification instruction and performing instruction analysis on the prototype modification instruction to obtain modification element information;

[0041] performing element screening on the product prototype code based on the modification element information to obtain candidate modification elements;

[0042] modifying the candidate modification elements in the product prototype code based on the modification element information to obtain target prototype code, and performing page rendering based on the target prototype code.

[0043] To achieve the above-mentioned purpose, a second aspect of the embodiment of the present application proposes a product prototype interface generation device, the device includes:

[0044] a requirement document acquisition module configured to acquire product requirement documents of a target product;

[0045] The document analysis module is configured to analyze the product requirement document to obtain original document elements.

[0046] The structured processing module is configured to perform structured conversion on the original document elements to obtain an initial document prompt template.

[0047] The logic reasoning module is configured to perform logic reasoning on the initial document prompt template to obtain a product technical document.

[0048] The code conversion module is configured to perform code conversion based on the product technical document to obtain product prototype code.

[0049] The page rendering module is configured to perform page rendering based on the product prototype code to obtain a product prototype interface of the target product.

[0050] To achieve the above object, a third aspect of the embodiment of the present application provides an electronic device, which comprises a memory and a processor, the memory stores a computer program, and the processor implements the method of the first aspect when executing the computer program.

[0051] To achieve the above object, a fourth aspect of the embodiment of the present application provides a computer readable storage medium, which stores a computer program, and the computer program is executed by a processor to implement the method of the first aspect.

[0052] The product prototype interface generation method and device, electronic device and storage medium provided by the present application can obtain the product requirement document of the target product, analyze the product requirement document to obtain original document elements, reduce the errors and deviations of manual analysis, perform structured conversion on the original document elements to obtain an initial document prompt template, improve consistency and reusability, perform logic reasoning on the initial document prompt template to obtain a product technical document, ensure the accuracy and integrity of reasoning, further perform code conversion based on the product technical document to obtain product prototype code, significantly reduce development time and error rate, finally perform page rendering based on the product prototype code to obtain a product prototype interface of the target product, and the prototype interface is rendered more quickly and accurately, the product development cycle is shortened, and the accuracy and quality of the product prototype interface generation are improved. BRIEF DESCRIPTION OF DRAWINGS

[0053] Figure 1 is a flowchart of the product prototype interface generation method provided by the embodiment of the present application;

[0054] Figure 2 is a flowchart of step S103 in Figure 1

[0055] Figure 3 is​Figure 2 The flowchart of step S201 in the text;

[0056] Figure 4 yes Figure 2 The flowchart of step S202 in the document;

[0057] Figure 5 yes Figure 1 The flowchart of step S104 in the process;

[0058] Figure 6 yes Figure 1 The flowchart of step S105 in the process;

[0059] Figure 7 This is a flowchart of a product prototype interface generation method provided in another embodiment of this application;

[0060] Figure 8 This is a schematic diagram of the structure of the product prototype interface generation device provided in the embodiments of this application;

[0061] Figure 9 This is a schematic diagram of the hardware structure of the electronic device provided in the embodiments of this application. Detailed Implementation

[0062] To make the objectives, technical solutions, and advantages of this application clearer, the following detailed description is provided in conjunction with the accompanying drawings and embodiments. It should be understood that the specific embodiments described herein are merely illustrative and not intended to limit the scope of this application.

[0063] It should be noted that although functional modules are divided in the device schematic diagram and a logical order is shown in the flowchart, in some cases, the steps shown or described may be performed in a different order than the module division in the device or the order in the flowchart. The terms "first," "second," etc., in the specification, claims, and the aforementioned drawings are used to distinguish similar objects and are not necessarily used to describe a specific order or sequence.

[0064] Unless otherwise defined, all technical and scientific terms used herein have the same meaning as commonly understood by one of ordinary skill in the art to which this application belongs. The terminology used herein is for the purpose of describing embodiments of this application only and is not intended to limit this application.

[0065] First, let's analyze some of the terms used in this application:

[0066] Artificial intelligence (AI): is a new technical science of studying, developing theories, methods, technologies and application systems for simulating, extending and expanding human intelligence; artificial intelligence is a branch of computer science, artificial intelligence attempts to understand the essence of intelligence and produce a new intelligent machine that can react in a similar way to human intelligence. The research in this field includes robots, language recognition, image recognition, natural language processing and expert systems. Artificial intelligence can simulate the information process of human consciousness and thinking. Artificial intelligence is also the theory, method, technology and application system of using digital computer or digital computer controlled machine to simulate, extend and expand human intelligence, perceive environment, acquire knowledge and use knowledge to obtain the best results.

[0067] Product prototype interface generation technology is a method of verifying product design, function and user experience by quickly building an interactive model, covering core elements such as user operation process, interface layout, element interaction and visual level. It is presented in the form of low-fidelity or high-fidelity. Low-fidelity prototypes focus on functional framework, and quickly verify the rationality of requirements through wireframes or sketches; high-fidelity prototypes simulate real product effects, including color, icon, animation and other details, for user testing or internal review. The core value lies in: 1) reducing communication costs, so that team members can intuitively understand product logic; 2) discovering design defects in advance, optimizing interaction processes through user testing; 3) providing clear references for development, reducing the risk of rework.

[0068] Product prototype generation technology is suitable for many application scenarios, for example, in the financial technology scenario, product prototype interfaces are generated according to the requirement documents of insurance products, financial products and other products, shortening the product development cycle.

[0069] Currently, when generating a prototype interface, preset prototype components are mainly used for combination, but in the actual application process, the content of the product requirement document is complex and contains many compliance clauses. The simple combination of prototype components cannot accurately generate the product prototype interface, affecting the accuracy of product prototype interface generation.

[0070] Therefore, the embodiments of the present application provide a product prototype interface generation method and device, an electronic device and a storage medium, which aim to improve the accuracy of product prototype interface generation.

[0071] The product prototype interface generation method and device, the electronic device and the storage medium provided by the embodiments of the present application are specifically explained by the following embodiments, and first, the product prototype interface generation method in the embodiments of the present application is described.

[0072] The embodiments of the present application can acquire and process related data based on artificial intelligence technology. The artificial intelligence (AI) is a theory, method, technology and application system for simulating, extending and expanding human intelligence by using a digital computer or a machine controlled by a digital computer, perceiving an environment, acquiring knowledge and using the knowledge to obtain optimal results.

[0073] The artificial intelligence basic technology generally includes technologies such as sensors, special artificial intelligence chips, cloud computing, distributed storage, big data processing technology, operation / interaction system, mechatronics, etc. The artificial intelligence software technology mainly includes computer vision technology, robot technology, biometric technology, speech processing technology, natural language processing technology, and machine learning / deep learning, etc.

[0074] The product prototype interface generation method provided by the embodiments of the present application relates to the field of artificial intelligence. The product prototype interface generation method provided by the embodiments of the present application can be applied in a terminal, can also be applied in a server end, and can also be software running in a terminal or a server end. In some embodiments, the terminal can be a smart phone, a tablet computer, a notebook computer, a desktop computer, etc.; the server end can be configured as an independent physical server, can also be configured as a server cluster or a distributed system composed of multiple physical servers, can also be configured as a cloud server providing basic cloud computing services such as cloud service, cloud database, cloud computing, cloud function, cloud storage, network service, cloud communication, middleware service, domain name service, security service, CDN, and big data and artificial intelligence platform; and the software can be an application for implementing the product prototype interface generation method, etc., but is not limited to the above forms.

[0075] The present application can be used in many general or special computer system environments or configurations. For example: personal computers, server computers, handheld devices or portable devices, tablet devices, multi-processor systems, microprocessor-based systems, set-top boxes, programmable consumer electronics, network PCs, minicomputers, mainframe computers, distributed computing environments including any of the above systems or devices, etc. The present application can be described in the general context of computer-executable instructions executed by a computer, such as program modules. Generally, program modules include routines, programs, objects, components, data structures, etc. that perform specific tasks or implement specific abstract data types. The present application can also be practiced in a distributed computing environment in which tasks are performed by remote processing devices connected by a communication network. In a distributed computing environment, program modules can be located in local and remote computer storage media, including storage devices.

[0076] It should be noted that in various specific embodiments of the present application, when relevant processing needs to be performed on data related to the identity or characteristics of the user, such as user information, user behavior data, user history data, and user location information, the user's permission or consent is obtained first, and the collection, use, and processing of such data comply with relevant laws, regulations, and standards. In addition, when the embodiments of the present application need to obtain sensitive personal information of the user, the separate permission or separate consent of the user is obtained through a pop-up window or a jump to a confirmation page, and after obtaining the separate permission or separate consent of the user, the necessary user-related data for the normal operation of the embodiments of the present application is obtained.

[0077] Figure 1 is an optional flowchart of a product prototype interface generation method provided by the embodiments of the present application, Figure 1 The method in the above step S101-S106 can include but is not limited to including steps S101-S106.

[0078] Step S101, obtaining a product requirement document of a target product;

[0079] Step S102, performing document analysis on the product requirement document to obtain original document elements;

[0080] Step S103, performing structural conversion on the original document elements to obtain an initial document prompt template;

[0081] Step S104, performing logical reasoning on the initial document prompt template to obtain a product technical document;

[0082] Step S105, performing code conversion based on the product technical document to obtain a product prototype code;

[0083] Step S106, performing page rendering based on the product prototype code to obtain a product prototype interface of the target product.

[0084] The steps S101-S106 shown in the embodiments of the present application, by obtaining a product requirement document of a target product, performing document analysis on the product requirement document to obtain original document elements, reducing errors and biases of manual analysis. Then, performing structural conversion on the original document elements to obtain an initial document prompt template, improving information consistency. Performing logical reasoning on the initial document prompt template to obtain a product technical document, ensuring the accuracy and completeness of the reasoning. Further, performing code conversion based on the product technical document to obtain a product prototype code, significantly reducing development time and error rate. Finally, performing page rendering based on the product prototype code to obtain a product prototype interface of the target product, the prototype interface rendering is faster and more accurate, shortens the product development cycle, and improves the accuracy and quality of the product prototype interface generation.

[0085] In step S101 of some embodiments, in a financial technology scenario, the target product can be an insurance product (such as car insurance, life insurance, property insurance, medical insurance), a financial product (such as a fund, a bond, etc.), or the like. The product requirement document is a formal document describing the product functions, user interactions, business logic, and technical constraints of the target product, and usually includes modules such as requirement background, function list, non-functional requirements, etc.

[0086] Specifically, in the financial technology scenario, the product requirement document further includes some regulatory information, filing information, risk warning information, etc.

[0087] In other embodiments, in addition to being an insurance product, a financial product, the target product can also be a new application, a new web page, a new function of a web page, an e-commerce product, etc., without limitation.

[0088] In step S102 of some embodiments, the product requirement document is parsed by natural language processing (such as BERT, Spacy, Jieba, etc.) technology to extract structured information such as entities (users, orders), actions (clicks, payments), conditions (“if the password is incorrect, display login failure”), thereby converting unstructured text into machine-readable data and improving subsequent processing efficiency.

[0089] Specifically, the original document elements include product module elements, interaction description elements, and technical constraint elements.

[0090] The product module elements are used to describe the constituent units of the product function modules (such as “user login module” and “payment process module”).

[0091] The interaction description elements are used to define the operation logic between the user and the system (such as “after clicking the ‘submit’ button, jump to the order confirmation page”).

[0092] The technical constraint elements are used to explicitly define technical limitations in the development process (such as “need to be compatible with iOS / Android dual platforms”, “use Java language”, “interface response time ≤ 500 ms”).

[0093] Please refer to Figure 2 In some embodiments, step S103 can include, but is not limited to, steps S201 to S204:

[0094] Step S201, menu parsing is performed on the product module elements to obtain menu level information;

[0095] Step S202, logic parsing is performed on the menu level information and the interaction description elements to obtain interaction logic information;

[0096] Step S203, performing architecture decomposition on the technical constraint element to obtain prototype constraint condition information;

[0097] Step S204, performing structured processing based on the menu level information, the interaction logic information and the prototype constraint condition information to obtain an initial document prompt template.

[0098] The steps S201 to S204 shown in the embodiments of the present application obtain more refined menu information by performing menu analysis on the product module element, obtain menu level information, ensure the completeness of the menu and reduce the subsequent analysis complexity. Then, the interaction logic information is obtained by performing logic analysis on the menu level information and the interaction description element, so as to avoid the omission of interaction design. Further, the prototype constraint condition information is obtained by performing architecture decomposition on the technical constraint element, so as to avoid the UI framework compatibility risk in advance. Finally, the initial document prompt template is obtained by performing structured processing based on the menu level information, the interaction logic information and the prototype constraint condition information, a standardized input is provided, the cross-link communication cost is reduced, the rework rate in the later stage is reduced through the preposed constraint condition, the accurate and efficient conversion from the demand to the prototype is realized, and the prototype development efficiency and quality are significantly improved.

[0099] Please refer to Figure 3 In some embodiments, the step S201 can include but is not limited to steps S301 to S304:

[0100] Step S301, performing hierarchical decomposition on the product module element to obtain at least one menu level;

[0101] Step S302, performing element analysis on each menu level to obtain menu sub-elements;

[0102] Step S303, performing layout positioning on the menu sub-elements to obtain sub-element position information;

[0103] Step S304, performing feature combination based on the menu sub-elements and the sub-element position information to obtain menu level information.

[0104] The steps S301 to S304 shown in the embodiments of the present application obtain at least one menu level by performing hierarchical decomposition on the product module element, can systematize the product function architecture, and avoid the omission or redundancy caused by hierarchical confusion. Then, the menu sub-elements corresponding to each menu level are obtained by performing element analysis on each menu level, and the sub-element position information is obtained by performing layout positioning on the menu sub-elements, so as to clearly define the position of the menu sub-elements in the prototype interface. Finally, the menu level information is obtained by performing feature combination based on the menu sub-elements and the sub-element position information, which is helpful to improve the demand conversion efficiency and enhance the accuracy of product function implementation.

[0105] In step S301 of some embodiments, product module elements can be split into a tree structure according to functional logic, for example, a "settings" module is split into "account settings" (a first-level menu) and "password modification" (a second-level menu). Through a top-down decomposition method, the hierarchical attribution of the module is determined, avoiding functional overlap or omission.

[0106] In step S302 of some embodiments, by atomically splitting each menu level, all interactive components and attributes (such as input boxes, buttons, drop-down menus) are identified, thereby obtaining menu sub-elements, wherein the menu sub-elements are used to represent the smallest functional unit under the menu level. By enumerating menu sub-elements, functional point omission is avoided.

[0107] For example, the "product details" menu of "a certain insurance product" contains "product introduction", "risk introduction", "claim handling process", etc.

[0108] In step S303 of some embodiments, the spatial coordinates or relative positions of each menu sub-element in the interface corresponding to the menu level are determined, providing accurate layout parameters to avoid misplacement of different page elements and ensure interface consistency.

[0109] For example, in the "login" page, the "username input box" is defined to be 100px from the top, the "password input box" is located 30px below it, and the "login button" is displayed centered with a width of 80% of the page width.

[0110] In step S304 of some embodiments, by combining the characteristics of each menu sub-element and sub-element position information, association is achieved, and complete menu level information is obtained, which can be directly used for front-end rendering, reducing manual coding errors. When modifying the level, only the configuration file needs to be adjusted, without changing the code logic, thereby helping to improve the accuracy of product prototype interface generation.

[0111] Please refer to Figure 4 In some embodiments, step S202 can include but is not limited to steps S401 to S403:

[0112] Step S401, based on the interactive description elements and menu level information, the elements are associated to obtain an interactive relationship graph;

[0113] Step S402, based on the interactive description elements, the interactive relationship graph is logically connected to obtain an interactive logic link;

[0114] Step S403, the interactive logic link is standardized to obtain interactive logic information.

[0115] The steps S401 to S403 shown in the embodiments of the present application are used to obtain an interaction relationship graph by associating elements based on the interaction description elements and the menu level information, which can clearly present the association structure between elements. Then, the interaction logic link is obtained by logically connecting the interaction relationship graph based on the interaction description elements, which can intuitively reflect the operation process and the information flow path. Finally, the interaction logic information is obtained by standardizing the interaction logic link, and the structuring and standardization of the interaction logic are finally realized, which helps to improve the efficiency of generating the prototype interface.

[0116] In step S401 of some embodiments, element association refers to establishing a mapping relationship between the interaction description elements and the menu sub-elements of each menu level information, which can convert the scattered interaction description elements into a hierarchical graph, avoiding information omission or misplacement.

[0117] For example: By analyzing the operation description in the interaction document (such as “click the ‘submit’ button to jump to the confirmation page”), it is bound with the specific position in the menu level (such as “home page→form page→submit button”), forming a clear path dependence.

[0118] In step S402 of some embodiments, directed edges (such as arrows, conditional branches) are added between the nodes of the interaction relationship graph according to the operation sequence or system response rules, thereby forming a complete operation process to obtain the interaction logic link, which can show the user operation path, facilitate the verification of function rationality, and avoid development misunderstanding.

[0119] For example: Based on the interaction relationship graph, dynamic logic (such as branches, loops, exception handling) is added between nodes in combination with the condition judgment in the interaction description (such as “if the password is incorrect, display an error prompt”).

[0120] In step S403 of some embodiments, non-standardized descriptions in the interaction logic link are converted into the same format to form structured and reusable interaction logic information. The standardized information can drive the front-end framework to automatically render the interface.

[0121] For example: Replace “click the button, if successful, jump, otherwise, error” with “start→operation A→condition judgment→operation B→end”.

[0122] In step S203 of some embodiments, the technical constraint elements are disassembled into quantifiable constraint conditions to ensure that the prototype is compatible with the development environment, to find framework conflicts (such as some animation effects are not compatible in certain browsers) in advance, and to avoid poor prototype generation effects caused by technical selection differences.

[0123] For example: The prototype constraint condition information can be: “layout system: must use CSS Grid to implement page structure”.

[0124] In step S204 of some embodiments, the menu level information, the interaction logic information and the prototype constraint condition information are integrated according to a preset rule or template to obtain a standardized template, that is, an initial document prompt template, so as to realize accurate and efficient conversion from requirements to prototypes.

[0125] In step S104 of some embodiments, the product technical document includes the function module topology graph, the function module permission information and the function module layout information.

[0126] Please refer to Figure 5 In some embodiments, step S104 can include, but is not limited to, steps S501 to S505:

[0127] Step S501, entity extraction is performed on the initial document prompt template to obtain original entity information;

[0128] Step S502, directed graph construction is performed on the original entity information to obtain a prototype directed graph;

[0129] Step S503, topology sorting is performed based on the prototype directed graph to obtain a function module topology graph;

[0130] Step S504, permission analysis is performed on the initial document prompt template to obtain function module permission information;

[0131] Step S505, component layout is performed on the initial document prompt template to obtain function module layout information.

[0132] The steps S501 to S505 shown in the embodiments of the present application can accurately locate key information by performing entity extraction on the initial document prompt template to obtain original entity information. Then, directed graph construction is performed on the original entity information to obtain a prototype directed graph, and topology sorting is performed based on the prototype directed graph to obtain a function module topology graph, which can clarify the module execution order and ensure the rationality of the process. Permission analysis is performed on the initial document prompt template to obtain function module permission information, and component layout is performed on the initial document prompt template to obtain function module layout information, which can improve system development efficiency and enhance function logic accuracy.

[0133] In step S501 of some embodiments, natural language processing (such as BERT) technology is used to perform entity extraction from the initial document prompt template to obtain original entity information, which can avoid errors in manual analysis and improve information extraction efficiency. The original entity information is structured data after extraction, such as "user login", "data query" and "claim query".

[0134] In step S502 of some embodiments, the original entity information is converted into a visual graph structure based on the entity relationship between the original entity information, the logical association of the functional modules is determined, an original directed graph is obtained, and the system flow is intuitively displayed.

[0135] Further, the prototype directed graph is linearly sorted to obtain a functional module topology graph, which is a functional module sequence diagram arranged in execution order, and is used to determine the reasonable execution order of the functional modules and avoid circular dependency or logical conflict.

[0136] In step S504 of some embodiments, the mapping relationship between the user roles and the operation permissions is extracted from the initial document prompt template, and the stored permission rules are structured and stored, usually in the form of a role-permission matrix, to obtain functional module permission information, which is used to determine the permissions of different roles to the functional modules and can enhance the system security.

[0137] In step S505 of some embodiments, the position and arrangement of each functional module in the interface are planned according to the interaction logic of the functional modules and the user experience principle to obtain functional module layout information, wherein the functional module layout information is used for the data of the coordinates, size, level, etc. of the functional modules.

[0138] Please refer to Figure 6 In some embodiments, step S105 includes but is not limited to steps S601 to S605:

[0139] Step S601, generating an element mapping table based on the functional module topology graph;

[0140] Step S602, generating an original product code based on the element mapping table and the functional module permission information;

[0141] Step S603, adjusting the layout of the original product code based on the functional module layout information to obtain an initial product code;

[0142] Step S604, code packaging of the initial product code to obtain a target product code;

[0143] Step S605, code verification of the target product code to obtain a product prototype code.

[0144] The steps S601 to S605 shown in the embodiments of the present application generate an element mapping table based on the function module topology graph, and generate the original product code based on the element mapping table and the function module permission information, to ensure the accuracy of function implementation, guarantee the underlying embedding of permission control, and improve security. Then, the original product code is layout adjusted based on the function module layout information to obtain the initial product code, to optimize user experience. Finally, the initial product code is code packaged to obtain the target product code, and the target product code is code verified to obtain the product prototype code, to improve the automation level of code conversion, and balance functionality, security, ease of use and maintainability.

[0145] In step S601 of some embodiments, the function modules in the function module topology graph are mapped into a corresponding relationship table of code structure elements (such as component name, method name, data field), to obtain an element mapping table, to ensure that the code generation is consistent with the requirements, avoid errors in manual conversion, and improve development efficiency.

[0146] In step S602 of some embodiments, the preliminary product code is generated according to the function module permission information and the element mapping table, to improve the security of the product prototype.

[0147] In step S603 of some embodiments, the original product code is layout adjusted according to the arrangement rules (such as CSSGrid layout, 8px reference spacing) recorded in the function module layout information to obtain the initial product code, which can automatically perform layout adjustment and unify the interface style.

[0148] In step S604 of some embodiments, the repeated code in the initial product code is extracted as a reusable component (such as a button, a form), which can improve code reuse rate, reduce code redundancy, and reduce maintenance cost.

[0149] In step S605 of some embodiments, the code specification, permission logic and layout compliance can be checked by a static analysis tool (such as ESLint) to discover potential errors (such as permission overreach, layout disorder) in advance, to improve code quality and accelerate development of the product prototype.

[0150] In some embodiments, the product prototype code can be HTML code, or Flutter code, ProtoPie code, etc., without limitation.

[0151] Page rendering refers to converting code into a visual interface, including layout, style, interactive effect, etc., which is usually implemented through a browser engine or a cross-platform framework (such as Flutter).

[0152] In step S106 of some embodiments, the product prototype code is executed and a DOM tree or FlutterWidget tree is dynamically generated, combined with CSS / Flex layout to render the final page, obtaining the product prototype interface of the target product. The product interaction and design consistency can be quickly verified, and user test feedback is supported.

[0153] For example: for an insurance product, the interface containing "insurance introduction", "insurance purchase" and "customer consultation" is rendered, and sliding, clicking and other interactions are supported.

[0154] Please refer to Figure 7 After step S106 of some embodiments, it can include but is not limited to steps S701 to S703:

[0155] Step S701, receiving product prototype modification instructions, and performing instruction analysis on the prototype modification instructions to obtain modification element information;

[0156] Step S702, based on the modification element information, element screening is performed on the product prototype code to obtain candidate modification elements;

[0157] Step S703, based on the modification element information, the candidate modification elements in the product prototype code are modified to obtain target prototype code, and page rendering is performed based on the target prototype code.

[0158] The steps S701 to S703 shown in the embodiments of the present application, by receiving and analyzing the product prototype modification instructions, accurate modification element information is obtained, which clearly targets the subsequent modification operation. Then, based on the modification element information, element screening is performed on the product prototype code to obtain candidate modification elements, quickly positioning the adjustment object, improving the processing efficiency. Finally, based on the modification element information, the candidate modification elements in the product prototype code are modified to obtain target prototype code, and page rendering is performed based on the target prototype code, realizing dynamic updating and real-time visual presentation of the prototype code, accurately responding to user needs, quickly verifying the modification effect, significantly shortening the prototype iteration cycle, and improving the development efficiency and quality.

[0159] In step S701 of some embodiments, the product development personnel generates product prototype modification instructions through a pre-set interactive interface or modification tool, and the product prototype modification instructions include elements to be modified and related parameters to be modified. By analyzing the product prototype modification instructions, modification element information is obtained, which is structured data after analysis, containing DOM node identification and specific attributes to be modified. By analyzing the instructions, the user's vague modification intention is converted into accurate code operation target, improving the modification accuracy and reducing the human understanding deviation.

[0160] For example, "change the button color to red" or "adjust the picture size to 200x200".

[0161] In step S702 of some embodiments, the corresponding DOM node or CSS rule in the product prototype code is located according to the identifier (such as ID, class name) in the modification element information, and the candidate modification element is obtained. Quickly lock the code range that needs to be modified, improve the modification efficiency.

[0162] Among them, the candidate modification element is a code segment set that meets the filtering condition, and may include multiple associated elements.

[0163] In step S703 of some embodiments, the candidate modification element in the product prototype code is modified based on the modification element information, and the target prototype code is obtained. The target prototype code is the complete code after modification, including the updated DOM structure or CSS attribute.

[0164] After obtaining the target prototype code and based on the target prototype code, the page is rendered to realize real-time visualization of the modification effect, support quick verification of the modification effect, form an "adjust-feedback" iterative closed loop, help shorten the prototype development cycle, and improve the accuracy and quality of product prototype interface generation.

[0165] Please refer to Figure 8 The embodiments of the present application also provide a product prototype interface generation device, which can realize the product prototype interface generation method described above. The device comprises:

[0166] The demand document acquisition module 801 is configured to acquire the product demand document of the target product.

[0167] The document analysis module 802 is configured to analyze the product demand document to obtain original document elements.

[0168] The structured processing module 803 is configured to perform structured conversion on the original document elements to obtain an initial document prompt template.

[0169] The logic reasoning module 804 is configured to perform logic reasoning on the initial document prompt template to obtain a product technical document.

[0170] The code conversion module 805 is configured to perform code conversion based on the product technical document to obtain a product prototype code.

[0171] The page rendering module 806 is configured to perform page rendering based on the product prototype code to obtain the product prototype interface of the target product.

[0172] The specific implementation of the product prototype interface generation device is basically the same as the specific embodiments of the product prototype interface generation method described above, and will not be repeated here.

[0173] The embodiment of the present application further provides an electronic device, which comprises a memory and a processor, the memory stores a computer program, and the processor implements the product prototype interface generation method when executing the computer program. The electronic device can be any intelligent terminal including a tablet computer, a vehicle-mounted computer and the like.

[0174] Please refer to Figure 9 , Figure 9 The hardware structure of the electronic device of another embodiment is illustrated, which comprises:

[0175] The processor 901 can be implemented in the form of a general CPU (Central Processing Unit), a microprocessor, an ASIC (Application Specific Integrated Circuit), or one or more integrated circuits, and is used to execute related programs to implement the technical solutions provided by the embodiments of the present application.

[0176] The memory 902 can be implemented in the form of a ROM (ReadOnly Memory), a static storage device, a dynamic storage device or a RAM (Random Access Memory). The memory 902 can store an operating system and other application programs, and when the technical solutions provided by the embodiments of the present application are implemented by software or firmware, the related program codes are stored in the memory 902 and are called and executed by the processor 901 to implement the product prototype interface generation method of the embodiments of the present application.

[0177] The input / output interface 903 is used to realize information input and output.

[0178] The communication interface 904 is used to realize the communication interaction between the device and other devices, and can realize communication through a wired manner (for example, a USB, a network cable and the like) or a wireless manner (for example, a mobile network, WIFI, Bluetooth and the like).

[0179] The bus 905 transmits information between various components (for example, the processor 901, the memory 902, the input / output interface 903 and the communication interface 904) of the device.

[0180] The processor 901, the memory 902, the input / output interface 903 and the communication interface 904 are connected to each other through the bus 905 to realize communication connection within the device.

[0181] The embodiment of the present application further provides a computer readable storage medium, which stores a computer program, and the computer program is executed by a processor to implement the product prototype interface generation method.

[0182] Memory, as a non-transitory computer-readable storage medium, can be used to store non-transitory software programs and non-transitory computer-executable programs. In addition, the memory can include a high-speed random access memory and can also include a non-transitory memory, such as at least one magnetic disk storage device, a flash memory device, or other non-transitory solid-state memory device. In some embodiments, the memory can optionally include a memory that is remotely arranged with respect to the processor, and these remote memories can be connected to the processor through a network. Examples of the above network include, but are not limited to, the Internet, an intranet, a local area network, a mobile communication network, and combinations thereof.

[0183] The product prototype interface generation method and device, electronic equipment and storage medium provided by the embodiments of the present application obtain the product requirement document of the target product, perform document analysis on the product requirement document, obtain the original document element, and reduce the errors and deviations of manual analysis. Then, the original document element is subjected to structured conversion to obtain an initial document prompt template, thereby improving consistency and reusability. The initial document prompt template is subjected to logical reasoning to obtain a product technical document, thereby ensuring the accuracy and integrity of the reasoning. Further, code conversion is performed based on the product technical document to obtain product prototype code, thereby significantly reducing development time and error rate. Finally, page rendering is performed based on the product prototype code to obtain the product prototype interface of the target product, the prototype interface is rendered more quickly and accurately, the product development cycle is shortened, and the accuracy and quality of the product prototype interface generation are improved.

[0184] The embodiments described in the embodiments of the present application are used to more clearly illustrate the technical solutions of the embodiments of the present application, and do not constitute a limitation on the technical solutions provided by the embodiments of the present application. Those skilled in the art can know that, with the evolution of technology and the appearance of new application scenarios, the technical solutions provided by the embodiments of the present application are also applicable to similar technical problems.

[0185] Those skilled in the art can understand that the technical solutions shown in the figures do not constitute a limitation on the embodiments of the present application, and can include more or fewer steps than the figures shown, or combine certain steps or different steps.

[0186] The device embodiments described above are only schematic, and the units described as separate components can or can not be physically separate, that is, can be located in one place, or can be distributed on multiple network units. Part or all of the modules can be selected according to actual needs to achieve the purpose of the embodiments of the present application.

[0187] Those skilled in the art can understand that all or some of the steps in the above disclosed method, the function modules / units in the system and the device can be implemented as software, firmware, hardware and their appropriate combinations.

[0188] The terms "first", "second", "third", "fourth" and the like in the description of this application and in the claims, if any, are used for distinguishing between similar elements and not necessarily for describing a particular sequential or chronological order. It is to be understood that the use of these terms herein is to be construed to cover a changeable order, sequence or arrangement, if any. Further, the terms "comprising", "having", "including", and "containing" and any variations thereof, are intended to cover a non-exclusive inclusion, such that a process, method, system, product or apparatus that comprises, has, includes or contains a list of elements is not necessarily limited to those elements, but can include other elements not expressly listed or inherent to such process, method, system, product or apparatus.

[0189] It should be understood that, in the application, "at least one" means one or more, and "multiple" means two or more. "And / or" is used to describe the relationship between associated objects, which means that there can be three relationships, for example, "A and / or B" can mean that there are three cases: only A, only B, and A and B at the same time, where A and B can be singular or plural. The character " / " generally represents an "or" relationship between the associated objects. "At least one of the following" or similar expressions means any combination of these items, including any combination of single or multiple items. For example, at least one of a, b or c can mean a, b, c, "a and b", "a and c", "b and c", or "a and b and c", where a, b, and c can be single or multiple.

[0190] In several embodiments provided in the application, it should be understood that the disclosed devices and methods can be implemented in other ways. For example, the device embodiments described above are only illustrative, for example, the division of the above units is only a logical function division, and actual implementation can have another division manner, for example, multiple units or components can be combined or integrated into another system, or some features can be ignored or not executed. In addition, the coupling or direct coupling or communication connection between the displayed or discussed each other can be indirect coupling or communication connection through some interfaces, devices or units, which can be electrical, mechanical or other forms.

[0191] The units described above as separate components can or can not be physically separated, and the components shown as units can or can not be physical units, that is, they can be located in one place, or they can be distributed on multiple network units. According to actual needs, part or all of the units can be selected to achieve the purpose of the embodiment scheme.

[0192] In addition, each function unit in each embodiment of the present application can be integrated in one processing unit, or each unit can be physically present separately, or two or more units can be integrated in one unit. The integrated unit can be realized in the form of hardware or in the form of a software function unit.

[0193] When the integrated unit is realized in the form of a software function unit and sold or used as an independent product, it can be stored in a computer readable storage medium. Based on such understanding, the technical solutions of the present application, essentially or in part, or all or part of the technical solutions can be embodied in the form of a software product. The computer software product is stored in a storage medium, and includes multiple instructions used to cause a computer device (which can be a personal computer, a server, or a network device, etc.) to perform all or part of the steps of the methods in the embodiments of the present application. The foregoing storage medium includes: a U disk, a mobile hard disk, a read-only memory (ROM), a random access memory (RAM), a magnetic disk or an optical disk, and various other media that can store programs.

[0194] The preferred embodiments of the embodiments of the present application are described above with reference to the accompanying drawings, and are not limited to the scope of the embodiments of the present application. Any modifications, equivalent replacements and improvements made by those skilled in the art without departing from the scope and essence of the embodiments of the present application shall be within the scope of the embodiments of the present application.

Claims

1. A product prototype interface generation method, characterized by, The method comprises: acquiring a product requirement document of a target product; performing document analysis on the product requirement document to obtain original document elements; performing structural conversion on the original document elements to obtain an initial document prompt template; performing logical reasoning on the initial document prompt template to obtain a product technical document; performing code conversion based on the product technical document to obtain product prototype code; performing page rendering based on the product prototype code to obtain a product prototype interface of the target product.

2. The method of claim 1, wherein, The original document elements comprise product module elements, interaction description elements, and technical constraint elements; the structural conversion on the original document elements to obtain an initial document prompt template comprises: performing menu analysis on the product module elements to obtain menu level information; performing logical analysis on the menu level information and the interaction description elements to obtain interaction logic information; performing architecture decomposition on the technical constraint elements to obtain prototype constraint condition information; performing structural processing based on the menu level information, the interaction logic information, and the prototype constraint condition information to obtain the initial document prompt template.

3. The method of claim 2, wherein, The menu analysis on the product module elements to obtain menu level information comprises: performing hierarchical decomposition on the product module elements to obtain at least one menu level; performing element analysis on each menu level to obtain menu sub-elements; performing layout positioning on the menu sub-elements to obtain sub-element position information; performing feature combination based on the menu sub-elements and the sub-element position information to obtain the menu level information.

4. The method of claim 2, wherein, The logical analysis on the menu level information and the interaction description elements to obtain interaction logic information comprises: performing element association based on the interaction description elements and the menu level information to obtain an interaction relationship graph; performing logical connection on the interaction relationship graph based on the interaction description elements to obtain an interaction logic link; performing standardized processing on the interaction logic link to obtain the interaction logic information.

5. The method of claim 1, wherein, The product technical document comprises function module topology, function module permission information, and function module layout information; the logical reasoning on the initial document prompt template to obtain a product technical document comprises: performing entity extraction on the initial document prompt template to obtain original entity information; performing directed graph construction on the original entity information to obtain a prototype directed graph; performing topology sorting based on the prototype directed graph to obtain the function module topology; performing permission analysis on the initial document prompt template to obtain the function module permission information; performing component layout on the initial document prompt template to obtain function module layout information.

6. The method of claim 5, wherein, The code conversion based on the product technical document to obtain product prototype code comprises: generating an element mapping table based on the function module topology; generating original product code based on the element mapping table and the function module permission information; performing layout adjustment on the original product code based on the function module layout information to obtain initial product code; performing code packaging on the initial product code to obtain target product code; Code verification is performed on the target product code to obtain the product prototype code.

7. The method according to any one of claims 1 to 6, characterized in that, After the product prototype interface of the target product is obtained by rendering the page based on the product prototype code, the method further includes: A product prototype modification instruction is received, and instruction analysis is performed on the prototype modification instruction to obtain modification element information; Element filtering is performed on the product prototype code based on the modification element information to obtain candidate modification elements; The candidate modification elements in the product prototype code are modified based on the modification element information to obtain target prototype code, and page rendering is performed based on the target prototype code.

8. A product prototype interface generation apparatus, characterized by comprising: The device includes: A requirement document acquisition module is configured to acquire a product requirement document of a target product; A document analysis module is configured to perform document analysis on the product requirement document to obtain original document elements; A structured processing module is configured to perform structured conversion on the original document elements to obtain an initial document prompt template; A logic reasoning module is configured to perform logic reasoning on the initial document prompt template to obtain a product technical document; A code conversion module is configured to perform code conversion based on the product technical document to obtain product prototype code; A page rendering module is configured to perform page rendering based on the product prototype code to obtain a product prototype interface of the target product.

9. An electronic device, comprising: The electronic device includes a memory and a processor, the memory stores a computer program, and the processor implements the method of any one of claims 1 to 7 when executing the computer program.

10. A computer-readable storage medium storing a computer program, the computer program comprising instructions that, when executed by a computer, cause the computer to perform the method of any one of claims 1 to 9. The computer program is executed by the processor to implement the method of any one of claims 1 to 7.

Images