Page editing method and device, electronic equipment and storage medium

By displaying the incoming information on the reference page in the page editing interface and identifying the page editing reference information, the target page is automatically edited, and the problems of low page design efficiency and untimely update response in the existing technology are solved, and efficient and flexible page editing is achieved.

CN119621056AActive Publication Date: 2025-03-14BEIJING DAJIA INTERNET INFORMATION TECH CO LTD
View PDF 6 Cites 0 Cited by

Patent Information

Application Number
CN202411748606.3
Authority / Receiving Office
CN · China
Patent Type
Applications(China)
Current Assignee / Owner
Filing Date
2024-11-29
Publication Date
2025-03-14
Estimated Expiration
2044-11-29

AI Technical Summary

Technical Problem

It is difficult to quickly and efficiently design beautiful and practical online interactive pages, and the page editing efficiency is low, the update response is not timely, and the resource cost is high.

Method used

In the page editing interface, in response to the editing instructions, the entry information uploaded on the reference page is displayed, and the page editing reference information is recognized based on the uploaded reference page image, including page component layout information and visual style information, and the target page is automatically edited.

Benefits of technology

It realizes automatic editing of pages, reduces labor costs, improves editing efficiency and flexibility, and can respond to page update needs in a timely manner.

✦ Generated by Eureka AI based on patent content.

Smart Images

  • Figure CN119621056A_ABST
    Figure CN119621056A_ABST
Patent Text Reader

Abstract

The invention relates to a page editing method and device, electronic equipment and a storage medium. The method comprises the steps that in a page editing interface, in response to an editing instruction for a target page, reference page uploading entry information is displayed; under the condition that a reference page image is uploaded based on the reference page upload entry information, page editing reference information obtained through recognition from the reference page image is displayed, and 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, displaying a page after editing the target page based on the page editing reference information. According to the technical scheme provided by the invention, the convenience of page editing is improved, so that the page editing is more convenient and efficient.
Need to check novelty before this filing date? Find Prior Art

Description

Technical Field

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

[0002] With the development of Internet interaction and visual technology, online interactive pages are becoming more and more abundant. For example, the display elements in the product interactive pages (such as product details pages, store pages, etc.) in the e-commerce industry are becoming more and more diverse, in order to attract more consumers' attention. In the related art, merchants are often limited by their own creativity and technical level when designing product interactive pages, and it is difficult to produce pages that are both beautiful and practical. In order to improve the design quality of product interactive pages, page design often requires the participation of professional designers, which is time-consuming, and the response to page update needs is not timely. The efficiency and flexibility of page editing are all poor. Summary of the invention

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

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

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

[0006] In the case of uploading a reference page image based on the reference page upload entry information, displaying page editing reference information identified from the reference page image, wherein 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 position relationship of each page component in the reference page image;

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

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

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

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

[0011] In the case where the reference page image is uploaded based on the reference page upload entry information, the page component layout information identified from the reference page image is displayed in the second area.

[0012] In a possible implementation, a canvas area for presenting the target page is displayed in the page editing interface; and in response to a confirmation instruction for the page editing reference information, displaying a page after the target page is edited based on the page editing reference information includes:

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

[0014] In a 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, the page component layout presented by the target page in the editing result matches the page component layout information, and the visual style presented by the target page in the editing result matches the page visual style information.

[0016] In a possible implementation, a canvas area for presenting the target page is displayed in the page editing interface; and the method further includes:

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

[0018] In a possible implementation, a component editing control area is also displayed in the page editing interface; and the method further includes:

[0019] In case of triggering a target component in the canvas area, displaying at least one target component editing control corresponding to the target component in the component editing control area;

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

[0021] In a possible implementation, a preview control of the target page is also displayed in the page editing interface, and the method further includes:

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

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

[0024] In response to a component layout adjustment operation on the page editing reference information, updating and displaying the page component layout information in the page editing reference information;

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

[0026] In a possible implementation, a plurality of recommended first page images are displayed at a location associated with the reference page upload entry information; and in the case where a reference page image is uploaded based on the reference page upload entry information, displaying page editing reference information identified from the reference page image includes:

[0027] In the case where the reference page image among the plurality of first page images is selected for uploading, the uploaded reference page image is displayed, and the page editing reference information identified from the reference page image is displayed.

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

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

[0030] According to a second aspect of an embodiment of the present disclosure, there is provided a page editing device, comprising:

[0031] A reference page upload module is configured to be executed in the page editing interface, and to display reference page upload entry information in response to an editing instruction for a target page;

[0032] A 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, wherein 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 position relationship of each page component in the reference page image;

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

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

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

[0036] In a possible implementation, the page editing pop-up window displays a first area and a second area, wherein the first area displays the reference page upload entry information; the page editing reference information includes the page component layout information; and 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 a possible implementation, a canvas area for presenting the target page is displayed in the page editing interface; and the editing page display module includes:

[0039] The edited page display unit is configured to execute a confirmation instruction on the page component layout information in response to displaying a page after the layout of the target page is edited based on the page component layout information in the canvas area.

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

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

[0042] In a possible implementation, a canvas area for presenting the target page is displayed in the page editing interface; and 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 a possible implementation, a component editing control area is also displayed in the page editing interface; and the device further includes:

[0045] A component editing control display module is configured to display at least one target component editing control corresponding to the target component in the component editing control area when a target component in the canvas area is triggered;

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

[0047] In a possible implementation, a preview control of the target page is also displayed in the page editing interface, and the device further includes:

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

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

[0050] A component layout adjustment module is configured to execute a component layout adjustment operation in response to the page editing reference information, and update and display the page component layout information in the page editing reference information;

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

[0052] In a possible implementation, a plurality of recommended first page images are displayed at a location associated with the reference page upload entry information; and the page editing reference display module includes:

[0053] The second page editing reference display unit is configured to display the uploaded reference page image and the page editing reference information identified from the reference page image when the reference page image among the multiple first page images is selected for upload.

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

[0055] The recommendation switching module is configured to execute, in response to a rejection instruction for the page editing reference information, displaying a plurality of recommended second page images, wherein the plurality of second page images are different from the first page image in at least one of page component layout and visual style.

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

[0057] According to a fourth aspect of an embodiment of the present disclosure, a computer-readable storage medium is provided. When instructions in the computer-readable storage medium are executed by a processor of an electronic device, the electronic device is enabled to execute any method described in the first aspect of the embodiment of the present disclosure.

[0058] According to a fifth aspect of an embodiment of the present disclosure, a computer program product is provided, comprising computer instructions, which, when executed by a processor, enable a computer to execute any one of the methods described in the first aspect of an embodiment of the present disclosure.

[0059] The technical solution provided by the embodiments of the present disclosure brings at least the following beneficial effects:

[0060] In the page editing interface, in response to an editing instruction for a target page, reference page upload entry information is displayed; in the case of uploading a reference page image 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; and in response to a confirmation instruction for the page editing reference information, a page after the target page is edited based on the page editing reference information is displayed. Automatic page editing is achieved, and only a reference page image needs to be provided to automatically identify the page editing reference information obtained from the reference page image, so as to automatically edit and display the target page, effectively reducing labor costs, making page editing more efficient, and making editing more flexible and convenient, thereby meeting the needs for timely response to page updates.

[0061] It is to be understood that the foregoing general description and the following detailed description are exemplary and explanatory only and are not restrictive of the present disclosure. BRIEF DESCRIPTION OF THE DRAWINGS

[0062] The drawings herein are incorporated into and constitute a part of the specification, illustrate embodiments consistent with the present disclosure, and together with the description are used to explain the principles of the present disclosure, and do not constitute improper limitations on the present disclosure.

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

[0064] Figure 2 The figure is a flow chart of a page editing method according to an exemplary embodiment.

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

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

[0067] Figure 5 The diagram is a schematic diagram showing a method of identifying and displaying page component layout information from a reference page image according to an exemplary embodiment.

[0068] Figure 6 The present invention is a schematic diagram showing a page after layout editing of a target page based on page component layout information in a canvas area according to an exemplary embodiment.

[0069] Figure 7 It is a schematic diagram showing displaying the editing result in a page editing pop-up window and displaying the editing result in a canvas area according to an exemplary embodiment.

[0070] Figure 8 It is a schematic diagram showing a display of a plurality of recommended first page images according to an exemplary embodiment.

