An interface adjustment method and device, equipment and medium

Abstract

The present application relates to an interface adjustment method, device, equipment and medium, wherein the method comprises: obtaining a front-end code; extracting a first intermediate code in the front-end code, wherein the first intermediate code is associated with an interface implemented by the front-end code; receiving an adjustment request for the first intermediate code, generating a second intermediate code and an adjustment description based on the adjustment request, wherein the adjustment description is used to describe the adjustment operation of the first intermediate code; and adjusting the front-end code based on the second intermediate code and the adjustment description to obtain an adjusted interface. By introducing the intermediate code associated with the interface display as a bridge layer in the design user and the program, the design user can directly adjust the interface design by adjusting the intermediate code, and quickly map back to the front-end code through the adjusted intermediate code, so as to migrate the adjustment changes to the interface of the program, thereby reducing the cost of interface adjustment and improving the accuracy of adjustment.

Description

Technical Field

[0001] This article relates to the field of computer technology, and in particular to an interface adjustment method, apparatus, device and medium. Background Technology

[0002] Designers need to migrate adjustments to design files to the online interface, and the industry is demanding lower costs and greater accuracy in interface adjustments. Summary of the Invention

[0003] To address the aforementioned technical problems, this paper provides an interface adjustment method, apparatus, device, and medium.

[0004] This article provides a method for adjusting the interface, the method including: Get the front-end code; Extract the first intermediate code from the front-end code, wherein the first intermediate code is associated with the interface implemented by the front-end code; Receive an adjustment request for the first intermediate code, generate a second intermediate code and an adjustment description based on the adjustment request, wherein the adjustment description is used to describe the adjustment operation on the first intermediate code; Based on the second intermediate code and the adjustment description, the front-end code is adjusted to obtain the adjusted interface.

[0005] This article also provides an interface adjustment device, the device comprising: The retrieval module is used to retrieve front-end code; An extraction module is used to extract first intermediate code from the front-end code, wherein the first intermediate code is associated with the interface implemented by the front-end code; A first adjustment module is configured to receive an adjustment request for the first intermediate code, and generate a second intermediate code and an adjustment description based on the adjustment request, wherein the adjustment description is used to describe the adjustment operation on the first intermediate code; The second adjustment module is used to adjust the front-end code based on the second intermediate code and the adjustment description to obtain the adjusted interface.

[0006] This document also provides an electronic device comprising: a processor; a memory for storing executable instructions of the processor; the processor being configured to read the executable instructions from the memory and execute the executable instructions to implement the interface adjustment method provided herein.

[0007] This document also provides a computer-readable storage medium storing a computer program for performing the interface adjustment method provided herein.

[0008] The technical solution provided in this paper has the following advantages compared with existing technologies: The interface adjustment scheme provided in this paper obtains the front-end code; extracts the first intermediate code from the front-end code, wherein the first intermediate code is associated with the interface implemented by the front-end code; receives the adjustment request for the first intermediate code, generates the second intermediate code and the adjustment description based on the adjustment request, wherein the adjustment description is used to describe the adjustment operation of the first intermediate code; and adjusts the front-end code based on the second intermediate code and the adjustment description to obtain the adjusted interface. By extracting the intermediate code associated with the interface display from the front-end code, receiving the adjustment request from the design user for the intermediate code, generating the adjusted intermediate code and the adjustment description, and then adjusting the front-end code and the interface, the technical solution introduces the interface display-associated intermediate code as a bridging layer between the design user and the front-end. The design user can directly adjust the interface design by adjusting the intermediate code, and quickly map the adjusted intermediate code back to the front-end code, migrating the adjustment changes to the interface. This not only reduces the cost of interface adjustment but also improves the accuracy of the adjustment. Attached Figure Description

[0009] The above and other features, advantages, and aspects of the embodiments herein will become more apparent when taken in conjunction with the accompanying drawings and the following detailed description. Throughout the drawings, the same or similar reference numerals denote the same or similar elements. It should be understood that the drawings are schematic, and the originals and elements are not necessarily drawn to scale.

[0010] Figure 1 This is a schematic diagram of an interactive scenario provided in this article; Figure 2 A flowchart illustrating one interface adjustment method provided in this article; Figure 3 A flowchart illustrating another interface adjustment method provided in this article; Figure 4 This is a schematic diagram illustrating an interface adjustment process provided for this article; Figure 5 This paper provides a schematic diagram of the structure of an interface adjustment device. Figure 6 This is a schematic diagram of the structure of an electronic device provided in this article. Detailed Implementation

[0011] The present document will now be described in more detail with reference to the accompanying drawings. While some embodiments of the present document are shown in the drawings, it should be understood that the present document can be implemented in various forms and should not be construed as limited to the embodiments set forth herein; rather, these embodiments are provided to provide a more thorough and complete understanding of the document. It should be understood that the accompanying drawings and embodiments are for illustrative purposes only and are not intended to limit the scope of this document.

[0012] It should be understood that the steps described in the method embodiments herein may be performed in different orders and / or in parallel. Furthermore, the method embodiments may include additional steps and / or omit the steps shown. The scope of this document is not limited in this respect.

[0013] The term "comprising" and its variations as used herein are open-ended inclusions, meaning "including but not limited to". The term "based on" means "at least partially based on". The term "one embodiment" means "at least one embodiment"; the term "another embodiment" means "at least one additional embodiment"; the term "some embodiments" means "at least some embodiments". Definitions of other terms will be given in the description below.

[0014] It should be noted that the concepts of "first" and "second" mentioned in this article are only used to distinguish different devices, modules or units, and are not used to limit the order of the functions performed by these devices, modules or units or their interdependencies.

[0015] It should be noted that the terms "one" and "more" used in this document are illustrative rather than restrictive, and those skilled in the art should understand that, unless otherwise expressly indicated in the context, they should be understood as "one or more".

[0016] The names of messages or information exchanged between multiple devices in the embodiments herein are for illustrative purposes only and are not intended to limit the scope of these messages or information.

[0017] Users can express their design intent through design files, and developers need to migrate these design intents to the online interface. One approach to interface design adjustments is manual design implementation, where developers manually implement the user interface, interactions, and animations based on user feedback, followed by user review. However, this approach has several drawbacks: it relies on developers' manual understanding of design intent; complex interactions and animation parameters are easily overlooked; boundary states such as hovering and activation are easily incompletely recreated; multiple rounds of design reviews and rework are required; and in large-scale existing projects, developers must also consider component systems, design units, state management, rendering logic, and historical code constraints. Another approach is to use tools to convert design files into code, but this approach has the following drawbacks: it is more suitable for generating independent or static interfaces, and dynamic interfaces may have issues; insufficient understanding of the component structure, business states, design units, directory structure, and project constraints of existing online projects leads to inaccuracies; the generated code often cannot be directly merged into the main project; and it has limited ability to express dynamic interactions, complex states, and rendering engine-related experiences. In summary, related technologies for interface adjustments suffer from high costs and low accuracy.

[0018] To address the aforementioned issues, this paper presents a method for interface adjustment, which will be described below with reference to specific embodiments.

[0019] For example, Figure 1 This article provides a schematic diagram of an interactive scenario, such as... Figure 1 As shown, the interface adjustment method is applied to an interface adjustment platform, which is set in the electronic device 101 in the figure. The electronic device 101 obtains the front-end code, extracts the first intermediate code associated with the interface from the front-end code, receives the adjustment request for the first intermediate code, generates the second intermediate code and the adjustment description, and adjusts the front-end code based on the second intermediate code and the adjustment description to obtain the adjusted interface. Users can perform interactive operations on the electronic device 101. The arrows on the electronic device 101 indicate the interactive operations triggered by the user. The users in this article can include design users, R&D users, etc., and are not limited to any specific user.

[0020] Figure 2 This is a flowchart illustrating an interface adjustment method provided in this paper. This method can be executed by an interface adjustment device, which can be implemented in software and / or hardware, and is generally integrated into an electronic device. Figure 2 As shown, the method includes: Step 201: Obtain the front-end code.

[0021] Front-end code can be code that has already been deployed and requires design adjustments to its interface, or it can be specific code that the front-end is currently supporting for users. Front-end code can include application code, web-side code, and online project code for web pages, etc. It can include design-related code as well as design-independent code.

[0022] Step 202: Extract the first intermediate code from the front-end code, where the first intermediate code is associated with the interface implemented by the front-end code.

[0023] The first intermediate code can be derived from the front-end code by extracting content relevant to the interface display. In other words, the first intermediate code is design-related, removing irrelevant content such as API requests, event tracking logic, permission logic, business status, and other engineering code unrelated to the design. The first intermediate code can be viewed as a dehydrated prototype extracted from the deployed front-end code, used to bridge the design file and the front-end code; one side connects to the design file, and the other side connects to the front-end code. The interface implemented by the front-end code can be the interface controlled and presented by the front-end code; it can be understood as a visual interface of the front-end code's execution results.

[0024] After acquiring the front-end code, the interface adjustment device can use tools to scan and analyze the front-end code, extract the code related to the interface, and use it as the first intermediate code.

[0025] In some cases, extracting the first intermediate code from the front-end code may include: inputting the front-end code into a first model and outputting the first intermediate code, wherein the first intermediate code includes multiple first units, and the first unit includes attribute information of interface elements displayed on the interface. Optionally, the attribute information may include at least one of structural information, index information, style information, and interaction entry information.

[0026] The first model can be a model that analyzes and extracts code associated with the interface from the front-end code. This first model can be obtained through pre-training, and its specific type is not limited. The first unit can be the smallest data unit of the first intermediate code. The first intermediate code can construct the content in the interface into a tree structure according to the hierarchical relationship, and the first unit can be a node. The first unit can include attribute information for an interface element. The interface element can be a component, module, icon, text, etc. displayed on the interface. The structural information can be information that reflects the position, branch, and hierarchical relationship between the corresponding node of the interface element in the corresponding tree structure of the interface and other nodes. A node including another node indicates that there is a hierarchical relationship between the two nodes. The index information can be information used to locate the interface element. It can be information that uniquely represents the interface element. For example, the class name of the interface element in the block-level element tag can be used as the index information, or the file directory can be used as the index information, and other index information can also be set. Style information can be information that controls the visual effects of interface elements in the interface. Style information can include size, position, font, layout, color, size, etc. Interaction entry information can be information that describes the corresponding operation, information acquisition, or specific function implementation when the interface element is triggered. It can include the interaction chain after the interface element is triggered. The interaction chain includes at least three operation records that start from the interface element.

[0027] When the interface adjustment device extracts the first intermediate code from the front-end code, it can input the front-end code into the first model, scan the entire front-end code through the first model, extract all the code related to the interface design, and obtain the first intermediate code. The first intermediate code can completely describe the content related to the interface and design, and can support the design user to edit and adjust it.

[0028] In one scenario, the interface adjustment method may further include: comparing the front-end code and the first intermediate code using a first model to obtain a comparison result; and modifying the first intermediate code based on the comparison result. In another scenario, the interface adjustment method may further include: validating the first intermediate code to obtain a validation result; and modifying the first intermediate code based on the validation result.

[0029] After obtaining the first intermediate code, the interface adjustment device can input the first intermediate code and the front-end code into a first model. The first model then compares the visual interfaces of the front-end code and the first intermediate code to determine if they are consistent. For example, it can determine if button styles, interface layouts, etc., are consistent, extracting any inconsistencies and modifying the first intermediate code accordingly until the comparison results between the front-end code and the first intermediate code are consistent. By comparing the extracted intermediate code with the front-end code through the model and modifying the intermediate code based on the comparison results, more accurate intermediate code extraction can be achieved.

[0030] After obtaining or modifying the first intermediate code, the interface adjustment device can verify it. Specifically, it can verify the interaction links of the interactive elements in the first intermediate code using the aforementioned first model. This verifies whether the interaction links are identical to the front-end code, extracts the interactive elements with different interaction links, and modifies the first intermediate code until the verification of the first intermediate code passes. The verified interactive elements may include some or all of the newly developed elements, depending on the actual situation. For example, it might verify whether a transition animation is displayed after triggering a button. By verifying the interaction links of the intermediate code and modifying the intermediate code based on the verification results, the accuracy of the intermediate code is further improved.

[0031] Intermediate code can be regarded as a low-cost reconstruction of any front-end interface. It can be used for multiple scenarios such as interface adjustment, interface regression, and offline testing, and has a wide range of applications. This paper extracts intermediate code with better reconstruction effect through the above embodiments. It supports a wide range of applications, including interfaces with document object number structure, mixed scenarios, etc. It also supports responsive adaptation under multi-device pixel ratio (DPR) and runtime scene restoration, with a high restoration depth.

[0032] In some cases, the interface adjustment method may also include: establishing association data between the front-end code and the first intermediate code based on the index information of the interface elements, wherein the front-end code includes multiple second units, and the association data represents the correspondence between the first unit and the second unit.

[0033] The association data can be the correspondence between the first intermediate code and the front-end code, which can be established through the index information of interface elements. The second unit can be the smallest data unit of the front-end code, which, compared to the first unit, includes additional code unrelated to the interface display. After step 202 above, the interface adjustment device can establish the association data between the front-end code and the first intermediate code. Specifically, it can be established based on the index information of interface elements, identifying the first and second units with the same index information as having a set of relationship data, thereby obtaining multiple sets of relationship data, which are then combined to obtain the association data. The format of this association data is not limited; for example, it can be stored in key-value pairs. In the above scheme, after extracting and generating design-related intermediate code from the front-end code, the association data between the front-end code and the intermediate code can be established, preparing for the migration after subsequent design adjustments.

[0034] Step 203: Receive an adjustment request for the first intermediate code, and generate a second intermediate code and an adjustment description based on the adjustment request, wherein the adjustment description is used to describe the adjustment operation on the first intermediate code.

[0035] An adjustment request can be a design user's request to make design-level adjustments to the interface implemented in the front-end code. This could include adjustments to the interface layout, colors, size, spacing, display styles, hover and active states, expand and collapse interaction methods, animation duration, and easing curves. The second intermediate code is the code obtained after adjusting the first intermediate code; it reflects the design user's intentions. The adjustment description records information about each adjustment detail during the adjustment process of the first intermediate code. It can include all adjustment records, such as changes to the structure, style, interaction logic, state, and animation parameters.

[0036] In some cases, generating second intermediate code and adjustment description based on adjustment requests may include: in response to an adjustment request that includes a design adjustment document, converting the design adjustment document into second intermediate code and adjustment description via a third model.

[0037] Design adjustment files can be files obtained by making design adjustments based on the initial design files of the front-end code. Design adjustment files can include design drafts, demonstration examples, design prototypes, and reference interfaces generated from the model, etc., with no specific limitations. The third model can be used to translate design files into intermediate code and generate corresponding adjustment descriptions. It can convert design adjustment files into corresponding second intermediate code and generate adjustment descriptions that have been adjusted relative to the initial design files.

[0038] After obtaining the first intermediate code, the interface adjustment device can receive adjustment requests from the design user. If the adjustment request includes a design adjustment file, it indicates that the design user has made adjustments based on the initial design file and sent the adjustment file. This adjustment file can be input into the third model, which analyzes and converts it into the corresponding second intermediate code and adjustment description. By supporting the conversion of the user-adjusted design adjustment file to obtain the adjusted intermediate code and adjustment description, the design adjustment process has low requirements for the design user, reducing the learning cost.

[0039] In other cases, generating a second intermediate code and an adjustment description based on an adjustment request may include: in response to an adjustment statement included in the adjustment request, inputting the adjustment statement into a fourth model, adjusting the first intermediate code through the fourth model, and generating the second intermediate code and the adjustment description.

[0040] The adjustment statements can be design-level adjustment requirements for the first intermediate code, expressed in natural language. Multiple adjustment statements can be used, corresponding to multi-turn dialogues to adjust the first intermediate code. The fourth model can be a model that supports adjustments to the first intermediate code using natural language; it can be the same as or different from the third model mentioned above. After obtaining the first intermediate code, the interface adjustment device can receive adjustment requests from the design user. When the adjustment request includes adjustment statements, these statements can be input into the fourth model. The fourth model then adjusts the first intermediate code according to the adjustment statements, recording each adjustment operation during the process. Finally, the adjusted second intermediate code is output, and the records of multiple adjustment operations are combined and summarized to generate an adjustment description. By supporting the adjustment of intermediate code using natural language input from the design user and outputting adjustment descriptions, the design user can quickly adjust the intermediate code, improving adjustment efficiency and reducing manual costs.

[0041] Step 204: Based on the second intermediate code and the adjustment description, adjust the front-end code to obtain the adjusted interface.

[0042] After obtaining the second intermediate code and the adjustment description, the interface adjustment device can establish a mapping relationship between the second intermediate code and the front-end code based on the correspondence between the first intermediate code and the front-end code. It then adjusts the mapped units in the front-end code based on the adjustment description, thereby adjusting the interface implemented by the front-end code. By introducing an adjustment description that records incremental adjustments in detail, the adjustment boundaries can be determined very accurately when adjusting the front-end code, thus improving the accuracy of the transition from design adjustments to interface adjustments.

[0043] For example, Figure 3 A flowchart illustrating another interface adjustment method provided in this article is shown below. Figure 3As shown, based on the second intermediate code and the adjustment description, the front-end code can be adjusted, which may include: Step 301: Using the second model, determine the first adjustment unit corresponding to the adjustment description in the second intermediate code.

[0044] The second model can be a model that migrates design adjustments to the program interface based on intermediate code. The second model can be regarded as a user-side usage model for developers. After design adjustments, the adjusted intermediate code and adjustment descriptions are analyzed to implement adjustments to the front-end code. The first adjustment unit can be the unit corresponding to the adjustment description among the multiple third units included in the second intermediate code. The third unit can be the smallest data unit of the second intermediate code. Compared with the first unit, some attribute information of the third unit has been adjusted.

[0045] The interface adjustment device can input the second intermediate code and adjustment description into the second model, and extract the third unit corresponding to the adjustment description from the second intermediate code through the second model as the first adjustment unit. The number of the first adjustment units can be one or more.

[0046] Step 302: Based on the association data between the front-end code and the first intermediate code, determine the second adjustment unit mapped by the first adjustment unit in the front-end code.

[0047] The second adjustment unit can be a specific unit that maps the adjusted unit in the intermediate code to the front-end code. Optionally, the second adjustment unit corresponds to the index information of the same interface element as the first adjustment unit. That is, the index information of the same interface element is the same in the intermediate code and the front-end code. The index information can be used to map the adjusted part to the front-end code, preparing for the adjustment migration.

[0048] The interface adjustment device can obtain the association data between the front-end code and the first intermediate code created above, query the relationship data corresponding to the first adjustment unit in the association data, and determine the second unit of the front-end code in the relationship data as the second adjustment unit mapped to the first adjustment unit.

