Fast method for developing static items and adjusting and optimizing details based on large model code platform

Abstract

The invention relates to a rapid method for developing static items and adjusting and optimizing details based on a large model code platform. The method comprises the steps that an actual style parameter set after target page elements are rendered is automatically obtained through an agent module; mapping a user natural language instruction into a structured professional style adjustment instruction through a semantic translation module; combining the parameter set with the professional instruction to construct a structured composite cue word, and inputting the structured composite cue word into a large model code platform to generate a target code; and automatically applying the target code to the target element and updating the display effect in real time to form an iterative optimization closed loop. According to the method, through a collaborative mechanism of element parameter capture, semantic translation and parameter injection, the problem of low tuning efficiency caused by lack of professional term ability and debugging skills of non-professional users is solved, and semantic deviation and trial and error times in the interaction process of the users and a large model are remarkably reduced; the detail tuning efficiency of the static project is remarkably improved.

Description

TECHNICAL FIELD

[0001] The present application relates to the technical field of artificial intelligence and front-end development, and particularly relates to a quick method for developing static projects and detail optimization based on a large model code platform. BACKGROUND

[0002] The existing large model code platform can quickly generate a basic code framework in the initial construction stage of a static project, but in the subsequent detail optimization stage, especially for the fine adjustment of page element styles, the efficiency is significantly reduced. This is mainly due to the following problems: non-professional users lack the ability to accurately describe the professional terms of front-end style requirements, and cannot obtain the accurate style parameters of elements like professional developers using browser debugging tools. This leads to a large semantic gap and description deviation in the interaction process between users and large models, requiring multiple rounds of inefficient and trial-and-error conversations, which seriously affects the development efficiency and user experience. Therefore, there is an urgent need for a technical solution that can reduce the technical threshold and improve the efficiency of detail optimization. SUMMARY

[0003] The present application provides a quick method for developing static projects and detail optimization based on a large model code platform, which can understand user natural language intentions, automatically obtain page context, and achieve accurate code generation and application, significantly improving the efficiency and accuracy of static project detail optimization.

[0004] In order to achieve the above purpose, the present application provides the following technical solution: a quick method for developing static projects and detail optimization based on a large model code platform, comprising the following steps:

[0005] S1, element style parameter capturing step: in response to the selection operation of the user on the target page element, the actual style parameter set of the element after rendering is automatically obtained through the proxy module integrated in the running environment;

[0006] S2, user intention semantic translation step: receiving the style adjustment instruction input by the user in natural language, mapping the natural language instruction to a structured professional style adjustment instruction through a semantic translation module;

[0007] S3, composite prompt word construction and large model code generation step: combining the actual style parameter set obtained in step S1 with the professional style adjustment instruction translated in step S2 to construct a structured composite prompt word, and inputting it to the large model code platform to generate target code;

[0008] S4. Automatic code application and iterative closed-loop steps: The target code generated by the large model code platform in step S3 is automatically applied to the target page elements through the proxy module, and the display effect is updated in real time; the user inputs new natural language instructions based on the updated effect, and the system repeats steps S1 to S4 to form an iterative optimization closed loop.

[0009] Preferably, in step S1, the operating environment is a browser or an integrated development environment; the proxy module accesses the document object model and CSS object model by calling the debugging interface of the environment to obtain the calculated final style values ​​of the elements.

[0010] Preferably, in step S2, the semantic translation module works by combining a predefined rule base with a lightweight natural language processing model; the rule base stores the mapping relationship between natural language phrases and CSS attributes and operation logic, and the natural language processing model is used to identify intent keywords and numerical modifiers in user commands.

[0011] Preferably, in step S2, the working sub-steps of the semantic translation module include:

[0012] S21. Preprocess and segment the natural language instructions to obtain a keyword sequence;

[0013] S22. Match the keyword sequence with the rule base to identify the corresponding CSS attributes and operation logic;

[0014] S23. Based on the identified numerical modifiers, generate a machine-readable style modification object as the professional style adjustment instruction.

