A method for generating a multi-screen preview of code by a large model

Abstract

The present application relates to the technical field of code preview, and particularly relates to a multi-screen preview method for code generated by a large model, which comprises the following steps: determining the screen splitting role of each display device according to device parameters and development attributes; assigning a corresponding display window to each display device based on the screen splitting role, then receiving the development requirement text input by a user in a master control screen; calling the source code to be edited and displaying it in a code display screen, inputting it into a large model to automatically generate code, and outputting debugging information to a debugging information screen. The prior art scheme for automatically generating code of a large model needs to pre-configure the editing environment when in use, which is a cumbersome process. The device parameters and development attributes of the display device are automatically collected to automatically calculate the most reasonable screen splitting scheme, and the information generated in the editing process is automatically pushed to the display device, so that a more convenient code automatic generation process is realized, and the editing environment does not need to be configured again.

Description

Technical Field

[0001] This invention relates to the field of code preview technology, and more specifically to a multi-screen preview method for generating code from a large model. Background Technology

[0002] Code preview editing refers to a solution that provides code editing, debugging information output, and preview of modification effects through a related display interface during the code editing process.

[0003] For example, application number CN202510291090.2 discloses a program preview method and apparatus. The method includes: determining the original code and updated code of the program; generating an editing operation sequence based on the differences between characters in the original code and characters at the same position in the updated code, wherein the editing operation sequence refers to the editing operations performed at the same position during the process of converting the original code into the updated code; and sending the editing operation sequence to a terminal so that the terminal incrementally updates the program preview application page based on the editing operation sequence and displays the updated preview application page. This provided program preview method and apparatus significantly reduces data transmission volume and enables the preview application page to quickly reflect the latest state of the code, thereby realizing a real-time preview function for code editing.

[0004] AI-generated code is a code editing solution based on a large language model. Users input their development requirements into the model and receive the output code from the model.

[0005] For example, application number CN202410590171.8 discloses a code generation method based on a large language model, with the following steps: S1: Receive user input requirements documents and database fields to generate a data model layer, using the received data as source text; S2: Generate prompt words based on the source text, the ChatGLM2 model obtains the function signature, and outputs the text content; S3: Generate prompt phrases based on the source text, the WizardCoder model obtains the file path and code content, and outputs the text content; S4: Construct folders and files based on the code path, write the code content, and obtain the target programming language conversion. Combining the ChatGLM2 model and the WizardCoder model, a large language model is generated using the PyTorch framework within the Gradio service, and then the large language model is used for code generation.

[0006] However, in actual implementation, the inventors found that this type of technical solution still requires manual configuration of large models, editors, etc., which leads to relatively inconvenience for users. Summary of the Invention

[0007] To address the aforementioned problems in existing technologies, a multi-screen preview method for generating code from large models is provided.

[0008] The specific technical solution is as follows: A multi-screen preview method for generating code from a large model, comprising: Step S1: Obtaining the display devices involved in the current editing environment, collecting device parameters and development attributes for each display device, and determining the screen role of each display device according to the device parameters and development attributes; the screen role includes a main control screen, a code display screen, an effect preview screen, and a debugging information screen; Step S2: Assigning a corresponding display window to each display device based on the screen role, and then receiving the development requirement text input by the user in the main control screen; Step S3: Retrieving the source code to be edited according to the development requirement text and displaying it in the code display screen, and inputting the development requirement text into the large model for automatic code generation, outputting debugging information to the debugging information screen during the generation process, and outputting the modified code to the effect preview screen.

[0009] On the other hand, step S1 includes: step S11: collecting the device parameters and the development attributes; step S12: calculating the resolution priority and scene attribute weight based on the device parameters and the development attributes; step S13: generating the split-screen character based on the resolution priority and the scene attribute weight.

[0010] On the other hand, the display device includes a first type of screen and a second type of screen; the first type of screen is pre-set as the main control screen; in step S13, the screen splitting role is assigned from a plurality of second type screens.

[0011] On the other hand, in step S12, the process of generating the resolution priority includes:

[0012] For each of the display devices, calculate the resolution priority of the device parameters relative to each of the split-screen roles;

[0013] When the split-screen role is the code display screen, the resolution priority is generated in the following ways:

[0014] ;

