Interactive page generation method, device, equipment and storage medium thereof

Abstract

The embodiments of the present application belong to the field of financial technology and are applied to the interactive page generation scenario of a financial target terminal. They relate to an interactive page generation method, apparatus, device and storage medium thereof, including obtaining a first number of UI design controls; building a standardized UI control library and training a control recognition model based on the UI design controls, and obtaining a trained control recognition model. When designing or updating a financial APP page or a financial interactive page, the UI prototype diagram is input into the control recognition model, the UI design control recognition is performed, the corresponding style file and interactive file are obtained, and both are imported into an XML layout file to generate an interactive page, thereby improving the generation efficiency of the interactive page and ensuring the timely launch and rapid release of relevant financial business applications.

Description

Technical Field

[0001] The present application relates to the field of financial technology and is applied to scenarios of generating interactive pages for financial target terminals, and in particular to a method, apparatus, device, and storage medium for generating interactive pages. Background Art

[0002] With the rapid development of the financial industry, the business scope of financial companies is becoming increasingly broad, especially in the update and design of financial business APPs. As the business scope involved becomes increasingly broad, it may be necessary to design different APP applications according to different financial businesses, and it may also be necessary to update and adjust existing APP applications as financial businesses are updated and adjusted.

[0003] Currently, financial companies design different apps for different financial businesses, or update existing apps as business updates and adjustments require them. This is especially true when page adjustments are required. Front-end developers typically write extensive code based on UI design drawings to implement page updates. However, this approach not only increases the workload for front-end developers, but also creates issues with delayed or delayed release of new page versions, potentially creating a negative experience for financial customers. Summary of the Invention

[0004] The purpose of the embodiments of the present application is to propose an interactive page generation method, device, equipment and storage medium thereof to solve the problem that when updating a page in the existing technology, not only the workload of the front-end personnel is increased, but also the new version of the page is not put online in time or the release is delayed.

[0005] In order to solve the above technical problems, the embodiment of the present application provides an interactive page generation method, which adopts the following technical solutions:

[0006] A method for generating an interactive page includes the following steps:

[0007] Obtaining a first number of UI design controls, wherein the UI design controls include several control types, and UI design controls of the same control type include several design styles;

[0008] Mark the UI design control according to the control type and the design style to obtain a control marking field;

[0009] Building a standardized UI control library according to the control type, the design style, and the control tag field, wherein the standardized UI control library includes a style file and an interaction file of the UI design control;

[0010] Training a pre-built control recognition model using the UI design control, the control tag field, and a preset training set to obtain a trained control recognition model, wherein the training set includes a second number of UI prototype images, and the UI prototype images in the training set all clearly include the UI design controls included therein;

[0011] Get the UI prototype image to be identified;

[0012] Input the UI prototype image to be identified into the trained control recognition model, identify and output the control mark field of the UI design control contained in the UI prototype image to be identified as a screening field;

[0013] Obtaining the style file and interaction file corresponding to the screening field through the standardized UI control library;

[0014] An interactive page is generated based on the style file, the interactive file and the preset page layout file.

[0015] Furthermore, the step of marking the UI design control according to the control type and the design style to obtain a control marking field specifically includes:

[0016] Get the type distinction field set according to the control type;

[0017] Obtaining a design style distinguishing field set according to the design style;

[0018] Obtain a spliced ​​field by splicing the type distinction field and the design style distinction field corresponding to the UI design control;

[0019] Set the splicing field as the control mark field;

[0020] The step of constructing a standardized UI control library according to the control type, the design style, and the control tag field specifically includes:

[0021] Generate a style file and an interaction file corresponding to the UI design control according to the control type and the design style;

[0022] The control mark field is set as a distinguishing mark between the style file and the interaction file to obtain the constructed standardized UI control library.

[0023] Furthermore, the step of training a pre-built control recognition model using the UI design control, the control tag field, and a preset training set to obtain a trained control recognition model specifically includes:

[0024] Deploy the UI design control and the control tag field as classification information into a pre-built control recognition model, wherein the control recognition model is a target detection model based on the YOLO algorithm. Specifically, the UI design control is used as a classification reference image, and the control tag field is used as a model output field of the corresponding UI design control, and both are deployed into the target detection model based on the YOLO algorithm.

[0025] Input a preset training set into the pre-built control recognition model, train the control recognition model, and obtain a trained control recognition model.

[0026] Furthermore, the step of inputting the preset training set into the pre-built control recognition model, training the control recognition model, and obtaining the trained control recognition model specifically includes:

[0027] Step 601: Obtain the UI design controls actually contained in each of the second number of UI prototype images as a reference result;

[0028] Step 602: Input the second number of UI prototype images into the object detection model based on the YOLO algorithm, perform classification information detection, and output corresponding control tag fields;

[0029] Step 603: Determine, based on the control tag field, the UI design controls respectively included in the second number of UI prototype images as a detection result;

[0030] Step 604: Calculate the loss of the detection result compared to the reference result according to a preset loss function;

[0031] Step 605: determining whether the loss degree exceeds a preset loss degree threshold;

[0032] Step 606: If the loss exceeds a preset loss threshold, adjust the hyperparameters of the target detection model and re-execute steps 602 to 605;

[0033] Step 607: If the loss degree does not exceed the preset loss degree threshold, the target detection model is obtained as the trained control recognition model.

