A method and device for generating page code according to a user-drawn region

Abstract

The present application relates to the technical field of image processing, and particularly relates to a method and device for generating page code according to a user circled region, the method is executed by a client, a target circled plug-in is run in the client, and the method comprises the following steps: obtaining a target region circled by a user through the target circled plug-in, generating a circled picture of the target region, uploading the circled picture to a code generation platform of a server end, so that the code generation platform identifies elements in the circled picture, generates front-end code, and returns the generated front-end code to the target circled plug-in through a network request mode, and the target circled plug-in displays the front-end code. The present application allows a user to find a satisfactory website type or design at any time, and generates executable front-end code through simple operation. The user can directly obtain inspiration from an existing website, and does not need to wait for preparation of design resources.

Description

Technical Field

[0001] This invention relates to the field of image processing technology, and more specifically to a method and apparatus for generating page code based on a user-selected area. Background Technology

[0002] Code generation technology refers to the techniques used to automatically convert input in a certain form into executable code using specific tools, algorithms, or methods. Examples include page sketches and detailed design documents, which contain information about the page's structure, layout, and style; this information can be extracted and converted into code by relevant tools.

[0003] Currently, mainstream code generation technologies primarily rely on design drafts. These drafts are typically created by professional designers using design software (such as Sketch, Adobe XD, Figma, etc.) and contain the website's visual and layout information. Without readily available design resources, developers find it difficult to quickly convert a website style or element they like into code. This means that even if a developer finds a satisfactory website design, without design resources, they cannot quickly imitate or implement a similar design.

[0004] In the above approach, this reliance on design drafts limits the speed and flexibility of development. Developers need to wait for design resources to be ready, increasing development time and the barrier to entry. Summary of the Invention

[0005] In view of this, the present invention provides a method and apparatus for generating page code based on a user-selected area, so as to solve the problem that code generation methods that rely on design drafts limit the speed and flexibility of development.

[0006] In a first aspect, the present invention provides a method for generating page code based on a user-selected area, the method being executed by a client, the client having a target selection plugin running, the method comprising:

[0007] The target area selected by the user is obtained through the target selection plugin;

[0008] The target area is selected into an image, and the selected image is uploaded to the code generation platform on the server side so that the code generation platform can identify the elements in the selected image, generate front-end code, and send the generated front-end code back to the target selection plugin via a network request.

[0009] The front-end code is displayed using the target selection plugin.

[0010] In one alternative implementation, the target selection plugin is built based on the following steps:

[0011] Functional requirement for obtaining request data for selection;

[0012] Based on the aforementioned functional requirements, the project structure for the target selection plugin was built and written; the project structure includes a manifest.json file, a content.js file, and a background.js file;

[0013] Based on the project structure, the target selection plugin was built; the target selection plugin is a Chrome browser plugin.

[0014] In one optional implementation, obtaining the target area selected by the user through the target selection plugin includes:

[0015] The target selection plugin obtains the user's mouse movement coordinates in real time through the content.js file and sends the final coordinates of the user's selection to the background.js file.

[0016] The target area selected by the user is determined using the background.js file based on the final coordinate information.

[0017] In one optional implementation, generating a circled image of the target area and uploading the circled image to a code generation platform on the server side includes:

[0018] The selected image is generated based on the image size and position parameters corresponding to the target area;

[0019] The generated data information of the selected image is added to the request body and uploaded to the code generation platform on the server.

[0020] Secondly, the present invention provides a method for generating page code based on a user-selected area, the method being executed by a server, the server running a code generation platform, the method comprising:

[0021] The target selection plugin generates a selection image based on the target area selected by the user;

[0022] The code generation platform identifies elements in the selected image, generates front-end code, and sends the generated front-end code back to the target selection plugin via a network request, so that the target selection plugin can display the front-end code.

[0023] In one optional implementation, the code generation platform has a built-in target large model, and the step of identifying elements in the selected image and generating front-end code through the code generation platform includes:

[0024] The elements in the selected image are identified based on the target large model; the elements include text, buttons, images, icons, and tables;

[0025] Based on the identified elements, the front-end code is generated using predefined rules and algorithms.

[0026] Thirdly, the present invention provides an apparatus for generating page code based on a user-selected area, the apparatus being executed by a client, the client having a target selection plugin running in it, the apparatus comprising:

[0027] The target area selection module is used to obtain the target area selected by the user through the target selection plugin;

[0028] The selected image generation module is used to generate a selected image of the target area and upload the selected image to the code generation platform on the server side, so that the code generation platform can identify the elements in the selected image, generate front-end code, and send the generated front-end code back to the target selection plugin through a network request.

[0029] The display module is used to display the front-end code through the target selection plugin.

[0030] Fourthly, the present invention provides an apparatus for generating page code based on a user-selected area, the apparatus being executed by a server, the server running a code generation platform, the apparatus comprising:

[0031] The image receiving module is used to obtain the image generated by the target selection plugin based on the target area selected by the user.

[0032] The front-end code generation module is used to identify elements in the selected image, generate front-end code, and send the generated front-end code back to the target selection plugin via a network request so that the target selection plugin can display the front-end code.

[0033] Fifthly, the present invention provides a system for generating page code based on a user-selected area, the system comprising: a client and a server, wherein a target selection plugin runs on the client and a code generation platform runs on the server;

[0034] The target selection plugin is used to obtain the target area selected by the user, generate a selection image of the target area, and upload the selection image to the code generation platform on the server side;

[0035] The code generation platform is used to identify elements in the selected image, generate front-end code, and send the generated front-end code back to the target selection plugin via a network request.

[0036] The target selection plugin is also used to display the front-end code.

[0037] In a sixth aspect, the present invention provides a computer device, comprising: a memory and a processor, the memory and the processor being communicatively connected to each other, the memory storing computer instructions, and the processor executing the computer instructions to perform a method for generating page code based on a user-selected area as described in the first aspect or any corresponding embodiment.

[0038] In a seventh aspect, the present invention provides a computer-readable storage medium storing computer instructions for causing a computer to perform a method for generating page code based on a user-selected area according to the first aspect or any corresponding embodiment described above.

[0039] Fifthly, the present invention provides a computer program product, including computer instructions for causing a computer to execute a method for generating page code based on a user-selected area as described in the first aspect or any corresponding embodiment thereof.

[0040] The technical solution provided by this invention may include the following beneficial effects:

[0041] This invention allows users to discover satisfactory website types or designs at any time and generate runnable front-end code through simple operations. Users can directly draw inspiration from existing websites without waiting for design resources to be prepared. By automatically generating code through user selection, this invention significantly lowers the barrier to code generation. Users do not need professional design skills or to design from scratch; they can quickly generate code through simple selection, simplifying the conversion process from design to code and improving development efficiency. Users can quickly convert their favorite website designs into runnable code, thereby accelerating the development process. Users can also select different elements and layouts as needed to generate personalized code. Attached Figure Description

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

[0043] Figure 1 This is a schematic diagram of the structure of a system for generating page code based on a user-selected area according to an embodiment of the present invention;

[0044] Figure 2 This is a flowchart illustrating a method for generating page code based on a user-selected area according to an embodiment of the present invention.

[0045] Figure 3 This is a flowchart illustrating another method for generating page code based on a user-selected area according to an embodiment of the present invention.

[0046] Figure 4 This is a structural block diagram of an apparatus for generating page code based on a user-selected area according to an embodiment of the present invention;

[0047] Figure 5 This is a structural block diagram of another apparatus for generating page code based on a user-selected area according to an embodiment of the present invention.

[0048] Figure 6 This is a schematic diagram of the hardware structure of a computer device according to an embodiment of the present invention. Detailed Implementation

[0049] To make the objectives, technical solutions, and advantages of the embodiments of the present invention clearer, 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, 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.

[0050] According to an embodiment of the present invention, a system embodiment for generating page code based on a user-selected area is provided. Figure 1 This is a schematic diagram of the structure of a system for generating page code based on a user-selected area according to an embodiment of the present invention, as shown below. Figure 1 As shown, the system includes: a client 110 and a server 120; the client 110 runs a target selection plugin 111, and the server 120 runs a code generation platform 121.

[0051] The target selection plugin 111 is used to obtain the target area selected by the user, generate a selection image of the target area, and upload the selection image to the code generation platform 121 of the server 120;

[0052] The code generation platform 121 is used to identify elements in the circled image, generate front-end code, and send the generated front-end code back to the target circled plugin 111 via a network request.

[0053] The target selection plugin 111 is also used to display the front-end code.

