User interface style generation method and system, electronic equipment and storage medium

Abstract

Embodiments of the invention disclose a user interface style generation method and system, an electronic device and a storage medium, relate to the technical field of user interface styles, and can generate personalized user interface styles based on user demands, thereby enhancing richness and diversity of the user interface styles. The method comprises the following steps: receiving theme preference and rule configuration input by a user; matching a basic style template from a preset style template library based on the theme preference; converting the visual features of the basic style template into a user interface initial style parameter set which can be quantitatively controlled; in a reinforcement learning environment, adjusting the initial style parameter set of the user interface according to the rule configuration, and outputting target style parameter data of the user interface; and generating a corresponding user interface style according to the user interface target style parameter data. The method and the device are suitable for scenes in which personalized user page styles are generated by artificial intelligence.

Description

Technical Field

[0001] The present application relates to the technical field of user interface styles, and in particular to a method, system, electronic device, and storage medium for generating a user interface style. Background Art

[0002] Current technologies for artificial intelligence (AI)-generated user interfaces (AIGUIs) primarily include text-to-UI transcoding based on large language models (LLMs) and visual UI design based on image generation. While existing technologies can automatically generate UIs in certain scenarios, the parameters of the UI generation process are controlled through abstract natural language descriptions, lacking fine-grained control over specific visual parameters. This results in poor controllability of the generated results, a tendency to generate interface elements of similar styles, and an inability to generate personalized UI styles based on user needs. Summary of the Invention

[0003] In view of this, embodiments of the present application provide a method, system, electronic device, and storage medium for generating a user interface style, which can generate personalized user interface styles based on user needs, thereby enhancing the richness and diversity of user interface styles.

[0004] In a first aspect, an embodiment of the present application provides a method for generating a user interface style, comprising: receiving a theme preference and a rule configuration input by a user; matching a basic style template from a preset style template library based on the theme preference; converting the visual features of the basic style template into a quantitatively controllable user interface initial style parameter set; in a reinforcement learning environment, adjusting the user interface initial style parameter set according to the rule configuration, and outputting user interface target style parameter data; and generating a corresponding user interface style based on the user interface target style parameter data.

[0005] According to a specific implementation method of an embodiment of the present application, converting the visual features of the basic style template into a quantitatively controllable user interface initial style parameter set includes: calling a corresponding parser according to the user interface design element type to extract a qualitative description of the user interface design element, wherein the user interface design element includes form, color, material, text, layout, scale and motion effect; mapping the qualitative description to predefined parameters to obtain a quantitatively controllable user interface initial style parameter set.

[0006] According to a specific implementation method of an embodiment of the present application, in a reinforcement learning environment, the user interface initial style parameter set is adjusted according to the rule configuration, and user interface target style parameter data is output, including: encoding the user interface initial style parameter set into an initial state based on the reinforcement learning environment; adjusting the initial state parameters according to a preset strategy to obtain second user interface target style parameter data, wherein the preset strategy includes randomly selecting parameters or pre-training to determine parameters; determining a reward score for the second user interface target style parameter data according to a preset evaluation indicator; iteratively calculating the reward score until the number of iterations reaches a preset number of iterations or the reward score converges, obtaining an adjusted user interface initial style parameter set, and outputting the user interface target style parameter data.

[0007] According to a specific implementation method of an embodiment of the present application, determining the reward score of the second user interface target style parameter data based on preset evaluation indicators includes: calculating the corresponding scores of the preset evaluation indicators, wherein the preset evaluation indicators include style matching, design specification compliance, visual consistency assessment and innovation assessment; summing the scores according to preset weights to determine the reward score of the second user interface target style parameter data.

[0008] According to a specific implementation method of an embodiment of the present application, generating a corresponding user interface style based on the user interface target style parameter data includes: converting the user interface target style parameter data through a parsing layer of a design system integration interface to obtain first intermediate data; mapping the first intermediate data to second intermediate data according to a predefined design markup specification; generating predefined platform style data based on the second intermediate data, and generating a corresponding user interface style that complies with the design markup specification according to the predefined platform style data and a user interface component library.

[0009] According to a specific implementation method of an embodiment of the present application, the basic style template is matched from a preset style template library based on the theme preference; including: extracting the theme preference data features, converting the theme preference data features into a weight vector; calculating the similarity between the weight vector and the basic style template in the preset style template library, and matching with the basic style template with the highest similarity value.

