Page generation method, page display method, medium, equipment and program product

Abstract

The invention relates to a page generation method, a page display method, a medium, equipment and a program product, and relates to the technical field of computers. The method comprises the steps that a page editor is used for obtaining target pages, blueprint logic information used for controlling page loading logic of the target pages is edited in a blueprint editing area of the page editor, and then a page file is obtained according to the target pages and the blueprint logic information, so that a client side renders and displays the corresponding pages according to the page file. According to the method, the page can be drawn and the blueprint logic information used for controlling the page can be edited in a visual mode, page development can be completed without writing codes, and the page development efficiency is greatly improved. In a live broadcast scene, the page file generated by the page editor can be directly operated in the live broadcast room without depending on video plug flow of the live broadcast room, and the page is rendered and displayed.

Description

Technical Field

[0001] This disclosure relates to the field of computer technology, and more specifically, to a page generation method, a page display method, a medium, an apparatus, and a program product. Background Technology

[0002] In related technologies, if materials / effects need to be added to a live stream, the materials must first be created using material creation tools, and then overlaid onto the live stream video stream using tools / plugins. In scenarios where the broadcaster and the client interact, the broadcaster needs to manually replace the materials to achieve interactive effects. This results in complex procedures, high costs, and limits the development of interactive features in live streams. Summary of the Invention

[0003] This summary section is provided to briefly introduce the concepts, which will be described in detail in the detailed description section below. This summary section is not intended to identify key or essential features of the claimed technical solution, nor is it intended to limit the scope of the claimed technical solution.

[0004] Firstly, this disclosure provides a page generation method, including: Draw at least one target page in the page drawing area of ​​the page editor; Edit the blueprint logic information corresponding to the target page in the blueprint editing area of ​​the page editor, wherein the blueprint logic information is used to control the page loading logic of each target page; Based on the target page and the blueprint logic information, a page file is obtained, wherein the page file is used by the client to render and display the corresponding page.

[0005] Secondly, this disclosure provides a page display method, executed by a client, the method comprising: Obtain the page file generated according to the method described in the first aspect; Based on the operation event triggered by the client, determine the target blueprint node corresponding to the operation event in the blueprint logic information of the page file; Based on the target blueprint node, render and display the target page associated with the target blueprint node.

[0006] Thirdly, this disclosure provides a computer-readable medium having a computer program stored thereon, which, when executed by a processing device, implements the steps of the method described in the first aspect, or implements the steps of the method described in the second aspect.

[0007] Fourthly, this disclosure provides an electronic device, comprising: A storage device on which computer programs are stored; A processing device for executing the computer program in the storage device to implement the steps of the method described in the first aspect, or to implement the steps of the method described in the second aspect.

[0008] Fifthly, this disclosure provides a computer program product, including a computer program that, when executed by a processor, implements the steps of the method described in the first aspect, or implements the steps of the method described in the second aspect.

[0009] Based on the above technical solution, at least one target page is drawn in the page drawing area of ​​the page editor, and blueprint logic information for controlling the page loading logic of each target page is edited in the blueprint editing area of ​​the page editor. Then, page files are obtained according to the target pages and the blueprint logic information, so that the client renders and displays the corresponding page according to the page files. Pages can be drawn and blueprint logic information for controlling pages can be edited in a visual way, and page development can be completed without writing code, which greatly improves the efficiency of page development. In live streaming scenarios, page files generated by the page editor can be run directly in the live streaming room to render and display pages without relying on the video push of the live streaming room.

[0010] Other features and advantages of this disclosure will be described in detail in the following detailed description section. Attached Figure Description

[0011] The above and other features, advantages, and aspects of the embodiments of this disclosure will become more apparent from the accompanying drawings and the following detailed description. Throughout the drawings, the same or similar reference numerals denote the same or similar elements. It should be understood that the drawings are schematic, and the originals and elements are not necessarily drawn to scale. In the drawings: Figure 1 This is a flowchart illustrating a page generation method according to some embodiments.

[0012] Figure 2 This is a schematic diagram of the target page shown according to some embodiments.

[0013] Figure 3 This is a schematic diagram illustrating blueprint logic information according to some embodiments.

[0014] Figure 4 This is a schematic diagram of a page editor illustrated according to some embodiments.

[0015] Figure 5 This is a flowchart illustrating the creation of a page based on some embodiments.

[0016] Figure 6This is a flowchart illustrating a page display method according to some embodiments.

[0017] Figure 7 This is a schematic diagram of the structure of a page generation apparatus according to some embodiments.

[0018] Figure 8 This is a schematic diagram of the structure of a page display device according to some embodiments.

[0019] Figure 9 This is a schematic diagram of the structure of an electronic device according to some embodiments. Detailed Implementation

[0020] Embodiments of this disclosure will now be described in more detail with reference to the accompanying drawings. While some embodiments of this disclosure are shown in the drawings, it should be understood that this disclosure can be implemented in various forms and should not be construed as limited to the embodiments set forth herein. Rather, these embodiments are provided to provide a more thorough and complete understanding of this disclosure. It should be understood that the accompanying drawings and embodiments of this disclosure are for illustrative purposes only and are not intended to limit the scope of protection of this disclosure.

[0021] It should be understood that the steps described in the method embodiments of this disclosure may be performed in different orders and / or in parallel. Furthermore, the method embodiments may include additional steps and / or omit the steps shown. The scope of this disclosure is not limited in this respect.

