CN116414374A - File processing method and device - Google Patents

File processing method and device Download PDF

Info

Publication number
CN116414374A
CN116414374A CN202310394244.1A CN202310394244A CN116414374A CN 116414374 A CN116414374 A CN 116414374A CN 202310394244 A CN202310394244 A CN 202310394244A CN 116414374 A CN116414374 A CN 116414374A
Authority
CN
China
Prior art keywords
file
processed
node information
target
visual
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
Application number
CN202310394244.1A
Other languages
Chinese (zh)
Inventor
余盛褚
甘文鹏
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Zhejiang eCommerce Bank Co Ltd
Original Assignee
Zhejiang eCommerce Bank Co Ltd
Priority date (The priority date 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 date listed.)
Filing date
Publication date
Application filed by Zhejiang eCommerce Bank Co Ltd filed Critical Zhejiang eCommerce Bank Co Ltd
Priority to CN202310394244.1A priority Critical patent/CN116414374A/en
Publication of CN116414374A publication Critical patent/CN116414374A/en
Pending legal-status Critical Current

Links

Images

Classifications

    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00Arrangements for software engineering
    • G06F8/30Creation or generation of source code
    • G06F8/34Graphical or visual programming
    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00Arrangements for software engineering
    • G06F8/30Creation or generation of source code
    • G06F8/38Creation or generation of source code for implementing user interfaces
    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00Arrangements for software engineering
    • G06F8/70Software maintenance or management
    • G06F8/73Program documentation

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)
  • Library & Information Science (AREA)
  • Processing Or Creating Images (AREA)

Abstract

The embodiment of the specification provides a file processing method and a device, wherein the file processing method comprises the following steps: obtaining a target structure file corresponding to a visual manuscript source file; receiving an initial code file generated by a user aiming at the visual manuscript source file, and analyzing the initial code file to obtain a structure file to be processed; comparing the node information of the target structure file with the node information of the structure file to be processed to obtain a comparison result; based on the comparison result, the structure file to be processed is adjusted, and an object code file corresponding to the visual manuscript source file is generated; the method can rapidly and accurately detect the difference between the page design effect rendered by the initial code file generated by the user and the visual source file, and is convenient for restoring the page design of the visual source file.

Description

