System and method for generative ai-based user interface code development

Abstract

The present invention relates to a source code development technology for constructing a user interface screen, and more specifically, to a generative AI-based user interface code generation device and method that generate source code suitable for a purpose, capable of configuring layouts for each area and linking front UI layouts with backend data, by configuring an optimal prompt chain through prompt orchestration for a designed application screen. According to one embodiment of the present invention, a designed UI screen is received as input, each object constituting the screen is recognized, and optimized source code is generated based thereon.

Description

Technology Field

[0001] The present invention relates to a source code development technology for constructing a user interface screen, and more specifically, to a generative AI-based user interface code generation device and method that generate source code suitable for a purpose, capable of configuring layouts for each area and linking front UI layouts with backend data, by configuring an optimal prompt chain through prompt orchestration for a designed application screen. Background Technology

[0003] With the recent advancement of generative AI models such as OpenAI's GPT and Google's Gemini, technologies that perform various tasks—including document summarization, code generation, and image creation—through natural language input are gaining prominence. These Large Language Models (LLMs) enable the instruction of even complex tasks using human language and are being utilized for automation tasks such as prototyping and the creation of simple applications.

[0004] In the traditional application development process, UI and layout code must be generated manually based on screen-based designs, and this process is repetitive, complex, and prone to errors. The problem to be solved

[0006] The present invention analyzes objects within a designed screen, divides them by region, and creates segmented prompts that generate source code corresponding to each region; and improves the response quality of the generative AI and prevents code omission by performing the removal of duplicates between prompts, order optimization, and entry point setting through a generative AI-based prompt orchestration engine that is pre-trained and specialized in application screen generation prompt orchestration.

[0007] The present invention analyzes a designed application screen using a pre-trained Generative AI specialized in screen code generation and automatically generates source code for screen development for the included objects.

[0008] The present invention provides an automated development environment that integrates front UI layout and backend data integration, so that UI screens created by designers are not limited to simple images or structural representations, but can also automatically generate actual application function code.

[0009] To overcome the limitations of existing technologies, such as context size restrictions or hallucination issues in generative AI, the present invention generates prompts by subdividing user requirements and orchestrates these prompts into an optimal chain to enable accurate code generation without omissions.

[0010] The technical problems that the present invention aims to solve are not limited to those mentioned above, and other unmentioned technical problems will be clearly understood by those skilled in the art to which the present invention belongs from the description below. means of solving the problem

[0012] According to one aspect of the present invention, a generative artificial intelligence-based user interface code generation device is provided.

[0013] A generative AI-based user interface code generation device according to one embodiment of the present invention may include an input unit that receives a designed application screen in image format, a screen layout unit that divides the designed application screen into image units and determines a programming area, a prompt unit that creates a prompt by subdividing it and orchestrates the prompts to form a prompt chain, a code unit that generates source code using a pre-trained generative AI-based application screen generation engine, and a file management unit that integrates the source code to generate a file and extracts image files for each screen unit.

[0014] According to another aspect of the present invention, a method for generating user interface code based on generative artificial intelligence and a computer program for executing the same are provided.

[0015] A method for generating user interface code based on generative artificial intelligence according to one embodiment of the present invention and a computer program for executing the same may include the steps of: classifying objects within a designed application screen based on absolute coordinates and extracting the screen area of ​​each object; calculating the number of extracted area information; performing layout optimization and converting to relative coordinates; generating application screen source code using a generative artificial intelligence-based application screen generation engine that has been separately trained for user interface development; inspecting the source code and performing optimization verification; integrating and optimizing all source codes; and generating the source code as a file and extracting an image file. Effects of the invention

[0017] According to one embodiment of the present invention, the application screen development process can be automated by receiving a designed UI screen as input, recognizing each object constituting the screen, and generating optimized source code based thereon.

[0018] In particular, prompt orchestration technology can improve the response quality of generative AI and prevent code omissions by subdividing processing flows at the prompt level and performing tasks such as eliminating duplicates, optimizing order, and setting entry points. This orchestration process aligns and integrates functional and layout-level prompts according to purpose, ensuring the logic and consistency of the overall source code structure.

[0019] Furthermore, according to one embodiment of the present invention, based on the understanding of screen composition by generative artificial intelligence, it is possible to generate source code that automatically reflects widget configurations, event handling structures, and data linkage processing suitable for each area. Accordingly, a developer can automatically obtain functional source code connected to the entire UI screen simply by providing the design screen, and in this process, optimized code is automatically generated through parallel evaluation and selection of a prompt chain based on performance scores.