[0054] Furthermore, the client 110 is a user's device (such as a computer, tablet, or mobile phone) on which the target selection plugin 111 runs. The user interacts with the server 120 through this client 110. The server 120 is a remote computer or server that runs the code generation platform 121, which is responsible for processing requests from the client 110 and generating code.

[0055] Furthermore, the target selection plugin 111 can be a Chrome browser extension installed in the user's browser, allowing the user to select a specific area on a webpage. The user selects the area from which code is to be generated using this Chrome browser extension, which then generates a selection image of the selected area and uploads it to the code generation platform 121 on the server 120. This target selection plugin 111 serves as the interface between the user and the system, enabling the user to easily select webpage elements and generate corresponding code.

[0056] Furthermore, the code generation platform 121 runs on the server 120 and can be an AIGC system platform, responsible for processing the uploaded selected images. The code generation platform 121 identifies elements (such as text, buttons, images, etc.) in the selected images and generates front-end code (such as HTML, CSS, and JavaScript) based on these elements. The generated front-end code is sent back to the target selection plugin 111 on the client 110 via a network request. As the core processing unit, the code generation platform 121 is responsible for converting the user's visual selection into usable code. This embodiment simplifies the process from user selection to code generation, enabling users to easily extract design elements from existing web pages and quickly generate usable front-end code. Through the collaboration between the client 110 and the server 120, users can achieve efficient web page development, lowering the technical threshold.

[0057] In summary, this embodiment allows users to discover satisfactory website types or designs at any time and generate runnable front-end code through simple operations. Users can directly draw inspiration from existing websites without waiting for design resources to be prepared. By automatically generating code through user selection, this embodiment significantly lowers the barrier to code generation. Users do not need professional design skills or to start designing from scratch; they can quickly generate code through simple selection, simplifying the conversion process from design to code and improving development efficiency. Users can quickly convert their favorite website designs into runnable code, thereby accelerating the development process. Users can also select different elements and layouts as needed to generate personalized code.

[0058] According to an embodiment of the present invention, a method for generating page code based on a user-selected area is provided. It should be noted that the steps shown in the flowchart in the accompanying drawings can be executed in a computer system such as a set of computer-executable instructions. Furthermore, although a logical order is shown in the flowchart, in some cases, the steps shown or described may be executed in a different order than that shown here.

[0059] This embodiment provides a method for generating page code based on a user-selected area. The method is... Figure 1 The client 110 executes the command, and the target selection plugin 111 runs in the client 110. Figure 2 This is a flowchart of a method for generating page code based on a user-selected area according to an embodiment of the present invention, such as... Figure 2 As shown, the process includes the following steps:

[0060] Step S201: Obtain the target area selected by the user through the target selection plugin.

[0061] In one alternative implementation, the target selection plugin is built based on the following steps:

[0062] Functional requirement for obtaining request data for selection;

[0063] Based on this functional requirement, the project structure for the target selection plugin was built and written; the project structure includes a manifest.json file, a content.js file, and a background.js file;

[0064] Based on the project structure, a target selection plugin was built; this target selection plugin is a Chrome browser plugin.

[0065] Furthermore, this embodiment first uses an installed and activated Chrome browser plugin (i.e., the target selection plugin) to select the website area for which code is to be generated. When building the plugin, the functionality it needs to implement is first clarified: it must be able to respond to the user's selection action and obtain the selected area information. Based on these functional requirements, the plugin's project structure is built. This project structure typically includes several key files: `manifest.json` file: defines the plugin's basic information, such as name, version, and permission requirements; `content.js` file: the plugin's core script file, responsible for executing user interaction operations on the page, such as obtaining mouse movement coordinates; `background.js` file: runs in the background, responsible for processing the data sent by the `content.js` file, such as determining the area selected by the user. Based on the above project structure, using relevant development tools and technologies, the plugin is developed so that it can run in the Chrome browser.

[0066] In one optional implementation, step S201 includes:

[0067] The plugin obtains the user's mouse movement coordinates in real time through the content.js file and sends the final coordinates of the user's selection to the background.js file.

[0068] The background.js file uses the final coordinate information to determine the target area selected by the user.