[0015] In the formula, The resolution priority for the display screen of the code. For the first The resolution of the aforementioned display device;

[0016] When the split-screen role is the effect preview screen, the resolution priority is generated in the following ways:

[0017] ;

[0018] In the formula, The resolution priority for the effect preview screen;

[0019] For the first The aspect ratio deviation value of the display device;

[0020] For the first The aspect ratio of the aforementioned display device;

[0021] Develop the display aspect ratio of the target product;

[0022] When the split-screen role is the debug information screen, the resolution priority is generated in the following ways:

[0023] ;

[0024] In the formula, The resolution priority of the debugging information screen. For the first The resolution of the aforementioned display device.

[0025] On the other hand, in step S12, the method for generating the scene attribute weights includes: step A121: extracting the corresponding semantic vector from the development attribute; step A122: matching the semantic vector with the pre-configured scene attribute definition to determine the matching scene attribute definition; step A123: determining the scene attribute weights by looking up a table according to the scene attribute definition.

[0026] On the other hand, the scene attribute definition includes:

[0027] When the demand for real-time preview is high ;

[0028] When high-frequency debugging requirements are high ;

[0029] When the scenario involves backend development ;

[0030] In the formula, The scene attribute weights are displayed on the screen for the code;

[0031] The scene attribute weights for the effect preview screen;

[0032] The scene attribute weights for the debugging information screen.

[0033] On the other hand, step S13 includes: generating a role allocation cost matrix, and using the Hungarian algorithm to solve the minimum cost allocation problem on the role allocation cost matrix to obtain the allocation result of the split-screen roles; in the role allocation cost matrix, each element These indicate that the screen will be split. Assigned to role The cost; the method for calculating the cost is as follows: In the formula, The scene attribute weights, The resolution priority is set as described above.

[0034] On the other hand, step S3 includes: step S31: extracting semantic features based on the development requirement text, and matching code identifiers based on the semantic features to obtain matching code snippets; step S32: obtaining a code structure tree based on the code snippets and pushing it to the code display screen for display; step S33: sending the development requirement text and the code snippets to the large model so that the large model can modify the code snippets; step S34: obtaining debugging information provided by the large model during the modification process and distributing it to the debugging information screen for display, and updating the code display screen based on the output results of the large model; step S35: displaying the code through the effect preview screen after the code modification is completed.

[0035] On the other hand, in step S34, the main control screen obtains the output data of the large model and then pushes it to the debugging information screen and the code display screen.

[0036] The above technical solution has the following advantages or beneficial effects: Addressing the cumbersome process of pre-configuring the editing environment required for existing large model code generation solutions, this solution automatically calculates the most reasonable screen splitting scheme by collecting device parameters and development attributes of the display device. Based on this, it automatically pushes debugging information, code change information, and preview information generated during the large model editing process to the display device, achieving a more convenient automatic code generation process without requiring further configuration of the editing environment. Attached Figure Description

[0037] Embodiments of the invention will be described more fully with reference to the accompanying drawings. However, the drawings are for illustration and explanation only and do not constitute a limitation on the scope of the invention.

[0038] Figure 1 This is an overall schematic diagram of an embodiment of the present invention;

[0039] Figure 2 This is a schematic diagram of step S1 in an embodiment of the present invention;

[0040] Figure 3 This is a schematic diagram of step S12 in an embodiment of the present invention;

[0041] Figure 4 This is a schematic diagram of step S3 in an embodiment of the present invention. Detailed Implementation

[0042] The technical solutions of the embodiments of the present invention will be clearly and completely described below with reference to the accompanying drawings. Obviously, the described embodiments are only some embodiments of the present invention, and not all embodiments. Based on the embodiments of the present invention, all other embodiments obtained by those skilled in the art without creative effort are within the scope of protection of the present invention.

[0043] It should be noted that, unless otherwise specified, the embodiments and features described in the present invention can be combined with each other.

[0044] The present invention will be further described below with reference to the accompanying drawings and specific embodiments, but this is not intended to limit the scope of the invention.