[0010] In a second aspect, an embodiment of the present application provides a user interface style generation system, comprising: a receiving unit for receiving theme preferences and rule configurations input by a user; a matching unit for matching a basic style template from a preset style template library based on the theme preferences; a conversion unit for converting the visual features of the basic style template into a quantitatively controllable user interface initial style parameter set; an adjustment unit for adjusting the user interface initial style parameter set according to the rule configuration in a reinforcement learning environment, and outputting user interface target style parameter data; and a generation unit for generating a corresponding user interface style based on the user interface target style parameter data.

[0011] According to a specific implementation method of an embodiment of the present application, the conversion unit includes: an extraction module, which is used to call the corresponding parser according to the type of user interface design element to extract a qualitative description of the user interface design element, wherein the user interface design element includes form, color, material, text, layout, scale and animation; a first mapping module, which is used to map the qualitative description to predefined parameters to obtain a set of user interface initial style parameters that can be quantitatively controlled.

[0012] According to a specific implementation method of an embodiment of the present application, the adjustment unit includes: an encoding module for encoding the user interface initial style parameter set into an initial state based on the reinforcement learning environment; an adjustment module for adjusting the initial state parameters according to a preset strategy to obtain second user interface target style parameter data, wherein the preset strategy includes randomly selecting parameters or pre-training to determine parameters; a determination module for determining a reward score for the second user interface target style parameter data according to a preset evaluation indicator; an output module for iteratively calculating the reward score until the number of iterations reaches a preset number of iterations or the reward score converges, thereby obtaining an adjusted user interface initial style parameter set and outputting the user interface target style parameter data.

[0013] According to a specific implementation method of an embodiment of the present application, the determination module includes: a calculation submodule, used to calculate the corresponding scores of the preset evaluation indicators, wherein the preset evaluation indicators include style matching, design specification compliance, visual consistency assessment and innovation assessment; a determination submodule, used to sum the scores according to preset weights to determine the reward score of the second user interface target style parameter data.

[0014] According to a specific implementation method of an embodiment of the present application, the generation unit includes: a first conversion module, which is used to convert the user interface target style parameter data through the parsing layer of the design system integration interface to obtain first intermediate data; a second mapping module, which is used to map the first intermediate data into second intermediate data according to a predefined design markup specification; and a generation module, which is used to generate predefined platform style data based on the second intermediate data, and generate a corresponding user interface style that complies with the design markup specification according to the predefined platform style data and the user interface component library.

[0015] According to a specific implementation method of an embodiment of the present application, the matching unit includes: a second conversion module, used to extract the theme preference data features and convert the theme preference data features into a weight vector; a calculation module, used to calculate the similarity between the weight vector and the basic style template in the preset style template library, and match the basic style template with the highest similarity value.

[0016] In a third aspect, an embodiment of the present application provides an electronic device comprising: a memory and a processor; the memory is used to store executable program code; the processor runs a program corresponding to the executable program code by reading the executable program code stored in the memory, thereby implementing any method for generating a user interface style described in the first aspect.

[0017] In a fourth aspect, an embodiment of the present application provides a computer-readable storage medium, which stores one or more computer programs. When the one or more computer programs are executed by one or more processors, the method for generating a user interface style described in any one of the first aspects is implemented.

[0018] The user interface style generation method, system, electronic device and storage medium provided in the embodiments of the present application receive the theme preferences and rule configurations input by the user; match a basic style template from a preset style template library based on the theme preferences; convert the visual features of the basic style template into a quantitatively controllable user interface initial style parameter set; in a reinforcement learning environment, adjust the user interface initial style parameter set according to the rule configuration and output user interface target style parameter data; and generate a corresponding user interface style based on the user interface target style parameter data. In this way, by converting the visual features of the basic style template into a quantitatively controllable user interface initial style parameter set and adjusting the user interface initial style parameter set in combination with the user's rule configuration, specific visual parameters can be precisely controlled, and personalized user interface styles can be generated based on user needs, thereby enhancing the richness and diversity of user interface styles. BRIEF DESCRIPTION OF THE DRAWINGS

[0019] In order to more clearly illustrate the embodiments of the present application or the technical solutions in the prior art, the following briefly introduces the drawings required for use in the embodiments or the description of the prior art. Obviously, the drawings described below are only some embodiments of the present application. For ordinary technicians in this field, other drawings can be obtained based on these drawings without paying any creative work.

[0020] Figure 1 A flowchart of a method for generating a user interface style provided in an embodiment of the present application; Figure 2 A flowchart for generating a user interface style provided in an embodiment of the present application; Figure 3 A detailed flowchart for generating a user interface style provided in an embodiment of the present application; Figure 4 A schematic diagram of the structure of a system for generating a user interface style provided in an embodiment of the present application; Figure 5 A schematic diagram of the structure of an electronic device provided in an embodiment of the present application. DETAILED DESCRIPTION

