Interface image processing method, device and equipment and storage medium

Abstract

The application provides an interface image processing method and device, equipment and a storage medium, and relates to the technical field of image processing. The method comprises the following steps: acquiring interface image materials corresponding to a target application; the interface image materials comprise images of a plurality of interface elements in a preset interface in the target application and an interface layout image of the preset interface; generating a plurality of display styles of each of the plurality of interface elements according to input display configuration information and the images of the plurality of interface elements; and generating a target interface layout image of the target application according to the image of the interface layout and the plurality of display styles of each of the interface elements. Compared with the prior art, the application avoids the problems of high threshold and high cost of game interface layout.

Description

Technical Field

[0001] This application relates to the field of image processing technology, and more specifically, to an interface image processing method, apparatus, device, and storage medium. Background Technology

[0002] With the development of internet technology, games are playing an increasingly important role in people's lives, becoming a part of their leisure and entertainment. The scenes in games are also becoming richer and more closely related to people's lives.

[0003] The interface layout in a game is also an important part of game development and expansion. In the current technology, professional artists are generally required to manually lay out and design each interface of the game according to the game's appearance requirements and overall tone.

[0004] However, this method of generating game experience copy relies on human labor, and its generation effect and efficiency cannot be guaranteed, resulting in a high threshold and high cost for game interface layout. Summary of the Invention

[0005] The purpose of this application is to address the shortcomings of the prior art by providing an interface image processing method, apparatus, device, and storage medium to solve the problems of high barriers to entry and high costs in game interface layout in the prior art.

[0006] To achieve the above objectives, the technical solutions adopted in the embodiments of this application are as follows: In a first aspect, one embodiment of this application provides an interface image processing method, the method comprising: Obtain the interface image materials corresponding to the target application; the interface image materials include: images of multiple interface elements in the preset interface of the target application and the interface layout image of the preset interface; Based on the input display configuration information and the images of the multiple interface elements, generate multiple display styles for each of the multiple interface elements; Based on the image of the interface layout and the multiple display styles of each interface element, a target interface layout image of the target application is generated.

[0007] Secondly, another embodiment of this application provides an interface image processing apparatus, the apparatus comprising: Get the module and generate the module, where: The acquisition module is used to acquire interface image materials corresponding to the target application; the interface image materials include: images of multiple interface elements in a preset interface of the target application and the interface layout image of the preset interface; The generation module is used to generate multiple display styles for each of the multiple interface elements based on the input display configuration information and the images of the multiple interface elements; and to generate a target interface layout image for the target application based on the image of the interface layout and the multiple display styles of each of the interface elements.

[0008] Thirdly, another embodiment of this application provides an interface image processing device, including: a processor, a storage medium and a bus, wherein the storage medium stores machine-readable instructions executable by the processor, and when the interface image processing device is running, the processor communicates with the storage medium via the bus, and the processor executes the machine-readable instructions to perform the steps of any of the methods described in the first aspect above.

[0009] Fourthly, another embodiment of this application provides a storage medium storing a computer program, which, when executed by a processor, performs the steps of any of the methods described in the first aspect above.

[0010] The beneficial effects of this application are as follows: By using the interface image processing method provided in this application, after obtaining images of multiple interface elements corresponding to the target application and the interface layout image of the preset interface, multiple display styles are generated for each interface element based on the input display configuration information and the images of multiple interface elements. Furthermore, based on the interface layout image and the multiple display styles of each interface element, the target interface layout image of the target application is generated. This setting method eliminates the need for manual design and development of the interface element styles. Multiple display styles of each interface element can be generated directly based on the display configuration information and the images of multiple interface elements, thereby achieving low-cost and high-efficiency development of display styles for interface elements. Moreover, the above method eliminates the need for manual repetition of display style output and manual interface layout. The target interface layout image of the target application can be generated directly based on the display layout image and the display styles of each interface element, thereby reducing the generation cost of the target interface layout image. Attached Figure Description

[0011] To more clearly illustrate the technical solutions of the embodiments of this application, the accompanying drawings used in the embodiments will be briefly introduced below. It should be understood that the following drawings only show some embodiments of this application and should not be regarded as a limitation of the scope. For those skilled in the art, other related drawings can be obtained based on these drawings without creative effort.

[0012] Figure 1 A schematic flowchart of an interface image processing method provided in an embodiment of this application; Figure 2 A schematic flowchart of an interface image processing method provided in another embodiment of this application; Figure 3 A schematic flowchart of an interface image processing method provided in another embodiment of this application; Figure 4 This is a schematic diagram of the structure of an interface image processing apparatus provided in an embodiment of this application; Figure 5 This is a schematic diagram of the structure of an interface image processing apparatus provided in another embodiment of this application; Figure 6 This is a schematic diagram of the structure of an interface image processing device provided in an embodiment of this application. Detailed Implementation