[0020] The present invention can dramatically improve the efficiency and accuracy of application UI code development and provides an advanced automatic code generation base technology capable of responding to various device and framework environments in a customized manner.

[0021] The effects of the present invention are not limited to the effects described above, and should be understood to include all effects that can be inferred from the composition of the invention described in the description or claims of the present invention. Brief explanation of the drawing

[0023] FIG. 1 is an example drawing illustrating a concept to aid in understanding a generative artificial intelligence-based user interface code generation device according to an embodiment of the present invention. FIG. 2 is a block diagram briefly illustrating a generative artificial intelligence-based user interface code generation device according to one embodiment of the present invention. FIGS. 3 to 11 are drawings for explaining a generative artificial intelligence-based application screen generation device according to an embodiment of the present invention. FIGS. 12 and 13 are drawings illustrating a generative artificial intelligence-based user interface code generation method according to an embodiment of the present invention. FIG. 14 is a diagram illustrating a computing device implementing a generative artificial intelligence-based user interface code generation device according to an embodiment of the present invention. Specific details for implementing the invention

[0024] The present invention is susceptible to various modifications and may have various embodiments; specific embodiments are illustrated in the drawings and described in detail in the detailed description. However, this is not intended to limit the present invention to specific embodiments, and it should be understood that it includes all modifications, equivalents, and substitutions that fall within the spirit and scope of the invention. In describing the present invention, detailed descriptions of related prior art are omitted if it is determined that such detailed descriptions would unnecessarily obscure the essence of the invention. Furthermore, singular expressions used in this specification and claims should generally be interpreted as meaning "one or more" unless otherwise stated.

[0025] Throughout the specification, when it is stated that a part is "connected (connected, in contact, combined)" with another part, this includes not only cases where they are "directly connected," but also cases where they are "indirectly connected" with other members interposed between them. Furthermore, when it is stated that a part "includes" a certain component, this means that, unless specifically stated otherwise, it does not exclude other components but rather allows for the inclusion of additional components.

[0026] In this specification, "module" includes a unit composed of hardware, software, or firmware, and may be used interchangeably with terms such as logic, logic block, component, or circuit. A module may be a component formed as a whole, or a minimum unit or part thereof that performs one or more functions. For example, a module may be composed of an application-specific integrated circuit (ASIC).

[0027] Hereinafter, preferred embodiments of the present invention will be described in detail with reference to the accompanying drawings. In describing with reference to the accompanying drawings, identical or corresponding components are given the same reference numerals, and redundant descriptions thereof will be omitted.

[0029] The present invention analyzes a designed application screen using a generative artificial intelligence (Generative AI) specialized in screen code generation and automatically generates source code for screen development regarding the included objects.

[0030] The present invention analyzes objects of an application screen designed using prompt engineering techniques, divides areas, generates detailed prompts for generating source code for each area, and sequentially executes all stages of development, such as function definition, UI configuration, database design, API configuration, and source code generation, through optimal prompt chaining.

[0031] Furthermore, to overcome the limitations of generative AI, such as context size restrictions or hallucination problems, the present invention generates prompts by subdividing requirements and optimizes performance by creating an optimal prompt chain through prompt orchestration, thereby ensuring that objects on the designed application screen are not omitted.

[0033] FIG. 1 is an example drawing illustrating a concept to aid in understanding a generative artificial intelligence-based user interface code generation device according to one embodiment of the present invention.

[0034] Referring to FIG. 1, a generative AI-based user interface code generation device (10) receives a designed application screen in the form of an image file.

[0035] A generative AI-based user interface code generation device (10) analyzes a designed application screen image to subdivide the area and creates a prompt chain to generate source code for screen development.

[0036] The generative AI-based user interface code generation device (10) generates source code for screen development by executing commands of a prompt chain using a generative AI-based application screen generation engine.

[0037] The generative AI-based user interface code generation device (10) verifies the coded source and, if there are no errors, generates an integrated source file and extracts image files. The generative AI-based user interface code generation device (10) extracts image files for each region, integrates them with the code generated based on the prompt, and generates source code and image resources for the final screen unit.

[0039] FIG. 2 is a block diagram briefly illustrating a generative artificial intelligence-based user interface code generation device according to one embodiment of the present invention.