[0021] The embodiments of the present application are described in detail below with reference to the accompanying drawings.

[0022] It should be clear that the embodiments described are only part of the embodiments of this application, not all of the embodiments. Based on the embodiments in this application, all other embodiments obtained by ordinary technicians in this field without making creative work are within the scope of protection of this application.

[0023] In a first aspect, embodiments of the present application provide a method for generating a user interface style, which can generate personalized user interface styles based on user needs, thereby enhancing the richness and diversity of user interface styles.

[0024] like Figure 1 As shown, an embodiment of the present application provides a method for generating a user interface style, comprising: S11, receiving the subject preference and rule configuration input by the user; When generating the user interface style, the user configuration interface, reinforcement learning environment, visual feature parameterization module, style library and module management, intelligent matching engine, reward evaluation system and design system integration interface are coordinated and applied. Figure 2 For the user interface style generation flow chart provided in the embodiment of this application, see Figure 2 The user configuration interface receives the user's configuration input on generation rules and theme preferences, and several other parts work together to generate a personalized user interface style based on user needs.

[0025] The user configuration interface is the entrance to interact with users. The theme preference settings include style selection, emotion setting, complexity adjustment and main color selection. Style selection can provide a variety of preset style options, such as flat, skeuomorphism, minimalism, etc. When setting emotions, users can choose the emotions they want to convey, such as vitality, professionalism, warmth, etc. When adjusting complexity, the complexity of design elements can be controlled by the slider. When selecting the main color, in some examples, a color palette or color code input box is provided to specify the main color.

[0026] Rule configuration includes parameter weight adjustment, generation probability control and constraint setting. Among them, parameter weight adjustment sets the importance weight of various visual feature parameters, generation probability control can configure the probability of certain features appearing, and constraint setting can define the valid range or restriction conditions of the parameters.

[0027] For example, it accepts user input configuration and supports multi-style mixed configuration, such as the style is 60% flat and 40% skeuomorphism, the emotion is technological, the complexity is 65, the main color is blue #3A86FF, and weights can also be assigned, color 50%, shape 30% and motion 20%.

[0028] S12, matching a basic style template from a preset style template library based on the theme preference; This application uses an intelligent matching engine to perform multi-dimensional matching between the user's configured theme preferences and the preset style template library to screen out the basic style template that best meets the needs.

[0029] First, the user-entered configuration is converted into a normalized vector. For example, the style vector is converted to [Flat: 0.6, Neumorphic: 0.4], the sentiment vector is [Technical: 0.7, Calm: 0.3], and the complexity scalar is 65. Then, a preliminary screening of templates in the preset style template library is performed. First, style filtering is performed. For example, all templates containing the Neumorphic or Flat tag and satisfying a style weight greater than 0 are selected from the library. Second, sentiment matching and complexity range matching are performed. For example, templates with a complexity value within the user-specified value ±15 are selected. Third, primary color matching is performed. For example, the primary color parameter colorPalette.primary of the template is checked to see if it is adjacent to the user's primary color on the HSV (Hue, Saturation, Value) color wheel, with a hue difference of no more than 30°. The HSV color wheel is a color model based on hue, saturation, and value. For these preliminary screening templates, a comprehensive matching score is calculated, and they are sorted by score and matched with the basic style template.

[0030] S13, converting the visual features of the basic style template into a quantitatively controllable user interface initial style parameter set; This application uses a visual feature parameterization module to convert the basic styles in the style template library into a precisely controllable set of initial parameters for the user interface style, thereby achieving a mapping from abstract design language to specific style codes.

[0031] First, the seven elements of UI design are broken down into quantifiable parameter groups. The original parameters are extracted from the matching template, and the template parameters are mapped to a standardized range. Then, the parameters are adjusted according to the weights and probabilities configured by the user. For example, if the user sets the complexity to 65, the high-complexity parameters are reduced, such as adjusting the shadow depth from 5px to 4px. It is also necessary to ensure that the parameters meet the hard limits set by the user. For example, if the user requires the rounded corners to be no less than 8px and no more than 16px, 12px remains unchanged, and template parameters out of range are cropped. If dynamic effects are disabled, the dynamic effect parameters are forced to 0. Finally, a structured initial parameter set is output.

[0032] S14, in a reinforcement learning environment, adjusting the initial user interface style parameter set according to the rule configuration, and outputting user interface target style parameter data; In a reinforcement learning environment, the system dynamically optimizes the initial style parameter set based on user-configured rules and feedback mechanisms, and ultimately outputs user interface target style parameter data that meets the design goals.

