CN117234505A

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

Info

Publication number: CN117234505A
Application number: CN202311146926.7A
Authority: CN
Inventors: 李越
Original assignee: Ping An Property and Casualty Insurance Company of China Ltd
Current assignee: Ping An Property and Casualty Insurance Company of China Ltd
Priority date: 2023-09-06
Filing date: 2023-09-06
Publication date: 2023-12-15

Abstract

The embodiment of the application belongs to the technical field of financial science and technology, is applied to a financial target terminal interaction page generation scene, and relates to an interaction page generation method, an interaction page generation device, interaction page generation equipment and a storage medium thereof, wherein the interaction page generation method comprises the steps of acquiring U I design controls of a first quantity; and constructing a standardized U I control library and a training control identification model according to the U I design control to obtain a trained control identification model. When the financial APP page or the financial interaction page is designed or updated, a U I prototype graph is input into the control identification model, U I control identification is performed, a corresponding style file and an interaction file are obtained, the style file and the interaction file are imported into the XML layout file, the interaction page is generated, the generation efficiency of the interaction page is improved, and the timely online and quick release of related financial business applications is ensured.

Description

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

Technical Field

The application relates to the technical field of financial science and technology, and is applied to a scene of generating an interactive page of a financial target terminal, in particular to a method, a device and equipment for generating the interactive page and a storage medium thereof.

Background

With the rapid development of the financial industry, the business scope that the financial company involves is wider and wider, especially in the update and design of financial business APP, because the business scope that involves is wider and wider, different APP applications may need to be designed according to different financial businesses, and the update and adjustment of the existing APP applications may also need to be performed along with the update and adjustment of the financial businesses.

In the current finance company, different APP applications are designed according to different finance businesses, or the current APP applications are required to be updated and adjusted along with updating and adjusting of the finance businesses, particularly when page adjustment is involved, a large amount of codes are mainly written by front-end personnel according to a UI design drawing to realize page update. However, this way not only causes the workload of front-end personnel to increase, but also has the problem that the new page version is not timely online or the version is delayed, and is easy to bring bad experience to financial clients.

Disclosure of Invention

The embodiment of the application aims to provide an interactive page generation method, device and equipment and a storage medium thereof, which are used for solving the problems that the workload of front-end personnel is increased, and the online of a new page version is not timely or the edition is delayed in the prior art when the page is updated.

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 scheme:

an interactive page generation method comprises the following steps:

acquiring a first number of UI design controls, wherein the UI design controls comprise a plurality of control types, and the UI design controls of the same control type comprise a plurality of design styles;

marking the UI design control according to the control type and the design style to obtain a control marking field;

constructing a standardized UI control library according to the control type, the design style and the control mark field, wherein the standardized UI control library comprises a style file and an interaction file of the UI design control;

training a pre-constructed control identification model through the UI design control, the control mark field and a preset training set to obtain a trained control identification model, wherein the training set contains a second number of UI prototype graphs, and the UI prototype graphs in the training set all clearly contain the UI design control;

acquiring a UI prototype graph to be identified;

inputting the UI prototype graph to be identified into the trained control identification model, and identifying and outputting control mark fields of UI design controls contained in the UI prototype graph to be identified as screening fields;

Obtaining a style file and an interaction file corresponding to the screening field through the standardized UI control library;

and generating an interactive page based on the style file, the interactive file and a preset page layout file.

Further, 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:

acquiring a type distinguishing field set according to the control type;

acquiring a design style distinguishing field set according to the design style;

the type distinguishing field and the design style distinguishing field corresponding to the UI design control are spliced to obtain a spliced field;

setting the splicing field as the control marking field;

the step of constructing a standardized UI control library according to the control type, the design style and the control mark field specifically includes:

generating a style file and an interaction file corresponding to the UI design control according to the control type and the design style;

and setting the control mark field as a distinguishing mark of the style file and the interactive file, and obtaining the standardized UI control library after construction.

Further, the step of training the pre-constructed control recognition model through the UI design control, the control mark field and the preset training set to obtain a trained control recognition model specifically includes:

the UI design control and the control mark field are used as classification information and are deployed into a pre-constructed control identification model, wherein the control identification model is a target detection model based on a YOLO algorithm, specifically, the UI design control is used as a classification reference picture, the control mark field is used as a model output field of a corresponding UI design control, and the UI design control and the control mark field are deployed into the target detection model based on the YOLO algorithm;

and inputting a preset training set into the pre-constructed control identification model, training the control identification model, and obtaining a trained control identification model.

Further, the step of inputting a preset training set into the pre-constructed control identification model, training the control identification model, and obtaining a trained control identification model specifically includes:

step 601, acquiring UI design controls actually contained in the second number of UI prototype graphs respectively as reference results;

Step 602, inputting the second number of UI prototype graphs into the YOLO algorithm-based object detection model, detecting classification information, and outputting corresponding control mark fields;

step 603, determining UI design controls respectively contained in the second number of UI prototype graphs as detection results according to the control mark field;

step 604, calculating a loss degree of the detection result compared with the reference result according to a preset loss function;

step 605, judging whether the loss degree exceeds a preset loss degree threshold;

step 606, if the loss degree exceeds a preset loss degree threshold, adjusting the super parameters of the target detection model, and re-executing steps 602 to 605;

and step 607, if the loss degree does not exceed the preset loss degree threshold, obtaining the target detection model as a control identification model after training.

Further, the step of inputting the second number of UI prototype graphs into the YOLO algorithm-based object detection model, detecting classification information, and outputting corresponding control mark fields specifically includes:

obtaining frames of all classified reference pictures according to a YOLO algorithm, and calculating the aspect ratio of the frames to be used as reference frame characteristics;

According to the YOLO algorithm, detecting frames respectively contained in the second number of UI prototype graphs are obtained, and aspect ratio examples of the detecting frames are calculated to be used as detecting frame characteristics;

comparing the detected frame characteristics with the reference frame characteristics to obtain a comparison result;

obtaining classified reference pictures corresponding to the detected frame features according to the comparison result;

and identifying and outputting a corresponding control mark field according to the classified reference pictures.

Further, the step of inputting the UI prototype graph to be identified into the trained control identification model, identifying and outputting a control mark field of the UI design control included in the UI prototype graph to be identified as a screening field specifically includes:

detecting classification information of the UI prototype graph to be identified, and identifying UI design controls contained in the UI prototype graph to be identified according to the classification reference pictures;

outputting a corresponding control mark field as the screening field according to the UI design control contained in the UI prototype to be identified;

the style file comprises a CSS format file, the interaction file comprises a JS format file, and the step of obtaining the style file and the interaction file corresponding to the screening field through the standardized UI control library specifically comprises the following steps:

And screening the CSS format file and the JS format file corresponding to the screening field from the standardized UI control library based on the screening field and a preset file export interface.

Further, 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 a preset page layout file specifically includes:

according to a preset file importing interface, importing the CSS format file and JS format file corresponding to the screening field into the XML layout file;

analyzing the XML layout file through a preset file analysis component, and generating the interactive page according to an analysis result;

after executing the step of generating an interactive page based on the style file, the interactive file and a preset page layout file, the method further includes:

detecting whether the interactive functions in the interactive page are realized or not through a preset detection component;

if the interactive functions in the interactive page are realized, sending the generated prompt information of the interactive page to a target monitoring terminal;

and if the interactive function is not realized in the interactive page, sending an interactive page adjustment request to the target monitoring terminal.

In order to solve the technical problems, the embodiment of the application also provides an interactive page generating device, which adopts the following technical scheme:

an interactive page generation apparatus, comprising:

the UI design control acquisition module is used for acquiring a first number of UI design controls, wherein the UI design controls comprise a plurality of control types, and the UI design controls of the same control type comprise a plurality of design styles;

the UI design control marking module is used for marking the UI design control according to the control type and the design style to obtain a control marking field;

the standardized UI control library construction module is used for constructing a standardized UI control library according to the control type, the design style and the control mark field, wherein the standardized UI control library comprises style files and interaction files of the UI design controls;

the control identification model training module is used for training a pre-constructed control identification model through the UI design control, the control marking field and a preset training set to obtain a trained control identification model, wherein the training set contains a second number of UI prototype graphs, and the UI prototype graphs in the training set all clearly contain the UI design control;

The UI prototype graph acquisition module to be identified is used for acquiring the UI prototype graph to be identified;

the model identification module is used for inputting the UI prototype graph to be identified into the trained control identification model, and identifying and outputting control mark fields of UI design controls contained in the UI prototype graph to be identified as screening fields;

the target file acquisition module is used for acquiring the style file and the interaction file corresponding to the screening field through the standardized UI control library;

and the interactive page generation module is used for generating an interactive page based on the style file, the interactive file and a preset page layout file.

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

a computer device comprising a memory having stored therein computer readable instructions which when executed by a processor implement the steps of the interactive page generation method described above.

In order to solve the above technical problems, an embodiment of the present application further provides a computer readable storage medium, which adopts the following technical schemes:

A computer readable storage medium having stored thereon computer readable instructions which when executed by a processor implement the steps of the interactive page generation method as described above.