[0071] Fig. 9 The figure is a block diagram of a page editing device according to an exemplary embodiment.

[0072] Fig.10 The block diagram of an electronic device for page editing is shown based on an exemplary embodiment.

[0073] Fig.11 It is a block diagram of an electronic device for page editing according to an exemplary embodiment. DETAILED DESCRIPTION

[0074] In order to enable ordinary persons in the art to better understand the technical solutions of the present disclosure, the technical solutions in the embodiments of the present disclosure will be clearly and completely described below in conjunction with the accompanying drawings.

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

[0076] Artificial Intelligence (AI) is the theory, method, technology and application system that uses digital computers or machines controlled by digital computers to simulate, extend and expand human intelligence, perceive the environment, acquire knowledge and use knowledge to obtain the best results. Artificial intelligence software technology mainly includes computer vision technology, speech processing technology, natural language processing technology 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 solution provided in the embodiment of the present application involves computer vision technology, which is specifically explained through the following embodiments.

[0078] See also Figure 1 , Figure 1 is a schematic diagram of an application environment according to an exemplary embodiment. Figure 1 As shown, the application environment may include a server 01 and a terminal 02 .

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

[0080] In an optional embodiment, server 01 can be used for background support of page editing. Specifically, server 01 can be an independent physical server, or 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 communications, 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 What is shown is only one application environment of the page editing method provided by the present disclosure.

[0082] In the embodiments of this specification, the server 01 and the terminal 02 may be directly or indirectly connected via wired or wireless communication, and this application does not impose any limitation thereto.

[0083] It should be noted that the following figure shows a possible order of steps, which is not actually limited to this order. Some steps can be executed in parallel without relying on each other. 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 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 FIG. 1 is a flow chart of a page editing method according to an exemplary embodiment. Figure 2 As shown, the following steps may be included.

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

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

[0087] The target page may refer to a page to be edited, for example, including but not limited to a store page, a product details page, a personal homepage, etc., which is not limited in the present disclosure. Accordingly, the reference page may refer to a page that provides a reference for the design of the target page, such as providing references for component layout, visual style, etc. Optionally, for example, if the store page of account A wants to be decorated, the store page of account B can be used as a reference, for example, the store page image of the store page of account B can be captured as a reference for the subsequent decoration of the store page of account A.

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

[0089] In the embodiments of this specification, the editing instruction for the target page can be triggered by a preset operation, which may include but is not limited to clicking a corresponding control, executing a preset gesture, inputting a voice indicating page editing, etc., and this disclosure does not limit this.

[0090] In a possible implementation, the page editing interface may also display editing entry guidance information of the target page, such as Figure 3 As shown in 311 in . Based on this, the method may also include: when the editing entry guidance information is triggered, generating the above-mentioned editing instructions for the target page. Exemplarily, the editing entry guidance information being triggered may include but is not limited to operations such as the editing entry guidance information being clicked, double-clicked, and long-pressed, and the present 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, the interactive guidance experience is better, and the display resources are fully utilized.

[0091] See also Figure 4In a possible implementation, the reference page upload entry information may be displayed in a pop-up window. Based on this, the above-mentioned display of the reference page upload entry information in response to the editing instruction of the target page may include: displaying a page editing pop-up window in response to the editing instruction of the target page; the reference page upload entry information is displayed in the page editing pop-up window. Exemplarily, the page editing pop-up window may be as follows: Figure 4 As shown, the reference page upload entry information can be as follows Figure 4 As shown in the left area of ​​the page editing pop-up window, for example, the reference page upload entry information may include an upload icon and an upload guide text, and the upload guide text may be as follows: Figure 4 In the “Click to upload or directly drag the image file into this area”, the upload icon can be the icon above the upload guide text, and the present disclosure does not limit this. In one example, if you want to use AI to generate the same decoration function to decorate the store homepage, you can click Figure 3 311 shown in the figure, so that Figure 4 The page editing pop-up window shown in the figure displays the reference page upload entry information, so that the reference page of the same model can be uploaded based on the reference page upload entry information. By displaying the page editing pop-up window to display the reference page upload entry information, the reference page upload entry information display path is shortened, the interaction is more timely, and the interaction efficiency is higher.

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

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