[0013] To make the objectives, technical solutions, and advantages of the embodiments of this application clearer, the technical solutions of the embodiments of this application will be clearly and completely described below with reference to the accompanying drawings. Obviously, the described embodiments are some embodiments of this application, but not all embodiments.

[0014] The components of the embodiments of this application described and illustrated in the accompanying drawings can be arranged and designed in a variety of different configurations. Therefore, the following detailed description of the embodiments of this application provided in the drawings is not intended to limit the scope of the claimed application, but merely to illustrate selected embodiments of the application. All other embodiments obtained by those skilled in the art based on the embodiments of this application without inventive effort are within the scope of protection of this application.

[0015] In one embodiment of this application, the interface image processing method can run on a local terminal device or a server. When the interface image processing method runs on a server, the method can be implemented and executed based on a cloud interaction system, wherein the cloud interaction system includes a server and a client device.

[0016] In an optional implementation, various cloud applications, such as cloud gaming, can run under the cloud interaction system. Taking cloud gaming as an example, cloud gaming refers to a gaming method based on cloud computing. In the cloud gaming operating mode, the game program and the game screen presentation are separated. The storage and execution of the interface image processing methods are completed on the cloud gaming server. The client device is used for data reception, transmission, and game screen presentation. For example, the client device can be a display device with data transmission capabilities located close to the player, such as a mobile terminal, television, computer, or PDA; however, the information processing is performed by the cloud gaming server in the cloud. When playing the game, the player operates the client device to send operation commands to the cloud gaming server. The cloud gaming server runs the game according to the operation commands, encodes and compresses the game screen and other data, returns it to the client device via the network, and finally, the client device decodes and outputs the game screen.

[0017] In an optional implementation, taking a game as an example, the local terminal device stores the game program and is used to display the game screen. The local terminal device is used to interact with the player through a graphical user interface (GUI), i.e., conventionally by downloading, installing, and running the game program via an electronic device. The local terminal device can provide the GUI to the player in various ways, such as rendering it on the terminal's display screen or providing it to the player via holographic projection. For example, the local terminal device can include a display screen for displaying the GUI, which includes game screens, and a processor for running the game, generating the GUI, and controlling the display of the GUI on the display screen.

[0018] Furthermore, the flowcharts used in this application illustrate operations implemented according to some embodiments of this application. It should be understood that the operations in the flowcharts may not be implemented in sequence, and steps without logical contextual relationships may be reversed in order or performed simultaneously. Moreover, those skilled in the art, guided by the content of this application, may add one or more other operations to the flowcharts, or remove one or more operations from the flowcharts.

[0019] To facilitate understanding of the embodiments of this application, some terms involved in this application are explained below: Chat Generative Pre-trained Transformer (ChatGPT) can learn and understand human language and semantics through large amounts of training data. Chat-GPT can be used in applications such as automatic question answering, chatbots, text generation, and speech synthesis. It is a generative dialogue model that can automatically generate responses based on user input. The advantage of Chat-GPT is its ability to quickly generate large amounts of high-quality text, improving productivity and creativity.

[0020] AI-Generated Content (AIGC): Content generated using Artificial Intelligence (AI) technology. This content can take the form of text, images, video, or audio. AIGC can be used in applications such as automated question answering, chatbots, text generation, and speech synthesis. It is a model based on deep learning technology that can learn and understand human language and semantics through large amounts of training data. The advantage of AIGC is that it can quickly generate large amounts of high-quality content, improving productivity and creativity.

[0021] The following explanation, using several specific application examples, illustrates an interface image processing method provided in this application. Figure 1 This is a flowchart illustrating an interface image processing method provided in an embodiment of this application, as shown below. Figure 1 As shown, the method includes: S101: Obtain the interface image materials corresponding to the target application.

[0022] The interface image materials include: images of multiple interface elements in the preset interface of the target application and the interface layout image of the preset interface.

[0023] In some possible embodiments, the method of obtaining the images of each interface element can be, for example, performing edge detection on a preset interface to obtain images of multiple interface elements corresponding to the target application. This setting method can predetermine the range and form of the interface elements corresponding to the interface layout image, that is, the border outline of the interface elements is determined, so that when the display style of the interface elements is generated later, the display style within the border range of each interface element needs to be generated.

[0024] Edge detection methods can include hard edge detection, such as the hard edge detection function in the ControlNet plugin for AI-Generated Content (AIGC). This function is used to detect the edges of objects or scenes in images or videos. Edges are locations of grayscale or color changes in an image, often representing object boundaries or important features. Using hard edge detection helps users quickly and accurately detect edge information in images, providing richer visual analysis and processing capabilities, and facilitating various vision-related applications and research.

