Method, apparatus, device, and medium for generating user interface

Abstract

Embodiments of the present disclosure disclose a method, apparatus, device, and medium for generating user interface (UI). The method comprising: obtaining an UI design image, an UI description document and a prompt chain of thought (COT); preprocessing the UI design image; generating an UI context based on the UI description document; generating UI engineering data by a multi-modal model based on the preprocessed UI design image, the UI context and the prompt chain of thought (COT); generating an UI based on the UI engineering data.

Description

Method, apparatus, device, and medium for generating user interfaceFIELD

[0001] The present disclosure relates to the technical field of industrial digitalization, in particular to a method, apparatus, device, and medium for generating user interface.BACKGROUND

[0002] User Interface (UI) , for example Human-Machine Interfaces (HMIs) , play a crucial role in industrial automation and control systems. These interfaces serve as the primary means of interaction between operators and complex machinery or processes. UI provide visual representations of system status, allow for control inputs, and display real-time data to facilitate efficient operation and monitoring of industrial equipment.

[0003] In recent years, the design and implementation of UI have evolved significantly. Traditional methods of UI creation often involve using specialized engineering software that requires manual configuration and programming. This approach typically demands a high level of expertise in both the specific software platform and the underlying industrial processes being controlled.

[0004] The process of designing and configuring UI using conventional methods can be time-consuming and resource intensive. Engineers often need to invest considerable effort in learning the intricacies of UI development tools, understanding the various components available, and manually placing and configuring each element of the interface. This manual approach can lead to inconsistencies in design and potential errors in implementation, especially when dealing with complex systems or large-scale projects.SUMMARY

[0005] Embodiments of the present disclosure propose a method, apparatus, device, and medium for generating user interface.

[0006] In a first aspect, there is provided a method for generating user interface (UI) , comprising:

[0007] obtaining an UI design image, an UI description document and a prompt chain of thought (COT) ;

[0008] preprocessing the UI design image;

[0009] generating an UI context based on the UI description document;

[0010] generating UI engineering data by a multi-modal model based on the preprocessed UI design image, the UI context and the prompt chain of thought (COT) ;

[0011] generating an UI based on the UI engineering data.

[0012] Therefore, the present disclosure provides a method for generating UI. By using a multi-modal model which is capable of processing text and images, users are allowed to input their UI designs as images and descriptions, rather than requiring extensive knowledge of specific UI engineering software. In this way, the threshold, time and effort of UI generation is reduced remarkably.

[0013] In an example, the method further comprising:

[0014] determining the prompt COT by preprocessing the UI design image.

[0015] Therefore, a more tailored and context-aware COT, could improve the efficiency and accuracy of the UI output.

[0016] In an example, wherein generating an UI context based on the UI description document comprising:

[0017] embedding the UI description document to obtain vector data;

[0018] storing the vector data into a vector database;

[0019] performing similarity search in the vector database to generate an UI context.

[0020] Therefore, the multi-modal model's understanding of the desired UI characteristics can be improved.

[0021] In an example, wherein preprocessing comprising at least one of the following:

[0022] segmentation, zoom in, zoom out, object detection, axis and grids addition and color transformation.

[0023] In an example, the method further comprising:

[0024] judging by the multi-modal model if the preprocessed UI design image meets requirements;

[0025] processing the preprocessed UI design image if the preprocessed UI design image does not meet requirements.

[0026] Therefore, the subsequent UI generation steps working with optimal input data can be ensured and the reliability and effectiveness of the UI generation can be improved.

[0027] In an example, the method further comprising:

[0028] receiving user’s modifications on the generated UI;

[0029] regenerating UI engineering data by the multi-modal model based on the user’s modifications, UI context and prompt COT;

[0030] updating UI based on the regenerated UI engineering data.

[0031] Therefore, by incorporating user feedback directly into the generation process, specific user preferences or requirements that may not have been captured in the initial inputs can be adapted, and the usability and user satisfaction of the generated UI can be enhanced.

[0032] In a second aspect, there is provided an apparatus for generating user interface (UI) , comprising:

[0033] an obtaining module, configured to obtain an UI design image, an UI description document and a prompt chain of thought (COT) ;

[0034] preprocessing module, configured to preprocess the UI design image;

[0035] a first generating module, configured to generate an UI context based on the UI description document;

[0036] a second generating module, configured to generate UI engineering data by a multi-modal model based on the preprocessed UI design image, the UI context and the prompt chain of thought (COT) ;

[0037] a third generating module, configured to generate an UI based on the UI engineering data.

[0038] In a third aspect, there is provided an electronic device comprising a processor and a memory, wherein an application program executable by the processor is stored in the memory for causing the processor to execute a method for identifying building block as described in any of the above.

[0039] In a fourth aspect, there is provided a computer-readable medium comprising computer-readable instructions stored thereon is provided, wherein the computer-readable instructions for executing a method for identifying building block as described in any of the above.

[0040] In a fifth aspect, there is provided a computer program product comprising a computer program, when the computer program is executed by a processor for executing a method for identifying building block as described in any of the above.BRIEF DESCRIPTION OF THE DRAWINGS

[0041] To make technical solutions of examples of the present disclosure clearer, accompanying drawings to be used in description of the examples will be simply introduced hereinafter. Obviously, the accompanying drawings to be described hereinafter are only some examples of the present disclosure. Those skilled in the art may obtain other drawings according to these accompanying drawings without creative labor.

[0042] Fig. 1 is an exemplary flowchart of a method for generating user interface according to an embodiment of the present disclosure.

[0043] Fig. 2 is an exemplary schematic diagram of an architecture for generating user interface according to an embodiment of the present disclosure.

[0044] Fig. 3 is an exemplary schematic diagram of COT and UI context for generating UI engineering data according to an embodiment of the present disclosure.

[0045] Fig. 4 is an exemplary schematic diagram of an apparatus for generating user interface according to an embodiment of the present disclosure.

[0046] Fig. 5 is an exemplary structural diagram of an electronic device according to an embodiment of the present disclosure.

[0047] List of reference numbers:

[0048] 100 method for generating user interface

[0049] 110-150 step

[0050] 20 architecture

[0051] 21 UI design image

[0052] 22 preprocessing unit

[0053] 23 preprocessed UI design image

[0054] 24 prompt COT

[0055] 25 UI context

[0056] 26 multi-modal model

[0057] 27 UI engineering data

[0058] 28 importing unit

[0059] 29 UI engineering software

[0060] 301-307 step

[0061] D1 UI description document

[0062] D2 vector data

[0063] D3 UI context

[0064] D4 UI engineering data

[0065] 400 apparatus for generating user interface

[0066] 410 obtaining module

[0067] 420 preprocessing module

[0068] 430 first generation module

[0069] 440 second generation module

[0070] 450 third generation module

[0071] 500 electronic device

[0072] 510 processor

[0073] 520 memoryDETAILED DESCRIPTION

[0074] To make the purpose, technical scheme, and advantages of the disclosure clearer, the following examples are given to further explain the disclosure in detail. Nouns and pronouns related to people in this patent application are not limited to specific gender.

[0075] To be concise and intuitive in description, the scheme of the disclosure is described below by describing several representative embodiments. Many details in the embodiments are only used to help understand the scheme of the disclosure. However, it is obvious that the technical scheme of the disclosure can be realized without being limited to these details. To avoid unnecessarily blurring the scheme of the disclosure, some embodiments are not described in detail, but only the framework is given. Hereinafter, "including" refers to "including but not limited to" , "according to. . . " refers to "at least according to. . ., but not limited to. . . " . When the number of an element is not specifically indicated below, it means that the element can be one or more, or can be understood as at least one.

[0076] The present disclosure provides a method for generating user interface (UI) . UI refers to visual and interactive elements through which a user interacts with a software application or electronic device. In the scenario of industrial automation and control systems, UI could be Human-Machine Interfaces (HMIs) . In this case, HMIs provide visual representations of system status, allow for control inputs, and display real-time data to facilitate efficient operation and monitoring of industrial equipment. Fig. 1 is an exemplary flowchart of a method 100 for generating user interface according to an embodiment of the present disclosure. As shown in Fig. 1, method 100 comprises:

[0077] step 110, obtaining an UI design image, an UI description document and a prompt chain of thought (COT) ;

[0078] UI design image refers to a visual representation of a proposed user interface layout. For example, UI design image could be sketches, wireframes or mockups. UI design image could be hand-drawn by designers or generated by software.

[0079] UI description document refers to a textual or structured document that provides detailed information about the desired functionality, components, and layout of a user interface. This document may include specifications for individual UI components, interaction behaviors, and design guidelines. The UI description document complements the UI design image by providing additional context.

[0080] Prompt chain of thought (COT) refers to a series of instructions or logical steps that guide the processing and interpretation of input data. In the context of this disclosure, the prompt COT helps direct the below multi-modal model in analyzing the UI design image and generating UI engineering data. The COT can be implemented as a software module installed on a server.

[0081] step 120, preprocessing the UI design image;

[0082] As a multi-modal model is not accurate to identify the positional information and dimensions of components, by preprocessing the UI design images (e.g. by overlaying them with horizontal and vertical coordinates and the corresponding grid) , the multi-modal model can accurately identify the position and dimensions of each component based on the grid and coordinate information. In some embodiments of the present disclosure, wherein preprocessing comprising at least one of the following: segmentation, zoom in, zoom out, object detection, axis and grids addition and color transformation.

[0083] step 130, generating an UI context based on the UI description document;

[0084] UI context refers to contextual information for the multi-modal model to understand know-how in UI domain and generate the desired information based on user requirements. For example, how many properties of each component? What does the format of UI engineering data look like?

[0085] step 140, generating UI engineering data by a multi-modal model based on the preprocessed UI design image, the UI context and the prompt chain of thought (COT) ;

[0086] Multi-modal model refers to a machine learning model capable of processing and integrating multiple types of input data, such as images and text. In this disclosure, the multi-modal model can analyze the UI design image, UI context, and prompt COT to generate UI engineering data. The multi-modal model can be a general multi-modal model which can process text and images.

[0087] For the multi-modal model, the input includes preprocessed UI design image, the UI context and the prompt chain of thought, and the outputs include UI engineering data.

[0088] UI engineering data refers to structured data that represents the components, layout, styling, and functional specifications of a user interface. This data is typically in a format that can be interpreted by UI engineering software to render an actual user interface. UI engineering data serves as an intermediate representation between the design concept and the final implemented UI.

[0089] step 150, generating an UI based on the UI engineering data.

[0090] This step transforms the abstract UI engineering data into a concrete, visual UI that can be presented to users.

[0091] Therefore, the present disclosure provides a method for generating UI. By using a multi-modal model which is capable of processing text and images, users are allowed to input their UI designs as images and descriptions, rather than requiring extensive knowledge of specific UI engineering software. In this way, the threshold, time and effort of UI generation is reduced remarkably.

[0092] In some embodiments of the present disclosure, the method further comprising: determining the prompt COT by preprocessing the UI design image. The preprocessing of the UI design image may involve using computer vision techniques to identify key UI elements, their relationships, and overall layout structure. Based on this analysis, a COT including a sequence of logical steps or considerations could be generated to guide the multi-modal model through the UI generation process. Therefore, a more tailored and context-aware COT, could improve the efficiency and accuracy of the UI output.

[0093] In some embodiments of the present disclosure, wherein generating an UI context based on the UI description document comprising: embedding the UI description document to obtain vector data; storing the vector data into a vector database; performing similarity search in the vector database to generate an UI context. HMI description document could include component and component properties such as color, size and event. Embedding refers to use natural language processing techniques to transform textual descriptions into high-dimensional vector data . By storing these vectors in a vector database, the system can efficiently perform similarity searches to identify relevant contextual information. Therefore, the multi-modal model's understanding of the desired UI characteristics can be improved.

[0094] Fig. 3 is an exemplary schematic diagram of COT and UI context for generating UI engineering data according to an embodiment of the present disclosure. As shown in Fig. 3, generation of prompt COT includes step 301-305.

[0095] At step 301, analyze the sections of a image;

[0096] At step 302, extract component type and number of each section;

[0097] At step 303, embed the UI description document D1 to obtain vector data D2, store the vector data into a vector database;

[0098] At step 304, perform similarity search in the vector database based on results of step 302 to generate an UI context;

[0099] At step 305, extract position, width and height of each component;

[0100] At step 306, extract all properties of each component based on context;

[0101] At step 307, generate UI engineering data D4.

[0102] In some embodiments of the present disclosure, the method further comprising: judging by the multi-modal model if the preprocessed UI design image meets requirements; processing the preprocessed UI design image if the preprocessed UI design image does not meet requirements. The multi-modal model may assess various aspects of the preprocessed image, such as resolution, clarity, color balance, or the presence of key UI elements. If the image falls short of predefined criteria, the model may invoke image processing tools to enhance the image quality or extract more information. Image processing tools can include functions such as segmentation, zoom in, zoom out, object detection, axis and grids addition and color transformation. Image processing tools can be integrated into higher level system. Therefore, the subsequent UI generation steps working with optimal input data can be ensured and the reliability and effectiveness of the UI generation can be improved.

[0103] In some embodiments of the present disclosure, the method further comprising: receiving user’s modifications on the generated UI; regenerating UI engineering data by the multi-modal model based on the user’s modifications, UI context and prompt COT; updating UI based on the regenerated UI engineering data. Users can view the generated UI effects on the engineering software. Meanwhile, users can take screenshots of the generated UI and send them back to the multi-modal model, along with corresponding modification suggestions. The multi-model model, based on the modification suggestions, UI Context, and COT, will then regenerate the modified UI engineering data. Users can add annotations (e.g., use the brush to highlight the areas of image that need to be modified. ) and suggestions to the image so that the multi-modal model can better understands the changes uses need to make. Therefore, by incorporating user feedback directly into the generation process, specific user preferences or requirements that may not have been captured in the initial inputs can be adapted, and the usability and user satisfaction of the generated UI can be enhanced.

[0104] Fig. 2 is an exemplary schematic diagram of an architecture 20 for generating user interface according to an embodiment of the present disclosure. As shown in Fig. 2, UI design image 21 is preprocessed by preprocessing unit 22 (adding grids and coordinates) . Preprocessing unit 22 outputs preprocessed UI design image 23 and the preprocessed UI design image 23 is sent to multi-modal model 26. Based on preprocessed UI design image 23, prompt COT 24 and UI context 25, multi-modal model 26 generates UI engineering data 27. Importing unit 28 imports UI engineering data 27 into UI engineering software 29. UI engineering software 29 generates UI based on the UI engineering data 27. Users can view the generated UI and propose modification suggestions. The modification suggestions will be sent to multi-modal model 26, and multi-modal model 26 will update UI based on the modification suggestions.

[0105] The present disclosure also provides an apparatus for generating user interface (UI) . Fig. 4 is an exemplary schematic diagram of an apparatus 400 for generating user interface according to an embodiment of the present disclosure. As shown in Fig. 4, apparatus 400 comprises:

[0106] an obtaining module 410, configured to obtain an UI design image, an UI description document and a prompt chain of thought (COT) ;

[0107] preprocessing module 420, configured to preprocess the UI design image;

[0108] a first generating module 430, configured to generate an UI context based on the UI description document;

[0109] a second generating module 440, configured to generate UI engineering data by a multi-modal model based on the preprocessed UI design image, the UI context and the prompt chain of thought (COT) ;

[0110] a third generating module 450, configured to generate an UI based on the UI engineering data.

[0111] Embodiments of the present disclosure also propose an electronic device with a processor memory architecture. Fig. 5 is an exemplary structural diagram of an electronic device according to an embodiment of the present disclosure. As shown in Figure 5, electronic device 500 includes a processor 510, a memory 520, and a computer program stored on memory 520 that can run on processor 510. When the computer program is executed by processor 510, the method for identifying building block as described in either of the above is implemented. Among them, memory 520 can be implemented as various storage media such as electrically erasable programmable read-only memory (EEPROM) , flash memory, programmable program read-only memory (PROM) , etc. Processor 510 can be implemented to include one or more central processors or one or more field programmable gate arrays, wherein the field programmable gate array integrates one or more central processor cores. Specifically, the central processing unit or core can be implemented as a CPU, MCU, DSP, and so on.

[0112] It should be noted that not all steps and modules in the above processes and structural diagrams are necessary, and some steps or modules can be ignored according to actual needs. The execution sequence of each step is not fixed and can be adjusted as needed. The division of each module is only for the convenience of describing the functional division used. In actual implementation, a module can be divided into multiple modules, and the functions of multiple modules can also be implemented by the same module. These modules can be in the same device or different devices.

[0113] The hardware modules in each implementation can be implemented mechanically or electronically. For example, a hardware module can include specially designed permanent circuits or logic devices (such as dedicated processors, such as FPGA or ASIC) to complete specific operations. Hardware modules can also include programmable logic devices or circuits temporarily configured by software (such as general-purpose processors or other programmable processors) for performing specific operations. As for the specific use of mechanical methods, either dedicated permanent circuits or temporarily configured circuits (such as software configuration) to implement hardware modules, it can be determined based on cost and time considerations.

[0114] The above is only a preferred embodiment of the present disclosure and is not intended to limit the scope of protection of the present disclosure. Any modifications, equivalent substitutions, improvements, etc. made within the spirit and principles of this disclosure shall be included within the scope of protection of this disclosure.

[0115] Independent of the grammatical term usage, individuals with male, female or other gender identities are included within the term.

Claims

1.A method (100) for generating user interface (UI) , comprising:obtaining (110) an UI design image, an UI description document and a prompt chain of thought (COT) ;preprocessing (100) the UI design image;generating (120) an UI context based on the UI description document;generating (130) UI engineering data by a multi-modal model based on the preprocessed UI design image, the UI context and the prompt chain of thought (COT) ;generating (140) an UI based on the UI engineering data.2.The method (150) according to claim 1, the method (100) further comprising:determining the prompt COT by preprocessing the UI design image.3.The method (100) according to claim 1 or 2, wherein generating an UI context based on the UI description document comprising:embedding the UI description document to obtain vector data;storing the vector data into a vector database;performing similarity search in the vector database to generate an UI context.4.The method (100) according to any one of claims 1-3, wherein preprocessing comprising at least one of the following:segmentation, zoom in, zoom out, object detection, axis and grids addition and color transformation.5.The method (100) according to any one claims 1-4, the method (100) further comprising:judging by the multi-modal model if the preprocessed UI design image meets requirements;processing the preprocessed UI design image if the preprocessed UI design image does not meet requirements.6.The method (100) according to any one claims 1-5, the method (100) further comprising:receiving user’s modifications on the generated UI;regenerating UI engineering data by the multi-modal model based on the user’s modifications, UI context and prompt COT;updating UI based on the regenerated UI engineering data.7.An apparatus (400) for generating user interface (UI) , comprising:an obtaining module (410) , configured to obtain an UI design image, an UI description document and a prompt chain of thought (COT) ;preprocessing module (420) , configured to preprocess the UI design image;a first generating module (430) , configured to generate an UI context based on the UI description document;a second generating module (440) , configured to generate UI engineering data by a multi-modal model based on the preprocessed UI design image, the UI context and the prompt chain of thought (COT) ;a third generating module (450) , configured to generate an UI based on the UI engineering data.8.An electronic device, comprising a processor (510) and a memory (520) , wherein an application program executable by the processor (510) is stored in the memory (520) for causing the processor (510) to execute a method for identifying building block according to any one of claims 1-6.9.A computer-readable medium comprising computer-readable instructions stored thereon, wherein the computer-readable instructions for executing a method for identifying building block according to any one of claims 1-6.10.A computer program product comprising a computer program, upon the computer program is executed by a processor for executing a method for identifying building block according to any one of claims 1-6.

Images