CN116643748A - Bank APP front-end page generation method, device and system and storage medium - Google Patents
Bank APP front-end page generation method, device and system and storage medium Download PDFInfo
- Publication number
- CN116643748A CN116643748A CN202310665257.8A CN202310665257A CN116643748A CN 116643748 A CN116643748 A CN 116643748A CN 202310665257 A CN202310665257 A CN 202310665257A CN 116643748 A CN116643748 A CN 116643748A
- Authority
- CN
- China
- Prior art keywords
- template
- image data
- end page
- coincidence rate
- bank
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Pending
Links
- 238000000034 method Methods 0.000 title claims abstract description 55
- 239000000463 material Substances 0.000 claims abstract description 51
- 238000004364 calculation method Methods 0.000 claims abstract description 20
- 230000000704 physical effect Effects 0.000 claims description 5
- 238000011161 development Methods 0.000 abstract description 35
- 238000005516 engineering process Methods 0.000 abstract description 12
- 230000018109 developmental process Effects 0.000 description 32
- 238000012545 processing Methods 0.000 description 14
- 230000006870 function Effects 0.000 description 13
- 230000008569 process Effects 0.000 description 12
- 238000013461 design Methods 0.000 description 7
- 238000013480 data collection Methods 0.000 description 4
- 238000010586 diagram Methods 0.000 description 4
- 238000004458 analytical method Methods 0.000 description 3
- 238000004891 communication Methods 0.000 description 3
- 238000000605 extraction Methods 0.000 description 3
- 230000011218 segmentation Effects 0.000 description 3
- 238000012360 testing method Methods 0.000 description 3
- 206010063385 Intellectualisation Diseases 0.000 description 2
- 238000010276 construction Methods 0.000 description 2
- 230000003993 interaction Effects 0.000 description 2
- 238000012423 maintenance Methods 0.000 description 2
- 230000007246 mechanism Effects 0.000 description 2
- 239000008186 active pharmaceutical agent Substances 0.000 description 1
- 230000002776 aggregation Effects 0.000 description 1
- 238000004220 aggregation Methods 0.000 description 1
- 238000013500 data storage Methods 0.000 description 1
- 238000001514 detection method Methods 0.000 description 1
- 238000003708 edge detection Methods 0.000 description 1
- 238000001914 filtration Methods 0.000 description 1
- 238000003709 image segmentation Methods 0.000 description 1
- 230000002452 interceptive effect Effects 0.000 description 1
- 230000000877 morphologic effect Effects 0.000 description 1
- 230000003287 optical effect Effects 0.000 description 1
- 238000005457 optimization Methods 0.000 description 1
- 238000005192 partition Methods 0.000 description 1
- ZLIBICFPKPWGIZ-UHFFFAOYSA-N pyrimethanil Chemical compound CC1=CC(C)=NC(NC=2C=CC=CC=2)=N1 ZLIBICFPKPWGIZ-UHFFFAOYSA-N 0.000 description 1
- 239000002699 waste material Substances 0.000 description 1
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/38—Creation or generation of source code for implementing user interfaces
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/34—Graphical or visual programming
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/36—Software reuse
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/70—Software maintenance or management
- G06F8/71—Version control; Configuration management
-
- Y—GENERAL TAGGING OF NEW TECHNOLOGICAL DEVELOPMENTS; GENERAL TAGGING OF CROSS-SECTIONAL TECHNOLOGIES SPANNING OVER SEVERAL SECTIONS OF THE IPC; TECHNICAL SUBJECTS COVERED BY FORMER USPC CROSS-REFERENCE ART COLLECTIONS [XRACs] AND DIGESTS
- Y02—TECHNOLOGIES OR APPLICATIONS FOR MITIGATION OR ADAPTATION AGAINST CLIMATE CHANGE
- Y02D—CLIMATE CHANGE MITIGATION TECHNOLOGIES IN INFORMATION AND COMMUNICATION TECHNOLOGIES [ICT], I.E. INFORMATION AND COMMUNICATION TECHNOLOGIES AIMING AT THE REDUCTION OF THEIR OWN ENERGY USE
- Y02D10/00—Energy efficient computing, e.g. low power processors, power management or thermal management
Landscapes
- Engineering & Computer Science (AREA)
- Software Systems (AREA)
- General Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Human Computer Interaction (AREA)
- Computer Security & Cryptography (AREA)
- Character Input (AREA)
Abstract
The invention provides a method, a device and a system for generating a bank APP front-end page and a storage medium, and relates to the technical fields of financial science and technology and bank APP front-end generation. The bank APP front-end page generation method comprises the following steps: acquiring image data of a target bank webpage and storing the image data into a message queue system; identifying the image data and matching the image data to a webpage layout template and a component template through a first material database; and assembling and constructing the layout template and the component template to obtain the front-end page of the bank. According to the invention, intelligent and automatic development of the front end of the bank APP is realized by utilizing AI intelligent recognition, calculation and assembly drawing, the webpage layout and the webpage style in the webpage image of the bank APP can be rapidly recognized, the front end code is automatically generated, the drawing function of the front end page of the bank APP is completed, the intelligent development of the front end page of the bank APP is greatly improved, the development efficiency of front end developers is improved, and the manpower resource cost is reduced.
Description
Technical Field
The invention relates to the technical fields of financial science and technology and bank APP front-end generation, in particular to a bank APP front-end page generation method, device and system and a storage medium.
Background
Front-end APP Web page development refers to the process of designing and developing bank APPs and applications in financial institutions using Web technology (HTML, CSS, javaScript, etc.). APP front-end page development involves building user interfaces, implementing interactive functions, optimizing website performance, and the like.
Compared with the traditional front-end webpage development, the H5 front-end development in the field of financial science and technology emphasizes the development of websites and application programs applicable to mobile equipment and desktop ends, accords with data acquisition of financial related products, display propaganda of the financial products and operation processing of the data, and relates to technologies in aspects of responsive design, mobile end optimization, offline caching and the like.
Currently, H5 front-end development mainly includes the process of developing websites and applications applicable to mobile devices and desktop ends based on HTML5, CSS3, javaScript, and other technologies. The development mode has the advantages of cross-platform, strong expandability, good interaction experience and the like, and is widely applied to the development of the modern web front end. H5 front-end development requires knowledge of HTML, CSS, javaScript and related technologies, and requires knowledge of some common development frameworks and tools, such as jQuery, act, vue.js, weback, etc.
The general flow of H5 front-end development mainly may include the following steps: (1) demand analysis and UI design: knowing the requirements of clients, and making a product scheme and a UI design; (2) front-end development environment construction: selecting an editor or IDE, installing necessary development tools and libraries; (3) interface development: realizing an interface of a website or an application program according to the UI design draft and the requirement document; (4) functional implementation: various functions of websites or application programs are realized by using JavaScript and other technologies; (5) testing and debugging: testing and debugging the website or the application program, and ensuring the stability, compatibility, safety and the like of the website or the application program; (6) online release: deploying websites or application programs on a server and publishing the websites or application programs to a public network; (7) maintenance and update: maintaining and updating websites or application programs, repairing bug and adding new functions. For example, development of pocket bank APP in a financial institution needs to perform UI design according to requirements of financial products, loan products and fund products aimed by a user, then determine a required APP interface through environment building, and then implement various functions of each financial product in the interface, such as displaying of the financial product, operation of the financial product, data acquisition and processing of the financial product, and the like, by using JavaScript according to the APP interface, and perform maintenance and update simultaneously through online release test.
The whole process is tedious, especially in developing APP web pages of mobile terminals in the financial field, the complexity of the development process is increased due to multiparty requirements and regulations of financial institutions, customer demands, supplier demands and the like, and the same component or card exists in different demands in the development process, so that repeated development is easy to cause, the development efficiency is influenced, and the waste of human resources is caused.
Disclosure of Invention
In view of the above, the present invention provides a bank APP front-end page generation method applicable to the financial science and technology field or the technical field related to the financial science and technology field, comprising:
acquiring image data of a target bank webpage and storing the image data into a message queue system;
identifying the image data in the message queue system, and matching the image data with a webpage layout template and a component template corresponding to the image data through a first material database; the component templates comprise a financial product component template, a loan product component template, a fund product component template, an insurance product component template, an account component template and a transaction component template;
and assembling the layout template and the component template to construct and obtain the front-end page of the bank.
Preferably, the acquiring the image data of the target bank webpage and storing the image data in the message queue system includes:
receiving the image data of the target bank webpage through a server;
and acquiring the image data into the message queue system by using a data acquisition tool.
Preferably, the identifying the image data in the message queue system and matching, through a first material database, to a web page layout template and a component template corresponding to the image data includes:
identifying the image data in the message queue system to obtain image layout information and a plurality of unit area data segmented according to the image data;
and matching the image layout information with the unit area data based on a first material database to obtain a corresponding webpage layout template and a corresponding component template.
Preferably, the identifying the image data in the message queue system to obtain image layout information, and dividing the image data into a plurality of unit area data includes:
identifying the image data by using an OpenCV component to obtain the image layout information of the overall layout of the image data; dividing the image data according to the regions, or obtaining unit region data corresponding to each region; determining a unit type corresponding to each unit area data; the unit types include a physical property class, a loan product class, a fund product class, an insurance product class, an account class, and a transaction class.
Preferably, the matching the image layout information and the unit area data based on the first material database to obtain a corresponding web page layout template and a component template includes:
invoking the first material database with a real-time computing engine;
comparing the image layout information with a layout template in the first material database;
judging whether the comparison coincidence rate of the layout template with the highest comparison coincidence rate reaches a first preset coincidence rate threshold value or not;
if the comparison coincidence rate reaches the first preset coincidence rate threshold value, the layout template with the highest comparison coincidence rate is used as the webpage layout template;
comparing each unit area data with a component image template based on the unit type in the first material database;
judging whether the comparison overlapping ratio of the component image template with the highest comparison overlapping ratio reaches a second preset overlapping ratio threshold value or not;
and if the comparison coincidence rate reaches a second preset coincidence rate threshold value, determining a component image template with the highest comparison coincidence rate as the component template.
Preferably, after determining whether the alignment coincidence rate of the layout template with the highest alignment coincidence rate reaches the first preset coincidence rate threshold, the method further includes:
if the comparison coincidence rate does not reach the preset coincidence rate threshold value, storing the image layout information corresponding to the comparison coincidence rate smaller than the first preset coincidence rate threshold value, and generating corresponding first prompt information; and returning the real-time calculation engine to call the first material database;
after judging whether the comparison coincidence rate of the component image template with the highest comparison coincidence rate reaches the second preset coincidence rate threshold value, the method further comprises:
if the comparison coincidence rate does not reach the second preset coincidence rate threshold value, the unit area data corresponding to the comparison coincidence rate smaller than the second preset coincidence rate threshold value are stored, corresponding second prompt information is generated, and the real-time calculation engine is returned to call the first material database.
Preferably, after the layout template and the component template are assembled to construct a front end page of the bank, the method further includes:
storing the constructed front-end page into a second material database by using a real-time calculation engine;
and when the application end reads the data in the second material database through the corresponding interface, returning the front-end page to the application end.
In addition, in order to solve the above problems, the present invention further provides a device for generating a front end page of a bank APP, including:
the acquisition module is used for acquiring the image data of the target bank webpage and storing the image data into the message queue system;
the identification module is used for identifying the image data in the message queue system and matching the image data with a webpage layout template and a component template corresponding to the image data through a first material database; the component templates comprise a financial product component template, a loan product component template, a fund product component template, an insurance product component template, an account component template and a transaction component template;
and the assembly module is used for constructing and obtaining the front-end page of the bank by assembling the layout template and the assembly template.
In addition, in order to solve the above problems, the present invention further provides a system for generating a bank APP front-end page, which includes a memory and a processor, where the memory stores a bank APP front-end page generating program, and the processor runs the bank APP front-end page generating program to make the bank APP front-end page generating system execute the bank APP front-end page generating method as described above.
In addition, in order to solve the above problems, the present invention further provides a computer readable storage medium, where a bank APP front end page generation program is stored, where the bank APP front end page generation program implements the bank APP front end page generation method described above when executed by a processor.
The invention provides a method, a device, a system and a storage medium for generating a front-end page of a bank APP, wherein the method comprises the following steps: acquiring image data of a target bank webpage and storing the image data into a message queue system; identifying the image data in the message queue system, and matching the image data with a webpage layout template and a component template corresponding to the image data through a first material database; the component templates comprise a financial product component template, a loan product component template, a fund product component template, an insurance product component template, an account component template and a transaction component template; and assembling the layout template and the component template to construct and obtain the front-end page of the bank. According to the invention, intelligent and automatic development of the front end of the bank APP is realized by utilizing AI intelligent recognition, calculation and assembly drawing, the webpage layout and the webpage style in the webpage image of the bank APP can be rapidly recognized, the front end code is automatically generated, the drawing function of the front end page of the bank APP is completed, the intelligent development of the front end page of the bank APP is greatly improved, the development efficiency of front end developers is improved, and the manpower resource cost is reduced.
Drawings
FIG. 1 is a schematic diagram of a hardware operating environment according to an embodiment of a method for generating a front page of a bank APP;
fig. 2 is a schematic flow chart of the embodiment 1 of the bank APP front end page generation method of the present invention;
fig. 3 is a schematic flow chart of refinement of step S100 in embodiment 2 of the bank APP front end page generation method of the present invention;
fig. 4 is a schematic flowchart of refinement of step S200 in embodiment 2 of the bank APP front end page generation method of the present invention;
fig. 5 is a schematic flow chart of refinement of step S210 in embodiment 2 of the bank APP front end page generation method of the present invention;
fig. 6 is a schematic flow chart of refinement of step S220 in embodiment 2 of the bank APP front end page generation method of the present invention;
fig. 7 is a schematic flow and connection diagram of a functional module in embodiment 2 of the bank APP front end page generation method of the present invention;
FIG. 8 is a schematic flow chart of the 3 rd embodiment of the method for generating a front end page of a bank APP according to the present invention;
fig. 9 is a schematic diagram of module connection of the bank APP front end page generating device of the present invention.
The achievement of the objects, functional features and advantages of the present invention will be further described with reference to the accompanying drawings, in conjunction with the embodiments.
Detailed Description
Embodiments of the present invention are described in detail below, wherein like or similar reference numerals refer to like or similar elements or elements having like or similar functions throughout.
Furthermore, the terms "first," "second," and the like, are used for descriptive purposes only and are not to be construed as indicating or implying a relative importance or implicitly indicating the number of technical features indicated. Thus, a feature defining "a first" or "a second" may explicitly or implicitly include one or more such feature. In the description of the present invention, the meaning of "a plurality" is two or more, unless explicitly defined otherwise.
In the present invention, unless explicitly specified and limited otherwise, the terms "mounted," "connected," "secured," and the like are to be construed broadly, and may be, for example, fixedly connected, detachably connected, or integrally formed; can be mechanically or electrically connected; can be directly connected or indirectly connected through an intermediate medium, and can be communicated with the inside of two elements or the interaction relationship of the two elements. The specific meaning of the above terms in the present invention can be understood by those of ordinary skill in the art according to the specific circumstances.
It should be understood that the specific embodiments described herein are for purposes of illustration only and are not intended to limit the scope of the invention.
Fig. 1 is a schematic structural diagram of a hardware operating environment of a terminal according to an embodiment of the present invention.
The bank APP front-end page generation system can be a PC, a mobile terminal device such as a smart phone, a tablet computer or a portable computer, and the like. The bank APP front-end page generation system can comprise: a processor 1001, e.g. a CPU, a network interface 1004, a user interface 1003, a memory 1005 and a communication bus 1002. Wherein the communication bus 1002 is used to enable connected communication between these components. The user interface 1003 may include a display screen, an input unit such as a keyboard, a remote control, and the optional user interface 1003 may also include a standard wired interface, a wireless interface. The network interface 1004 may optionally include a standard wired interface, a wireless interface (e.g., WI-FI interface). The memory 1005 may be a high-speed RAM memory or a stable memory such as a disk memory. The memory 1005 may also optionally be a storage device separate from the processor 1001 described above. Optionally, the bank APP front-end page generation system may further include an RF (Radio Frequency) circuit, an audio circuit, a WiFi module, and the like. In addition, the bank APP front-end page generation system can be further provided with other sensors such as a gyroscope, a barometer, a hygrometer, a thermometer, an infrared sensor and the like, and the description is omitted here.
Those skilled in the art will appreciate that the bank APP front-end page generation system shown in fig. 1 is not limiting and may include more or fewer components than shown, or may combine certain components, or may be a different arrangement of components. As shown in fig. 1, an operating system, a data interface control program, a network connection program, and a bank APP front-end page generation program may be included in a memory 1005 as one type of computer-readable storage medium.
In a word, the intelligent development and automation of the front end of the bank APP are realized by utilizing the AI intelligent recognition, calculation and assembly drawing, the webpage layout and the webpage style in the webpage image of the bank APP can be rapidly recognized, the front end code is automatically generated, the drawing function of the front end page of the bank APP is completed, the intelligent development of the front end page of the bank APP is greatly improved, the development efficiency of front end developers is improved, and the manpower resource cost is reduced.
Example 1:
referring to fig. 2, embodiment 1 of the present invention provides a method for generating a front end page of a bank APP, including:
step S100, obtaining image data of a target bank webpage and storing the image data into a message queue system;
the target bank webpage is the webpage page referred by the user for developing the front-end webpage of the bank. The target bank webpage can be a single webpage or a webpage set formed by a plurality of mutually related webpages.
The image data may be a graphic, a picture file, or feature data, or a graphic picture and feature data obtained by capturing according to the target page.
The message queue system is the MQ queue.
Further, referring to fig. 3, the step S100 of acquiring image data of the target bank webpage and storing the image data in the message queue system includes:
step S110, receiving the image data of the target bank webpage through a server;
and step S120, acquiring the image data into the message queue system by using a data acquisition tool.
When the image data is acquired, the image data can be directly acquired through the server, or the image data of the corresponding target page can be acquired by a user and then uploaded to the corresponding server.
The data collection tool may be a jump. The jump is a distributed, reliable and efficient data collection tool, and is mainly used for collecting a large amount of log data from various data sources (such as a Web server, an application program and the like) into a Hadoop and other storage systems. The Flume adopts a streaming mode, and can realize efficient collection, aggregation and movement of a large amount of data.
Furthermore, other data acquisition tools may be employed in addition to jume, including but not limited to the following:
(1) Logstack: logstack is an open source data collection engine that can dynamically collect, convert and store data and support a variety of data sources and targets.
(2) Fluentd: fluentd is a lightweight, efficient data collection tool that supports multiple data sources and targets, and provides a flexible plug-in architecture that can be easily extended.
(3) Kafka Connect: kafka Connect is a component of Apache Kafka that provides a versatile framework to easily integrate various data sources with Kafka.
Step 200, identifying the image data in the message queue system, and matching the image data with a webpage layout template and a component template corresponding to the image data through a first material database; the component templates comprise a financial product component template, a loan product component template, a fund product component template, an insurance product component template, an account component template and a transaction component template;
the first material database is a pre-stored database, and includes pre-stored web page layout templates of different types and styles and meeting different requirements, and component templates corresponding to components in different areas of the web page.
The above-mentioned recognition is performed on the image data after capturing, so that the feature information in the image data can be obtained, where the feature information is represented in two aspects, namely, the overall layout, and in the second aspect, each web page component in the picture.
By identifying the image data and matching the obtained information with the data in the first material database, the corresponding web page layout template and component template can be extracted.
In the foregoing, in the front-end page, different areas, for example, a fund product, a loan product, a financial product, an insurance product, an account component, a transaction component, etc., are included, and in order to further improve the matching accuracy and the matching efficiency, in the identifying process, after the image data is identified, the corresponding component templates are determined, for example, but not limited to, a financial product component template, a loan product component template, a fund product component template, an insurance product component template, an account component template, and a transaction component template, and may also be related templates in other financial and technological fields.
And step S300, assembling the layout template and the component template to construct and obtain a bank front-end page.
And assembling the matched webpage layout template and the component template based on the original image data and the webpage layout template and the component template, so that the constructed front-end page is obtained.
According to the bank APP front-end page generation method, intelligent and automatic development of the bank APP front-end is realized by utilizing AI intelligent recognition, calculation and assembly drawing, the webpage layout and the webpage style in the webpage image of the bank APP can be rapidly recognized, the front-end code is automatically generated, the drawing function of the bank APP front-end page is completed, the intelligent development of the bank APP front-end page is greatly improved, the development efficiency of front-end developers is improved, and the human resource cost is reduced.
Example 2:
referring to fig. 4, embodiment 2 of the present invention provides a method for generating a front end page of a bank APP, which is based on embodiment 1 above. The step S200 of identifying the image data in the message queue system and matching the image data to a web page layout template and a component template corresponding to the image data through a first material database includes:
step S210, identifying the image data in the message queue system, obtaining image layout information and dividing a plurality of unit area data according to the image data;
after capturing the image data, the image data can be identified, so that relevant characteristic information in the image data is extracted.
Among these, two aspects are involved:
in a first aspect, an overall layout is involved. The image data is a file which takes the picture file as a carrier and reflects the whole or part of the target bank webpage, the whole layout of the target bank webpage can be obtained or obtained through the identification of the file, for example, the advertisement column, the member transaction information display area, the forum area and the financial regulation display area which are sequentially arranged from top to bottom of a specific strip icon column form a webpage for displaying the transaction of the financial product. Or the obtained relevant characteristics of the layout of the webpage taking the picture as a carrier.
In a second aspect, an individual area is involved. Each web page contains a plurality of individual display or functional parts, and the parts are used as an individual area and have a plurality of design characteristics. The image file is divided into the following image files by dividing the corresponding image data as needed: specific strip icons, advertising columns, member transaction information display areas, forum areas, financial regulation display areas and the like, wherein each area serves as corresponding unit area data so as to facilitate finer identification and page construction.
And step S220, matching the image layout information with the unit area data based on a first material database to obtain a corresponding webpage layout template and a corresponding component template.
And matching the identified image layout information and the cell area data with pre-stored data in the first material data, so as to respectively start from the overall layout and the characteristic components of the individual areas or obtain corresponding templates.
Further, referring to fig. 5, the step S210 of identifying the image data in the message queue system, obtaining image layout information, and dividing the plurality of unit area data according to the image data includes:
step S211, identifying the image data by using an OpenCV component to obtain the image layout information of the overall layout of the image data; and dividing the image data according to the regions, or obtaining unit region data corresponding to each region. Determining a unit type corresponding to each unit area data; the unit types include a physical property class, a loan product class, a fund product class, an insurance product class, an account class, and a transaction class.
The image data in the Kafka message queue system is consumed by the flank real-time computing engine. And then invoking an OpenCV component to realize the identification of the picture and the segmentation of the picture according to the region.
The OpenCV open source component is used for analyzing and processing the image data, so that functions of image recognition, region division and the like are realized.
The above-mentioned, after being split into individual unit area data, the unit type of the split unit area data is identified by image recognition, text extraction and recognition technology, so that the category thereof is determined, and may include, for example, but not limited to, a physical property category, a loan product category, a fund product category, an insurance product category, an account category and a transaction category.
It should be noted that OpenCV is a cross-platform computer vision library that provides rich image processing and computer vision related functions and tools. The method can be used for realizing the functions of image recognition, target detection, feature extraction, image filtering, morphological processing, edge detection, image segmentation and the like.
In the embodiment, the OpenCV component is adopted for picture identification and segmentation, so that the OpenCV has wide application fields, mature technology and algorithm are provided in the aspects of computer vision and image processing, and various functions of image processing can be realized rapidly; the OpenCV can be used for rapidly realizing the processing and analysis of the image, and the cross-platform characteristic of the OpenCV also meets the requirements of the Flink real-time calculation engine. Therefore, in this embodiment, openCV provides a relatively complete image processing and computer vision library, which can meet these needs, due to the need to identify and partition the image by region.
Further, referring to fig. 6, the step S220 of matching the image layout information and the unit area data based on the first material database to obtain a corresponding web page layout template and a component template includes:
step S221, calling the first material database by using a real-time calculation engine;
the above-described real-time computing engine is a distributed computing framework capable of processing real-time data streams that can efficiently and reliably process and analyze real-time data at the millisecond level. Real-time computing engines typically have the following features:
(1) Low delay: the real-time computing engine needs to process and analyze real-time data in milliseconds or less, and thus needs to have a low delay;
(2) Large scale: the real-time computing engine needs to support the processing and storage of mass data, so that good expansibility and reliability are required;
(3) Support a variety of data sources: real-time computing engines need to support access and processing of a variety of data sources, including structured data, semi-structured data, unstructured data, and the like.
The real-time computing engine employed in this embodiment may include, but is not limited to, the following:
(1) Apache Storm: apache Storm is an open source distributed real-time computing system which can process mass data flow at millisecond level and has high reliability and high expansibility; and a plurality of programming languages such as Java, scala, python are supported, so that the development and the use of users are facilitated.
(2) Apache Spark Streaming: apache Spark Streaming is a Spark-based real-time computing engine that can process and analyze data at the second level;
(3) Kafka Streams: kafka Streams is a lightweight real-time computation engine that can be integrated with Kafka message queues to implement real-time data stream processing and analysis.
In this embodiment, the real-time computing engine is Apache link.
Step S222, comparing the image layout information with the layout templates in the first material database;
step S223, judging whether the comparison coincidence rate of the layout template with the highest comparison coincidence rate reaches a first preset coincidence rate threshold value.
In step S224, if the comparison overlap ratio reaches the first preset overlap ratio threshold, the layout template with the highest comparison overlap ratio is used as the web page layout template.
Step S225, comparing each unit area data with the component image templates based on the unit type in the first material database;
and each component drawing item template is correspondingly provided with a unit type.
The unit types are physical property, loan, fund, insurance, account, and transaction.
Firstly, determining the type corresponding to the unit area data corresponding to each divided area, and determining the unit type corresponding to each unit area data to be one of a quality product type, a loan product type, a fund product type, an insurance product type, an account type and a transaction type through recognition modes such as image recognition, text extraction recognition and corpus recognition. When matching is performed, the component image templates under the corresponding types can be matched according to the unit types, so that the matching accuracy is further improved, the matching accuracy is improved, and the matching efficiency is improved.
Step S226, judging whether the comparison coincidence rate of the component image template with the highest comparison coincidence rate reaches a second preset coincidence rate threshold value;
and step S227, if the comparison coincidence rate reaches a second preset coincidence rate threshold value, determining a component image template with the highest comparison coincidence rate as the component template.
After the step S221, two sets of execution flows are included, namely (1) step S222, step S223, and step S224, as a first set of execution flows; (2) Step S225, step S226, and step S227 as a second group execution flow; the two groups of execution flows can be executed simultaneously or any one group of prior execution flows can be executed.
Further, the step S223 is further configured to determine whether the alignment coincidence rate of the layout template with the highest alignment coincidence rate reaches a first preset coincidence rate threshold value, and then further includes:
step S228, if the comparison coincidence rate does not reach the preset coincidence rate threshold, storing the image layout information corresponding to the comparison coincidence rate smaller than the first preset coincidence rate threshold, and generating corresponding first prompt information; returning to the step S221, and calling the first material database by using a real-time calculation engine;
step S226, after determining whether the comparison overlay ratio of the component image template with the highest comparison overlay ratio reaches the second preset overlay ratio threshold, further includes:
and step S229, if the comparison overlapping ratio does not reach the second preset overlapping ratio threshold, storing the unit area data corresponding to the comparison overlapping ratio smaller than the second preset overlapping ratio threshold, generating corresponding second prompt information, returning to the step S221, and calling the first material database by using a real-time calculation engine.
The first material database may be a Mysql database, where a layout template and a component template that are stored in advance are stored.
In the embodiment, the image data in the Kafka message queue system is consumed by using the link real-time calculation engine, and then the OpenCV open source component is called, so that the identification of the picture and the region-based segmentation of the picture are realized; further, the Flink real-time calculation engine calls a Mysql first material database, compares the obtained image layout information with a webpage layout picture template stored in the Mysql first material database, and selects a template with the highest comparison overlapping rate; and comparing the unit area data segmented by the areas with the component image templates in the Mysql first material database, and if the templates with the comparison overlapping rate reaching the first preset overlapping rate threshold exist, selecting the templates as layout templates.
The above-mentioned comparison weight refers to the degree of similarity between two images or templates, and is usually expressed in terms of percentage. The ratio versus the overlap ratio may be used to measure the degree of similarity between two images or templates, with a higher ratio versus the overlap ratio meaning a higher similarity between them.
To calculate the relative overlap ratio, image processing software is typically used for the calculation. For example, in the data processing process, the specific steps of acquiring the comparison weight ratio data may be as follows:
(1) Respectively loading the webpage image data and templates in a database and converting the webpage image data and the templates into the same format;
(2) Comparing similarity between images or templates using a specific algorithm (e.g., mean square error, structural similarity index, etc.);
(3) The relative weight ratio is calculated and presented as a percentage.
The similarity can be more accurately quantified by comparing the similarity between the layout of the webpage and the similarity between the components and templates in the database and the recognition and comparison efficiency can be improved.
The first preset coincidence rate threshold and the second preset coincidence rate threshold are preset and are used for evaluating whether the comparison coincidence rate is lower than a threshold of a certain degree, if the comparison coincidence rate is lower than the threshold, the first preset coincidence rate threshold and the second preset coincidence rate threshold can be preliminarily determined, the data volume in the first material data is insufficient, the current matching requirement cannot be met, and further expansion is needed.
The first preset coincidence rate threshold value and the second preset coincidence rate threshold value may be the same or different, and are set to different values respectively.
In this embodiment, the first preset coincidence rate threshold value=the second preset coincidence rate threshold value=90%. Therefore, if the highest comparison overlap ratio is lower than the first preset overlap ratio threshold (or the second preset overlap ratio threshold), that is, lower than 90%, the identification and matching are stopped, the relevant data storage is performed, and the developer is notified of enriching the resource library through the prompt information so as to perform more accurate matching again.
The execution flow of the bank APP front-end page generation method provided in this embodiment may refer to the flowchart in fig. 7.
Example 3:
referring to fig. 8, embodiment 3 of the present invention provides a method for generating a bank APP front end page, based on embodiment 1 above, the step S300 further includes, after the assembling the layout template and the component template to construct the bank front end page:
step S600, the constructed front-end page is stored into a second material database by using a real-time calculation engine;
the second material database is a database storing a front-end page constructed according to the image data of the target bank webpage, and is used for further obtaining by the user through the application end.
The second material database may be Redis data. Redis is a fast and efficient memory database, can provide fast read-write performance, and can ensure the durability of data. The use of Redis as a storage medium can enable the overall system to have better real-time performance and reliability. Furthermore, redis provides various data structures and APIs that can conveniently support various operations.
And the Flink real-time calculation engine returns the front-end page which is successfully drawn to the Redis two-material database for storage.
And step S700, returning the front-end page to the application end when the application end reads the data in the second material database through the corresponding interface.
The application end reads the data in the Redis second material database in real time by calling an HTTP interface (corresponding interface), and once the page is automatically generated successfully, the first time is returned to the user. The design can ensure that the user obtains the latest page information at the first time, and ensures the expandability and flexibility of the system while ensuring the real-time performance. Meanwhile, because Redis provides an efficient caching mechanism, the load pressure of the rear end can be effectively reduced, and the system performance and throughput are improved.
In addition, other databases of the same type, such as Memcached, etc., may be used herein in addition to the Redis second material database. These databases can provide efficient read-write performance and caching mechanisms, but there are also differences between them, and a suitable database needs to be selected according to the specific situation.
In addition, referring to fig. 9, this embodiment further provides a bank APP front end page generating device, including:
the acquisition module 10 is used for acquiring the image data of the target bank webpage and storing the image data into the message queue system;
the identifying module 20 is configured to identify the image data in the message queue system, and match, through a first material database, a web page layout template and a component template corresponding to the image data; the component templates comprise a financial product component template, a loan product component template, a fund product component template, an insurance product component template, an account component template and a transaction component template;
and the assembly module 30 is configured to construct a front-end page of the bank by assembling the layout template and the component template.
In addition, the embodiment also provides a system for generating the front-end page of the bank APP, which comprises a memory and a processor, wherein the memory stores a program for generating the front-end page of the bank APP, and the processor runs the program for generating the front-end page of the bank APP so that the system for generating the front-end page of the bank APP executes the method for generating the front-end page of the bank APP.
In addition, the embodiment also provides a computer readable storage medium, where a bank APP front end page generation program is stored, where the bank APP front end page generation program implements the bank APP front end page generation method described above when executed by a processor.
In a word, the invention realizes the development intellectualization and automation of the front end of H5 by utilizing the intelligent identification, intelligent calculation and intelligent assembly drawing of AI, can rapidly identify the layout and style of the web page in the image, automatically generates the front end code and completes the drawing function of the front end page. The invention greatly improves the development intellectualization of the front end of H5, improves the development efficiency of front end developers and reduces the cost of human resources.
The foregoing embodiment numbers of the present invention are merely for the purpose of description, and do not represent the advantages or disadvantages of the embodiments.
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 invention 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) as described above, comprising instructions for causing a terminal device (which may be a mobile phone, a computer, a server, or a network device, etc.) to perform the method according to the embodiments of the present invention. The foregoing description is only of the preferred embodiments of the present invention, and is not intended to limit the scope of the invention, but rather is intended to cover any equivalents of the structures or equivalent processes disclosed herein or in the alternative, which may be employed directly or indirectly in other related arts.
Claims (10)
1. The bank APP front-end page generation method is characterized by comprising the following steps:
acquiring image data of a target bank webpage and storing the image data into a message queue system;
identifying the image data in the message queue system, and matching the image data with a webpage layout template and a component template corresponding to the image data through a first material database; the component templates comprise a financial product component template, a loan product component template, a fund product component template, an insurance product component template, an account component template and a transaction component template;
and assembling the layout template and the component template to construct and obtain the front-end page of the bank.
2. The method for generating a front-end page of a bank APP as claimed in claim 1, wherein said acquiring image data of a target bank web page and storing said image data in a message queue system comprises:
receiving the image data of the target bank webpage through a server;
and acquiring the image data into the message queue system by using a data acquisition tool.
3. The method for generating a front-end page of a bank APP as claimed in claim 1, wherein said identifying said image data in said message queue system and matching to a web page layout template and a component template corresponding to said image data through a first material database comprises:
identifying the image data in the message queue system to obtain image layout information and a plurality of unit area data segmented according to the image data;
and matching the image layout information with the unit area data based on a first material database to obtain a corresponding webpage layout template and a corresponding component template.
4. A bank APP front end page generation method as claimed in claim 3 wherein said identifying said image data in said message queue system to obtain image layout information and dividing a plurality of cell area data according to said image data comprises:
identifying the image data by using an OpenCV component to obtain the image layout information of the overall layout of the image data; dividing the image data according to the regions, or obtaining unit region data corresponding to each region; determining a unit type corresponding to each unit area data; the unit types include a physical property class, a loan product class, a fund product class, an insurance product class, an account class, and a transaction class.
5. The method for generating a front-end page of a bank APP according to claim 4, wherein the matching the image layout information and the unit area data based on the first material database to obtain a corresponding web page layout template and component template includes:
invoking the first material database with a real-time computing engine;
comparing the image layout information with a layout template in the first material database;
judging whether the comparison coincidence rate of the layout template with the highest comparison coincidence rate reaches a first preset coincidence rate threshold value or not;
if the comparison coincidence rate reaches the first preset coincidence rate threshold value, the layout template with the highest comparison coincidence rate is used as the webpage layout template;
comparing each unit area data with a component image template based on the unit type in the first material database;
judging whether the comparison overlapping ratio of the component image template with the highest comparison overlapping ratio reaches a second preset overlapping ratio threshold value or not;
and if the comparison coincidence rate reaches a second preset coincidence rate threshold value, determining a component image template with the highest comparison coincidence rate as the component template.
6. The bank APP front-end page generation method of claim 5, wherein,
after judging whether the comparison coincidence rate of the layout template with the highest comparison coincidence rate reaches a first preset coincidence rate threshold value, the method further comprises:
if the comparison coincidence rate does not reach the preset coincidence rate threshold value, storing the image layout information corresponding to the comparison coincidence rate smaller than the first preset coincidence rate threshold value, and generating corresponding first prompt information; and returning the real-time calculation engine to call the first material database;
after judging whether the comparison coincidence rate of the component image template with the highest comparison coincidence rate reaches the second preset coincidence rate threshold value, the method further comprises:
if the comparison coincidence rate does not reach the second preset coincidence rate threshold value, the unit area data corresponding to the comparison coincidence rate smaller than the second preset coincidence rate threshold value are stored, corresponding second prompt information is generated, and the real-time calculation engine is returned to call the first material database.
7. The method for generating a bank APP front-end page according to claim 1, wherein after the bank APP front-end page is constructed by assembling the layout template and the component template, the method further comprises:
storing the constructed front-end page into a second material database by using a real-time calculation engine;
and when the application end reads the data in the second material database through the corresponding interface, returning the front-end page to the application end.
8. The utility model provides a bank APP front end page generation device which characterized in that includes:
the acquisition module is used for acquiring the image data of the target bank webpage and storing the image data into the message queue system;
the identification module is used for identifying the image data in the message queue system and matching the image data with a webpage layout template and a component template corresponding to the image data through a first material database; the component templates comprise a financial product component template, a loan product component template, a fund product component template, an insurance product component template, an account component template and a transaction component template;
and the assembly module is used for constructing and obtaining the front-end page of the bank by assembling the layout template and the assembly template.
9. A bank APP front-end page generation system, comprising a memory and a processor, wherein the memory stores a bank APP front-end page generation program, and the processor runs the bank APP front-end page generation program to cause the bank APP front-end page generation system to execute the bank APP front-end page generation method according to any one of claims 1 to 7.
10. A computer readable storage medium, wherein a bank APP front-end page generation program is stored on the computer readable storage medium, and when executed by a processor, the bank APP front-end page generation program implements the bank APP front-end page generation method according to any one of claims 1 to 7.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202310665257.8A CN116643748A (en) | 2023-06-06 | 2023-06-06 | Bank APP front-end page generation method, device and system and storage medium |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202310665257.8A CN116643748A (en) | 2023-06-06 | 2023-06-06 | Bank APP front-end page generation method, device and system and storage medium |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN116643748A true CN116643748A (en) | 2023-08-25 |
Family
ID=87622833
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202310665257.8A Pending CN116643748A (en) | 2023-06-06 | 2023-06-06 | Bank APP front-end page generation method, device and system and storage medium |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN116643748A (en) |
Cited By (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN117251661A (en) * | 2023-11-16 | 2023-12-19 | 建信金融科技有限责任公司 | Webpage file generation method, device, computer equipment and storage medium |
-
2023
- 2023-06-06 CN CN202310665257.8A patent/CN116643748A/en active Pending
Cited By (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN117251661A (en) * | 2023-11-16 | 2023-12-19 | 建信金融科技有限责任公司 | Webpage file generation method, device, computer equipment and storage medium |
| CN117251661B (en) * | 2023-11-16 | 2024-02-27 | 建信金融科技有限责任公司 | Webpage file generation method, device, computer equipment and storage medium |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| EP3570208A1 (en) | Two-dimensional document processing | |
| CN110008110B (en) | User interface testing method and device | |
| CN105550173A (en) | Text correction method and device | |
| CN109828906B (en) | UI (user interface) automatic testing method and device, electronic equipment and storage medium | |
| CN111699492B (en) | Processing approximations in a spreadsheet application locally | |
| CN116643748A (en) | Bank APP front-end page generation method, device and system and storage medium | |
| CN112835579A (en) | Method and device for determining interface code, electronic equipment and storage medium | |
| CN117931188A (en) | Front-end layout code automatic generation method and device, electronic equipment and medium | |
| CN113468066A (en) | User interface testing method and device | |
| CN110597812B (en) | Menu configuration method, device, terminal and readable storage medium | |
| CN114265777B (en) | Application program testing method and device, electronic equipment and storage medium | |
| CN103218358A (en) | Diff scoring method and system | |
| CN113642642B (en) | Control identification method and device | |
| US20150186363A1 (en) | Search-Powered Language Usage Checks | |
| CN114328678A (en) | Method and device for displaying option information in service, electronic equipment and storage medium | |
| CN113515280A (en) | Page code generation method and device | |
| Heil et al. | Assessing completeness in training data for image-based analysis of web user interfaces | |
| CN111338941B (en) | Information processing method and device, electronic equipment and storage medium | |
| US20240126978A1 (en) | Determining attributes for elements of displayable content and adding them to an accessibility tree | |
| CN113190779B (en) | Webpage evaluation method and device | |
| CN112860259B (en) | Interface processing method, device, electronic equipment and storage medium | |
| CN109240735B (en) | Requirement rollback scheme filling method and device, terminal and readable storage medium | |
| CN115098090A (en) | Form generation method and device | |
| CN110209977B (en) | Method and device for generating webpage | |
| CN115934079A (en) | Interface element capturing method, electronic device and storage medium |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination |