Page editing method and device, electronic equipment and storage medium

Abstract

The present disclosure relates to a page editing method and device, an electronic device and a storage medium. The method comprises: in a page editing interface, in response to an editing instruction for a target page, displaying reference page upload portal information; in the case of uploading a reference page image based on the reference page upload portal information, displaying page editing reference information recognized from the reference page image, the page editing reference information representing page component layout information and / or page visual style information; and in response to a confirmation instruction for the page editing reference information, displaying a page edited based on the page editing reference information. According to the technical solution provided by the present disclosure, the convenience of page editing is improved, and page editing is more convenient and efficient.

Description

Technical Field

[0001] This disclosure relates to the field of visual processing technology, and in particular to a page editing method, apparatus, electronic device, and storage medium. Background Technology

[0002] With the development of internet interaction and visual technology, online interactive pages are becoming increasingly rich. For example, the display elements in e-commerce product interactive pages (such as product detail pages and store pages) are becoming more diverse to attract more consumer attention. However, merchants often face limitations in their creativity and technical capabilities when designing product interactive pages, making it difficult to create pages that are both aesthetically pleasing and functional. Furthermore, improving the design quality of product interactive pages often requires the involvement of professional designers, which is time-consuming, results in slow response to page update requests, and detracts from page editing efficiency and flexibility. Summary of the Invention

[0003] This disclosure provides a page editing method, apparatus, electronic device, and storage medium, which can at least improve page editing efficiency and reduce page editing resource costs. The technical solution of this disclosure is as follows:

[0004] According to a first aspect of the present disclosure, a page editing method is provided, comprising:

[0005] In the page editing interface, in response to editing instructions on the target page, the upload entry information of the reference page is displayed;

[0006] When a reference page image is uploaded based on the reference page upload entry information, page editing reference information identified from the reference page image is displayed. The page editing reference information represents page component layout information and / or page visual style information. The page component layout information is used to represent the relative positional relationship of each page component in the reference page image.

[0007] In response to a confirmation instruction regarding the page editing reference information, the page after editing the target page based on the page editing reference information is displayed.

[0008] In one possible implementation, the step of displaying the upload entry information of the reference page in response to an editing instruction on the target page includes:

[0009] In response to an editing command on the target page, a page editing pop-up window is displayed; the page editing pop-up window displays the upload entry information of the reference page.

[0010] In one possible implementation, the page editing pop-up displays a first area and a second area, the first area displaying the reference page upload entry information; the page editing reference information includes the page component layout information; when uploading a reference page image based on the reference page upload entry information, displaying the page editing reference information identified from the reference page image includes:

[0011] When the reference page image is uploaded based on the reference page upload entry information, the layout information of the page components identified from the reference page image is displayed in the second area.

[0012] In one possible implementation, the page editing interface displays a canvas area for presenting the target page; the step of displaying the page after editing the target page based on the page editing reference information in response to a confirmation instruction for the page editing reference information includes:

[0013] In response to a confirmation instruction regarding the page component layout information, the page after layout editing of the target page based on the page component layout information is displayed in the canvas area.

[0014] In one possible implementation, the method further includes:

[0015] In response to a style content confirmation instruction based on the page component layout information, the second area is switched to display the editing result of the target page, wherein the page component layout of the target page in the editing result matches the page component layout information, and the visual style of the target page in the editing result matches the page visual style information.

[0016] In one possible implementation, the page editing interface displays a canvas area for presenting the target page; the method further includes:

[0017] Once the editing result is determined, the editing result of the target page is displayed in the canvas area.

[0018] In one possible implementation, the page editing interface also displays a component editing control area; the method further includes:

[0019] When a target component in the canvas area is triggered, at least one target component editing control is displayed in the component editing control area for editing the target component.

[0020] In response to a component adjustment instruction triggered by the target component editing control, the visual style or content of the target component is updated, and the updated visual style or content is as indicated by the target component editing control under the component adjustment instruction.

[0021] In one possible implementation, the page editing interface further displays a preview control of the target page, and the method further includes:

[0022] In response to the triggering operation of the preview control, the editing preview page corresponding to the target page is displayed; the editing preview page displays the target page presented in the canvas area in the preview state.

[0023] In one possible implementation, the method further includes:

[0024] In response to the component layout adjustment operation of the page editing reference information, update and display the page component layout information in the page editing reference information;

[0025] The component layout adjustment operation includes at least one of the following: component sorting adjustment operation, component deletion operation, component addition operation, and component visual adjustment operation.

[0026] In one possible implementation, the associated location of the reference page upload entry information displays multiple recommended first page images; when uploading a reference page image based on the reference page upload entry information, displaying page editing reference information identified from the reference page image includes:

[0027] When the reference page image among the plurality of first page images is selected for uploading, the uploaded reference page image is displayed, along with the page editing reference information identified from the reference page image.

[0028] In one possible implementation, the method further includes:

[0029] In response to a rejection instruction regarding the page editing reference information, a plurality of recommended second page images are displayed, which differ from the first page image in at least one of page component layout and visual style.

[0030] According to a second aspect of the present disclosure, a page editing apparatus is provided, comprising:

[0031] The reference page upload module is configured to execute in the page editing interface, responding to editing instructions on the target page and displaying the reference page upload entry information;

[0032] The page editing reference display module is configured to display page editing reference information identified from the reference page image when a reference page image is uploaded based on the reference page upload entry information. The page editing reference information represents page component layout information and / or page visual style information. The page component layout information is used to represent the relative positional relationship of each page component in the reference page image.

[0033] The edit page display module is configured to execute a confirmation command in response to the page editing reference information, and display the page after editing the target page based on the page editing reference information.

[0034] In one possible implementation, the reference page upload module includes:

[0035] The reference page upload unit is configured to execute a page editing pop-up window in response to an editing command on the target page; the page editing pop-up window displays the reference page upload entry information.

[0036] In one possible implementation, the page editing pop-up displays a first area and a second area, the first area displaying the reference page upload entry information; the page editing reference information includes the page component layout information; the page editing reference display module includes:

[0037] The first page editing reference display unit is configured to display the page component layout information identified from the reference page image in the second area when the reference page image is uploaded based on the reference page upload entry information.

[0038] In one possible implementation, the page editing interface displays a canvas area for presenting the target page; the page editing display module includes:

[0039] The page display editing unit is configured to execute a confirmation instruction for the page component layout information and display the page after the target page has been edited based on the page component layout information in the canvas area.

[0040] In one possible implementation, the device further includes:

[0041] The style content editing module is configured to execute a style content confirmation instruction in response to the page component layout information, and switch to display the editing result of the target page in the second area. The page component layout of the target page in the editing result matches the page component layout information, and the visual style of the target page in the editing result matches the page visual style information.

[0042] In one possible implementation, the page editing interface displays a canvas area for presenting the target page; the device further includes:

[0043] The editing result display module is configured to display the editing result of the target page in the canvas area when the editing result is determined.

[0044] In one possible implementation, the page editing interface further displays a component editing control area; the device also includes:

[0045] The component editing control display module is configured to display at least one target component editing control in the component editing control area for editing the target component when a target component in the canvas area is triggered.

[0046] The component adjustment module is configured to execute a component adjustment instruction triggered based on the target component editing control, and update the visual style or content of the target component, wherein the updated visual style or content is as indicated by the target component editing control under the component adjustment instruction.

[0047] In one possible implementation, the page editing interface further displays a preview control of the target page, and the device further includes:

[0048] The preview module is configured to perform an operation in response to a trigger on the preview control, and display an edit preview page corresponding to the target page; the edit preview page displays the target page as presented in the canvas area in the preview state.

[0049] In one possible implementation, the device further includes:

[0050] The component layout adjustment module is configured to perform a component layout adjustment operation in response to the page editing reference information, and update the page component layout information displayed in the page editing reference information;

[0051] The component layout adjustment operation includes at least one of the following: component sorting adjustment operation, component deletion operation, component addition operation, and component visual adjustment operation.

[0052] In one possible implementation, the associated location of the reference page upload entry information displays multiple recommended first page images; the page editing reference display module includes:

[0053] The second page editing reference display unit is configured to, when a reference page image is selected and uploaded among the plurality of first page images, display the uploaded reference page image and the page editing reference information identified from the reference page image.

[0054] In one possible implementation, the device further includes:

[0055] The recommendation switching module is configured to execute a rejection instruction on the page editing reference information and display a plurality of recommended second page images, which differ from the first page image in at least one of page component layout and visual style.

[0056] According to a third aspect of the present disclosure, an electronic device is provided, comprising: a processor; and a memory for storing processor-executable instructions; wherein the processor is configured to execute the instructions to implement the method as described in any one of the first aspects above.

[0057] According to a fourth aspect of the present disclosure, a computer-readable storage medium is provided such that, when instructions in the computer-readable storage medium are executed by a processor of an electronic device, the electronic device is enabled to perform any of the methods described in the first aspect of the present disclosure.

[0058] According to a fifth aspect of the present disclosure, a computer program product is provided, including computer instructions that, when executed by a processor, cause a computer to perform the method described in any one of the first aspects of the present disclosure.

[0059] The technical solutions provided by the embodiments of this disclosure have at least the following beneficial effects:

[0060] In the page editing interface, in response to editing instructions for the target page, reference page upload entry information is displayed. When a reference page image is uploaded based on this entry information, page editing reference information identified from the reference page image is displayed. This reference information represents page component layout information and / or page visual style information, with the layout information representing the relative positional relationships of each page component in the reference page image. In response to a confirmation instruction for the reference information, the page edited based on this information is displayed. This achieves automatic page editing. Only a reference page image needs to be provided; the page editing reference information identified from it can be automatically used to edit and display the target page, effectively reducing labor costs, increasing page editing efficiency, flexibility, and convenience, thus meeting the need for timely page updates.

[0061] It should be understood that the above general description and the following detailed description are exemplary and explanatory only, and are not intended to limit this disclosure. Attached Figure Description

[0062] The accompanying drawings, which are incorporated in and form part of this specification, illustrate embodiments consistent with this disclosure and, together with the description, serve to explain the principles of this disclosure, and are not intended to unduly limit this disclosure.

[0063] Figure 1 This is a schematic diagram illustrating an application environment according to an exemplary embodiment.

[0064] Figure 2 This is a flowchart illustrating a page editing method according to an exemplary embodiment.

[0065] Figure 3 This is a schematic diagram illustrating a page editing interface according to an exemplary embodiment.

[0066] Figure 4 This is a schematic diagram illustrating a page editing pop-up window according to an exemplary embodiment.

[0067] Figure 5 This is a schematic diagram illustrating how page component layout information is identified from a reference page image and displayed, according to an exemplary embodiment.

[0068] Figure 6 This is an exemplary embodiment illustrating a page layout diagram of a target page after layout editing based on page component layout information, displayed in a canvas area.

[0069] Figure 7 This is a schematic diagram illustrating, according to an exemplary embodiment, how to display editing results in a page editing pop-up window and in a canvas area.

[0070] Figure 8 This is a schematic diagram illustrating a recommended set of multiple first page images according to an exemplary embodiment.

[0071] Figure 9 This is a block diagram illustrating a page editing device according to an exemplary embodiment.

[0072] Figure 10 This is a block diagram illustrating an electronic device for page editing based on an exemplary embodiment.

[0073] Figure 11 This is a block diagram illustrating an electronic device for page editing according to an exemplary embodiment. Detailed Implementation

[0074] To enable those skilled in the art to better understand the technical solutions of this disclosure, the technical solutions in the embodiments of this disclosure will be clearly and completely described below with reference to the accompanying drawings.

[0075] It should be noted that the terms "first," "second," etc., used in the specification, claims, and accompanying drawings of this disclosure are used to distinguish similar objects and are not necessarily used to describe a specific order or sequence. It should be understood that such data can be interchanged where appropriate so that the embodiments of this disclosure described herein can be implemented in orders other than those illustrated or described herein. The embodiments described in the following exemplary embodiments do not represent all embodiments consistent with this disclosure. Rather, they are merely examples of apparatuses and methods consistent with some aspects of this disclosure as detailed in the appended claims.

[0076] Artificial intelligence (AI) is the theory, methods, technology, and application systems that use digital computers or computers-controlled machines to simulate, extend, and expand human intelligence, perceive the environment, acquire knowledge, and use that knowledge to achieve optimal results. AI software technology mainly includes computer vision, speech processing, natural language processing, and machine learning / deep learning.

[0077] In recent years, with the research and progress of artificial intelligence technology, artificial intelligence technology has been widely used in many fields. The solutions provided in this application involve computer vision technology, which will be specifically described through the following embodiments.

[0078] Please see Figure 1 , Figure 1 This is a schematic diagram illustrating an application environment according to an exemplary embodiment, such as... Figure 1 As shown, the application environment may include server 01 and terminal 02.

[0079] In an optional embodiment, terminal 02 can be used for page editing. Specifically, terminal 02 can be, but is not limited to, electronic devices such as desktop computers, laptops, tablets, smartphones, smart speakers, digital assistants, augmented reality (AR) / virtual reality (VR) devices, and smart wearable devices. Optionally, the operating system running on the electronic device can be, but is not limited to, Android, iOS, Linux, and Windows.

[0080] In an optional embodiment, server 01 can be used for backend support of page editing. Specifically, server 01 can be a standalone physical server, a server cluster or distributed system composed of multiple physical servers, or a cloud server that provides basic cloud computing services such as cloud services, cloud databases, cloud computing, cloud functions, cloud storage, network services, cloud communication, middleware services, domain name services, security services, CDN (Content Delivery Network), and big data and artificial intelligence platforms.

[0081] In addition, it should be noted that, Figure 1 The example shown is merely one application environment of the page editing method provided in this disclosure.

[0082] In the embodiments described in this specification, the server 01 and the terminal 02 can be directly or indirectly connected through wired or wireless communication, and this application does not impose any restrictions on this.

[0083] It should be noted that the following diagram illustrates one possible sequence of steps, and it is not strictly required to follow this order. Some steps can be performed in parallel without interdependence. The user information (including but not limited to user device information, user personal information, user behavior information, etc.) and data (including but not limited to data used for display, training data, etc.) involved in this disclosure are all information and data authorized by the user or fully authorized by all parties.

[0084] Figure 2 This is a flowchart illustrating a page editing method according to an exemplary embodiment. Figure 2 As shown, the steps may include the following.

[0085] In step S201, in the page editing interface, in response to the editing command for the target page, the upload entry information of the reference page is displayed.

[0086] In the embodiments described in this book, the page editing interface can refer to the interface used to edit (or decorate, design) the page. For example, in the page editing interface, the component layout and visual style of the target page can be designed, that is, the presentation content and style of the target page can be designed, which can be regarded as the decoration of the target page.

[0087] The target page can refer to the page to be edited, such as, but not limited to, a store page, product details page, personal homepage, etc., which are not limited in this disclosure. Correspondingly, the reference page can refer to a page that provides reference for the design of the target page, such as providing reference for component layout, visual style, etc. Optionally, for example, if account A wants to decorate its store page, it can use account B's store page as a reference, for example, it can take a screenshot of account B's store page as a reference for the subsequent decoration of account A's store page.

[0088] For example, the page editing interface can be as follows: Figure 3 As shown, the page editing interface can include three areas. Figure 3 The three regions shown are 31, 32, and 33. Figure 3 The area shown in 31 can be a component navigation area, which can display various components that can be used in the target page (such as image components, product components, etc.). For example, dragging a component to the canvas area can complete the design of that component in the target page. Figure 3 The area shown in section 32 can be a canvas area used to display the target page, which can be used to display the target page and dynamically edit the target page; and Figure 3 The area shown in section 33 can be the component editing control area. For example, if the "Notice Board" component is selected in the canvas area, Figure 3 The area shown in section 33 will update the "Announcement Board" component to the selected state and display various controls for editing the "Announcement Board" component, such as announcement content, announcement link, announcement style, etc., which are not limited in this disclosure.

[0089] In the embodiments of this specification, the editing instructions for the target page can be triggered by preset operations. These preset operations may include, but are not limited to, clicking the corresponding control, performing preset gestures, or inputting voice instructions for page editing. This disclosure does not limit these operations.