[0069] Furthermore, when a user uses the mouse to select an area on a webpage, the `content.js` file listens for mouse events to obtain the mouse's movement coordinates in real time. These coordinates are continuously updated as the mouse moves, reflecting the dynamic changes in the selected area. When the user completes the selection (e.g., releasing the left mouse button), `content.js` sends the final coordinates of the selected area to `background.js`. Upon receiving the coordinates, `background.js` determines the selected area based on these coordinates and, according to the webpage's Document Object Model (DOM) structure and coordinate information, accurately calculates the position and extent of the selected area within the webpage.

[0070] Step S202: Generate a circled image of the target area and upload the circled image to the code generation platform on the server side so that the code generation platform can identify the elements in the circled image, generate front-end code, and send the generated front-end code back to the target circled plugin via a network request.

[0071] In one optional implementation, step S202 includes:

[0072] The selected image is generated based on the image size and position parameters corresponding to the target area;

[0073] Add the generated data information of the selected image to the request body and upload it to the code generation platform on the server.

[0074] Furthermore, in this embodiment, after determining the target area, the background.js file generates an image based on the area's position and extent on the webpage (i.e., image size and position parameters) using relevant technologies. For example, the HTML5 Canvas API can be used to generate the image by drawing the image corresponding to the selected area within a hidden Canvas element, or a screenshot library (such as html2canvas) can be used to generate the image according to size and position requirements. When uploading the selected image, the upload request is first prepared by determining the upload interface address of the server-side code generation platform, setting the request method to POST, and setting the Content-Type header according to the image format. Then, the generated selected image data is converted to a suitable format and added to the request body. Finally, a network request library is used to send the upload request to the server-side code generation platform.

[0075] Step S203: Display the front-end code using the target selection plugin.

[0076] Furthermore, after the server-side code generation platform identifies the elements in the selected image and generates front-end code, it sends the front-end code back to the target selection plugin via a network request. The target selection plugin's `background.js` file receives the returned front-end code and can use Chrome's local storage API to store the code locally for later use. The `background.js` file notifies the `content.js` file via a message passing mechanism that the front-end code is ready to be displayed. Upon receiving the notification, the `content.js` file retrieves the locally stored front-end code. The plugin has a corresponding user interface component for displaying the code, and the `content.js` file passes the front-end code to this user interface component. After receiving the code, the user interface component displays it in the appropriate area.

[0077] In summary, this embodiment allows users to discover satisfactory website types or designs at any time and generate runnable front-end code through simple operations. Users can directly draw inspiration from existing websites without waiting for design resources to be prepared. By automatically generating code through user selection, this embodiment significantly lowers the barrier to code generation. Users do not need professional design skills or to start designing from scratch; they can quickly generate code through simple selection, simplifying the conversion process from design to code and improving development efficiency. Users can quickly convert their favorite website designs into runnable code, thereby accelerating the development process. Users can also select different elements and layouts as needed to generate personalized code.

[0078] This embodiment provides another method for generating page code based on a user-selected area. This method is... Figure 1 The server-side component 120 executes, and the code generation platform 121 runs within this server-side component 120. Figure 3 This is a flowchart of another method for generating page code based on a user-selected area according to an embodiment of the present invention, such as... Figure 3 As shown, the process includes the following steps:

[0079] Step S301: Obtain the selection image generated by the target selection plugin based on the target area selected by the user.

[0080] Furthermore, prior to this step, the user has already selected the target area in the browser using the target selection plugin. The plugin generates a corresponding selected image based on the user's selection and uploads it to the server (in this embodiment's system architecture, the server runs a code generation platform). This step retrieves this uploaded selected image from the server for subsequent processing.

[0081] Step S302: The code generation platform identifies the elements in the selected image, generates front-end code, and sends the generated front-end code back to the target selection plugin via a network request so that the target selection plugin can display the front-end code.

[0082] In one optional implementation, step S302 includes:

[0083] Based on the target large model, elements in the selected image were identified; these elements include text, buttons, images, icons, and tables.

[0084] Based on the identified elements, the front-end code is generated using predefined rules and algorithms.

[0085] Furthermore, the code generation platform used on the server side in this implementation can be an AIGC system platform, which uses a target large model (an AI model with image recognition and analysis capabilities) to identify elements in the selected image. This target large model, after extensive learning and training, can identify various elements in the image, such as text, buttons, images, icons, and tables. When the code generation platform receives the selected image, the target large model analyzes it. For text elements, it can identify the text content and font style; for button elements, it can identify their shape, color, position, and any possible text labels; for image and icon elements, it can distinguish their type and position within the image; for table elements, it can identify the number of rows and columns, as well as the table header and cell content.