[0034] Furthermore, the step of inputting the second number of UI prototype images into the target detection model based on the YOLO algorithm, performing classification information detection, and outputting corresponding control mark fields specifically includes:

[0035] According to the YOLO algorithm, the bounding boxes of all classified reference images are obtained, and the width-to-height ratio of the bounding boxes is calculated as the reference bounding box features;

[0036] Obtaining, according to the YOLO algorithm, detection bounding boxes respectively contained in the second number of UI prototype images, and calculating aspect ratios of the detection bounding boxes as detection bounding box features;

[0037] Comparing the detected frame features with the reference frame features to obtain a comparison result;

[0038] According to the comparison result, a classification reference image corresponding to the detection frame feature is obtained;

[0039] According to the classification reference picture, the corresponding control mark field is identified and output.

[0040] Furthermore, the step of inputting the UI prototype image to be identified into the trained control recognition model, identifying and outputting the control tag fields of the UI design controls contained in the UI prototype image to be identified as the screening fields specifically includes:

[0041] Performing classification information detection on the UI prototype image to be identified, and identifying UI design controls contained in the UI prototype image to be identified based on the classification reference image;

[0042] According to the UI design controls contained in the UI prototype image to be identified, output the corresponding control mark field as the screening field;

[0043] The style file includes a CSS format file, and the interaction file includes a JS format file. The step of obtaining the style file and the interaction file corresponding to the screening field through the standardized UI control library specifically includes:

[0044] Based on the screening field and a preset file export interface, the CSS format file and the JS format file corresponding to the screening field are screened out from the standardized UI control library.

[0045] Furthermore, the page layout file includes an XML layout file, and the step of generating an interactive page based on the style file, the interactive file, and the preset page layout file specifically includes:

[0046] According to the preset file import interface, the CSS format file and the JS format file corresponding to the screening field are imported into the XML layout file;

[0047] Parsing the XML layout file through a preset file parsing component, and generating the interactive page according to the parsing result;

[0048] After executing the step of generating an interactive page based on the style file, the interactive file, and the preset page layout file, the method further includes:

[0049] Using a preset detection component, detecting whether all interactive functions in the interactive page have been implemented;

[0050] If all interactive functions in the interactive page have been realized, a prompt message indicating that the interactive page has been generated is sent to the target monitoring terminal;

[0051] If there is an interactive function in the interactive page that is not implemented, an interactive page adjustment request is sent to the target monitoring terminal.

[0052] In order to solve the above technical problems, the embodiment of the present application also provides an interactive page generation device, which adopts the following technical solutions:

[0053] An interactive page generating device, comprising:

[0054] A UI design control acquisition module is configured to acquire a first number of UI design controls, wherein the UI design controls include several control types, and UI design controls of the same control type include several design styles;

[0055] A UI design control marking module, configured to mark the UI design control according to the control type and the design style, and obtain a control marking field;

[0056] A standardized UI control library construction module is used to construct a standardized UI control library according to the control type, the design style and the control tag field, wherein the standardized UI control library includes the style file and the interaction file of the UI design control;

[0057] a control recognition model training module, configured to train a pre-built control recognition model using the UI design control, the control tag field, and a preset training set to obtain a trained control recognition model, wherein the training set includes a second number of UI prototype images, and the UI prototype images in the training set all clearly include the UI design controls;

[0058] A UI prototype image acquisition module to be identified is used to obtain the UI prototype image to be identified;

[0059] A model recognition module is used to input the UI prototype image to be recognized into the trained control recognition model, recognize and output the control mark field of the UI design control contained in the UI prototype image to be recognized as a screening field;

[0060] A target file acquisition module, configured to obtain the style file and interaction file corresponding to the screening field through the standardized UI control library;

[0061] The interactive page generation module is used to generate an interactive page based on the style file, the interactive file and a preset page layout file.

[0062] In order to solve the above technical problems, the embodiment of the present application further provides a computer device, which adopts the following technical solution:

[0063] A computer device includes a memory and a processor, wherein the memory stores computer-readable instructions, and the processor implements the steps of the above-mentioned interactive page generation method when executing the computer-readable instructions.

[0064] In order to solve the above technical problems, the embodiment of the present application further provides a computer-readable storage medium, which adopts the following technical solution:

[0065] A computer-readable storage medium stores computer-readable instructions, which, when executed by a processor, implement the steps of the interactive page generation method described above.

[0066] Compared with the prior art, the embodiments of the present application have the following beneficial effects:

[0067] The interactive page generation method described in the embodiment of the present application is as follows: obtaining a first number of UI design controls; marking them according to the control type and design style to obtain control marking fields; constructing a standardized UI control library; training a pre-built control recognition model through the UI design controls and control marking fields, as well as a preset training set, to obtain a trained control recognition model; obtaining a UI prototype image to be identified; inputting the UI prototype image to be identified into the trained control recognition model, identifying and outputting the control marking fields of the UI design controls contained in the UI prototype image to be identified; obtaining corresponding style files and interaction files through the standardized UI control library; generating an interactive page based on the style files and interaction files, as well as a preset page layout file. When a UI designer designs or updates a financial APP page or a financial interactive page, the UI prototype image is directly input into the trained control recognition model to perform UI design control identification, and then the corresponding style files and interaction files are obtained from the standardized UI control library, and both are imported into the XML layout file. After interpretation, an interactive page is generated, thereby improving the generation efficiency of the interactive page and ensuring the timely launch and rapid release of relevant financial business applications. BRIEF DESCRIPTION OF THE DRAWINGS