Compared with the prior art, the embodiment of the application has the following main beneficial effects:

according to the interactive page generation method, the first number of UI design controls are obtained; marking according to the control type and the design style to obtain a control marking field; constructing a standardized UI control library; training a pre-constructed control identification model through UI design controls, control mark fields and a preset training set to obtain a trained control identification model; acquiring a UI prototype graph to be identified; inputting the UI prototype graph to be identified into a trained control identification model, and identifying and outputting control mark fields of UI design controls contained in the UI prototype graph to be identified; obtaining a corresponding style file and an interactive file through a standardized UI control library; and generating an interactive page based on the style file, the interactive file and a preset page layout file. When a UI designer designs or updates a financial APP page or a financial interaction page, the UI prototype graph is directly input into the trained control recognition model to perform UI design control recognition, then a corresponding style file and an interaction file are obtained from the standardized UI control library, the style file and the interaction file are imported into an XML layout file, and the interaction page is generated through reading, so that the generation efficiency of the interaction page is improved, and the timely online and quick release of related financial business applications are ensured.

Drawings

In order to more clearly illustrate the solution of the present application, a brief description will be given below of the drawings required for the description of the embodiments of the present application, it being apparent that the drawings in the following description are some embodiments of the present application, and that other drawings may be obtained from these drawings without the exercise of inventive effort for a person of ordinary skill in the art.

FIG. 1 is an exemplary system architecture diagram in which the present application may be applied;

FIG. 2 is a flow chart of one embodiment of an interactive page generation method according to the present application;

FIG. 3 is a flow chart of one embodiment of step 202 of FIG. 2;

FIG. 4 is a flow chart of one embodiment of step 203 shown in FIG. 2;

FIG. 5 is a flow chart of one embodiment of step 204 shown in FIG. 2;

FIG. 6 is a flow chart of one embodiment of step 502 shown in FIG. 5;

FIG. 7 is a flow chart of one embodiment of step 602 shown in FIG. 6;

FIG. 8 is a schematic diagram illustrating the structure of one embodiment of an interactive page generating apparatus in accordance with the present application;

FIG. 9 is a schematic structural view of one embodiment of a computer device according to the present application.

Detailed Description

Unless defined otherwise, 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 in the description of the applications herein is for the purpose of describing particular embodiments only and is not intended to be limiting of the application; the terms "comprising" and "having" and any variations thereof in the description of the application and the claims and the description of the drawings above are intended to cover a non-exclusive inclusion. The terms first, second and the like in the description and in the claims or in the above-described figures, are used for distinguishing between different objects and not necessarily for describing a sequential or chronological order.

Reference herein to "an embodiment" means that a particular feature, structure, or characteristic described in connection with the embodiment may be included in at least one embodiment of the application. The appearances of such phrases in various places in the specification are not necessarily all referring to the same embodiment, nor are separate or alternative embodiments mutually exclusive of other embodiments. Those of skill in the art will explicitly and implicitly appreciate that the embodiments described herein may be combined with other embodiments.

In order to make the person skilled in the art better understand the solution of the present application, the technical solution of the embodiment of the present application will be clearly and completely described below with reference to the accompanying drawings.

As shown in fig. 1, a system architecture 100 may include terminal devices 101, 102, 103, a network 104, and a server 105. The network 104 is used as a medium to provide communication links between the terminal devices 101, 102, 103 and the server 105. The network 104 may include various connection types, such as wired, wireless communication links, or fiber optic cables, among others.

The user may interact with the server 105 via the network 104 using the terminal devices 101, 102, 103 to receive or send messages or the like. Various communication client applications, such as a web browser application, a shopping class application, a search class application, an instant messaging tool, a mailbox client, social platform software, etc., may be installed on the terminal devices 101, 102, 103.

The terminal devices 101, 102, 103 may be various electronic devices having a display screen and supporting web browsing, including but not limited to smartphones, tablet computers, electronic book readers, MP3 players (Moving Picture ExpertsGroup Audio Layer III, dynamic video expert compression standard audio plane 3), MP4 (Moving PictureExperts Group Audio Layer IV, dynamic video expert compression standard audio plane 4) players, laptop and desktop computers, and the like.

The server 105 may be a server providing various services, such as a background server providing support for pages displayed on the terminal devices 101, 102, 103.

It should be noted that, the method for generating an interactive page provided by the embodiment of the present application is generally executed by a server/terminal device, and accordingly, the device for generating an interactive page is generally disposed in the server/terminal device.

It should be understood that the number of terminal devices, networks and servers in fig. 1 is merely illustrative. There may be any number of terminal devices, networks, and servers, as desired for implementation.

