An interaction method, system and device for UI card generation

Abstract

The application relates to the fields of artificial intelligence and data processing, and in particular to a UI card generation interaction method, system and device. The method comprises the following steps: obtaining a card generation prompt word input by a user, a selected target design style and a target generation form; based on style parameters contained in the target design style, the card generation prompt word is analyzed, UI card data conforming to the target generation form is generated, and the UI card data comprises at least one UI card; if the target generation form is a card set form, multiple sub-cards contained in the UI card data are displayed in an aggregated state based on a preset stacking rule, the aggregated form refers to that based on a preset stacking order, the multiple independent sub-cards are displayed in a layered manner at a preset layering interval; in response to an expansion instruction for the aggregated state, the multiple sub-cards are switched from the aggregated state to a tiled display state by performing a translation and rotation animation, and any sub-card in the tiled display state is provided with an independent interaction operation.

Description

TECHNICAL FIELD

[0001] The present application relates to the field of artificial intelligence technology, and provides an interaction method, system and device for UI card generation. BACKGROUND

[0002] With the in-depth application of artificial intelligence technology in the field of UI design, users can quickly generate UI design schemes containing page layout, component style, etc. by inputting natural language prompt words. This technology greatly improves the efficiency of design output, making it possible to generate multiple UI cards in batches.

[0003] However, the existing data display technology usually adopts full-tile instant rendering logic (for example, directly loading all generated sub-cards into the interface at the same time in the form of a list or a grid) when processing such batch-generated discrete data objects. This processing method has a significant technical problem: in a limited terminal screen viewport, full-tile will instantly occupy a large amount of display coordinate resources. Due to the lack of dynamic management mechanism for the display state of data sets, the system must allocate independent non-overlapping display areas for each sub-object, which leads to the rapid depletion of effective screen display space, making it impossible to balance the overall presentation of multi-object data and the intensive use of screen display resources in the same screen, thereby limiting the ability of the interface to carry other key interactive elements. SUMMARY

[0004] The present application provides an interaction method, system and device for UI card generation, mainly used to solve the technical problem that the traditional UI card generation scheme cannot balance the overall presentation of multi-object data and the intensive use of screen display resources, thereby limiting the ability of the interface to carry other key interactive elements.

[0005] An interaction method for UI card generation, the method comprising:

[0006] obtaining a card generation prompt word input by a user, a selected target design style, and a target generation form; wherein the target generation form includes a single card form, a card set form, or a card combination form, the card set form is a collection form of multiple independent sub-cards generated based on multi-dimensional information in the card generation prompt word, and the card combination form is an integrated form of multiple functionally complementary sub-cards generated based on logical association in the card generation prompt word;

[0007] analyzing the card generation prompt word based on style parameters contained in the target design style to generate UI card data conforming to the target generation form, the UI card data including at least one UI card;

[0008] If the target generation form is a card set form, a plurality of sub-cards contained in the UI card data are displayed in an aggregated state based on a preset stacking rule. The aggregated form refers to displaying a plurality of independent sub-cards in a hierarchical manner according to a preset layering interval based on a preset stacking order.

[0009] In response to an expansion instruction for the aggregated state, the plurality of sub-cards are switched from the aggregated state to a tiled display state by performing a translation rotation animation, and any sub-card in the tiled display state is provided with independent interactive operation.

[0010] An interactive system for UI card generation includes:

[0011] A configuration module is configured to obtain a card generation prompt word input by a user, a selected target design style, and a target generation form. The target generation form includes a single card form, a card set form, or a card combination form. The card set form is a collection form of a plurality of independent sub-cards generated based on multi-dimensional information in the card generation prompt word. The card combination form is an integrated form of a plurality of functionally complementary sub-cards generated based on logical association in the card generation prompt word.

[0012] A generation module is configured to analyze the card generation prompt word based on style parameters contained in the target design style, generate UI card data conforming to the target generation form, and the UI card data includes at least one UI card.

[0013] An exhibition interaction module is configured to display a plurality of sub-cards contained in the UI card data in an aggregated state based on a preset stacking rule if the target generation form is a card set form. The aggregated form refers to displaying a plurality of independent sub-cards in a hierarchical manner according to a preset layering interval based on a preset stacking order. In response to an expansion instruction for the aggregated state, the plurality of sub-cards are switched from the aggregated state to a tiled display state by performing a translation rotation animation, and any sub-card in the tiled display state is provided with independent interactive operation.

[0014] A computer device includes a memory, a processor, and a computer program stored in the memory and executable on the processor. When the processor executes the computer program, the steps of the interactive method for generating the UI card are implemented.

[0015] In one of the schemes provided in the application, the UI data containing multiple sub-cards is rendered in an aggregated state by using preset stacking rules in the initial display stage, so that the multiple data objects are displayed in the Z-axis direction and only occupy a small amount of display coordinate resources on the screen plane, thereby effectively solving the technical problem that the screen display space is exhausted instantaneously due to full-amount tiled rendering, and realizing efficient and intensive utilization of screen space resources; further, by responding to the expansion instruction to perform a translation and rotation animation from the aggregated state to the tiled state, and providing independent interaction capability in the tiled state, the application establishes a dynamic allocation mechanism for screen display resources, that is, the stacking technology is used in the aggregation stage to minimize space occupation, and the animation is used in the expansion stage to smoothly transition to the detail view occupying more space, thereby realizing flexible bearing and efficient management of batch-generated data in a single terminal viewport. BRIEF DESCRIPTION OF DRAWINGS

[0016] In order to more clearly illustrate the technical solutions of the embodiments of the application, the following will briefly introduce the drawings needed to be used in the description of the embodiments of the application. Obviously, the drawings in the following description are only some embodiments of the application, and other drawings can be obtained by those skilled in the art without creative labor.

[0017] Figure 1 is a flowchart of an interaction method for generating a UI card in an embodiment of the application;

[0018] Figure 2 is a structural diagram of an interaction system for generating a UI card in an embodiment of the application;

[0019] Figure 3 is an application interface diagram of an interaction method for generating a UI card in an embodiment of the application;

[0020] Figure 4 is Figure 3 an interface diagram of a left card display area in the application;

[0021] Figure 5 is Figure 3 an interface diagram of a right dialogue area in the application. DETAILED DESCRIPTION

[0022] The technical solutions in the embodiments of the application will be described clearly and completely below with reference to the drawings in the embodiments of the application. Obviously, the described embodiments are only some embodiments of the application, not all embodiments. Based on the embodiments in the application, all other embodiments obtained by those skilled in the art without creative labor are within the scope of protection of the application.

[0023] It should be understood that the size of the serial number of each step in the following embodiments does not mean the order of execution, and the execution order of each process should be determined according to its function and internal logic, and should not constitute any limitation on the implementation process of the embodiments of the application.

[0024] In an embodiment, the application provides an interactive method for generating a UI card, please refer to Figure 1 , comprising the following steps:

[0025] S10: Obtain the card generation prompt word input by the user, the selected target design style, and the target generation form; wherein the target generation form includes a single card form, a card set form, or a card combination form, the card set form is a collection form of multiple independent sub-cards generated based on multi-dimensional information in the card generation prompt word, and the card combination form is an integrated form of multiple functionally complementary sub-cards generated based on logical association in the card generation prompt word.

[0026] In this step, the system first provides an interactive configuration interface to receive the user's instructions. The card generation prompt word input by the user is a natural language text containing content theme, key data, or functional requirements. The system also provides a preset style library for the user to select, or receives user-defined style parameters as the target design style, which determines the color system, font specification, border style, and decorative elements, etc. visual performance. The user also needs to select the target generation form according to the actual demand, and the system provides three options suitable for different scenarios: the single card form is suitable for the display of single information such as independent data card or content summary card; the card set form is suitable for the integration of multi-dimensional information, for example, when the prompt word contains a set of product introduction, the system will split and generate multiple independent sub-cards from the multi-dimensional information; the card combination form is suitable for components with logical association, such as navigation bar combined with content display area and bottom function area, and the system will generate multiple functionally complementary sub-cards and form an integrated form according to the layout rules.

[0027] S20: Based on the style parameters contained in the target design style, analyze the card generation prompt word, and generate UI card data conforming to the target generation form, the UI card data including at least one UI card.

[0028] In this step, the system analyzes the core information in the prompt word through natural language processing technology (NLP), and maps and associates it with the selected style parameter. The system generates UI card data conforming to the target generation form based on AI generation algorithm. These data not only contain visual images, but also contain structured metadata. It is worth noting that all generated cards strictly follow uniform style parameters in visual specifications, thereby ensuring the consistency of the overall design system, so that the generated cards are visually coordinated and unified.

[0029] S30: If the target generation form is a card set form, multiple sub-cards contained in the UI card data are displayed in an aggregated state based on a preset stacking rule. The aggregated form refers to displaying multiple independent sub-cards in a layered manner according to a preset layering interval based on a preset stacking order.

[0030] In this step, for the card set form scenario of generating multiple cards, the system defaults to display in an aggregated state to avoid visual clutter caused by instant tiling. The system determines the stacking order according to the preset rules (such as generation time or information priority), and calculates the position of each sub-card using the preset layering interval. Through this layered display method, multiple independent sub-cards are visually organized into a compact whole, rather than being scattered on the interface, effectively managing the screen space in the initial display stage.

[0031] S40: In response to an expansion instruction for the aggregated state, multiple sub-cards are switched from the aggregated state to the tiled display state by performing a translation and rotation animation, and any sub-card in the tiled display state is provided with independent interactive operations.

[0032] In this step, the system monitors the user's interactive instructions, such as clicking the expansion button. After triggering the instruction, the system starts a translation and rotation animation, and each sub-card starts from the stacking position and simultaneously performs position movement (translation) and angle adjustment (rotation) to dynamically switch to the tiled display state. In the tiled state, the cards are arranged in an easy-to-browse manner (such as waterfall flow). The waterfall layout refers to tightly splicing multiple columns of cards of different lengths according to the rule of filling the lowest height first, thereby forming an efficient display layout with a staggered and no extra gap (see the display effect in FIG. 8). Figures 3-4 The system supports independent interactive operations on any single sub-card, such as selecting a card for specific editing, viewing, or processing, without the need for overall operation on the entire card set.

[0033] It can be seen that in the embodiment, if the target generation form is the card set form, the UI data containing multiple sub-cards is rendered in an aggregated state by using the preset stacking rule in the initial display stage, so that the multiple data objects are displayed in the Z-axis direction and only occupy a small amount of display coordinate resources on the screen plane, thereby effectively solving the technical problem that the screen display space is instantly exhausted due to full-amount tiling rendering, and realizing efficient and intensive use of screen space resources. Further, by responding to the expansion instruction, a translation and rotation animation is performed to switch from the aggregated state to the tiling state, and independent interaction capability is provided in the tiling state, and the application establishes a dynamic allocation mechanism for screen display resources, that is, the stacking technology is used in the aggregation stage to minimize space occupation, and the animation is used to smoothly transition to the detail view occupying more space in the expansion stage, thereby realizing flexible bearing and efficient management of batch generated data in a single terminal viewport.

[0034] From another aspect, for the card set form, the application uses a layered stacking manner to display multiple sub-cards in an aggregated state, realizing compact presentation of the card set in limited interface space, effectively avoiding visual clutter caused by directly tiling a large number of AI batch generated results, and ensuring the aesthetic degree of visual presentation. When the user touches the expansion instruction, the card is switched from the aggregated state to the tiling state by performing a translation and rotation animation. This natural animation transition not only enhances the interest of the interaction, but also guides the user's eyes to browse in an orderly manner, helping the user quickly perceive the logical change from the whole set to the expanded details. Finally, by providing independent interaction operations on any sub-card in the tiling state, flexible switching between overall browsing and precise focusing is realized, so that the user can quickly browse all card contents and also independently view or process a single card after tiling, effectively balancing the core needs of batch management and precise operation, and overall improving the intelligence of card intelligent generation.

[0035] Furthermore, by providing three flexible generation form options of single card, card set and card combination, the lightweight needs of single information display and the complex scene needs of multi-dimensional information integration can be accurately adapted, greatly improving the application range of the AI card generation function, and reducing the use threshold without additional secondary integration or splitting.

[0036] In an embodiment, UI card data conforming to the target generation form is generated, specifically including the following steps:

[0037] S210: If the target generation form is a single card form, an independent single card is generated according to the card generation prompt word to focus on single information display.

[0038] In this step, when the user selects a single card form or the system recognizes that the prompt word is a lightweight card generation requirement such as generating an activity promotion card or a data summary card, the system will execute the single card generation logic. The system does not perform dimension splitting or complex combination layout, but focuses on the optimization of single information level. Specifically, the system uses natural language processing technology to analyze the core elements in the prompt word, layouts the core elements in a single visual container, and highlights the core content by adjusting font size, color contrast and other visual weights. This processing method ensures that the generated card structure is independent, focused and suitable for carrying single-dimensional information display, meeting the user's demand for lightweight and focused display.

[0039] S220: If the target generation form is a card set form, split the multi-dimensional information in the card generation prompt word, and generate multiple sub-cards with consistent style and sequential number or classification label.

[0040] In this step, when the system recognizes that the prompt word contains multiple-dimensional information in parallel, for example, generating a set of product introduction cards, organizing 10 knowledge point cards or series of holiday greeting cards, the system will automatically perform information dimension splitting operation using NLP (Natural Language Processing) engine. The system generates corresponding sub-cards according to each independent information point (such as each specific knowledge point or each product). In order to ensure the visual unity of the card set, the system forces all sub-cards to strictly maintain consistency in color system, font specification, border style and other visual parameters. At the same time, in order to solve the problem of distinguishing and managing homogeneous content, the system will automatically mark the sequential number (such as 01, 02...) on the edge of the generated sub-cards or add classification icon labels according to the content. Through this mechanism, the system converts the originally chaotic multi-dimensional information into a set of card collection data that is both visually unified and logically ordered.

[0041] S230: If the target generation form is a card combination form, generate multiple functionally complementary sub-cards based on the logical association in the card generation prompt word, and form an integrated combination card according to the preset layout rule.

[0042] In this step, for complex requirements with structural dependency or logical association, for example, generating a combination of homepage top navigation card + content display card + bottom function card, the system first analyzes the logical association and functional complementarity between components, and instead of generating isolated cards, the system generates sub-cards that complement each other in function (such as navigation card, content card, function card), and seamlessly connects these sub-cards according to the preset layout rule (such as vertical stacking or horizontal splicing). In this way, the system encapsulates multiple sub-cards into a highly coordinated integrated object in terms of vision and logic, ensuring that the components are stylistically coordinated and have no layout conflicts.

[0043] It can be seen that, in the embodiment, by defining three differentiated generation strategies, intelligent adaptation from user intent to UI data structure is achieved, and the problem of single generation result structure and high manual processing cost in the prior art is solved. Specifically, for the card set form, by automatically splitting the multi-dimensional information in the prompt word and unifying the style and annotation, the present application directly replaces the cumbersome operation of manually disassembling and typesetting complex content by the user, and realizes the automatic conversion from chaotic information to an ordered set. For the card combination form, by generating complementary components based on logical association and integrating them according to rules, the present application eliminates the style conflicts or layout disorder problems that may occur when the user manually assembles different components, ensuring the rationality and professionalism of the generation result in the logical structure. In summary, this intelligent form adaptation mechanism automatically constructs the optimal data bearing structure according to the complexity of the business scenario, significantly reducing the manual cost of the data production link.

[0044] In an embodiment, the plurality of sub-cards contained in the UI card data are displayed in an aggregated state based on preset stacking rules, specifically including the following steps:

[0045] S310: Determine the stacking order according to the generation time sequence of the plurality of sub-cards or the information priority in the card generation prompt word.

[0046] In this step, the system first determines the arrangement order of the plurality of sub-cards in the Z-axis direction according to the preset logical strategy. The system supports arranging according to the generation time sequence, for example, placing the latest generated card on the top layer and the earlier generated card on the bottom layer to meet the user's habit of paying attention to the latest content; or the system uses natural language processing technology to analyze the weight of information in the prompt word (for example, identifying that the core selling point is superior to the detailed parameters), and places the sub-card with high weight on the top layer according to the information priority to ensure that the core information is captured by the user's vision first. After the stacking order is determined, the system can also display the serial number in real time on the edge of the card (such as the upper right corner) to intuitively prompt the user's current browsing position.

[0047] S320: Based on the stacking order, configure the layer spacing for each sub-card, and set the transparency parameters of each level of sub-card according to the rule that the transparency decreases from the bottom layer to the top layer.

[0048] In this step, in order to construct the three-dimensional spatial depth on the two-dimensional screen, the system performs fine-grained parameter configuration on cards of different levels. The system sets a fixed layer spacing for cards of adjacent levels on the screen plane, and the preferred spacing range is 5px to 10px, so that the cards have a natural staggered feeling in position. At the same time, the system performs a visual rule of decreasing transparency, that is, from the bottom background layer to the top foreground layer, the transparency of the card gradually decreases (or the opacity gradually increases), thereby strengthening the near-real and far-virtual depth-of-field effect. This processing ensures that the top card is the clearest as the visual focus, and the bottom card is prompted by the edge to exist as a collection.

[0049] S330: Adding a gradient shadow effect to the edge of each sub-card.

[0050] In this step, the system uses an image rendering algorithm to generate a gradient shadow that spreads outward on the edge of each sub-card. The intensity and diffusion radius of the shadow can be dynamically adjusted according to the level of the card, thereby simulating the natural occlusion and light projection when objects are stacked in the real physical world, further enhancing the separation and physical texture between cards.

[0051] In this embodiment, the above-mentioned fine-grained stacking rule configuration solves the technical problem of how to efficiently and aesthetically display multiple cards in a limited interface space. Specifically, by determining the stacking order according to time or priority, it is ensured that the most important information always occupies the focal position of the user's line of sight in the aggregated state, improving information acquisition efficiency. By configuring the layer spacing and decreasing transparency rule, combined with the gradient shadow effect on the edge, a stacking model with physical thickness and depth of field is successfully constructed on a two-dimensional screen. This physical metaphor visual design not only greatly saves interface display space while avoiding visual clutter, but also guides users to perceive that it is an expandable collection through intuitive physical metaphors, providing clear visual cues for subsequent interactive operations.

[0052] In an embodiment, performing a translation and rotation animation to switch multiple sub-cards from an aggregated state to a tiled display state includes the following steps:

[0053] S410: Calculate the translation trajectory of each sub-card on the arc-shaped path and the rotation angle relative to the center point in a predetermined order, wherein the rotation angles between adjacent sub-cards have a predetermined angle difference.

[0054] In this step, the system first plans a motion path for each sub-card based on the stacking order in the aggregated state (e.g., in order or in reverse order). Instead of using a straight-line displacement, the system calculates a smooth arc path as the translation trajectory based on the center point of the screen or container, which ensures that the cards do not block each other during the unfolding process and the motion trajectory conforms to natural physical laws. At the same time, the system calculates the deflection angle of each card relative to the rotation center. In order to simulate the attitude difference of real objects during unfolding, the system sets a pre-set angle difference between the rotation angles of adjacent sub-cards. For example, the difference is preferably controlled between 5° and 15°. This means that as the cards move along the path, they will exhibit a gradually diverging fan-shaped angular distribution, rather than rigid parallel movement.

[0055] S420: Control the plurality of sub-cards to perform continuous animation according to the translation trajectory and the rotation angle to unfold.

[0056] In this step, each sub-card is driven to perform continuous compound motion according to the calculated parameters. The system controls the card to perform a rotation action while translating along the arc trajectory, or triggers the motion of each card in a pre-set time sequence (e.g., the top card moves first and the bottom card moves last). Through this high-frequency interpolation rendering, multiple sub-cards start from a compact stacking point and fan out smoothly like a single hand dealing a deck of cards, finally transitioning to a flat display state (e.g., a waterfall layout position), realizing card unfolding.

[0057] In this embodiment, by designing a specific arc translation and differential rotation compound animation logic, the technical problems of stiff interface state switching and lack of logical guidance are solved. Specifically, by calculating the arc path and the pre-set angle difference, the application embodiment effectively avoids visual overlap and mechanical feeling of the cards during the motion process, so that the animation effect conforms to the physical intuition of the user. This continuous animation simulating the unfolding of cards concretizes the abstract state switching process into clear physical motion, not only enhancing the interest and smoothness of human-computer interaction, but more importantly, playing a key visual guidance role, helping users clearly track the source path of each sub-card from the collection to the independent position, thereby effectively reducing the user's visual search cost and cognitive load in the unfolding moment when the amount of information instantaneously increases.

[0058] In an embodiment, switching to a flat display state includes the following steps:

[0059] S510: Obtain the real-time width of the display interface and adaptively adjust the number of sub-cards displayed in each row according to the real-time width.

[0060] In this step, the system uses responsive layout technology to detect the pixel width of the display container or screen in real time. The system sets a minimum display width threshold for a single subcard, and when the interface width changes (for example, the user switches from a PC wide screen to a mobile vertical screen, or manually drags to change the browser window size), the system will automatically trigger the rearrangement logic. The system divides the current acquired real-time width by the preset width of a single card (plus the spacing), and takes the integer part to calculate the number of columns that the current screen can best accommodate. For example, it may be displayed as 4 columns on a wide screen, and automatically adjusted to 1 or 2 columns on a mobile screen, so as to ensure that the number of subcards displayed in each row always matches the physical space of the current display device, effectively avoiding too small cards that are difficult to read or too large cards that overflow the screen.

[0061] S520: Keep the size of the plurality of subcards consistent when displayed in a tiled manner, and configure the arrangement spacing between the subcards according to the spacing rules in the style parameters.

[0062] In this step, in order to ensure the neatness and professionalism of the interface, the system forcibly keeps the visual size of all subcards consistent in the tiled state (for example, usually using waterfall layout), unless the user subsequently manually fine-tunes. At the same time, the horizontal and vertical spacing between cards is not randomly generated, but strictly reads and follows the pre-defined spacing rules (for example, inner and outer margin parameters) in the target design style. The system dynamically calculates the exact coordinates (x, y) of each card in the tiled view according to the calculated number of columns and fixed spacing parameters, ensuring that all cards are arranged neatly and uniformly, forming a standard grid or waterfall visual effect.

[0063] In this embodiment, through the adaptive layout and standardized spacing configuration described above, the technical problem of inconsistent display effect of the AI-generated UI scheme on different terminal devices is solved. Specifically, by real-time acquisition of width and adaptive adjustment of the number of rows, the present application realizes responsive cross-terminal adaptation, ensuring that the generated card set can fully utilize the screen space and will not appear layout disorder or content occlusion on mobile phones, tablets or desktops. At the same time, by keeping the size consistent and strictly executing the spacing rules in the style parameters, the present application ensures the visual order and standardization of the tiled interface, so that the complex card set generated by AI can still present a professional designer-level layout quality after expansion, improving the visual comfort of users when browsing a large amount of information.

[0064] In an embodiment, any subcard in the tiled display state is provided with independent interactive operation, specifically including the following steps:

[0065] S610: In response to the focusing operation on the target subcard, the display level of the target subcard is raised and the display ratio is enlarged, and the transparency of the non-focused subcard is reduced.

[0066] In this step, when the user performs a focus operation on a specific sub-card in the tiled state (such as waterfall view), the system will immediately trigger visual feedback. The specific form of focus operation includes mouse pointer hovering or finger touch. Once the operation is recognized, the system first sets the Z-axis level (Z-index) of the target sub-card to the highest, ensuring that it blocks other elements that may overlap. At the same time, the system performs a slight zoom-in animation on the target sub-card, for example, the preferred zoom ratio is 1.05 times the original size, making it visually float forward. To further enhance the visual focus, the system synchronously adjusts the display properties of all non-focus sub-cards in the background except the target sub-card, reducing its transparency to about 60% (i.e. becoming darker or blurred). This way of highlighting the main body and blurring the background instantly creates a temporary and immersive single-view window in the array of cards.

[0067] S620: Load content editing components, collection components or sharing components on the current display interface of the target sub-card to perform independent processing on the target sub-card.

[0068] In this step, the system dynamically loads a floating operation component bar (Toolbar) above or around the focused target sub-card. This component bar integrates various processing capabilities for single cards, including:

[0069] Content editing component: allows users to directly modify the text information in the target sub-card (such as correcting prices, rewriting copy), or fine-tune local styles (such as changing icon colors), and the modification results will be rendered in real time and synchronized to the current target sub-card without jumping to a complex editor background.

[0070] Collection component: supports users to save the target sub-card that they are satisfied with to the personal account material library, which facilitates subsequent direct reuse in other design projects, realizing atomic management of assets.

[0071] Sharing component: supports generating an independent sharing link for the target sub-card, or exporting it as a PNG image or SVG vector image file, which solves the last mile problem from design preview to development delivery.

[0072] It can be seen that the embodiment solves the technical pain point that the existing AI generation tool can only be operated as a whole and cannot be fine-tuned locally through the synergistic mechanism of visual focus and function mounting. Specifically, by improving the level, amplifying the scale, and reducing the background transparency, the application realizes seamless switching from a global view to a single-point focus without leaving the current browsing interface, effectively reducing the dispersion of user attention. Further, by directly loading the editing, collecting, and sharing components on the target card, the application gives users the ability to fine-tune the generated results. Users do not need to regenerate the entire scheme because of dissatisfaction with a card, nor do they need to export the file to make modifications. This independent interaction mode of seeing and changing significantly reduces the modification cost and greatly improves the iteration efficiency and delivery quality of design schemes.

[0073] In an embodiment, during the execution of the translation and rotation animation, the following steps are specifically included:

[0074] S710: In response to the adjustment instruction for the animation speed, the playing speed of the translation and rotation animation is adjusted through the slider component.

[0075] In this step, in order to adapt to the information receiving rhythm of different users, the system provides an animation control slider component on the interactive interface. Users can issue speed adjustment instructions by dragging the slider, and the system responds in real time and adjusts the playing rate of the translation and rotation animation. Preferably, the adjustment range supports stepless adjustment from 0.5 times speed (slow) to 2 times speed (fast). In addition, the system can also provide preset mode buttons for fast expansion or slow expansion, which can be quickly switched to the corresponding speed gear by clicking. The system changes the time length parameter of the animation interpolator to realize the change of the speed, ensuring that the animation remains smooth and does not drop frames at different rates.

[0076] S720: In response to the pause instruction or the continue instruction for the translation and rotation animation, the translation and rotation animation is controlled to pause or continue playing in the current execution state.

[0077] In this step, the system gives users the right to interrupt the animation execution process in real time. When the user triggers the pause instruction (such as clicking the pause icon or long-pressing the screen) during the animation playing process, the rendering state of the current frame is immediately frozen, and the card set is left in the intermediate state from aggregation to tiling. When the user triggers the continue instruction, the system continues to execute the remaining translation and rotation trajectory interpolation from the frozen frame until the entire expansion process is completed.

[0078] It can be seen that, in the embodiment, the introduction of the slider assembly speed regulation and pause / continue control mechanism solves the problem of the traditional UI animation flashing and the inability to intervene in the interactive experience. Specifically, by adjusting the play speed through the slider, the application allows users to customize the rhythm of information presentation according to their own cognitive habits, meeting the needs of experienced users for efficiency (fast expansion) and catering to the needs of novice users to observe details (slow expansion). At the same time, by supporting pause and continue playing, the application gives users complete control over the interactive process, improving system fault tolerance and operation immersion, making the human-computer interaction process more natural and humanized.

[0079] In an embodiment, the method further comprises the steps of:

[0080] S810: encapsulate the style parameters contained in the selected target design style into a standardized data format, and store the encapsulated standardized data format as a custom style template in the storage module associated with the user account.

[0081] In this step, after the user completes the configuration of the design style (whether it is to select a preset style or to make a custom fine-tuning, such as modifying the main color or adjusting the corner radius), the system starts the parameter encapsulation program. The system extracts all the visual specification parameters currently in effect and encapsulates them into a common standardized data format, for example, preferably in JSON object format. The data package contains four core fields that define the visual style: color code (such as the Hex value of the main color, auxiliary color, and background color), font parameter (such as font family, font size level, and font weight), layout parameter (such as inner margin and grid spacing), and decoration parameter (such as shadow intensity and texture type). After encapsulation, the system names the JSON data package as a custom style template and stores it persistently in the cloud database, binding it to the account ID of the currently logged-in user to build the user's personal style asset library.

[0082] S820: When receiving a subsequent generation request, map the prompt word content associated with the subsequent generation request to the style parameters in the custom style template, and constrain the AI generation process based on the style parameters to maintain the consistency of the UI cards generated in different batches in terms of visual specifications.

[0083] In this step, when the user initiates a new generation task (i.e. subsequent generation request) at a future time point, hoping to add new card pages to the same project, there is no need to reconfigure parameters by memory. The user only needs to directly call the stored custom style template, and the system will read the standardized style parameters therein. The system maps and associates the newly input prompt word content (such as new copy, new data field) with the style rules in the template, for example, automatically corresponding the title in the prompt word to the title font size and color specified in the template. When performing the generation task, these style parameters are forced to be referenced as constraint conditions to ensure that the newly generated card is completely aligned with the historically generated card in visual features.

[0084] As can be seen, in this embodiment, by encapsulating the style parameters into a standardized data format and storing them as a custom template, the consistency specification of the design system is established from the bottom data structure. Specifically, by encapsulating and storing in a standardized format, the present application solves the problem that parameters are difficult to be deposited and need to be repeatedly configured each time in existing AI generation technology. More importantly, when processing subsequent generation requests, by mapping and associating new content with old template parameters and constraining the AI generation process, the present application effectively eliminates the problem of different batches of component styles being fragmented and difficult to reuse caused by strong randomness of AI generation results. This mechanism ensures that even if the pages or components are generated in multiple times, they can maintain a high degree of uniformity in visual features, significantly enhancing the scalability and practicality of the AI generated design scheme.

[0085] In an embodiment, in the tiled display state, the following steps are specifically included:

[0086] S910: Provide three sorting options of sorting by generation time, sorting by importance, and user-defined sorting.

[0087] In this step, when the card set is in the expanded tiled state, the system provides explicit sorting control components such as sorting switch button groups or drop-down menus at the top of the interface or in the side toolbar. The system presets three sorting logics for different management dimensions for the user to choose. The first one is sorting by generation time, which is suitable for scenarios that need to trace back history or focus on the latest generation, and the system arranges the cards in descending or ascending order according to the time stamp of card generation; the second one is sorting by importance, which uses natural language processing technology to analyze the information weight of the prompt word and the generated content (for example, cards containing core selling points or key data are considered as high priority), and arranges high-weight cards in the most conspicuous position; the third one is user-defined sorting, which allows the user to manually adjust the order of the cards through drag-and-drop interaction to meet the personalized sorting needs.

[0088] S920: In response to the switching instruction for the sorting option, switch the arrangement logic of the plurality of independent sub-cards, and perform an animation transition during the switching process to realize the refresh of the operation interface.

[0089] In this step, when the user triggers the sorting switching instruction, the system does not instantly refresh the interface harshly, but starts a smooth rearrangement process. The system first recalculates the target coordinate position of each sub-card in the tiled view (such as waterfall flow grid) according to the new sorting rule. Then, the system controls all sub-cards to perform displacement interpolation animation from the current position to the target position. In this process, the user can see the cards moving and repositioning in order on the interface, rather than abrupt changes in the picture.

[0090] In this embodiment, by providing three sorting options of generation time, importance and user customization, the problem of users being difficult to quickly retrieve and sort information in the face of large-scale generated content is solved. Specifically, the multi-dimensional sorting logic gives users efficient management ability of the massive card set, whether it is through timeline backtracking, through importance to grasp the key, or through customizing ideas, it can significantly improve the information retrieval efficiency. At the same time, the animation transition is performed when switching the sorting logic, which avoids the visual mutation when refreshing the interface. This dynamic refreshing mechanism not only improves the smoothness of the operation, but also helps users to maintain the continuity of the card position change in the visual perception, reducing the visual interference in the operation process.

[0091] In an embodiment, after generating the UI card data, the following steps are included:

[0092] S1010: Automatically checking the generated UI card data by using a preset quality detection rule; the automatic checking includes style consistency checking of color and font, content integrity checking of card generation prompt word core information, and layout rationality checking of element overlap or spacing anomaly.

[0093] In this step, after the preliminary generation of card data is completed, the system does not directly present the result to the user, but first starts the built-in quality assurance mechanism. The system performs multi-dimensional deep scanning on the generated UI card data according to the preset detection rule. First, the style consistency check is performed, the system compares whether the generated UI elements (such as button background color, title font) are strictly within the color value range and font specification specified by the target design style, to prevent the AI from using the wrong visual style due to illusion. Secondly, the content integrity check is performed, the system traces back the original card generation prompt word through semantic analysis technology to confirm whether the core information (such as key data field, specific content of the text) required by the user is completely retained in the generation result, to prevent information omission. Finally, the layout rationality check is performed, the system detects whether there is unexpected overlap between interface elements through geometric calculation, or whether there are abnormal situations such as text overflow container and spacing density.

[0094] S1020: If the automatic check passes, output the final generation result; if the automatic check fails, perform automatic optimization processing on the UI card data, or prompt the user to adjust the style parameters.

[0095] In this step, the system performs branching processing logic according to the check results. If all the above check items pass, the system determines that the generation result is qualified and renders it to the front-end interface for the user to view. If any abnormality is detected (such as text overflow or color conflict), the system preferentially attempts to perform automatic optimization processing, such as automatically adjusting the text box height to adapt to the amount of text or correcting the deviated color value. If the system determines that automatic repair cannot solve the problem (for example, the prompt word information itself has contradictions), an interactive prompt is popped up to guide the user to manually adjust the style parameters or modify the prompt word. This mechanism forms an intelligent quality closed loop, ensuring that the final output to the user is a high-quality solution that has been screened and corrected.

[0096] In this embodiment, by introducing an automatic quality detection and optimization mechanism including style consistency, content integrity, and layout rationality, the technical problem of strong randomness and easy occurrence of low-level errors of AI-generated content is solved. Specifically, through multi-dimensional automatic checking, the present application establishes an intelligent quality interception network before the generation result is presented to the user, effectively filtering visual deviations or information missing caused by unstable models. Further, by performing automatic optimization processing or guiding user intervention, the present application establishes a visual quality guarantee path, and the system can self-repair common problems such as layout overlap, which not only significantly reduces the user's burden of manually correcting and troubleshooting the generation result, but also ensures that the output UI card has a professional level that meets the design specifications from the bottom, improving the direct usability of the generated solution.

[0097] In an embodiment, the target generation form is obtained, specifically including the following steps:

[0098] S1110: The natural language processing technology is used to analyze the keywords in the card generation prompt word.

[0099] In this step, the system starts the semantic analysis engine to perform word segmentation and part-of-speech tagging on the text as soon as the user inputs the text prompt word. The system focuses on identifying and extracting keywords in the prompt word that imply the number or structure of the content. The system has a specific word library built-in, which is used to capture words with collective meaning (such as a set, series, and complete set) and specific quantity words (such as 10, three, and a group), so as to understand the user's potential intention about the size of the generated content.

[0100] S1120: If the keywords contain preset quantity words or collective words, automatically recommend the card set form as the target generation form.

[0101] In this step, the system matches the extracted keywords with the preset rule library. Once it detects that the prompt words contain preset collective words such as a set, multiple, or a quantity greater than one, the system determines that the user's generation intention is multi-dimensional and parallel content. Accordingly, the system automatically highlights the card set option in the form selection interface, or directly sets it as the default checked state, without the user manually searching or switching. Similarly, if the system recognizes words such as one or a single sheet, it will preferentially recommend a single card form.

[0102] In this embodiment, by using natural language processing technology to analyze prompt keywords and automatically recommending card set forms when recognizing quantity words or collective words, the problem of decision-making cost in the configuration stage is solved, in which the user needs to manually match the demand and function. Specifically, this intelligent recommendation mechanism realizes accurate mapping from user intention to system function, simplifying the user's configuration path. The user does not need to deeply understand the definition of different forms, and the system can automatically predict the most suitable bearing form according to language habits, which not only reduces the operation threshold, but also significantly improves the efficiency of interactive decision-making and the smoothness of human-computer collaboration.

[0103] To facilitate understanding of the above content, three figures are briefly described below, which are shown in Figures 3-5

[0104] Based on the explanation of the above embodiments, the following explains the actual interface applied to the interaction of the UI card generation shown in the Figures 3-5 The interface directly shows the core multi-form generation and aggregation-tile interaction logic of the present application, Figure 3 is a simple schematic diagram of the interface. The left area of the interface includes a card display area, and the right area includes a dialogue area.

[0105] As Figure 4 shown, the card display area on the left includes a generation result display area, which mainly presents the UI card data generated according to the user's instructions, specifically including two key display states of aggregation and tiling, as well as independent interactive operations for sub-cards. The coffee ordering card set, menu card set, and flight reservation card set on the top of the interface show the aggregation state in the embodiment of the present application. In this state, the system uses the preset stacking rules to stack and display multiple sub-cards (such as multiple flight information cards) belonging to the same theme in the Z-axis direction. As Figure 4 ​As shown in the predetermined ticket card set, multiple cards (showing Shanghai-Beijing route information) are tightly stacked, only the edge of the bottom card is exposed, which greatly saves the screen display space. The simple, frosted glass, and illustrated labels marked above the card correspond to the target design style obtained by the system, indicating that the batch generation result applies specific style parameters. The storyboard card set below the interface shows the effect after the card set is switched from the aggregated state to the tiled display state. At this time, multiple sub-cards (such as the 8 colorful cards shown in the figure) are expanded according to the preset layout rules (such as grid or waterfall flow), allowing users to view the specific content of all cards. On a certain sub-card in the storyboard card set, a floating operation menu is displayed, including the options of creating a card and viewing the generated association, which corresponds to the description in the specification about independent interactive operations, that is, in the tiled state, the system responds to the user's focus operation (such as mouse hovering) to allow the user to handle or edit any sub-card individually without operating the entire set.

[0106] As shown in Figure 5 , this area is the interactive configuration area of the dialogue area, which is the entrance for the user to input card generation prompt words and configure generation parameters. Among them, the panel at the top of the interface prompts to select the style type to be expanded (multiple selection), and provides visual options such as technology style, simple style, illustration style, and frosted glass. The user's operation of checking the technology style completes the specification of the target design style, and the system will extract style parameters (such as color and texture) to constrain the subsequent generation process accordingly.

[0107] In the dialogue bubble, the user inputs "card name 1+12 expansion #frosted glass #illustration style style type". Among them, +12 is a quantity word, and #frosted glass is a style keyword. The system analyzes the prompt word through natural language processing and identifies the user's intention to generate multiple cards.

[0108] The system feedbacks the prompt "not sure about the desired product, please select the product you want to generate", and provides three options of card, card set, and business process. Corresponding to the target generation form selection step in the specification. Since the prompt word contains a quantity suggestion, the system may prefer to recommend a card set (corresponding to multiple aggregation) or a business process (corresponding to a card combination form).

[0109] The bottom associated generation button and input box correspond to the description in the specification about style templates or context association, allowing the user to initiate a new round of generation request based on the current historical dialogue or the generated style, maintaining the consistency of the generation result.

[0110] It should be understood that the size of the serial number of each step in the above embodiments does not mean the order of execution, and the execution order of each process should be determined by its function and internal logic, and should not constitute any limitation on the implementation process of the embodiments of the present application.

[0111] The embodiment of the application provides a UI card generation interactive system, please refer to Figure 2 The system 20 mainly comprises a configuration module 210, a generation module 220 and a display interaction module 230.

[0112] The configuration module 210 is used for acquiring a card generation prompt word input by a user, a selected target design style and a target generation form. The module serves as an entrance for human-computer interaction and is responsible for receiving multi-dimensional configuration instructions of the user. The module supports the user to select three specific target generation forms: a single card form, a card set form or a card combination form. When the user selects the card set form, the module marks the card set form as a collection form of multiple independent sub-cards generated based on multi-dimensional information in the prompt word. When the user selects the card combination form, the module marks the card combination form as an integrated form of multiple functionally complementary sub-cards generated based on logical association in the prompt word. Through the modular configuration, the system can accurately understand whether the intention of the user is to generate single content, complete content or a function assembly.

[0113] The generation module 220 is used for analyzing the card generation prompt word based on style parameters contained in the target design style and generating UI card data conforming to the target generation form. The module internally integrates a natural language processing unit and an AI generation engine. The module first extracts the style parameters (such as color, font specification) input by the configuration module as constraint conditions, and then analyzes the core semantics of the prompt word. According to the determined form type, the module generates a data packet containing at least one UI card. If the card set is selected, the module automatically generates multiple sub-card data with uniform style. If the card combination is selected, the module generates structured integrated data.

[0114] The display interaction module 230 is a core interactive execution unit of the system and is mainly used for processing dynamic display and operation in the card set form. When the data output by the generation module is the card set, the module first controls the display interface to display multiple sub-cards in an aggregated state based on preset stacking rules. In the process, the module calculates the coordinates of the cards according to the preset stacking order and performs hierarchical rendering according to the layering interval, so as to present a compact stacking effect on the screen.

[0115] Further, the module monitors the user's interaction instructions in real time. When detecting the unfolding instruction (such as clicking or gesture operation) for the aggregation state, the module drives the rendering engine to perform the translation rotation animation. It controls multiple sub-cards to start from the stacked position, and simultaneously performs displacement and rotation, simulates the physical trajectory of the unfolding of playing cards, and smoothly switches to the flat display state. In the flat state, the module takes over the user's input events, provides independent interaction operation capabilities for any flatly displayed sub-card, and allows the user to independently edit, view or process a single card without operating the entire set.

[0116] The interaction system provided by the embodiment realizes integrated processing from user intention input to dynamic interaction display through the cooperative work of the configuration module, the generation module and the display interaction module. The clear definition of the three generation forms of the configuration module enables the system to flexibly adapt to different generation requirements from lightweight to complex. The generation module ensures that the output UI card data has high design consistency in vision through the forced constraint of style parameters. Most importantly, the display interaction module realizes efficient storage of multiple card contents in limited screen space through the aggregation display strategy, avoiding visual congestion; and through the combination of translation rotation animation and independent interaction operation, it realizes the seamless integration of overall overview and local fine-tuning functions in the same system, significantly improving the user's management and iteration of AI generated content efficiency.

[0117] For specific limitations of the above system, please refer to the corresponding limitations of all functions or steps in the method embodiment part in the above, which will not be repeated here.

[0118] The embodiment of the application provides a computer device (or electronic device), which mainly includes a memory, a processor and a computer program stored in the memory and executable on the processor at the hardware level.

[0119] The memory, as a physical carrier of data, is used to store the operating system, application program code and various key data involved in the embodiments of the application. Specifically, it is responsible for storing the card generation prompt words input by the user, the preset style library data (including standardized style parameter templates), the generated UI card data (including images and metadata) and the temporary state data generated during the interaction process (such as the current coordinates of the card and the stacked level index). In addition, the memory also stores the interpolation algorithm program for performing the translation rotation animation and the quality check rule library.

[0120] The processor, as the core of calculation and control, is configured to execute a computer program in the memory to implement the interaction method of the UI card generation of any one of the preceding embodiments. Specifically, when the processor executes the program, it first acquires the configuration instruction of the user through the input interface, and calls the natural language processing algorithm to parse the prompt word; then, the built-in AI generation model is used to calculate and generate UI data conforming to the single, card set or card combination form in combination with the style parameters. In the display stage, the processor performs geometric calculation according to the preset stacking rule, and controls the display screen to render an aggregated stacking interface with a physical texture. Most importantly, when the expansion instruction is received, the processor calculates the translation trajectory and rotation angle of each sub-card on the arc-shaped path in real time, and drives the graphics rendering engine (such as GPU) to perform a high-frame-rate translation and rotation animation, realizing smooth switching from the aggregated state to the tiled state; then, the processor continuously monitors the touch or mouse event of the user, and responds to the focusing, editing or sharing operation of any sub-card in the tiled state.

[0121] The computer device provided by the embodiment realizes the interaction method of the UI card generation through the cooperation of the processor and the memory. Specifically, the device uses the computing power of the processor to realize the millisecond-level generation and analysis of multi-dimensional UI data, solving the timeliness problem of complex design scheme generation. More importantly, through real-time calculation and rendering of the translation and rotation animation trajectory by hardware, the device successfully simulates the physical dynamic effect similar to the unfolding of playing cards on the screen, and converts the abstract data set into an intuitive interactive object. This software and hardware combined solution makes the computer device not only a static design tool, but also an intelligent design assistant with the ability of form intelligent adaptation and dynamic interaction guidance, effectively solving the technical problems of disordered display and low interaction efficiency of existing devices when processing AI generated content in the physical layer.

[0122] The embodiment of the present application provides a computer readable storage medium, and the computer program is stored in the medium. The computer readable storage medium can be non-volatile or volatile, and specifically includes but is not limited to flash disk, read-only memory (ROM), random access memory (RAM), magnetic disk or optical disk, etc.

[0123] In the storage medium, the computer program is coded as a series of machine instructions or script code. When the program is read and executed by the processor of the computer device (such as a server, a desktop computer, a smart phone or a tablet computer), it will drive the device to execute the interaction method of the UI card generation of any one of the preceding embodiments.

[0124] Specifically, the instructions in the storage medium first instruct the processor to initialize the interactive interface, obtain the card generation prompt word input by the user, the selected target design style and the target generation form. Next, the program calls the natural language processing module to parse the prompt word, and generates UI data in single, card set or card combination form according to the style parameters. If the generation result is a card set, the rendering instructions in the program will control the display device to draw an aggregated stacking interface with a physical texture based on the preset stacking rules (including generation order, layer spacing and transparency decrement parameters). Most importantly, the program contains a specific set of animation logic instructions for real-time monitoring of the user's expansion request. Once triggered, the instruction set immediately calculates the translation trajectory and rotation angle of multiple sub-cards on the arc path, and controls the graphics processor to perform the translation and rotation animation at a high frame rate, realizing the smooth transition from the aggregated state to the tiled state. In addition, the program also contains independent interaction logic for any sub-card in the tiled state, ensuring that the user can focus, edit or share a single card.

[0125] The computer readable storage medium provided by the embodiment provides a technical carrier of the above-mentioned interactive method, realizes the softwareization and portability of the innovative interactive logic. By storing the computer program for implementing the logic algorithm in the above-mentioned method in the medium, the present application can conveniently deploy this whole set of complex UI generation and interaction logic to different computing terminals. This not only enables any device with corresponding computing capability to instantly have the ability to process multi-dimensional AI generated content, but also effectively solves the problem of single display form and rigid interaction experience when generating UI scheme in existing software products, ensuring that the interactive method can be widely distributed and stably run, thereby improving the efficiency and experience of AI-assisted design in a wider user group.