[0086] Furthermore, based on the identified elements, the code generation platform uses predefined rules and algorithms to generate front-end code. If text elements are identified, corresponding HTML tags and text content can be generated. For button elements, it can generate... <button>Labels are generated, and relevant attributes are set based on the characteristics of the buttons. For image and icon elements, tags can be generated. The tag can be set to `<image>`, and the `src` attribute can be set to point to the image source. For table elements, it can generate...

[0087]

[0088]

[0089] Figure 1 Figure 4

[0090]

[0091]

[0092]

[0093]

[0094]

[0095]

[0096]

[0097]

[0098]

[0099]

[0100]

[0101]

[0102]

[0103]

[0104] Figure 1 Figure 5

[0105]

[0106]

[0107]

[0108]

[0109]

[0110]

[0111]

[0112] Figure 6 Figure 6 Figure 6 Figure 6

[0113]

[0114]

[0115]

[0116]

[0117]

[0118]

[0119]

[0120] The platform generates front-end code by labeling and filling in the rows and columns of the table. The code generation platform then sends the generated front-end code back to the target selection plugin via a network request. First, it sets appropriate network request parameters, such as the request method (POST) and request headers (Content-Type), and formats the front-end code (e.g., converting it to JSON format) before sending the request. Upon receiving the returned code, the target selection plugin displays it. In summary, this embodiment allows users to discover satisfactory website types or designs at any time and generate runnable front-end code through simple operations. Users can directly draw inspiration from existing websites without waiting for design resources to be prepared. By automatically generating code through user selection, this embodiment significantly lowers the barrier to code generation. Users do not need professional design skills or to design from scratch; they can quickly generate code through simple selection, simplifying the conversion process from design to code and improving development efficiency. Users can quickly convert their favorite website designs into runnable code, thereby accelerating the development process. Users can also select different elements and layouts as needed to generate personalized code. This embodiment also provides an apparatus for generating page code based on a user-selected area. This apparatus is used to implement the above embodiments and preferred embodiments, and will not be repeated for details already described. As used below, the term "module" can be a combination of software and / or hardware that performs a predetermined function. Although the apparatus described in the following embodiments is preferably implemented in software, hardware implementation, or a combination of software and hardware, is also possible and contemplated. This embodiment provides an apparatus for generating page code based on a user-selected area. This apparatus is executed by a client 110, which runs a target selection plugin 111. As shown, it includes: a target area selection module 401, used to obtain the target area selected by the user through the target selection plugin; a selection image generation module 402, used to generate a selection image of the target area and upload the selection image to a code generation platform on the server side, so that the code generation platform can identify the elements in the selection image, generate front-end code, and send the generated front-end code back to the target selection plugin via a network request; and a display module 403, used to display the front-end code through the target selection plugin. In some optional implementations, the target selection plugin is built based on the following steps: obtaining the functional requirements of the request data to be selected; building and writing the project structure of the target selection plugin based on the functional requirements; the project structure includes a manifest.json file, a content.js file, and a background.js file; building the target selection plugin based on the project structure; the target selection plugin is a Chrome browser plugin.In some optional implementations, the target area selection module 401 is further configured to: obtain the user's mouse movement coordinates in real time through the content.js file of the target selection plugin, and send the final coordinates of the user's selection to the background.js file; and determine the target area selected by the user based on the final coordinates through the background.js file. In some optional implementations, the selection image generation module 402 is further configured to: generate the selection image based on the image size and position parameters corresponding to the target area; add the data information of the generated selection image to the request body, and upload it to the code generation platform on the server side. In summary, this embodiment allows users to discover satisfactory website types or designs at any time and generate runnable front-end code through simple operations. Users can directly obtain inspiration from existing websites without waiting for design resources to be prepared. By using the method of user selection of areas and automatic code generation, this embodiment greatly reduces the threshold for code generation. Users do not need to have professional design skills, nor do they need to start designing from scratch. They can quickly generate code through simple selection operations, simplifying the conversion process from design to code and improving development efficiency. Users can quickly convert their favorite website designs into runnable code, thereby accelerating the development process. Users can also select different elements and layouts as needed to generate personalized code. This embodiment provides another device for generating page code based on a user-selected area. This device is executed by a server 120, which runs a code generation platform 121, as shown, including: a selected image receiving module 501, used to acquire the selected image generated by the target selection plugin based on the target area selected by the user; and a front-end code generation module 502, used to identify elements in the selected image, generate front-end code, and send the generated front-end code back to the target selection plugin via a network request for display. In some optional embodiments, the front-end code generation module 502 is further used to: identify elements in the selected image based on the target large model; these elements include text, buttons, images, icons, and tables; and generate the front-end code based on the identified elements using predefined rules and algorithms. In summary, this embodiment allows users to discover satisfactory website types or designs at any time and generate runnable front-end code through simple operations. Users can draw inspiration directly from existing websites without waiting for design resources to be prepared. This embodiment significantly lowers the barrier to code generation by automatically generating code through user selection of areas. Users do not need professional design skills or to start designing from scratch; they can quickly generate code simply by selecting areas, simplifying the conversion process from design to code and improving development efficiency.Users can quickly convert their favorite website designs into runnable code, thereby accelerating the development process. Users can also select different elements and layouts as needed to generate personalized code. Further functional descriptions of the various modules and units described above are the same as in the corresponding embodiments described above, and will not be repeated here. Please refer to Figure 1, a schematic diagram of the structure of a computer device provided in an optional embodiment of the present invention. As shown, the computer device includes: one or more processors 610, a memory 620, and interfaces for connecting the various components, including high-speed interfaces and low-speed interfaces. The various components communicate with each other using different buses and can be installed on a common motherboard or otherwise installed as needed. The processor can process instructions executed within the computer device, including instructions stored in or on memory to display graphical information of a GUI on an external input / output device (such as a display device coupled to the interface). In some optional embodiments, multiple processors and / or multiple buses can be used with multiple memories and multiple memory units, if desired. Similarly, multiple computer devices can be connected, each providing some of the necessary operations (e.g., as a server array, a group of blade servers, or a multiprocessor system). A single processor 610 is used as an example in the figure. Processor 610 may be a central processing unit, a network processor, or a combination thereof. Processor 610 may further include a hardware chip. The hardware chip may be an application-specific integrated circuit (ASIC), a programmable logic device (PLD), or a combination thereof. The programmable logic device may be a complex programmable logic device (CAMP), a field-programmable gate array (FPGA), a general-purpose array logic (GPRS), or any combination thereof. Memory 620 stores instructions executable by at least one processor 610 to cause at least one processor 610 to perform the methods shown in the above embodiments. Memory 620 may include a program storage area and a data storage area. The program storage area may store the operating system and application programs required for at least one function; the data storage area may store data created based on the use of the computer device, etc. Furthermore, memory 620 may include high-speed random access memory (RAM) and may also include non-transitory memory, such as at least one disk storage device, flash memory device, or other non-transitory solid-state storage device. In some optional embodiments, memory 620 may optionally include memory remotely located relative to processor 610, and these remote memories may be connected to the computer device via a network. Examples of such networks include, but are not limited to, the Internet, intranets, local area networks (LANs), mobile communication networks, and combinations thereof. The memory 620 may include volatile memory, such as random access memory; the memory may also include non-volatile memory, such as flash memory, hard disk, or solid-state drive; the memory 620 may also include combinations of the above types of memory. The computer device also includes a communication interface 630 for communicating with other devices or communication networks.This invention also provides a computer-readable storage medium. The methods described above according to embodiments of the invention can be implemented in hardware or firmware, or implemented as computer code that can be recorded on a storage medium, or implemented as computer code downloaded via a network and originally stored on a remote storage medium or a non-transitory machine-readable storage medium and then stored on a local storage medium. Thus, the methods described herein can be processed by software stored on a storage medium using a general-purpose computer, a dedicated processor, or programmable or dedicated hardware. The storage medium can be a magnetic disk, optical disk, read-only memory, random access memory, flash memory, hard disk, or solid-state drive, etc.; further, the storage medium can also include combinations of the above types of memory. It is understood that a computer, processor, microprocessor controller, or programmable hardware includes storage components capable of storing or receiving software or computer code. When the software or computer code is accessed and executed by the computer, processor, or hardware, the methods shown in the above embodiments are implemented. A portion of this invention can be applied as a computer program product, such as computer program instructions, which, when executed by a computer, can invoke or provide the methods and / or technical solutions according to the invention through the operation of the computer. Those skilled in the art will understand that the forms in which computer program instructions exist in a computer-readable medium include, but are not limited to, source files, executable files, and installation package files. Correspondingly, the ways in which computer program instructions are executed by a computer include, but are not limited to: the computer directly executing the instruction; the computer compiling the instruction and then executing the corresponding compiled program; the computer reading and executing the instruction; or the computer reading and installing the instruction and then executing the corresponding installed program. Here, the computer-readable medium can be any available computer-readable storage medium or communication medium accessible to a computer. Although embodiments of the present invention have been described in conjunction with the accompanying drawings, those skilled in the art can make various modifications and variations without departing from the spirit and scope of the invention, and all such modifications and variations fall within the defined scope. < / button>