[0040] Referring to FIG. 2, a generative AI-based user interface code generation device (10) includes an input unit (100), a screen layout unit (200), a prompt unit (300), a code unit (400), and a file management unit (500).

[0041] The input unit (100) receives the designed application screen to be implemented in image format.

[0042] The screen layout unit (200) separates the designed application screens into image units and determines the programming area.

[0043] The screen layout unit (200) divides objects within the designed application screen into area units and configures the screen image as “source code” + “image” so that operation processing can be performed on the screen that is an image. The screen layout unit (200) will be explained in more detail below in FIG. 3.

[0044] The prompt unit (300) creates prompts by subdividing objects separated by area units, and constructs an optimal prompt chain to generate source code with optimal performance by orchestrating the subdivided prompts. The prompt unit (300) creates prompts according to the interface purpose of each area and transmits them to a generative AI-based application screen generation engine to generate source code corresponding to each area. The generative AI-based application screen generation engine generates source code that enables dynamic execution not only in areas processed according to user actions but also in accordance with data received through the server. The prompt unit (300) creates prompts by subdividing them and constructs an optimal prompt chain to generate source code with optimal performance by orchestrating the subdivided prompts. The prompt unit (300) will be described in more detail below in FIGS. 4 to 8.

[0045] The code section (400) generates source code that constitutes a UI screen using a generative AI-based application screen generation engine that has undergone separate training for UI screen development. The code section (400) will be described in more detail below in FIGS. 9 to 11.

[0046] The file management unit (500) integrates source code generated according to the function of each screen area to create a file, and extracts and organizes image files for each screen unit.

[0048] FIG. 3 is a diagram illustrating a screen layout section of a generative artificial intelligence-based user interface code generation device according to an embodiment of the present invention.

[0049] Referring to FIG. 3, the screen layout unit (200) includes an area subdivision unit (210), a layout optimization unit (220), and a relative coordinate processing unit (230).

[0050] The area subdivision unit (210) subdivides the area according to the role of the object to implement the designed application screen and extracts each area so that a prompt to generate source code for each area can be created. For example, the area subdivision unit (210) recognizes the coordinates of the designed screen into an icon area, an image area, a text image area, a text area, a horizontal scroll processing and server data linkage area, a sub-layout area within the layout (moves together when the upper layout moves), an area for horizontal scrolling, etc., and distinguishes between images and text (see FIG. 1).

[0051] According to one embodiment of the present invention, objects separated into each region can be dynamically represented according to user actions or data received through a server.

[0052] The area subdivision unit (210) recognizes objects placed on the designed application screen and subdivides them into areas according to their roles. The area subdivision unit (210) extracts area information of each object based on absolute coordinates. For example, the area subdivision unit (210) subdivides objects on the designed application screen into icon areas, image areas, text areas, server data areas, and horizontal scroll areas, and extracts area information where each object is located based on absolute coordinates.

[0053] The layout optimization unit (220) calculates the number of extracted area information and optimizes the layout for each area. More specifically, the layout optimization unit (220) converts objects in a tree structure into an array structure (Array List) to ensure processing efficiency. The layout optimization unit (312) groups and hierarchizes overlapping objects to eliminate redundant and inefficient structures.

[0054] The relative coordinate processing unit (230) converts area information based on absolute coordinates into relative coordinates that are not dependent on the screen size. The relative coordinate processing unit (313) groups by row and extracts column-unit objects within a single row. The relative coordinate processing unit (230) aligns the extracted column-unit objects based on their top and left values ​​and applies padding (spacing).

[0056] FIGS. 4 to 8 are drawings for explaining the prompt section of a generative artificial intelligence-based application screen generation device according to an embodiment of the present invention.

[0057] Referring to FIG. 4, the prompt unit (300) includes a creation unit (310), an object management unit (320), an orchestration unit (330), and a management unit (340).

[0058] The writing unit (310) determines the purpose and function of each area, creates a prompt to generate source code for function implementation or operation processing, and sequentially connects them to form a prompt chain.

[0059] The object management unit (320) stores and manages information, absolute coordinates, and layering information of UI objects included in the designed UI screen in a tree-shaped data structure. More specifically, the object management unit (222) converts the basic generation code stored in XML format into JSON format and stores it in memory in a tree structure, and when storing it in the internal memory space, it stores image and text information separately. The basic generation code is a text file that organizes the absolute coordinates within the screen and the resources (image filenames or text values) to be displayed at the corresponding coordinates for each object (image, text) constituting the designed UI screen in XML format.