[0094] In a possible implementation, a reference page image can be uploaded based on the reference page upload entry information, for example, a page image of another store can be searched from the store platform as a reference page image, or a store page image can be selected locally as a reference page image, which is not limited in the present disclosure. Thus, the selected reference page image can be uploaded, for example Figure 4As shown, the reference page image can be dragged into the area under the store screenshot to achieve the purpose of uploading the reference page image based on the reference page upload entry information. Accordingly, in the case of uploading the reference page image based on the reference page upload entry information, the page editing reference information identified from the reference page image can be displayed, such as the page component layout information and / or the page visual style information.

[0095] Among them, the page editing reference information identified from the reference page image can be identified based on AI (Artificial Intelligence) technology. For example, a page recognition model for identifying page editing reference information can be pre-trained, and the page recognition model can be used to identify the component layout and page visual style in the page image. Optionally, a component layout recognition model for identifying page components and a page style recognition model for identifying the page visual style can also be trained separately, and the present disclosure is not limited to this. Optionally, after uploading the reference page image, an animation can be loaded to prompt that the AI ​​is identifying the components in the reference page image and the sorting logic of each component, that is, it is identifying the component layout information in the reference page image, which can enhance the interactive experience.

[0096] For example, Figure 4 The page editing pop-up window shown shows the reference page upload entry information and page editing reference information as an example. Figure 4 , the page editing pop-up window displays a first area and a second area. For example, the first area can be Figure 4 The area below the store screenshot shown is the left area in the page editing pop-up window; the second area can be Figure 4 The area below the component identification result shown is the right area in the page editing pop-up window. The reference page upload entry information may be displayed in the first area; the page editing reference information may include page component layout information. Based on this, in the case of 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 may include: in the case of 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 page component layout image displayed in the second area shown includes the identified member joining component, coupon zone component, store hot selling component, etc., as well as the order and position of each component in the page. By displaying the reference page upload entry information and page editing reference information in the page editing pop-up window, the upload of the reference page image and the display of the recognition result can be displayed on the same screen, making the display of the recognition result more efficient and convenient to check the matching between the recognition result and the reference page image.

[0097] Optionally, the reference page image may be displayed in the first area after being uploaded. Based on this, the above recognition process may be triggered by triggering a corresponding control when the reference page image is displayed in the first area, for example Figure 4 If the control is triggered, the page component layout can be identified from the reference page image; or it can be triggered Figure 4 The "One-click Generate" in the dialog box can trigger the recognition of the page component layout and visual style from the reference page image. The present disclosure does not limit this. In addition, the "Cancel" control can be used to cancel the current recognition result, or can be used to exit the page editing pop-up window, which is also not limited by the present disclosure.

[0098] In step S205 , in response to a confirmation instruction for the page editing reference information, a page after the target page is edited 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, it can trigger the generation of a confirmation instruction for the page editing reference information. Accordingly, in response to the confirmation instruction for the page editing reference information, a page after the target page is edited based on the page editing reference information can be displayed. The present disclosure does not limit the display method of the edited page.

[0100] For example, it is possible to trigger Figure 5 The "Apply Current Component" in the command is used to generate a confirmation instruction for editing the reference information of the page, and the present disclosure does not limit this.

[0101] In a possible implementation, a canvas area for presenting the target page may also be displayed in the page editing interface. Based on this, in response to the confirmation instruction of the page editing reference information, displaying the page after the target page is edited based on the page editing reference information may include: in response to the confirmation instruction of the page component layout information, displaying the page after the layout of the target page is edited based on the page component layout information in the canvas area. For example, you can click Figure 5 In the "Apply Current Component" in the page editing reference information, a confirmation instruction for the page editing reference information is generated. Accordingly, in response to the confirmation instruction for the page component layout information, the page editing pop-up window can be hidden, and the page after the layout of the target page is edited based on the page component layout information is displayed in the canvas area, for example Figure 6 By responding to the confirmation instruction of the page component layout information, displaying the page after the layout editing of the target page based on the page component layout information in the canvas area, the target page can be presented better, and the editing tools in the page editing interface can be used conveniently.