Claims

1. A method for generating page code based on a user-selected area, characterized in that, The method is executed by a client, which runs a target selection plugin. The method includes: The target area selected by the user is obtained through the target selection plugin; The target area is selected into an image, and the selected image is uploaded to the code generation platform on the server side so that the code generation platform can identify the elements in the selected image, generate front-end code, and send the generated front-end code back to the target selection plugin via a network request. The front-end code is displayed using the target selection plugin.

2. The method according to claim 1, characterized in that, The target selection plugin can be built based on the following steps: Functional requirement for obtaining request data for selection; Based on the aforementioned functional requirements, the project structure for the target selection plugin was built and written; the project structure includes a manifest.json file, a content.js file, and a background.js file; Based on the project structure, the target selection plugin was built; the target selection plugin is a Chrome browser plugin.

3. The method according to claim 2, characterized in that, The step of obtaining the target area selected by the user through the target selection plugin includes: The target selection plugin obtains the user's mouse movement coordinates in real time through the content.js file and sends the final coordinates of the user's selection to the background.js file. The target area selected by the user is determined using the background.js file based on the final coordinate information.

4. The method according to claim 1, characterized in that, The step of generating a circled image of the target area and uploading the circled image to the code generation platform on the server includes: The selected image is generated based on the image size and position parameters corresponding to the target area; The generated data information of the selected image is added to the request body and uploaded to the code generation platform on the server.