[0045] This invention includes: a multi-screen preview method for generating code from large models, such as... Figure 1 As shown, the process includes: Step S1: Obtain the display devices involved in the current editing environment, collect device parameters and development attributes for each display device, and determine the screen role of each display device according to the device parameters and development attributes; the screen roles include the main control screen, code display screen, effect preview screen, and debugging information screen; Step S2: Assign a corresponding display window to each display device based on the screen roles, and then receive the development requirement text input by the user in the main control screen; Step S3: Retrieve the source code to be edited according to the development requirement text and display it in the code display screen, and input the development requirement text into the large model for automatic code generation, output debugging information to the debugging information screen during the generation process, and output the modified code to the effect preview screen.

[0046] Specifically, addressing the cumbersome issue of existing large model code automatic generation solutions requiring pre-configuration of the editing environment, this solution automatically calculates the most reasonable screen splitting scheme by collecting device parameters and development attributes of the display device. Based on this, it automatically pushes debugging information, code change information, and preview information generated during the large model editing process to the display device, achieving a more convenient automatic code generation process without the need for further editing environment configuration.

[0047] Specifically, the aforementioned multi-screen preview method is primarily applied as a software embodiment in a large model code automatic generation system. This system is configured on a user's workstation, specifically a development computer used by the developers. This computer is configured with multiple display devices to facilitate browsing more information. Each display device refers to a screen assigned a display interface. After the screen is connected to the computer, the operating system interacts with the screen according to the driver and automatically creates a window on the screen to display various content required during development. Taking front-end development as an example, this involves the front-end page's source code, the source code's debugging information, and the page effects that the source code can achieve. These three parts need to be input into the corresponding interface for display.

[0048] In traditional editors, this display interface is shown separately in multiple columns and pages within the editor, which is relatively inconvenient to use. Although multiple displays can be used for separate display, this process still requires manual configuration by the user.

[0049] To address this issue, this solution employs the aforementioned multi-screen preview method to automatically configure the display content of each display device. Before allocation, the user has a main control screen primarily used for inputting commands, which displays the main window. Simultaneously, blank windows for full-screen display are automatically created on other display devices. For each blank window on a display device, the actual split-screen role is assigned according to the multi-screen preview method described above. At this point, the blank window switches to the corresponding display interface and subscribes to the main window on the main control screen. The main window then publishes the content to be displayed to the corresponding split-screen windows in the split-screen screen via a push queue broadcast for rendering and display.

[0050] During the actual editing process, the main window on the main control screen receives the development requirement text input by the user and forwards it to the large model through the background service. The large model will search the source code according to the development requirement text and software interface, generate the modified content, and debug the code changes to obtain debugging information.

[0051] The retrieved and modified code snippets, along with debugging information, are returned to the main window of the main control screen. At this point, the main window publishes corresponding broadcasts based on the received content, pushing the code snippets to be rendered to the code display window in the code display screen, and pushing the debugging information to be rendered to the debugging information window in the debugging information screen. After the code is built, the front-end page to be rendered is also published to the effect preview window in the effect preview screen. The effect preview window will display the front-end page built based on the front-end code to be rendered.

[0052] Based on the above process, the development environment can be automatically configured and the model can be automatically generated into code, thereby greatly improving development efficiency.

[0053] In one embodiment, such as Figure 2 As shown, step S1 includes: step S11: collecting device parameters and development attributes; step S12: calculating resolution priority and scene attribute weight based on device parameters and development attributes; step S13: generating split-screen characters based on resolution priority and scene attribute weight.

[0054] Specifically, in order to achieve a better screen allocation effect, in this embodiment, before allocation, device parameters and development attributes of the display devices involved in the current editing environment are collected respectively.

[0055] Among them, device parameters refer to the parameters collected from the hardware specifications of the display device. Here, we mainly focus on the resolution ratio of the current display device and the display orientation configured by the operating system for the display device, and convert the display orientation to obtain the correct resolution ratio.

[0056] The development attributes are mainly collected by the user account bound to the editing device to determine the role of the current user in the overall code development process, such as debugging, front-end, etc. Based on the development attributes, the requirements for different display windows can be more accurately determined.

[0057] Based on this, the resolution priority and scene attribute weight of each display device relative to each split-screen role are calculated according to the device parameters and development attributes. Finally, the split-screen role is generated and assigned to the corresponding display device by a comprehensive comparison based on the resolution priority and scene attribute weight.