[0068] In order to more clearly illustrate the solutions in this application, a brief introduction will be given below to the drawings required for use in the description of the embodiments of this application. Obviously, the drawings described below are some embodiments of this application. For ordinary technicians in this field, other drawings can be obtained based on these drawings without any creative work.

[0069] Figure 1 is an exemplary system architecture diagram to which the present application may be applied;

[0070] Figure 2 is a flow chart of an embodiment of a method for generating an interactive page according to the present application;

[0071] Figure 3 yes Figure 2 A flowchart of a specific embodiment of step 202 is shown;

[0072] Figure 4 yes Figure 2 A flowchart of a specific embodiment of step 203 is shown;

[0073] Figure 5 yes Figure 2 A flowchart of a specific embodiment of step 204 is shown;

[0074] Figure 6 yes Figure 5 A flowchart of a specific embodiment of step 502 is shown;

[0075] Figure 7 yes Figure 6 A flowchart of a specific embodiment of step 602 is shown;

[0076] Figure 8 is a structural diagram of an embodiment of an interactive page generating device according to the present application;

[0077] Figure 9 It is a structural diagram of an embodiment of a computer device according to the present application. DETAILED DESCRIPTION

[0078] Unless otherwise defined, all technical and scientific terms used herein have the same meanings as commonly understood by those skilled in the art to which this application belongs. The terms used in the specification of the application are for the purpose of describing specific embodiments only and are not intended to limit this application. The terms "including" and "having" and any variations thereof in the specification and claims of this application and the above-mentioned drawings are intended to cover non-exclusive inclusions. The terms "first", "second", etc. in the specification and claims of this application or the above-mentioned drawings are used to distinguish different objects, not to describe a specific order.

[0079] References herein to "embodiments" mean that a particular feature, structure, or characteristic described in connection with the embodiments may be included in at least one embodiment of the present application. The appearance of this phrase in various places in the specification does not necessarily refer to the same embodiment, nor does it constitute an independent or alternative embodiment that is mutually exclusive of other embodiments. It is understood, both explicitly and implicitly, by those skilled in the art that the embodiments described herein may be combined with other embodiments.

[0080] In order to enable those skilled in the art to better understand the solution of the present application, the technical solution in the embodiments of the present application will be clearly and completely described below in conjunction with the accompanying drawings.

[0081] like Figure 1 As shown, system architecture 100 may include terminal devices 101, 102, 103, a network 104, and a server 105. Network 104 is a medium for providing communication links between terminal devices 101, 102, 103 and server 105. Network 104 may include various connection types, such as wired or wireless communication links or fiber optic cables.

[0082] Users can use terminal devices 101, 102, and 103 to interact with server 105 via network 104 to receive or send messages, etc. Various communication client applications can be installed on terminal devices 101, 102, and 103, such as web browser applications, shopping applications, search applications, instant messaging tools, email clients, social platform software, etc.

[0083] Terminal devices 101, 102, and 103 can be various electronic devices with display screens and support web browsing, including but not limited to smartphones, tablet computers, e-book readers, MP3 players (Moving Picture Experts Group Audio Layer III), MP4 (Moving Picture Experts Group Audio Layer IV), laptop computers, desktop computers, etc.

[0084] The server 105 may be a server that provides various services, such as a background server that provides support for web pages displayed on the terminal devices 101 , 102 , and 103 .

[0085] It should be noted that the interactive page generation method provided in the embodiment of the present application is generally executed by a server / terminal device, and accordingly, the interactive page generation device is generally set in the server / terminal device.

[0086] It should be understood that Figure 1The number of terminal devices, networks and servers in the embodiment is merely illustrative. Any number of terminal devices, networks and servers may be provided as required.

[0087] Continue to refer Figure 2 , shows a flow chart of an embodiment of the interactive page generation method according to the present application. The interactive page generation method includes the following steps:

[0088] Step 201: Acquire a first number of UI design controls, wherein the UI design controls include several control types, and UI design controls of the same control type include several design styles.

[0089] In this embodiment, the UI design control can be a UI design control that constitutes the interactive page of the financial target terminal, for example, a UI design control used in a financial company's business service terminal, a customer operation terminal, and a financial APP interface to generate an interactive page.

[0090] In this embodiment, the control types of the UI design controls include picture controls, button controls, text controls and list controls. The same type of UI design controls include different design styles. For example, button controls may have search buttons, submit buttons, and cumulative buttons depending on their functions; depending on their shapes, there may also be round buttons, rectangular buttons, etc.

[0091] Step 202: Mark the UI design control according to the control type and the design style to obtain a control marking field.

[0092] Continue to refer Figure 3 , Figure 3 yes Figure 2 The flowchart of a specific embodiment of step 202 shown includes:

[0093] Step 301, obtaining a type distinction field set according to the control type;

[0094] Step 302, obtaining a design style distinguishing field set according to the design style;

[0095] Step 303: obtain a spliced ​​field by splicing the type distinction field and the design style distinction field corresponding to the UI design control;

[0096] Step 304: Set the splicing field as the control mark field.

[0097] By using a splicing method to generate control marking fields corresponding to different UI design controls based on the type distinction field set according to the control type and the design style distinction field set according to the design style, it is convenient to quickly filter the target UI design controls from the relevant database based on the control marking fields, saving filtering time.