[0090] In one possible implementation, the page editing interface may also display information guiding users to the editing entry point of the target page, such as... Figure 3 As shown in 311, the method can further include generating the aforementioned editing instructions for the target page when the editing entry guidance information is triggered. For example, triggering the editing entry guidance information may include, but is not limited to, operations such as clicking, double-clicking, or long-pressing the editing entry guidance information; this disclosure does not limit this. By displaying the editing entry guidance information of the target page in the page editing interface, the automatic editing function of the page is effectively guided, resulting in a better interactive experience and full utilization of display resources.

[0091] See Figure 4In one possible implementation, the upload entry information for the reference page can be displayed as a pop-up window. Therefore, the above-mentioned display of the upload entry information for the reference page in response to an editing instruction on the target page can include: displaying a page editing pop-up window in response to an editing instruction on the target page; the page editing pop-up window displays the upload entry information for the reference page. For example, the page editing pop-up window can be as follows: Figure 4 As shown, the upload entry information on the reference page can be as follows: Figure 4 As shown in the left-hand area of ​​the edit pop-up window on the page, for example, the upload entry information on the reference page may include an upload icon and upload guidance text, which may be as follows: Figure 4 The "Click to upload or drag the image file directly into this area" text indicates that the upload icon can be the same as the icon above the upload guide text; this disclosure does not limit this. In one example, if you want to use the AI-generated matching decoration feature to decorate your store's homepage, you can click... Figure 3 As shown in 311, it can be displayed Figure 4 The page editing pop-up shown displays the upload entry information for a reference page. This allows users to upload a similar reference page based on this entry. By displaying the reference page upload entry information through the page editing pop-up, the display path for this information is shortened, interaction is more timely, and interaction efficiency is higher.

[0092] In step S203, when a reference page image is uploaded based on the reference page upload entry information, page editing reference information identified from the reference page image is displayed.

[0093] In the embodiments of this specification, page editing reference information can characterize page component layout information and / or page visual style information. The page component layout information can be used to characterize the relative positional relationships of each page component (i.e., a component) in the reference page image, and the page visual style information can be used to characterize the visual style of the reference page image. As an example, page editing reference information may include page component layout information and / or page visual style information, wherein the page component layout information may include, but is not limited to, page component layout images, page component layout description text, etc., and the page visual style information may include, but is not limited to, page visual style description text, page visual style images, page visual color style, etc.

[0094] In one possible implementation, a reference page image can be uploaded based on the reference page upload entry information. For example, images of other stores' pages can be searched from the store platform as reference page images, or store page images can be selected locally as reference page images. This disclosure does not limit this approach. Thus, the selected reference page image can be uploaded, for example... Figure 4As shown, a reference page image can be dragged into the area below the store screenshot to upload a reference page image based on the reference page upload entry information. Correspondingly, when uploading a reference page image based on the reference page upload entry information, page editing reference information identified from the reference page image can be displayed, such as page component layout information and / or page visual style information.

[0095] The page editing reference information identified from the reference page image can be obtained based on AI (Artificial Intelligence) technology. For example, a page recognition model for identifying page editing reference information can be pre-trained, which can be used to identify the component layout and visual style of the page image. Optionally, a component layout recognition model for identifying page components and a page style recognition model for identifying page visual styles can be trained separately; this disclosure does not limit this. Optionally, after uploading the reference page image, an animation can be loaded to indicate that the AI ​​is identifying the components in the reference page image and the sorting logic of each component, i.e., it is identifying the component layout information in the reference page image, which can improve the interactive experience.

[0096] For example, with Figure 4 The page editing pop-up shown here serves as an example, displaying the upload entry information and page editing reference information. Figure 4 The page editing pop-up displays a first area and a second area. For example, the first area can be displayed as follows: Figure 4 The area below the shop screenshot shown is the left-hand area in the page editing pop-up; the second area can be as follows: Figure 4 The area below the component recognition result is the right-hand area of ​​the page editing pop-up. The first area can display the reference page upload entry information; the page editing reference information can include page component layout information. Therefore, when uploading a reference page image based on the reference page upload entry information, displaying the page editing reference information identified from the reference page image can include: when uploading a reference page image based on the reference page upload entry information, displaying the page component layout information identified from the reference page image in the second area, for example... Figure 5 The second area shown displays a page component layout image, including the identified "Join Membership" component, "Coupon Zone" component, and "Store Hot Selling Items" component, as well as the order and position of each component on the page. The page editing pop-up displays reference page upload entry information and page editing reference information, allowing the upload of the reference page image and the display of the recognition results to be shown simultaneously. This makes the display of recognition results more efficient and allows for convenient viewing of the matching between the recognition results and the reference page image.

[0097] Optionally, the reference page image can be displayed in the first area after uploading. Based on this, the aforementioned recognition process can be triggered by activating a corresponding control when the reference page image is displayed in the first area, for example... Figure 4 The "Application Components" control, if triggered, can initiate the identification of page component layouts from a reference page image; or it can trigger... Figure 4 The "One-Click Generation" function can trigger the recognition of page component layout and visual style from a reference page image. This disclosure does not limit this. Additionally, the "Cancel" control can be used to cancel the current recognition result or to exit the page editing pop-up; this disclosure also does not limit this.

[0098] In step S205, in response to the confirmation instruction for the page editing reference information, the page after editing the target page based on the page editing reference information is displayed.

[0099] In the embodiments of this specification, the page editing reference information can be canceled or confirmed. If confirmed, a confirmation instruction for the page editing reference information can be triggered. Accordingly, in response to the confirmation instruction for the page editing reference information, the page after editing the target page based on the page editing reference information can be displayed. This disclosure does not limit the display method of the edited page.