With continued reference to FIG. 2, a flow chart of one embodiment of an interactive page generation method in accordance with the present application is shown. The interactive page generation method comprises the following steps:

step 201, a first number of UI design controls are obtained, wherein the UI design controls include a plurality of control types, and UI design controls of the same control type include a plurality of design styles.

In this embodiment, the UI design control may be a UI design control forming an interaction page of a financial target terminal, for example, the UI design control is applied to a financial company service terminal, a client operation terminal, and a financial APP interface, and is used for generating the interaction page.

In this embodiment, the control types of the UI design controls include a picture control, a button control, a text control and a list control, and the UI design controls of the same type include different design styles, for example, a button control, and according to different functions, there may be a search type button, a submit type button and an accumulation type button; depending on the shape, there may also be circular buttons, rectangular buttons, etc.

And 202, marking the UI design control according to the control type and the design style to obtain a control marking field.

With continued reference to FIG. 3, FIG. 3 is a flow chart of one embodiment of step 202 shown in FIG. 2, comprising:

step 301, obtaining a type distinguishing field set according to the control type;

step 302, obtaining a design style distinguishing field set according to the design style;

step 303, obtaining a spliced field by splicing the type distinguishing field and the design style distinguishing field corresponding to the UI design control;

and step 304, setting the splicing field as the control marking field.

And by adopting a splicing mode to generate control marking fields respectively corresponding to different UI design controls according to the type distinguishing fields set by the control types and the design style distinguishing fields set by the design styles, the target UI design control screening is conveniently and rapidly carried out from a related database according to the control marking fields, and the screening time is saved.

And 203, constructing a standardized UI control library according to the control type, the design style and the control mark field, wherein the standardized UI control library comprises a style file and an interaction file of the UI design control.

With continued reference to fig. 4, fig. 4 is a flow chart of one embodiment of step 203 shown in fig. 2, comprising:

step 401, generating a style file and an interaction file corresponding to the UI design control according to the control type and the design style;

and step 402, setting the control mark field as a distinguishing identifier of the style file and the interactive file, and obtaining the standardized UI control library after construction.

By generating the style file and the interaction file corresponding to the UI design control according to the control type and the design style, setting the control mark field as the distinguishing identification of the style file and the interaction file, obtaining the standardized UI control library after construction is completed, facilitating the use of the control mark field to obtain the style file and the interaction file corresponding to the corresponding UI design control, and being capable of obtaining the corresponding style file and the interaction file for multiplexing only by searching without need of coding and writing again each time when the same control is used, the development efficiency of the interaction page in the financial industry is improved to a certain extent.

And 204, training a pre-constructed control identification model through the UI design control, the control mark field and a preset training set to obtain a trained control identification model, wherein the training set contains a second number of UI prototype graphs, and the UI prototype graphs in the training set all clearly contain the UI design control.

With continued reference to fig. 5, fig. 5 is a flow chart of one embodiment of step 204 shown in fig. 2, comprising:

step 501, using the UI design control and the control mark field as classification information, and deploying the classification information into a pre-constructed control identification model;

in this embodiment, the control identification model is a target detection model based on a YOLO algorithm, specifically, the UI design control is used as a classification reference picture, and the control mark field is used as a model output field of the corresponding UI design control and is deployed to the target detection model based on the YOLO algorithm;

YOLO (You Only Look Once) series algorithm is a typical target detection algorithm, which combines classification and regression problems of target positioning by utilizing target frame characteristics, so that the high-efficiency, flexible and good generalization performance is achieved, and the core idea of the Yolo algorithm is to directly regress the position of a target boundary frame and the category to which the target boundary frame belongs at an output layer by utilizing the whole graph to be detected as the input of a network. Specifically, in this embodiment, the UI prototype graph is mainly used as an input of a network, and the positions of bounding boxes of all UI design controls and control types of all UI design controls in the UI prototype graph are directly regressed at an output layer.

The UI design control is used as a classification reference picture, the control mark field is used as a model output field of the corresponding UI design control, and the classification reference picture is deployed to the target detection model based on the YOLO algorithm, namely, a reference sample is designed in the target detection model based on the YOLO algorithm in advance, so that priori knowledge can be used for basis when training and detection are carried out, and the accuracy of UI design control identification is improved.

Step 502, inputting a preset training set into the pre-constructed control identification model, training the control identification model, and obtaining a trained control identification model.

With continued reference to FIG. 6, FIG. 6 is a flow chart of one embodiment of step 502 shown in FIG. 5, comprising:

with continued reference to fig. 7, fig. 7 is a flow chart of one embodiment of step 602 shown in fig. 6, comprising:

step 701, obtaining frames of all classified reference pictures according to a YOLO algorithm, and calculating a frame aspect ratio as a reference frame feature;

Step 702, obtaining detection frames respectively contained in the second number of UI prototype graphs according to the YOLO algorithm, and calculating aspect ratio examples of the detection frames as detection frame features;

step 703, comparing the detected frame feature with the reference frame feature to obtain a comparison result;

step 704, obtaining a classified reference picture corresponding to the detected frame feature according to the comparison result;

step 705, identifying and outputting a corresponding control mark field according to the classified reference picture.

In this embodiment, in a training stage of a control identification model, in order to detect UI design controls in each UI prototype graph in the training set, a frame aspect ratio of the UI design controls in the UI prototype graph is obtained, and the UI design controls included in each UI prototype graph in the training set are identified by comparison according to the frame aspect ratio of all the classified reference pictures.

And the UI prototype graphs in the training set are input into the target detection model based on the YOLO algorithm to obtain a detection result of the model, and the UI design control is clearly contained in the UI prototype graphs in the training set, so that the loss degree of the detection result compared with the reference result is calculated through a preset loss function, whether the control identification model is trained is conveniently identified, the control identification model after the training is conveniently applied, and when the financial APP or the financial interaction page is designed, UI design control identification is carried out according to the control identification model after the training, and the generation efficiency of the interaction page is improved.

Step 205, a UI prototype graph to be identified is obtained.

And 206, inputting the UI prototype graph to be recognized into the trained control recognition model, and recognizing and outputting control marking fields of UI design controls contained in the UI prototype graph to be recognized as screening fields.

In this embodiment, the step of inputting the UI prototype graph to be identified into the trained control identification model, identifying and outputting a control mark field of a UI design control included in the UI prototype graph to be identified, as a screening field specifically includes: detecting classification information of the UI prototype graph to be identified, and identifying UI design controls contained in the UI prototype graph to be identified according to the classification reference pictures; and outputting a corresponding control mark field as the screening field according to the UI design control contained in the UI prototype to be identified.

And step 207, obtaining the style file and the interaction file corresponding to the screening field through the standardized UI control library.

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

In this embodiment, the step of obtaining, by using the standardized UI control library, the style file and the interaction file corresponding to the filtering field specifically includes: and screening the CSS format file and the JS format file corresponding to the screening field from the standardized UI control library based on the screening field and a preset file export interface.

And step 208, generating an interactive page based on the style file, the interactive file and a preset page layout file.

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

In this embodiment, the step of generating the interactive page based on the style file, the interactive file and the preset page layout file specifically includes: according to a preset file importing interface, importing the CSS format file and JS format file corresponding to the screening field into the XML layout file; and analyzing the XML layout file through a preset file analysis component, and generating the interactive page according to an analysis result. Specifically, the preset file analysis component has a reading function on the XML layout file.

In this embodiment, after the step of generating the interactive page based on the style file, the interactive file, and the preset page layout file is performed, the method further includes: detecting whether the interactive functions in the interactive page are realized or not through a preset detection component; if the interactive functions in the interactive page are realized, sending the generated prompt information of the interactive page to a target monitoring terminal; and if the interactive function is not realized in the interactive page, 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 realized.

When a UI designer designs or updates a financial APP page or a financial interaction page, the UI prototype graph is directly input into the trained control recognition model to perform UI design control recognition, then a corresponding style file and an interaction file are obtained from the standardized UI control library, the style file and the interaction file are imported into an XML layout file, and the interaction page is generated through reading, so that the generation efficiency of the interaction page is improved, and the timely online and quick release of related financial business applications are ensured.

The method comprises the steps of obtaining a first number of UI design controls; marking according to the control type and the design style to obtain a control marking field; constructing a standardized UI control library; training a pre-constructed control identification model through UI design controls, control mark fields and a preset training set to obtain a trained control identification model; acquiring a UI prototype graph to be identified; inputting the UI prototype graph to be identified into a trained control identification model, and identifying and outputting control mark fields of UI design controls contained in the UI prototype graph to be identified; obtaining a corresponding style file and an interactive file through a standardized UI control library; and generating an interactive page based on the style file, the interactive file and a preset page layout file. When a UI designer designs or updates a financial APP page or a financial interaction page, the UI prototype graph is directly input into the trained control recognition model to perform UI design control recognition, then a corresponding style file and an interaction file are obtained from the standardized UI control library, the style file and the interaction file are imported into an XML layout file, and the interaction page is generated through reading, so that the generation efficiency of the interaction page is improved, and the timely online and quick release of related financial business applications are ensured.