[0060] The orchestration unit (330) optimizes the code implementing the designed application screen by performing a prompt orchestration process on each subdivided code generation prompt chain so that the code is not omitted or repeated.

[0061] The orchestration unit (330) rearranges the order from simple prompts to complex prompts and deletes duplicate or unnecessary prompts to optimize the code generation prompt chain without any missing items. Additionally, the orchestration unit (330) prevents duplicate generation by readjusting the prompt entry point if there is a configuration that repeats identically starting from the top left of the designed application screen. The orchestration unit (330) reconstructs the prompt chain to generate efficient source code using a generative AI-based prompt orchestration engine. The orchestration unit (330) subdivides the prompts to prevent source code from being omitted and optimizes the prompt chain by applying a self-developed prompt orchestration process to prevent duplicate processing, thereby overcoming the processing limitations of LLM (Large Language Model)-based generative AI and enabling the rapid development of complex UI screens.

[0062] The orchestration section (330) includes a combination section (331), a deletion section (332), a selection section (333), and an entry point section (334).

[0063] Referring to FIG. 5, the combining unit (331) checks the generated prompt chain and the information, absolute coordinates, and resources of the UI object converted into JSON format, and rearranges the order of the prompts to suit the designed UI screen. More specifically, the combining unit (331) rearranges the processing order of the prompts using a generative AI-based prompt orchestration engine, and changes the final prompt order and determines the prompt chain by re-verifying the order provided by the generative AI-based prompt orchestration engine based on rules. For example, the combining unit (331) checks whether there are any missing prompt objects, checks the dependencies between objects, performs rule-based verification to check if the overall processing order is correct, and then performs the final change processing.

[0064] The processing order specified in the rule by the combination unit (331) is as follows.

[0065] ① Group objects by layout unit

[0066] ② Define the correlation in the form of parent / child

[0067] ③ Convert all objects into widgets that the programming language can recognize.

[0068] ④ Set the top-left corner as the 0,0 coordinate and convert the absolute coordinates of objects within the grouped layout unit to relative coordinates.

[0069] ⑤ Responsive UIFW-based code mapping

[0071] Referring to FIG. 6, the deletion unit (332) checks the generated prompt chain and the information, absolute coordinates, and resources of the UI object converted into JSON format, and deletes unnecessary prompts.

[0072] The deletion unit (332) uses a generative AI-based prompt orchestration engine to identify unnecessary prompts and re-verifies them using the generative AI-based prompt orchestration engine; if the same result is obtained, it performs deletion processing. For example, when the generative AI-based prompt orchestration engine suggests deletion among the margin processing rules for UI automatic alignment, the deletion unit (332) requests the generative AI-based prompt orchestration engine to verify again whether the prompt is unnecessary and that it can be deleted without issue.

[0073] The margin processing rule for automatic UI alignment according to one embodiment of the present invention is as follows.

[0074] ① The margin of a widget located after a container widget with no specified size (width / height) is set to 0. → Since there is no reference size, there is no basis for setting the margin of the next element, so the margin is set to 0 to prevent unnecessary margins.

[0075] ② If a Column widget is inside a Padding widget, calculate the top and left margin values ​​of the Padding widget. To ensure the inner Column is correctly aligned, the position of the outer Padding widget must be calculated accurately.

[0076] ③ Calculate the padding value of the padding widget included as a child of the top-level column widget on the screen. → Since child padding affects overall screen alignment in the main layout structure, it is essential to calculate the corresponding padding value.

[0077] ④ Calculate the margin / padding value of the Container or Padding widget located immediately below the Row widget. → In structures aligned horizontally, the spacing between widgets is important, so this value must be calculated accurately to ensure neat alignment.

[0078] ⑤ Recalculate the top padding value of the padding widget that is a child of the column widget. → In columns aligned from top to bottom, the top spacing of each element stacks, so it is recalculated to ensure the correct position.

[0079] ⑥ In a row structure containing a padding widget, the padding / margin values ​​of the child widgets within the row are recalculated based on the parent row. → To prevent misalignment in nested structures, the spacing is readjusted based on the overall structure.

[0080] Referring to FIG. 7, the selection unit (333) selects the prompt chain expected to have the fastest processing speed among the various prompt chains generated during the prompt order change or deletion processing.