[0025] Hard edge detection uses specific algorithms and filters to find areas of high grayscale variation in an image and presents them as edges. It helps users extract the precise location of contours, boundaries, or objects when processing images.

[0026] It should be noted that in some possible embodiments, the interface layout image of the preset interface corresponding to the target application can be one or more, wherein the interface layout image of the preset interface is the interface image corresponding to the target application. The interface image includes multiple elements and the layout of each element. The interface image can be obtained by means of screenshot, or by the preset interface image uploaded by the user, or by the interface image downloaded from the network, etc. The specific method of obtaining the interface image can be flexibly adjusted according to the user's needs and is not limited to the above embodiments. The images of the interface elements are the images of elements with replaceable styles such as controls / borders / indicators in the interface layout images of each preset interface.

[0027] In some possible embodiments, after obtaining images of multiple interface elements of the target application, the images of the multiple interface elements can be integrated into one image, thereby reducing the amount of data consumed in subsequent processing.

[0028] S102: Based on the input display configuration information and images of multiple interface elements, generate multiple display styles for each of the multiple interface elements.

[0029] In the embodiments of this application, in order to ensure that multiple display styles can be adapted to the interface layout of the target application, the display configuration information also includes: style information, grayscale value information, image size and sampling method; that is, the way to generate multiple display styles is, for example, to generate multiple display styles for each interface element based on the input style information, grayscale value information, image size, sampling method and multiple interface element images.

[0030] The style information can be, for example, the style information of the desired display style, such as: animation style, retro style, cartoon style, anime style, oil painting style, realistic style, abstract style, etc.; the image size information can be, for example, a fixed value, or a range of values, or multiple fixed size values, which can be flexibly adjusted according to the user's needs and are not limited to those given in the above embodiments.

[0031] In some other possible embodiments, the display configuration information may also include a preset path, which is used to save the storage path of the generated multiple display styles, so as to store the multiple display styles of each interface element according to the preset storage path.

[0032] This setup allows the display configuration information to be configured in the settings, and then the image display style of each interface element can be generated based on the display configuration information and the images of multiple interface elements. This reduces the burden of manually adjusting parameters and achieves automatic and efficient generation of display styles. As a result, developers do not need to manually draw and develop the images of interface elements, which reduces the development cost of the display styles of interface elements and improves the efficiency of subsequent interface layout.

[0033] In the embodiments of this application, after the display configuration information is set, a preset AI script will generate multiple display styles corresponding to each interface element image in batches based on the display configuration information and multiple interface element images using an exhaustive algorithm.

[0034] This generation method significantly improves the efficiency of generating display styles for each interface element compared to adjusting each parameter of an interface element each time to obtain the corresponding display style, and reduces the waste of manpower.

[0035] S103: Generate the target interface layout image of the target application based on the interface layout image and multiple display styles of each interface element. In other words, in the embodiments of this application, the style of each interface element on the interface layout image can be adjusted by replacing each interface element on the interface layout image according to multiple display styles corresponding to each interface element, and the adjusted image can be determined as the target interface layout image.

[0036] In the embodiments of this application, in order to ensure the scalability of the target interface layout image, for example, the interface image material may also include reference weights corresponding to each image. In the process of generating the target interface image, for example, the target interface layout image of the target application can be generated based on the interface layout image, the reference weights corresponding to each image, and the display styles of multiple interface elements.

[0037] In some possible embodiments, the reference weights corresponding to each image may include, for example, the reference weights of the interface layout image and the reference weights of the interface layout image of the preset interface. The reference weights are determined within a preset range, such as between 0 and 2, depending on the user's needs. The higher the reference weight value, the closer the information in the final generated target interface layout image is to the image with the reference weight value. For example, if the reference weight of the interface layout image is high, the similarity between the final generated target interface layout image and the interface layout image is higher. It should be understood that the above embodiments are only illustrative examples, and the specific reference weights may also be within the range of 0-1 or 0-5, which can be flexibly adjusted according to the user's needs and are not limited to those given in the above embodiments.

[0038] The interface image processing method provided in this application can generate multiple display styles for each interface element after obtaining images of multiple interface elements corresponding to the target application and the interface layout image of the preset interface, based on the input display configuration information and the images of multiple interface elements. Furthermore, based on the interface layout image and the multiple display styles of each interface element, the target interface layout image of the target application can be generated. This approach eliminates the need for manual design and development of interface element styles. Multiple display styles for each interface element can be directly generated based on the display configuration information and the images of multiple interface elements, thus achieving low-cost and high-efficiency development of display styles for interface elements. Moreover, this method eliminates the need for manual repetition of display style output and manual interface layout. The target interface layout image of the target application can be directly generated based on the display layout image and the display styles of each interface element, thereby reducing the generation cost of the target interface layout image.