File processing method and device
Technical Field
The embodiment of the specification relates to the technical field of computers, in particular to a file processing method.
Background
With the development of the Internet, the pages are quite many, each time the pages have a specific design style, the design of some pages is complex, so that the situation that the design page effect expected by a designer is inconsistent with the actually operated page effect easily occurs in the development process of a developer.
At present, in order to realize the comparison of two page effects, on the basis of manual comparison, the coordinate axis capacity is further increased, and the reduction degree between the designed page effect and the actually operated page effect is conveniently compared. However, manual comparison can result in low coverage of comparison content, and some detailed differences cannot be fed back, so that differences between the page effect developed by the developer and the design page effect cannot be detected rapidly and accurately, and the page design restoration efficiency is affected.
Disclosure of Invention
In view of this, the present embodiment provides a document processing method. One or more embodiments of the present specification also relate to a file processing apparatus, a computing device, a computer-readable storage medium, and a computer program that solve the technical drawbacks existing in the prior art.
According to a first aspect of embodiments of the present specification, there is provided a file processing method, including:
obtaining a target structure file corresponding to a visual manuscript source file;
receiving an initial code file generated by a user aiming at the visual manuscript source file, and analyzing the initial code file to obtain a structure file to be processed;
Comparing the node information of the target structure file with the node information of the structure file to be processed to obtain a comparison result;
and adjusting the structure file to be processed based on the comparison result, and generating an object code file corresponding to the visual manuscript source file.
According to a second aspect of embodiments of the present specification, there is provided a document processing apparatus comprising:
the file acquisition module is configured to acquire a target structure file corresponding to the visual source file;
the file analysis module is configured to receive an initial code file generated by a user aiming at the visual manuscript source file, and analyze the initial code file to obtain a structure file to be processed;
the node comparison module is configured to compare the node information of the target structure file with the node information of the structure file to be processed to obtain a comparison result;
and the file generation module is configured to adjust the structure file to be processed based on the comparison result and generate an object code file corresponding to the visual manuscript source file.
According to a third aspect of embodiments of the present specification, there is provided a computing device comprising:
a memory and a processor;
the memory is configured to store computer-executable instructions that, when executed by the processor, perform the steps of the file processing method described above.
According to a fourth aspect of embodiments of the present specification, there is provided a computer-readable storage medium storing computer-executable instructions which, when executed by a processor, implement the steps of the above-described file processing method.
According to a fifth aspect of embodiments of the present specification, there is provided a computer program, wherein the computer program, when executed in a computer, causes the computer to perform the steps of the above-described file processing method.
An embodiment of the present disclosure provides a file processing method, including: obtaining a target structure file corresponding to a visual manuscript source file; receiving an initial code file generated by a user aiming at the visual manuscript source file, and analyzing the initial code file to obtain a structure file to be processed; comparing the node information of the target structure file with the node information of the structure file to be processed to obtain a comparison result; and adjusting the structure file to be processed based on the comparison result, and generating an object code file corresponding to the visual manuscript source file.
In the specific implementation, a target structure file corresponding to a visual manuscript file is obtained, an initial code file generated by the received visual manuscript file is analyzed to obtain a structure file to be processed, the target structure file is compared with the structure file to be processed, and the structure file to be processed is adjusted according to the comparison result to obtain the target code file; the method can automatically adjust the initial code file generated by user development, so that the visual interface rendered by the target code file can conform to the visual interface rendered by the visual manuscript source file, the difference between page effects is not compared manually, the coverage of automatic comparison is high, the detailed difference can be compared, the difference between the page design effect rendered by the initial code file generated by the user and the visual manuscript source file can be detected rapidly and accurately, and the page design of the visual manuscript source file can be restored conveniently.
Drawings
FIG. 1 is a flow chart of a method for processing a document according to an embodiment of the present disclosure;
FIG. 2 is a flow chart of a method of processing a document according to one embodiment of the present disclosure;
FIG. 3 is a schematic diagram showing an interface of a comparison result in a document processing method according to an embodiment of the present disclosure;
FIG. 4 is a process flow diagram of a method for processing a file according to one embodiment of the present disclosure;
FIG. 5 is a schematic diagram of a document processing apparatus according to one embodiment of the present disclosure;
FIG. 6 is a block diagram of a computing device provided in one embodiment of the present description.
Detailed Description
In the following description, numerous specific details are set forth in order to provide a thorough understanding of the present description. This description may be embodied in many other forms than described herein and similarly generalized by those skilled in the art to whom this disclosure pertains without departing from the spirit of the disclosure and, therefore, this disclosure is not limited by the specific implementations disclosed below.
The terminology used in the one or more embodiments of the specification is for the purpose of describing particular embodiments only and is not intended to be limiting of the one or more embodiments of the specification. As used in this specification, one or more embodiments and the appended claims, the singular forms "a," "an," and "the" are intended to include the plural forms as well, unless the context clearly indicates otherwise. It should also be understood that the term "and/or" as used in one or more embodiments of the present specification refers to and encompasses any or all possible combinations of one or more of the associated listed items.
It should be understood that, although the terms first, second, etc. may be used in one or more embodiments of this specification to describe various information, these information should not be limited by these terms. These terms are only used to distinguish one type of information from another. For example, a first may also be referred to as a second, and similarly, a second may also be referred to as a first, without departing from the scope of one or more embodiments of the present description. The word "if" as used herein may be interpreted as "at … …" or "at … …" or "responsive to a determination", depending on the context.
Furthermore, it should be noted that, user information (including, but not limited to, user equipment information, user personal information, etc.) and data (including, but not limited to, data for analysis, stored data, presented data, etc.) according to one or more embodiments of the present disclosure are information and data authorized by a user or sufficiently authorized by each party, and the collection, use, and processing of relevant data is required to comply with relevant laws and regulations and standards of relevant countries and regions, and is provided with corresponding operation entries for the user to select authorization or denial.
First, terms related to one or more embodiments of the present specification will be explained.
Visual source file: refers to visual manuscripts that organize graphics drawn by a designer with a design tool.
Actual page display effect diagram: the visual effect display diagram of the webpage generated by the front-end code on the browser is referred to as the picture effect of the webpage generated by html+css+js and displayed by rendering of the browser.
Degree of reduction: the method is characterized in that data are extracted from a design manuscript source file and are correctly realized to the degree in an actual page display effect diagram, the expression form can be represented by scores, and the higher the numerical value is, the higher the reduction degree between the two is.
NSView: a base container for rendering, printing, and processing events in an application.
Headless browser: refers to a browser without a graphical user interface. The "headless" elements of a "headless browser" are related to their fact lack of a critical element, i.e., a Graphical User Interface (GUI). The browser itself will run regularly (contact the target website, upload/download documents, display information, etc.), but all of these sequential operations occur at the back end without any graphical user display (e.g., icons, pictures, or search bar elements).
DOM (document object model): is an object representation of an HTML document and is also an interface between external content (e.g., javaScript) and HTML elements.
With the development of internet technology, the appearance of web pages is increasingly presented, each web page has a specific design style, and some web pages are even extremely complex, so that in the development process, the situation that the expected effect of a designer is inconsistent with the actual running result easily occurs, therefore, how to accurately and quickly realize the web page style from a visual manuscript source file can provide better user experience for the web pages, and the matching efficiency between design and development can be effectively improved, and the development time cost can be saved.
Based on the above, the embodiment of the specification provides a reduction degree comparison scheme based on analysis of the visual manuscript source file and the actual page display effect graph, so that accurate and rapid analysis of the webpage style from the visual manuscript source file is realized, seamless butt joint of the visual manuscript source file and the actual page display effect graph is realized, the quality of webpage display can be better evaluated through comparison of reduction degrees, and rapid and accurate design reduction and improvement of the visual effect are realized.
In the present specification, a document processing method is provided, and the present specification relates to a document processing apparatus, a computing device, and a computer-readable storage medium, one by one, as described in detail in the following embodiments.
Referring to fig. 1, fig. 1 is a schematic flow chart of a file processing method according to an embodiment of the present disclosure.
It should be noted that, the file processing method provided in the embodiment of the present disclosure may be applied to a file processing system, where the file processing system may implement automatic comparison between a page effect graph developed by a developer and a page effect designed by a designer, so as to implement rapid and accurate detection of page dissimilarity, and restore a designed page and improve a visual effect.
In practical application, the file processing system 100 receives a visual source file, analyzes the visual source file, and determines a target structure file; receiving an initial code file, wherein the initial code file is developed by a developer, and analyzing the initial code file aiming at the code file of the visual source file to obtain a structure file to be processed; further, comparing the target structure file with the structure file to be processed to determine a comparison result, wherein the comparison result can be understood as a difference result between the display page effect of the visual manuscript source file and the display page effect developed by a developer; finally, the structure file to be processed can be adjusted according to the comparison result, and an object code file is generated, wherein the object code file can be understood as a code file capable of restoring the effect diagram of the page of the visual manuscript source file; and rendering the target code file to generate a page view with higher reduction degree with the visual source file.
In summary, the file processing method provided by the embodiment of the specification can automatically compare the display page effect of the visual manuscript source file with the display page effect developed by the developer, can rapidly and accurately detect the difference between the design manuscript and the actual page, and is convenient for accurately restoring the display page effect of the visual manuscript source file.
Referring to fig. 2, fig. 2 shows a flowchart of a file processing method according to an embodiment of the present disclosure, which specifically includes the following steps.
Step 202: and obtaining a target structure file corresponding to the visual source file.
Among these, visual script files can be understood as visual scripts organized by the graphic drawn by the UI designer with the design tools, i.e., view files presented in the display interface.
In practical applications, the executing body may acquire a visual source file and acquire a target structure file corresponding to the visual source file, where the target structure file may be understood as a file capable of representing an interface exhibition structure of the visual source file, such as a DOM tree in HTML, which is not limited in this embodiment.
Further, the embodiment may further parse the layer information in the visual source document to obtain a target structure file; specifically, the obtaining the target structure file corresponding to the visual source file includes:
Receiving a visual manuscript source file;
analyzing the layer information in the visual manuscript source file to obtain a visual manuscript code file;
and determining a target structure file based on the visual manuscript code file.
The visual manuscript code file may be understood as a code file, such as an HTML file, for rendering a visual effect map corresponding to a visual manuscript.
In practical application, the execution body can analyze the received visual manuscript source file, analyze the layer information in the visual manuscript source file to obtain a visual manuscript code file, and analyze the target structure file from the visual manuscript code file; it should be noted that, in this embodiment, an add-in mechanism may be further provided to implement the parsing process of the visual source file, and further, the parsing add-in may be invoked to parse the visual source file, the skchytol may be downloaded to the skcore file first, the skcore pulling up the bkcodego add-in may perform metadata export, page traversal, drawing board traversal, drawing layer filtering, attribute conversion, and structure export, and finally, the visual source code file of the visual source file is obtained; the process of parsing the visual source file is not limited in this embodiment, and other parsing processing methods may be referred to.
And analyzing the visual source file to obtain a target structure file, so that the target structure file can be conveniently compared with the target structure file to determine the reduction degree of the page effect diagram of the visual source file.
Furthermore, in order to accurately obtain the content of the display page of the visual manuscript source file, the content can be determined by obtaining the node tree corresponding to the visual manuscript code file; specifically, the determining, based on the visual manuscript code file, a target structure file includes:
analyzing the visual manuscript code file to generate a node structure tree corresponding to the visual manuscript code file;
and determining the node information in the node structure tree as a target structure file.
The node structure tree can be understood as a tree-shaped data structure, and comprises a plurality of nodes, wherein each node has a corresponding association relation, and the data structure of the whole attribute forms the data content of the visual manuscript code file.
In practical application, the execution main body can analyze the visual manuscript code file and generate a node structure tree corresponding to the visual manuscript code file, and each node information in the node structure tree forms a target structure file; for example, an HTML file describes the structure of a page, but a browser cannot directly understand and use HTML, so that the HTML needs to be converted into a structural DOM tree that can be understood by the browser through an HTML parser, and therefore, a chromel headless browser is utilized to extract DOM node information, classify characters and pictures, convert a layer into an HTML tag, realize precise resolution of a visual manuscript (parse the HTML file into tokens, and construct a DOM tree according to the Token), that is, determine node information in a DOM node as a target structural file.
It should be noted that, in the embodiment of the present disclosure, the process of parsing the visual manuscript code file into the target structure file is not limited, and the foregoing is merely described as an example.
Step 204: and receiving an initial code file generated by a user aiming at the visual source file, and analyzing the initial code file to obtain a structure file to be processed.
The initial code file may be understood as a code file which is autonomously developed by a developer for the visual manuscript source file, and the page code file may be understood as an HTML file which is developed in the front-end development process.
In practical application, after receiving an HTML file developed by a developer, an execution body may parse the HTML file to obtain a DOM tree structure file in the HTML file, including node information in DOM nodes.
Further, the analyzing the initial code file to obtain a structure file to be processed includes:
analyzing the initial code file to generate a node structure tree corresponding to the initial code file;
and determining the node information in the node structure tree as a structure file to be processed.
In practical application, the execution main body also needs to analyze the initial code file to determine a node DOM tree corresponding to the initial code file, and determine node information corresponding to each DOM node as a structure file to be processed; note that, the process of parsing the initial code file may refer to the description of the above embodiment, which is not limited in this embodiment.
Step 206: comparing the node information of the target structure file with the node information of the structure file to be processed, and obtaining a comparison result.
In practical application, after determining the target structure file and the structure file to be processed, the execution body can also compare the node information in the two structure files to determine whether there is a difference between the node information and the node information, what the content of the difference is, and then determine the comparison result.
Furthermore, in order to improve the comparison efficiency of the system, a mode of comparing the effect graphs can be adopted before the node information is compared, and comparison screening is firstly carried out so as to avoid comparing the node information of the structure files without any relation, thereby wasting the calculation resources of the system; specifically, the comparing the node information of the target structure file with the node information of the structure file to be processed includes:
determining a target interface image corresponding to the visual manuscript source file based on the target structure file;
determining an interface image to be compared corresponding to the visual manuscript source file based on the structure file to be processed;
calculating the image similarity between the target interface image and the interface image to be compared;
And comparing the node information of the target structure file with the node information of the structure file to be processed based on the image similarity.
The target interface image can be understood as a page effect image corresponding to the visual source file through the analyzer, and the target interface image can be understood as a page effect image expected to be developed by a developer because the layer information is directly analyzed by the analyzer; the interface image to be compared can be understood as a page effect diagram rendered by a developer according to the developed code file.
In practical application, the execution main body can use the headless browser to determine a target interface image corresponding to the visual source file according to the target structure file, and can also determine an interface image to be compared corresponding to the visual source file according to the structure file to be processed; calculating the image similarity between the target interface image and the interface image to be compared, and comparing the node information of the target structure file with the node information of the structure file to be processed according to the image similarity; it should be noted that, in this embodiment, the similarity between the images is determined to screen the situation that the images are basically dissimilar or basically similar, in practical application, the basically dissimilar images indicate that the two page effect graphs have no comparable value, so that the subsequent node information comparison is not required to be performed.
It should be noted that, in the above-mentioned image similarity calculation process, the hash similarity may be determined by using a method of calculating a hash average value of an image, or may refer to other current image calculation methods, which is not limited in this embodiment.
By calculating the similarity of the two visual effect graphs and executing the subsequent node information comparison process according to the similarity, the method can be suitable for various compared application scenes, the comparison efficiency of the system can be improved to a certain extent, and the calculation resources are saved.
Further, in this embodiment, a preset threshold interval may be provided according to different application scenarios, and a process of comparing node information may be determined according to the preset threshold interval; specifically, the comparing the node information of the target structure file with the node information of the structure file to be processed based on the image similarity includes:
and under the condition that the image similarity meets a preset threshold interval, comparing the node information of the target structure file with the node information of the structure file to be processed.
The preset threshold interval may be understood as a similarity threshold range set according to different usage scenarios, for example, between 0.5 and 0.99.
In practical application, the executing body can compare the node information of the target structure file with the node information of the structure file to be processed under the condition that the image similarity meets the preset threshold value interval so as to determine whether information difference exists between the node information; for example, when the similarity of the images is 0.80, the preset threshold interval is 0.5-0.99, which indicates that the display effect of the two images at present is different in part, and specific difference content can be determined through subsequent comparison.
Further, by comparing the node information in the two images, whether the two images have data differences and/or interface style differences is determined; specifically, the comparing the node information of the target structure file with the node information of the structure file to be processed to obtain a comparison result includes:
acquiring target node information in the target structure file and node information to be processed of the structure file to be processed, wherein the target node information is associated with the node information to be processed;
and comparing the target node information with the node information to be processed to obtain a comparison result, wherein the comparison result comprises a data difference result and/or an interface style difference result.
In practical application, the execution main body can firstly acquire the target node information in the target structure file and the node information to be processed in the structure file to be processed, and it is to be noted that the target node information and the node information to be processed have corresponding association relations, for example, the nodes between the node structure trees have one-to-one correspondence relation; the comparison result can be obtained by traversing the node information in the node tree and executing information matching; the node comparison result may include a data difference result and/or an interface style difference result, that is, a difference between node data information and/or a difference between presentation styles of the interface, such as a difference in font, font size, position, size, color, and the like.
It should be noted that, before node matching is performed, the present embodiment may further perform cleaning, de-duplication, merging, and reconstruction on DOM nodes, so that structures between the compared DOM trees are similar, further, style differences of page display effects may be compared, differences on page display data content, such as style differences, may be compared, and interface style difference results may be determined by acquiring CSS style data in the structure tree, and comparing differences between CSS style data; the specific comparison method is not limited to this, and node matching can be realized according to a neural network algorithm, for example, two types of node attributes are matched by adopting an opencv+mobiletv 2 neural network algorithm, so that intelligent design comparison is realized.
Referring to fig. 3, fig. 3 is an interface display schematic diagram of a comparison result in a file processing method according to an embodiment of the present disclosure.
Fig. 3 is a schematic diagram showing a comparison result, in fig. 3, the ratio of the uppermost displayable pixel is 750 x 1207, the next column can show the comparison result, taking the similarity of the two frames being compared as an example, and for the similarity being more than 99%, the comparison content is not excessively displayed, for example, the similarity of the two frames is 98%, the comparison details can be shown in an interface, for example, the position deviation, the size deviation, the transparency, the fonts, the code suggestions and the like in fig. 3, and by showing the detailed comparison details in the display interface, the difference between the page effect display diagram developed by the developer and the effect display diagram of the visual manuscript source file can be clearly shown.
It should be noted that, each element shown in the display interface diagram of the comparison result illustrated in fig. 3 is taken as an example, and the content of the element display may be adjusted according to different application scenarios, which is not limited in this embodiment.
Step 208: and adjusting the structure file to be processed based on the comparison result, and generating an object code file corresponding to the visual manuscript source file.
In practical application, the execution main body can adjust the structure file to be processed according to the content of the comparison result, and further, generates an object code file corresponding to the visual manuscript source file; it should be noted that, in this embodiment, a process of automatically modifying the code may be provided, or the comparison result may be sent to the developer, and manually modified by the developer; in order to improve the processing efficiency, the structure file to be processed, such as node information of the DOM tree structure in the HTML document, may be automatically adjusted according to the comparison result, so as to obtain the object code file.
Further, based on the comparison result, the adjusting the structure file to be processed includes:
based on the comparison result, obtaining information to be adjusted for the structure file to be processed;
and adjusting the structure file to be processed according to the information to be adjusted.
In practical application, the execution body may obtain the information to be adjusted in the comparison result, and adjust the structure file to be processed according to the information to be adjusted, where it should be noted that the information to be adjusted may have a plurality of comparison results, for example, more modification entries, including modification of the size of the text, position deviation, etc., which is not limited in this embodiment. For example, the code in the initial code file is updated according to the code suggestion in the comparison result, and the target code file is obtained.
In summary, according to the file processing method provided by the embodiment of the application, the target structure file corresponding to the visual manuscript file is obtained, the initial code file generated by the received visual manuscript file is analyzed to obtain the structure file to be processed, the target structure file and the structure file to be processed are compared, and then the structure file to be processed is adjusted according to the comparison result to obtain the target code file; the method and the device can realize automatic adjustment of the initial code file generated by user development, so that the visual interface rendered by the target code file can conform to the visual interface rendered by the visual manuscript source file, the difference between page effects is not compared manually, the coverage of automatic comparison is high, the detailed difference can be compared, the difference between the page design effect rendered by the initial code file generated by the user and the visual manuscript source file can be detected rapidly and accurately, and the page design of the visual manuscript source file is convenient to restore.
Referring to fig. 4, fig. 4 shows a process flow chart of a file processing method according to an embodiment of the present disclosure, which specifically includes the following steps.
It should be noted that, the execution body of the present embodiment may be understood as a file processing system, which is the same as the execution body described in the foregoing embodiment, and will not be repeated herein.
Step 402: a UI visual manuscript is received.
Step 404: and analyzing the UI visual manuscript by using the plug-in to obtain an analysis HTML file.
Step 406: and analyzing the UI visual manuscript by using the plug-in to obtain an interface image rendered according to the visual manuscript.
Step 408: receiving developer developed targets HTML file of UI visual manuscript.
Step 410: a development interface image is received.
Step 412: and obtaining a first DOM tree according to the analysis HTNL file.
Step 414: and obtaining a second DOM tree according to the HTML file developed by the developer.
Step 416: and calculating a hash value between the interface image rendered by the visual manuscript and the development interface image, obtaining image similarity, judging whether the image similarity is between 0.5 and 0.99, if so, executing step 420, and if not, executing step 418.
Step 418: and no subsequent node matching is performed.
Step 420: the first DOM tree and the second DOM tree are traversed in a crossing manner.
Step 422: and selecting corresponding DOM nodes in the two DOM trees respectively, and acquiring CSS patterns in the two DOM nodes for comparison.
Step 424: and obtaining an alignment result.
Step 426: and generating a comparison report.
In summary, the document processing method provided in this embodiment provides a visual reduction degree comparison scheme based on analysis of a design document file and an actual page display effect image, so as to realize comparison of a one-time design image and an actual page effect, and accurately analyze the problem that the page is not solved, thereby improving the matching efficiency of design and development, overcoming the repeated labeling and repeated communication problems which are difficult to solve in manual visual walking inspection, and the problem that manual code modification is time-consuming and labor-consuming.
Corresponding to the above method embodiments, the present disclosure further provides an embodiment of a document processing apparatus, and fig. 5 shows a schematic structural diagram of the document processing apparatus provided in one embodiment of the present disclosure. As shown in fig. 5, the apparatus includes:
a file obtaining module 502 configured to obtain a target structure file corresponding to the visual source file;
the file parsing module 504 is configured to receive an initial code file generated by a user for the visual source file, parse the initial code file, and obtain a structure file to be processed;
A node comparison module 506 configured to compare the node information of the target structure file with the node information of the structure file to be processed to obtain a comparison result;
and the file generating module 508 is configured to adjust the structure file to be processed based on the comparison result, and generate an object code file corresponding to the visual manuscript source file.
Optionally, the file acquisition module 502 is further configured to: receiving a visual manuscript source file; analyzing the layer information in the visual manuscript source file to obtain a visual manuscript code file; and determining a target structure file based on the visual manuscript code file.
Optionally, the file acquisition module 502 is further configured to: analyzing the visual manuscript code file to generate a node structure tree corresponding to the visual manuscript code file; and determining the node information in the node structure tree as a target structure file.
Optionally, the file parsing module 504 is further configured to: analyzing the initial code file to generate a node structure tree corresponding to the initial code file; and determining the node information in the node structure tree as a structure file to be processed.
Optionally, the node comparison module 506 is further configured to: determining a target interface image corresponding to the visual manuscript source file based on the target structure file; determining an interface image to be compared corresponding to the visual manuscript source file based on the structure file to be processed; calculating the image similarity between the target interface image and the interface image to be compared; and comparing the node information of the target structure file with the node information of the structure file to be processed based on the image similarity.
Optionally, the node comparison module 506 is further configured to: and under the condition that the image similarity meets a preset threshold interval, comparing the node information of the target structure file with the node information of the structure file to be processed.
Optionally, the node comparison module 506 is further configured to: acquiring target node information in the target structure file and node information to be processed of the structure file to be processed, wherein the target node information is associated with the node information to be processed; and comparing the target node information with the node information to be processed to obtain a comparison result, wherein the comparison result comprises a data difference result and/or an interface style difference result.
Optionally, the file generation module 508 is further configured to: based on the comparison result, obtaining information to be adjusted for the structure file to be processed; and adjusting the structure file to be processed according to the information to be adjusted.
According to the file processing device provided by the embodiment of the application, the target structure file corresponding to the visual manuscript source file is obtained, the initial code file generated by the received visual manuscript source file is analyzed to obtain the structure file to be processed, the target structure file is compared with the structure file to be processed, and the structure file to be processed is adjusted according to the comparison result to obtain the target code file; the method can automatically adjust the initial code file generated by user development, so that the visual interface rendered by the target code file can conform to the visual interface rendered by the visual manuscript source file, the difference between page effects is not compared manually, the coverage of automatic comparison is high, the detailed difference can be compared, the difference between the page design effect rendered by the initial code file generated by the user and the visual manuscript source file can be detected rapidly and accurately, and the page design of the visual manuscript source file can be restored conveniently.
In this specification, each embodiment is described in a progressive manner, and identical and similar parts of each embodiment are all referred to each other, and each embodiment mainly describes differences from other embodiments. In particular, for the document processing apparatus, since it is substantially similar to the document processing method embodiment, the description is relatively simple, and the relevant points are referred to in the description of the document processing method embodiment.
Fig. 6 illustrates a block diagram of a computing device 600 provided in accordance with one embodiment of the present description. The components of computing device 600 include, but are not limited to, memory 610 and processor 620. The processor 620 is coupled to the memory 610 via a bus 630 and a database 650 is used to hold data.
Computing device 600 also includes access device 640, access device 640 enabling computing device 600 to communicate via one or more networks 660. Examples of such networks include a public switched telephone Network (PSTN, publicSwitchedTelephone Network), a local area Network (LAN, localAreaNetwork), a wide area Network (WAN, wideAreaNetwork), a personal area Network (PAN, personalAreaNetwork), or a combination of communication networks such as the internet. The access device 540 may include one or more of any type of network interface, wired or wireless, such as a Network Interface Card (NIC), such as an IEEE802.11 wireless local area network (WLAN, wirelessLocalAreaNetwork) wireless interface, a worldwide interoperability for microwave access (Wi-MAX, worldwideInteroperabilityforMicrowaveAccess) interface, an ethernet interface, a universal serial bus (USB, universalSerialBus) interface, a cellular network interface, a bluetooth interface, a near-field communication (NFC, nearFieldCommunication).
In one embodiment of the present description, the above-described components of computing device 600, as well as other components not shown in FIG. 6, may also be connected to each other, such as by a bus. It should be understood that the block diagram of the computing device shown in FIG. 6 is for exemplary purposes only and is not intended to limit the scope of the present description. Those skilled in the art may add or replace other components as desired.
Computing device 600 may be any type of stationary or mobile computing device, including a mobile computer or mobile computing device (e.g., tablet, personal digital assistant, laptop, notebook, netbook, etc.), mobile phone (e.g., smart phone), wearable computing device (e.g., smart watch, smart glasses, etc.), or other type of mobile device, or a stationary computing device such as a desktop computer or personal computer (PC, personalComputer). Computing device 600 may also be a mobile or stationary server.
Wherein the processor 620 is configured to execute computer-executable instructions that, when executed by the processor, perform the steps of the file processing method described above.
In this specification, each embodiment is described in a progressive manner, and identical and similar parts of each embodiment are all referred to each other, and each embodiment mainly describes differences from other embodiments. In particular, for computing device embodiments, the description is relatively simple as it is substantially similar to file processing method embodiments, as relevant to the description of file processing method embodiments.
An embodiment of the present disclosure also provides a computer-readable storage medium storing computer-executable instructions that, when executed by a processor, implement the steps of the file processing method described above.
In this specification, each embodiment is described in a progressive manner, and identical and similar parts of each embodiment are all referred to each other, and each embodiment mainly describes differences from other embodiments. In particular, for computer readable storage medium embodiments, since they are substantially similar to document processing method embodiments, the description is relatively simple, and references to portions of the description of document processing method embodiments are sufficient.
An embodiment of the present disclosure also provides a computer program, where the computer program, when executed in a computer, causes the computer to perform the steps of the file processing method described above.
In this specification, each embodiment is described in a progressive manner, and identical and similar parts of each embodiment are all referred to each other, and each embodiment mainly describes differences from other embodiments. In particular, for the computer program embodiment, since it is substantially similar to the document processing method embodiment, the description is relatively simple, and reference is made to the description of the document processing method embodiment in part.
The foregoing describes specific embodiments of the present disclosure. Other embodiments are within the scope of the following claims. In some cases, the actions or steps recited in the claims can be performed in a different order than in the embodiments and still achieve desirable results. In addition, the processes depicted in the accompanying figures do not necessarily require the particular order shown, or sequential order, to achieve desirable results. In some embodiments, multitasking and parallel processing are also possible or may be advantageous.
The computer instructions include computer program code that may be in source code form, object code form, executable file or some intermediate form, etc. The computer readable medium may include: any entity or device capable of carrying the computer program code, a recording medium, a U disk, a removable hard disk, a magnetic disk, an optical disk, a computer memory, a Read-only memory (ROM), a random access memory (RAM, randomAccessMemory), an electrical carrier signal, a telecommunication signal, a software distribution medium, and so forth. It should be noted that the computer readable medium contains content that can be appropriately scaled according to the requirements of jurisdictions in which such content is subject to legislation and patent practice, such as in certain jurisdictions in which such content is subject to legislation and patent practice, the computer readable medium does not include electrical carrier signals and telecommunication signals.
It should be noted that the foregoing describes specific embodiments of the present invention. Other embodiments are within the scope of the following claims. In some cases, the actions or steps recited in the claims can be performed in a different order than in the embodiments and still achieve desirable results. In addition, the processes depicted in the accompanying figures do not necessarily require the particular order shown, or sequential order, to achieve desirable results. In some embodiments, multitasking and parallel processing are also possible or may be advantageous. Further, those skilled in the art will appreciate that the embodiments described in the specification are all preferred embodiments, and that the acts and modules referred to are not necessarily all required for the embodiments described in the specification.
In the foregoing embodiments, the descriptions of the embodiments are emphasized, and for parts of one embodiment that are not described in detail, reference may be made to the related descriptions of other embodiments.
The preferred embodiments of the present specification disclosed above are merely used to help clarify the present specification. Alternative embodiments are not intended to be exhaustive or to limit the invention to the precise form disclosed. Obviously, many modifications and variations are possible in light of the teaching of the embodiments. The embodiments were chosen and described in order to best explain the principles of the embodiments and the practical application, to thereby enable others skilled in the art to best understand and utilize the invention. This specification is to be limited only by the claims and the full scope and equivalents thereof.