[0081] The selection unit (333) registers and manages prompt chains. The selection unit (333) defines performance metrics to evaluate the performance of prompt chains and sets scoring criteria for each performance metric item.

[0082] The selection unit (333) includes performance indicators such as code generation speed, code generation volume, error rate, and the consistency between the UI implemented with the code generated using the prompt chain and the actual designed UI screen. To score the performance of the prompt chain, the selection unit (333) sets a weight (weight) for each performance indicator and determines a scoring standard for assigning scores according to the range of indicator values.

[0083] The selection unit (333) calculates a performance score for each prompt chain according to predefined performance indicators and scoring criteria. The selection unit (333) selects the prompt chain with the highest calculated performance score as the optimal chain.

[0084] Referring to FIG. 8, when the same object is displayed on multiple screens, the entry point unit (334) reuses the results that have already been processed and sets the entry point after the same prompt to improve processing performance. For example, in the case of UI screen configurations that are interrelated, there may be overlapping screen configurations. In this case, the entry point unit (334) skips up to the prompt that creates the object that has already been processed and sets the entry point to process from the subsequent prompt. The entry point unit (334) manages the entry point using the prompt number set as the entry point.

[0085] Referring again to FIG. 4, the management unit (340) stores and manages the optimal prompt chains with the highest scores on performance indicators. For example, the management unit (334) stores and manages the optimal prompt chains in a separate external DBMS.

[0087] FIGS. 9 to 11 are drawings for explaining the code section of a generative artificial intelligence-based application screen generation device according to an embodiment of the present invention.

[0088] Referring to FIG. 9, the code section (400) includes a prompt review section (410), a code generation section (420), a verification section (430), a dynamic linkage section (440), and a performance optimization section (450).

[0089] Referring to the embodiment of FIG. 10, the prompt review unit (410) manages detailed information for developing a screen that is generated by a generative AI-based application screen generation engine according to a prompt. For example, the prompt review unit (410) creates detailed information based on natural language, including a screen name and ID, a zone name and ID, a name and ID of another screen or pop-up window that the screen will reference, a main screen configuration and description, a function number and description to be processed, an external service integration method and description, etc.

[0090] The prompt review unit (410) creates detailed information for screen development in the form of an artificial intelligence chatbot based on natural language and requests a review from the user. If there are modifications or additions based on the user's review, the prompt review unit (410) analyzes the user's request, changes the detailed information for screen development expressed in natural language, and reflects it in the prompt chain for source code generation. At this time, the prompt review unit (410) displays the changed detailed information so that the user can distinguish it.

[0091] The prompt review unit (410) manages the quality of the source code by verifying the specific implementation method through mutual conversation with the user (requester) regarding screen development details, thereby preventing the generative AI-based application screen generation engine from omitting or incorrectly generating the screen.

[0092] Referring to FIG. 11, the code generation unit (420) generates source code using a generative AI-based application screen generation engine that has undergone separate training. The generative AI-based application screen generation engine learns training data for various UI frameworks based on screen component-based code generation instruction information, such as instructions for generating screen processing logic, instructions for analyzing screen layout structure, and instructions for generating code at the screen unit level.

[0093] Since the code generation unit (420) learns data from various UI frameworks, it provides source code according to the user's UI framework environment.

[0094] The code generation unit (420) requests the generation of a code block for each prompt using an optimal prompt chain.

[0095] The verification unit (430) inspects the generated source code and performs optimization verification. The verification unit (430) merges identical functions or code blocks for the generated source code according to the prompt chain and performs code optimization tasks such as simplifying the hierarchical structure for screen rendering performance and selecting optimized animation processing functions.

[0096] The dynamic connection unit (440) converts objects requiring dynamic connection into responsive user interface (UI) code according to screen processing logic, and after iconizable images are processed into icons, optimizes the screen source code.

[0097] The performance optimization unit (450) performs optimization on the entire UI screen configuration source. For example, the performance optimization unit (450) analyzes whether loops or recursive calls are used redundantly, and if the structure is unnecessary or may cause performance degradation, it optimizes code performance by switching to an alternative algorithm that can improve the time complexity (Big-O Notation).

[0099] FIGS. 12 and 13 are drawings illustrating a method for generating user interface code based on generative artificial intelligence according to an embodiment of the present invention. Each process described below is a process performed by each functional part constituting the generative artificial intelligence-based user interface code generation device in each step; however, for the sake of a concise and clear explanation of the present invention, the subject of each step will be collectively referred to as the generative artificial intelligence-based user interface code generation device.