[0039] Optionally, based on the above embodiments, this application embodiment may also provide an interface image processing method, the implementation process of which will be illustrated below with reference to the accompanying drawings. Figure 2 A flowchart illustrating an interface image processing method provided in another embodiment of this application is shown below. Figure 2 As shown, before S102, the method may further include: S111: Input the target color theme information into the preset language processing module to obtain color configuration information.

[0040] Color configuration information includes multiple color information and the proportion of each color information.

[0041] In the embodiments of this application, the preset language processing module may be, for example, a Chat Generative Pre-trained Transformer (ChatGPT), or other processing modules with language processing capabilities. The specific language processing module can be flexibly adjusted according to user needs and is not limited to the embodiments described above.

[0042] This setup eliminates the need for developers with years of experience to design color configuration information. Anyone can obtain the color configuration information corresponding to the target color theme through the preset language processing module, reducing the manpower required to determine the color configuration information.

[0043] For example, a user can input the target color theme in the preset language processing module: "What color theme do you think would make players feel 'pastoral,' 'leisure,' or 'pacifist' in the game's interface?"

[0044] After receiving the message from the preset language module, "I believe that using light green, light yellow, light blue, and other serene and bright colors can evoke feelings of 'pastoral,' 'leisure,' and 'pacifism' in players. These colors give a relaxed, comfortable, and natural feeling, echoing the peaceful atmosphere of nature. In addition, these colors are not too glaring or oppressive, allowing players to relax and enjoy a pleasant gaming experience," users can continue to enter, "What percentage of these colors do you think should be used?"

[0045] The system retrieves the output from the preset language module: "The primary color should be light green, as green represents nature and balance, perfectly aligning with the themes of 'pastoral,' 'leisure,' and 'pacifism.' Light green can also be paired with other bright colors to create a more harmonious and comfortable visual effect. Light yellow and pale blue can be used as auxiliary colors to help green stand out, while also bringing a sense of warmth and relaxation. Overall, the primary color should be light green, with other colors used as auxiliary colors to create a harmonious, natural, and comfortable game interface."

[0046] After obtaining the information output by the preset language module, the user can extract keywords based on the information output by the preset language module using the preset keyword extraction module; or the user can manually filter and extract keywords based on the information output by the preset language module, and use the extracted keywords as color configuration information. For example, in the above information, keywords such as "light green as the main color", "light yellow and light blue as auxiliary colors", and "other bright colors as auxiliary colors" can be extracted; or, all the information output by the preset language module can be directly used as color configuration information. The specific method of determining color configuration information can be flexibly adjusted according to the user's needs and is not limited to the method given in the above embodiments.

[0047] Optionally, based on the above embodiments, this application embodiment may also provide an interface image processing method. The implementation process of generating a target interface layout image in the above method will be illustrated below with reference to the accompanying drawings. Figure 3 A flowchart illustrating an interface image processing method provided in another embodiment of this application is shown below. Figure 3 As shown, S103 may include: S121: Determine the target interface elements in the interface layout image.

[0048] In the embodiments of this application, the selected target interface element, i.e. the target interface element whose display style needs to be changed, can be determined in the interface layout image in response to the selection operation of multiple interface elements.

[0049] S122: In response to a selection operation among multiple display styles for a target interface element, determine the target display style corresponding to the target interface element.

[0050] In some possible embodiments, after a user selects a target interface element, the interface layout image displays only the target interface element in a preset display mode, which is different from other unselected interface elements. For example, the target interface element can be selected by a preset selection box. The preset selection box can be a rectangle adapted to the interface element. The size and style of the preset selection box may be different for different interface elements.

[0051] Alternatively, the border of the target interface element can be highlighted, or the border of the target interface element can be displayed in a preset color. The specific preset display method of the target interface element can be flexibly adjusted according to the user's needs and is not limited to the above embodiments. It is sufficient to display the target interface element in a way that is different from other interface elements.

[0052] In some possible implementations, for example, after a user selects a target interface element, the interface layout image may not display multiple display styles corresponding to the target interface element. The user can control the application of multiple display styles to the target interface element through a sliding operation (such as using the mouse wheel), allowing the user to browse the interface effects of each display style applied to the target interface element. Alternatively, after a user selects a target interface element, forward and back controls may be displayed around the target interface element (for example, a forward control is displayed on the left side of the target interface element as a left-pointing arrow, and a back control is displayed on the right side of the target interface element as a right-pointing arrow). The user can also click the forward and back controls to browse the interface effects of each display style applied to the target interface element.