[0022] The term "comprising" and its variations as used herein are open-ended inclusions, meaning "including but not limited to". The term "based on" means "at least partially based on". The term "one embodiment" means "at least one embodiment"; the term "another embodiment" means "at least one additional embodiment"; the term "some embodiments" means "at least some embodiments". Definitions of other terms will be given in the description below.

[0023] It should be noted that the concepts of "first" and "second" mentioned in this disclosure are used only to distinguish different devices, modules or units, and are not used to limit the order of functions performed by these devices, modules or units or their interdependencies.

[0024] It should be noted that the terms "a" and "a plurality of" used in this disclosure are illustrative rather than restrictive, and those skilled in the art should understand that, unless otherwise expressly indicated in the context, they should be understood as "one or more".

[0025] The names of messages or information exchanged between multiple devices in the embodiments of this disclosure are for illustrative purposes only and are not intended to limit the scope of such messages or information.

[0026] Figure 1 This is a flowchart illustrating a page generation method according to some embodiments. For example... Figure 1 As shown, this disclosure provides a page generation method, which can be executed by an electronic device, specifically by a page generation device. This device can be implemented in software and / or hardware and configured within the electronic device. Figure 1 As shown, the method may include the following steps.

[0027] In step 110, at least one target page is drawn in the page drawing area of ​​the page editor.

[0028] Here, the page editor is used to draw pages and edit the blueprint logic information that controls the pages. Users can draw at least one target page in the page drawing area of ​​the page editor using the page editor.

[0029] The target page can be a page created by the user according to their needs, and this page can be displayed on any type of terminal device.

[0030] In some embodiments, the target page includes a first page and / or a second page displayed in the live streaming room, wherein the first page is used for the broadcaster to create live interactive tasks, and the second page is used to display the live interactive tasks in the broadcaster's and / or the viewer's end.

[0031] The first page can be displayed in the live stream room on the broadcaster's end, and is used by the broadcaster to create live interactive tasks. The second page can be displayed in the live stream room on both the broadcaster's end and / or the viewer's end, and is used to display the live interactive tasks created by the broadcaster.

[0032] For example, the first page can be a half-screen page overlaid on the live stream; of course, the first page can also be a full-screen page overlaid on the live stream. The second page can be a floating window overlaid on the live stream, used to display information related to the live interactive tasks.

[0033] Live interactive tasks can include challenge tasks, content interaction tasks between the streamer and viewers, and more. On the first page, streamers can create and publish live interactive tasks in the live stream to promote interaction between the streamer and viewers. The second page displays relevant information about the live interactive tasks to enhance the expressiveness of the live interaction. For example, for challenge tasks, the page can display task details and progress.

[0034] Figure 2 This is a schematic diagram of a target page shown according to some embodiments. For example... Figure 2As shown, the first page 202 is displayed on the first live streaming room page 201 on the broadcaster's end, allowing the broadcaster to create live interactive tasks. For example, a timed challenge task such as "Get 200,000 likes and the broadcaster will skip driving test part 3" can be created on the first page 202. This timed challenge task can be published by clicking the "Start Challenge" button on the first page 202. When a timed challenge task is published, the second page 203 can be displayed on the first live streaming room page 201 on the broadcaster's end and on the second live streaming room page 204 on the viewer's end, to display relevant information about the timed challenge task.

[0035] It is worth noting that the above embodiments use a live streaming scenario as an example, and do not limit the page generation method provided in this disclosure to only live streaming scenarios; it is also applicable to other scenarios. In other words, the page referred to in this disclosure is not limited to the page displayed in a live streaming room.

[0036] In step 120, the blueprint logic information corresponding to the target page is edited in the blueprint editing area of ​​the page editor. The blueprint logic information is used to control the page loading logic of each target page.

[0037] Here, the blueprint editing area of ​​the page editor is an area where users can edit blueprint control information used to control the page loading logic.

[0038] It should be understood that Blueprints allow users to create code logic using a graphical interface without having to write traditional code. Blueprints use Blueprint nodes and connections to represent code logic, providing built-in nodes and functions such as mathematical calculations and conditional judgments to achieve flexible business logic orchestration.

[0039] By editing blueprint logic information in the blueprint editing area, the page loading logic of each drawn target page can be configured. This allows the blueprint logic information to control the page loading logic between target pages when they are applied. The page loading logic includes page switching logic and page rendering logic. For example, page switching logic triggers a page transition and displays the next page when a certain event occurs. Page rendering logic controls the final rendering effect of the page, and can include the rendering order of elements on the page, the page data used for rendering, and so on.

[0040] In the blueprint editing area, users can define different blueprint nodes to represent the page loading logic of different pages, and edit blueprint nodes according to the page interaction logic required by the user to generate blueprint logic information for controlling the page loading logic of each target page.

[0041] Figure 3 This is a schematic diagram illustrating blueprint logic information according to some embodiments. For example... Figure 3 As shown, when the blueprint node for "Page Switching" is executed, page 1 associated with that blueprint node is displayed. When a click event is detected on the "Close" button, the blueprint node for "Close Panel" is executed, closing the displayed page 1. When a click event is detected on "Button 1," the blueprint node for "Launch Floating Window" is executed, displaying the floating window page associated with that blueprint node.

[0042] It's worth noting that when the target page is the first page displayed on the broadcaster's end, the first blueprint logic information for the first page can be edited; when the target page is the second page displayed on the viewer's end, the second blueprint logic information for the second page can be edited. In other words, in the page editor, the blueprint logic information for the pages displayed on the broadcaster's end and the viewer's end can be edited separately.

[0043] Figure 4 This is a schematic diagram of a page editor illustrated according to some embodiments. For example... Figure 4 As shown, the page editor includes a page drawing area and a blueprint editing area. Target pages can be drawn in the page drawing area, and the corresponding blueprint logic information can be edited in the blueprint editing area. Furthermore, the page editor can also include a resource panel and a parameter panel.

[0044] In step 130, a page file is obtained based on the target page and blueprint logic information. The page file is used by the client to render and display the corresponding page.

[0045] Here, the target page and blueprint logic information can be packaged into a page file. This page file is used by the client to render and display the corresponding page based on the page file. The page file can include the target page and blueprint logic information; the target page serves as the view file for the page, and the blueprint logic information serves as the blueprint logic file used to load the view file.

[0046] It should be understood that in a live streaming scenario, the client referred to in this disclosure can be the broadcaster's client and / or the viewer's client.

[0047] Therefore, by drawing at least one target page in the page drawing area of ​​the page editor and editing the blueprint logic information used to control the page loading logic of each target page in the blueprint editing area of ​​the page editor, and then obtaining the page file based on the target page and the blueprint logic information, the client can render and display the corresponding page according to the page file. This allows for visual page drawing and editing of the blueprint logic information used to control the page, enabling page development without writing code, greatly improving page development efficiency. In live streaming scenarios, the page file generated by the page editor can be run directly in the live streaming room without relying on the video streaming in the live streaming room, rendering and displaying the page. Therefore, whether it is video live streaming or pure audio live streaming, the page generation method provided in this disclosure embodiment can be used to display the page in the live streaming room, allowing the host and viewers to interact through the live interactive tasks created by the page.

[0048] In some feasible implementations, in step 110, a page to be drawn can be created in the page drawing area, and a target page component can be configured in the page to be drawn using the page components provided by the page editor to obtain the target page.

[0049] Here, users can create pages to be drawn in the page drawing area using containers (page layout elements used to hold page components or content) provided by the page editor; a container can be understood as a page. Of course, users can also directly use pre-made page templates as the pages to be drawn.

[0050] The containers provided by the page editor can include full-screen containers (containers that occupy the entire screen space), half-screen containers (containers that occupy half the screen space), and floating containers (containers that appear on the page as pop-ups), etc. For example, a half-screen container can be used to create a page to be drawn that is displayed on half the screen, and a floating container can be used to create a page to be drawn that is displayed in a floating window.

[0051] The page components provided by the page editor are parts that can be placed on the page to be drawn and assembled into the final target page. Page components can include buttons (allowing users to click to perform actions, such as triggering actions), input boxes (allowing users to enter text, numbers, or other data), sliders (allowing users to select a range of values ​​by sliding), cards (containers that display images, text, and other elements), progress bars (indicators that display task progress), image components (components used to display images), text input components, and so on.

[0052] The target page component is used to implement the expected functionality of the target page. Users can complete the rendering of the target page by adding and modifying the target page component to implement the expected functionality of the target page in the created page to be rendered.

[0053] For example, such as Figure 4 As shown, when drawing the page for creating challenge tasks, you can add corresponding text descriptions, input boxes for setting task-related information, buttons for publishing challenge tasks, etc., to the page to be drawn, thus obtaining the following result: Figure 2 The page shown.

[0054] Users can use the controls in the page editor to create pages and add pages to be drawn (such as half-screen pages or floating window pages, etc.) in the page drawing area. Then, users can use the component panel provided by the page editor to add the required target page components to the page to be drawn, and edit the layout, position, shape, etc. of the added target page components to obtain the drawn target page.

[0055] Therefore, through the above implementation method, users can draw pages by configuring page components. This not only allows for visual editing of pages, but also enables users to configure pages arbitrarily according to specific functional requirements.

[0056] In some feasible implementations, the component properties of the target page component can be adjusted through the parameter panel corresponding to the target page component to obtain the adjusted target page component.

[0057] Here, the parameter panel is used to visually adjust the component properties of the target page component. The component properties of the page component are used to set and adjust various characteristics and behaviors of the component. For example, component properties may include parameters such as the anchor point, rotation angle, scaling ratio, width, height, alignment, and configured animation data of the page component.

[0058] When a user selects any target page component, a parameter panel corresponding to that target page component can be displayed in the page editor, allowing the user to visually adjust the component properties of the target page component based on the parameter panel.

[0059] It is important to note that visually adjusting the component properties of a target page component means that the values ​​of the component properties can be modified directly through the parameter panel without having to delve into the code level of the target page component.

[0060] It should be understood that the adjusted component properties will be saved and loaded when the page is displayed to ensure that the page display effect is consistent with the effect of the page drawn in the page editor.

[0061] Therefore, by visually adjusting the component properties of target page components using a parameter panel, the efficiency and convenience of page development can be improved. Furthermore, by adjusting component properties, users can see the changes in the page components in real time within the page editor, helping them to intuitively adjust page components. Moreover, by adjusting component properties, users can uniquely configure each page component according to design requirements, meeting their personalized needs.

[0062] In some feasible implementations, the target material resource is determined through the resource panel of the page editor, and the material resource of the target page component is replaced with the target material resource.

[0063] Here, resource materials can be images, videos, animations, audio, special effects, and so on. The resource panel is used to manage resource materials imported into the page editor. For example, resource materials can be imported into the page editor through the resource library or file system, and the resource panel provided by the page editor manages the imported resource materials. For instance, resource materials can be deleted, added, and searched through the resource panel.

[0064] Users can select any material resource as the target material resource through the resource panel and replace the material resources in the target page component with the target material resource.

[0065] For example, if the target page component is an image component, it can be configured with a default image. Users can select the target material resource through the resource panel and replace the default image with the target material resource.

[0066] It's worth noting that when adding assets to the target page, the resulting page file should also contain the assets. In other words, the page file can include view files, blueprint logic files, and assets.

[0067] Therefore, through the resource panel, users can intuitively and conveniently add the required material resources to the page, realizing personalized page configuration.

[0068] In some feasible implementations, in step 120, at least one blueprint node is created in the blueprint editing area, and directed connections are established between the blueprint nodes to obtain blueprint logical information.

[0069] Here, blueprint nodes are the basic units that constitute blueprint logic information, and each blueprint node performs a specific operation or function. By creating at least one blueprint node and establishing directed connections between blueprint nodes through lines, a complete blueprint logic information for controlling page loading logic can be formed.

[0070] It's important to note that each blueprint node can have a node title, input ports, and output ports. The input and output ports of different blueprint nodes can be connected using lines. It should be understood that only ports of the same type can be connected. For example, data ports can be connected to data ports, logical ports can be connected to logical ports, but data ports cannot be connected to logical ports.

[0071] Among them, blueprint nodes are used to indicate the page loading logic corresponding to the page associated with the blueprint node.

[0072] In some embodiments, a blueprint node includes at least one of the following: Page nodes are used to render and display the pages associated with them. Event nodes are used to detect operation events that trigger the execution of the next blueprint node; A data synchronization node is used to synchronize page data obtained from one page to another page associated with the data synchronization node. The data acquisition node is used to acquire the page data required by the page associated with the data acquisition node.

[0073] When execution reaches a page node, the page associated with that node is rendered and displayed. When an operation event associated with an event node is detected, the event node triggers the execution of its next blueprint node. Data fetch nodes are used to retrieve the page data required by the page associated with them. For example, taking a floating window page as an example, if the floating window page is used to display the real-time progress of a live interactive task, the data fetch node can retrieve the task data required by the floating window page from the live streaming server in real time and update the displayed task progress. Data synchronization nodes are used to synchronize page data retrieved from one page to another page associated with them. For example, in a live streaming scenario, the broadcaster can publish interactive content to the audience through a first page provided by the broadcaster. The interactive content entered on the first page will be transmitted to the second page displayed on the audience's end through the data synchronization node. It should be understood that the first page can be the page displayed on the broadcaster's end, and the second page can be the page displayed on the audience's end.

[0074] For example, a data synchronization node can obtain page data of a page through a data acquisition node. In other words, the output port of the data acquisition node can be connected to the input port of the data synchronization node to obtain page data.

[0075] It is worth noting that, in this embodiment of the disclosure, in addition to the blueprint nodes described above, other types of blueprint nodes may also be included. For example, a start node may also be included, which serves as the entry point for page loading logic.

[0076] like Figure 3 As shown, the "Page Switch" blueprint node and the "Launch Floating Window" blueprint node are treated as page nodes. When execution reaches the "Page Switch" blueprint node, it renders and displays page 1 associated with the "Page Switch" blueprint node. When execution reaches the "Launch Floating Window" blueprint node, it renders and displays the floating window page associated with the "Launch Floating Window" blueprint node. The "Button 1" blueprint node is treated as an event node, used to detect click events on button 1 in page 1 to determine whether to trigger the next blueprint node.

[0077] It should be understood that each created blueprint node or blueprint logic information can be reused, thereby improving the convenience of blueprint editing as well as the maintainability and scalability of the code.

[0078] Therefore, by using blueprint nodes and connections, complex page interaction logic can be made clear, allowing users to intuitively understand the page loading logic between different pages, thereby improving development efficiency. Moreover, it does not require high levels of professional skill from users, greatly lowering the barrier to entry for page development.

[0079] In some feasible implementations, in response to a merge operation on multiple blueprint nodes, the multiple blueprint nodes are merged and displayed as a single sub-graph node.

[0080] Here, multiple Blueprint nodes can refer to Blueprint nodes used to implement the loading logic of a subpage. In other words, multiple related Blueprint nodes that implement the page loading logic of the same page can be merged. For example, ... Figure 3 As shown, the two blueprint nodes "Button" and "Button Click" are used to detect click events, and these two blueprint nodes can be merged and displayed as a single sub-graph node.

[0081] In some embodiments, a subgraph node can be split into multiple blueprint nodes in response to a split operation on a subgraph node.

[0082] In other words, multiple blueprint nodes can be merged and displayed as a single sub-blueprint node, or a sub-blueprint node containing multiple blueprint nodes can be split and displayed as multiple blueprint nodes.

[0083] In other implementations, the page editor may also have a preview function. After the page editor completes editing the target page and its corresponding blueprint logic information, the preview function can be used to preview the target page and its corresponding blueprint logic information to verify whether they meet the requirements. When they meet the requirements, the completed page file can be published to the live streaming server through the page editor, so that the broadcaster can use the page file to create live interactive tasks, thereby enriching the gameplay of the live stream.

[0084] Therefore, by merging multiple blueprint nodes into a single sub-blueprint node, the path for displaying blueprint logic information can be simplified, allowing users to understand the page loading logic more intuitively.

[0085] Figure 5 This is a flowchart illustrating a page based on some embodiments. For example... Figure 5 As shown, users can run the page editor, select a template or create a new project, and then draw pages and edit blueprint logic information. Next, they can simulate and debug the pages and blueprint logic information using the page editor, and then perform real device testing on the debugged pages and blueprint logic information. Once the tests are passed, the pages and blueprint logic information are submitted to the platform for review. After the platform approves the review, the corresponding page files are launched on the platform. It should be understood that the page files launched on the platform can be in the form of a mini-program. For example, if the page file is a live interactive feature on a live streaming platform, it can be run by embedding a mini-program within the live streaming platform.

[0086] Figure 6 This is a flowchart illustrating a page display method according to some embodiments. For example... Figure 6 As shown, this disclosure provides a page display method, which can be executed by a client, specifically by a page display device. This device can be implemented in software and / or hardware and configured in an electronic device. Figure 6 As shown, the method may include the following steps.

[0087] In step 610, the page file generated according to the method shown in the above embodiment is obtained.

[0088] Here, the page file generated according to the method shown in the above embodiments can be uploaded to the server. That is, the page file generated by the page editor can be uploaded to the server, and the client retrieves the page file from the server.

[0089] It should be understood that after obtaining the page file, the client can use its underlying technical capabilities to directly load and use the page file, thereby displaying the page corresponding to the page file on the client.

[0090] In some examples, resource files such as target pages and material resources can be stored on the server. The client can actually obtain the blueprint logic information from the page file and convert the blueprint logic information into a script file. Of course, the client can directly obtain the script file generated based on the blueprint logic information from the server.

[0091] In step 620, based on the operation event triggered by the client, the target blueprint node corresponding to the operation event is determined in the blueprint logic information of the page file.

[0092] Here, the client can detect operation events triggered by the client in real time and determine the corresponding target blueprint node in the blueprint logic information based on the triggered operation events. These operation events can be page click events, events that trigger the display of the page, and so on.

[0093] For example, such as Figure 3 As shown, when the operation event is the operation event that triggers the "Start" blueprint node, then the "Start" blueprint node is the target blueprint node. For example, when the user clicks button 1 on page 1, triggering the "Start Floating Window" blueprint node, then the "Start Floating Window" blueprint node is the target blueprint node.

[0094] It should be understood that the blueprint nodes in the blueprint logic information are executed sequentially. Only after the previous blueprint node is executed can the execution of the next connected blueprint node be triggered.

[0095] In step 630, the target page associated with the target blueprint node is rendered and displayed based on the target blueprint node.

[0096] Here, each blueprint node corresponds to the program code that implements the page loading logic for that blueprint node. After the target blueprint node is determined, the program code corresponding to the target blueprint node can be executed to render and display the target page associated with the target blueprint node.

[0097] For example, if the target page is stored on a server, the client can obtain the resources of the corresponding target page from the server, and render and display the corresponding target page on the client by executing program code.

[0098] Therefore, through steps 610 to 630 above, the client can render and display the corresponding page based on the page file. When the page file is applied in a live streaming scenario, the page file generated by the page editor can be run directly in the live streaming room to render and display the page without relying on the video streaming in the live streaming room. Therefore, whether it is video live streaming or pure audio live streaming, the page generation method provided in this embodiment can be used to display the page in the live streaming room, so that the host and the audience can interact through the live interactive tasks created by the page.

[0099] In some feasible implementations, when the target page is a page displayed in the live streaming room, interactive behaviors triggered on the live streaming room targeting the peer client can be obtained, and the interactive behaviors can be sent to the peer client through the messaging capabilities of the live streaming room, so that the peer client can trigger corresponding operation events based on the interactive behaviors and display the corresponding page.

[0100] Here, when the client is the viewer, the peer client can be the broadcaster, and when the client is the broadcaster, the peer client can be the viewer.

[0101] The pages displayed in the live stream room may include the first page and the second page described in the above embodiments. Interactive behaviors on the other end of the live stream client can refer to interactive behaviors that require data synchronization to the other end client. For example, a viewer's act of sending gifts to the streamer, or a viewer's actions such as commenting, liking, watching, and favorited content on the streamer's end. Another example is the streamer's content publishing behavior on the viewer's end, such as posting challenge tasks or other content.

[0102] Through the messaging capabilities of the live streaming room, interactions between the broadcaster and the viewer can be transmitted via messages, thereby triggering corresponding operation events and displaying the corresponding page content on both the broadcaster and the viewer's end.

[0103] For example, if the broadcaster publishes synchronized content to the viewers via the first page, this synchronized content will be sent to the viewers via the live stream's messaging capabilities, causing the second page displayed on the viewers' devices to simultaneously display this synchronized content. Another example is if the broadcaster initiates... Figure 2 The challenge task shown will also be synchronized to the streamer's end when viewers like the live stream, so that the second page displayed on the streamer's end can show the number of likes and update the progress of the challenge task.

[0104] It is worth noting that data synchronization between the first page and the second page can be achieved through the data synchronization node described in the above embodiment. In other words, within the blueprint logic information corresponding to the first page and the second page, the execution of the data synchronization node enables data synchronization between the two pages.

[0105] Therefore, through the above implementation method, the broadcaster and the audience can interact through the messaging function of the live broadcast room, and the interactive data will be fed back to the page, without the need for manual material updates.

[0106] Figure 7 This is a schematic diagram illustrating the structure of a page generation apparatus according to some embodiments. For example... Figure 7 As shown, this disclosure provides a page generation apparatus 700, which may include: The drawing module 701 is configured to draw at least one target page in the page drawing area of ​​the page editor; The editing module 702 is configured to edit the blueprint logic information corresponding to the target page in the blueprint editing area of ​​the page editor, wherein the blueprint logic information is used to control the page loading logic of each target page; The acquisition module 703 is configured to obtain a page file based on the target page and the blueprint logic information, wherein the page file is used by the client to render and display the corresponding page based on the page file.

[0107] Optionally, the drawing module 701 is specifically configured as follows: Create the page to be drawn in the page drawing area; By configuring the target page component in the page to be drawn using the page components provided by the page editor, the target page is obtained, wherein the target page component is used to implement the expected function of the target page.

[0108] Optionally, the page generation apparatus 700 further includes: The adjustment module is configured to adjust the component attributes of the target page component through the parameter panel corresponding to the target page component to obtain the adjusted target page component, wherein the parameter panel is used to visually adjust the component attributes of the target page component.

[0109] Optionally, the page generation apparatus 700 further includes: The material replacement module is configured to determine the target material resource through the resource panel of the page editor, and replace the material resource of the target page component with the target material resource, wherein the resource panel is used to manage the material resources imported into the page editor.

[0110] Optionally, the editing module 702 is specifically configured as follows: Create at least one blueprint node in the blueprint editing area, wherein the blueprint node is used to indicate the page loading logic corresponding to the page associated with the blueprint node; By establishing directed connections between the various blueprint nodes, the logical information of the blueprint can be obtained.

[0111] Optionally, the blueprint node includes at least one of the following: A page node is used to render and display the page associated with that page node; Event nodes are used to detect operation events that trigger the execution of the next blueprint node; A data synchronization node is used to synchronize page data obtained from one page to another page associated with the data synchronization node; A data acquisition node is used to acquire the page data required by the page associated with the data acquisition node.

[0112] Optionally, the page generation apparatus 700 further includes: The merge module is configured to merge multiple blueprint nodes into a single sub-graph node in response to a merge operation on multiple blueprint nodes.

[0113] Optionally, the target page includes a first page and / or a second page displayed in the live streaming room, wherein the first page is used for the broadcaster to create live interactive tasks, and the second page is used to display the live interactive tasks in the broadcaster's and / or the viewer's terminals.

[0114] The logic of the methods executed by each functional module in the above-mentioned page generation device 700 can be referred to the relevant method section of the above embodiment, and will not be repeated here.

[0115] Figure 8 This is a schematic diagram illustrating the structure of a page display device according to some embodiments. For example... Figure 8 As shown, this disclosure provides a page display device 800, which may include: The acquisition module 801 is configured to acquire a page file generated by the page generation device according to the above embodiments; The determination module 802 is configured to determine the target blueprint node corresponding to the operation event in the blueprint logic information of the page file based on the operation event triggered by the client. The rendering module 803 is configured to render and display the target page associated with the target blueprint node based on the target blueprint node.

[0116] Optionally, when the target page is a page displayed in a live streaming room, the page display device 800 further includes: The behavior acquisition unit is configured to acquire interactive behaviors triggered on the live streaming room for the peer client of the live streaming room; The sending unit is configured to send the interactive behavior to the peer client through the messaging capability of the live broadcast room, so that the peer client can trigger a corresponding operation event based on the interactive behavior and display the corresponding page.

[0117] The logic of the methods executed by each functional module in the above-mentioned page display device 800 can be referred to the relevant method section of the above embodiment, and will not be repeated here.

[0118] The following is for reference. Figure 9 The diagram illustrates a structural schematic of an electronic device (e.g., a client or server) 900 suitable for implementing embodiments of the present disclosure. The client in embodiments of the present disclosure may include, but is not limited to, mobile terminals such as mobile phones, laptops, digital broadcast receivers, PDAs (personal digital assistants), PADs (tablet computers), PMPs (portable multimedia players), in-vehicle terminals (e.g., in-vehicle navigation terminals), and fixed terminals such as digital TVs and desktop computers. Figure 9 The electronic device shown is merely an example and should not be construed as limiting the functionality and scope of the embodiments disclosed herein.

[0119] like Figure 9 As shown, electronic device 900 may include a processing device (e.g., a central processing unit, a graphics processor, etc.) 901, which can perform various appropriate actions and processes according to a program stored in read-only memory (ROM) 902 or a program loaded from storage device 908 into random access memory (RAM) 903. RAM 903 also stores various programs and data required for the operation of electronic device 900. Processing device 901, ROM 902, and RAM 903 are interconnected via bus 904. Input / output (I / O) interface 905 is also connected to bus 904.

[0120] Typically, the following devices can be connected to I / O interface 905: input devices 906 including, for example, touchscreens, touchpads, keyboards, mice, cameras, microphones, accelerometers, gyroscopes, etc.; output devices 907 including, for example, liquid crystal displays (LCDs), speakers, vibrators, etc.; storage devices 908 including, for example, magnetic tapes, hard disks, etc.; and communication devices 909. Communication device 909 allows electronic device 900 to communicate wirelessly or wiredly with other devices to exchange data. Although Figure 9 An electronic device 900 with various devices is shown; however, it should be understood that it is not required to implement or possess all of the devices shown. More or fewer devices may be implemented or possessed alternatively.