[0100] Referring to FIG. 12, in step S1201, the generative AI-based user interface code generation device (10) distinguishes objects within the designed application screen based on absolute coordinates and extracts the screen area of ​​each object. The generative AI-based user interface code generation device (10) configures each screen area as “source code” + “image” so that operation processing is possible. To implement the designed application screen, the generative AI-based user interface code generation device (10) subdivides the area according to the role of the object and extracts each area so that a prompt to generate source code for each area can be written.

[0101] In step S1202, the generative artificial intelligence-based user interface code generation device (10) calculates the number of extracted area information.

[0102] In step S1203, the generative AI-based user interface code generation device (10) performs layout optimization, converts absolute coordinate-based area information into relative coordinates that are not dependent on screen size, and constructs an optimal prompt chain through a prompt orchestration process according to the interface purpose of each area. The generative AI-based application screen generation device (10) constructs an optimal prompt chain by changing the order of generated prompts or deleting unnecessary prompts using a generative AI-based prompt orchestration engine, and by determining the repeating parts and inserting entry points thereafter.

[0103] In step S1204, the generative AI-based user interface code generation device (10) generates source code that implements an application screen by requesting the generation of a code block for each prompt according to the prompt chain.

[0104] In step S1205, the generative AI-based user interface code generation device (10) inspects the source code and performs optimization verification.

[0105] In step S1206, the generative AI-based user interface code generation device (10) integrates and optimizes all source code within the area where optimization verification is completed.

[0106] In step S1207, the generative AI-based user interface code generation device (10) converts objects requiring dynamic connection into responsive user interface (UI) code according to screen processing logic.

[0107] The generative AI-based user interface code generation device (10) generates source code for each area by repeating step S1207 in step S1203 as many times as the number of extracted screen areas.

[0108] In step S1208, the generative AI-based user interface code generation device (10) performs icon processing on images that can be iconized.

[0109] In step S1209, the full-screen source code of the generative AI-based user interface code generation device (10) is optimized. For example, the generative AI-based user interface code generation device (10) analyzes whether loops or recursive calls are used redundantly, and if the structure is unnecessary or may cause performance degradation, it optimizes code performance by switching to an alternative algorithm that can improve the time complexity (Big-O Notation).

[0110] In step S1210, the generative AI-based user interface code generation device (10) integrates the source code generated for each area and generates a file. For example, the generative AI-based user interface code generation device (10) integrates the codes of each area generated in units of functions or classes into a file.

[0111] In step S1211, the generative AI-based user interface code generation device (10) extracts and organizes image files by region unit.

[0112] A generative AI-based user interface code generation device (10) extracts image files for each region and then integrates them with code generated based on prompts to generate source code and image resources for the final screen unit.

[0113] Referring to FIG. 13, in step S1203, the layout optimization and relative coordinate transformation performed by the generative AI-based user interface code generation device (10) are subdivided to generate and orchestrate prompts.

[0114] The generative AI-based user interface code generation device (10) converts objects in a tree structure into an array structure (Array List) to ensure processing efficiency. The generative AI-based user interface code generation device (10) groups and hierarchizes overlapping objects to eliminate redundant and inefficient structures.

[0115] The generative AI-based user interface code generation device (10) converts area information based on absolute coordinates into relative coordinates that are not dependent on screen size. The generative AI-based user interface code generation device (10) groups by row and extracts column-based objects within a single row. The generative AI-based user interface code generation device (10) sorts the extracted column-based objects based on their top and left values ​​and sorts the column-based objects by applying padding (spacing).

[0116] A generative AI-based user interface code generation device (10) generates prompts by segmenting them according to screen components and optimizes them in the following three ways. The generative AI-based user interface code generation device (10) removes unnecessary or duplicate requests and improves the processing efficiency and accuracy of prompt chaining by (1) removing specific prompts, (2) changing the processing order, or (3) setting an entry point to start from a specific prompt. This orchestration processing process is a key procedure that determines the quality of prompt-based source code generation and contributes to maximizing the processing efficiency of generative AI.

[0118] FIG. 14 is a diagram illustrating a computing device that implements a generative artificial intelligence-based user interface code generation device according to one embodiment of the present invention.