[0053] Alternatively, after the user selects a target interface element, multiple display styles corresponding to the target interface element can be arranged and displayed directly below the target interface element on the interface layout image. For example, multiple display styles corresponding to the target interface element can be displayed in the form of a directory or a list. The user can determine the display style corresponding to the selection operation as the target display style by selecting from multiple display styles.

[0054] In some possible embodiments, if a user selects a target display style and is satisfied with its display effect, and wishes to confirm that the target display style is applied to the target interface element, a preset confirmation control can be used to confirm that the target display style is applied to the target interface element. Alternatively, the user can click on any position in the interface layout image other than the target interface element to trigger the exit from the configuration interface for the target interface element, and retain the display style of the target interface element when exiting the configuration interface as the target display style. The specific method of determining the application of the target display style to the target interface element can be flexibly adjusted according to the user's needs and is not limited to the embodiments described above.

[0055] S123: Adjust the display style of the target interface elements in the interface layout image to the target display style to generate the target interface layout image of the target application.

[0056] In the embodiments of this application, for example, the display style of each interface element in the interface layout image can be adjusted one by one, and the adjusted layout image can be determined as the target interface layout image of the target application.

[0057] This configuration allows the embodiments provided in this application to directly confirm the display style of each interface element in the interface layout image. In other words, the display style of each interface element can be returned to the interface layout image, allowing users to intuitively view the overall display effect of each interface element when applied to the target application in the interface layout image. This enables dynamic adjustment of the interface layout image, allowing users to easily and intuitively adjust the design style of the entire interface layout.

[0058] During the adjustment process, the entire design style can be observed from both macro and micro perspectives to see if it coordinates with the overall color scheme of the interface layout image and with the display style of other interface elements in the interface layout image. This allows for adjustments not only to the display style of each interface element from a micro perspective but also to provide a macro-level reference for how each interface element is applied in the interface layout image, thereby greatly improving the efficiency and final effect of the setup.

[0059] The interface image processing method provided in this application can determine multiple color information and the proportion information between each color information of the target application based on the target color theme of the target application. Subsequently, after obtaining the images of multiple interface elements corresponding to the target application and the interface layout image of the preset interface, multiple display styles are generated for each interface element based on the input display configuration information, multiple color information, the proportion information between each color information, and the images of multiple interface elements. Based on the interface layout image and the multiple display styles of each interface element, the display styles of each interface element in the interface layout image are adjusted, and the target interface layout image of the target application is generated based on the adjusted display styles of each interface element. This setting method eliminates the need for manual design and development of the interface element styles. Multiple display styles of each interface element can be generated directly based on the display configuration information and the images of multiple interface elements, thereby achieving low-cost and high-efficiency development of display styles for interface elements. Furthermore, the above method eliminates the need for manual repetition of display style output and manual interface layout. The target interface layout image of the target application can be generated directly based on the display layout image and the display styles of each interface element, thereby reducing the generation cost of the target interface layout image.

[0060] The interface image processing apparatus provided in this application will be explained and described below with reference to the accompanying drawings. This interface image processing apparatus can perform the above-described... Figures 1-3 The specific implementation and beneficial effects of any interface image processing method are described above and will not be repeated below.

[0061] Figure 4 This is a schematic diagram of the structure of an interface image processing device provided in an embodiment of this application, as shown below. Figure 4 As shown, the device includes: an acquisition module 201 and a generation module 202, wherein: The acquisition module 201 is used to acquire the interface image materials corresponding to the target application; the interface image materials include: images of multiple interface elements in the preset interface of the target application and the interface layout image of the preset interface; The generation module 202 is used to generate multiple display styles for each of the multiple interface elements based on the input display configuration information and images of multiple interface elements; and to generate a target interface layout image for the target application based on the interface layout image and the multiple display styles of each interface element.

[0062] Using the interface image processing apparatus provided in this application, after acquiring images of multiple interface elements corresponding to the target application and the interface layout image of the preset interface, multiple display styles are generated for each interface element based on the input display configuration information and the images of the multiple interface elements. Furthermore, based on the interface layout image and the multiple display styles of each interface element, the target interface layout image of the target application is generated. This approach eliminates the need for manual design and development of interface element styles. Multiple display styles for each interface element can be directly generated based on the display configuration information and the images of the multiple interface elements, thus achieving low-cost and high-efficiency development of display styles for interface elements. Moreover, this method eliminates the need for manual repetition of display style output and manual interface layout. The target interface layout image of the target application can be directly generated based on the display layout image and the display styles of each interface element, thereby reducing the generation cost of the target interface layout image.