[0121] In particular, according to embodiments of this disclosure, the processes described above with reference to the flowcharts can be implemented as computer software programs. For example, embodiments of this disclosure include a computer program product comprising a computer program carried on a non-transitory computer-readable medium, the computer program containing program code for performing the methods shown in the flowcharts. In such embodiments, the computer program can be downloaded and installed from a network via a communication device 909, or installed from a storage device 908, or installed from a ROM 902. When the computer program is executed by a processing device 901, it performs the functions defined in the methods of embodiments of this disclosure.

[0122] It should be noted that the computer-readable medium described in this disclosure can be a computer-readable signal medium or a computer-readable storage medium, or any combination thereof. A computer-readable storage medium can be, for example,—but not limited to—an electrical, magnetic, optical, electromagnetic, infrared, or semiconductor system, apparatus, or device, or any combination thereof. More specific examples of a computer-readable storage medium may include, but are not limited to: an electrical connection having one or more wires, a portable computer disk, a hard disk, random access memory (RAM), read-only memory (ROM), erasable programmable read-only memory (EPROM or flash memory), optical fiber, portable compact disk read-only memory (CD-ROM), optical storage device, magnetic storage device, or any suitable combination thereof. In this disclosure, a computer-readable storage medium can be any tangible medium containing or storing a program that can be used by or in conjunction with an instruction execution system, apparatus, or device. In this disclosure, a computer-readable signal medium can include a data signal propagated in baseband or as part of a carrier wave, carrying computer-readable program code. Such propagated data signals can take various forms, including but not limited to electromagnetic signals, optical signals, or any suitable combination thereof. A computer-readable signal medium can be any computer-readable medium other than a computer-readable storage medium, which can send, propagate, or transmit a program for use by or in connection with an instruction execution system, apparatus, or device. The program code contained on the computer-readable medium can be transmitted using any suitable medium, including but not limited to: wires, optical fibers, RF (radio frequency), etc., or any suitable combination thereof.

[0123] In some implementations, clients and servers can communicate using any currently known or future-developed network protocol such as HTTP (Hypertext Transfer Protocol) and can interconnect with digital data communication (e.g., communication networks) of any form or medium. Examples of communication networks include local area networks (“LANs”), wide area networks (“WANs”), the Internet (e.g., the Internet of Things), and peer-to-peer networks (e.g., ad hoc peer-to-peer networks), as well as any currently known or future-developed networks.

[0124] The aforementioned computer-readable medium may be included in the aforementioned electronic device; or it may exist independently and not assembled into the electronic device.

[0125] The aforementioned computer-readable medium carries one or more programs that, when executed by the electronic device, cause the electronic device to: draw at least one target page in the page drawing area of ​​a page editor; edit blueprint logic information corresponding to the target page in the blueprint editing area of ​​the page editor, wherein the blueprint logic information is used to control the page loading logic of each target page; and obtain a page file based on the target page and the blueprint logic information, wherein the page file is used by the client to render and display the corresponding page based on the page file.

[0126] Alternatively, the aforementioned computer-readable medium carries one or more programs that, when executed by the electronic device, cause the electronic device to: acquire a page file generated according to the method described in the above embodiments; determine the target blueprint node corresponding to the operation event triggered by the client in the blueprint logic information of the page file; and render and display the target page associated with the target blueprint node based on the target blueprint node.

[0127] Computer program code for performing the operations of this disclosure can be written in one or more programming languages ​​or a combination thereof, including but not limited to object-oriented programming languages ​​such as Java, Smalltalk, and C++, as well as conventional procedural programming languages ​​such as the "C" language or similar programming languages. The program code can be executed entirely on the user's computer, partially on the user's computer, as a standalone software package, partially on the user's computer and partially on a remote computer, or entirely on a remote computer or server. In cases involving remote computers, the remote computer can be connected to the user's computer via any type of network—including a local area network (LAN) or a wide area network (WAN)—or can be connected to an external computer (e.g., via the Internet using an Internet service provider).

[0128] The flowcharts and block diagrams in the accompanying drawings illustrate the architecture, functionality, and operation of possible implementations of systems, methods, and computer program products according to various embodiments of this disclosure. In this regard, each block in a flowchart or block diagram may represent a module, segment, or portion of code containing one or more executable instructions for implementing a specified logical function. It should also be noted that in some alternative implementations, the functions indicated in the blocks may occur in a different order than those indicated in the drawings. For example, two consecutively indicated blocks may actually be executed substantially in parallel, and they may sometimes be executed in reverse order, depending on the functions involved. It should also be noted that each block in the block diagrams and / or flowcharts, and combinations of blocks in the block diagrams and / or flowcharts, can be implemented using a dedicated hardware-based system that performs the specified function or operation, or using a combination of dedicated hardware and computer instructions.

[0129] The modules described in the embodiments of this disclosure can be implemented in software or hardware. The names of the modules are not, in some cases, intended to limit the functionality of the module itself.

[0130] The functions described above in this document can be performed at least in part by one or more hardware logic components. For example, exemplary types of hardware logic components that can be used, without limitation, include: field-programmable gate arrays (FPGAs), application-specific integrated circuits (ASICs), application-specific standard products (ASSPs), system-on-a-chip (SoCs), complex programmable logic devices (CPLDs), and so on.