[0033] First, initialize the reinforcement learning environment, which includes the state space, action space and reward function. The state space content is initialized. The state space includes the current UI parameter set, user theme preferences and historical adjustment records. In some examples, the historical adjustment records can be the parameter changes of the past 5 iterations; define adjustable parameter operations in the action space, including defining parameters that can be fine-tuned numerically, such as defining a fillet radius that can be adjusted by ±2px, and defining styles that can be switched, such as selecting an alternative template in the matching template library and switching from flat to minimalist; define parameters that can be redistributed for weight, such as defining color, shape and other parameters with adjustable weight ratios; set evaluation indicators for calculating the reward function score.

[0034] Next, the initial set of UI style parameters is adjusted based on the rule configuration. First, an adjustment strategy is generated based on the current state. For example, a conservative strategy might involve small adjustments to high-weight parameters, such as a ±3% fine-tuning of the primary color tone. Second, the initial parameter set is adjusted based on the strategy. Third, the adjusted results are evaluated. This can be done automatically through a reinforcement learning environment, where a reward function calculates the overall score for the adjustment, or directly through user feedback. If a user manually rates the result, for example, if they are dissatisfied, an additional 0.2 is deducted from the reward. Fourth, the strategy is updated based on the results. This adjustment process is repeated to output the final target UI style parameter data.

[0035] S15: Generate a corresponding user interface style according to the user interface target style parameter data.

[0036] This application uses the UI style generator module to convert the target style parameter data optimized by reinforcement learning into a user interface style that can be directly applied.

[0037] The user interface style generation method provided in the embodiment of the present application receives the theme preference and rule configuration input by the user; matches the basic style template from the preset style template library based on the theme preference; converts the visual features of the basic style template into a user interface initial style parameter set that can be quantitatively controlled; in a reinforcement learning environment, adjusts the user interface initial style parameter set according to the rule configuration and outputs user interface target style parameter data; and generates a corresponding user interface style based on the user interface target style parameter data. In this way, by converting the visual features of the basic style template into a user interface initial style parameter set that can be quantitatively controlled, and adjusting the user interface initial style parameter set in combination with the user's rule configuration, the specific visual parameters of the generated user interface can be precisely controlled, and personalized user interface styles can be generated based on user needs, thereby enhancing the richness and diversity of user interface styles.

[0038] In some embodiments, converting the visual features of the basic style template into a quantitatively controllable user interface initial style parameter set includes: calling a corresponding parser according to the user interface design element type to extract a qualitative description of the user interface design element, where the user interface design element includes form, color, material, text, layout, scale and motion effect; mapping the qualitative description to predefined parameters to obtain a quantitatively controllable user interface initial style parameter set.

[0039] This application uses a modular parsing engine to convert the visual features in the basic style template into a set of quantitatively controllable initial style parameters. Figure 3 A detailed flow chart of the user interface style generation provided in the embodiment of the present application is shown in Figure 3First, the corresponding parser is called based on the type of user interface design element. These design elements mainly include seven core categories: form, color, material, text, layout, scale, and motion. Each parser specializes in a specific category of design elements, analyzing the visual features in the template and extracting the corresponding qualitative descriptive information.

[0040] Specifically, for morphological elements, the parser identifies and extracts shape features of interface components, such as the degree of rounded corners of a button, the edge style of a card, or the outline type of an icon, converting them into qualitative descriptions such as right angles, slightly rounded corners, or fully rounded corners. Color element processing involves extracting color information such as primary, secondary, and text colors, and recording the overall tonality of the color scheme, such as cool tones, high saturation, or grayscale dominance. The material parser analyzes the texture of the interface surface, distinguishing characteristics such as flatness, subtle shadows, or frosted glass effects. Text element analysis encompasses font family selection, weight variations, and typographic features, extracting descriptions such as sans serif, tight spacing, or bold headlines. The layout parser focuses on analyzing typographic structure, identifying spatial organization methods such as grid systems, asymmetrical layouts, or card flows. Scale element processing involves determining relative size relationships, such as large spacing, tight padding, or hierarchical font sizes. The motion parser captures the characteristics of interface transitions, extracting behavioral patterns such as fast response, elastic animation, or slow-in and slow-out.

[0041] After extracting qualitative descriptions, the system maps these descriptions to a predefined quantitative parameter system. This mapping process is based on a conversion rule library established by the design system specifications. For example, slightly rounded corners are mapped to a precise value of 4px, cool tones are converted to color parameters with a hue value within the range of 200-260 degrees, or tight kerning is converted to a kerning adjustment value of -0.5px. For complex features such as frosted glass effects, multi-dimensional parameters such as transparency, background blur, and hue overlays are generated simultaneously. All parameters are standardized to ensure compliance with the design system's design token naming specifications and technical implementation requirements, ultimately forming a structured initial style parameter set, providing a precise and controllable input foundation for subsequent style fusion and code generation.

[0042] Through systematic parameter control and a library of style templates, the richness of AI-generated UI styles has been significantly increased, enabling the generated results to meet the needs of different scenarios and brand styles. By refining visual features into a quantifiable parameter set, the UI generation process is precisely controllable, and simple parameter adjustments enable fine-grained control over the generated results.

[0043] In some embodiments, in a reinforcement learning environment, the user interface initial style parameter set is adjusted according to the rule configuration, and user interface target style parameter data is output, including: encoding the user interface initial style parameter set into an initial state based on the reinforcement learning environment; adjusting the initial state parameters according to a preset strategy to obtain second user interface target style parameter data, wherein the preset strategy includes randomly selecting parameters or pre-training to determine parameters; determining a reward score for the second user interface target style parameter data according to a preset evaluation indicator; iteratively calculating the reward score until the number of iterations reaches a preset number of iterations or the reward score converges, obtaining an adjusted user interface initial style parameter set, and outputting the user interface target style parameter data.

[0044] First, the initial style parameter set of the user interface is encoded into a state vector that can be recognized by the reinforcement learning environment to obtain the initial state. In some examples, the numerical parameters can be directly normalized to the range [0, 1]. Then, the initial state parameters are adjusted according to the preset strategy. For example, in color adjustment, if it is detected that the user prefers a sense of technology, the hue of the main color #3A8CFF is shifted by +5%, closer to the cool color #2A7CEE; to match the complexity of 65, the radius of the fillet is reduced from 12px to 10px to simplify the visual hierarchy. The adjusted parameter data is the target style parameter data of the second user interface. Among them, the preset strategy includes randomly selecting parameters or pre-training to determine parameters. In some examples, for example, randomly perturbing parameters within the valid range to ensure diversity, or outputting parameter adjustment suggestions based on a neural network strategy with historical high reward cases. See Figure 3 , based on the preset evaluation indicators, determine the reward score of the second user interface target style parameter data, and perform a multi-dimensional quantitative evaluation. Then, continue to update the strategy based on the evaluation results. If it is positive feedback, high reward score actions, such as improving contrast, are added to the priority strategy library. If it is negative feedback, low reward score actions, such as using high-saturation red, will have a lower probability in future iterations. Iteratively calculate the reward score until the number of iterations reaches the preset number of iterations or the reward score converges, and obtain the adjusted user interface initial style parameter set, and output the user interface target style parameter data. In some examples, the preset maximum number of iterations reaches 50 times, or the standard deviation of the last 5 reward scores in the sliding window is less than 0.01, and the adjusted user interface initial style parameter set is obtained, and the user interface target style parameter data is output.

[0045] Through reinforcement learning and feedback mechanisms, the system can continuously optimize generation quality based on user preferences.

[0046] In some embodiments, determining the reward score of the second user interface target style parameter data based on preset evaluation indicators includes: calculating the corresponding scores of the preset evaluation indicators, wherein the preset evaluation indicators include style matching, design specification compliance, visual consistency assessment and innovation assessment; summing the scores according to preset weights to determine the reward score of the second user interface target style parameter data.

[0047] In a reinforcement learning environment, the system uses a multi-dimensional evaluation system to perform a refined scoring of the generated second user interface target style parameter data. First, scores are calculated for pre-set evaluation metrics, including style match, design specification compliance, visual consistency, and innovation. For style match, in some cases, the semantic similarity between the generated style and the user's original preferences is calculated. For example, a pre-trained visual-textual cross-modal model is used to compare the embedding vectors of the interface screenshots with the style keywords entered by the user. The degree of match is quantified using cosine similarity, and a standardized score is output. For design specification compliance, design system constraints are checked hierarchically. For example, corporate specifications are used to verify that the Design Token naming complies with the [category].[attribute].[level] naming system. For visual consistency, in some cases, a cross-component harmony analysis model can be established. For innovation evaluation, an adversarial evaluation mechanism can be used. Finally, a dynamic weighting strategy is used to adjust the weight distribution based on user type. For example, the total reward score = (0.4 × style match + 0.3 × specification compliance + 0.2 × visual consistency + 0.1 × innovation) × 100. For example, when the generation parameters meet the requirements of style matching 0.85, preference matching 0.9, normativeness 1.0, and innovation 0.4, the total reward is (0.85×0.4 +0.9×0.3 + 1.0×0.2 + 0.4×0.1)×100 = 85.

[0048] While ensuring design standardization, this process continuously outputs UI design solutions that satisfy user preferences and are visually innovative through reinforcement learning.

[0049] In some embodiments, generating a corresponding user interface style based on the user interface target style parameter data includes: converting the user interface target style parameter data through a parsing layer of a design system integration interface to obtain first intermediate data; mapping the first intermediate data to second intermediate data according to a predefined design markup specification; generating predefined platform style data based on the second intermediate data, and generating a corresponding user interface style that complies with the design markup specification according to the predefined platform style data and a user interface component library.

[0050] The parsing layer of the design system integration interface standardizes and parses the raw parameter data, ensuring the data format meets system requirements. Based on predefined style parameter mapping rules, the UI target style parameter data is converted into a structured intermediate representation, generating the first intermediate data. Based on the predefined Design Token specification, the first intermediate data is mapped to a variable naming scheme consistent with the enterprise design system. For example, if the design system uses the @ds / color-primary naming scheme, "color / primary": "purple-600" would be mapped to "@ds / color-primary": "var(--purple-600)". This step ensures that the generated style variables are consistent with the existing design system's variable structure, facilitating subsequent maintenance and theme switching. The final output is the second intermediate data, which fully complies with the design system's token specification and can be directly used for code generation. Based on the style specifications of the target platform (e.g., Web, iOS, or Android), the second intermediate data design tokens are converted into platform-specific style code, which is then output as predefined platform style data, which can be directly parsed by the corresponding platform's UI framework. Based on predefined platform style data and a UI component library, the final output is a UI style that complies with the Design Token specification, ensuring visual consistency and ready for direct product integration. Through the design system integration interface, the generated UI complies with the Design Token naming convention, facilitating seamless integration with the company's existing design system and reducing application costs.

[0051] In some embodiments, matching a basic style template from a preset style template library based on the theme preference includes: extracting the theme preference data features, converting the theme preference data features into a weight vector; calculating the similarity between the weight vector and the basic style template in the preset style template library, and matching with the basic style template with the highest similarity value.

[0052] See also Figure 3 , converting the user's selected theme preference, such as "technological + youthful + medium complexity", into a weight vector. Each basic style template pre-stores a feature vector, and calculates the similarity between the weight vector and the basic style templates in the preset style template library. The system retains all templates with a similarity above the threshold and sorts them in descending order of similarity. When there are multiple high-similarity templates, if there is an absolutely dominant template, such as a similarity difference greater than 0.2, the highest-scoring template is directly selected. Otherwise, the multi-template fusion process is entered, and parameter interpolation is performed based on the top three templates. During the matching process, the system will detect the matching quality of each dimension in real time. When the matching result of a dimension is significantly lower than that of other dimensions, for example, the color matching score is less than 0.5 while the other dimensions are greater than 0.8, the weight of the dimension will be automatically reduced and recalculated to ensure that the final matching result is optimal in the key dimension.

[0053] Through intelligent matching algorithms and reward evaluation systems, visual consistency is ensured when generating multiple UI components, reducing the workload of later adjustments.

[0054] In a second aspect, an embodiment of the present application provides a user interface style generation system that can generate personalized user interface styles based on user needs, thereby enhancing the richness and diversity of user interface styles.

[0055] like Figure 4 As shown, an embodiment of the present application further provides a system for generating a user interface style, comprising: Receiving unit 31, for receiving theme preferences and rule configurations input by a user; a matching unit 32, configured to match a basic style template from a preset style template library based on the theme preference; A conversion unit 33, configured to convert the visual features of the basic style template into a set of quantitatively controllable user interface initial style parameters; an adjusting unit 34 for adjusting the initial user interface style parameter set according to the rule configuration in a reinforcement learning environment, and outputting target user interface style parameter data; The generating unit 35 is configured to generate a corresponding user interface style according to the user interface target style parameter data.

[0056] The user interface style generation system provided in the embodiment of the present application receives the theme preferences and rule configurations input by the user; matches a basic style template from a preset style template library based on the theme preferences; converts the visual features of the basic style template into a quantitatively controllable user interface initial style parameter set; adjusts the user interface initial style parameter set according to the rule configuration in a reinforcement learning environment, and outputs user interface target style parameter data; and generates a corresponding user interface style based on the user interface target style parameter data. In this way, by converting the visual features of the basic style template into a quantitatively controllable user interface initial style parameter set, and adjusting the user interface initial style parameter set in combination with the user's rule configuration, the specific visual parameters of the generated user interface can be precisely controlled, and personalized user interface styles can be generated based on user needs, thereby enhancing the richness and diversity of user interface styles.