5. A method for generating page code based on a user-selected area, characterized in that, The method is executed by a server, which runs a code generation platform. The method includes: The target selection plugin generates a selection image based on the target area selected by the user; The code generation platform identifies elements in the selected image, generates front-end code, and sends the generated front-end code back to the target selection plugin via a network request, so that the target selection plugin can display the front-end code.

6. The method according to claim 5, characterized in that, The code generation platform has a built-in target large model. The step of identifying elements in the selected image and generating front-end code through the code generation platform includes: The elements in the selected image are identified based on the target large model; the elements include text, buttons, images, icons, and tables; Based on the identified elements, the front-end code is generated using predefined rules and algorithms.

7. An apparatus for generating page code based on a user-selected area, characterized in that, The device is executed by a client, which runs a target selection plugin. The device includes: The target area selection module is used to obtain the target area selected by the user through the target selection plugin; The selected image generation module is used to generate a selected image of the target area and upload the selected image to the code generation platform on the server side, so that the code generation platform can identify the elements in the selected image, generate front-end code, and send the generated front-end code back to the target selection plugin through a network request. The display module is used to display the front-end code through the target selection plugin.

8. An apparatus for generating page code based on a user-selected area, characterized in that, The device is executed by a server, which runs a code generation platform. The device includes: The image receiving module is used to obtain the image generated by the target selection plugin based on the target area selected by the user. The front-end code generation module is used to identify elements in the selected image, generate front-end code, and send the generated front-end code back to the target selection plugin via a network request so that the target selection plugin can display the front-end code.

9. A system for generating page code based on a user-selected area, characterized in that, The system includes a client and a server. The client runs a target selection plugin, and the server runs a code generation platform. The target selection plugin is used to obtain the target area selected by the user, generate a selection image of the target area, and upload the selection image to the code generation platform on the server side; The code generation platform is used to identify elements in the selected image, generate front-end code, and send the generated front-end code back to the target selection plugin via a network request. The target selection plugin is also used to display the front-end code.

10. A computer device, characterized in that, include: A memory and a processor are communicatively connected, the memory stores computer instructions, and the processor executes the computer instructions to perform a method for generating page code based on a user-selected area, as described in any one of claims 1 to 6.

Images