[0100] For example, it can be triggered Figure 5 The "Apply Current Component" function in the document generates a confirmation instruction for page editing reference information, but this disclosure does not limit this function.

[0101] In one possible implementation, the page editing interface may also display a canvas area for presenting the target page. Based on this, the above-mentioned response to a confirmation instruction for page editing reference information, displaying the page after editing the target page based on the page editing reference information, may include: responding to a confirmation instruction for page component layout information, displaying the page after layout editing the target page based on the page component layout information in the canvas area. For example, clicking... Figure 5 The "Apply Current Component" option generates a confirmation instruction for the page editing reference information. Correspondingly, in response to the confirmation instruction for the page component layout information, the page editing pop-up can be hidden, and the page after layout editing based on the page component layout information can be displayed in the canvas area, for example... Figure 6 As shown. By responding to confirmation commands regarding the layout information of page components, the page after layout editing based on the page component layout information is displayed in the canvas area. This allows for better presentation of the target page and facilitates convenient use of editing tools in the page editing interface.

[0102] In the page editing interface, in response to editing instructions for the target page, reference page upload entry information is displayed; when a reference page image is uploaded based on the reference page upload entry information, page editing reference information identified from the reference page image is displayed, whereby the page editing reference information represents page component layout information and / or page visual style information; and in response to a confirmation instruction for the page editing reference information, the page after editing the target page based on the page editing reference information is displayed. This achieves automatic page editing. Only a reference page image needs to be provided, and the page editing reference information identified from the reference page image can be automatically identified for automatic editing and display of the target page. This effectively reduces labor costs, increases page editing efficiency, and provides better editing flexibility and convenience, thereby meeting the need for timely response to page updates.

[0103] See Figure 5 and Figure 7 In one optional implementation, the page component layout and visual style can be confirmed together. This allows for efficient and convenient generation of the same component layout and visual style for the target page. When users simultaneously prefer the component layout and visual style of a reference page, page editing efficiency is further improved. Based on this, the method may further include: responding to a style content confirmation instruction based on page component layout information, switching to displaying the editing result of the target page in the second area. The page component layout presented in the editing result matches the page component layout information, and the visual style presented in the editing result matches the page visual style information. For example, one can click... Figure 5 The "AI-generated similar content" option can trigger a confirmation command for generated style content. Correspondingly, the second area can switch to displaying the edited results of the target page, such as... Figure 7 The second area in the above image is shown; or, as shown in the diagram above. Figure 7 The image below is shown in the canvas area.

[0104] Optionally, in displaying such Figure 7 As shown in the diagram above, a confirmation logic layer can be added. Based on this, when a canvas area for presenting the target page is displayed in the page editing interface, the method may further include: upon confirming the editing result, displaying the editing result of the target page in the canvas area. For example, clicking... Figure 7The "Application Decoration" option in the image above can hide the page editing pop-up and display the edited result of the target page in the canvas area of ​​the page editing interface. This means displaying the target page after using the same component layout and visual style as the reference page image. By confirming the edit result, the display of the target page's edited result in the canvas area of ​​the page editing interface is triggered. This allows for a better view of the edited result and also enables convenient and efficient secondary editing using the editing functions within the page editing interface.

[0105] in, Figure 7 The "Cancel" control in the image above can be used to cancel the current editing result. For example, clicking it... Figure 7 The information displayed in the second area of ​​the "Cancel" control in the image above can be cleared, but this disclosure does not limit this.

[0106] In one possible implementation, the page editing interface described above may also display a component editing control area. Based on this, the method may further include re-editing the components displayed in the canvas area. For example, the method may further include: when a target component in the canvas area is triggered, at least one target component editing control for editing the target component may be displayed in the component editing control area. The target component can be any component in the canvas area. For example, clicking the target component "Coupon Zone Component" in the canvas area may display at least one target component editing control for editing the "Coupon Zone Component," such as a component content editing control, a component style editing control, a coupon link editing control, etc., which are not limited in this disclosure.

[0107] Furthermore, in response to a component adjustment command triggered by the target component's editing control, the visual style or content of the target component is updated. The updated visual style or content is as indicated by the target component's editing control under the component adjustment command. The target component's editing control can be any one of at least one target component editing control; for example, clicking any target component editing control can generate a component adjustment command. Accordingly, in response to a component adjustment command triggered by the target component's editing control, the visual style or content of the target component can be updated, thereby enabling further editing of the target component's visual style or content. By setting components in the canvas area to be dynamically triggered for editing, different components on the target page can be edited independently, improving the granularity of page editing operations and making page editing more flexible and precise.

[0108] Optionally, the layout of page components can also be adjusted, such as adding components, deleting components, adjusting component order, adjusting component area, etc., which are not limited in this disclosure. Based on this, the method may further include: updating the page component layout information in the displayed page editing reference information in response to the component layout adjustment operation on the page editing reference information. The component layout adjustment operation may include at least one of the following: component order adjustment operation, component deletion operation, component addition operation, and component visual adjustment operation. For example, a page component can be dragged to achieve a component order adjustment operation; or a page component can be selected to perform a deletion operation; a component addition operation can be achieved by inserting a new component on top of an existing page component; a component visual adjustment operation may include, but is not limited to, component area adjustment, component border style adjustment, component color adjustment, etc., which are not limited in this disclosure. By adjusting the identified page layout, the required page layout can be obtained flexibly and conveniently, saving the design cost of page component layout and meeting personalized page layout needs.