Claims (18)

1. A document processing method, comprising:
obtaining a target structure file corresponding to a visual manuscript source file;
receiving an initial code file generated by a user aiming at the visual manuscript source file, and analyzing the initial code file to obtain a structure file to be processed;
comparing the node information of the target structure file with the node information of the structure file to be processed to obtain a comparison result;
and adjusting the structure file to be processed based on the comparison result, and generating an object code file corresponding to the visual manuscript source file.
2. The method of claim 1, wherein the obtaining the target structure file corresponding to the visual source file includes:
receiving a visual manuscript source file;
analyzing the layer information in the visual manuscript source file to obtain a visual manuscript code file;
and determining a target structure file based on the visual manuscript code file.
3. The method of claim 2, the determining a target structure file based on the visual manuscript code file, comprising:
analyzing the visual manuscript code file to generate a node structure tree corresponding to the visual manuscript code file;
and determining the node information in the node structure tree as a target structure file.
4. The method of claim 1, wherein the parsing the initial code file to obtain a pending structure file includes:
analyzing the initial code file to generate a node structure tree corresponding to the initial code file;
and determining the node information in the node structure tree as a structure file to be processed.
5. The method of claim 1, the comparing the node information of the target structure file with the node information of the structure file to be processed, comprising:
determining a target interface image corresponding to the visual manuscript source file based on the target structure file;
determining an interface image to be compared corresponding to the visual manuscript source file based on the structure file to be processed;
calculating the image similarity between the target interface image and the interface image to be compared;
and comparing the node information of the target structure file with the node information of the structure file to be processed based on the image similarity.
6. The method of claim 5, wherein comparing the node information of the target structure file and the node information of the structure file to be processed based on the image similarity comprises:
And under the condition that the image similarity meets a preset threshold interval, comparing the node information of the target structure file with the node information of the structure file to be processed.
7. The method of claim 1, wherein the comparing the node information of the target structure file with the node information of the structure file to be processed to obtain a comparison result includes:
acquiring target node information in the target structure file and node information to be processed of the structure file to be processed, wherein the target node information is associated with the node information to be processed;
and comparing the target node information with the node information to be processed to obtain a comparison result, wherein the comparison result comprises a data difference result and/or an interface style difference result.
8. The method of claim 1, wherein adjusting the structure file to be processed based on the comparison result comprises:
based on the comparison result, obtaining information to be adjusted for the structure file to be processed;
and adjusting the structure file to be processed according to the information to be adjusted.
9. A document processing apparatus comprising:
the file acquisition module is configured to acquire a target structure file corresponding to the visual source file;
The file analysis module is configured to receive an initial code file generated by a user aiming at the visual manuscript source file, and analyze the initial code file to obtain a structure file to be processed;
the node comparison module is configured to compare the node information of the target structure file with the node information of the structure file to be processed to obtain a comparison result;
and the file generation module is configured to adjust the structure file to be processed based on the comparison result and generate an object code file corresponding to the visual manuscript source file.
10. The apparatus of claim 9, the file acquisition module further configured to: receiving a visual manuscript source file; analyzing the layer information in the visual manuscript source file to obtain a visual manuscript code file; and determining a target structure file based on the visual manuscript code file.
11. The apparatus of claim 10, the file acquisition module further configured to: analyzing the visual manuscript code file to generate a node structure tree corresponding to the visual manuscript code file; and determining the node information in the node structure tree as a target structure file.
12. The apparatus of claim 9, the file parsing module further configured to: analyzing the initial code file to generate a node structure tree corresponding to the initial code file; and determining the node information in the node structure tree as a structure file to be processed.
13. The apparatus of claim 9, the node comparison module further configured to: determining a target interface image corresponding to the visual manuscript source file based on the target structure file; determining an interface image to be compared corresponding to the visual manuscript source file based on the structure file to be processed; calculating the image similarity between the target interface image and the interface image to be compared; and comparing the node information of the target structure file with the node information of the structure file to be processed based on the image similarity.
14. The apparatus of claim 13, the node comparison module further configured to: and under the condition that the image similarity meets a preset threshold interval, comparing the node information of the target structure file with the node information of the structure file to be processed.
15. The apparatus of claim 9, the node comparison module further configured to: acquiring target node information in the target structure file and node information to be processed of the structure file to be processed, wherein the target node information is associated with the node information to be processed; and comparing the target node information with the node information to be processed to obtain a comparison result, wherein the comparison result comprises a data difference result and/or an interface style difference result.
16. The apparatus of claim 9, the file generation module further configured to: based on the comparison result, obtaining information to be adjusted for the structure file to be processed; and adjusting the structure file to be processed according to the information to be adjusted.
17. A computing device, comprising:
a memory and a processor;
the memory is configured to store computer executable instructions, and the processor is configured to execute the computer executable instructions, which when executed by the processor, implement the steps of the document processing method of any one of claims 1 to 8.
18. A computer readable storage medium storing computer executable instructions which when executed by a processor implement the steps of the document processing method of any one of claims 1 to 8.
CN202310394244.1A 2023-04-07 2023-04-07 File processing method and device Pending CN116414374A (en)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202310394244.1A CN116414374A (en) 2023-04-07 2023-04-07 File processing method and device

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202310394244.1A CN116414374A (en) 2023-04-07 2023-04-07 File processing method and device