[0049] Optionally, when there is no associated data, the interface adjustment device can extract the index information of the interface element corresponding to the first adjustment unit, and search for the corresponding second unit in the front-end code based on the index information, as the second adjustment unit mapped to the first adjustment unit.

[0050] For example, mapping the first adjustment unit to the second adjustment unit may include: mapping structural information to the structural information of the front-end code, mapping style information to the style information of the front-end code, and mapping interaction information to the event handling logic of the front-end code, etc.

[0051] Step 303: Adjust the second adjustment unit based on the adjustment description to adjust the interface.

[0052] After determining the second adjustment unit, the interface adjustment device can adjust the second adjustment unit according to the adjustment record of the second adjustment unit in the adjustment description to obtain the adjusted front-end code, and then adjust the interface implementation implemented by the front-end code.

[0053] In the above solution, the adjusted intermediate code can be mapped to the front-end code based on the previously established relationship data or index information. The front-end code can then be adjusted in conjunction with the adjustment description to realize the interface adjustment, thus quickly migrating the design changes to the online program interface.

[0054] This paper presents a solution for interface adjustment, which involves: acquiring the front-end code; extracting first intermediate code from the front-end code, where the first intermediate code is associated with the interface implemented by the front-end code; receiving adjustment requests for the first intermediate code; generating second intermediate code and an adjustment description based on the adjustment requests, where the adjustment description describes the adjustment operation on the first intermediate code; and adjusting the front-end code based on the second intermediate code and the adjustment description to obtain the adjusted interface. By extracting intermediate code associated with the interface display from the front-end code, receiving adjustment requests from the design user for this intermediate code, generating adjusted intermediate code and an adjustment description, and then adjusting the front-end code and the interface, this solution introduces the interface-display-associated intermediate code as a bridging layer between the design user and the front-end. The design user can directly adjust the interface design by adjusting this intermediate code, and the adjusted intermediate code can be quickly mapped back to the front-end code, migrating the changes to the interface. This not only reduces the cost of interface adjustment but also improves the accuracy of the adjustment.

[0055] Optionally, after step 204 above, the interface adjustment method may further include: verifying the adjusted interface to obtain verification results, and adjusting the second intermediate code based on the verification results. Specific verification methods can be implemented through models or manually. Verification content may include: whether the user interface is consistent with the second intermediate code, whether the interactive state is complete, whether the animation effects are consistent, whether the changes are correct, and whether irrelevant changes have been introduced, etc. Verification content can be added or modified according to the actual situation. By verifying the adjusted interface, it is ensured that the interface adjustment meets the actual adjustment needs of the design user, further improving the accuracy of the interface adjustment.

[0056] For example, Figure 4 This article provides a schematic diagram of an interface adjustment process, such as... Figure 4 As shown in the diagram, intermediate code is used as a bridging layer to convert the design intent in the design file into a mappable intermediate expression, which is then migrated to the front-end code.

[0057] By introducing intermediate code as a bridging layer between the design files and the online front-end code, the front-end code is not directly adjusted from the design files, nor is the model required to understand the complete front-end code. The intermediate code can both carry the design intent of the user and translate that intent into the online front-end code, enabling efficient interface adjustments. This paper solves the following problems: the inability to directly reuse design files due to inconsistencies in the online program structure; the difficulty in accurately translating adjustments in the design files into the online program interface; the need for manual judgment of the corresponding modules in the online program for design changes; and the easy loss or inconsistency in the restoration of design intent during migration. This article covers intermediate code construction and adjustment / migration. Intermediate code construction involves retaining the structure, styles, interactions, and states related to design restoration from the online front-end code, while removing irrelevant content such as interfaces, tracking points, permissions, and complex business logic, forming a lighter, editable, and model-understandable intermediate representation. Adjustment / migration involves incrementally migrating design changes from the intermediate code back to the online program. Specifically, it involves identifying changes in structure, styles, interactions, and states in the adjusted intermediate code, establishing a mapping relationship between the adjusted intermediate code and the online front-end code, locating the online components, files, styles, and states to be adjusted based on the mapping relationship, and writing the design changes back to the corresponding online interface modules to achieve interface adjustments.

[0058] Figure 5 This is a schematic diagram of an interface adjustment device provided in this paper. This device can be implemented by software and / or hardware and is generally integrated into electronic devices. Figure 5 As shown, the device includes: Module 501 is used to retrieve front-end code; Extraction module 502 is used to extract the first intermediate code in the front-end code, wherein the first intermediate code is associated with the interface implemented by the front-end code; The first adjustment module 503 is configured to receive an adjustment request for the first intermediate code, and generate a second intermediate code and an adjustment description based on the adjustment request, wherein the adjustment description is used to describe the adjustment operation on the first intermediate code; The second adjustment module 504 is used to adjust the front-end code based on the second intermediate code and the adjustment description to obtain the adjusted interface.