[0098] Step 203: construct a standardized UI control library according to the control type, the design style, and the control tag field, wherein the standardized UI control library includes the style file and the interaction file of the UI design control.

[0099] Continue to refer Figure 4 , Figure 4 yes Figure 2 The flowchart of a specific embodiment of step 203 shown includes:

[0100] Step 401: Generate a style file and an interaction file corresponding to the UI design control according to the control type and the design style;

[0101] Step 402: Set the control tag field as a distinguishing identifier between the style file and the interaction file to obtain the constructed standardized UI control library.

[0102] By generating the style file and interaction file corresponding to the UI design control according to the control type and the design style, and setting the control mark field as the distinguishing identifier of the style file and the interaction file, the constructed standardized UI control library is obtained, which makes it easy to use the control mark field to obtain the style file and interaction file corresponding to the corresponding UI design control. When the same control is used, there is no need to re-code each time. The corresponding style file and interaction file can be obtained by searching for reuse, which improves the development efficiency of interactive pages in the financial industry to a certain extent.

[0103] Step 204: train a pre-built control recognition model using the UI design control, the control tag field, and a preset training set to obtain a trained control recognition model, wherein the training set includes a second number of UI prototype images, and the UI prototype images in the training set all clearly include the UI design controls.

[0104] Continue to refer Figure 5 , Figure 5 yes Figure 2 The flowchart of a specific embodiment of step 204 shown includes:

[0105] Step 501: Deploy the UI design control and the control tag field as classification information into a pre-built control recognition model;

[0106] In this embodiment, the control recognition model is a target detection model based on the YOLO algorithm. Specifically, the UI design control is used as a classification reference image, and the control tag field is used as the model output field of the corresponding UI design control, and both are deployed to the target detection model based on the YOLO algorithm.

[0107] The YOLO (You Only Look Once) series of algorithms is a typical object detection algorithm. It uses the object bounding box feature to combine classification and target location regression, achieving high efficiency, flexibility, and good generalization performance. The core idea of ​​the Yolo algorithm is to use the entire image to be detected as the input of the network and directly regress the position of the target bounding box and its category at the output layer. Specifically, in this embodiment, it mainly uses the UI prototype image as the input of the network and directly regresses the position of the bounding box of each UI design control in the UI prototype image and the control type of each UI design control at the output layer.

[0108] By using the UI design control as a classification reference image and the control tag field as the model output field of the corresponding UI design control, they are deployed together in the target detection model based on the YOLO algorithm, that is, reference samples are designed in advance in the target detection model based on the YOLO algorithm, so that there is prior knowledge to rely on during training and detection, thereby improving the accuracy of UI design control recognition.

[0109] Step 502: Input a preset training set into the pre-built control recognition model, train the control recognition model, and obtain a trained control recognition model.

[0110] Continue to refer Figure 6 , Figure 6 yes Figure 5 The flowchart of a specific embodiment of step 502 shown includes:

[0111] Step 601: Obtain the UI design controls actually contained in each of the second number of UI prototype images as a reference result;

[0112] Step 602: Input the second number of UI prototype images into the object detection model based on the YOLO algorithm, perform classification information detection, and output corresponding control tag fields;

[0113] Continue to refer Figure 7 , Figure 7 yes Figure 6 The flowchart of a specific embodiment of step 602 shown includes:

[0114] Step 701: Obtain the borders of all classified reference images using the YOLO algorithm, and calculate the width-to-height ratio of the borders as reference border features;

[0115] Step 702: Obtain detection frames respectively included in the second number of UI prototype images according to the YOLO algorithm, and calculate the aspect ratio of the detection frames as detection frame features;

[0116] Step 703: Compare the detected frame features with the reference frame features to obtain a comparison result;

[0117] Step 704: obtaining a classification reference image corresponding to the detection frame feature based on the comparison result;

[0118] Step 705: Identify and output corresponding control tag fields based on the classification reference image.

[0119] In this embodiment, in the control recognition model training stage, in order to detect the UI design controls in each UI prototype image in the training set, the border width-to-height ratio of the UI design controls in the UI prototype image is obtained, and the border width-to-height ratios of all classified reference images are compared to identify the UI design controls contained in each UI prototype image in the training set.

[0120] Step 603: Determine, based on the control tag field, the UI design controls respectively included in the second number of UI prototype images as a detection result;

[0121] Step 604: Calculate the loss of the detection result compared to the reference result according to a preset loss function;

[0122] Step 605: determining whether the loss degree exceeds a preset loss degree threshold;

[0123] Step 606: If the loss exceeds a preset loss threshold, adjust the hyperparameters of the target detection model and re-execute steps 602 to 605;

[0124] Step 607: If the loss degree does not exceed the preset loss degree threshold, the target detection model is obtained as the trained control recognition model.

[0125] By inputting the second number of UI prototype images contained in the training set into the target detection model based on the YOLO algorithm, the detection result of the model is obtained. Since the UI prototype images in the training set have clearly included the UI design controls, the loss degree of the detection result compared with the reference result is calculated through a preset loss function, which is convenient for identifying whether the control recognition model is trained and for applying the trained control recognition model, so that when designing financial APPs or financial interactive pages in the future, UI design controls can be identified according to the trained control recognition model, thereby improving the generation efficiency of interactive pages.

[0126] Step 205: Obtain the UI prototype image to be identified.

[0127] Step 206: Input the UI prototype image to be identified into the trained control recognition model, identify and output the control tag fields of the UI design controls contained in the UI prototype image to be identified as screening fields.