The embodiment of the application can acquire and process the related data based on the artificial intelligence technology. Among these, artificial intelligence (Artificial Intelligence, AI) is the theory, method, technique and application system that uses a digital computer or a digital computer-controlled machine to simulate, extend and extend human intelligence, sense the environment, acquire knowledge and use knowledge to obtain optimal results.

Artificial intelligence infrastructure technologies generally include technologies such as sensors, dedicated artificial intelligence chips, cloud computing, distributed storage, big data processing technologies, operation/interaction systems, mechatronics, and the like. The artificial intelligence software technology mainly comprises a computer vision technology, a robot technology, a biological recognition technology, a voice processing technology, a natural language processing technology, machine learning/deep learning and other directions.

In the embodiment of the application, when a UI designer designs or updates a financial APP page or a financial interaction page, the UI prototype graph is directly input into the trained control recognition model to carry out UI design control recognition, then the corresponding style file and interaction file are acquired from the standardized UI control library, and are imported into an XML layout file to generate the interaction page through interpretation, so that the generation efficiency of the interaction page is improved, and the timely online and quick release of related financial business applications are ensured.

With further reference to fig. 8, as an implementation of the method shown in fig. 2, the present application provides an embodiment of an interactive page generating apparatus, where an embodiment of the apparatus corresponds to the embodiment of the method shown in fig. 2, and the apparatus may be specifically applied to various electronic devices.

As shown in fig. 8, the interactive page generating apparatus 800 according to the present 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 graph to be recognized acquisition module 805, a model recognition module 806, a target file acquisition module 807, and an interaction page generation module 808. Wherein:

a UI design control acquisition module 801, configured to acquire a first number of UI design controls, where the UI design controls include a plurality of control types, and UI design controls of a same control type include a plurality of design styles;

the UI design control marking module 802 is configured to mark the UI design control according to the control type and the design style, and obtain a control mark field;

the 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 mark field, where the standardized UI control library includes a style file and an interaction file of the UI design control;

The control recognition model training module 804 is configured to train a pre-constructed control recognition model through the UI design control, the control mark field and a preset training set, so as to obtain a trained control recognition model, where the training set includes a second number of UI prototype graphs, and the UI prototype graphs in the training set all explicitly include the UI design control;

the UI prototype graph to be identified obtaining module 805, configured to obtain a UI prototype graph to be identified;

the model identifying module 806 is configured to input the UI prototype graph to be identified into the trained control identifying model, identify and output a control mark field of a UI design control included in the UI prototype graph to be identified as a screening field;

a target file obtaining module 807, configured to obtain, through the standardized UI control library, a style file and an interaction file corresponding to the filtering field;

and 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.

Those skilled in the art will appreciate that implementing all or part of the above described embodiment methods may be accomplished by computer readable instructions, stored on a computer readable storage medium, that the program when executed may comprise the steps of embodiments of the methods described above. The storage medium may be a nonvolatile storage medium such as a magnetic disk, an optical disk, a Read-Only Memory (ROM), or a random access Memory (Random Access Memory, RAM).

It should be understood that, although the steps in the flowcharts of the figures are shown in order as indicated by the arrows, these steps are not necessarily performed in order as indicated by the arrows. The steps are not strictly limited in order and may be performed in other orders, unless explicitly stated herein. Moreover, at least some of the steps in the flowcharts of the figures may include a plurality of sub-steps or stages that are not necessarily performed at the same time, but may be performed at different times, the order of their execution not necessarily being sequential, but may be performed in turn or alternately with other steps or at least a portion of the other steps or stages.

In order to solve the technical problems, the embodiment of the application also provides computer equipment. Referring specifically to fig. 9, fig. 9 is a basic structural block diagram of a computer device according to the present embodiment.

The computer device 9 comprises a memory 9a, a processor 9b, a network interface 9c communicatively connected to each other via a system bus. It should be noted that only a computer device 9 having components 9a-9c is shown in the figures, but it should be understood that not all of the illustrated components need be implemented, and that more or fewer components may alternatively be implemented. It will be appreciated by those skilled in the art that the computer device herein is a device capable of automatically performing numerical calculations and/or information processing in accordance with predetermined or stored instructions, the hardware of which includes, but is not limited to, microprocessors, application specific integrated circuits (Application Specific Integrated Circuit, ASICs), programmable gate arrays (fields-Programmable Gate Array, FPGAs), digital processors (Digital Signal Processor, DSPs), embedded devices, etc.