[0059] Optionally, the extraction module 502 is used for: The front-end code is input into the first model, and the first intermediate code is output. The first intermediate code includes multiple first units, each of which includes attribute information of an interface element, which is displayed on the interface.

[0060] Optionally, the attribute information includes at least one of structure information, index information, style information, and interaction entry information.

[0061] Optionally, the device further includes a relationship module, which is used for: Based on the index information of the interface elements, an association data is established between the front-end code and the first intermediate code, wherein the front-end code includes multiple second units, and the association data represents the correspondence between the first unit and the second unit.

[0062] Optionally, the device further includes a comparison module, the comparison module being used for: By comparing the front-end code and the first intermediate code using the first model, a comparison result is obtained; Based on the comparison results, the first intermediate code is modified.

[0063] Optionally, the device further includes a verification module, the verification module being used for: The first intermediate code is validated to obtain the validation result; Based on the verification results, the first intermediate code is modified.

[0064] Optionally, the second adjustment module 504 is used for: The first adjustment unit corresponding to the adjustment description in the second intermediate code is determined using the second model; Based on the association data between the front-end code and the first intermediate code, a second adjustment unit mapped by the first adjustment unit is determined in the front-end code; The second adjustment unit is adjusted based on the adjustment description to adjust the interface.

[0065] Optionally, the second adjustment unit corresponds to the index information of the same interface element as the first adjustment unit.

[0066] Optionally, the first adjustment module 503 is used for: In response to the adjustment request including a design adjustment document, the design adjustment document is converted into the second intermediate code and the adjustment description via a third model.

[0067] Optionally, the first adjustment module 503 is used for: In response to the adjustment request including an adjustment statement, the adjustment statement is input into the fourth model, and the first intermediate code is adjusted through the fourth model to generate the second intermediate code and the adjustment description.

[0068] The interface adjustment device provided herein can execute the interface adjustment method provided in any embodiment of this document, and has the corresponding functional modules and beneficial effects of the method.

[0069] This document also provides a computer program product for implementing the interface adjustment method provided in any embodiment of this document, and has the same beneficial effects as the implementation method embodiment.

[0070] Figure 6 This document provides a schematic diagram of the structure of an electronic device. The document also provides an electronic device comprising: a processor; a memory for storing processor-executable instructions; and a processor for reading executable instructions from the memory and executing the executable instructions to implement the interface adjustment method provided in any embodiment of this document, achieving the same beneficial effects as the implementation method embodiments.

[0071] The following is a detailed reference. Figure 6 This diagram illustrates a suitable structural schematic for implementing the electronic device 600 described herein. The electronic device 600 described herein may include, but is not limited to, mobile terminals such as mobile phones, laptops, digital radio receivers, personal digital assistants (PDAs), tablet computers (PADs), portable media players (PMPs), in-vehicle terminals (e.g., in-vehicle navigation terminals), and fixed terminals such as digital televisions (TVs), desktop computers, etc. Figure 6 The electronic device shown is merely an example and should not impose any limitations on the functionality and scope of this article.

[0072] like Figure 6 As shown, electronic device 600 may include processing unit 601 (e.g., central processing unit, graphics processor, etc.), which can perform various appropriate actions and processes according to programs stored in read-only memory (ROM) 602 or programs loaded from storage device 608 into random access memory (RAM) 603. RAM 603 also stores various programs and data required for the operation of electronic device 600. Processing unit 601, ROM 602, and RAM 603 are interconnected via bus 604. Input / output (I / O) interface 605 is also connected to bus 604.

[0073] Typically, the following devices can be connected to I / O interface 605: input devices 606 including, for example, touchscreens, touchpads, keyboards, mice, cameras, microphones, accelerometers, gyroscopes, etc.; output devices 607 including, for example, liquid crystal displays (LCDs), speakers, vibrators, etc.; storage devices 608 including, for example, magnetic tapes, hard disks, etc.; and communication devices 609. Communication device 609 allows electronic device 600 to communicate wirelessly or wiredly with other devices to exchange data. Although Figure 6 An electronic device 600 with various devices is shown; however, it should be understood that it is not required to implement or possess all of the devices shown. More or fewer devices may be implemented or possessed alternatively.

[0074] In particular, according to this document, the processes described in the above-referenced flowchart can be implemented as computer software programs. For example, this document includes a computer program product comprising a computer program carried on a non-transitory computer-readable medium, the computer program containing program code for performing the methods shown in the flowchart. In such embodiments, the computer program can be downloaded and installed from a network via communication device 609, or installed from storage device 608, or installed from ROM 602. When the computer program is executed by processing device 601, it performs the functions defined in the interface adjustment method described herein.