[0109] In one possible implementation, the page editing interface may also display a preview control of the target page, for example... Figure 7 The image below shows "View Preview". Based on this, the method may further include: in response to a trigger operation on the preview control, displaying the editing preview page corresponding to the target page, i.e., previewing the edited target page, which displays the target page presented in the canvas area in the preview state. By setting a preview control, the target page of the current decoration can be previewed based on the preview control, which can effectively provide feedback on the page editing effect, thereby improving page editing efficiency. Optionally, refer to... Figure 7 Alternatively, you can click "Save Draft" in the upper right corner to continue editing the page later; or you can click "Publish Now" in the upper right corner to apply the edits to the target page. If the platform verifies the edits, you can log in to the target page and see the target page as shown in the canvas area. Additionally, the "Save" button in the lower right corner can be used to save the edits at any time, and the "Cancel" button can be used to cancel the current editing operation or the edit results; this disclosure does not limit these options.

[0110] In one optional implementation, the reference page image can be recommended. Based on this, the associated location of the reference page upload entry information can display multiple recommended first page images. Accordingly, when uploading a reference page image based on the reference page upload entry information, displaying page editing reference information identified from the reference page image can include: when a reference page image is selected for upload among multiple first page images, displaying the uploaded reference page image and the page editing reference information identified from the reference page image. Wherein, multiple first page images...

[0111] For example, see Figure 8 The first area of ​​the page editing pop-up window can display multiple recommended first page images. If one of the first page images is selected, it can be used as a reference page image, allowing the upload of that reference page image. This reference page image is displayed in the first area, and page editing reference information identified from the reference page image can be displayed in the second area, such as... Figure 5 As shown, by recommending multiple first-page images for selecting a reference page image, uploading reference page images becomes more convenient and efficient. Furthermore, the recommended first-page images easily match user preferences, enhancing the page editing experience.

[0112] Optionally, if the user doesn't like the recommended multiple first-page images, they can switch between them. Based on this, the method may further include: in response to a rejection instruction for page editing reference information, displaying multiple recommended second-page images, which differ in at least one of page component layout and visual style; that is, they may differ in page component layout, or in visual style, or both. For example, clicking... Figure 8 The "Cancel" option can generate the aforementioned rejection instruction, thereby displaying multiple recommended second-page images to allow users to select their preferred component layout or visual style. Alternatively, a toggle control (e.g., ...) can be displayed near the multiple first-page images. Figure 8 The controls displayed above multiple first-page images allow for switching between recommended images, thus toggling the display of multiple recommended second-page images. By responding to a rejection command regarding page editing reference information, multiple recommended second-page images are displayed. These second-page images can differ from the first-page images in page component layout or visual style, allowing for flexible switching to view more recommended page images, making page editing more flexible and convenient.

[0113] Figure 9 This is a block diagram illustrating a page editing device according to an exemplary embodiment. (Refer to...) Figure 9 The device may include:

[0114] The reference page upload module 901 is configured to execute in the page editing interface, responding to editing instructions on the target page and displaying the reference page upload entry information;

[0115] The page editing reference display module 903 is configured to display page editing reference information identified from the reference page image when a reference page image is uploaded based on the reference page upload entry information. The page editing reference information represents page component layout information and / or page visual style information. The page component layout information is used to represent the relative positional relationship of each page component in the reference page image.

[0116] The page display module 905 is configured to execute a confirmation instruction for the page editing reference information and display the page after editing the target page based on the page editing reference information.

[0117] In the page editing interface, in response to editing instructions for the target page, reference page upload entry information is displayed; when a reference page image is uploaded based on the reference page upload entry information, page editing reference information identified from the reference page image is displayed, whereby the page editing reference information represents page component layout information and / or page visual style information; and in response to a confirmation instruction for the page editing reference information, the page after editing the target page based on the page editing reference information is displayed. This achieves automatic page editing. Only a reference page image needs to be provided, and the page editing reference information identified from the reference page image can be automatically identified for automatic editing and display of the target page. This effectively reduces labor costs, increases page editing efficiency, and provides better editing flexibility and convenience, thereby meeting the need for timely response to page updates.

[0118] In one possible implementation, the reference page upload module 901 may include:

[0119] The reference page upload unit is configured to execute a page editing pop-up window in response to an editing command on the target page; the page editing pop-up window displays the reference page upload entry information.

[0120] In one possible implementation, the page editing pop-up displays a first area and a second area, the first area displaying the reference page upload entry information; the page editing reference information includes the page component layout information; the page editing reference display module 903 may include:

[0121] The first page editing reference display unit is configured to display the page component layout information identified from the reference page image in the second area when the reference page image is uploaded based on the reference page upload entry information.

[0122] In one possible implementation, the page editing interface displays a canvas area for presenting the target page; the page editing display module 905 may include:

[0123] The page display editing unit is configured to execute a confirmation instruction for the page component layout information and display the page after the target page has been edited based on the page component layout information in the canvas area.

[0124] In one possible implementation, the device may further include:

[0125] The style content editing module is configured to execute a style content confirmation instruction in response to the page component layout information, and switch to display the editing result of the target page in the second area. The page component layout of the target page in the editing result matches the page component layout information, and the visual style of the target page in the editing result matches the page visual style information.

[0126] In one possible implementation, the page editing interface displays a canvas area for presenting the target page; the device may further include:

[0127] The editing result display module is configured to display the editing result of the target page in the canvas area when the editing result is determined.

[0128] In one possible implementation, the page editing interface further displays a component editing control area; the device may also include:

[0129] The component editing control display module is configured to display at least one target component editing control in the component editing control area for editing the target component when a target component in the canvas area is triggered.

[0130] The component adjustment module is configured to execute a component adjustment instruction triggered based on the target component editing control, and update the visual style or content of the target component, wherein the updated visual style or content is as indicated by the target component editing control under the component adjustment instruction.

[0131] In one possible implementation, the page editing interface further displays a preview control of the target page, and the device may further include:

[0132] The preview module is configured to perform an operation in response to a trigger on the preview control, and display an edit preview page corresponding to the target page; the edit preview page displays the target page as presented in the canvas area in the preview state.

[0133] In one possible implementation, the device further includes:

[0134] The component layout adjustment module is configured to perform a component layout adjustment operation in response to the page editing reference information, and update the page component layout information displayed in the page editing reference information;

[0135] The component layout adjustment operation includes at least one of the following: component sorting adjustment operation, component deletion operation, component addition operation, and component visual adjustment operation.

[0136] In one possible implementation, the associated location of the reference page upload entry information displays multiple recommended first page images; the page editing reference display module 903 may include:

[0137] The second page editing reference display unit is configured to, when a reference page image is selected and uploaded among the plurality of first page images, display the uploaded reference page image and the page editing reference information identified from the reference page image.

[0138] In one possible implementation, the device may further include:

[0139] The recommendation switching module is configured to execute a rejection instruction on the page editing reference information and display a plurality of recommended second page images, which differ from the first page image in at least one of page component layout and visual style.

[0140] Regarding the apparatus in the above embodiments, the specific manner in which each module performs its operation has been described in detail in the embodiments related to the method, and will not be elaborated upon here.

[0141] Figure 10 This is a block diagram illustrating an electronic device for page editing based on an exemplary embodiment. The electronic device may be a terminal, and its internal structure diagram may be as follows: Figure 10As shown, the electronic device includes a processor, memory, network interface, display screen, and input devices connected via a system bus. The processor provides computing and control capabilities. The memory includes a non-volatile storage medium and internal memory. The non-volatile storage medium stores the operating system and computer programs. The internal memory provides an environment for the operation of the operating system and computer programs stored in the non-volatile storage medium. The network interface is used to communicate with external terminals via a network connection. When the computer program is executed by the processor, it implements a page editing method. The display screen can be a liquid crystal display (LCD) or an e-ink display. The input devices can be a touch layer covering the display screen, buttons, a trackball, or a touchpad mounted on the device's casing, or an external keyboard, touchpad, or mouse.

[0142] Those skilled in the art will understand that Figure 10 The structure shown is merely a block diagram of a portion of the structure related to the present disclosure and does not constitute a limitation on the electronic device to which the present disclosure is applied. A specific electronic device may include more or fewer components than those shown in the figure, or combine certain components, or have different component arrangements.

[0143] Figure 11 This is a block diagram illustrating an electronic device for page editing according to an exemplary embodiment. The electronic device may be a server, and its internal structure diagram may be as follows: Figure 11 As shown, this electronic device includes a processor, memory, and a network interface connected via a system bus. The processor provides computing and control capabilities. The memory includes a non-volatile storage medium and internal memory. The non-volatile storage medium stores the operating system and computer programs. The internal memory provides an environment for the operation of the operating system and computer programs in the non-volatile storage medium. The network interface is used to communicate with external terminals via a network connection. When executed by the processor, the computer program implements a page editing method.

[0144] Those skilled in the art will understand that Figure 11 The structure shown is merely a block diagram of a portion of the structure related to the present disclosure and does not constitute a limitation on the electronic device to which the present disclosure is applied. A specific electronic device may include more or fewer components than those shown in the figure, or combine certain components, or have different component arrangements.

[0145] In an exemplary embodiment, an electronic device is also provided, including: a processor; and a memory for storing processor-executable instructions; wherein the processor is configured to execute the instructions to implement the page editing method as described in the embodiments of this disclosure.

[0146] In an exemplary embodiment, a computer-readable storage medium is also provided, which, when executed by a processor of an electronic device, enables the electronic device to perform the page editing method of the present disclosure embodiments. The computer-readable storage medium may be a ROM, random access memory (RAM), CD-ROM, magnetic tape, floppy disk, or optical data storage device, etc.

[0147] In an exemplary embodiment, a computer program product including instructions is also provided, which, when run on a computer, causes the computer to perform the page editing method of the embodiments of this disclosure.

[0148] Those skilled in the art will understand that all or part of the processes in the methods of the above embodiments can be implemented by a computer program instructing related hardware. This computer program can be stored in a non-volatile computer-readable storage medium. When executed, the computer program can include the processes of the embodiments of the above methods. Any references to memory, storage, databases, or other media used in the embodiments provided in this application can include non-volatile and / or volatile memory. Non-volatile memory can include read-only memory (ROM), programmable ROM (PROM), electrically programmable ROM (EPROM), electrically erasable programmable ROM (EEPROM), or flash memory. Volatile memory can include random access memory (RAM) or external cache memory. By way of illustration and not limitation, RAM is available in various forms, such as static RAM (SRAM), dynamic RAM (DRAM), synchronous DRAM (SDRAM), dual data rate SDRAM (DDRSDRAM), enhanced SDRAM (ESDRAM), synchronous link DRAM (SLDRAM), RAMbus direct RAM (RDRAM), direct memory bus dynamic RAM (DRDRAM), and RAMbus dynamic RAM (RDRAM), etc.

