Visualization module management method and related device

Abstract

A visualization module management method. The method comprises: a visualization management apparatus acquiring metainformation of a target region in a target page that is used for generating a visualization module, wherein the metainformation comprises at least one of size information, address information or position information, the size information comprises at least one of a viewport size or viewport scaling information, the address information comprises a source web address of the target page, and the position information comprises the position of the target region in the target page; and then receiving a module identifier of the visualization module that is configured by a user, and sending module information of the visualization module to an application platform, so as to instruct the application platform to render the visualization module. In the method, metainformation of a target region in a target page is acquired, and the metainformation is sent as module information to an application platform, such that the application platform renders a visualization module on the basis of the module information; thus, the method can not only significantly reduces the time and energy cost of a user during an operation, but can also reduce resource investment in development and maintenance, thereby achieving the aims of low cost and high efficiency.

Description

Method for managing visual modules and related device

[0001] The present application claims priority to the Chinese patent application No. 202510142115.2, filed on February 8, 2025, and entitled "Method for managing visual modules and related device", the content of which is incorporated herein by reference in its entirety. TECHNICAL FIELD

[0002] The present application relates to the technical field of software development, and in particular to a method for managing visual modules, a visual management system, a visual management device, a computing device cluster, a computer readable storage medium, and a computer program product. BACKGROUND

[0003] A dashboard is a user interface that provides a centralized platform for displaying information to users, enabling them to quickly access key information and perform common operations. Typically, a dashboard is used to display key data, indicators, and status to help users quickly understand the overall situation of a system or project.

[0004] Dashboards can display key data, indicators, and status content in a modular manner. Currently, mainstream dashboards typically use visual modules represented by cards to display information. A card is a module that displays specific content or functionality on a dashboard interface. In many scenarios, users have the demand to add the content of an existing webpage to the dashboard to monitor together with other data, thereby achieving one-stop tracking.

[0005] To this end, users need to develop corresponding cards based on the content of the existing webpage, which is difficult and costly. How to improve the development efficiency and reduce the development cost of visual modules such as cards has become a key concern in the industry. SUMMARY

[0006] The present application provides a method for managing visual modules, which obtains meta-information of a target area in a target page for generating a card or other visual module, sends the meta-information as module information to an application platform, so that the application platform can render the visual module based on the module information. This not only significantly reduces the time and effort cost of users in the operation process, but also reduces the resource input for development and maintenance, achieving the goal of low cost and high efficiency. The present application also provides a visual management system, a visual management device, a computing device cluster, a computer readable storage medium, and a computer program product corresponding to the above method.

[0007] In a first aspect, the present application provides a method for managing a visual module. The visual module includes a module capable of being embedded in an application platform / workbench for information display. For example, the visual module can include, but is not limited to, a card. The method is applied to a visual management system. The visual management system includes a visual management device and an application platform. The visual management device is used to generate a visual module, for example, to generate a card. The visual management device can exist in the form of a plug-in, a component, or a service, etc. For example, the visual management device can be a browser plug-in.

[0008] The visual management device obtains meta information of a target area in a target page for generating a visual module. The visual module is used to be embedded in an application platform and display content in the target page in the application platform. The meta information includes at least one of size information, address information, or location information. The size information includes at least one of viewport size or viewport scaling information, the address information includes a source website of the target page, and the location information includes a location of the target area in the target page. The visual management device receives a module identifier of the visual module configured by a user. The visual management device sends module information of the visual module to the application platform. The module information includes the module identifier and the meta information, and the module information is used to instruct the application platform to render the visual module.

[0009] The method can significantly reduce the time and effort cost of the user in the operation process, and reduce the resource input of development and maintenance, so as to achieve the goal of low cost and high efficiency.

[0010] In some possible implementation manners, the visual management device can obtain screenshot information in response to a screenshot operation triggered by the user in the target page. The screenshot operation is used to take a screenshot of the target area in the target page, and the screenshot information includes the meta information.

[0011] The method supports introducing a brand-new interaction form, for example, the user triggers a screenshot operation in the target page, and the visual management device obtains screenshot information as module information of the visual module to generate a visual module such as a card. In this way, the user experience is optimized in a more intuitive and efficient manner, and the pain point problem in the card generation process in the related art is fundamentally solved. Moreover, the above-mentioned interaction form can be developed around the user demand to provide a more intelligent and personalized solution, so that the generation process of the visual module such as the card is more convenient and smooth, the generation quality of the visual module is improved, and the generation efficiency is improved.

[0012] In some possible implementation manners, the visualization management apparatus can identify a target region in the target page for generating the visualization module by an artificial intelligence (AI) model, and obtain the meta information of the target region. Alternatively, the visualization management apparatus can determine a target region in the target page for generating the visualization module in response to a voice instruction, and obtain the meta information of the target region. The visualization management apparatus can receive a natural language description input by a user, determine a target region in the target page for generating the visualization module according to the natural language description, and obtain the meta information of the target region.

[0013] The method provides diversified manners for obtaining the meta information of the target region for generating the visualization module, and can meet the user demand. Moreover, the AI model is used to determine the target region and obtain the meta information of the target region, so that the user can be free from selection, the user operation is reduced, and the user experience is improved.

[0014] In some possible implementation manners, the visualization management apparatus can identify at least one candidate region in the target page for generating the visualization module according to the browsing history or the preference information of the user by an AI model, then the visualization management apparatus recommends the at least one candidate region to the user, and then the visualization management apparatus receives a target region determined by the user from the at least one candidate region.

[0015] In this way, the certain region in the webpage can be intelligently recommended for the user to embed into the application platform according to the browsing history or the preference of the user.

[0016] In some possible implementation manners, the application platform can further render the visualization module on the interface of the application platform by an inline frame according to the module information of the visualization module. The inline frame, also referred to as an embedded frame, is specifically an element representing a nested browsing context, and can usually be a Hyper Text Markup Language (HTML) element, for example, an iframe element in the HTML element. The iframe element can embed another HTML page into the current page, for example, embed the target page (for example, the target region of the target page) into the application platform.

[0017] The iframe embedding can reduce secondary rendering, and moreover, the iframe embedding can enable the visualization module to keep synchronization with the original webpage (for example, the target page), so that when the content of the original webpage changes, the visualization module embedded by the iframe can also be updated in real time.

[0018] In some possible implementation manners, the application platform can further reconstruct the meta information into structured data, and then the application platform can render the visualization module on the interface of the platform according to the structured data and in a self-defined style.

[0019] The method supports rendering a work platform rendering target visualization module through data extraction and reconstruction, and meets requirements of different platforms.

[0020] In some possible implementation manners, the application platform can also display module information of at least one visualization module in the visualization module library. Accordingly, the application platform can render a target module in the at least one visualization module on the interface of the application platform in response to a drag-and-drop operation of the user.

[0021] The method supports storing module information of the visualization module in the visualization module library (such as a card market), and selecting a target module through a drag-and-drop operation according to user demand when related content needs to be displayed, and rendering the target module on the interface of the application platform, to meet individual needs.

[0022] In some possible implementation manners, the visualization management apparatus can also traverse a page element of the target page, and record attributes of a scroll element in the page element. Accordingly, the application platform can render the visualization module on the interface of the application platform according to the attributes of the scroll element. In this way, accurate rendering can be implemented, and it is ensured that the part rendered on the application platform is not deviated from the content of the target page.

[0023] In some possible implementation manners, the visualization management apparatus sends the module information of the visualization module to the application platform by taking the browser as a communication intermediary. For example, the visualization management apparatus can send the module information to the background of the browser, and then forward the module information to the application platform. In this way, efficient transmission of the module information between the visualization management apparatus and the application platform can be implemented, and help is provided for rendering the visualization module on the application platform.

[0024] In some possible implementation manners, the visualization module includes a card, and accordingly, the visualization management apparatus can send card information of the card to the application platform through script injection. The method can implement sending of the card information through simple script injection, lays a foundation for subsequent card rendering, and has high usability.

[0025] In a second aspect, the present application provides a visualization management system. The visualization management system includes a visualization management apparatus and an application platform.

[0026] The visualization management apparatus is configured to acquire meta information of a target region in a target page for generating a visualization module, the visualization module being configured to be embedded into the application platform and display content in the target page on the application platform, the meta information comprising at least one of size information, address information or position information, the size information comprising at least one of viewport size or viewport scaling information, the address information comprising a source address of the target page, and the position information comprising a position of the target region in the target page.

[0027] The visualization management apparatus is further configured to receive a module identifier of the visualization module configured by a user, and send module information of the visualization module to the application platform, the module information comprising the module identifier and the meta information, the module information being used to instruct the application platform to render the visualization module.

[0028] In some possible implementation manners, the visualization management apparatus is specifically configured to:

[0029] In response to a screenshot operation triggered by a user on a target page, acquire screenshot information, the screenshot operation being used to take a screenshot of a target region in the target page, and the screenshot information comprising the meta information.

[0030] In some possible implementation manners, the visualization management apparatus is specifically configured to:

[0031] identify a target region in the target page for generating a visualization module by using an artificial intelligence (AI) model, and acquire meta information of the target region; or

[0032] In response to a voice instruction, determine a target region in the target page for generating a visualization module, and acquire meta information of the target region; or

[0033] receive a natural language description input by a user, determine a target region in a target page for generating a visualization module according to the natural language description, and acquire meta information of the target region.

[0034] In some possible implementation manners, the visualization management apparatus is specifically configured to:

[0035] identify at least one candidate region in the target page for generating a visualization module by using an artificial intelligence (AI) model according to browsing history or preference information of a user;

[0036] recommend the at least one candidate region to the user;

[0037] receive a target region determined by the user from the at least one candidate region.

[0038] In some possible implementation manners, the application platform is configured to:

[0039] According to the module information of the visualization module, the visualization module is rendered on the interface of the application platform through an inline frame.

[0040] In some possible implementation manners, the application platform is configured to:

[0041] reconstruct the meta information into structured data;

[0042] According to the structured data, the visualization module is rendered on the interface of the platform in a custom style.

[0043] In some possible implementation manners, the application platform is further configured to:

[0044] exhibit module information of at least one visualization module in a visualization module library;

[0045] The application platform is specifically configured to:

[0046] in response to a drag-and-drop operation of the user on a target module in the at least one visualization module, render the target module on the interface of the application platform.

[0047] In some possible implementation manners, the visualization management apparatus is further configured to:

[0048] traverse a page element of the target page, and record an attribute of a scroll element in the page element;

[0049] The application platform is specifically configured to:

[0050] According to the attribute of the scroll element, the visualization module is rendered on the interface of the application platform.

[0051] In some possible implementation manners, the visualization management apparatus is specifically configured to:

[0052] send the module information of the visualization module to the application platform by taking a browser as a communication intermediary.

[0053] In some possible implementation manners, the visualization module includes a card, and the visualization management apparatus is specifically configured to:

[0054] send card information of the card to the application platform through script injection.

[0055] In a third aspect, the present application provides a visualization management apparatus. The apparatus includes:

[0056] The acquisition module is configured to acquire meta information of a target region in a target page for generating a visualization module, the visualization module is configured to be embedded into the application platform and display content in the target page on the application platform, and the meta information comprises at least one of size information, address information or position information, the size information comprises at least one of viewport size or viewport zoom information, the address information comprises a source website of the target page, and the position information comprises a position of the target region in the target page.

[0057] The acquisition module is further configured to receive a module identifier of the visualization module configured by a user.

[0058] The communication module is configured to send module information of the visualization module to the application platform, the module information comprises the module identifier and the meta information, and the module information is used to instruct the application platform to render the visualization module.

[0059] In some possible implementation manners, the acquisition module is configured to:

[0060] In response to a screenshot operation triggered by a user in a target page, the acquisition module is configured to acquire screenshot information, the screenshot operation is used to take a screenshot of a target region in the target page, and the screenshot information comprises the meta information.

[0061] In a fourth aspect, the present application provides a computing device cluster. The computing device cluster comprises at least one computing device, and the at least one computing device comprises at least one processor and at least one memory. The at least one processor and the at least one memory are in communication with each other. The at least one processor is configured to execute instructions stored in the at least one memory, so that the computing device or the computing device cluster performs the management method of the visualization module according to the first aspect or any implementation manner of the first aspect.

[0062] In a fifth aspect, the present application provides a computer-readable storage medium, and the computer-readable storage medium stores instructions. The instructions instruct a computing device or a computing device cluster to perform the management method of the visualization module according to the first aspect or any implementation manner of the first aspect.

[0063] In a sixth aspect, the present application provides a computer program product comprising instructions, which, when executed on a computing device or a computing device cluster, cause the computing device or the computing device cluster to perform the management method of the visualization module according to the first aspect or any implementation manner of the first aspect.

[0064] On the basis of the implementation manners of the aspects described above, the present application can be further combined to provide more implementation manners. BRIEF DESCRIPTION OF DRAWINGS

[0065] In order to more clearly illustrate the technical method of the present application, the following will briefly introduce the drawings required to be used.

[0066] Fig. 1 is a schematic diagram of an architecture of a visual management system provided by the present application;

[0067] Fig. 2 is a flow chart of a management method of a visual module provided by the present application;

[0068] Fig. 3 is a flow chart of another management method of a visual module provided by the present application;

[0069] Fig. 4 is a flow chart of a management method of a visual module provided by the present application;

[0070] Figs. 5A to 5C are a series of interface schematic diagrams of the management method of the visual module provided by the present application;

[0071] Fig. 6 is a structural schematic diagram of a visual device provided by the present application;

[0072] Fig. 7 is a structural schematic diagram of a computing device provided by the present application;

[0073] Fig. 8 is a structural schematic diagram of a computing device cluster provided by the present application;

[0074] Fig. 9 is a structural schematic diagram of another computing device cluster provided by the present application;

[0075] Fig. 10 is a structural schematic diagram of still another computing device cluster provided by the present application. DETAILED DESCRIPTION

[0076] The terms "first", "second" in the embodiments of the present application are only for the purpose of description, and cannot be understood as indicating or implying relative importance or implicitly indicating the number of the indicated technical features. Therefore, the features defined with "first", "second" can explicitly or implicitly include one or more of the features.

[0077] First, some technical terms involved in the embodiments of the present application are introduced.

[0078] Application platform refers to a program written for a certain special application purpose of a user. Application platform includes a workbench, or called Dash board, which is a kind of user interface. The workbench provides a centralized information display platform for the user, so that the user can quickly obtain key information and perform common operations, and is usually used to display key data, indicators and status to help the user quickly understand the overall situation of the system or project.

[0079] For ease of understanding, the present application provides some examples of application platforms for illustration. For example, the application platform can include a news aggregation platform, an education platform, an e-commerce platform. Among them, the news aggregation platform can aggregate the content in the news website selected by the user to the personalized news page of the news aggregation platform, so as to facilitate the user to view the relevant news content. The education platform can embed the teaching content (such as charts, video areas) of some web pages selected by the user into the course page, facilitating students to concentrate on learning. The e-commerce platform can embed some product display areas of the e-commerce website selected by the user into the shopping guide page or the personal collection page of the e-commerce platform.

[0080] The application platform or the workbench can adopt a modular way to display key data, indicators or states. For example, the application platform or the workbench can use multiple cards to display different charts or videos and the like. The card is a module for displaying specific content or functions on the workbench / Dashboard interface. As a form of interface display of services, the card can pre-position important information or operations of the service to the card, so as to achieve direct service and reduce experience level. Moreover, the card has the ability of reusable, programmable atomic service, and is often used to be embedded into the application platform as part of the interface thereof.

[0081] Taking an office automation (OA) platform as an example, the workbench of the OA platform can include an attendance card, an approval card and a performance card. Among them, the attendance card is used to display attendance data, indicators or states. The approval card is used to display approval data and approval tasks, and the performance card is used to display performance data such as monthly sales and weekly sales.

[0082] In many scenarios, users want to embed the content of an existing web page into an application platform / workbench. For example, users want to embed real-time stock prices and real-time futures prices into an investment management platform to monitor together with other data and achieve one-stop tracking. For this purpose, the user needs to develop corresponding cards according to the content of the existing web page. For example, the user needs to develop stock price cards and futures price cards.

[0083] When developing a card, a developer can copy a card example code provided by a system, develop a secondary card based on the copied card example code, or integrate a large number of card templates through a scaffolding, and the developer develops a secondary card based on the card templates. In order to reduce the amount of code, the industry has also proposed a low-code (Low-Code) development method. Among them, low code can be abbreviated as low code, and the low-code development method is a method that enables developers to complete application development with minimal manual coding through a graphical interface and pre-built code blocks. The core of this method is to simplify the development process, reduce the technical threshold, and enable developers to build applications more quickly and efficiently. When developing a card, the card can be generated by dragging and dropping in a low-code manner.

[0084] However, the complexity of the application platform increases the difficulty of development. Complex architecture, business logic, or technology stack may require more development time and higher level of professional skills. Using new technologies or uncommon technologies may require additional learning and training costs. The development team may need to master new programming languages, frameworks, or tools. More developers or higher level of experts are needed to complete the project, thereby increasing the cost of manpower. The development cycle is longer, and multiple iterations and tests may be required to reach the expected quality standard. The overall development cost is relatively high, and the industry urgently needs to provide an efficient and low-cost development method.

[0085] To solve the above problems, the application provides a management method of a visual module. The visual module includes a module that can be embedded in an application platform / workbench for information display. For example, the visual module can include but is not limited to a card. The method is mainly applied to a browser page. The browser page includes a web page displayed to a user by a browser, which can be a static web page or a dynamic web page. The method supports embedding the content in the web page in the form of a visual module such as a card into an application platform or a workbench. The method can be executed by a visual management system. The visual management system includes a visual management device and an application platform. The visual management device is used to generate a visual module, for example, to generate a card. The visual management device can exist in the form of a plug-in, a component, or a service. For example, the visual management device can be a browser plug-in.

[0086] In a specific implementation, the visualization management apparatus obtains meta information of a target region in the target page for generating the visualization module. The visualization module is configured to be embedded into the application platform and display content in the target page on the application platform. The meta information includes at least one of size information, address information, or position information. The size information includes at least one of viewport size or viewport scaling information (e.g., viewport scaling ratio). The address information includes a source address of the target page. The position information includes a position of the target region in the target page. Then, the visualization management apparatus receives a module identifier of the visualization module configured by the user. For example, when the visualization module is a card, the visualization management apparatus can receive a card name configured by the user. Next, the visualization management apparatus sends module information of the visualization module to the application platform, where the module information includes the module identifier and the meta information. The module information is configured to instruct the application platform to render the visualization module.

[0087] The method can significantly reduce the time and effort cost of the user in the operation process, reduce the resource input for development and maintenance, and achieve the goal of low cost and high efficiency. Moreover, the method also supports the introduction of a brand-new interactive form. For example, the user triggers a screenshot operation on the target page, and the visualization management apparatus obtains screenshot information as the module information of the visualization module to generate the visualization module such as a card. In this way, the user experience is optimized in a more intuitive and efficient manner, and the pain point problem in the card generation process in the related art is fundamentally solved. Moreover, the above-mentioned interactive form can be developed around the user demand to provide a more intelligent and personalized solution, so that the generation process of the visualization module such as a card is more convenient and smooth, the generation quality of the visualization module is improved, and the generation efficiency is improved.

[0088] The visualization module management method of the present application can be applied to various scenarios, including but not limited to content aggregation and personalized display scenarios, collaboration and sharing scenarios, advertising and marketing scenarios, content review and supervision scenarios.

[0089] The content aggregation and personalized display scenario can include a news aggregation scenario, an education scenario, or an e-commerce guide scenario. For the news aggregation scenario, the application platform can include a news aggregation platform, and a user can select a certain part of the content of a news webpage (such as a headline news or a specific column) and embed the part into a personalized news page of the news aggregation platform for the user to view. For the education scenario, the application platform can include an education platform, and a teacher can select certain teaching content (such as a chart or a video area) of a webpage and embed the content into a course page of the education platform for students to learn. For the e-commerce guide scenario, the application platform can include an e-commerce platform, and a user can select certain product display areas of an e-commerce webpage and embed the areas into a guide page or a personal collection page of the e-commerce platform.

[0090] For the collaboration and sharing scenario, the application platform can include a collaboration platform, such as various team collaboration tools. Embedding a specific area of a webpage in the collaboration platform can facilitate team members to view relevant content without accessing the entire webpage. A user can also select a dynamic data area on a webpage, such as a stock industry or a weather forecast, and embed the area into a monitoring panel (a form of a workbench) of the application platform, so as to realize real-time viewing and updating.

[0091] For the advertising and marketing scenario, when performing advertising, an advertiser can select certain areas (such as specific product recommendation areas) in a webpage and embed the areas into an application platform (such as a platform other than the platform of the advertiser) as advertising display. When performing brand promotion, a brand party can also select certain areas (such as activity pages) of a brand website and embed the areas into a social media or a partner website.

[0092] For the content review and supervision scenario, the application platform can include a review platform, such as a content review tool, and a user can select certain areas (such as a comment area or user-generated content) in a webpage and embed the areas into the review platform for a supervisor to handle in a centralized manner. The application platform can also include an opinion monitoring system, and a user can select specific areas of a social media or a news website, such as a hot search area of a social media or a hot comment area of a news website, and embed the areas into the opinion monitoring system to track hot topics in real time.

[0093] In order to make the technology of the present application clearer and easier to understand, the system architecture of the present application is introduced below in combination with the drawings.

[0094] Referring to a schematic diagram of an architecture of a visual management system 10 shown in FIG. 1, the visual management system 10 includes a visual management device 100 and an application platform 200. The visual management device 100 can be a plug-in of a browser 20, which can assemble and display the content of any area of a browser page in the application platform 200.

[0095] The visualization management apparatus 100 is configured to acquire meta information of a target region in a target page for generating a visualization module. The meta information comprises at least one of size information, address information or position information. The size information comprises at least one of viewport size or viewport zoom information, the address information comprises a source URL (or called web address) of the target page, and the position information comprises a position of the target region in the target page.

[0096] In the example of FIG. 1, the visualization management apparatus 100 can acquire screenshot information in response to a screenshot operation triggered by a user on the target page. The screenshot operation is configured to take a screenshot of the target region in the target page, and the screenshot information comprises the meta information. In this case, the position information can be a screenshot position, and the viewport size can be equal to a screenshot size. Further, the meta information can further comprise mouse position data when the user performs the screenshot operation.

[0097] In other possible implementations of the embodiments, the visualization management apparatus 100 can identify the target region in the target page for generating the visualization module by an artificial intelligence (AI) model, and acquire the meta information of the target region without manual selection by the user. For example, the AI model can be a recommendation model, and the visualization management apparatus 100 can identify at least one candidate region in the target page for generating the visualization module by the AI model according to browsing history or preference information of the user, recommend the at least one candidate region to the user, and receive a target region determined by the user from the at least one candidate region. Alternatively, the visualization management apparatus 100 can also determine the target region in the target page for generating the visualization module in response to a voice instruction, and acquire the meta information of the target region. In addition, the visualization management apparatus 100 can also receive a natural language description input by the user, determine the target region in the target page for generating the visualization module according to the natural language description, and acquire the meta information of the target region.

[0098] The visualization management apparatus 100 is further configured to receive a module identifier of the visualization module configured by the user. The module identifier is configured to uniquely identify the visualization module, and can be a module name or a module code, for example. When the visualization module is a card, the module identifier can be a card name. In some possible implementations, the visualization management apparatus 100 can also automatically generate the module identifier of the visualization module, for example, the visualization management apparatus 100 can generate a random number or a serial number as the module identifier of the visualization module.

[0099] The application platform 200 is configured to receive the module information of the visualization module sent by the visualization management device 100. The module information of the visualization module includes module identification and meta information. The module information is used to instruct the application platform 200 to render the visualization module. In some examples, the visualization management device 100 can send the module information of the visualization module to the application platform 200 through a browser as a communication intermediary. For example, the visualization management device 100 can send the module information to the background of the browser, and then the background of the browser sends the module information to the application platform 200.

[0100] In some possible implementations, the application platform 200 is further configured to render the visualization module on an interface of the application platform 200. In this application, the application platform 200 supports multiple rendering modes.

[0101] One of the rendering modes can be that the application platform 200 renders the visualization module on the interface of the application platform 200 through an inline frame according to the module information of the visualization module. The inline frame, also known as an embedded frame, is specifically an element representing a nested browsing context, which can usually be a Hyper Text Markup Language (HTML) element, for example, an iframe element in the HTML element. The iframe element can embed another HTML page into the current page, for example, embed a target page (such as a target area of the target page) into the application platform 200.

[0102] It should be noted that each embedded browsing context has its own document and allows uniform resource locator (URL) navigation. The URL is a unique identifier used to locate resources on the Internet, which points to a specific website, web page or document, also known as a web address. The navigation of each embedded browsing context is linearly embedded into the session history of the top-level browsing context. The browsing context containing the embedded content is called the parent browsing context. The top-level browsing context (without a parent) is usually the browser window represented by the Window object.

[0103] By using iframe embedding, the complex data conversion and cleaning process that may be involved in migrating data from the old system to the new system can be avoided, that is, the data integrity and consistency can be ensured, and there is no need to customize the interface or middleware for integration of the new system and the old system, and users do not need to be trained to adapt to the operation of the new system, thereby reducing the time cost and cost. Moreover, this scheme also avoids the additional audit cost and security measure cost generated to ensure that the new system meets the industry standards and regulatory requirements. In this way, the migration cost is greatly reduced.

[0104] Another rendering manner can be that the application platform 200 reconstructs the meta information into structured data, and then renders the visualization module according to the structured data in a self-defined style on the interface of the application platform 200. The structured data can be in JavaScript Object Notation (JSON).

[0105] For the implementation scheme of non-iframe, the application platform 200 can also use the Web Components technology to encapsulate the selected target area into a self-defined component and embed it into the application platform. Alternatively, the application platform 200 can receive the meta information of the selected target area through an application programming interface (API), and render based on the meta information obtained through the API.

[0106] Based on the visualization management system 10 of the present application, the present application also provides a management method of a visualization module. The following will be described in detail in combination with embodiments.

[0107] Referring to a flowchart of a management method of a visualization module shown in FIG. 2, the method comprises the following steps:

[0108] S202, the visualization management device 100 obtains meta information of a target area for generating a visualization module in a target page.

[0109] The target page is a page to be added to the application platform 200 or embedded into the application platform 200. The target page can be a page selected or configured by the user, or a page determined by an AI model. The AI model can recommend a page according to the user's browsing history or preference information, and the target page can be a page recommended by the AI model according to the user's browsing history or preference information.

[0110] The target area refers to an area in the target page to be added to the application platform 200 or embedded into the application platform 200. The target area can be selected or configured by the user. For example, the user can select it by screenshot. Similar to the target page, the target area can also include an area determined by an AI model. For example, the target area can include an area recommended by the AI model according to the user's browsing history or preference information.

[0111] The meta information includes at least one of size information, address information or location information. The size information includes at least one of viewport size or viewport zoom information. The address information includes a source URL of the target page. The location information includes a location of the target region in the target page. Further, when the target region is a region selected by a user screenshot, the meta information can further include mouse position data when the user performs the screenshot operation. The mouse position data can reflect the attention of the user.

[0112] The visualization module is used to be embedded into the application platform and display the content in the target page in the application platform. The visualization module includes a module capable of being embedded in the application platform / Dashboard to display information. For example, the visualization module can include but is not limited to a card, a widget.

[0113] The visualization management apparatus 100 can obtain the meta information of the target region in the target page for generating the visualization module in various ways. The following will be described respectively.

[0114] In some possible implementation manners, the visualization management apparatus 100 obtains screenshot information in response to a screenshot operation triggered by a user in the target page. The screenshot operation is used to take a screenshot of the target region in the target page, and the screenshot information includes the meta information of the target region. In a specific implementation, the visualization management apparatus 100 can realize the screenshot operation triggered in the target page through page script injection. The script injection is used for front-end browser plug-in development, and allows developers to dynamically insert custom JavaScript code into a web page to execute in the context of the web page.

[0115] When the user triggers the screenshot operation, the visualization management apparatus 100 can execute the JavaScript code inserted into the target page to capture the viewport size, the viewport zoom information, the source URL of the target page, and the location of the target region in the target page when the user performs the screenshot operation, and obtain the meta information. In addition, the visualization management apparatus 100 can also capture the mouse position data when the user performs the screenshot operation, and obtain the meta information.

[0116] Further, the visualization management apparatus 100 also supports the size of the generated visualization module through the grid preview, for example, the size of the generated card through the grid preview. The grid, also known as a "grid system", is a commonly used layout tool, especially in the Dashboard, for organizing and presenting information. The grid system makes the arrangement of content more neat and consistent by creating a grid structure of visualization on the page. Based on this, the visualization management apparatus 100 can preview the size of the generated card in the page through the grid.

[0117] In some possible implementation manners, the visualization management apparatus 100 can identify a target region in the target page for generating the visualization module through an AI model, and obtain the meta information of the target region. Specifically, the AI model can include a recommendation model, and the visualization management apparatus 100 can identify at least one candidate region in the target page for generating the visualization module through the AI model according to the browsing history or preference information of the user, and then recommend the at least one candidate region to the user, and receive the target region determined by the user from the at least one candidate region.

[0118] Alternatively, the visualization management apparatus 100 can also determine the target region in the target page for generating the visualization module in response to a voice instruction, and obtain the meta information of the target region. In addition, the visualization management apparatus 100 can also receive a natural language description input by the user, determine the target region in the target page for generating the visualization module according to the natural language description, and obtain the meta information of the target region.

[0119] S204. The visualization management apparatus 100 receives the module identifier of the visualization module configured by the user.

[0120] Specifically, the visualization management apparatus 100 can present a configuration interface to the user, and receive the module identifier of the visualization module configured by the user through the configuration interface. The configuration interface can be a graphical user interface (GUI) or a command user interface (CUI).

[0121] The module identifier is used to uniquely identify the visualization module. For example, the module identifier can be a module name or a module code of the visualization module. Taking a card as an example of the visualization module, the module identifier can include a card name.

[0122] S206. The visualization management apparatus 100 sends the module information of the visualization module to the application platform 200, the module information including the module identifier and the meta information, and the module information being used to instruct the application platform 200 to render the visualization module.

[0123] Specifically, the visualization management apparatus 100 can send the module information of the visualization module to the application platform 200 through a browser as a communication intermediary. For example, the visualization management apparatus 100 can send the module information to a browser background, and then send the module information to the application platform 200 by the browser background. The visualization management apparatus 100 can establish a communication pipeline with the application platform 200, and perform data sending and listening based on the communication pipeline. When performing data sending, the visualization management apparatus 100 can inject the module information of the visualization module to the application platform 200 through a script. For example, the visualization management apparatus 100 can send the card information of the card to the application platform 200 through a script.

[0124] In S208, the application platform 200 renders the visualization module on the interface of the application platform 200 according to the module information of the visualization module.

[0125] In the present application, the visualization management apparatus 100 can send the module information of one or more visualization modules, and the application platform 200 can store the received module information of the visualization module, so as to render the corresponding visualization module according to the requirement subsequently. For example, the application platform 200 can store the received module information of the visualization module to a visualization module library. The visualization module library is used to store the module information of the visualization module, and in some examples, the visualization module library can include a card market, and the card market stores the card information of at least one card. The application platform 200 can display the module information of at least one visualization module in the visualization module library (such as the card market), and the application platform 200 acquires the module information of a target module in response to the drag-and-drop operation of the user on the target module in the at least one visualization module, and renders the target module on the interface of the application platform 200.

[0126] The application platform 200 supports multiple rendering modes for the rendering of each visualization module. When multiple visualization modules need to be rendered, the application platform 200 can support rendering in a unified manner, or can render in different manners according to the business requirement or characteristics. The different rendering modes are introduced as follows.

[0127] One rendering mode can be that the application platform 200 renders the visualization module on the interface of the application platform 200 according to the module information of the visualization module through an inline frame. The inline frame is an element representing a nested browsing context, for example, an iframe element in an HTML element. The iframe element can embed another HTML page into the current page, for example, embedding a target page (such as a target region of the target page) into the application platform.

[0128] Another rendering mode can be that the application platform 200 reconstructs the meta information into structured data, and then renders the visualization module on the interface of the application platform 200 according to the structured data in a self-defined style. The structured data can adopt JavaScript Object Notation (JSON).

[0129] For non-iframe implementations, the application platform 200 can also use Web Components technology to encapsulate the selected target area as a custom component and embed it into the application platform. Alternatively, the application platform 200 can receive metadata about the selected target area through an application programming interface (API) and perform rendering based on the metadata obtained through the API.

[0130] Furthermore, considering that the target page may also include scrolling elements, such as scrollbars, the visualization management device 100 can also traverse the page elements of the target page and record the attributes of the scrolling elements. The attributes of the scrolling elements may include scroll position. Accordingly, the application platform 200 can render the visualization module on the interface of the application platform 200 according to the attributes of the scrolling elements.

[0131] Based on the above description, this application provides a method for managing visualization modules. This method obtains metadata about the target area on the target page used to generate visualization modules such as cards, and sends this metadata as module information to the application platform. This allows the application platform to render the visualization module based on the module information, significantly reducing the time and effort required for user operation, as well as reducing development and maintenance resource investment, achieving low cost and high efficiency. Furthermore, this method supports the introduction of new interaction methods, such as a user triggering a screenshot operation on the target page. The visualization management device obtains the screenshot information as module information to generate visualization modules such as cards, thus optimizing the user experience in a more intuitive and efficient way, fundamentally solving the pain points of the card generation process in related technologies. Moreover, the above interaction methods can be developed around user needs, providing more intelligent and personalized solutions, making the generation process of visualization modules such as cards more convenient and smooth, improving the generation quality of visualization modules, and increasing generation efficiency.

[0132] The following describes the management method of the visualization module using a visualization module as an example, in conjunction with another embodiment. This embodiment focuses on the communication process between the visualization management device 100 and the application platform 200, as well as the different rendering branches of the application platform 200.

[0133] Referring to Figure 3, a flowchart of a method for managing a visualization module is shown. This method includes the following steps:

[0134] S302, Visual management device 100 is turned on and associated with the application platform.

[0135] Specifically, the visual management device 100 responds to a user-triggered activation operation by activating and associating the application platform. The application platform can be configured when the user triggers the activation operation. For example, when a user triggers the activation operation on a target page, the visual management device 100 can present the associated application platforms to the user through a drop-down list.

[0136] S304, Visual Management Device 100 establishes a communication channel.

[0137] The communication pipe can be a shared memory segment for inter-process communication, such as a shared memory segment between the visualization management device 100 (or the browser backend) and the application platform 200. The visualization management device 100 creates shared memory to enable data transmission between the visualization management device 100 and the application platform 200.

[0138] S306. The visual management device 100 responds to the user's screenshot operation on the target page and obtains the screenshot information, which includes the metadata of the target area.

[0139] S308. Visual management device 100 determines whether to associate with application platform 200. If yes, execute S310 and S312; otherwise, return to S302.

[0140] The visualization management device 100 can read the association status to determine whether the visualization management device 100 is associated with the application platform. If the association status indicates association, then S310 and S312 are executed; if the association status indicates no association, then S302 can be returned to re-associate.

[0141] It should be noted that S308 can be executed before S306, or in parallel with S306, and this application does not limit this.

[0142] S310, the visual management device 100 receives the card name configured by the user.

[0143] S312, the visual management device 100 sends card information to the application platform 200, the card information including card name and metadata.

[0144] S314. Application platform 200 stores card information to the card market. If the page elements include scrolling elements, execute S315 and S316; if the page elements do not include scrolling elements, execute S316.

[0145] S315 and Application Platform 200 are adapted to scrolling based on scripts injected into Visual Management Device 100.

[0146] Specifically, the visualization management device 100 includes a rendering adaptation module. This module can determine the rendering parameters for scroll adaptation based on the attributes of the scrolling element, such as its scroll position, and then send these parameters to the application platform via script injection. The application platform 200 can then perform scroll adaptation based on these rendering parameters.

[0147] S316, Application Platform 200 obtains card information from the card market and performs card rendering.

[0148] Application platform 200 can obtain at least one of the card's size information, location information, or address information from the card market for card rendering. It should be noted that when page elements include scrolling elements, application platform 200 can also render cards based on scroll adaptation parameters.

[0149] To make the technical solution of this application clearer and easier to understand, the management method of the visualization module of this application will be introduced below in conjunction with a specific scenario.

[0150] Referring to Figure 4, which illustrates a flowchart of a visualization module management method, the target page requires login access. Therefore, browser cookies need to be synchronized between the target page and the application platform 200. Browser cookies include user login information and user login status. The user login information may include username and password.

[0151] The visualization management device 100 includes a card capture script, a rendering adaptation module, and a communication module. The visualization management device 100 injects the card capture script into the target page, initiating a screenshot operation. When a user triggers a screenshot operation on a target area of ​​the target page, screenshot information can be obtained. The screenshot information includes the webpage address, screenshot size, viewport size, screenshot coordinates, and scrolling information. In some examples, the screenshot information may also include the user-configured card name.

[0152] In this embodiment, the card capture script can traverse page elements and determine whether the page elements include scrollable elements. If so, the card capture script obtains the position and size of the element box. When the box is within the screenshot viewport, the card capture script marks the element as scrollable. When the box is outside the screenshot viewport, the card capture script marks the element as locked scrollable. The card capture script can record the above scrolling information to decide whether to perform scroll adaptation. In this way, it can ensure that the rendered part is consistent with the content of the user's screenshot.

[0153] After establishing a communication channel, the communication module can transmit data through message sending and message listening. Specifically, the card-capturing script injected into the target page can send screenshot information using the browser plugin's receiving interface. The communication module can record the plugin ID during application platform 200 initialization and establish event listeners for communication and cross-domain scrolling invocation. When the corresponding event is detected, screenshot information can be sent via script injection. Furthermore, the communication module can also obtain specific cards, inject scrolling scripts, and achieve cross-domain iframe control.

[0154] The rendering adaptation module supports region adaptation and scroll adaptation, and can assist the application platform 200 in rendering and correction. As shown in Figure 4, the application platform 200 can simulate rendering the entire original viewport iframe in the live card rendering area, and render the live card based on the recorded coordinates and size.

[0155] The following section will introduce the management method of the visualization module in this application from the perspective of the interactive interface.

[0156] Referring to Figure 5A, which illustrates a browser interface-based screenshot operation, users can trigger a browser plugin within the browser interface to initiate the screenshot operation. When the user clicks the "Start Screenshot" control, a screenshot operation can be performed. As shown in Figure 5B, the user can take a screenshot of any area of ​​the browser content. The browser plugin can obtain the screenshot information, retrieve card information based on the screenshot information, transmit the card information to the browser's backend, and forward it to the application platform. The application platform receives the card information and presents it in the card market. As shown in Figure 5C, the application platform can load and render cards using a built-in live card loader.

[0157] It should be noted that this application supports multi-region combination. Specifically, the visual management system supports selecting different regions of multiple web pages and combining them into a new embedded page. Furthermore, this method supports synchronized content updates; when the original web page content changes, the embedded region can be updated in real time. Moreover, before embedding, the method supports blurring the target region or masking sensitive information to protect privacy, and also supports adding watermarks or copyright notices to the target region to ensure the legal use of the content. In addition, this method supports offline use; for example, the target region can be saved as an offline file, such as a Portable Document Format (PDF) or an image, for users to view when there is no network connection or the network connection is poor.

[0158] To enhance user experience, this application also supports cross-device synchronization; for example, a region selected by a user on one device can be automatically synchronized and displayed on other devices. This application also supports multiple languages; specifically, it can translate the content of the target region in real time and embed the translated content into the application platform.

[0159] Based on the aforementioned management method for visualization modules, this application also provides a visualization management system 10. The structure of the visualization management system of this application will be described below with reference to the accompanying drawings.

[0160] Referring to the structural diagram of a visualization management system shown in Figure 1, the visualization management system 10 includes:

[0161] The visualization management device 100 is used to acquire metadata of the target area in the target page for generating the visualization module. The visualization module is used to be embedded in the application platform 200 and to display the content of the target page in the application platform 200. The metadata includes at least one of size information, address information or location information. The size information includes at least one of viewport size or viewport scaling information. The address information includes the source URL of the target page. The location information includes the position of the target area on the target page.

[0162] The visualization management device 100 is also used to receive the module identifier of the visualization module configured by the user; and to send the module information of the visualization module to the application platform 200. The module information includes the module identifier and metadata, and the module information is used to instruct the application platform 200 to render the visualization module.

[0163] For example, the aforementioned visual management device 100 and application platform 200 can be implemented in hardware or in software.

[0164] When implemented through software, the visual management device 100 and application platform 200 can be applications running on computing devices. For example, the visual management device 100 can be a browser plugin, and the application platform 200 can be a web application or web service running in a browser. These applications (such as the application platform) can also be virtualized and provided to users as virtualization services. Virtualization services can include virtual machine (VM) services, bare metal server (BMS) services, or container services. Specifically, a VM service can be a service that uses virtualization technology to create a virtual machine (VM) resource pool on multiple physical hosts to provide VMs for users to use on demand. A BMS service is a service that uses virtualization technology to create a BMS resource pool on multiple physical hosts to provide BMS for users to use on demand. A container service is a service that uses virtualization technology to create a container resource pool on multiple physical hosts to provide containers for users to use on demand. A VM is a simulated virtual computer, that is, a logical computer. A BMS is a scalable, high-performance computing service with computing performance indistinguishable from traditional physical machines and features secure physical isolation. Containers are a kernel virtualization technology that provides lightweight virtualization to isolate user space, processes, and resources. It should be understood that the VM service, BMS service, and container service mentioned above are merely specific examples. In practical applications, virtualization services can also include other lightweight or heavyweight virtualization services, which are not specifically limited here.

[0165] When implemented in hardware, the visualization management device 100 and application platform 200 may include at least one computing device, such as a server. Alternatively, the visualization management device 100 and application platform 200 may also be devices implemented using application-specific integrated circuits (ASICs) or programmable logic devices (PLDs). The aforementioned PLD may be implemented using complex programmable logical devices (CPLDs), field-programmable gate arrays (FPGAs), generic array logic (GALs), or any combination thereof.

[0166] In some possible implementations, the visual management device 100 is specifically used for:

[0167] In response to a user's screenshot operation triggered on the target page, screenshot information is obtained. The screenshot operation is used to capture a target area on the target page, and the screenshot information includes the metadata.

[0168] In some possible implementations, the visual management device 100 is specifically used for:

[0169] The target area used to generate the visualization module on the target page is identified through an AI model, and the metadata of the target area is obtained; or...

[0170] In response to a voice command, determine the target area on the target page used to generate the visualization module, and obtain the metadata of the target area; or...

[0171] Receive natural language descriptions input by the user, determine the target area on the target page used to generate the visualization module based on the natural language descriptions, and obtain the metadata of the target area.

[0172] In some possible implementations, the visual management device 100 is specifically used for:

[0173] Based on the user's browsing history or preference information, an AI model is used to identify at least one candidate area on the target page for generating a visualization module.

[0174] Recommend at least one candidate region to the user;

[0175] Receive the target region determined by the user from the at least one candidate region.

[0176] In some possible implementations, application platform 200 is used for:

[0177] Based on the module information of the visualization module, the visualization module is rendered on the application platform interface through an inline framework.

[0178] In some possible implementations, application platform 200 is used for:

[0179] Reconstructing metadata into structured data;

[0180] Based on structured data, the visualization module is rendered on the platform's interface according to a custom style.

[0181] In some possible implementations, application platform 200 is also used for:

[0182] Display module information for at least one visualization module in the visualization module library;

[0183] Application platform 200 is specifically used for:

[0184] In response to a user's drag-and-drop operation on a target module in at least one visualization module, the target module is rendered on the application platform's interface.

[0185] In some possible implementations, the visual management device 100 is also used for:

[0186] Iterate through the page elements of the target page and record the attributes of the scrollable elements within the page elements;

[0187] Application platform 200 is specifically used for:

[0188] Based on the attributes of the scrolling element, the interface rendering visualization module of application platform 200 is used.

[0189] In some possible implementations, the visual management device 100 is specifically used for:

[0190] Using the browser as a communication intermediary, module information of the visualization module is sent to the application platform.

[0191] In some possible implementations, the visualization module includes cards, and the visualization management device 100 is specifically used for:

[0192] The card information is sent to the application platform via script injection.

[0193] This application also provides a visual management device 100, which will be described below from the perspective of functional modularity.

[0194] Referring to Figure 6, a schematic diagram of a visualization management device 100 is shown. The visualization management device 100 includes:

[0195] The acquisition module 602 is used to acquire metadata of the target area in the target page for generating the visualization module. The visualization module is used to be embedded in the application platform and to display the content of the target page on the application platform. The metadata includes at least one of size information, address information or location information. The size information includes at least one of viewport size or viewport scaling information. The address information includes the source URL of the target page. The location information includes the position of the target area on the target page.

[0196] The acquisition module 602 is also used to receive the module identifier of the visualization module configured by the user;

[0197] The communication module 604 is used to send module information of the visualization module to the application platform. The module information includes the module identifier and the metadata. The module information is used to instruct the application platform to render the visualization module.

[0198] For example, the acquisition module 602 and the communication module 604 described above can be implemented in hardware or in software.

[0199] When implemented in software, the acquisition module 602 and communication module 604 can be applications running on a computing device. For example, the acquisition module 602 can be a script, and the communication module 604 can be a component that implements communication functionality. The acquisition module 602 can be implemented using a card-capturing script as shown in Figure 5. In other possible implementations of this application, the acquisition module 602 can also be implemented in other ways, such as based on an AI model. The specific implementation of the communication module 604 can be found in the description of the relevant content in Figure 5, and will not be repeated here.

[0200] When implemented in hardware, the acquisition module 602 and communication module 604 may include at least one computing device, such as a server. Alternatively, the acquisition module 602 and communication module 604 may also be devices implemented using application-specific integrated circuits (ASICs) or power distribution units (PLDs).

[0201] In some possible implementations, module 602 is used for:

[0202] In response to a user's screenshot operation triggered on a target page, screenshot information is obtained. The screenshot operation is used to capture a target area on the target page, and the screenshot information includes the metadata.

[0203] In some possible implementations, module 602 is used for:

[0204] The target area used to generate the visualization module on the target page is identified through an AI model, and the metadata of the target area is obtained; or...

[0205] In response to a voice command, determine the target area on the target page used to generate the visualization module, and obtain the metadata of the target area; or...

[0206] Receive natural language descriptions input by the user, determine the target area on the target page used to generate the visualization module based on the natural language descriptions, and obtain the metadata of the target area.

[0207] In some possible implementations, module 602 is specifically used for:

[0208] Based on the user's browsing history or preference information, an AI model is used to identify at least one candidate area on the target page for generating a visualization module.

[0209] Recommend at least one candidate region to the user;

[0210] Receive the target region determined by the user from at least one candidate region.

[0211] In some possible implementations, the acquisition module is also used for:

[0212] The page elements of the target page are traversed, and the attributes of the scrolling elements are recorded so that the application platform can render the visualization module in the application platform interface based on the attributes of the scrolling elements.

[0213] In a specific implementation, the visualization management device 100 also includes a rendering adaptation module 606. The rendering adaptation module 606 determines the rendering parameters for scroll adaptation based on the attributes of the scrolling element. Then, the communication module 604 can send the scroll adaptation rendering parameters to the application platform 200 via script injection. The application platform 200 can then perform scroll adaptation based on the scroll adaptation rendering parameters.

[0214] In some possible implementations, the communication module 604 is specifically used for:

[0215] Using the browser as a communication intermediary, module information of the visualization module is sent to the application platform 200.

[0216] In some possible implementations, the visualization module includes cards, and the communication module 604 is specifically used for:

[0217] The card information is sent to the application platform 200 via script injection.

[0218] This application also provides a computing device 700. As shown in FIG7, the computing device 700 includes: a bus 702, a processor 704, a display 705, a memory 706, and a communication interface 708. The processor 704, the memory 706, and the communication interface 708 communicate with each other via the bus 702. The computing device 700 can be a terminal device, such as a large-screen device (e.g., a smart screen), a desktop computer, a laptop computer, a tablet computer, or a smartphone. It should be understood that this application does not limit the number of processors and memories in the computing device 700.

[0219] Bus 702 can be a Peripheral Component Interconnect (PCI) bus or an Extended Industry Standard Architecture (EISA) bus, etc. Buses can be categorized as address buses, data buses, control buses, etc. For ease of illustration, only one line is used in Figure 7, but this does not imply that there is only one bus or one type of bus. Bus 702 can include pathways for transmitting information between various components of computing device 700 (e.g., memory 706, processor 704, communication interface 708).

[0220] Processor 704 may include any one or more processors such as a central processing unit (CPU), a graphics processing unit (GPU), a microprocessor (MP), or a digital signal processor (DSP).

[0221] The display 705 may be a device with display function, including but not limited to a liquid crystal display (LCD), a light-emitting diode (LED) display, and an organic light-emitting diode (OLED) display.

[0222] The memory 706 may include volatile memory, such as random access memory (RAM). The memory 706 may also include non-volatile memory, such as read-only memory (ROM), flash memory, hard disk drive (HDD), or solid-state drive (SSD). The memory 706 stores executable program code, which the processor 704 executes to implement the aforementioned management method for the visualization module. Specifically, the memory 706 stores instructions from the visualization management system 10 or the visualization management device 100 for executing the management method for the visualization module.

[0223] The communication interface 708 uses transceiver modules, such as, but not limited to, network interface cards and transceivers, to enable communication between the computing device 700 and other devices or communication networks.

[0224] This application also provides a computing device cluster. The computing device cluster includes at least one computing device. In some embodiments, the computing device may be a terminal device such as a smart screen, desktop computer, laptop computer, or smartphone.

[0225] As shown in Figure 8, the computing device cluster includes at least one computing device 700. The memory 706 of one or more computing devices 700 in the computing device cluster may store instructions from the same visualization management system 10 or visualization management device 100 for executing management methods of the visualization module.

[0226] In some possible implementations, one or more computing devices 700 in the computing device cluster can also be used to execute some of the instructions of the visualization management system 10 for executing the management methods of the visualization modules. In other words, a combination of one or more computing devices 700 can jointly execute the instructions of the visualization management system 10 for executing the management methods of the visualization modules.

[0227] It should be noted that the memory 706 in different computing devices 700 within the computing device cluster can store different instructions for executing some functions of the visualization management system 10. For example, a laptop can store instructions from the visualization management device 100, and the smart screen can store instructions from the application platform. A user runs a browser on a laptop, launches the visualization management device 100 within the browser, and triggers a screenshot operation on a target area of ​​the browser's target page. In response to the screenshot operation, the visualization management device 100 acquires screenshot information, including metadata about the target area. The visualization management device 100 can also receive a module identifier configured by the user and then send the module information, including metadata and the module identifier, to the application platform 200. The smart screen runs the application platform 200, which renders the visualization module based on the module information, thereby displaying the content of the target area on the target page on the smart screen.

[0228] Figure 9 illustrates one possible implementation. As shown in Figure 9, two computing devices 700A and 700B are connected via a communication interface 708. The memory in computing device 700A stores instructions for executing the functions of the visualization management device 100. The memory in computing device 700B stores instructions for executing the functions of the application platform 200. In other words, the memory 706 of computing devices 700A and 700B jointly stores instructions used by the visualization management system 10 to execute the management methods of the visualization module.

[0229] The connection method between the computing device clusters shown in Figure 9 can be considered in light of the need for cross-device synchronization in the management method of the visualization module provided in this application. Therefore, it is considered that the functions implemented by the visualization management device 100 are executed by independent computing devices, such as computing device 700A, and the functions implemented by the application platform 200 are executed by computing device 700B.

[0230] It should be understood that the functions of computing device 700A shown in Figure 9 can also be performed by multiple computing devices 700. Similarly, the functions of computing device 700B can also be performed by multiple computing devices 700.

[0231] In some possible implementations, one or more computing devices in a computing device cluster can be connected via a network. This network can be a wide area network (WAN) or a local area network (LAN), etc. Figure 10 illustrates one possible implementation. As shown in Figure 10, two computing devices 700C and 700D are connected via a network. Specifically, they are connected to the network through communication interfaces in each computing device. In this type of possible implementation, the memory 706 in computing device 700C stores instructions for performing the functions of the visualization management device 100. Simultaneously, the memory 706 in computing device 700D stores instructions for performing the functions of the application platform 200.

[0232] The connection method between the computing device clusters shown in Figure 10 can be based on the fact that the management method of the visualization module provided in this application needs to be synchronized across devices. Therefore, the functions implemented by the visualization management device 100 are executed by independent computing devices, such as computing device 700C, and the functions implemented by the application platform 200 are executed by computing device 700D.

[0233] It should be understood that the functions of the computing device 700C shown in Figure 10 can also be performed by multiple computing devices 700. Similarly, the functions of the computing device 700D can also be performed by multiple computing devices 700.

[0234] This application embodiment also provides a computer-readable storage medium. The computer-readable storage medium can be any available medium that a computing device can store, or a data storage device such as a data center containing one or more available media. The available medium can be a magnetic medium (e.g., floppy disk, hard disk, magnetic tape), an optical medium (e.g., DVD), or a semiconductor medium (e.g., solid-state drive). The computer-readable storage medium includes instructions that instruct the computing device to execute the management method described above for executing the visualization module in the visualization management system 10 or the visualization management device 100.

[0235] This application also provides a computer program product containing instructions. The computer program product may be a software or program product containing instructions, capable of running on a computing device or stored on any usable medium. When the computer program product runs on at least one computing device, it causes the at least one computing device to execute the management method of the visualization module described above.

[0236] Finally, it should be noted that the above embodiments are only used to illustrate the technical solutions of the present invention, and not to limit them; although the present invention has been described in detail with reference to the foregoing embodiments, those skilled in the art should understand that modifications can still be made to the technical solutions described in the foregoing embodiments, or equivalent substitutions can be made to some of the technical features; and these modifications or substitutions do not cause the essence of the corresponding technical solutions to deviate from the protection scope of the technical solutions of the embodiments of the present invention.

Claims

1. A method for managing a visual module, characterized in that, Applied to a visual management system, the visual management system including a visual management device and an application platform, the method includes: The visualization management device acquires metadata about the target area in the target page used to generate the visualization module. The visualization module is embedded into the application platform and displays the content of the target page on the application platform. The metadata includes at least one of size information, address information, or location information. The size information includes at least one of viewport size or viewport scaling information. The address information includes the source URL of the target page. The location information includes the position of the target area on the target page. The visualization management device receives the module identifier of the visualization module configured by the user; The visualization management device sends the module information of the visualization module to the application platform. The module information includes the module identifier and the metadata. The module information is used to instruct the application platform to render the visualization module.

2. The method according to claim 1, characterized in that, The visualization management device acquires metadata about the target area on the target page used to generate the visualization module, including: In response to a user's screenshot operation triggered on a target page, the visualization management device acquires screenshot information. The screenshot operation is used to capture a target area on the target page, and the screenshot information includes the metadata.

3. The method according to claim 1, characterized in that, The visualization management device acquires metadata about the target area on the target page used to generate the visualization module, including: The visualization management device identifies the target area in the target page used to generate the visualization module through an artificial intelligence (AI) model, and obtains the metadata of the target area; or... The visualization management device responds to voice commands, determines the target area on the target page used to generate the visualization module, and obtains the metadata of the target area; or... The visualization management device receives a natural language description input by the user, determines the target area in the target page for generating the visualization module based on the natural language description, and obtains the metadata of the target area.

4. The method according to claim 3, characterized in that, The visualization management device identifies the target area in the target page used to generate the visualization module through an artificial intelligence (AI) model, including: The visualization management device identifies at least one candidate region in the target page for generating visualization modules based on the user's browsing history or preference information using an artificial intelligence (AI) model. The visualization management device recommends at least one candidate region to the user; The visualization management device receives the target area determined by the user from the at least one candidate area.

5. The method according to any one of claims 1 to 4, characterized in that, The method further includes: The application platform renders the visualization module on its interface using an inline frame, based on the module information of the visualization module.

6. The method according to any one of claims 1 to 4, characterized in that, The method further includes: The application platform reconstructs the metadata into structured data; The application platform renders the visualization module on the platform interface according to the structured data and a custom style.

7. The method according to claim 5 or 6, characterized in that, The method further includes: The application platform displays module information for at least one visualization module in the visualization module library; The application platform renders the visualization module, including: The application platform responds to the user's drag-and-drop operation on the target module in the at least one visualization module by rendering the target module on the interface of the application platform.

8. The method according to any one of claims 5 to 7, characterized in that, The method further includes: The visualization management device traverses the page elements of the target page and records the attributes of the scrolling elements among the page elements; The application platform renders the visualization module, including: The application platform renders the visualization module on its interface based on the attributes of the scrolling element.

9. The method according to any one of claims 1 to 8, characterized in that, The visualization management device sends the module information of the visualization module to the application platform, including: The visualization management device uses a browser as a communication intermediary to send the module information of the visualization module to the application platform.

10. The method according to any one of claims 1 to 9, characterized in that, The visualization module includes cards, and the visualization management device sends module information of the visualization module to the application platform, including: The visual management device sends the card information of the card to the application platform via script injection.

11. A visual management system, characterized in that, The visualization management system includes a visualization management device and an application platform; The visualization management device is used to obtain metadata of the target area in the target page for generating the visualization module. The visualization module is used to be embedded in the application platform and to display the content of the target page on the application platform. The metadata includes at least one of size information, address information or location information. The size information includes at least one of viewport size or viewport scaling information. The address information includes the source URL of the target page. The location information includes the position of the target area on the target page. The visualization management device is further configured to receive the module identifier of the visualization module configured by the user; and to send the module information of the visualization module to the application platform. The module information includes the module identifier and the metadata, and the module information is used to instruct the application platform to render the visualization module.

12. The system according to claim 11, characterized in that, The visual management device is specifically used for: In response to a user's screenshot operation triggered on a target page, screenshot information is obtained. The screenshot operation is used to take a screenshot of a target area on the target page, and the screenshot information includes the metadata.

13. The system according to claim 11, characterized in that, The visual management device is specifically used for: The target area for generating the visualization module on the target page is identified using an artificial intelligence (AI) model, and the metadata of the target area is obtained; or... In response to a voice command, determine the target area in the target page used to generate the visualization module, and obtain the metadata of the target area; or, Receive a natural language description input by the user, determine the target area in the target page for generating the visualization module based on the natural language description, and obtain the metadata of the target area.

14. The system according to claim 13, characterized in that, The visual management device is specifically used for: Based on the user's browsing history or preference information, an artificial intelligence (AI) model is used to identify at least one candidate region in the target page for generating a visualization module. Recommend at least one candidate region to the user; Receive the target region determined by the user from the at least one candidate region.

15. The system according to any one of claims 11 to 14, characterized in that, The application platform is used for: Based on the module information of the visualization module, the visualization module is rendered on the interface of the application platform through an inline frame.

16. The system according to any one of claims 11 to 14, characterized in that, The application platform is used for: The metadata is reconstructed into structured data; Based on the structured data, the visualization module is rendered on the platform's interface according to a custom style.

17. The system according to claim 15 or 16, characterized in that, The application platform is also used for: Display module information for at least one visualization module in the visualization module library; The application platform is specifically used for: In response to the user's drag-and-drop operation on the target module in the at least one visualization module, the target module is rendered on the interface of the application platform.

18. The system according to any one of claims 15 to 17, characterized in that, The visual management device is also used for: Iterate through the page elements of the target page and record the attributes of the scrolling elements within the page elements; The application platform is specifically used for: The visualization module is rendered on the interface of the application platform according to the attributes of the scrolling element.

19. The system according to any one of claims 11 to 18, characterized in that, The visual management device is specifically used for: Using a browser as a communication intermediary, the module information of the visualization module is sent to the application platform.

20. The system according to any one of claims 11 to 19, characterized in that, The visualization module includes cards, and the visualization management device is specifically used for: The card information is sent to the application platform via script injection.

21. A visual management device, characterized in that, The device includes: The acquisition module is used to acquire metadata of the target area in the target page for generating the visualization module. The visualization module is used to be embedded in the application platform and to display the content of the target page on the application platform. The metadata includes at least one of size information, address information or location information. The size information includes at least one of viewport size or viewport scaling information. The address information includes the source URL of the target page. The location information includes the position of the target area on the target page. The acquisition module is also used to receive the module identifier of the visualization module configured by the user; A communication module is used to send module information of the visualization module to the application platform. The module information includes the module identifier and the metadata. The module information is used to instruct the application platform to render the visualization module.

22. The apparatus according to claim 21, characterized in that, The acquisition module is used for: In response to a user's screenshot operation triggered on a target page, screenshot information is obtained. The screenshot operation is used to take a screenshot of a target area on the target page, and the screenshot information includes the metadata.

23. A computing device cluster, characterized in that, The computing device cluster includes at least one computing device, the at least one computing device including at least one processor and at least one memory, the at least one memory storing computer-readable instructions; the at least one processor executes the computer-readable instructions to cause the computing device cluster to perform the management method of the visualization module as described in any one of claims 1 to 10.

24. A computer-readable storage medium, characterized in that, Includes computer-readable instructions; the computer-readable instructions are used to implement the management method of the visualization module according to any one of claims 1 to 10.

25. A computer program product, characterized in that, Includes computer-readable instructions; the computer-readable instructions are used to implement the management method of the visualization module according to any one of claims 1 to 10.

Images