The computer equipment can be a desktop computer, a notebook computer, a palm computer, a cloud server and other computing equipment. The computer equipment can perform man-machine interaction with a user through a keyboard, a mouse, a remote controller, a touch pad or voice control equipment and the like.

The memory 9a includes at least one type of readable storage medium including flash memory, hard disk, multimedia card, card memory (e.g., SD or DX memory, etc.), 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 storage 9a may be an internal storage unit of the computer device 9, such as a hard disk or a memory of the computer device 9. In other embodiments, the memory 9a may also be an external storage device of the computer device 9, such as a plug-in hard disk, a Smart Media Card (SMC), a Secure Digital (SD) Card, a Flash Card (Flash Card) or the like, which are provided on the computer device 9. Of course, the memory 9a may also comprise both an internal memory unit of the computer device 9 and an external memory device. In this embodiment, the memory 9a is generally used to store an operating system and various application software installed on the computer device 9, such as computer readable instructions of an interactive page generating method. Further, the memory 9a may be used to temporarily store various types of data that have been output or are to be output.

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

The network interface 9c may comprise a wireless network interface or a wired network interface, which network interface 9c is typically used for establishing a communication connection between the computer device 9 and other electronic devices.

The computer equipment provided by the embodiment belongs to the technical field of financial science and technology, and is applied to a financial target terminal interaction page generation scene. The method comprises the steps of obtaining a first number of UI design controls; marking according to the control type and the design style to obtain a control marking field; constructing a standardized UI control library; training a pre-constructed control identification model through UI design controls, control mark fields and a preset training set to obtain a trained control identification model; acquiring a UI prototype graph to be identified; inputting the UI prototype graph to be identified into a trained control identification model, and identifying and outputting control mark fields of UI design controls contained in the UI prototype graph to be identified; obtaining a corresponding style file and an interactive file through a standardized UI control library; and generating an interactive page based on the style file, the interactive file and a preset page layout file. When a UI designer designs or updates a financial APP page or a financial interaction page, the UI prototype graph is directly input into the trained control recognition model to perform UI design control recognition, then a corresponding style file and an interaction file are obtained from the standardized UI control library, the style file and the interaction file are imported into an XML layout file, and the interaction page is generated through reading, so that the generation efficiency of the interaction page is improved, and the timely online and quick release of related financial business applications are ensured.

The present application also provides another embodiment, namely, a computer-readable storage medium storing computer-readable instructions executable by a processor to cause the processor to perform the steps of the interactive page generation method as described above.

The computer readable storage medium provided by the embodiment belongs to the technical field of financial science and technology, and is applied to a financial target terminal interaction page generation scene. The method comprises the steps of obtaining a first number of UI design controls; marking according to the control type and the design style to obtain a control marking field; constructing a standardized UI control library; training a pre-constructed control identification model through UI design controls, control mark fields and a preset training set to obtain a trained control identification model; acquiring a UI prototype graph to be identified; inputting the UI prototype graph to be identified into a trained control identification model, and identifying and outputting control mark fields of UI design controls contained in the UI prototype graph to be identified; obtaining a corresponding style file and an interactive file through a standardized UI control library; and generating an interactive page based on the style file, the interactive file and a preset page layout file. When a UI designer designs or updates a financial APP page or a financial interaction page, the UI prototype graph is directly input into the trained control recognition model to perform UI design control recognition, then a corresponding style file and an interaction file are obtained from the standardized UI control library, the style file and the interaction file are imported into an XML layout file, and the interaction page is generated through reading, so that the generation efficiency of the interaction page is improved, and the timely online and quick release of related financial business applications are ensured.

From the above description of the embodiments, it will be clear to those skilled in the art that the above-described embodiment method may be implemented by means of software plus a necessary general hardware platform, but of course may also be implemented by means of hardware, but in many cases the former is a preferred embodiment. Based on such understanding, the technical solution of the present application may be embodied essentially or in a part contributing to the prior art in the form of a software product stored in a storage medium (e.g. ROM/RAM, magnetic disk, optical disk) comprising instructions for causing a terminal device (which may be a mobile phone, a computer, a server, an air conditioner, or a network device, etc.) to perform the method according to the embodiments of the present application.

It is apparent that the above-described embodiments are only some embodiments of the present application, but not all embodiments, and the preferred embodiments of the present application are shown in the drawings, which do not limit the scope of the patent claims. This application may be embodied in many different forms, but rather, embodiments are provided in order to provide a thorough and complete understanding of the present disclosure. Although the application has been described in detail with reference to the foregoing embodiments, it will be apparent to those skilled in the art that modifications may be made to the embodiments described in the foregoing description, or equivalents may be substituted for elements thereof. All equivalent structures made by the content of the specification and the drawings of the application are directly or indirectly applied to other related technical fields, and are also within the scope of the application.