[0075] It should be noted that the computer-readable medium mentioned above can be a computer-readable signal medium or a computer-readable storage medium, or any combination thereof. A computer-readable storage medium can be, for example,—but not limited to—an electrical, magnetic, optical, electromagnetic, infrared, or semiconductor system, apparatus, or device, or any combination thereof. More specific examples of a computer-readable storage medium may include, but are not limited to: an electrical connection having one or more wires, a portable computer disk, a hard disk, a random access memory, a read-only memory, an electrically erasable programmable read-only memory (EPROM), an optical fiber, a portable compact disc read-only memory (CD-ROM), an optical storage device, a magnetic storage device, or any suitable combination thereof. In this document, a computer-readable storage medium can be any tangible medium containing or storing a program that can be used by or in connection with an instruction execution system, apparatus, or device. In this document, a computer-readable signal medium can include a data signal propagated in baseband or as part of a carrier wave, carrying computer-readable program code. Such propagated data signals can take various forms, including, but not limited to, electromagnetic signals, optical signals, or any suitable combination thereof. A computer-readable signal medium may be any computer-readable medium other than a computer-readable storage medium, which can send, propagate, or transmit a program for use by or in connection with an instruction execution system, apparatus, or device. The program code contained on the computer-readable medium can be transmitted using any suitable medium, including but not limited to: wires, optical fibers, radio frequency (RF), etc., or any suitable combination thereof.

[0076] In some implementations, clients and servers can communicate using any currently known or future-developed network protocol, such as Hypertext Transfer Protocol (HTTP), and can interconnect with digital data communication (e.g., communication networks) of any form or medium. Examples of communication networks include Local Area Networks (LANs), Wide Area Networks (WANs), the Internet (e.g., the Internet), and peer-to-peer networks (e.g., ad hoc peer-to-peer networks), as well as any currently known or future-developed networks.

[0077] The aforementioned computer-readable medium may be included in the aforementioned electronic device; or it may exist independently and not assembled into the electronic device.

[0078] The aforementioned computer-readable medium carries one or more programs. When the one or more programs are executed by the electronic device, the electronic device causes the following: it acquires front-end code; extracts first intermediate code from the front-end code, wherein the first intermediate code is associated with an interface implemented by the front-end code; receives an adjustment request for the first intermediate code; generates second intermediate code and an adjustment description based on the adjustment request, wherein the adjustment description describes the adjustment operation on the first intermediate code; and adjusts the front-end code based on the second intermediate code and the adjustment description to obtain the adjusted interface. The computer-readable storage medium implementing the interface adjustment method provided in any embodiment of this document has the same beneficial effects as the implementation method embodiments.

[0079] Computer program code for performing the operations described herein may be written in one or more programming languages ​​or a combination thereof, including but not limited to object-oriented programming languages ​​such as Java, Smalltalk, and C++, as well as conventional procedural programming languages ​​such as the "C" language or similar programming languages. The program code may execute entirely on the user's computer, partially on the user's computer, as a standalone software package, partially on the user's computer and partially on a remote computer, or entirely on a remote computer or server. In cases involving remote computers, the remote computer may be connected to the user's computer via any type of network—including local area networks (LANs) or wide area networks (WANs), or it may be connected to an external computer (e.g., via the Internet using an Internet service provider).

[0080] The flowcharts and block diagrams in the accompanying drawings illustrate the architecture, functionality, and operation of possible implementations of systems, methods, and computer program products according to various embodiments herein. 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 the specified logical function. It should also be noted that in some alternative implementations, the functions indicated in the blocks may occur in a different order than those indicated in the drawings. For example, two consecutively indicated 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 the block diagrams and / or flowcharts, and combinations of blocks in the block diagrams and / or flowcharts, may be implemented using a dedicated hardware-based system that performs the specified function or operation, or using a combination of dedicated hardware and computer instructions.

[0081] The units described herein can be implemented in software or hardware. The names of the units are not, in some cases, limiting to the unit itself.

[0082] The functions described above in this document can be performed at least in part by one or more hardware logic components. For example, exemplary types of hardware logic components that can be used, without limitation, include: Field-Programmable Gate Array (FPGA), Application Specific Integrated Circuit (ASIC), Application Specific Standard Parts (ASSP), System on Chip (SOC), Complex Programmable Logic Device (CPLD), and so on.

[0083] In the context of this document, a machine-readable medium can be a tangible medium that may contain or store a program for use by or in conjunction with an instruction execution system, apparatus, or device. A machine-readable medium can be a machine-readable signal medium or a machine-readable storage medium. A machine-readable medium can be, but is not limited to, electronic, magnetic, optical, electromagnetic, infrared, or semiconductor systems, apparatus, or devices, or any suitable combination of the foregoing. More specific examples of machine-readable storage media include electrical connections based on one or more wires, portable computer disks, hard disks, random access memory, read-only memory, erasable programmable read-only memory, flash memory, optical fiber, portable compact disk read-only memory, optical storage devices, magnetic storage devices, or any suitable combination of the foregoing.