[0058] In one embodiment, the display device includes a first type of screen and a second type of screen; the first type of screen is pre-set as the master screen; in step S13, a screen role is assigned from a plurality of second type screens.

[0059] Specifically, to implement a specific editing workflow, this embodiment divides the display device into a first type of screen and a second type of screen. The first type of screen is the main control screen pre-selected by the user account, used to provide the user with the corresponding editing interface and input corresponding commands. It is bound to the main control screen, and various windows that need to be pushed later are also broadcast and pushed by the editing interface in the main control screen. In the process of assigning split-screen roles, only the remaining second type of screens are allocated.

[0060] In one embodiment, step S12, the resolution priority generation process includes:

[0061] For each display device's device parameters, calculate the resolution priority of the device parameters relative to each split-screen role;

[0062] When the split-screen role is the code display screen, the resolution priority is generated in the following ways:

[0063] ;

[0064] In the formula, Prioritize the screen resolution for displaying the code. For the first The resolution of each display device;

[0065] When the split-screen character is the preview screen, the resolution priority generation methods include:

[0066] ;

[0067] In the formula, Prioritize the screen resolution for previewing the effect;

[0068] For the first The aspect ratio deviation of each display device;

[0069] For the first The aspect ratio of each display device;

[0070] Develop the display aspect ratio of the target product;

[0071] When the split-screen role is the debug information screen, the resolution priority generation methods include:

[0072] ;

[0073] In the formula, To adjust the resolution priority of the information screen, For the first The resolution of each display device.

[0074] Specifically, considering the editing needs of different devices, this embodiment uses the above formula to calculate the priority of each display device relative to each split-screen role.

[0075] Specifically, for the code display screen, because the code lines have a certain length and the horizontal movement needs to be minimized during editing, a higher weight is assigned to the horizontal resolution, and a corresponding priority is calculated based on the resolution ratio. For the preview screen, it typically needs to match the display ratio of the target product. For example, front-end web development usually considers a 16:9 aspect ratio, while mobile application development needs to match the screen ratio of mobile phones, such as 9:18. To achieve adaptation to different products, the aspect ratio is first calculated separately for each display device. This is achieved by dividing the horizontal resolution by the vertical resolution. Based on this, the aspect ratio with the target product is calculated. deviation value The priority of the final effect preview screen is then calculated.

[0076] For the debugging information screen, since the large model will automatically generate corresponding debugging logs during the editing process, and considering that the debugging logs need to display error content, line number, examples, etc., a higher vertical resolution is needed to display more lines in order to fully display the prompts of a single group. Therefore, a higher weight is configured for vertical resolution, and the corresponding priority is calculated based on the resolution ratio.

[0077] The resolution priority mentioned above is calculated for each split screen and finally stored in the priority matrix.

[0078] In one embodiment, in step S12, as Figure 3 As shown, the method for generating scene attribute weights includes: Step A121: Extracting the corresponding semantic vector from the self-developed attributes; Step A122: Matching the semantic vector with the pre-configured scene attribute definitions to determine the matching scene attribute definitions; Step A123: Determining the scene attribute weights by looking up a table based on the scene attribute definitions.

[0079] Specifically, in order to better adapt to the user's development needs, in this embodiment, the corresponding semantic vector is first extracted from the self-development attributes. The actual development process performed by the user is understood through semantic recognition. On this basis, the semantic vector is matched with the pre-configured scene attribute definition to determine the matching scene attribute definition, and the scene attribute weight is determined by looking up a table.

[0080] In one embodiment, the scene attribute definition includes:

[0081] When the demand for real-time preview is high ;

[0082] When high-frequency debugging requirements are high ;

[0083] When the scenario involves backend development ;

[0084] In the formula, Assign scene attribute weights to the code display screen;

[0085] Weight the scene attributes for the preview screen;

[0086] To adjust the scene attribute weights of the information screen.

[0087] Specifically, to achieve better adjustment of scene adaptation weights for different split-screen roles, this embodiment sets three weights. To display scene attribute weights for the screen in the code. The scene attribute weights for the preview screen. To adjust the scene attribute weights of the information screen, the sum of the three weights is 1. Based on this, the weights are dynamically changed according to the different display needs of the user.