[0128] In this embodiment, the step of inputting the UI prototype image to be identified into the trained control recognition model, identifying and outputting the control mark field of the UI design control contained in the UI prototype image to be identified as the screening field specifically includes: performing classification information detection on the UI prototype image to be identified, and identifying the UI design control contained in the UI prototype image to be identified based on the classification reference image; and outputting the corresponding control mark field based on the UI design control contained in the UI prototype image to be identified as the screening field.

[0129] Step 207: Obtain the style file and interaction file corresponding to the screening field through the standardized UI control library.

[0130] In this embodiment, the style file includes a CSS format file, and the interaction file includes a JS format file.

[0131] In this embodiment, the step of obtaining the style file and interaction file corresponding to the filter field through the standardized UI control library specifically includes: based on the filter field and the preset file export interface, filtering out the CSS format file and JS format file corresponding to the filter field from the standardized UI control library.

[0132] Step 208: Generate an interactive page based on the style file, the interactive file, and the preset page layout file.

[0133] In this embodiment, the page layout file includes an XML layout file.

[0134] In this embodiment, the step of generating an interactive page based on the style file, the interactive file, and the preset page layout file specifically includes: importing the CSS format file and the JS format file corresponding to the filter field into the XML layout file according to a preset file import interface; parsing the XML layout file using a preset file parsing component, and generating the interactive page based on the parsing result. Specifically, the preset file parsing component has the function of interpreting the XML layout file.

[0135] In this embodiment, after executing the step of generating an interactive page based on the style file, the interactive file, and the preset page layout file, the method further includes: detecting whether all interactive functions in the interactive page have been implemented through a preset detection component; if all interactive functions in the interactive page have been implemented, sending a prompt message that the interactive page has been generated to the target monitoring terminal; if there are interactive functions in the interactive page that have not been implemented, sending an interactive page adjustment request to the target monitoring terminal. Specifically, the preset detection component mainly includes detecting whether the functions of each UI design control in the interactive page can be implemented.

[0136] When a UI designer designs or updates a financial APP page or a financial interactive page, he or she directly inputs the UI prototype diagram into the trained control recognition model to perform UI design control recognition, and then obtains the corresponding style file and interaction file from the standardized UI control library, imports both into the XML layout file, and generates an interactive page after interpretation, thereby improving the generation efficiency of the interactive page and ensuring the timely launch and rapid release of relevant financial business applications.

[0137] The present application obtains a first number of UI design controls; marks them according to the control type and design style to obtain control marking fields; constructs a standardized UI control library; trains a pre-built control recognition model through the UI design controls and control marking fields, as well as a preset training set, to obtain a trained control recognition model; obtains a UI prototype image to be identified; inputs the UI prototype image to be identified into the trained control recognition model, identifies and outputs the control marking fields of the UI design controls contained in the UI prototype image to be identified; obtains corresponding style files and interaction files through the standardized UI control library; generates an interactive page based on the style files and interaction files, as well as a preset page layout file. When a UI designer designs or updates a financial APP page or a financial interactive page, he directly inputs the UI prototype image into the trained control recognition model to perform UI design control identification, then obtains the corresponding style files and interaction files from the standardized UI control library, imports the two into the XML layout file, and generates an interactive page after interpretation, thereby improving the generation efficiency of the interactive page and ensuring the timely launch and rapid release of relevant financial business applications.

[0138] The embodiments of the present application can acquire and process relevant data based on artificial intelligence technology. Artificial Intelligence (AI) is the theory, method, technology, and application system that uses digital computers or machines controlled by digital computers to simulate, extend, and expand human intelligence, perceive the environment, acquire knowledge, and use knowledge to achieve optimal results.

[0139] Fundamental AI technologies generally include sensors, dedicated AI chips, cloud computing, distributed storage, big data processing, operating / interaction systems, and mechatronics. AI software technologies primarily encompass computer vision, robotics, biometrics, speech processing, natural language processing, and machine learning / deep learning.

[0140] In an embodiment of the present application, when a UI designer designs or updates a financial APP page or a financial interactive page, the UI prototype diagram is directly input into the trained control recognition model to perform UI design control recognition, and then the corresponding style file and interaction file are obtained from the standardized UI control library, and both are imported into the XML layout file. After interpretation, an interactive page is generated, which improves the generation efficiency of the interactive page and ensures the timely launch and rapid release of relevant financial business applications.

[0141] Further references Figure 8 , as a response to the above Figure 2 The present application provides an embodiment of an interactive page generation device, which is similar to the embodiment of the present invention. Figure 2 Corresponding to the method embodiment shown, the device can be specifically applied to various electronic devices.

[0142] like Figure 8 As shown, the interactive page generation device 800 described in this embodiment includes: a UI design control acquisition module 801, a UI design control marking module 802, a standardized UI control library construction module 803, a control recognition model training module 804, a UI prototype image acquisition module 805 to be recognized, a model recognition module 806, a target file acquisition module 807 and an interactive page generation module 808. Among them:

[0143] A UI design control acquisition module 801 is configured to acquire a first number of UI design controls, wherein the UI design controls include several control types, and UI design controls of the same control type include several design styles;

[0144] A UI design control marking module 802 is used to mark the UI design control according to the control type and the design style to obtain a control marking field;

[0145] A standardized UI control library construction module 803 is configured to construct a standardized UI control library according to the control type, the design style, and the control tag field, wherein the standardized UI control library includes a style file and an interaction file of the UI design control;