[0063] Optionally, the display configuration information includes: color configuration information. The acquisition module 201 is specifically used to input the target color theme information into the preset language processing module to acquire the color configuration information; the color configuration information includes multiple color information and the proportion information between each color information.

[0064] Optionally, the interface image materials also include: reference weights corresponding to each image; the generation module 202 is specifically used to generate the target interface layout image of the target application based on the interface layout image, the reference weights corresponding to each image and the display styles of multiple interface elements.

[0065] Optionally, based on the above embodiments, this application embodiment may also provide an interface image processing device, as described below with reference to the accompanying drawings. Figure 4 The implementation process of the given device is illustrated with examples. Figure 5 This is a schematic diagram of the structure of an interface image processing device provided in another embodiment of this application, as shown below. Figure 5 As shown, the device also includes a detection module 203, used to perform edge detection on a preset interface to obtain images of multiple interface elements corresponding to the target application. Optionally, the acquisition module 201 is specifically used to determine the target interface element in the interface layout image; and in response to a selection operation among multiple display styles for the target interface element, to determine the target display style corresponding to the target interface element. The generation module 202 is specifically used to adjust the display style of the target interface elements in the interface layout image to the target display style, so as to generate the target interface layout image of the target application.

[0066] Optionally, the acquisition module 201 is specifically used to determine the target interface element in response to the selection operation of multiple interface elements in the interface layout image, and to display the target interface element in the interface layout image in a preset display mode.

[0067] Optionally, the generation module 202 is specifically used to generate multiple display styles for each interface element based on the input style information, grayscale value information, image size, sampling method, and multiple interface element images.

[0068] The above-described device is used to execute the method provided in the foregoing embodiments, and its implementation principle and technical effect are similar, so they will not be described again here.

[0069] These modules can be one or more integrated circuits configured to implement the above methods, such as one or more Application Specific Integrated Circuits (ASICs), one or more microprocessors, or one or more Field Programmable Gate Arrays (FPGAs). Alternatively, when a module is implemented using processing element scheduler code, the processing element can be a general-purpose processor, such as a Central Processing Unit (CPU) or other processor capable of calling program code. Furthermore, these modules can be integrated together as a system-on-a-chip (SOC).

[0070] Figure 6 This is a schematic diagram of the structure of an interface image processing device provided in an embodiment of this application. The interface image processing device can be integrated into a terminal device or a chip of a terminal device.

[0071] like Figure 6 As shown, the interface image processing device includes: a processor 501, a bus 502, and a storage medium 503.

[0072] Processor 501 is used to store programs, and processor 501 calls the programs stored in storage medium 503 to execute the above-mentioned programs. Figures 1-3 The corresponding method implementation example is specifically used to perform the following steps: Obtain the interface image materials corresponding to the target application; the interface image materials include: images of multiple interface elements in the preset interface of the target application and the interface layout image of the preset interface; Based on the input display configuration information and the images of the multiple interface elements, generate multiple display styles for each of the multiple interface elements; Based on the image of the interface layout and the multiple display styles of each interface element, a target interface layout image of the target application is generated.

[0073] Optionally, the processor 501 is configured to execute the display configuration information, which includes color configuration information. Before the step of generating multiple display styles for each of the multiple interface elements based on the input display configuration information and the images of the multiple interface elements, the processor 501 is further configured to execute the following steps: The target color theme information is input into the preset language processing module to obtain color configuration information; the color configuration information includes multiple color information and the proportion information between each color information.

[0074] Optionally, the interface image materials further include: reference weights corresponding to each image; when the processor 501 is used to execute the step of generating the target interface layout image of the target application based on the interface layout image and the display styles of the plurality of interface elements, it is also used to execute the following steps: Based on the image of the interface layout, the reference weights corresponding to each image, and the display styles of the multiple interface elements, a target interface layout image for the target application is generated.

[0075] Optionally, when the processor 501 performs the step of obtaining the interface image material corresponding to the target application, it is also used to perform the following steps: Edge detection is performed on the preset interface to obtain images of multiple interface elements corresponding to the target application.

[0076] Optionally, when the processor 501 performs the step of generating the target interface layout image of the target application based on the interface layout image and the display styles of the plurality of interface elements, it is also configured to perform the following steps: Determine the target interface elements in the interface layout image; In response to a selection operation among multiple display styles for the target interface element, a target display style corresponding to the target interface element is determined; In the interface layout image, the display style of the target interface elements is adjusted to the target display style to generate the target interface layout image of the target application.