[0015] Preferably, in step S3, the structured compound prompt word includes at least the following parts: system role definition, context of the element's current actual style parameters, translated user style adjustment requirements, and output format specifications.

[0016] Preferably, in step S4, the proxy module injects the target code by dynamically creating or modifying style nodes in the page or project to achieve real-time updates.

[0017] Preferably, a system for developing static projects and fine-tuning details based on a large model code platform is provided to implement a quick method for developing static projects and fine-tuning details based on a large model code platform. The system includes:

[0018] The element style parameter capture module is configured to automatically obtain the actual set of style parameters of the target page element after rendering in response to user operations.

[0019] The user intent semantic translation module is configured to receive user natural language instructions and map them into structured professional style adjustment instructions;

[0020] The parameter injection and large model interaction module is configured to combine the actual style parameter set with the professional style adjustment instructions to construct compound prompt words, and interact with the large model code platform to obtain the generated target code.

[0021] The code application and iterative closed-loop module is configured to automatically apply the target code to the target element and update the display, thereby forming an iterative optimization closed loop.

[0022] Preferably, an electronic device includes a memory, a processor, and a computer program stored in the memory and executable on the processor. When the processor executes the program, it implements a quick method for developing static projects and fine-tuning details based on a large model code platform.

[0023] Preferably, a computer-readable storage medium stores a computer program thereon, which, when executed by a processor, implements a quick method for developing static projects and fine-tuning details based on a large model code platform.

[0024] The beneficial effects of this invention are as follows: By employing a collaborative approach of element parameter capture, semantic translation, and parameter injection, an intelligent optimization system that understands page context and user intent is constructed. Its core lies in placing the user's ambiguous natural language instructions within a precise page style context, providing the large model with all the key information needed to generate accurate code, thus overcoming the limitations of traditional interactions that rely on accurate user descriptions and professional knowledge. Compared to existing technologies, this method transforms the optimization process from a random pattern of user guessing and model guessing to a deterministic pattern of precise system perception, user intent translation, and precise model generation. This significantly reduces interaction rounds and trial-and-error costs, substantially improving the efficiency and experience for non-professional users in the detailed optimization stage, and effectively solving the technical problems raised in the background section. Attached Figure Description

[0025] To more clearly illustrate the technical solutions in the embodiments of the present invention or the prior art, the drawings used in the description of the embodiments or the prior art will be briefly introduced below. Obviously, the drawings described below are only some embodiments of the present invention. For those skilled in the art, other drawings can be obtained based on these drawings without creative effort.

[0026] Figure 1 This is a schematic diagram of the overall method flow of the present invention;

[0027] Figure 2 This is a schematic diagram of the semantic translation module workflow of the present invention. Detailed Implementation

[0028] The technical solution of the present invention will now be clearly and completely described 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.

[0029] Example 1: Implementation based on browser extensions

[0030] This embodiment uses a browser extension as the carrier of the proxy module to explain the implementation process of this method in detail. This embodiment is particularly suitable for quickly optimizing the styles of deployed web pages or web projects under development.

[0031] according to Figure 1 , Figure 2 As shown, the overall process of this method is as follows:

[0032] S1: Element Selection and Parameter Capture

[0033] When a user browses a page to be optimized, the browser extension function of this invention is activated. The user selects a target element on the page, such as a button, an image, or a text paragraph, through the browser's built-in developer tools interface or the visual overlay provided by the extension.

[0034] Subsequently, the extended element style parameter capture module is triggered. This module accesses the document object model node of the selected element within the page's execution environment by calling the browser's developer tools programming interface, and further collects the final style value of the node after calculation and stacking of all cascading style sheet rules by obtaining calculated styles. These values ​​constitute the actual set of style parameters for the element, which includes, but is not limited to, specific parameter values ​​such as size attributes, layout attributes, color attributes, and font attributes.

[0035] S2: Natural Language Command Input and Semantic Translation