[0102] In the page editing interface, in response to an editing instruction for a target page, reference page upload entry information is displayed; in the case of uploading a reference page image 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; and in response to a confirmation instruction for the page editing reference information, a page after the target page is edited based on the page editing reference information is displayed. Automatic page editing is achieved, and only a reference page image needs to be provided to automatically identify the page editing reference information obtained from the reference page image for automatic editing and display of the target page, effectively reducing labor costs, making page editing more efficient, and making editing more flexible and convenient, thereby meeting the needs for timely response to page updates.

[0103] See also Figure 5 and Figure 7 In an optional implementation, the page component layout and visual style can be confirmed together, so that the target page can be efficiently and conveniently generated with the same component layout and visual style. When the user prefers the component layout and visual style of the reference page at the same time, the page editing efficiency is higher. Based on this, the method may also include: in response to a style content confirmation instruction based on the page component layout information, switching to display the editing result of the target page in the second area, the page component layout presented by the target page in the editing result matches the page component layout information, and the visual style presented by the target page in the editing result matches the page visual style information. Exemplarily, you can click Figure 5 The "AI generates the same content" in the above example can trigger the generated style content confirmation instruction. Accordingly, the second area can be switched to display the editing results of the target page, such as Figure 7 Alternatively, it can be as shown in the second area of ​​the above figure; Figure 7 The canvas area is shown in the figure below.

[0104] Optionally, in the display Figure 7 In the case shown in the above figure, a layer of confirmation logic can be added. Based on this, when a canvas area for presenting the target page is displayed in the page editing interface, the method can also include: when the editing result is confirmed, displaying the editing result of the target page in the canvas area. Figure 7In the above picture, "Apply Decoration" can hide the page editing pop-up window and display the editing results of the target page in the canvas area of ​​the page editing interface, that is, display the target page after using the same component layout and visual style as the reference page image. By confirming the editing results to trigger the display of the editing results of the target page in the canvas area of ​​the page editing interface, you can better view the editing results of the target page, and use the editing function in the page editing interface to conveniently and efficiently re-edit the editing results.

[0105] in, Figure 7 The "Cancel" control in the figure above can be used to cancel the current editing result. For example, click Figure 7 The “Cancel” control in the above figure can clear the information displayed in the second area, which is not limited in the present disclosure.

[0106] In a possible implementation, a component editing control area may also be displayed in the page editing interface as described above. Based on this, the method may also include re-editing each component displayed in the canvas area. For example, the method may also include: in the case of triggering a target component in the canvas area, at least one target component editing control corresponding to the target component may be displayed in the component editing control area. Among them, the target component may be any component in the canvas area. Exemplarily, for example, by clicking on the target component "Coupon Receive Area Component" in the canvas area, at least one target component editing control corresponding to the "Coupon Receive Area Component" may be displayed in the component editing control area, such as a component content editing control, a component style editing control, a coupon link editing control, etc., and the present disclosure does not limit this.

[0107] Furthermore, in response to a component adjustment instruction triggered based on a target component edit control, the visual style or content of the target component is updated, and the updated visual style or content is indicated by the target component edit control under the component adjustment instruction. Among them, the target component edit control can be any one of at least one target component edit control, for example, any target component edit control can be clicked to generate a component adjustment instruction. Accordingly, in response to a component adjustment instruction triggered based on a target component edit control, the visual style or content of the target component can be updated, thereby achieving re-editing of the visual style or content of the target component. By setting the components in the canvas area to be dynamically triggered for editing, different components in the target page can be edited independently, improving the operational granularity of page editing, and making page editing more flexible and accurate.

[0108] Optionally, the layout of the page components can also be adjusted, for example, components can be added, components can be deleted, the component order can be adjusted, the component area can be adjusted, etc., and the present disclosure does not limit this. Based on this, the method can also include: in response to the component layout adjustment operation of the page editing reference information, the page component layout information in the display page editing reference information is updated. Among them, the component layout adjustment operation can include at least one of the following: component sorting adjustment operation, component deletion operation, component addition operation, component visual adjustment operation. For example, a page component can be dragged to implement a component sorting adjustment operation; or a page component can be selected to perform a deletion operation to implement a component deletion operation; a component addition operation can be implemented by inserting a new component based on an existing page component; a component visual adjustment operation can include but is not limited to operations such as component area adjustment, component border style adjustment, and component color adjustment, and the present disclosure does not limit this. By adjusting the layout of the identified page layout, the required page layout can be obtained flexibly and conveniently, which can not only save the design cost of the page component layout, but also meet the personalized page layout requirements.