[0149] Other embodiments of this disclosure will readily occur to those skilled in the art upon consideration of the specification and practice of the invention disclosed herein. This application is intended to cover any variations, uses, or adaptations of this disclosure that follow the general principles of this disclosure and include common knowledge or customary techniques in the art not disclosed herein. The specification and examples are to be considered exemplary only, and the true scope and spirit of this disclosure are indicated by the following claims.

[0150] It should be understood that this disclosure is not limited to the precise structures described above and shown in the accompanying drawings, and various modifications and changes can be made without departing from its scope. The scope of this disclosure is limited only by the appended claims.

Claims

1. A page editing method, characterized in that, include: In the page editing interface, in response to the editing command on the target page, the upload entry information of the reference page is displayed; The target page refers to the page to be edited; the reference page refers to the page that provides reference for the design of the target page. When a reference page image is uploaded based on the reference page upload entry information, page editing reference information identified from the reference page image is displayed. The page editing reference information represents page component layout information and page visual style information. The page component layout information is used to represent the relative positional relationship of each page component in the reference page image. The page visual style information is used to characterize the visual style of the reference page image; In response to a confirmation instruction regarding the page editing reference information, the page after editing the target page based on the page editing reference information is displayed; The associated location of the upload entry information on the reference page displays multiple recommended first page images; When uploading a reference page image based on the reference page upload entry information, displaying page editing reference information identified from the reference page image includes: When the reference page image among the plurality of first page images is selected for uploading, the uploaded reference page image is displayed, along with the page editing reference information identified from the reference page image.

2. The method according to claim 1, characterized in that, The response to the editing command on the target page, displaying the upload entry information of the reference page, includes: In response to an editing command on the target page, a page editing pop-up window is displayed; the page editing pop-up window displays the upload entry information of the reference page.

3. The method according to claim 2, characterized in that, The page editing pop-up window displays a first area and a second area, and the first area displays the upload entry information of the reference page; The page editing reference information includes the page component layout information; When uploading a reference page image based on the reference page upload entry information, displaying page editing reference information identified from the reference page image includes: When the reference page image is uploaded based on the reference page upload entry information, the layout information of the page components identified from the reference page image is displayed in the second area.

4. The method according to claim 3, characterized in that, The page editing interface displays a canvas area for presenting the target page; The step of responding to a confirmation instruction regarding the page editing reference information by displaying a page after editing the target page based on the page editing reference information includes: In response to a confirmation instruction regarding the page component layout information, the page after layout editing of the target page based on the page component layout information is displayed in the canvas area.

5. The method according to claim 3, characterized in that, The method further includes: In response to a style content confirmation instruction based on the page component layout information, the second area is switched to display the editing result of the target page, wherein the page component layout of the target page in the editing result matches the page component layout information, and the visual style of the target page in the editing result matches the page visual style information.

6. The method according to claim 5, characterized in that, The page editing interface displays a canvas area for presenting the target page; the method further includes: Once the editing result is determined, the editing result of the target page is displayed in the canvas area.

7. The method according to claim 4 or 6, characterized in that, The page editing interface also displays a component editing control area; the method further includes: When a target component in the canvas area is triggered, at least one target component editing control is displayed in the component editing control area for editing the target component. In response to a component adjustment instruction triggered by the target component editing control, the visual style or content of the target component is updated, and the updated visual style or content is as indicated by the target component editing control under the component adjustment instruction.

8. The method according to claim 4 or 6, characterized in that, The page editing interface also displays a preview control of the target page, and the method further includes: In response to the triggering operation of the preview control, the editing preview page corresponding to the target page is displayed; the editing preview page displays the target page presented in the canvas area in the preview state.

9. The method according to claim 1, characterized in that, The method further includes: In response to the component layout adjustment operation of the page editing reference information, update and display the page component layout information in the page editing reference information; The component layout adjustment operation includes at least one of the following: component sorting adjustment operation, component deletion operation, component addition operation, and component visual adjustment operation.

10. The method according to claim 1, characterized in that, The method further includes: In response to a rejection instruction regarding the page editing reference information, a plurality of recommended second page images are displayed, which differ from the first page image in at least one of page component layout and visual style.

11. A page editing device, characterized in that, include: The reference page upload module is configured to execute in the page editing interface, responding to editing instructions on the target page and displaying the reference page upload entry information; The target page refers to the page to be edited; the reference page refers to the page that provides reference for the design of the target page. The page editing reference display module is configured to display page editing reference information identified from the reference page image when a reference page image is uploaded based on the reference page upload entry information. The page editing reference information represents page component layout information and page visual style information. The page component layout information is used to represent the relative positional relationship of each page component in the reference page image. The page visual style information is used to characterize the visual style of the reference page image; The edit page display module is configured to execute a confirmation command in response to the page editing reference information, and display the page after editing the target page based on the page editing reference information; The associated location of the upload entry information on the reference page displays multiple recommended first page images; The page editing reference display module includes: The second page editing reference display unit is configured to, when a reference page image is selected and uploaded among the plurality of first page images, display the uploaded reference page image and the page editing reference information identified from the reference page image.

12. An electronic device, characterized in that, include: processor; Memory used to store the processor's executable instructions; The processor is configured to execute the instructions to implement the page editing method as described in any one of claims 1 to 10.

13. A computer-readable storage medium, characterized in that, When the instructions in the computer-readable storage medium are executed by the processor of the electronic device, the electronic device is able to perform the page editing method as described in any one of claims 1 to 10.

14. A computer program product, characterized in that, It includes computer instructions that, when executed by a processor, cause the computer to perform the page editing method as described in any one of claims 1 to 10.

Images