Claims

1. The interactive page generation method is characterized by comprising the following steps:

acquiring a first number of U I design controls, wherein the U I design controls comprise a plurality of control types, and the UI design controls of the same control type comprise a plurality of design styles;

marking the U I design control according to the control type and the design style to obtain a control marking field;

training a pre-constructed control identification model through the U I design control, the control mark field and a preset training set to obtain a trained control identification model, wherein the training set contains a second number of UI prototype graphs, and the UI prototype graphs in the training set all explicitly contain U I design controls;

acquiring a U I prototype graph to be identified;

inputting the U I prototype graph to be identified into the trained control identification model, and identifying and outputting control mark fields of UI design controls contained in the UI prototype graph to be identified as screening fields;

Obtaining a style file and an interaction file corresponding to the screening field through the standardized U I control library;

2. The method for generating an interactive page according to claim 1, wherein the step of marking the U I design control according to the control type and the design style to obtain a control marking field specifically comprises:

acquiring a type distinguishing field set according to the control type;

splicing the type distinguishing field and the design style distinguishing field corresponding to the U I design control to obtain a spliced field;

setting the splicing field as the control marking field;

generating a style file and an interaction file corresponding to the U I design control according to the control type and the design style;

3. The method for generating an interactive page according to claim 1 or 2, wherein the step of training a pre-constructed control recognition model by the U I design control, the control mark field and a preset training set to obtain a trained control recognition model specifically comprises the following steps:

deploying the U I design control and the control mark field as classification information into a pre-constructed control identification model, wherein the control identification model is a target detection model based on a YOLO algorithm, specifically, the U I design control is used as a classification reference picture, and the control mark field is used as a model output field of a corresponding U I design control and is deployed to the target detection model based on the YOLO algorithm;

4. The interactive page generating method according to claim 3, wherein the step of inputting a preset training set into the pre-constructed control recognition model, training the control recognition model, and obtaining a trained control recognition model specifically comprises:

step 602, inputting the second number of U I prototype graphs into the YOLO algorithm-based target detection model, detecting classification information, and outputting corresponding control mark fields;

5. The interactive page generating method according to claim 4, wherein the step of inputting the second number of U I prototype graphs into the YOLO algorithm-based object detection model, performing classification information detection, and outputting corresponding control mark fields specifically comprises:

obtaining detection frames respectively contained in the second number of U I prototype graphs according to the YOLO algorithm, and calculating aspect ratio examples of the detection frames to serve as detection frame characteristics;

6. The interactive page generating method according to claim 3, wherein the step of inputting the to-be-identified U I prototype graph into the trained control identification model, and identifying and outputting a control mark field of a U I designed control included in the to-be-identified U I prototype graph as a screening field specifically includes:

detecting classification information of the U I prototype graph to be identified, and identifying a UI design control contained in the UI prototype graph to be identified according to the classification reference picture;

outputting a corresponding control mark field as the screening field according to U I design controls contained in the U I prototype graph to be identified;

The style file comprises a CSS format file, the interaction file comprises a JS format file, and the step of obtaining the style file and the interaction file corresponding to the screening field through the standardized U I control library specifically comprises the following steps:

and screening the CSS format file and the JS format file corresponding to the screening field from the standardized U I control library based on the screening field and a preset file export interface.

7. The method for generating an interactive page according to claim 6, wherein the page layout file comprises an XML layout file, and the step of generating the interactive page based on the style file, the interactive file and a preset page layout file specifically comprises:

8. An interactive page generation apparatus, comprising:

the standardized UI control library construction module is used for constructing a standardized U I control library according to the control type, the design style and the control mark field, wherein the standardized U I control library comprises style files and interaction files of the U I design controls;

the control identification model training module is used for training a pre-constructed control identification model through the U I design control, the control marking field and a preset training set to obtain a trained control identification model, wherein the training set contains U I prototype graphs of a second number, and the U I prototype graphs in the training set all have explicitly contained UI design controls;

the model identification module is used for inputting the U I prototype graph to be identified into the trained control identification model, and identifying and outputting control mark fields of U I design controls contained in the U I prototype graph to be identified as screening fields;

9. A computer device comprising a memory and a processor, the memory having stored therein computer readable instructions which when executed by the processor implement the steps of the interactive page generation method of any of claims 1 to 7.

10. A computer readable storage medium having stored thereon computer readable instructions which when executed by a processor implement the steps of the interactive page generation method of any of claims 1 to 7.