[0109] In a possible implementation, a preview control of the target page may also be displayed in the page editing interface, for example Figure 7 "View Preview" is shown in the figure below. Based on this, the method may also include: in response to a trigger operation on the preview control, displaying an edit preview page corresponding to the target page, that is, previewing the edited target page, wherein the edit preview page displays the target page presented in the canvas area in the preview state. By setting the preview control, the target page currently being decorated can be previewed based on the preview control, which can effectively feedback the page editing effect, thereby improving the efficiency of page editing. Optionally, refer to Figure 7 , you can also click "Save Draft" in the upper right corner so that you can continue to edit the page based on it later; or you can click "Publish Now" in the upper right corner so that the editing result can be applied to the target page. If the platform verifies that the editing result is passed, log in to the target page, and you can see the target page in the canvas area. In addition, the "Save" in the lower right corner can be used to save the editing results at any time, and the "Cancel" can be used to cancel the current editing operation or cancel the editing results. This disclosure does not limit these.

[0110] In an optional implementation, the reference page image may be recommended, based on which, the associated position of the reference page upload entry information may display multiple recommended first page images. Accordingly, in the case of 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 may include: in the case where a reference page image among multiple first page images is selected for upload, displaying the uploaded reference page image, and displaying the page editing reference information identified from the reference page image. Among them, multiple first page images

[0111] For example, see Figure 8 , multiple recommended first page images can be displayed in the first area of ​​the page editing pop-up window. If one of the first page images is selected, the first page image can be regarded as a reference page image, and the reference page image can be uploaded and displayed in the first area. The page editing reference information identified from the reference page image can be displayed in the second area, for example Figure 5 By recommending multiple first page images for selecting reference page images, uploading of reference page images is made more convenient and efficient, and the recommended first page images are easily matched with user preferences, which can improve the experience of page editing.