[0126] Those skilled in the art can understand that all or part of the processes in the above-mentioned embodiment methods can be completed by a computer program instructing related hardware. The computer program can be stored in a non-volatile computer readable storage medium. When the computer program is executed, it can include the processes of the above-mentioned embodiments. Any reference to memory, storage, user database or other medium used in the embodiments provided by the present application can include non-volatile and / or volatile memory.

[0127] Those skilled in the art can clearly understand that, for the convenience and brevity of description, only the division of the above-mentioned functional units and modules is exemplified. In actual application, the above-mentioned functions can be completed by different functional units and modules according to needs, that is, the internal structure of the system is divided into different functional units or modules to complete all or part of the functions described above.

[0128] The above-described embodiments are only used to illustrate the technical solutions of the present application, and are not intended to limit the present application; although the present application has been described in detail with reference to the foregoing embodiments, those skilled in the art should understand that: it can still modify the technical solutions recorded in the foregoing embodiments, or make equivalent replacement for part of the technical features; and these modifications or replacements do not make the essence of the corresponding technical solutions deviate from the spirit and scope of the technical solutions of the embodiments of the present application, and should be included in the protection scope of the present application.

Claims

1. An interactive method for generating UI cards, characterized in that, The method includes: The system obtains the user-inputted card generation prompts, the selected target design style, and the target generation form. The target generation form includes a single card form, a card set form, and a card combination form. The card set form is a collection of multiple independent sub-cards generated based on the multi-dimensional information in the card generation prompts. The card combination form is an integrated form of multiple functionally complementary sub-cards generated based on the logical connections in the card generation prompts. Based on the style parameters included in the target design style, the card generation prompt words are parsed to generate UI card data that conforms to the target generation form. The UI card data includes at least one UI card. If the target generated form is a card set, the multiple sub-cards contained in the UI card data are displayed in an aggregated state based on the preset stacking rules. The aggregated state refers to displaying the multiple independent sub-cards in layers according to the preset stacking spacing based on the preset stacking order. In response to the expand command for the aggregated state, the plurality of sub-cards are switched from the aggregated state to the tiled display state by executing a translation and rotation animation, and independent interactive operations are provided for any of the sub-cards in the tiled display state; The generation of UI card data conforming to the target generation form includes: If the target generated form is a single card, an independent single card is generated based on the card generation prompt to focus on displaying a single piece of information; If the target generated form is a card set, the multi-dimensional information in the card generation prompts is split to generate multiple sub-cards with consistent style and labeled with serial numbers or category tags. If the target generated form is a card combination form, multiple sub-cards with complementary functions are generated based on the logical association in the card generation prompt words, and an integrated combination card is formed according to the preset layout rules.

2. The interactive method for generating UI cards according to claim 1, characterized in that, The method, based on preset stacking rules, displays multiple sub-cards contained in the UI card data in an aggregated state, including: The stacking order is determined according to the generation time order of the multiple sub-cards or the information priority in the card generation prompt words; Based on the stacking order, the stacking spacing is configured for each of the sub-cards, and the transparency parameters of each level of sub-cards are set according to the rule that the transparency decreases from the bottom layer to the top layer; Add a gradient shadow effect to the edges of the multiple sub-cards.

3. The interactive method for generating UI cards according to claim 1, characterized in that, The execution of the translation and rotation animation switches the multiple sub-cards from the aggregated state to the tiled display state, including: The translation trajectory of each sub-card on the arc path and the rotation angle relative to the center point are calculated in a preset order, wherein the rotation angle between adjacent sub-cards has a preset angle difference. The multiple sub-cards are controlled to perform continuous animation according to the translation trajectory and the rotation angle to unfold the sub-cards.

4. The interactive method for generating UI cards according to claim 1, characterized in that, The switching to tiled display mode includes: Obtain the real-time width of the display interface, and adaptively adjust the number of sub-cards displayed in each row based on the real-time width; Maintain the same size for all sub-cards when they are tiled, and configure the spacing between the sub-cards according to the spacing rules in the style parameters.

5. The interactive method for generating UI cards according to claim 1, characterized in that, Providing independent interactive operations for any of the sub-cards in the tiled display state includes: In response to a focus operation on a target sub-card, the display level of the target sub-card is increased and the display ratio is enlarged, while the transparency of non-focused sub-cards other than the target sub-card is reduced; Load a content editing component, a favorite component, or a sharing component into the current display interface of the target sub-card to perform independent processing on the target sub-card.

6. The interactive method for generating UI cards according to claim 1, characterized in that, The process of performing the translation and rotation animation also includes: In response to an adjustment command for the animation speed, the playback speed of the translation and rotation animation is adjusted via a slider component; In response to a pause or resume command for the translation and rotation animation, control the pause or resume playback of the translation and rotation animation in the current execution state.

7. The interactive method for generating UI cards according to any one of claims 1-6, characterized in that, The method further includes: The style parameters included in the selected target design style are encapsulated into a standardized data format, and the encapsulated standardized data format is stored as a custom style template in the storage module of the associated user account. When a subsequent generation request is received, the prompt content associated with the subsequent generation request is mapped and associated with the style parameters in the custom style template, and the AI ​​generation process is constrained based on the style parameters to maintain the consistency of the visual specifications of UI cards generated in different batches.

8. An interactive system for generating UI cards, characterized in that, include: The configuration module is used to obtain the card generation prompt words, the selected target design style, and the target generation form input by the user; wherein, the target generation form includes a single card form, a card set form, and a card combination form. The card set form is a collection of multiple independent sub-cards generated based on the multi-dimensional information in the card generation prompt words. The card combination form is an integrated form of multiple functionally complementary sub-cards generated based on the logical association in the card generation prompt words. The generation module is used to parse the card generation prompts based on the style parameters included in the target design style, and generate UI card data that conforms to the target generation form. The UI card data includes at least one UI card. The display interaction module is used to display multiple sub-cards contained in the UI card data in an aggregated state based on a preset stacking rule if the target generated form is a card set. The aggregated state refers to displaying multiple independent sub-cards in layers according to a preset stacking interval based on a preset stacking order. In response to an unfold command for the aggregated state, the module switches the multiple sub-cards from the aggregated state to a tiled display state by executing a translation and rotation animation, and provides independent interactive operations for any of the sub-cards in the tiled display state. The generation of UI card data conforming to the target generation form includes: If the target generated form is a single card, an independent single card is generated based on the card generation prompt to focus on displaying a single piece of information; If the target generated form is a card set, the multi-dimensional information in the card generation prompts is split to generate multiple sub-cards with consistent style and labeled with serial numbers or category tags. If the target generated form is a card combination form, multiple sub-cards with complementary functions are generated based on the logical association in the card generation prompt words, and an integrated combination card is formed according to the preset layout rules.

9. A computer device comprising a memory, a processor, and a computer program stored in the memory and executable on the processor, characterized in that, When the processor executes the computer program, it implements the steps of the interactive method for generating UI cards as claimed in any one of claims 1-7.

Images