[0036] Within the same extended interactive interface, the user inputs adjustment commands in natural language, such as "make this button bigger and to the left." This command is then sent to the user intent semantic translation module.

[0037] This semantic translation module operates by combining a predefined rule base with a lightweight natural language processing model. First, the user-input natural language commands are preprocessed, including removing meaningless punctuation and stop words. Next, the lightweight natural language processing model performs word segmentation, resulting in a sequence of keywords. Then, this keyword sequence is matched against a predefined rule base that stores the mapping relationships between natural language phrases and front-end style attributes and operational logic. Finally, combined with identified numerical modifiers, a machine-readable style modification object is generated as the professional style adjustment command.

[0038] S3: Construct compound prompt words and call the large model

[0039] The parameter injection and large model interaction module begins operation. This module integrates the actual set of style parameters captured by S1 with the structured professional style adjustment instructions generated by S2, and constructs a context-rich, structured compound prompt word according to a predefined template.

[0040] The compound prompt word template includes the following parts: a system role definition section, used to define the role of the large model as a front-end code assistant; an element current actual style parameter context section, used to list all captured actual style parameters; a translated user style adjustment requirement section, used to clearly state the structured adjustment instructions; and an output format specification section, used to specify the format requirements of the large model's output code.

[0041] The structured compound prompt was then sent to the large model code platform.

[0042] S4: Automatic Code Application and Iterative Results

[0043] The large model code platform returns the generated target code that meets the requirements. The code application and iteration loop module in the browser extension receives this code and injects the target code into the current page's stylesheet by dynamically modifying the page document structure, such as by creating new style nodes and adding them to the document header. The page then re-renders according to the new style rules, and the user can immediately observe the visual effect of the adjusted target element styles.

[0044] If users are not satisfied with the effect of this adjustment, or wish to make further optimizations, they only need to enter new natural language commands in the interactive interface, such as "change the color to blue" or "make it wider". The system will automatically repeat the process from S1 to S4, thus forming an efficient, user-guided iterative optimization loop until a satisfactory page effect is obtained.

[0045] Example 2: Implementation based on integrated development environment plugins

[0046] This embodiment illustrates the implementation of the present invention in an integrated development environment (IDE). The proxy module exists as an IDE plugin and is suitable for optimizing static projects during the local development phase.

[0047] When a user writes and previews a webpage in the integrated development environment (IDE), they select a target element in the preview window via the plugin panel. The plugin captures the real-time style parameters of the target element through a debugging communication protocol between the IDE and an internal or external preview browser. Subsequent semantic translation, compound prompt word construction, and large model interaction processes are similar to those in Example 1.

[0048] During the code application phase, the code application and iteration closed-loop module directly writes the target code generated by the large model into the corresponding location in the project's local source code file, or updates the relevant style files by overwriting or appending, and triggers the real-time preview function of the integrated development environment to refresh the interface. Users can see the updated effect in their local code editor and, based on this, continue to initiate the next round of optimization iterations through natural language commands.

[0049] Example 3: Implementation based on low-code / no-code platform

[0050] This embodiment illustrates the implementation of the present invention in a low-code / no-code platform. The proxy module exists as a built-in intelligent auxiliary function of the platform.

[0051] Platform users select a component on the canvas through the visual designer. The element style parameter capture module directly reads all current style attribute values ​​of the component from the component style attribute model maintained by the platform. Users enter natural language commands such as "make the title more eye-catching" in the designer's smart input box. The user intent semantic translation module parses the command using a rule base and model optimized for the platform's component library. Subsequently, the system constructs a compound prompt word, calls the platform's integrated large model service, and generates style configuration code or attribute key-value pairs for the specific component on the platform. Finally, the code application and iteration closed-loop module applies the generated style configuration to the platform component model, the designer canvas updates and renders in real time, and users can continue to provide feedback or initiate new adjustment commands.