Publications (1)

Publication Number Publication Date
CN116414374A true CN116414374A (en) 2023-07-11

Family

ID=87057690

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202310394244.1A Pending CN116414374A (en) 2023-04-07 2023-04-07 File processing method and device

Country Status (1)

Country Link
CN (1) CN116414374A (en)

Similar Documents

Publication Publication Date Title
WO2020119420A1 (en) Front-end page generation method and apparatus, computer device, and storage medium
US20200117961A1 (en) Two-dimensional document processing
CN110446063B (en) Video cover generation method and device and electronic equipment
US10867171B1 (en) Systems and methods for machine learning based content extraction from document images
US20230401828A1 (en) Method for training image recognition model, electronic device and storage medium
US20190108204A1 (en) Maintaining semantic information in document conversion
CN110008110A (en) The test method and device of user interface
CN110781925B (en) Software page classification method and device, electronic equipment and storage medium
US10007680B2 (en) Content collection search with robust content matching
US11810333B2 (en) Method and apparatus for generating image of webpage content
CN112597918A (en) Text detection method and device, electronic equipment and storage medium
US20210056429A1 (en) Apparatus and methods for converting lineless tables into lined tables using generative adversarial networks
US11348331B2 (en) Information processing apparatus and non-transitory computer readable medium
CN114663904A (en) PDF document layout detection method, device, equipment and medium
CN113989577B (en) Image classification method and device
Tymoshenko et al. Real-Time Ukrainian Text Recognition and Voicing.
Chen et al. UI layers merger: merging UI layers via visual learning and boundary prior
CN114565927A (en) Table identification method and device, electronic equipment and storage medium
CN108268488B (en) Webpage main graph identification method and device
CN117093386A (en) Page screenshot method, device, computer equipment and storage medium
CN116414374A (en) File processing method and device
Nurzam et al. Implementation of real-time scanner Java language text with mobile vision Android based
CN115546815A (en) Table identification method, device, equipment and storage medium
CN115034177A (en) Presentation file conversion method, device, equipment and storage medium
CN115292188A (en) Interactive interface compliance detection method, device, equipment, medium and program product

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