Form page generation method and device based on AI vision and electronic equipment

Abstract

This application provides a form page generation method, apparatus, and electronic device based on AI vision, relating to the field of data processing. The method responds to an input operation on a form design template, determining the corresponding target form visual template based on the input operation; inputting the structured style data corresponding to the target form visual template into a web generation channel and a print document generation channel; generating HTML5 tags and CSS3 style sheets based on the structured style data through the web generation channel, and obtaining a web page based on the HTML5 tags and CSS3 style sheets; generating a print document for printing based on the structured style data through the print document generation channel; comparing the visual differences between the web page and the print document using AI vision, and iteratively correcting based on the visual difference comparison results, to obtain the final web page and the final print document corresponding to the target form visual template.

Description

Technical Field

[0001] This application relates to the field of data processing technology, and in particular to a method, apparatus and electronic device for generating form pages based on AI vision. Background Technology

[0002] Currently, forms are the core carrier of data collection and interaction in e-government, enterprise resource planning, and various information management systems. A complete business process typically requires the same form to have two presentation formats: one is a web page format for online filling, data verification, and process-driven operations; the other is a printed document format (such as Word or PDF) for offline signing, physical archiving, or print distribution. In current technical practices, the generation of these two formats usually relies on separate manual development. For web development, front-end engineers manually write HTML, CSS, and JavaScript code based on the UI design to build a responsive page; for print template development, office automation engineers or clerks use tools such as Microsoft Word and WPS to manually adjust the page layout, fonts, paragraphs, and table styles based on the same design to generate the print template. However, web rendering engines (such as browsers) and print rendering engines (such as Microsoft Word's layout engine and PDF generation libraries) have fundamental differences in page models, font metrics, and layout algorithms, making it difficult to guarantee style consistency. The final output web page and printed document have low style consistency. Summary of the Invention

[0003] The purpose of this application is to provide a form page generation method, device, and electronic device based on AI vision to solve the technical problem of low consistency between the style of the final output web page and the printed document.

[0004] In a first aspect, this application provides a form page generation method based on AI vision, the method comprising: In response to an input operation targeting a form design template, a target form visual template corresponding to the input is determined based on the input operation; The structured style data corresponding to the visual sample of the target form is input into the World Wide Web (Web) generation channel and the print document generation channel, respectively. Based on the structured style data, Hyper Text Markup Language 5 (HTML5) markup and Cascading Style Sheets Level 3 (CSS3) style sheets are generated through the Web generation channel, and a Web page is obtained based on the HTML5 markup and the CSS3 style sheets. A print document for printing is generated through the print document generation channel based on the structured style data; Based on the web page and the printed document, visual differences are compared using artificial intelligence (AI) vision, and iterative corrections are made based on the comparison results to ensure that the corrected web page and printed document visually match the target form. Figure 1 This process yields the final web page and the final printable document corresponding to the visual template of the target form.

[0005] In one possible implementation, the step of generating HTML5 markup and CSS3 stylesheets based on the structured style data through the Web generation channel, and obtaining a Web page based on the HTML5 markup and the CSS3 stylesheets, includes: The Web generation channel drives the code to generate a large language model, uses the structured style data as prompt words, and generates HTML5 tags and CSS3 style sheets that conform to preset standards based on the prompt words and the large language model. The HTML code corresponding to the HTML5 tags and the CSS code corresponding to the CSS3 stylesheet are loaded and rendered in a headless browser environment to obtain a rendered page. Take a full-screen screenshot of the rendered page to obtain a Web_Snapshot.

[0006] In one possible implementation, generating a print document for printing based on the structured style data through the print document generation channel includes: The document processing engine is invoked through the print document generation channel, and a document object is created programmatically based on the structured style data. The page attributes of the document object are set, and elements with the target style corresponding to the structured style data are added to obtain a print document for printing. The elements include at least one of paragraphs, tables, and images. The printed document is rendered into a fixed-format document using a native engine or a high-fidelity converter, and a screenshot of the page of the fixed-format document is taken to obtain a Print_Snapshot.

[0007] In one possible implementation, inputting the structured style data corresponding to the target form visual template into the Web generation channel and the print document generation channel respectively includes: An integrated computer vision parsing module is used to perform image parsing on the target form visual sample image through a pre-trained deep learning model and Optical Character Recognition (OCR) recognition, obtaining image parsing results. Based on the image parsing results, all visual and logical elements in the target form visual sample image are extracted in a structured manner to obtain the structured style data corresponding to the target form visual sample image. The pre-trained deep learning model includes a document layout analysis model based on a region-based Convolutional Neural Network (Mask R-CNN). The visual and logical elements include global attributes and element-level attributes. The structured style data is input into the Web generation channel and the print document generation channel, respectively.

[0008] In one possible implementation, the visual difference comparison based on the web page and the printed document using AI vision includes: Using the target form visual sample image as Target_Image, the first pixel-level structural similarity value between Web_Snapshot and Target_Image, and the second pixel-level structural similarity value between Print_Snapshot and Target_Image are calculated using Siamese neural network and feature point-based image matching algorithm, respectively. In response to the first pixel-level structural similarity value or the second pixel-level structural similarity value being lower than a preset similarity threshold, the region of visual difference is analyzed by an AI agent to obtain a heatmap for locating the visual difference. Based on the image parsing results and the visual difference, the visual difference is determined to be caused by the target style attribute, resulting in a visual difference diagnosis result that includes location and attribution.

[0009] In one possible implementation, the iterative correction based on the visual difference comparison results is performed to ensure that the corrected web page and printed document are visually identical to the target form. Figure 1 Thus, the final web page and final print document corresponding to the visual template of the target form are obtained, including: Based on the visual difference diagnosis results, adjust the corresponding attribute values ​​in the HTML / CSS abstract syntax tree of the Web generation channel to generate a corrected Web code version; Based on the visual difference diagnosis results, the style definition or element attributes of the printed document are adjusted by means of application programming interface (API) calls or template variable substitution to obtain the corrected printed document; Based on the corrected Web code version, the steps of loading and rendering the HTML code corresponding to the HTML5 tags and the CSS code corresponding to the CSS3 stylesheet in the headless browser environment are re-executed, as well as the steps of rendering the printed document into a fixed-format document using a native engine or a high-fidelity converter and taking screenshots of the fixed-format document are re-executed, until the first pixel-level structural similarity value and the second pixel-level structure both meet the preset termination condition, at which point the loop rendering comparison and iterative correction process is terminated, so that the final generated Web page and printed document are visually identical to the target form. Figure 1 This process yields the final web page source code file corresponding to the target form visual template and the final print document file directly for printing.

[0010] In one possible implementation, the preset termination condition includes: Both the first pixel-level structural similarity value and the second pixel-level structural similarity value are higher than the preset similarity threshold; and, The difference between the first pixel-level structural similarity value and the second pixel-level structural similarity value is less than a preset minimum difference threshold, so that the two forms corresponding to the web page and the printed document are consistent.

[0011] Secondly, this application provides a form generation device based on AI vision, comprising: The determination module is used to respond to an input operation for a form design template and determine the target form visual template corresponding to the input based on the input operation; The input module is used to input the structured style data corresponding to the target form visual template into the Web generation channel and the print document generation channel, respectively. The first generation module is used to generate HTML5 tags and CSS3 style sheets based on the structured style data through the Web generation channel, and to obtain a Web page based on the HTML5 tags and the CSS3 style sheets; The second generation module is used to generate a print document for printing based on the structured style data through the print document generation channel; The correction module is used to perform visual difference comparison between the web page and the printed document using AI vision, and to iteratively correct the visual differences based on the comparison results, so that the corrected web page and printed document are visually identical to the target form. Figure 1 This process yields the final web page and the final printable document corresponding to the visual template of the target form.

[0012] Thirdly, this application also provides an electronic device, including a memory and a processor, wherein the memory stores a computer program that can run on the processor, and the processor executes the computer program to implement the method described in the first aspect above.

[0013] Fourthly, this application also provides a computer-readable storage medium storing computer-executable instructions that, when invoked and executed by a processor, cause the processor to perform the method described in the first aspect above.

[0014] This application brings the following beneficial effects: This application provides a form page generation method, apparatus, and electronic device based on AI vision. It is capable of responding to an input operation on a form design template, determining the corresponding target form visual template based on the input operation, inputting the structured style data corresponding to the target form visual template into a web generation channel and a print document generation channel, respectively; generating HTML5 tags and CSS3 style sheets based on the structured style data through the web generation channel, and obtaining a web page based on the HTML5 tags and CSS3 style sheets; generating a print document for printing based on the structured style data through the print document generation channel; comparing the visual differences between the web page and the print document using AI vision, and iteratively correcting based on the visual difference comparison results, so that the corrected web page and print document are visually identical to the target form visual template. Figure 1This results in the final web page and final printed document corresponding to the visual sample of the target form. In this solution, an automated closed-loop system is established, using the visual sample as the benchmark, AI visual comparison as the judge, and two-way intelligent correction as the means. Specifically, by inputting the form design sample, the system automatically generates the corresponding web page code and printed document. Through an AI-driven visual comparison and iterative correction mechanism, it ensures that the generated web page and printed document are visually highly consistent with the input sample, thus solving the historical problem of inconsistent cross-platform rendering. Furthermore, the system possesses self-diagnosis and correction capabilities, enabling subtle style adjustments without manual intervention and achieving intelligent correction. Therefore, starting from a single source of the design sample, it can automatically generate and ensure a high degree of visual consistency between the two output forms, solving the technical problem of low style consistency between the final output web page and printed document. This achieves fully automated, high-quality output from a single design source to high-fidelity finished products on both ends.

[0015] To make the above-mentioned objectives, features and advantages of this application more apparent and understandable, preferred embodiments are described below in detail with reference to the accompanying drawings. Attached Figure Description

[0016] To more clearly illustrate the technical solutions in the specific embodiments of this application or the prior art, the drawings used in the description of the specific embodiments or the prior art will be briefly introduced below. Obviously, the drawings described below are some embodiments of this application. For those skilled in the art, other drawings can be obtained from these drawings without creative effort.

[0017] Figure 1 A flowchart illustrating the AI ​​vision-based form page generation method provided in this application embodiment; Figure 2 Another flowchart illustrating the AI ​​vision-based form page generation method provided in this application embodiment; Figure 3 A schematic diagram of the structure of a form page generation device based on AI vision provided in an embodiment of this application; Figure 4 A schematic diagram of the structure of an electronic device provided in an embodiment of this application is shown. Detailed Implementation

[0018] To make the objectives, technical solutions, and advantages of the embodiments of this application clearer, the technical solutions of this application will be clearly and completely described below with reference to the accompanying drawings. Obviously, the described embodiments are only some embodiments of this application, not all embodiments. Based on the embodiments of this application, all other embodiments obtained by those skilled in the art without creative effort are within the scope of protection of this application.

[0019] The terms "comprising" and "having," and any variations thereof, used in the embodiments of this application, are intended to cover non-exclusive inclusion. For example, a process, method, system, product, or device that includes a series of steps or units is not limited to the steps or units listed, but may optionally include other steps or units not listed, or may optionally include other steps or units inherent to these processes, methods, products, or devices.

[0020] Currently, existing technologies mainly suffer from the following drawbacks: (1) Low development efficiency: The same form requires two independent development processes, resulting in repetitive work and high manpower and time costs.

[0021] (2) Style consistency is difficult to guarantee: Web rendering engines (such as browsers) and print rendering engines (such as Microsoft Word's typesetting engine and PDF generation library) have fundamental differences in page models, font measurements, and layout algorithms, causing the "what you see is what you get" principle to fail. Even if the source design is the same, the final output web page and the printed document often show discrepancies that are visible to the naked eye in details such as font size, line height, margins, alignment, and page break position.

[0022] (3) Lack of automated proofreading mechanism: Currently, there is a lack of efficient and accurate tools to automatically verify and correct style differences between the two forms. Usually, it relies on developers to manually compare and repeatedly debug, which is cumbersome, error-prone, and difficult to control the quality.

[0023] Based on this, embodiments of this application provide a form page generation method, apparatus, and electronic device based on AI vision. This method can solve technical problems such as low consistency between the style of the final output web page and the printed document.

[0024] The embodiments of this application will be further described below with reference to the accompanying drawings.

[0025] Figure 1 This is a flowchart illustrating a form page generation method based on AI vision, provided as an embodiment of this application. Figure 1 As shown, the method includes: Step S10: In response to the input operation for the form design template, determine the target form visual template corresponding to the input based on the input operation.

[0026] In one possible implementation, such as Figure 2 As shown, after receiving the target form visual template provided by the user, the target template input and parsing are performed in step S100.

[0027] Step S20: Input the structured style data corresponding to the visual sample of the target form into the Web generation channel and the print document generation channel respectively.

[0028] As an optional implementation, the above-mentioned input of the structured style data corresponding to the target form visual template into the Web generation channel and the print document generation channel respectively may specifically include the following steps: An integrated computer vision analysis module is used to analyze the target form visual sample image through a pre-trained deep learning model and OCR recognition. The image analysis results are obtained, and all visual and logical elements in the target form visual sample image are extracted in a structured manner based on the image analysis results to obtain the structured style data corresponding to the target form visual sample image. The pre-trained deep learning model includes a document layout analysis model based on Mask R-CNN. The visual and logical elements include global attributes and element-level attributes. The structured style data is then input into the Web generation channel and the print document generation channel, respectively.

[0029] An integrated computer vision analysis module performs deep analysis on the sample image. This module utilizes pre-trained deep learning models (such as a document layout analysis model based on Mask R-CNN) and OCR technology to identify and structurally extract all visual and logical elements from the sample image. For example, the extracted information includes, but is not limited to: global attributes: page size (e.g., A4), orientation, margins, and background color; element-level attributes: content, font family, font size, color, weight, alignment, and line height of each text block; structure of each table (number of rows, number of columns, merged cells), border style, and fill color; image position and size; and line coordinates, thickness, and type.

[0030] like Figure 2 As shown, in step S200, dual-channel parallel initialization generation is performed. The structured style description extracted in step S100 is simultaneously input into two independent generation channels.

[0031] Step S30: Generate HTML5 tags and CSS3 style sheets through the Web generation channel based on the structured style data, and obtain the Web page based on the HTML5 tags and CSS3 style sheets.

[0032] As an example, the above-mentioned generation of HTML5 markup and CSS3 stylesheets based on structured style data through a web generation channel, and the creation of a web page based on the HTML5 markup and CSS3 stylesheets, can specifically include the following steps: The code is generated through a web-based generation channel to create a large language model. Structured style data is used as prompt words, and based on the prompt words, the large language model is used to generate HTML5 tags and CSS3 style sheets that conform to preset standards. Load and render the HTML code corresponding to the HTML5 tags and the CSS code corresponding to the CSS3 stylesheets in a headless browser environment to obtain the rendered page; take a full-screen screenshot of the rendered page to obtain a Web_Snapshot.

[0033] like Figure 2 As shown, in step S300, bidirectional rendering and visual snapshot capture are performed. Web generation channel: Drives a large language model for code generation, using style descriptions as prompts to generate standards-compliant HTML5 markup and CSS3 stylesheets. The generated code must consider modern browser compatibility. Web rendering side: In a headless browser environment, the HTML / CSS code generated in the previous step is loaded and rendered. A full-screen screenshot of the rendered page is then taken to obtain a Web_Snapshot.

[0034] Step S40: Generate a print document for printing based on the structured style data through the print document generation channel.

[0035] In one optional implementation, the above-mentioned generation of a print document for printing based on structured style data through a print document generation channel may specifically include the following steps: The document processing engine is invoked through the print document generation channel. Based on the structured style data, a document object is created programmatically, and the page properties of the document object are set. Elements with the target style corresponding to the structured style data are added to obtain a print document for printing. The elements include at least one of paragraphs, tables, and images. The print document is rendered into a fixed-format document through the native engine or a high-fidelity converter, and a screenshot of the fixed-format document is taken to obtain a Print Snapshot.

[0036] like Figure 2As shown, in step S300, bidirectional rendering and visual snapshot capture occur. The print document generation channel calls a document processing engine (such as Apache POI for Word, iText for PDF, or a LaTeX engine) to programmatically create a document object based on the style description, set page properties, and add elements such as paragraphs, tables, and images with corresponding styles. The print rendering side renders the generated print document (such as .docx) into a fixed format (such as PDF) using its native engine (such as Microsoft Word) or a high-fidelity converter, and takes a screenshot of the first page (or multiple pages) of the PDF to obtain a Print_Snapshot.

[0037] Step S50: Based on the web page and the printed document, perform a visual difference comparison using AI vision, and iteratively correct the results to ensure that the corrected web page and printed document visually match the target form. Figure 1 This process yields the final web page and final print document that correspond to the visual template of the target form.

[0038] As one possible implementation, the above-mentioned comparison of visual differences between web pages and printed documents using AI vision may specifically include the following steps: Using the visual sample image of the target form as Target_Image, the first pixel-level structural similarity value between Web_Snapshot and Target_Image, and the second pixel-level structural similarity value between Print_Snapshot and Target_Image are calculated using a Siamese neural network and a feature-point-based image matching algorithm, respectively. In response to the first pixel-level structural similarity value or the second pixel-level structural similarity value being lower than a preset similarity threshold, the AI ​​agent analyzes the region of visual difference to obtain a heat map for locating the visual difference. Based on the image analysis results and the visual difference, the visual difference is attributed to the target style attribute, resulting in a visual difference diagnosis result that includes location and attribution.

[0039] like Figure 2 As shown, in step S400, intelligent correction is achieved through AI visual difference comparison and evaluation (core correction loop). For example, the system has a built-in bidirectional AI verification and correction agent. This agent simultaneously receives three inputs: the original Target_Image, Web_Snapshot, and Print_Snapshot. Its workflow is as follows: 1. Difference detection: Using Siamese neural network or feature point-based image matching algorithm, calculate pixel-level / structural similarity scores (first pixel-level structural similarity value Sw and second pixel-level structural similarity value Sp) for (Web_Snapshot, Target_Image) and (Print_Snapshot, Target_Image).

[0040] 2. Difference Localization and Attribution: If Sw or Sp is below a preset similarity threshold (e.g., 99.5%), the AI ​​agent will further analyze the difference areas. It not only outputs a heatmap of the differences, but more importantly, it can combine the analysis results from step S100 to attribute visual differences to specific style attributes. For example, it outputs a diagnostic report: "In the web snapshot, the top margin of the title bar is about 2 pixels longer than the sample image, suggesting the margin-top attribute value is too large"; "In the print snapshot, the width of the third column of the table is 5% narrower than the sample image, suggesting insufficient column width settings."

[0041] Closed-loop correction is achieved through AI visual comparison combined with precise attribution correction. For AI visual comparison and evaluation, the system renders the generated web pages and printed documents as images and performs pixel-level / structural similarity AI comparison with the original target sample image. This directly verifies the final result of "whether they look consistent," bypassing complex and unreliable code or style mapping logic.

[0042] Regarding discrepancy identification and intelligent attribution, when AI detects inconsistencies, the key is not merely to say "different," but to translate visual differences into actionable correction instructions. For example: Visual phenomenon: The title in the web screenshot is 5 pixels lower than the sample image; Intelligent attribution: It might be that the CSS margin-top or padding-top values ​​are too small; Correction instruction: Increase the margin-top value of the corresponding element by 5 pixels. This attribution capability, "from pixel difference to attribute adjustment," is crucial for the entire system to automatically correct issues rather than merely remaining at the "quality inspection" level.

[0043] In some embodiments, the above iterative correction based on visual difference comparison results is performed to ensure that the corrected web page and printed document are visually identical to the target form. Figure 1 To obtain the final web page and final print document corresponding to the target form visual template, the specific steps may include the following: Based on the visual difference diagnosis results, adjust the corresponding attribute values ​​in the HTML / CSS abstract syntax tree of the Web generation channel to generate a corrected Web code version; based on the visual difference diagnosis results, adjust the style definition or element attributes of the print document through API calls or template variable replacement to obtain a corrected print document; Based on the corrected web code version, the steps of loading and rendering the HTML code corresponding to HTML5 tags and the CSS code corresponding to CSS3 stylesheets in the headless browser environment are re-executed. Similarly, based on the corrected printed document, the steps of rendering the printed document into a fixed-format document using a native engine or high-fidelity converter and taking screenshots of the fixed-format document are re-executed. This process continues until both the first pixel-level structural similarity value and the second pixel-level structure meet the preset termination conditions, at which point the loop rendering comparison and iterative correction process terminates. This ensures that the final generated web page and printed document visually resemble the target form. Figure 1 This process yields the final web page source code file corresponding to the target form's visual template and the final print document file directly for printing.

[0044] like Figure 2 As shown, in step S500, closed-loop iterative correction is performed. For example, based on the diagnostic report (visual difference diagnostic results) generated in step S400, which includes specific attributions, the system initiates the following correction process: Web channel correction: Based on the diagnostic report, automatically adjust the corresponding property values ​​in the HTML / CSS abstract syntax tree (such as modifying margin, padding, width, font-size, etc. in CSS), and generate a corrected code version. Print channel correction: Based on the diagnostic report, adjust the style definitions or element properties of the print document through API calls or template variable replacement. After correction, as shown... Figure 2 As shown, the system jumps back to step S300, re-renders and takes screenshots using the corrected code and documentation, and compares them again (step S400).

[0045] In existing technologies, the rendering logic of web browsers (CSS box model, Flexbox / Grid) and print document engines (Word / PDF layout model, physical units) differs fundamentally, resulting in inherent visual discrepancies between the "same design" on the two platforms. This application's solution does not attempt to unify the underlying rendering logic (which is impossible), but instead forces alignment at the output layer. Through bidirectional closed-loop correction, it allows both systems to "strive" to visually approach the same standard, thus achieving "consistent results" regardless of the differences in the "process," thereby achieving cross-platform rendering consistency.

[0046] In the traditional process: designers produce drawings, front-end engineers develop web pages, document engineers adjust printing templates, and then manual visual comparison, testing, modification, and retesting... This is a sequential, manual, and high-cost process.

[0047] In this solution, the process involves inputting sample images, automatically generating and iteratively correcting them in parallel, and finally outputting consistent web and printed artifacts. This is an automated, closed-loop, and low-cost process. Replacing "manual debugging" with "AI iteration" is the essence of the efficiency improvement. Workflow restructuring achieves a shift from sequential development to automated iteration.

[0048] In some embodiments, the aforementioned preset termination conditions include: both the first pixel-level structural similarity value and the second pixel-level structure are higher than a preset similarity threshold; and the difference between the first pixel-level structural similarity value and the second pixel-level structure is less than a preset minimum difference threshold, so that the two forms corresponding to the web page and the printed document are consistent.

[0049] like Figure 2 As shown, in step S600, the result is output and the process terminates. The loop from S300 to S400 and then to S500 constitutes a closed-loop feedback system. The iteration will continue until the following two conditions are met simultaneously: the first pixel-level structural similarity value Sw and the second pixel-level structural similarity value Sp both reach or exceed a preset similarity threshold; the difference between Sw and Sp is less than a very small threshold (such as 0.1%), ensuring that the two forms are also consistent.

[0050] The loop terminates when the termination condition is met or the preset maximum number of safe iterations (e.g., 10) is reached. The system outputs the final version: a high-fidelity web page source code file and a document file that can be directly used for printing.

[0051] In this embodiment, a single image is used for two-generation and closed-loop correction. The single image refers to using a single visual sample image as the unique, objective, and immutable "Gold Standard" (Ground Truth), thus abandoning the traditional, error-prone multi-source manual design. The two-generation system is equipped with two independent generation engines, one for web and one for print, working in parallel but not independently; both are guided by the single image. The closed-loop system goes beyond one-time generation, establishing an automated feedback loop from generation to rendering to visual comparison to difference attribution and precise correction. This loop can run repeatedly until the result meets the standard.

[0052] By establishing an automated closed-loop system based on visual samples, judged by AI visual comparison, and using two-way intelligent correction, the system automatically generates corresponding web page code and print documents from the input form. Through an AI-driven visual comparison and iterative correction mechanism, it ensures that the generated web page and print document are visually highly consistent with the input sample, thus solving the historical problem of inconsistent cross-platform rendering. Furthermore, the system has self-diagnostic and correction capabilities, enabling subtle style optimization without manual intervention and achieving intelligent correction. Therefore, starting from a single source of design samples, it can automatically generate and ensure that the two output forms are visually highly consistent, solving the style inconsistency problem between web pages and print documents caused by differences in rendering engines. This achieves fully automated, high-quality output from a single design source to high-fidelity finished products on both platforms.

[0053] In this embodiment, a bidirectional closed-loop AI correction loop is introduced through parallel generation, bidirectional rendering, visual comparison, and closed-loop correction, realizing a bidirectional AI correction form automatic generation method based on printed documents and web pages. It utilizes computer vision, large language models, and a bidirectional closed-loop feedback mechanism to synchronously and automatically generate consistent web electronic forms and printed documents from a single visual design template. Figure 3 A schematic diagram of a form page generation device based on AI vision is provided. (For example...) Figure 3 As shown, the AI ​​vision-based form page generation device 300 includes: The determination module 301 is used to respond to an input operation for a form design template and determine the target form visual template corresponding to the input based on the input operation; Input module 302 is used to input the structured style data corresponding to the target form visual sample into the Web generation channel and the print document generation channel, respectively; The first generation module 303 is used to generate HTML5 tags and CSS3 style sheets based on the structured style data through the Web generation channel, and to obtain a Web page based on the HTML5 tags and the CSS3 style sheets; The second generation module 304 is used to generate a print document for printing based on the structured style data through the print document generation channel; The correction module 305 is used to perform visual difference comparison between the web page and the printed document using AI vision, and to perform iterative correction based on the visual difference comparison results, so that the corrected web page and printed document are visually identical to the target form. Figure 1 This process yields the final web page and the final printable document corresponding to the visual template of the target form.

[0054] The AI ​​vision-based form page generation device provided in this application embodiment has the same technical features as the AI ​​vision-based form page generation method provided in the above embodiment, so it can also solve the same technical problems and achieve the same technical effects.

[0055] An electronic device provided in this application embodiment, such as Figure 4 As shown, the electronic device 400 includes a processor 402 and a memory 401. The memory stores a computer program that can run on the processor. When the processor executes the computer program, it implements the steps of the method provided in the above embodiments.

[0056] See Figure 4 The electronic device also includes a bus 403 and a communication interface 404. The processor 402, the communication interface 404 and the memory 401 are connected through the bus 403. The processor 402 is used to execute executable modules, such as computer programs, stored in the memory 401.

[0057] The memory 401 may include high-speed random access memory (RAM) or non-volatile memory, such as at least one disk storage device. Communication between this system network element and at least one other network element is achieved through at least one communication interface 404 (which can be wired or wireless), such as the Internet, wide area network, local area network, or metropolitan area network.

[0058] Bus 403 can be an ISA bus, PCI bus, or EISA bus, etc. The bus can be divided into address bus, data bus, control bus, etc. For ease of representation, Figure 4 The symbol is represented by a single double-headed arrow, but this does not mean that there is only one bus or one type of bus.

[0059] The memory 401 is used to store programs. After receiving an execution instruction, the processor 402 executes the program. The method executed by the apparatus defined by the process disclosed in any of the preceding embodiments of this application can be applied to the processor 402 or implemented by the processor 402.

[0060] Processor 402 may be an integrated circuit chip with signal processing capabilities. In implementation, each step of the above method can be completed by the integrated logic circuitry in the hardware of processor 402 or by instructions in software form. The processor 402 can be a general-purpose processor, including a Central Processing Unit (CPU), a Network Processor (NP), etc.; it can also be a Digital Signal Processor (DSP), an Application Specific Integrated Circuit (ASIC), a Field-Programmable Gate Array (FPGA), or other programmable logic devices, discrete gate or transistor logic devices, or discrete hardware components. It can implement or execute the methods, steps, and logic block diagrams disclosed in the embodiments of this application. The general-purpose processor can be a microprocessor or any conventional processor. The steps of the methods disclosed in the embodiments of this application can be directly manifested as execution by a hardware decoding processor, or execution by a combination of hardware and software modules in the decoding processor. The software module can reside in a mature storage medium in the field, such as random access memory, flash memory, read-only memory, programmable read-only memory, electrically erasable programmable memory, or registers. This storage medium is located in memory 401, and processor 402 reads the information from memory 401 and, in conjunction with its hardware, completes the steps of the above method.

[0061] Corresponding to the above-described AI vision-based form page generation method, this application embodiment also provides a computer-readable storage medium storing computer-executable instructions. When the computer-executable instructions are invoked and executed by a processor, the computer-executable instructions cause the processor to perform the steps of the above-described AI vision-based form page generation method.

[0062] The AI ​​vision-based form page generation device provided in this application embodiment can be specific hardware on a device or software or firmware installed on the device. The implementation principle and technical effects of the device provided in this application embodiment are the same as those in the foregoing method embodiments. For the sake of brevity, any parts not mentioned in the device embodiment can be referred to the corresponding content in the foregoing method embodiments. Those skilled in the art will clearly understand that, for the sake of convenience and brevity, the specific working processes of the systems, devices, and units described above can all be referred to the corresponding processes in the above method embodiments, and will not be repeated here.

[0063] In the embodiments provided in this application, it should be understood that the disclosed apparatus and methods can be implemented in other ways. The apparatus embodiments described above are merely illustrative. For example, the division of units is only a logical functional division, and in actual implementation, there may be other division methods. Furthermore, multiple units or components may be combined or integrated into another system, or some features may be ignored or not executed. Additionally, the displayed or discussed mutual couplings, direct couplings, or communication connections may be through some communication interfaces; indirect couplings or communication connections between devices or units may be electrical, mechanical, or other forms.

[0064] For example, the flowcharts and block diagrams in the accompanying drawings illustrate the architecture, functionality, and operation of possible implementations of apparatus, methods, and computer program products according to various embodiments of this application. In this regard, each block in a flowchart or block diagram may represent a module, segment, or portion of code containing one or more executable instructions for implementing a specified logical function. It should also be noted that in some alternative implementations, the functions marked in the blocks may occur in a different order than those marked in the drawings. For example, two consecutive blocks may actually be executed substantially in parallel, and they may sometimes be executed in reverse order, depending on the functions involved. It should also be noted that each block in a block diagram and / or flowchart, and combinations of blocks in block diagrams and / or flowcharts, can be implemented using a dedicated hardware-based system that performs the specified function or action, or using a combination of dedicated hardware and computer instructions.

[0065] The units described as separate components may or may not be physically separate. The components shown as units may or may not be physical units; that is, they may be located in one place or distributed across multiple network units. Some or all of the units can be selected to achieve the purpose of this embodiment according to actual needs.

[0066] In addition, the functional units in the embodiments provided in this application can be integrated into one processing unit, or each unit can exist physically separately, or two or more units can be integrated into one unit.

[0067] If the aforementioned functions are implemented as software functional units and sold or used as independent products, they can be stored in a computer-readable storage medium. Based on this understanding, the technical solution of this application, in essence, or the part that contributes to the prior art, or a portion of the technical solution, can be embodied in the form of a software product. This computer software product is stored in a storage medium and includes several instructions to cause a computer device (which may be a personal computer, server, or network device, etc.) to execute all or part of the steps of the AI ​​vision-based form page generation method described in the various embodiments of this application. The aforementioned storage medium includes various media capable of storing program code, such as USB flash drives, portable hard drives, read-only memory (ROM), random access memory (RAM), magnetic disks, or optical disks.

[0068] It should be noted that similar labels and letters in the following figures indicate similar items. Therefore, once an item is defined in one figure, it does not need to be further defined and explained in subsequent figures. In addition, the terms "first", "second", "third", etc. are used only to distinguish descriptions and should not be construed as indicating or implying relative importance.

[0069] Finally, it should be noted that the above-described embodiments are merely specific implementations of this application, used to illustrate the technical solutions of this application, and not to limit them. The protection scope of this application is not limited thereto. Although this application has been described in detail with reference to the foregoing embodiments, those skilled in the art should understand that any person skilled in the art can still modify or easily conceive of changes to the technical solutions described in the foregoing embodiments, or make equivalent substitutions for some of the technical features, within the scope of the technology disclosed in this application; and these modifications, changes, or substitutions do not cause the essence of the corresponding technical solutions to deviate from the scope of the technical solutions of the embodiments of this application. All should be covered within the protection scope of this application. Therefore, the protection scope of this application should be determined by the protection scope of the claims.

Claims

1. A form page generation method based on AI vision, characterized in that, The method includes: In response to an input operation targeting a form design template, a target form visual template corresponding to the input is determined based on the input operation; The structured style data corresponding to the target form visual template is input into the Web generation channel and the print document generation channel, respectively. Based on the structured style data, HTML5 tags and CSS3 style sheets are generated through the Web generation channel, and a Web page is obtained based on the HTML5 tags and the CSS3 style sheets; A print document for printing is generated through the print document generation channel based on the structured style data; Based on the web page and the printed document, visual differences are compared using AI vision, and iterative corrections are made based on the visual difference comparison results, so that the corrected web page and printed document are visually consistent with the target form visual sample, resulting in the final web page and final printed document corresponding to the target form visual sample.

2. The method according to claim 1, characterized in that, The process of generating HTML5 tags and CSS3 stylesheets based on the structured style data through the Web generation channel, and obtaining a Web page based on the HTML5 tags and the CSS3 stylesheets, includes: The Web generation channel drives the code to generate a large language model, uses the structured style data as prompt words, and generates HTML5 tags and CSS3 style sheets that conform to preset standards based on the prompt words and the large language model. The HTML code corresponding to the HTML5 tags and the CSS code corresponding to the CSS3 stylesheet are loaded and rendered in a headless browser environment to obtain a rendered page. Take a full-screen screenshot of the rendered page to obtain a Web_Snapshot.

3. The method according to claim 2, characterized in that, The process of generating a print document for printing based on the structured style data through the print document generation channel includes: The document processing engine is invoked through the print document generation channel, and a document object is created programmatically based on the structured style data. The page attributes of the document object are set, and elements with the target style corresponding to the structured style data are added to obtain a print document for printing. The elements include at least one of paragraphs, tables, and images. The printed document is rendered into a fixed-format document using a native engine or a high-fidelity converter, and a screenshot of the page of the fixed-format document is taken to obtain a Print_Snapshot.

4. The method according to claim 3, characterized in that, The step of inputting the structured style data corresponding to the target form visual template into the Web generation channel and the print document generation channel respectively includes: An integrated computer vision analysis module is used to perform image analysis on the target form visual sample image through a pre-trained deep learning model and OCR recognition, obtaining image analysis results. Based on the image analysis results, all visual and logical elements in the target form visual sample image are extracted in a structured manner to obtain the structured style data corresponding to the target form visual sample image. The pre-trained deep learning model includes a document layout analysis model based on Mask R-CNN; the visual and logical elements include global attributes and element-level attributes. The structured style data is input into the Web generation channel and the print document generation channel, respectively.

5. The method according to claim 4, characterized in that, The step of performing visual difference comparison based on the web page and the printed document using AI vision includes: Using the target form visual sample image as Target_Image, the first pixel-level structural similarity value between Web_Snapshot and Target_Image, and the second pixel-level structural similarity value between Print_Snapshot and Target_Image are calculated using Siamese neural network and feature point-based image matching algorithm, respectively. In response to the first pixel-level structural similarity value or the second pixel-level structural similarity value being lower than a preset similarity threshold, the region of visual difference is analyzed by an AI agent to obtain a heatmap for locating the visual difference. Based on the image parsing results and the visual difference, the visual difference is determined to be caused by the target style attribute, resulting in a visual difference diagnosis result that includes location and attribution.

6. The method according to claim 5, characterized in that, The iterative correction based on visual difference comparison results, to ensure that the corrected web page and printed document are visually consistent with the target form visual sample, yields the final web page and final printed document corresponding to the target form visual sample, including: Based on the visual difference diagnosis results, adjust the corresponding attribute values ​​in the HTML / CSS abstract syntax tree corresponding to the Web generation channel to generate a corrected Web code version; Based on the visual difference diagnosis results, the style definition or element attributes of the printed document are adjusted by API calls or template variable replacement to obtain the corrected printed document; Based on the corrected Web code version, the steps of loading and rendering the HTML code corresponding to the HTML5 tags and the CSS code corresponding to the CSS3 stylesheet in the headless browser environment are re-executed, as well as the steps of rendering the print document into a fixed-format document through a native engine or a high-fidelity converter and taking screenshots of the fixed-format document are re-executed, until the first pixel-level structural similarity value and the second pixel-level structure both meet the preset termination conditions, and the loop rendering comparison and iterative correction process is terminated, so that the final generated Web page and print document are visually consistent with the target form visual sample, and the final Web page source code file and the final print document file directly used for printing are obtained, which correspond to the target form visual sample.

7. The method according to claim 6, characterized in that, The preset termination conditions include: Both the first pixel-level structural similarity value and the second pixel-level structural similarity value are higher than the preset similarity threshold; and, The difference between the first pixel-level structural similarity value and the second pixel-level structural similarity value is less than a preset minimum difference threshold, so that the two forms corresponding to the web page and the printed document are consistent.

8. A form generation device based on AI vision, characterized in that, include: The determination module is used to respond to an input operation for a form design template and determine the target form visual template corresponding to the input based on the input operation; The input module is used to input the structured style data corresponding to the target form visual template into the Web generation channel and the print document generation channel, respectively. The first generation module is used to generate HTML5 tags and CSS3 style sheets based on the structured style data through the Web generation channel, and to obtain a Web page based on the HTML5 tags and the CSS3 style sheets; The second generation module is used to generate a print document for printing based on the structured style data through the print document generation channel; The correction module is used to perform visual difference comparison between the web page and the printed document using AI vision, and to perform iterative correction based on the visual difference comparison results, so that the corrected web page and printed document are visually consistent with the target form visual sample, thus obtaining the final web page and final printed document corresponding to the target form visual sample.

9. An electronic device comprising a memory and a processor, wherein the memory stores a computer program executable on the processor, characterized in that, When the processor executes the computer program, it implements the steps of the method described in any one of claims 1 to 7.

10. A computer-readable storage medium, characterized in that, The computer-readable storage medium stores computer-executable instructions that, when invoked and executed by a processor, cause the processor to perform the method according to any one of claims 1 to 7.

Images