[0146] A control recognition model training module 804 is configured to train a pre-built control recognition model using the UI design control, the control tag field, and a preset training set to obtain a trained control recognition model, wherein the training set includes a second number of UI prototype images, and the UI prototype images in the training set all clearly include UI design controls.

[0147] The UI prototype image to be identified is obtained by the module 805, which is used to obtain the UI prototype image to be identified;

[0148] The model recognition module 806 is configured to input the UI prototype image to be recognized into the trained control recognition model, recognize and output the control tag fields of the UI design controls contained in the UI prototype image to be recognized as screening fields;

[0149] The target file acquisition module 807 is used to obtain the style file and interaction file corresponding to the screening field through the standardized UI control library;

[0150] The interactive page generating module 808 is configured to generate an interactive page based on the style file, the interactive file and a preset page layout file.

[0151] The present application obtains a first number of UI design controls; marks them according to the control type and design style to obtain control marking fields; constructs a standardized UI control library; trains a pre-built control recognition model through the UI design controls and control marking fields, as well as a preset training set, to obtain a trained control recognition model; obtains a UI prototype image to be identified; inputs the UI prototype image to be identified into the trained control recognition model, identifies and outputs the control marking fields of the UI design controls contained in the UI prototype image to be identified; obtains corresponding style files and interaction files through the standardized UI control library; generates an interactive page based on the style files and interaction files, as well as a preset page layout file. When a UI designer designs or updates a financial APP page or a financial interactive page, he directly inputs the UI prototype image into the trained control recognition model to perform UI design control identification, then obtains the corresponding style files and interaction files from the standardized UI control library, imports the two into the XML layout file, and generates an interactive page after interpretation, thereby improving the generation efficiency of the interactive page and ensuring the timely launch and rapid release of relevant financial business applications.

[0152] Those skilled in the art will appreciate that all or part of the processes in the above-described method embodiments can be implemented by instructing related hardware via computer-readable instructions. The computer-readable instructions can be stored in a computer-readable storage medium, and when the program is executed, it can include the processes in the above-described method embodiments. The aforementioned storage medium can be a non-volatile storage medium such as a magnetic disk, an optical disk, a read-only memory (ROM), or a random access memory (RAM).

[0153] It should be understood that although the steps in the flowcharts of the accompanying drawings are shown in sequence as indicated by the arrows, these steps are not necessarily executed in the order indicated by the arrows. Unless otherwise specified herein, there is no strict order restriction on the execution of these steps, and they can be executed in other orders. Moreover, at least some of the steps in the flowcharts of the accompanying drawings may include multiple sub-steps or multiple stages, and these sub-steps or stages are not necessarily executed at the same time, but can be executed at different times, and their execution order is not necessarily sequential, but can be executed in turn or alternately with other steps or at least a portion of the sub-steps or stages of other steps.

[0154] To solve the above technical problems, the present application also provides a computer device. Figure 9 , Figure 9 This is a basic structural block diagram of the computer device in this embodiment.

[0155] The computer device 9 includes a memory 9a, a processor 9b, and a network interface 9c that are interconnected through a system bus. It should be noted that the figure only shows a computer device 9 with components 9a-9c, but it should be understood that it is not required to implement all the components shown, and more or fewer components can be implemented instead. Among them, those skilled in the art can understand that the computer device here is a device that can automatically perform numerical calculations and / or information processing according to pre-set or stored instructions, and its hardware includes but is not limited to microprocessors, application-specific integrated circuits (ASICs), field-programmable gate arrays (FPGAs), digital signal processors (DSPs), embedded devices, etc.

[0156] The computer device may be a desktop computer, notebook computer, PDA, cloud server, etc. The computer device may interact with the user via a keyboard, mouse, remote control, touchpad, or voice control device.

[0157] The memory 9a includes at least one type of readable storage medium, including flash memory, hard disk, multimedia card, card-type memory (e.g., SD or DX memory), random access memory (RAM), static random access memory (SRAM), read-only memory (ROM), electrically erasable programmable read-only memory (EEPROM), programmable read-only memory (PROM), magnetic memory, magnetic disk, optical disk, etc. In some embodiments, the memory 9a can be an internal storage unit of the computer device 9, such as the hard disk or memory of the computer device 9. In other embodiments, the memory 9a can also be an external storage device of the computer device 9, such as a plug-in hard disk equipped on the computer device 9, a smart media card (SMC), a secure digital (SD) card, a flash memory card, etc. Of course, the memory 9a can also include both the internal storage unit of the computer device 9 and its external storage device. In this embodiment, the memory 9a is generally used to store the operating system and various application software installed on the computer device 9, such as computer-readable instructions for a method for generating interactive pages. In addition, the memory 9a can also be used to temporarily store various types of data that have been output or are to be output.

[0158] In some embodiments, the processor 9b may be a central processing unit (CPU), a controller, a microcontroller, a microprocessor, or other data processing chip. The processor 9b is generally used to control the overall operation of the computer device 9. In this embodiment, the processor 9b is used to execute computer-readable instructions stored in the memory 9a or process data, such as computer-readable instructions for executing the interactive page generation method.

[0159] The network interface 9c may include a wireless network interface or a wired network interface. The network interface 9c is generally used to establish a communication connection between the computer device 9 and other electronic devices.