[0077] Optionally, when the processor 501 performs the step of determining the target interface element in the interface layout image, it is also configured to perform the following steps: In response to a selection operation of multiple interface elements in the interface layout image, the target interface element is determined, and the target interface element is displayed in the interface layout image in a preset display mode.

[0078] Optionally, the processor 501 is used to execute the display configuration information, which further includes: style information, grayscale value information, image size, and sampling method. When generating multiple display styles for each of the multiple interface elements based on the input display configuration information and the images of the multiple interface elements, the processor 501 is also used to execute the following steps: Based on the input style information, grayscale value information, image size, sampling method, and the multiple interface element images, multiple display styles for each interface element are generated.

[0079] Using the interface image processing device provided in this application, after acquiring images of multiple interface elements corresponding to the target application and the interface layout image of the preset interface, multiple display styles are generated for each interface element based on the input display configuration information and the images of multiple interface elements. Furthermore, based on the interface layout image and the multiple display styles of each interface element, the target interface layout image of the target application is generated. This approach eliminates the need for manual design and development of interface element styles. Multiple display styles for each interface element can be directly generated based on the display configuration information and the images of multiple interface elements, thus achieving low-cost and high-efficiency development of display styles for interface elements. Moreover, this method eliminates the need for manual repetition of display style output and manual interface layout. The target interface layout image of the target application can be directly generated based on the display layout image and the display styles of each interface element, thereby reducing the generation cost of the target interface layout image.

[0080] Optionally, this application also provides a program product, such as a storage medium storing a computer program, including a program that, when run by a processor, executes the embodiments corresponding to the above-described methods, specifically for performing the following steps: Obtain the interface image materials corresponding to the target application; the interface image materials include: images of multiple interface elements in the preset interface of the target application and the interface layout image of the preset interface; Based on the input display configuration information and the images of the multiple interface elements, generate multiple display styles for each of the multiple interface elements; Based on the image of the interface layout and the multiple display styles of each interface element, a target interface layout image of the target application is generated.

[0081] Optionally, the processor is configured to execute the display configuration information, which includes color configuration information, and before the step of generating multiple display styles for each of the multiple interface elements based on the input display configuration information and the images of the multiple interface elements, it is further configured to execute the following steps: The target color theme information is input into the preset language processing module to obtain color configuration information; the color configuration information includes multiple color information and the proportion information between each color information.

[0082] Optionally, the interface image materials further include: reference weights corresponding to each image; when the processor performs the step of generating the target interface layout image of the target application based on the interface layout image and the display styles of the plurality of interface elements, it is also used to perform the following steps: Based on the image of the interface layout, the reference weights corresponding to each image, and the display styles of the multiple interface elements, a target interface layout image for the target application is generated.

[0083] Optionally, when the processor performs the step of obtaining the interface image material corresponding to the target application, it is also used to perform the following steps: Edge detection is performed on the preset interface to obtain images of multiple interface elements corresponding to the target application.

[0084] Optionally, when the processor performs the step of generating the target interface layout image of the target application based on the interface layout image and the display styles of the plurality of interface elements, it is further configured to perform the following steps: Determine the target interface elements in the interface layout image; In response to a selection operation among multiple display styles for the target interface element, a target display style corresponding to the target interface element is determined; In the interface layout image, the display style of the target interface elements is adjusted to the target display style to generate the target interface layout image of the target application.

[0085] Optionally, when the processor performs the step of determining the target interface element in the interface layout image, it is also configured to perform the following steps: In response to a selection operation of multiple interface elements in the interface layout image, the target interface element is determined, and the target interface element is displayed in the interface layout image in a preset display mode.

[0086] Optionally, the processor is used to execute the display configuration information, which further includes: style information, grayscale value information, image size, and sampling method. When generating multiple display styles for each of the multiple interface elements based on the input display configuration information and the images of the multiple interface elements, the processor is also used to execute the following steps: Based on the input style information, grayscale value information, image size, sampling method, and the multiple interface element images, multiple display styles for each interface element are generated.

[0087] Using the storage medium provided in this application, after obtaining images of multiple interface elements corresponding to the target application and the interface layout image of the preset interface, multiple display styles can be generated for each interface element based on the input display configuration information and the images of multiple interface elements. Furthermore, based on the interface layout image and the multiple display styles of each interface element, the target interface layout image of the target application can be generated. This approach eliminates the need for manual design and development of interface element styles. Multiple display styles for each interface element can be directly generated based on the display configuration information and the images of multiple interface elements, thus achieving low-cost and high-efficiency development of display styles for interface elements. Moreover, this method eliminates the need for manual repetition of display style output and manual interface layout. The target interface layout image of the target application can be directly generated based on the display layout image and the display styles of each interface element, thereby reducing the generation cost of the target interface layout image.