[0057] In some embodiments, the conversion unit includes: an extraction module, which is used to call the corresponding parser according to the type of user interface design elements to extract the qualitative description of the user interface design elements, where the user interface design elements include form, color, material, text, layout, scale and animation; a first mapping module, which is used to map the qualitative description to predefined parameters to obtain a set of user interface initial style parameters that can be quantitatively controlled.

[0058] In some embodiments, the adjustment unit includes: an encoding module for encoding the user interface initial style parameter set into an initial state based on the reinforcement learning environment; an adjustment module for adjusting the initial state parameters according to a preset strategy to obtain second user interface target style parameter data, wherein the preset strategy includes randomly selecting parameters or pre-training to determine parameters; a determination module for determining a reward score for the second user interface target style parameter data based on preset evaluation indicators; an output module for iteratively calculating the reward score until the number of iterations reaches a preset number of iterations or the reward score converges, thereby obtaining an adjusted user interface initial style parameter set and outputting the user interface target style parameter data.

[0059] In some embodiments, the determination module includes: a calculation submodule for calculating the corresponding scores of the preset evaluation indicators, wherein the preset evaluation indicators include style matching, design specification compliance, visual consistency assessment and innovation assessment; a determination submodule for summing the scores according to preset weights to determine the reward score of the second user interface target style parameter data.

[0060] In some embodiments, the generation unit includes: a first conversion module, used to convert the user interface target style parameter data through the parsing layer of the design system integration interface to obtain first intermediate data; a second mapping module, used to map the first intermediate data into second intermediate data according to a predefined design markup specification; a generation module, used to generate predefined platform style data based on the second intermediate data, and generate a corresponding user interface style that complies with the design markup specification according to the predefined platform style data and the user interface component library.

[0061] In some embodiments, the matching unit includes: a second conversion module for extracting the theme preference data features and converting the theme preference data features into a weight vector; a calculation module for calculating the similarity between the weight vector and the basic style template in the preset style template library, and matching with the basic style template with the highest similarity value.

[0062] On the third aspect, an embodiment of the present application further provides an electronic device that can generate personalized user interface styles based on user needs, thereby enhancing the richness and diversity of user interface styles.

[0063] like Figure 5 As shown, the electronic device provided in the embodiments of the present application may include: a memory 51 and a processor 52, wherein the memory 51 is used to store executable program code; the processor 52 runs the program corresponding to the executable program code by reading the executable program code stored in the memory 51, and is used to execute the user interface style generation method provided in any of the aforementioned embodiments.

[0064] The specific execution process of the above steps by the processor 52 and the steps further executed by the processor 52 by running the executable program code can be found in the description of the above embodiment and will not be repeated here.

[0065] Fourthly, an embodiment of the present application also provides a computer-readable storage medium, which stores one or more programs. The one or more programs can be executed by one or more processors to implement any user interface style generation method provided in the aforementioned embodiments, thereby also achieving the corresponding technical effects, which have been described in detail above and will not be repeated here.

[0066] It should be noted that, in this document, relational terms such as first and second, etc., are used only to distinguish one entity or operation from another entity or operation, and do not necessarily require or imply the existence of any such actual relationship or order between these entities or operations. Moreover, the terms "comprises," "comprising," or any other variants thereof are intended to cover non-exclusive inclusion, so that a process, method, article, or device comprising a series of elements includes not only those elements, but also other elements not explicitly listed, or elements inherent to such process, method, article, or device. In the absence of further limitations, an element defined by the phrase "comprising a ..." does not exclude the presence of other identical elements in the process, method, article, or device comprising the element.

[0067] Each embodiment in this specification is described in a related manner. The same or similar parts between the embodiments can be referred to each other. Each embodiment focuses on the differences from other embodiments.

[0068] In particular, for the device embodiment, since it is basically similar to the method embodiment, the description is relatively simple, and the relevant parts can be referred to the partial description of the method embodiment.

[0069] For the convenience of description, the above device is described as being divided into various units / modules based on their functions. Of course, when implementing this application, the functions of each unit / module can be implemented in the same or multiple software and / or hardware.

[0070] Those skilled in the art will appreciate that all or part of the processes in the above-described method embodiments can be implemented by instructing the relevant hardware through a computer program. The program can be stored in a computer-readable storage medium, and when executed, the program can include the processes in the above-described method embodiments. The storage medium can be a magnetic disk, an optical disk, a read-only memory (ROM), or a random access memory (RAM).

[0071] The above description is merely a specific embodiment of the present application, but the scope of protection of the present application is not limited thereto. Any changes or substitutions that can be easily conceived by a person skilled in the art within the technical scope disclosed in the present application should be included in the scope of protection of the present application. Therefore, the scope of protection of the present application should be based on the scope of protection of the claims.

Claims