[0160] The computer device proposed in this embodiment belongs to the field of financial technology and is applied to the interactive page generation scenario of financial target terminals. This application obtains a first number of UI design controls; marks them according to the control type and design style to obtain control mark fields; builds a standardized UI control library; trains a pre-built control recognition model through the UI design controls and control mark fields, as well as a preset training set, to obtain a trained control recognition model; obtains a UI prototype image to be recognized; inputs the UI prototype image to be recognized into the trained control recognition model, recognizes and outputs the control mark fields of the UI design controls contained in the UI prototype image to be recognized; obtains corresponding style files and interaction files through the standardized UI control library; generates an interactive page based on the style files and interaction files, as well as a preset page layout file. When a UI designer designs or updates a financial APP page or a financial interactive page, he or she directly inputs the UI prototype diagram into the trained control recognition model to perform UI design control recognition, and then obtains the corresponding style file and interaction file from the standardized UI control library, imports both into the XML layout file, and generates an interactive page after interpretation, thereby improving the generation efficiency of the interactive page and ensuring the timely launch and rapid release of relevant financial business applications.

[0161] The present application also provides another embodiment, namely, providing a computer-readable storage medium, wherein the computer-readable storage medium stores computer-readable instructions, and the computer-readable instructions can be executed by a processor to enable the processor to perform the steps of the interactive page generation method as described above.

[0162] The computer-readable storage medium proposed in this embodiment belongs to the field of financial technology and is applied to the interactive page generation scenario of a financial target terminal. This application obtains a first number of UI design controls; marks them according to the control type and design style to obtain control mark fields; builds a standardized UI control library; trains a pre-built control recognition model through the UI design controls and control mark fields, as well as a preset training set, to obtain a trained control recognition model; obtains a UI prototype image to be identified; inputs the UI prototype image to be identified into the trained control recognition model, identifies and outputs the control mark fields of the UI design controls contained in the UI prototype image to be identified; obtains corresponding style files and interaction files through the standardized UI control library; and generates an interactive page based on the style files and interaction files, as well as a preset page layout file. When a UI designer designs or updates a financial APP page or a financial interactive page, he or she directly inputs the UI prototype diagram into the trained control recognition model to perform UI design control recognition, and then obtains the corresponding style file and interaction file from the standardized UI control library, imports both into the XML layout file, and generates an interactive page after interpretation, thereby improving the generation efficiency of the interactive page and ensuring the timely launch and rapid release of relevant financial business applications.

[0163] Through the description of the above implementation methods, those skilled in the art can clearly understand that the above-mentioned embodiment methods can be implemented by means of software plus the necessary general hardware platform, and of course can also be implemented by hardware, but in many cases the former is a better implementation method. Based on this understanding, the technical solution of the present application, or the part that contributes to the prior art, can be embodied in the form of a software product, which is stored in a storage medium (such as ROM / RAM, magnetic disk, optical disk), and includes a number of instructions for enabling a terminal device (which can be a mobile phone, computer, server, air conditioner, or network device, etc.) to execute the methods described in each embodiment of the present application.

[0164] Obviously, the embodiments described above are only some of the embodiments of the present application, rather than all of the embodiments. The preferred embodiments of the present application are given in the accompanying drawings, but they do not limit the patent scope of the present application. The present application can be implemented in many different forms. On the contrary, the purpose of providing these embodiments is to make the understanding of the disclosure of the present application more thorough and comprehensive. Although the present application has been described in detail with reference to the aforementioned embodiments, for those skilled in the art, it is still possible to modify the technical solutions described in the aforementioned specific embodiments, or to make equivalent replacements for some of the technical features therein. Any equivalent structure made using the contents of the present application specification and the accompanying drawings, directly or indirectly used in other related technical fields, is also within the scope of patent protection of the present application.

Claims

1. A method for generating an interactive page, characterized in that: The steps include: Obtaining a first number of UI design controls, wherein the UI design controls include several control types, and UI design controls of the same control type include several design styles; Marking the UI design control according to the control type and the design style to obtain a control marking field, wherein the step of marking the UI design control according to the control type and the design style to obtain the control marking field specifically includes: Get the type distinction field set according to the control type; Obtaining a design style distinguishing field set according to the design style; Splicing the type distinction field and the design style distinction field corresponding to the UI design control to obtain a spliced ​​field; Set the splicing field as the control mark field; The step of constructing a standardized UI control library according to the control type, the design style, and the control tag field specifically includes: Generate a style file and an interaction file corresponding to the UI design control according to the control type and the design style; Setting the control mark field as a distinguishing mark between the style file and the interaction file to obtain the constructed standardized UI control library; Building a standardized UI control library according to the control type, the design style, and the control tag field, wherein the standardized UI control library includes a style file and an interaction file of the UI design control; The pre-built control recognition model is trained using the UI design control, the control marking field, and a preset training set to obtain a trained control recognition model, wherein the training set includes a second number of UI prototype images, and the UI prototype images in the training set all clearly include the UI design controls. Specifically, the step of training the pre-built control recognition model using the UI design control, the control marking field, and the preset training set to obtain the trained control recognition model specifically includes: Deploy the UI design control and the control tag field as classification information into a pre-built control recognition model, wherein the control recognition model is a target detection model based on the YOLO algorithm. Specifically, the UI design control is used as a classification reference image, and the control tag field is used as a model output field of the corresponding UI design control, and both are deployed into the target detection model based on the YOLO algorithm. Inputting a preset training set into the pre-built control recognition model, training the control recognition model, and obtaining a trained control recognition model; Get the UI prototype image to be identified; Input the UI prototype image to be identified into the trained control recognition model, identify and output the control mark field of the UI design control contained in the UI prototype image to be identified as a screening field; Obtaining the style file and interaction file corresponding to the screening field through the standardized UI control library; An interactive page is generated based on the style file, the interactive file and the preset page layout file.