[0112] Optionally, if you do not like the recommended multiple first page images, you can switch them. Based on this, the method can also include: in response to the rejection instruction of the page editing reference information, displaying the recommended multiple second page images, the multiple second page images are different in at least one of the page component layout and the visual style, that is, they can be different in the page component layout, or in the visual style, or in both the page component layout and the visual style. For example, click Figure 8 The “Cancel” in the above-mentioned rejection instruction can be generated, so that multiple recommended second page images can be displayed so that the user can select a favorite component layout or visual style. Optionally, a switching control (e.g. Figure 8 The control displayed above the multiple first page images in the page editing reference information is used to switch the recommended images, thereby switching to display the multiple recommended second page images. By responding to the rejection instruction of the page editing reference information, the multiple recommended second page images are displayed. The multiple second page images can be different from the first page image in page component layout or visual style. More recommended page images can be flexibly switched to view, and page editing is more flexible and convenient.

[0113] Fig. 9 is a block diagram of a page editing device according to an exemplary embodiment. Fig. 9 , the device may include:

[0114] The reference page upload module 901 is configured to be executed in the page editing interface, and in response to an editing instruction for a target page, display reference page upload entry information;

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

[0116] The edit page display module 905 is configured to execute, in response to a confirmation instruction on the page edit reference information, display a page after the target page is edited based on the page edit reference information.

[0117] In the page editing interface, in response to an editing instruction for a target page, reference page upload entry information is displayed; in the case of uploading a reference page image 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; and in response to a confirmation instruction for the page editing reference information, a page after the target page is edited based on the page editing reference information is displayed. Automatic page editing is achieved, and only a reference page image needs to be provided to automatically identify the page editing reference information obtained from the reference page image for automatic editing and display of the target page, effectively reducing labor costs, making page editing more efficient, and making editing more flexible and convenient, thereby meeting the needs for timely response to page updates.

[0118] In a possible implementation, the reference page uploading module 901 may include:

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

[0120] In a possible implementation, the page editing pop-up window displays a first area and a second area, wherein the first area displays the reference page upload entry information; the page editing reference information includes the page component layout information; and 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 a possible implementation, a canvas area for presenting the target page is displayed in the page editing interface; the edit page display module 905 may include:

[0123] The edited page display unit is configured to execute a confirmation instruction on the page component layout information in response to displaying a page after the layout of the target page is edited based on the page component layout information in the canvas area.

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

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

[0126] In a possible implementation, a canvas area for presenting the target page is displayed in the page editing interface; 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 a possible implementation, a component editing control area is also displayed in the page editing interface; the device may also include:

[0129] A component editing control display module is configured to display at least one target component editing control corresponding to the target component in the component editing control area when a target component in the canvas area is triggered;

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

[0131] In a possible implementation, a preview control of the target page is also displayed in the page editing interface, and the device may further include:

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

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

[0134] A component layout adjustment module is configured to execute a component layout adjustment operation in response to the page editing reference information, and update and display the page component layout information in the page editing reference information;

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

[0136] In a possible implementation, a plurality of recommended first page images are displayed at a location associated with the reference page upload entry information; and the page editing reference display module 903 may include:

[0137] The second page editing reference display unit is configured to display the uploaded reference page image and the page editing reference information identified from the reference page image when the reference page image among the multiple first page images is selected for upload.

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

[0139] The recommendation switching module is configured to execute, in response to a rejection instruction for the page editing reference information, displaying a plurality of recommended second page images, wherein the plurality of second page images are different from the first page image in at least one of page component layout and visual style.

[0140] Regarding the device in the above embodiment, the specific manner in which each module performs operations has been described in detail in the embodiment of the method, and will not be elaborated here.

[0141] Fig.10 The block diagram of an electronic device for page editing is shown based on an exemplary embodiment. The electronic device may be a terminal, and its internal structure diagram may be as shown in FIG. Fig.10As shown. The electronic device includes a processor, a memory, a network interface, a display screen and an input device connected through a system bus. Among them, the processor of the electronic device is used to provide computing and control capabilities. The memory of the electronic device includes a non-volatile storage medium and an internal memory. The non-volatile storage medium stores an operating system and a computer program. The internal memory provides an environment for the operation of the operating system and the computer program in the non-volatile storage medium. The network interface of the electronic device is used to communicate with an external terminal through a network connection. When the computer program is executed by the processor, a method for page editing is implemented. The display screen of the electronic device can be a liquid crystal display screen or an electronic ink display screen, and the input device of the electronic device can be a touch layer covering the display screen, or a key, trackball or touchpad set on the housing of the electronic device, or an external keyboard, touchpad or mouse, etc.

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

[0143] Fig.11 is a block diagram of 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 shown in FIG. Fig.11 As shown. The electronic device includes a processor, a memory and a network interface connected through a system bus. Among them, the processor of the electronic device is used to provide computing and control capabilities. The memory of the electronic device includes a non-volatile storage medium and an internal memory. The non-volatile storage medium stores an operating system and a computer program. The internal memory provides an environment for the operation of the operating system and the computer program in the non-volatile storage medium. The network interface of the electronic device is used to communicate with an external terminal through a network connection. When the computer program is executed by the processor, a method for page editing is implemented.

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

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

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

[0147] In an exemplary embodiment, a computer program product containing instructions is also provided. When the computer program product is run on a computer, the computer is enabled to execute the page editing method in the embodiment of the present disclosure.

[0148] Those skilled in the art can understand that all or part of the processes in the above-mentioned embodiment methods can be completed by instructing the relevant hardware through a computer program, and the computer program can be stored in a non-volatile computer-readable storage medium. When the computer program is executed, it can include the processes of the embodiments of the above-mentioned methods. Among them, any reference to memory, storage, database or other media used in the embodiments provided in this application can include non-volatile and / or volatile memory. Non-volatile memory may include read-only memory (ROM), programmable ROM (PROM), electrically programmable ROM (EPROM), electrically erasable programmable ROM (EEPROM) or flash memory. Volatile memory may include random access memory (RAM) or external cache memory. As an illustration and not limitation, RAM is available in many forms, such as static RAM (SRAM), dynamic RAM (DRAM), synchronous DRAM (SDRAM), double data rate SDRAM (DDRSDRAM), enhanced SDRAM (ESDRAM), synchronous link (Synchlink) DRAM (SLDRAM), memory bus (Rambus) direct RAM (RDRAM), direct memory bus dynamic RAM (DRDRAM), and memory bus dynamic RAM (RDRAM).

[0149] Those skilled in the art will readily appreciate other embodiments of the present disclosure after considering the specification and practicing the invention disclosed herein. This application is intended to cover any variations, uses, or adaptations of the present disclosure that follow the general principles of the present disclosure and include common knowledge or customary techniques in the art that are not disclosed in the present disclosure. The specification and examples are intended to be exemplary only, and the true scope and spirit of the present disclosure are indicated by the following claims.

[0150] It should be understood that the present disclosure is not limited to the exact structures that have been described above and shown in the drawings, and that various modifications and changes may be made without departing from the scope thereof. The scope of the present 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 instruction of the target page, the reference page upload entry information is displayed; In the case where a reference page image is uploaded based on the reference page upload entry information, displaying page editing reference information identified from the reference page image, wherein 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 position relationship of each page component in the reference page image; In response to a confirmation instruction for the page editing reference information, a page is displayed after the target page is edited based on the page editing reference information.

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

3. The method according to claim 2, characterized in that The page editing pop-up window displays a first area and a second area, wherein the first area displays the reference page upload entry information; The page editing reference information includes the page component layout information; In the case where the reference page image is uploaded based on the reference page upload entry information, displaying the page editing reference information identified from the reference page image includes: In the case where the reference page image is uploaded based on the reference page upload entry information, the page component layout information 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 displaying, in response to a confirmation instruction for the page editing reference information, a page after the target page is edited based on the page editing reference information, comprises: In response to a confirmation instruction for the page component layout information, a page is displayed in the canvas area after the layout of the target page is edited based on the page component layout information.

5. The method according to claim 3, characterized in that: The method further comprises: 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, the page component layout presented by the target page in the editing result matches the page component layout information, and the visual style presented by 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: When 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 also includes: In case of triggering a target component in the canvas area, displaying at least one target component editing control corresponding to the target component in the component editing control area; In response to a component adjustment instruction triggered based on the target component edit control, the visual style or content of the target component is updated, and the updated visual style or content is indicated by the target component edit 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 a triggering operation on the preview control, an edit preview page corresponding to the target page is displayed; the edit preview page displays the target page presented in the canvas area in a preview state.

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

10. The method according to any one of claims 1 to 6, characterized in that: The associated position of the reference page upload entry information displays a plurality of recommended first page images; and in the case where a reference page image is uploaded based on the reference page upload entry information, displaying the page editing reference information identified from the reference page image comprises: In the case where the reference page image among the plurality of first page images is selected for uploading, the uploaded reference page image is displayed, and the page editing reference information identified from the reference page image is displayed.

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

12. A page editing device, characterized in that: include: A reference page upload module is configured to be executed in the page editing interface, and to display reference page upload entry information in response to an editing instruction for a target page; A 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, wherein the page editing reference information represents page component layout information and / or page visual style information; The edit page display module is configured to execute, in response to a confirmation instruction of the page edit reference information, a display of a page after the target page is edited based on the page edit reference information.

13. An electronic device, characterized in that: include: processor; a memory for storing instructions executable by the processor; The processor is configured to execute the instructions to implement the page editing method as claimed in any one of claims 1 to 11.

14. A computer-readable storage medium, characterized in that: When the instructions in the computer-readable storage medium are executed by a processor of an electronic device, the electronic device is enabled to execute the page editing method as claimed in any one of claims 1 to 11.

15. A computer program product, characterized in that The method comprises computer instructions, which, when executed by a processor, enable a computer to execute the page editing method according to any one of claims 1 to 11.

Citation Information

Patent Citations

  • Front-end page development method and device, equipment and storage medium

    CN116795367A

  • Page dynamic configuration method, system and equipment and storage medium

    CN117289934A

  • Method and device for generating media content, equipment and storage medium

    CN118550624A

  • Cross-browser page visualization presentation

    US20100211893A1

  • Data processing method and apparatus

    WO2022179082A1