[0088] In one embodiment, step S13 includes: generating a role allocation cost matrix, and using the Hungarian algorithm to solve the minimum cost allocation problem on the role allocation cost matrix to obtain the allocation results of split-screen roles; in the role allocation cost matrix, each element These represent the display devices. Assigned to split-screen characters The cost; the cost calculation method is as follows: In the formula, For scene attribute weights, Prioritize resolution.

[0089] Specifically, in order to achieve a better allocation effect for split-screen roles, in this embodiment, the cost of each display device relative to each split-screen role is first calculated according to the scene attribute weight and resolution priority, thereby forming a role allocation cost matrix.

[0090] Then, the Hungarian algorithm is used to solve the minimum cost allocation problem, ensuring that each display device is assigned a unique role and that each split-screen role has a corresponding display device.

[0091] In one embodiment, such as Figure 4As shown, step S3 includes: Step S31: Extract semantic features from the development requirement text, and match code identifiers based on the semantic features to obtain matching code snippets; Step S32: Obtain the code structure tree according to the code snippets and push it to the code display screen for display; Step S33: Send the development requirement text and code snippets to the large model so that the large model can modify the code snippets; Step S34: Obtain debugging information provided by the large model during the modification process and distribute it to the debugging information screen for display, and update the code display screen according to the output results of the large model; Step S35: When the code modification is completed, display it through the effect preview screen.

[0092] In step S34, the main control screen obtains the output data of the large model and pushes it to the debugging information screen and the code display screen.

[0093] Specifically, after constructing the aforementioned split-screen role, code can be automatically generated based on the split-screen role, and relevant content can be pushed to the window for display.

[0094] Specifically, the main control screen receives the development requirement text input by the user, combines it with the development scenario adaptation suggestions fed back by the backend service (derived from the scenario features when assigning roles), and generates the initial source code through an AI big model.

[0095] During the generation process, the AI ​​large model extracts code structure features (such as HTML tags and function definitions) in real time, and divides them into code segments that can be previewed independently according to the format standards preset by the backend service. The code structure tree is generated synchronously, and the generation results are reported to the backend service for temporary storage in real time.

[0096] The main control screen retrieves temporarily stored code snippets from the backend service and transmits them to the code display screen in real time according to role assignments. The code display screen shows the code hierarchically according to the code structure tree and supports syntax highlighting and line number annotation. It also provides status feedback to the main control screen, which simultaneously reports the status to the backend service for record-keeping. When the code snippet transmission is complete or the user triggers a preview command, the main control screen sends a preview request to the backend service. The backend service calls the corresponding development environment interface (such as a browser kernel or mobile emulator) to import the code snippet, generate a preview effect, and then pushes it to the main control screen via real-time communication. The main control screen then forwards it to the effect preview screen. The backend service collects code syntax verification results and preview loading logs in real time and pushes debugging data to the main control screen according to role assignments. The main control screen then distributes the data to the debugging information screen, achieving simultaneous display of "code - effect - debugging" on three screens. The entire data flow process is recorded by the backend service.

[0097] Based on this, the preview screen checks whether the preview effect meets expectations. If there are problems such as layout errors or functional failures, it sends error characteristic data (such as screenshots and error occurrence time) to the main control screen, which then reports to the backend service. The backend service, combined with the debugging logs uploaded synchronously by the debugging information screen, performs error location analysis, generates an error cause report and optimization suggestions, and pushes them to the main control screen. Based on the optimization suggestions from the backend service, the main control screen drives the AI ​​large model to generate optimized code snippets and uploads the optimized snippets to the backend service to update temporary storage. The backend service triggers the main control screen to update the code display content through real-time communication, and at the same time regenerates the preview effect and pushes it to the preview screen, forming a "generation-preview-optimization" closed loop until the preview effect meets expectations.

[0098] Each sub-screen supports user touch or mouse operation. When a user modifies code on the code display screen, the changes are synchronized to the main control screen in real time. The main control screen reports to the backend service to update the storage, and the backend service triggers linkage rules, driving the effect preview screen and debugging information screen to update in tandem through the main control screen. When a user clicks on a target element on the effect preview screen, the operation command is reported to the backend service via the main control screen. The backend service performs reverse positioning based on the code structure tree, generates code snippet positioning information and sends it back to the main control screen. The main control screen controls the code display screen to jump to the corresponding code snippet, realizing bidirectional jump between "preview element" and "source code".