[0119] An embodiment of the present invention described by FIGS. 1 to 13 can be implemented as a computing device (900) operated by at least one processor.

[0120] The computing device (900) may include a processor (910), memory (920), storage (930), a communication interface (940), a system interconnect (950), and a display (960).

[0121] The processor (910) includes a CPU (Central Processing Unit), an MPU (Micro Processor Unit), an MCU (Micro Controller Unit), a GPU (Graphic Processing Unit), and an APU (Application Processing Unit).

[0122] The memory (920) interacts with the processor (910) to perform the function of storing data and enabling rapid access to necessary information so that the program can be executed efficiently. The memory (920) includes at least one of a register, a cache memory, a main memory, a read-only memory, a virtual memory, and a non-volatile memory.

[0123] Storage (930) serves to permanently store and manage data. Storage preserves data even after the computing system is turned off or rebooted and is used to store operating systems, applications, user files, etc. Storage (930) includes at least one of a hard disk drive (HDD), a solid-state drive (SSD), an optical disc, network storage, and cloud storage.

[0124] The communication interface (940) provides a path for exchanging data between various devices inside and outside the computing system. The communication interface (940) can support at least one of the following communication methods: USB (Universal Serial Bus), PCIe (Peripheral Component Interconnect Express), SATA (Serial ATA), Ethernet, Wi-Fi, Thunderbolt, and HDMI (High-Definition Multimedia Interface).

[0125] The system interconnect (950) serves to exchange data and signals between various components within the computing system. The system interconnect (950) can support at least one of a bus, point-to-point, crossbar switch, or network-on-chip (NoC) method.

[0126] The display (960) is an output device of the computing system and performs the function of providing visual information to the user.

[0127] According to the above configuration, the program according to the embodiment of the present invention is executed based on instructions executed by the processor (910) and can be stored in memory (920) or storage (930).

[0129] The method according to the embodiments of the present invention described above may be implemented in the form of program instructions that can be executed through various computer components and recorded on a computer-readable recording medium. The computer-readable recording medium may include program instructions, data files, data structures, etc., either individually or in combination. The program instructions recorded on the computer-readable recording medium may be specially designed and configured for the embodiments of the present invention, or may be known and available to a person skilled in the art of computer software. The computer-readable recording medium includes hardware configured to store and execute program instructions, such as magnetic recording media such as hard disks, floppy disks, and magnetic tapes; optical recording media such as CD-ROMs and DVDs; magneto-optical media such as floptical disks; ROMs; RAMs; and flash memory. Program instructions include machine code generated by a compiler and high-level language code that can be executed on a computer using an interpreter. The hardware may be configured to operate as one or more software modules to process the method according to the present invention, and vice versa.

[0130] The method according to an embodiment of the present invention can be executed in the form of program instructions on an electronic device. The electronic device includes portable communication devices such as smartphones or smartpads, computer devices, portable multimedia devices, portable medical devices, cameras, wearable devices, and home appliances.

[0131] The method according to an embodiment of the present invention may be provided as included in a computer program product. The computer program product may be traded between a seller and a buyer as a product. The computer program product may be distributed in the form of a device-readable recording medium or online through an application store. In the case of online distribution, at least a portion of the computer program product may be temporarily stored or temporarily created in a storage medium such as the memory of a manufacturer's server, an application store's server, or a relay server.

[0132] Each component, such as a module or a program, according to an embodiment of the present invention may be composed of a single or multiple sub-components, and some of these sub-components may be omitted or additional sub-components may be included. Some components (modules or programs) may be integrated into a single entity and may perform the functions performed by each corresponding component prior to integration in the same or similar manner. Operations performed by a module, program, or other component according to an embodiment of the present invention may be executed sequentially, in parallel, iteratively, or heuristically, or at least some operations may be executed in a different order, omitted, or additional operations may be added.

[0133] Although it has been described above that all components constituting an embodiment of the present invention are combined or operate as a single unit, the present invention is not necessarily limited to such an embodiment. That is, within the scope of the purpose of the present invention, all components may be selectively combined in one or more ways to operate.

[0134] Although operations are depicted in a specific order in the drawings, it should not be understood that the operations must be executed in the specific order depicted or in a sequential order, or that all depicted operations must be executed to obtain the desired result. In certain situations, multitasking and parallel processing may be advantageous. Furthermore, the separation of the various configurations in the embodiments described above should not be understood as a necessary separation, and it should be understood that the described program components and systems can generally be integrated together into a single software product or packaged into multiple software products.