[0084] It is understood that before using the technical solutions disclosed in the embodiments of this article, users should be informed of the type, scope of use, and usage scenarios of the information involved in this article in an appropriate manner in accordance with relevant laws and regulations, and user authorization should be obtained.

[0085] The above description is merely a preferred embodiment and an explanation of the technical principles employed. Those skilled in the art should understand that the scope of disclosure herein is not limited to technical solutions formed by specific combinations of the above-described technical features, but should also cover other technical solutions formed by arbitrary combinations of the above-described technical features or their equivalents without departing from the above-disclosed concept. For example, technical solutions formed by substituting the above features with (but not limited to) technical features disclosed herein that have similar functions.

[0086] Furthermore, while the operations are described in a specific order, this should not be construed as requiring these operations to be performed in the specific order shown or in sequential order. Multitasking and parallel processing may be advantageous in certain environments. Similarly, while several specific implementation details are included in the above discussion, these should not be construed as limiting the scope of this document. Certain features described in the context of a single embodiment may also be implemented in combination in a single embodiment. Conversely, various features described in the context of a single embodiment may also be implemented individually or in any suitable sub-combination in multiple embodiments.

[0087] Although the subject matter has been described using language specific to structural features and / or methodological logic, it should be understood that the subject matter defined in the appended claims is not necessarily limited to the specific features or actions described above. Rather, the specific features and actions described above are merely illustrative examples of implementing the claims.

Claims

1. A method for adjusting an interface, comprising: Get the front-end code; Extract the first intermediate code from the front-end code, wherein the first intermediate code is associated with the interface implemented by the front-end code; Receive an adjustment request for the first intermediate code, generate a second intermediate code and an adjustment description based on the adjustment request, wherein the adjustment description is used to describe the adjustment operation on the first intermediate code; Based on the second intermediate code and the adjustment description, the front-end code is adjusted to obtain the adjusted interface.

2. The method according to claim 1, wherein extracting the first intermediate code from the front-end code includes: The front-end code is input into the first model, and the first intermediate code is output. The first intermediate code includes multiple first units, each of which includes attribute information of an interface element, which is displayed on the interface.

3. The method according to claim 2, wherein the attribute information includes at least one of structure information, index information, style information, and interaction entry information.

4. The method according to claim 3, further comprising: Based on the index information of the interface elements, an association data is established between the front-end code and the first intermediate code, wherein the front-end code includes multiple second units, and the association data represents the correspondence between the first unit and the second unit.

5. The method according to claim 2, further comprising: By comparing the front-end code and the first intermediate code using the first model, a comparison result is obtained; Based on the comparison results, the first intermediate code is modified.

6. The method according to claim 2 or 5, further comprising: The first intermediate code is validated to obtain the validation result; Based on the verification results, the first intermediate code is modified.

7. The method according to claim 1, wherein adjusting the front-end code based on the second intermediate code and the adjustment description includes: The first adjustment unit corresponding to the adjustment description in the second intermediate code is determined using the second model; Based on the association data between the front-end code and the first intermediate code, a second adjustment unit mapped by the first adjustment unit is determined in the front-end code; The second adjustment unit is adjusted based on the adjustment description to adjust the interface.

8. The method according to claim 7, wherein the second adjustment unit corresponds to the index information of the same interface element as the first adjustment unit.

9. The method according to claim 1, wherein generating a second intermediate code and an adjustment description based on the adjustment request comprises: In response to the adjustment request including a design adjustment document, the design adjustment document is converted into the second intermediate code and the adjustment description via a third model.

10. The method according to claim 1, wherein generating a second intermediate code and an adjustment description based on the adjustment request comprises: In response to the adjustment request including an adjustment statement, the adjustment statement is input into the fourth model, and the first intermediate code is adjusted through the fourth model to generate the second intermediate code and the adjustment description.

11. An interface adjustment device, comprising: The retrieval module is used to retrieve front-end code; An extraction module is used to extract first intermediate code from the front-end code, wherein the first intermediate code is associated with the interface implemented by the front-end code; A first adjustment module is configured to receive an adjustment request for the first intermediate code, and generate a second intermediate code and an adjustment description based on the adjustment request, wherein the adjustment description is used to describe the adjustment operation on the first intermediate code; The second adjustment module is used to adjust the front-end code based on the second intermediate code and the adjustment description to obtain the adjusted interface.

12. An electronic device, the electronic device comprising: processor; Memory used to store the processor's executable instructions; The processor is configured to read the executable instructions from the memory and execute the executable instructions to implement the interface adjustment method according to any one of claims 1-10.

13. A computer-readable storage medium storing a computer program for performing the interface adjustment method according to any one of claims 1-10.

Images