2. The interactive page generation method according to claim 1, characterized in that: The step of inputting the preset training set into the pre-built control recognition model, training the control recognition model, and obtaining the trained control recognition model specifically includes: Step 601: Obtain the UI design controls actually contained in each of the second number of UI prototype images as a reference result; Step 602: Input the second number of UI prototype images into the object detection model based on the YOLO algorithm, perform classification information detection, and output corresponding control tag fields; Step 603: Determine, based on the control tag field, the UI design controls respectively included in the second number of UI prototype images as a detection result; Step 604: Calculate the loss of the detection result compared to the reference result according to a preset loss function; Step 605: determining whether the loss degree exceeds a preset loss degree threshold; Step 606: If the loss exceeds a preset loss threshold, adjust the hyperparameters of the target detection model and re-execute steps 602 to 605; Step 607: If the loss degree does not exceed the preset loss degree threshold, the target detection model is obtained as the trained control recognition model.

3. The interactive page generation method according to claim 2, characterized in that: The step of inputting the second number of UI prototype images into the target detection model based on the YOLO algorithm, performing classification information detection, and outputting corresponding control mark fields specifically includes: According to the YOLO algorithm, the bounding boxes of all classified reference images are obtained, and the width-to-height ratio of the bounding boxes is calculated as the reference bounding box features; Obtaining, according to the YOLO algorithm, detection bounding boxes respectively contained in the second number of UI prototype images, and calculating aspect ratios of the detection bounding boxes as detection bounding box features; Comparing the detected frame features with the reference frame features to obtain a comparison result; Obtaining a classification reference image corresponding to the detection frame feature according to the comparison result; According to the classification reference picture, the corresponding control mark field is identified and output.

4. The interactive page generation method according to claim 1, characterized in that: The step of inputting the UI prototype image to be identified into the trained control recognition model, identifying and outputting the control tag fields of the UI design controls contained in the UI prototype image to be identified as the screening fields specifically includes: Performing classification information detection on the UI prototype image to be identified, and identifying UI design controls contained in the UI prototype image to be identified based on the classification reference image; According to the UI design controls contained in the UI prototype image to be identified, output the corresponding control mark field as the screening field; The style file includes a CSS format file, and the interaction file includes a JS format file. The step of obtaining the style file and the interaction file corresponding to the screening field through the standardized UI control library specifically includes: Based on the screening field and a preset file export interface, the CSS format file and the JS format file corresponding to the screening field are screened out from the standardized UI control library.

5. The interactive page generation method according to claim 4, characterized in that: The page layout file includes an XML layout file. The step of generating an interactive page based on the style file, the interactive file, and the preset page layout file specifically includes: According to the preset file import interface, the CSS format file and the JS format file corresponding to the screening field are imported into the XML layout file; Parsing the XML layout file through a preset file parsing component, and generating the interactive page according to the parsing result; After executing the step of generating an interactive page based on the style file, the interactive file, and the preset page layout file, the method further includes: Using a preset detection component, detecting whether all interactive functions in the interactive page have been implemented; If all interactive functions in the interactive page have been realized, a prompt message indicating that the interactive page has been generated is sent to the target monitoring terminal; If there is an interactive function in the interactive page that is not implemented, an interactive page adjustment request is sent to the target monitoring terminal.

6. An interactive page generating device, characterized in that: The interactive page generation device is used to implement the steps of the interactive page generation method according to any one of claims 1 to 5, and the interactive page generation device includes: A UI design control acquisition module is configured to acquire a first number of UI design controls, wherein the UI design controls include several control types, and UI design controls of the same control type include several design styles; A UI design control marking module, configured to mark the UI design control according to the control type and the design style, and obtain a control marking field; A standardized UI control library construction module is used to construct a standardized UI control library according to the control type, the design style and the control tag field, wherein the standardized UI control library includes the style file and the interaction file of the UI design control; a control recognition model training module, configured to train a pre-built control recognition model using the UI design control, the control tag field, and a preset training set to obtain a trained control recognition model, wherein the training set includes a second number of UI prototype images, and the UI prototype images in the training set all clearly include the UI design controls; A UI prototype image acquisition module to be identified is used to obtain the UI prototype image to be identified; A model recognition module is used to input the UI prototype image to be recognized into the trained control recognition model, recognize and output the control mark field of the UI design control contained in the UI prototype image to be recognized as a screening field; A target file acquisition module, configured to obtain the style file and interaction file corresponding to the screening field through the standardized UI control library; The interactive page generation module is used to generate an interactive page based on the style file, the interactive file and a preset page layout file.

7. A computer device, characterized in that: The method comprises a memory and a processor, wherein the memory stores computer-readable instructions, and the processor implements the steps of the interactive page generation method according to any one of claims 1 to 5 when executing the computer-readable instructions.

8. A computer-readable storage medium, characterized in that The computer-readable storage medium stores computer-readable instructions, which, when executed by a processor, implement the steps of the interactive page generation method according to any one of claims 1 to 5.

Images