[0088] In the several embodiments provided in this application, it should be understood that the disclosed apparatus and methods can be implemented in other ways. For example, the apparatus embodiments described above are merely illustrative; for instance, the division of units is only a logical functional division, and in actual implementation, there may be other division methods. For example, multiple units or components may be combined or integrated into another system, or some features may be ignored or not executed. Furthermore, the coupling or direct coupling or communication connection shown or discussed may be through some interfaces; the indirect coupling or communication connection between apparatuses or units may be electrical, mechanical, or other forms.

[0089] The units described as separate components may or may not be physically separate. The components shown as units may or may not be physical units; that is, they may be located in one place or distributed across multiple network units. Some or all of the units can be selected to achieve the purpose of this embodiment according to actual needs.

[0090] Furthermore, the functional units in the various embodiments of this application can be integrated into one processing unit, or each unit can exist physically separately, or two or more units can be integrated into one unit. The integrated unit can be implemented in hardware or in the form of hardware plus software functional units.

[0091] The integrated units implemented as software functional units described above can be stored in a computer-readable storage medium. These software functional units, stored in a storage medium, include several instructions to cause a computer device (which may be a personal computer, server, or network device, etc.) or processor to execute some steps of the methods described in the various embodiments of this application. The aforementioned storage medium includes various media capable of storing program code, such as USB flash drives, portable hard drives, read-only memory (ROM), random access memory (RAM), magnetic disks, or optical disks.

Claims

1. A method for processing interface images, characterized in that, The method includes: Obtain the interface image materials corresponding to the target application; the interface image materials include: images of multiple interface elements in the preset interface of the target application and the interface layout image of the preset interface; The target color theme information is input into a preset language processing module to obtain color configuration information; the color configuration information includes multiple color information and the proportion information between each color information. Based on the input display configuration information and the images of the multiple interface elements, multiple display styles are generated for each of the multiple interface elements; the display configuration information includes: the color configuration information; Based on the image of the interface layout and the multiple display styles of each interface element, a target interface layout image of the target application is generated.

2. The method as described in claim 1, characterized in that, The interface image materials also include: reference weights corresponding to each image; The step of generating the target interface layout image of the target application based on the interface layout image and the display styles of the plurality of interface elements includes: Based on the image of the interface layout, the reference weights corresponding to each image, and the display styles of the multiple interface elements, a target interface layout image for the target application is generated.

3. The method as described in claim 1, characterized in that, The acquisition of interface image materials corresponding to the target application includes: Edge detection is performed on the preset interface to obtain images of multiple interface elements corresponding to the target application.

4. The method as described in claim 1, characterized in that, The step of generating the target interface layout image of the target application based on the interface layout image and the display styles of the plurality of interface elements includes: Determine the target interface elements in the interface layout image; In response to a selection operation among multiple display styles for the target interface element, a target display style corresponding to the target interface element is determined; In the interface layout image, the display style of the target interface elements is adjusted to the target display style to generate the target interface layout image of the target application.

5. The method as described in claim 4, characterized in that, Determining the target interface element in the interface layout image includes: In response to a selection operation of multiple interface elements in the interface layout image, the target interface element is determined, and the target interface element is displayed in the interface layout image in a preset display mode.

6. The method as described in claim 1, characterized in that, The display configuration information also includes: style information, grayscale value information, image size, and sampling method. The step of generating multiple display styles for each of the multiple interface elements based on the input display configuration information and the images of the multiple interface elements includes: Based on the input style information, grayscale value information, image size, sampling method, and the multiple interface element images, multiple display styles for each interface element are generated.

7. An interface image processing apparatus, characterized in that, The device includes: an acquisition module and a generation module, wherein: The acquisition module is used to acquire interface image materials corresponding to the target application; the interface image materials include: images of multiple interface elements in a preset interface of the target application and the interface layout image of the preset interface; The acquisition module is specifically used to input the target color theme information into the preset language processing module to obtain color configuration information; the color configuration information includes multiple color information and the proportion information between each color information. The generation module is used to generate multiple display styles for each of the multiple interface elements based on the input display configuration information and the images of the multiple interface elements; the display configuration information includes: the color configuration information; and to generate a target interface layout image for the target application based on the image of the interface layout and the multiple display styles of each of the interface elements.

8. An interface image processing device, characterized in that, The device includes a processor, a storage medium, and a bus. The storage medium stores machine-readable instructions executable by the processor. When the interface image processing device is running, the processor communicates with the storage medium via the bus, and the processor executes the machine-readable instructions to perform the method described in any one of claims 1-6.

9. A storage medium, characterized in that, The storage medium stores a computer program, which, when executed by a processor, performs the method described in any one of claims 1-6.

Images