[0135] The present invention has been described above with reference to its embodiments. Those skilled in the art will understand that the present invention may be embodied in modified forms without departing from the essential characteristics of the invention. Therefore, the disclosed embodiments should be considered in an illustrative rather than a restrictive sense. The scope of the invention is defined by the claims, not by the foregoing description, and all variations within the scope of the claims should be interpreted as being included in the invention. Explanation of the symbols

[0137] 10: Generative AI-based user interface code generation device 100: Input section 200: Screen layout section 210: Area Subdivision 220: Layout Optimization Section 230: Relative Coordinate Processing Unit 300: Prompt section 310: Writing Department 320: Object Management Department 330: Orchestration Department 340: Management Department 400: Code section 410: Prompt Review Department 420: Code generation section 430: Verification Department 440: Dynamic connection 450: Performance Optimization Section 500: File Management Department

Claims

Claim 1 A generative AI-based user interface code generation device comprises: an input unit that receives a designed application screen in image format; a screen layout unit that divides the designed application screen into image units and determines a programming area; a prompt unit that creates a subdivided prompt and orchestrates the prompts to form a prompt chain; and a code unit that generates source code using a pre-trained generative AI-based application screen generation engine. The system includes a file management unit that integrates the source code to generate a file and extracts image files for each screen unit, wherein the screen layout unit configures the screen image to include source code and images so that operation processing is possible for the screen that is an image, the code unit writes information for screen generation according to the prompt based on natural language, requests the user to review the information, and if there are requests based on the user's review, analyzes the user's request entered based on natural language to modify the information, reflects it in the prompt chain for source code generation, and displays the modified items among the information so that the user can distinguish them; a code generation unit that requests the generation of code blocks for each prompt based on the prompt chain; a verification unit that merges identical functions or code blocks for the source code, inspects them, and performs optimization verification; and a dynamic linking unit that converts objects requiring dynamic linking according to the screen processing logic into responsive user interface code, processes images that can be iconized into icons, and then optimizes the screen source code.A generative AI-based user interface code generation device comprising a performance optimization unit that optimizes code by analyzing whether loops or recursive calls are used redundantly and switching to an alternative algorithm that improves time complexity if they are unnecessary or cause performance degradation, wherein the generative AI-based application screen generation engine performs prior training for user interface development, and the optimization verification includes simplifying the hierarchical structure and selecting an optimized animation processing function for screen rendering performance. Claim 2 delete Claim 3 delete Claim 4 delete Claim 5 delete Claim 6 In claim 1, the prompt unit is a generative artificial intelligence-based user interface code generation device that stores and manages prompt chains in an external database. Claim 7 A method for generating user interface code based on generative AI using a generative AI-based user interface code generation device comprises: a step of classifying objects within a designed application screen based on absolute coordinates and extracting the screen area of ​​each object; a step of calculating the number of extracted area information; a step of performing layout optimization and converting to relative coordinates; a step of generating a prompt chain; a step of generating application screen source code using a generative AI-based application screen generation engine that has undergone separate training for user interface development; a step of inspecting the source code and performing optimization verification; a step of integrating and optimizing all source codes; a step of generating the source code into a file and extracting image files; and a step of converting objects requiring dynamic connection according to screen processing logic into responsive user interface (UI) code.The step of generating application screen source code using a generative AI-based application screen generation engine that has undergone separate training for user interface development includes generating source code according to the user's framework, writing prompts for each screen area, orchestrating the prompts to form a prompt chain with the highest performance score, writing information for screen generation according to the prompt chain based on natural language, requesting the user to review the information, and if there are requests based on the user's review, analyzing the user's request entered in natural language to modify the information and reflecting it in the prompt chain for source code generation, displaying the modified information so that the user can distinguish it, requesting the generation of code blocks for each prompt based on the prompt chain, inspecting the source code, and performing optimization verification includes simplifying the hierarchical structure and selecting optimized animation processing functions for screen rendering performance, and the step of integrating and optimizing all source codes analyzes whether loops or recursive calls are used redundantly, and if they are unnecessary or cause performance degradation, optimizes the code by switching to an alternative algorithm that improves time complexity. method.; Claim 8 delete Claim 9 delete Claim 10 A computer program recorded on a computer-readable recording medium that executes the generative artificial intelligence-based user interface code generation method of paragraph 7.

Images