[0052] This invention constructs an intelligent optimization system that understands page context and user intent through a collaborative approach of element parameter capture, semantic translation, and parameter injection. Its core lies in placing the user's ambiguous natural language instructions within a precise page style context, providing the large model with all the key information needed to generate accurate code, thus overcoming the limitations of traditional interactions that rely on accurate user descriptions and professional knowledge. Compared to existing technologies, this method transforms the optimization process from a random pattern of user guessing and model guessing to a deterministic pattern of precise system perception, user intent translation, and precise model generation. This significantly reduces interaction rounds and trial-and-error costs, substantially improving the efficiency and experience for non-professional users in the detailed optimization stage, and effectively solving the technical problems raised in the background section.

[0053] The above description is merely a specific embodiment of the present invention, but the scope of protection of the present invention is not limited thereto. Any variations or substitutions that can be easily conceived by those skilled in the art within the technical scope disclosed in the present invention should be included within the scope of protection of the present invention. Therefore, the scope of protection of the present invention should be determined by the scope of the claims.

Claims

1. A quick method for developing static projects and fine-tuning details based on a large model code platform, characterized in that, Includes the following steps: In response to the user's selection of a target page element, the actual set of style parameters of the rendered target page element is automatically obtained through the proxy module integrated in the runtime environment. The system receives style adjustment instructions input by the user in natural language and maps the natural language instructions into professional style adjustment instructions through a semantic translation module. The professional style adjustment instructions include the target CSS property, operation type, and modification value. The actual style parameter set is combined with the professional style adjustment instructions to construct a structured compound prompt word, which is used to place the style adjustment requirement in the current style context of the element; The compound prompt words are input into the large model code platform to generate target CSS code for adjusting the style of the target page elements; The proxy module automatically applies the target CSS code to the target page element and updates the display effect in real time.

2. The method according to claim 1, characterized in that, The automatic acquisition of the actual style parameter set of the target page element after rendering, through a proxy module integrated into the runtime environment, specifically includes: The operating environment is a browser or an integrated development environment; The proxy module accesses the document object model and CSS object model by calling the debugging interface of the runtime environment to obtain the calculated final style values ​​of the elements.

3. The method according to claim 1, characterized in that, The process of mapping the natural language instructions into professional style adjustment instructions through the semantic translation module specifically includes: The natural language instructions are preprocessed and segmented to obtain a keyword sequence; The keyword sequence is matched with a predefined rule base to identify the corresponding CSS properties and operation logic. The rule base stores the mapping relationship between natural language phrases and CSS properties and operation logic. By combining the numerical modifiers identified from the keyword sequence, a machine-readable object containing the target CSS property, operation type, and modification value is generated as the professional style adjustment instruction.

4. The method according to claim 1, characterized in that, The structured compound prompt words shall contain at least the following parts: The system role definition section is used to define the role of large models as front-end code assistants; The current actual style parameter context section of the element is used to list the set of actual style parameters captured; The translated user style adjustment request section is used to describe the professional style adjustment instructions; The output format specification section defines the format requirements for the output code of the large model code platform.

5. A system for implementing the method as described in any one of claims 1 to 4, characterized in that, include: The element style parameter capture module is configured to automatically obtain the actual set of style parameters of the rendered element in response to the user's selection operation on the target page element. The user intent semantic translation module is configured to receive natural language style adjustment instructions from users and map them into professional style adjustment instructions that include target CSS properties, operation types, and modification values. The parameter injection and large model interaction module is configured to combine the actual style parameter set with the professional style adjustment instructions to construct structured compound prompt words, and interact with the large model code platform to obtain the generated target CSS code; The code application and iterative closed-loop module is configured to automatically apply the target CSS code to the target page element through the proxy module and update the display effect to form an iterative optimization closed loop.

6. An electronic device comprising a memory, a processor, and a computer program stored in the memory and executable on the processor, characterized in that, When the processor executes the program, it implements the steps of the method as described in any one of claims 1 to 4.

7. A computer-readable storage medium having a computer program stored thereon, characterized in that, When the program is executed by the processor, it implements the steps of the method as described in any one of claims 1 to 4.

Images