[0131] In the context of this disclosure, a machine-readable medium can be a tangible medium that may contain or store a program for use by or in conjunction with an instruction execution system, apparatus, or device. A machine-readable medium can be a machine-readable signal medium or a machine-readable storage medium. A machine-readable medium can be, but is not limited to, electronic, magnetic, optical, electromagnetic, infrared, or semiconductor systems, apparatus, or devices, or any suitable combination of the foregoing. More specific examples of machine-readable storage media include electrical connections based on one or more wires, portable computer disks, hard disks, random access memory (RAM), read-only memory (ROM), erasable programmable read-only memory (EPROM or flash memory), optical fiber, portable compact disk read-only memory (CD-ROM), optical storage devices, magnetic storage devices, or any suitable combination of the foregoing.

[0132] The above description is merely a preferred embodiment of this disclosure and an explanation of the technical principles employed. Those skilled in the art should understand that the scope of this disclosure is not limited to technical solutions formed by specific combinations of the above-described technical features, but should also cover other technical solutions formed by arbitrary combinations of the above-described technical features or their equivalents without departing from the above-described concept. For example, technical solutions formed by substituting the above features with (but not limited to) technical features disclosed in this disclosure that have similar functions.

[0133] Furthermore, while the operations are described in a specific order, this should not be construed as requiring these operations to be performed in the specific order shown or in a sequential order. In certain environments, multitasking and parallel processing may be advantageous. Similarly, while several specific implementation details are included in the above discussion, these should not be construed as limiting the scope of this disclosure. Certain features described in the context of individual embodiments may also be implemented in combination in a single embodiment. Conversely, various features described in the context of a single embodiment may also be implemented individually or in any suitable sub-combination in multiple embodiments.

[0134] Although the subject matter has been described using language specific to structural features and / or methodological logic, it should be understood that the subject matter defined in the appended claims is not necessarily limited to the specific features or actions described above. Rather, the specific features and actions described above are merely illustrative forms of implementing the claims. Regarding the apparatus in the above embodiments, the specific manner in which the various modules perform their operations has been described in detail in the embodiments relating to the method, and will not be elaborated upon here.

Claims

1. A page generation method, characterized in that, include: Draw at least one target page in the page drawing area of ​​the page editor; Edit the blueprint logic information corresponding to the target page in the blueprint editing area of ​​the page editor, wherein the blueprint logic information is used to control the page loading logic of each target page; Based on the target page and the blueprint logic information, a page file is obtained, wherein the page file is used by the client to render and display the corresponding page.

2. The method according to claim 1, characterized in that, Drawing at least one target page in the page drawing area of ​​the page editor includes: Create the page to be drawn in the page drawing area; By configuring the target page component in the page to be drawn using the page components provided by the page editor, the target page is obtained, wherein the target page component is used to implement the expected function of the target page.

3. The method according to claim 2, characterized in that, The method further includes: By using the parameter panel corresponding to the target page component, the component attributes of the target page component are adjusted to obtain the adjusted target page component. The parameter panel is used to visually adjust the component attributes of the target page component.

4. The method according to claim 2, characterized in that, The method further includes: The target material resource is determined through the resource panel of the page editor, and the material resource of the target page component is replaced with the target material resource. The resource panel is used to manage the material resources imported into the page editor.

5. The method according to claim 1, characterized in that, Editing the blueprint logic information corresponding to the target page in the blueprint editing area of ​​the page editor includes: Create at least one blueprint node in the blueprint editing area, wherein the blueprint node is used to indicate the page loading logic corresponding to the page associated with the blueprint node; By establishing directed connections between the various blueprint nodes, the logical information of the blueprint can be obtained.

6. The method according to claim 5, characterized in that, The blueprint node includes at least one of the following: A page node is used to render and display the page associated with that page node; Event nodes are used to detect operation events that trigger the execution of the next blueprint node; A data synchronization node is used to synchronize page data obtained from one page to another page associated with the data synchronization node; A data acquisition node is used to acquire the page data required by the page associated with the data acquisition node.

7. The method according to claim 5, characterized in that, The method further includes: In response to a merge operation on multiple blueprint nodes, the multiple blueprint nodes are merged and displayed as a single sub-graph node.

8. The method according to any one of claims 1 to 7, characterized in that, The target page includes a first page and / or a second page displayed in the live broadcast room. The first page is used for the broadcaster to create live interactive tasks, and the second page is used to display the live interactive tasks in the broadcaster's and / or the viewer's terminals.

9. A page display method, characterized in that, The method, executed by the client, includes: Obtain the page file generated by the method according to any one of claims 1 to 8; Based on the operation event triggered by the client, determine the target blueprint node corresponding to the operation event in the blueprint logic information of the page file; Based on the target blueprint node, render and display the target page associated with the target blueprint node.

10. The method according to claim 9, characterized in that, When the target page is a page displayed in a live streaming room, the method further includes: Acquire interactive behaviors triggered on the live stream targeting the peer client in the live stream; The interactive behavior is sent to the peer client through the messaging capabilities of the live streaming room, so that the peer client can trigger corresponding operation events and display the corresponding page based on the interactive behavior.

11. A computer-readable medium having a computer program stored thereon, characterized in that, When executed by a processing device, the computer program implements the steps of the method according to any one of claims 1-8, or the steps of the method according to claim 9 or 10.

12. An electronic device, characterized in that, include: A storage device on which computer programs are stored; A processing apparatus for executing the computer program in the storage device to implement the steps of the method according to any one of claims 1-8, or to implement the steps of the method according to claim 9 or 10.

13. A computer program product, comprising a computer program, characterized in that, When executed by a processor, the computer program implements the steps of the method according to any one of claims 1-8, or the steps of the method according to claim 9 or 10.

Images