1. A method for generating a user interface style, characterized in that: include: Receive user input for theme preferences and rule configuration; Matching a basic style template from a preset style template library based on the theme preference; Converting the visual features of the basic style template into a quantitatively controllable user interface initial style parameter set; In a reinforcement learning environment, adjusting the initial user interface style parameter set according to the rule configuration, and outputting user interface target style parameter data; Generate a corresponding user interface style according to the user interface target style parameter data.

2. The method for generating a user interface style according to claim 1, wherein: The converting the visual features of the basic style template into a quantitatively controllable user interface initial style parameter set includes: Calling the corresponding parser according to the user interface design element type to extract the qualitative description of the user interface design element, wherein the user interface design element includes form, color, material, text, layout, scale and motion effect; The qualitative description is mapped to predefined parameters to obtain a quantitatively controllable user interface initial style parameter set.

3. The method for generating a user interface style according to claim 1, wherein: In a reinforcement learning environment, adjusting the initial user interface style parameter set according to the rule configuration and outputting user interface target style parameter data includes: encoding the user interface initial style parameter set into an initial state based on the reinforcement learning environment; Adjusting the initial state parameters according to a preset strategy to obtain second user interface target style parameter data, wherein the preset strategy includes randomly selecting parameters or pre-training to determine parameters; Determining a reward score for the second user interface target style parameter data according to a preset evaluation indicator; The reward score is iteratively calculated until the number of iterations reaches a preset number of iterations or the reward score converges, an adjusted user interface initial style parameter set is obtained, and user interface target style parameter data is output.

4. The method for generating a user interface style according to claim 3, characterized in that: The step of determining the reward score of the second user interface target style parameter data according to the preset evaluation index includes: Calculating the corresponding scores of the preset evaluation indicators, wherein the preset evaluation indicators include style matching, design specification compliance, visual consistency evaluation, and innovation evaluation; The scores are summed according to preset weights to determine a reward score for the second user interface target style parameter data.

5. The method for generating a user interface style according to claim 1, wherein: Generating a corresponding user interface style according to the user interface target style parameter data includes: Converting the user interface target style parameter data through a parsing layer of the design system integration interface to obtain first intermediate data; mapping the first intermediate data into second intermediate data according to a predefined design notation specification; Predefined platform style data is generated based on the second intermediate data, and a corresponding user interface style that complies with a design markup specification is generated according to the predefined platform style data and a user interface component library.

6. The method for generating a user interface style according to claim 1, wherein: The matching of a basic style template from a preset style template library based on the theme preference includes: Extracting the subject preference data features and converting the subject preference data features into a weight vector; The similarity between the weight vector and the basic style templates in the preset style template library is calculated, and the basic style template with the highest similarity value is matched.

7. A user interface style generation system, characterized in that: include: A receiving unit, configured to receive a user input of a theme preference and a rule configuration; A matching unit, configured to match a basic style template from a preset style template library based on the theme preference; a conversion unit, configured to convert the visual features of the basic style template into a quantitatively controllable user interface initial style parameter set; an adjusting unit, configured to adjust the initial user interface style parameter set according to the rule configuration in a reinforcement learning environment, and output target user interface style parameter data; A generating unit is used to generate a corresponding user interface style according to the user interface target style parameter data.

8. The user interface style generation system according to claim 7, characterized in that: The conversion unit includes: An extraction module, configured to call a corresponding parser according to the user interface design element type to extract a qualitative description of the user interface design element, wherein the user interface design element includes form, color, material, text, layout, scale, and motion effect; The first mapping module is used to map the qualitative description to predefined parameters to obtain a quantitatively controllable user interface initial style parameter set.

9. The user interface style generation system according to claim 7, characterized in that: The adjustment unit includes: an encoding module, configured to encode the user interface initial style parameter set into an initial state based on the reinforcement learning environment; an adjustment module, configured to adjust the initial state parameters according to a preset strategy to obtain second user interface target style parameter data, wherein the preset strategy includes randomly selecting parameters or pre-training to determine parameters; a determination module, configured to determine a reward score for the second user interface target style parameter data based on a preset evaluation indicator; The output module is used to iteratively calculate the reward score until the number of iterations reaches a preset number of iterations or the reward score converges, obtain an adjusted user interface initial style parameter set, and output user interface target style parameter data.

10. The user interface style generation system according to claim 9, characterized in that: The determining module includes: A calculation submodule, configured to calculate scores corresponding to the preset evaluation indicators, wherein the preset evaluation indicators include style matching, design specification compliance, visual consistency evaluation, and innovation evaluation; A determination submodule is configured to sum the scores according to preset weights to determine a reward score for the second user interface target style parameter data.

Images