[0099] The above are merely preferred embodiments of the present invention and are not intended to limit the implementation methods and protection scope of the present invention. Those skilled in the art should recognize that any equivalent substitutions and obvious changes made based on the description and illustrations of the present invention should be included within the protection scope of the present invention.

Claims

1. A multi-screen preview method for generating code from a large model, characterized in that, include: Step S1: Obtain the display devices involved in the current editing environment, collect device parameters and development attributes for each display device, and determine the screen role of each display device according to the device parameters and development attributes; the screen role includes the main control screen, code display screen, effect preview screen, and debugging information screen; Step S2: Assign a corresponding display window to each display device based on the screen role, and then receive the development requirement text input by the user in the main control screen; Step S3: Retrieve the source code to be edited according to the development requirements text and display it on the code display screen. Also, input the development requirements text into the large model to automatically generate code. During the generation process, output debugging information to the debugging information screen and output the modified code to the effect preview screen.

2. The multi-screen preview method according to claim 1, characterized in that, Step S1 includes: Step S11: collecting the device parameters and the development attributes; Step S12: calculating the resolution priority and scene attribute weight based on the device parameters and the development attributes; Step S13: generating the split-screen character based on the resolution priority and the scene attribute weight.

3. The multi-screen preview method according to claim 2, characterized in that, The display device includes a first type of screen and a second type of screen; the first type of screen is pre-set as the main control screen; in step S13, the screen sub-screen role is assigned from a plurality of second type screens.

4. The multi-screen preview method according to claim 2, characterized in that, In step S12, the resolution priority generation process includes: calculating the resolution priority of each device parameter relative to each screen role for each display device; when the screen role is the code display screen, the resolution priority generation method includes: ； In the formula, The resolution priority for the display screen of the code. For the first The resolution of the aforementioned display device; When the split-screen role is the effect preview screen, the resolution priority is generated in the following ways: ； In the formula, The resolution priority for the effect preview screen; For the first The aspect ratio deviation value of the aforementioned display device; For the first The aspect ratio of the aforementioned display device; Develop the display aspect ratio of the target product; When the split-screen role is the debug information screen, the resolution priority is generated in the following ways: ； In the formula, The resolution priority of the debugging information screen. For the first The resolution of the aforementioned display device.

5. The multi-screen preview method according to claim 2, characterized in that, In step S12, the method for generating the scene attribute weights includes: step A121: extracting the corresponding semantic vector from the development attribute; step A122: matching the semantic vector with the pre-configured scene attribute definition to determine the matching scene attribute definition; step A123: determining the scene attribute weights by looking up a table according to the scene attribute definition.

6. The multi-screen preview method according to claim 5, characterized in that, The scene attribute definition includes: when the demand for real-time preview is high. When high-frequency debugging requirements are high, When the scenario involves backend development, In the formula, The scene attribute weights are displayed on the screen for the code; The scene attribute weights for the effect preview screen; The scene attribute weights for the debugging information screen.

7. The multi-screen preview method according to claim 2, characterized in that, Step S13 includes: generating a role allocation cost matrix, and using the Hungarian algorithm to solve the minimum cost allocation problem on the role allocation cost matrix to obtain the allocation result of the split-screen roles; in the role allocation cost matrix, each element These represent the display devices. Assigned to split-screen characters The cost; the method for calculating the cost is as follows: In the formula, The scene attribute weights, The resolution priority is set as described above.

8. The multi-screen preview method according to claim 1, characterized in that, Step S3 includes: Step S31: Extracting semantic features from the development requirement text, and matching code identifiers based on the semantic features to obtain matching code snippets; Step S32: Obtaining a code structure tree based on the code snippets and pushing it to the code display screen for display; Step S33: Sending the development requirement text and the code snippets to the large model so that the large model can modify the code snippets; Step S34: Obtaining debugging information provided by the large model during the modification process and distributing it to the debugging information screen for display, and updating the code display screen based on the output results of the large model; Step S35: Displaying the code through the effect preview screen after the code modification is completed.

9. The multi-screen preview method according to claim 8, characterized in that, In step S34, the main control screen obtains the output data of the large model and then pushes it to the debugging information screen and the code display screen.

Images