CN117032686A

CN117032686A - UI editor, UI editing method, electronic apparatus, and computer-readable storage medium

Info

Publication number: CN117032686A
Application number: CN202310560059.5A
Authority: CN
Inventors: 黄晨升; 张晨露; 柴金祥
Original assignee: Shanghai Movu Technology Co Ltd; Mofa Shanghai Information Technology Co Ltd
Current assignee: Shanghai Movu Technology Co Ltd; Mofa Shanghai Information Technology Co Ltd
Priority date: 2023-05-17
Filing date: 2023-05-17
Publication date: 2023-11-10

Abstract

The application provides a UI editor, a UI editing method, an electronic device and a computer readable storage medium, wherein the UI editor is used for configuring a style of a user interface of a virtual object interactive application, and comprises the following components: the name configuration module is used for configuring the name of the virtual object interactive application; and the subtitle configuration module is used for starting or closing a subtitle display function of the virtual object interactive application and configuring a subtitle style when the subtitle display function is started. The UI editor specially aiming at the virtual object interactive application is provided, so that developers can better meet the configuration requirements of configuration personnel of the virtual object interactive application, the use experience and usability of the configuration personnel are improved, the development efficiency is improved, and errors are reduced.

Description

UI editor, UI editing method, electronic apparatus, and computer-readable storage medium

Technical Field

The application relates to the technical fields of virtual persons, interactive designs and artificial intelligence, in particular to a UI editor, a UI editing method, electronic equipment and a computer readable storage medium.

Background

The virtual objects include virtual humans, virtual animals, virtual cartoon figures, and the like. The virtual person is a personified image constructed by CG technology and operated in a code form, and has various interaction modes such as language communication, expression, action display and the like. The technology of the dummy person has been rapidly developed in the field of artificial intelligence and has been applied in many technical fields such as video, media, games, finance, travel, education, medical and so on.

Most of the existing UI editors are applicable to the traditional field and cannot well meet the client requirements of virtual object interactive application. Based on this, the present application provides a UI editor, a UI editing method, an electronic device, and a computer-readable storage medium to improve the prior art.

Disclosure of Invention

The application aims to provide a UI editor, a UI editing method, electronic equipment and a computer readable storage medium, which are specially used for virtual object interactive application, help developers to better meet the client requirements of the virtual object interactive application, improve the use experience and usability, improve the development efficiency and reduce errors.

The application adopts the following technical scheme:

in a first aspect, the present application provides a UI editor for configuring styles of a user interface of a virtual object interactive application, the UI editor comprising:

The name configuration module is used for configuring the name of the virtual object interactive application;

and the subtitle configuration module is used for starting or closing a subtitle display function of the virtual object interactive application and configuring a subtitle style when the subtitle display function is started.

The beneficial effect of this technical scheme lies in: the UI editor specially aiming at the virtual object interactive application (such as a virtual man APP, a virtual man applet, a virtual man computer client and the like) is provided, so that developers are helped to better meet the configuration requirements of configuration personnel of the virtual object interactive application, the use experience and usability of the configuration personnel are improved, the development efficiency is improved, and errors are reduced. The configurator is typically the customer's staff, whose work content includes the configuration user interface. The clients refer to clients of virtual object interactive application, typically B-end clients of enterprises, institutions, schools, hospitals and the like, and a small number of C-end clients; the user interface is typically the interface that a customer provides to his user, from which the user (of the customer) is made aware of relevant information that the customer wants to present to his user, such as enterprise history, enterprise culture, types of services and service offers that the enterprise can offer, office service guidelines, educational counseling courses, health life knowledge, etc.

Specifically, the UI editor includes a name configuration module and a subtitle configuration module, which enable a configurator to conveniently configure key parameters such as an application name and a subtitle style, which are desired to be displayed by a user interface (i.e., a foreground), through the UI editor (i.e., a background), which are very important for the foreground user interface, because they can enhance a user experience and improve usability and ease of use of the application. In addition, the technical scheme can enable developers to concentrate on the logic and function development of the application program rather than spending a great deal of time to help each customer write and adjust the UI interface, thereby reducing development cost and accelerating project delivery speed. When a configurator uses the UI editor to configure a user interface of the virtual object interactive application, styles and properties of UI elements (without requiring a developer to manually modify UI code), such as names, subtitle styles, etc., can be selected and configured through a simple background configuration interface. By using the UI editor, a configurator can quickly create and modify a user interface, so that the time and labor for manually writing and adjusting UI codes by a developer are reduced, and the development efficiency is improved. The UI editor can also reduce errors caused by human factors, because the background configuration interface of the UI editor is simple and easy to use, and the creation and modification processes of a plurality of UIs are automated, so that the opportunity of manually writing UI codes by developers is reduced, and development quality and development cost are improved.

In some possible implementations, the name configuration module includes a first text entry box;

the subtitle configuration module comprises a first radio frame, a subtitle configuration button and a subtitle style setting interface;

the first radio selection frame is used for starting or closing a subtitle display function;

the subtitle configuration button is displayed when a subtitle display function is started, and is used for displaying the subtitle style setting interface in a floating layer mode after being clicked;

the subtitle style setting interface is used for configuring a subtitle style when a subtitle display function is started, wherein the subtitle style comprises one or more of a font size, a font color, a background color, a Y-axis coordinate, an X-axis coordinate and a centering type, and the X-axis coordinate and the centering type are mutually exclusive.

The beneficial effect of this technical scheme lies in: the name configuration module comprises a text input box for configuring the name of the virtual object interactive application, and a configurator can input the required name in the text input box so as to configure the name for the virtual object interactive application. The single selection box in the caption configuration module is used for switching on or switching off the caption display function. When the configurator selects to turn on the subtitle display function, the subtitle configuration button is displayed. The configurator can click a subtitle configuration button, open a subtitle style setting interface, and configure the style of the subtitle. In the subtitle style setting interface, a configurator can set attributes such as font size, font color, background color, Y-axis coordinate, X-axis coordinate, centering type and the like of the subtitle, so that the subtitle style is customized. Therefore, a convenient and easy-to-use configuration mode is provided, and configuration personnel are allowed to quickly and easily configure the names and subtitle patterns of the virtual object interactive application; in addition, the UI editor is easy to understand and use, helps configuration personnel to understand and operate better, can improve user experience and satisfaction, and further facilitates use and popularization of virtual object interactive application. In some embodiments, the configurator can preview the subtitle style in real time in the subtitle style setting interface, so as to configure according to own requirements.

In some possible implementations, the UI editor further includes one or more of a LOGO configuration module, a screen clearing configuration module, and a template selection module;

the LOGO configuration module is used for starting or closing a LOGO display function of the virtual object interactive application and configuring the LOGO picture;

the screen clearing configuration module is used for starting or closing a side screen clearing switch display function of the virtual object interactive application and starting or closing a bottom screen clearing switch display function of the virtual object interactive application;

the template selection module is used for selecting one of a plurality of preset templates as a template of the user interface, and configuring the user interface based on configuration information corresponding to the template, wherein the configuration information comprises one or more of name configuration information, subtitle configuration information, LOGO configuration information and screen clearing configuration information.

The beneficial effect of this technical scheme lies in: the UI editor adds three new configuration modules, namely a LOGO configuration module, a screen clearing configuration module and a template selection module. The LOGO configuration module is used for starting or closing a LOGO display function of the virtual object interactive application and can configure LOGO pictures; after the LOGO display function is started, LOGO of the virtual object interactive application appears in the user interface so as to improve brand image and identifiability of the application; in addition, LOGO pictures can be customized according to actual requirements so as to meet the requirements of different clients. The screen clearing configuration module is used for starting or closing a side screen clearing switch display function and a bottom screen clearing switch display function of the virtual object interactive application; in the virtual object interactive application, a great deal of interactive information can be generated in the user interface, so that the interface is too complicated and complex to influence the user experience, and the screen clearing switch can help the user to clear the user interface, so that the user interface is more concise and easy to operate, and the user satisfaction degree and experience sense are improved. The template selection module allows a configurator to select one of a plurality of preset templates as a template of the user interface, and configures the user interface according to corresponding configuration information, the selection of the preset templates can save design and configuration time of the user interface, and meanwhile, attractive appearance and consistency of the user interface are guaranteed. The new configuration modules can further perfect the functions of the UI editor, improve the development efficiency and user experience, reduce the development cost, and the configuration personnel can rapidly design and configure a user interface suitable for own application scenes by using the configuration modules, so that the code maintenance operation of the developer is reduced, and the developer is more focused on the logic and function development of the virtual object interactive application. Meanwhile, the configurator can select different configuration templates according to own requirements, a user interface required by the configurator can be quickly created, and satisfaction of the configurator is improved.

In a second aspect, the present application provides a UI editing method for configuring a style of a user interface of a virtual object interactive application using any one of the UI editors described above, the UI editors including a name configuration module and a subtitle configuration module, the method comprising:

configuring the name of the virtual object interactive application by utilizing the name configuration module so that the user interface displays the name;

starting or closing a subtitle display function of the virtual object interactive application by utilizing the subtitle configuration module;

when the subtitle display function is started, configuring a subtitle style by utilizing the subtitle configuration module so that the user interface displays subtitles according to the subtitle style;

and when the subtitle display function is closed, controlling the user interface not to display the subtitle.

The beneficial effect of this technical scheme lies in: a UI editing method for configuring a user interface style of a virtual object interactive application is provided. The UI editor comprises a name configuration module and a subtitle configuration module, wherein the name configuration module can be used for configuring the name of the virtual object interactive application so as to be displayed on a user interface, and the subtitle configuration module can be used for starting or closing the subtitle display function of the virtual object interactive application. When the caption display function is turned on, the caption pattern may be configured using the caption configuration module to cause the user interface to display the caption according to the configured caption pattern. When the subtitle display function is turned off, the user interface will not display subtitles. Specifically, the name configuration module is used to configure the name of the virtual object interactive application first, and then the subtitle display function is turned on or off by using the subtitle configuration module. If the subtitle display function is turned on, the subtitle style may be configured using the subtitle configuration module. According to the configured names and subtitle styles, the user interface displays the names and subtitles of the virtual object interactive application accordingly. On one hand, the method can help configuration personnel to customize the user interface of the virtual object interactive application so as to enable the user interface to better meet the personalized requirements of different clients; on the other hand, the method is easier to be used and understood by a configurator, and the configurator can easily configure the user interface of the virtual object interactive application by using the method; in another aspect, the method can customize the subtitle style of the virtual object interactive application, so that the user interface is more attractive and easier to read, and the user experience is improved.

the configuring the name of the virtual object interactive application by using the name configuration module comprises the following steps:

and responding to the input operation of the first text input box, and taking the first text input by the configurator as the name of the virtual object interactive application.

The beneficial effect of this technical scheme lies in: the configurator may enter a desired name in the first text entry box, which will be displayed on the user interface. This has the advantage that the customizability and flexibility of the virtual object interactive application is improved. Because the name of the virtual object interactive application can be changed according to the requirement, the virtual object interactive application can be more in line with the requirement of a specific application scene. In addition, the name can be more conveniently configured by using the first text input box in the UI editor to input the name, so that the tedious process of manually changing codes is avoided.

In some possible implementations, the caption configuration module includes a first radio box, a caption configuration button, and a caption style setup interface provided with a second text input box, a first color selector, a second color selector, a third text input box, and a slide switch button;

The subtitle display function of the virtual object interactive application is started or closed by utilizing the subtitle configuration module, which comprises the following steps:

responding to the selection operation of the first single selection frame, and starting or closing a caption display function;

the process of configuring the caption style by using the caption configuration module comprises the following steps:

displaying the caption configuration button when a caption display function is started;

responding to clicking operation of the subtitle configuration button, and displaying the subtitle style setting interface in a floating layer form;

responding to the input operation of the second text input box, acquiring font size information corresponding to a second text input by a configurator so as to configure the font size;

acquiring font color information corresponding to a first color selected by a configurator in response to a selection operation for the first color selector so as to configure a font color;

acquiring background color information corresponding to a second color selected by a configurator in response to a selection operation for the second color selector so as to configure a background color;

responding to the input operation of the third text input box, and acquiring Y-axis coordinate information corresponding to the third text input by a configurator so as to configure Y-axis coordinates;

And responding to clicking operation of the sliding switch button, and switching whether the current centering state is in order to configure the centering type.

The beneficial effect of this technical scheme lies in: the subtitle display function is turned on or off by a selection operation in response to the first radio frame. When the subtitle display function is turned on, a subtitle configuration button is displayed on the user interface to provide an entry for accessing the subtitle style setup interface. And setting various style information of the subtitles on a subtitle style setting interface in a floating layer form by a configurator. Specifically, in response to an input operation of the second text input box, font size information corresponding to the second text input by the configurator is acquired to configure the font size. And responding to the selection operation of the first color selector and the second color selector, acquiring font color information and background color information selected by a configurator so as to configure the color of the subtitle. And responding to the input operation of the third text input box, and acquiring Y-axis coordinate information corresponding to the third text input by the configurator so as to configure the position of the caption on the user interface. And responding to the clicking operation of the sliding switch button, the centering state of the caption can be switched so as to adapt to different user interfaces. Through the configuration operations, the subtitle style can flexibly adapt to different client requirements, better user experience is provided, and the usability and accessibility of the application are enhanced.

In some possible implementations, the UI editor further includes a LOGO configuration module including a second radio frame and a picture upload control;

the method further comprises the steps of:

responding to the selection operation of the second single selection frame, and starting or closing a LOGO display function of the virtual object interactive application;

responding to clicking operation for the picture uploading control, opening a local folder, and uploading a target picture selected by a configurator to a target storage position;

and determining a LOGO picture based on the target picture, so that the user interface displays the LOGO picture.

The beneficial effect of this technical scheme lies in: the UI editor includes a LOGO configuration module that includes a second radio and a picture upload control. By selecting the second radio frame, the configurator can turn on or off the LOGO display function of the virtual object interactive application. By clicking the picture upload control, the local folder is opened and the configurator can select the target picture and upload it to the target storage location. And then, determining the LOGO picture according to the selected target picture so that the user interface displays the LOGO picture. In this way, a configurator can easily upload and set a LOGO picture without having to go deep into the code or use other tools, which can improve configuration efficiency and reduce errors. In addition, the LOGO display function is started, so that the virtual object interactive application has brand features and recognizability, and the front-end user experience and the user satisfaction are enhanced.

In some possible implementations, the determining a LOGO picture based on the target picture includes:

inputting the font color information, the background color information and the target picture into a color verification model to detect whether the color of the target picture is matched with the subtitle color;

when the color of the target picture is matched with the subtitle color, taking the target picture as the LOGO picture;

the method further comprises the steps of:

when the color of the target picture is not matched with the color of the subtitle, generating prompt information and displaying the prompt information in a popup window mode, wherein the prompt information is used for prompting the configurator that the color is not matched.

The beneficial effect of this technical scheme lies in: in order to make the LOGO picture more adapted to the overall style of the user interface, a color verification model is used to detect whether the color of the target picture is adapted to the subtitle color. If the color of the target picture is matched with the subtitle color, the target picture is taken as a LOGO picture, otherwise, prompt information is generated and displayed in a popup window mode. Specifically, font color information, background color information and a target picture are input into a color verification model, the verification model is a trained deep learning model, a judging result of whether the color of the target picture is matched with the subtitle color can be output, if so, the color of the target picture accords with the integral style of a user interface, and the target picture can be used as a LOGO picture; if the color of the target picture does not match with the whole style of the user interface, generating prompt information to prompt the configurator that the color is not matched, and reselecting the picture or adjusting the font color and the background color is needed. By the method, the LOGO picture can be ensured to be consistent with the overall style of the user interface, so that the virtual object interactive application has better user experience and visual effect.

In some possible implementations, the training process of the color verification model includes:

acquiring a training set, wherein the training set comprises a plurality of training data, each training data comprises sample font color information, sample background color information, sample pictures and labeling data of color verification results, and the color verification results are used for indicating whether the colors of the sample pictures are matched with the colors of sample subtitles;

for each training data in the training set, performing the following processing:

inputting sample font color information, sample background color information and sample pictures in the training data into a preset deep learning model to obtain prediction data of the color verification result;

updating model parameters of the deep learning model based on the prediction data and the labeling data of the color verification result;

detecting whether a preset training ending condition is met; if yes, taking the trained deep learning model as the color verification model; if not, continuing to train the deep learning model by using the next training data.

The beneficial effect of this technical scheme lies in: the color verification model is used for detecting whether the color of the target picture is matched with the subtitle color, and the training process comprises the following steps: acquiring a training set, wherein the training set consists of a plurality of training data, and each training data comprises sample font color information, sample background color information, sample pictures and labeling data of color verification results; inputting the corresponding sample font color information, sample background color information and sample pictures of each training data into a preset deep learning model to obtain prediction data of a color verification result, comparing the prediction data with labeling data, and then adjusting parameters of the deep learning model according to errors; and detecting whether a preset training ending condition is met, if so, taking the trained deep learning model as a color verification model, and if not, continuing training the model by using the next training data. The training process uses training data to train the deep learning model, and model parameters are continuously adjusted until preset training ending conditions are met. By means of the method, an accurate color verification model can be trained and used for detecting whether the color of the target picture is matched or not, the color verification model can automatically judge whether the color of the target picture is matched with the color of the subtitle or not, inaccuracy and time consumption of manual judgment are avoided, meanwhile, the color verification model trained by using the deep learning model is high in accuracy, and user experience and using effect of virtual object interactive application can be improved.

In some possible implementations, the LOGO configuration module further includes a one-touch colored button;

the method further comprises the steps of:

when the color of the target picture is not matched with the subtitle color, displaying the one-key coloring button;

acquiring recommended color information adapted to a subtitle color based on the font color information and the background color information in response to a click operation for the one-touch colored button;

and coloring the target picture by using the recommended color information to obtain the LOGO picture.

The beneficial effect of this technical scheme lies in: the LOGO configuration module is provided with a one-key coloring button for solving the problem when the color of the target picture is not matched with the subtitle color. When the color verification model detects that the color of the target picture is not matched with the subtitle color, the background configuration interface displays a one-key coloring button, a configurator can click the one-key coloring button to obtain recommended color information matched with the subtitle color, and color processing is carried out on the target picture by utilizing the recommended color information so as to obtain a LOGO picture conforming to the subtitle color, wherein the recommended color information is calculated through a trained color matching model. The LOGO picture coloring method has the advantages that configuration personnel can easily color the LOGO picture, the problem that LOGO display is not attractive and is not adaptive due to color mismatch is avoided, the quality and consistency of the LOGO picture are improved, and meanwhile workload of the configuration personnel and possibility of errors are reduced.

In some possible implementations, the UI editor further includes a template selection module that includes a select template button;

the method further comprises the steps of:

responding to clicking operation for the selected template button, displaying a template center interface, wherein the template center interface comprises a plurality of picture buttons corresponding to preset templates, and each picture button comprises a picture which is a UI thumbnail of the corresponding preset template;

responding to clicking operation for one of the picture buttons, and taking a preset template corresponding to the clicked picture button as a template of the user interface;

and configuring the user interface based on configuration information corresponding to the template, wherein the configuration information comprises one or more of name configuration information, subtitle configuration information, LOGO configuration information and screen clearing configuration information.

The beneficial effect of this technical scheme lies in: the template selection module is used for facilitating a configurator to quickly create a user interface meeting requirements. The configurator can click the select template button to open the template center interface, then select one of the plurality of preset templates, and apply the preset template to the user interface of the virtual object interactive application. The preset templates are designed and configured with information such as names, subtitles, LOGO, screen cleaning and the like in advance, and configuration personnel only need to perform further configuration on the basis of the templates. The template selection module provides a simple, quick and visual way for configurators to create the user interface, the configurators can easily create the user interface wanted by themselves without designing and configuring each detail from the beginning, the working efficiency and experience of the configurators are greatly improved, and the time and cost are saved. In addition, the consistency and stability of the user interface can be ensured by using the template, so that the possibility of errors is reduced.

In a third aspect, the present application provides an electronic device for configuring a style of a user interface of a virtual object interactive application using any one of the UI editors described above, the UI editors comprising a name configuration module and a subtitle configuration module, the electronic device comprising a memory and at least one processor, the memory storing a computer program, the at least one processor being configured to implement the following steps when executing the computer program:

In a fourth aspect, the present application provides a computer-readable storage medium storing a computer program which, when executed by at least one processor, performs the steps of any of the methods described above or performs the functions of the electronic device described above.

Drawings

The application will be further described with reference to the drawings and embodiments.

Fig. 1 is a schematic structural diagram of a UI editor according to an embodiment of the present application.

Fig. 2 is a flow chart of a UI editing method according to an embodiment of the present application.

Fig. 3 is a schematic flow chart of configuring a subtitle style according to an embodiment of the present application.

Fig. 4 is a flowchart of a method for configuring a LOGO image according to an embodiment of the present application.

Fig. 5 is a flowchart of another method for configuring a LOGO image according to an embodiment of the present application.

Fig. 6 is a schematic flow chart of configuring a user interface based on a template according to an embodiment of the present application.

Fig. 7 is a block diagram of an electronic device according to an embodiment of the present application.

Fig. 8 is a schematic structural diagram of a program product according to an embodiment of the present application.

Detailed Description

The technical scheme of the present application will be described below with reference to the drawings and the specific embodiments of the present application, and it should be noted that, on the premise of no conflict, new embodiments may be formed by any combination of the embodiments or technical features described below.

In embodiments of the application, words such as "exemplary" or "such as" are used to mean serving as an example, instance, or illustration. Any implementation or design described as "exemplary" or "e.g." in the examples of this application should not be construed as preferred or advantageous over other implementations or designs. Rather, the use of words such as "exemplary" or "such as" is intended to present related concepts in a concrete fashion.

The technical field and related terms of the embodiments of the present application are briefly described below.

The virtual objects include virtual humans, virtual animals, virtual cartoon figures, and the like. The virtual person is a personified image constructed by CG technology and operated in a code form, and has various interaction modes such as language communication, expression, action display and the like. The technology of virtual persons has been rapidly developed in the field of artificial intelligence and has been applied in many technical fields such as video, media, games, finance, travel, education, medical treatment, etc., and not only can a virtual host, a virtual anchor, a virtual even image, a virtual customer service, a virtual lawyer, a virtual financial advisor, a virtual teacher, a virtual doctor, a virtual instructor, a virtual assistant, etc. be customized, but also a video can be generated through text or audio one-key. In the virtual people, the service type virtual people mainly have the functions of replacing real people to serve and provide daily accompaniment, are the virtualization of service type roles in reality, and have the industrial value of mainly reducing the cost of the existing service type industry and enhancing the cost reduction of the stock market.

Artificial intelligence (Artificial Intelligence, AI) is the theory, method, technique and application system that uses a digital computer or a machine controlled by a digital computer to simulate, extend and extend human intelligence, sense the environment, acquire knowledge and use the knowledge to obtain optimal results. In other words, artificial intelligence is an integrated technology of computer science that attempts to understand the essence of intelligence and to produce a new intelligent machine that can react in a similar way to human intelligence. The design principle and the implementation method of various intelligent machines are researched by artificial intelligence, so that the machines have the functions of perception, reasoning and decision. The artificial intelligence technology is a comprehensive subject, and relates to the technology with wide fields, namely the technology with a hardware level and the technology with a software level. Artificial intelligence infrastructure technologies generally include technologies such as sensors, dedicated artificial intelligence chips, cloud computing, distributed storage, big data processing technologies, operation/interaction systems, mechatronics, and the like. The artificial intelligence software technology mainly comprises a computer vision technology, a voice processing technology, a natural language processing technology, machine learning/deep learning, automatic driving, intelligent traffic and other directions.

Machine Learning (ML) is a multi-domain interdisciplinary, involving multiple disciplines such as probability theory, statistics, approximation theory, convex analysis, algorithm complexity theory, etc. The computer program may learn experience E given a certain class of tasks T and performance metrics P, and increase with experience E if its performance in task T happens to be measured by P. Machine learning is specialized in studying how a computer simulates or implements learning behavior of a human to acquire new knowledge or skills, reorganizing existing knowledge structures to continually improve its own performance. Machine learning is the core of artificial intelligence, a fundamental approach to letting computers have intelligence, which is applied throughout various areas of artificial intelligence.

Deep learning is a special machine learning by which the world is represented using a hierarchy of nested concepts, each defined as being associated with a simple concept, and achieving great functionality and flexibility, while a more abstract representation is computed in a less abstract way. Machine learning and deep learning typically include techniques such as artificial neural networks, belief networks, reinforcement learning, transfer learning, induction learning, teaching learning, and the like.

The virtual object interaction application is used for providing virtual object interaction functions. The virtual human interactive application may simulate human communication and behavior and interact with the user. Such software (referred to as virtual human interactive applications) is typically driven by artificial intelligence and natural language processing techniques and is capable of interacting with a user by means of text, speech or images, etc.

The UI full name User Interface refers to an Interface used when a User interacts with software, an application program, a website, or the like.

The scheme provided by the embodiment of the application relates to technologies such as virtual man, interactive design, artificial intelligence, 3D modeling, cloud computing and the like, and is specifically described by the following embodiment. The following description of the embodiments is not intended to limit the preferred embodiments.

(UI editor)

Referring to fig. 1, fig. 1 is a schematic structural diagram of a UI editor according to an embodiment of the present application.

The embodiment of the application provides a UI editor for configuring the style of a user interface of a virtual object interactive application, comprising:

In the embodiment of the application, the name configuration module and the subtitle configuration module can be provided with a name configuration interface and a subtitle configuration interface which are independent; or the name configuration module and the subtitle configuration module can also adopt an integrated configuration interface, so that a configurator can realize the functions of name configuration and subtitle configuration through the same configuration interface.

The user interface may include, for example, one or more of a mobile-side user interface (including a cell-side user interface, a tablet-side user interface), a web-page user interface, and a computer-client user interface.

Style of a user interface refers to a set of attributes that determine the overall appearance and style of the user interface, including color, font, size, spacing, borders, background, icons, etc. The style of the user interface may directly affect the first impression of the user to the client, so selection and use of the style is very important in UI design. The style of the user interface includes not only the style of a single UI element, but also layout, typesetting, theme, color, and the like of the entire user interface. Different customers have different style requirements, so that a configurator needs to select an appropriate style to shape the unique style and brand image of the user interface according to the self-family characteristics. As one example, a good user interface style may not only make products or services offered by an enterprise more aesthetically pleasing, easy to use, and easy to understand, but may also improve user experience and user satisfaction with the enterprise.

In an embodiment of the present application, the virtual object includes one or more of a virtual person, a virtual animal, and a virtual cartoon character. As one example, the virtual object is a virtual person "JING" (chinese name: mirror). As one example, the name of the virtual object interactive application is "company a_jing".

Therefore, the UI editor specially aiming at the virtual object interactive application (such as a virtual man APP, a virtual man applet, a virtual man computer client and the like) is provided, so that developers are helped to better meet the configuration requirements of configuration personnel of the virtual object interactive application, the use experience and usability of the configuration personnel are improved, the development efficiency is improved, and errors are reduced. The configurator is typically the customer's staff, whose work content includes the configuration user interface. The clients refer to clients of virtual object interactive application, typically B-end clients of enterprises, institutions, schools, hospitals and the like, and a small number of C-end clients; the user interface is typically the interface that a customer provides to his user, from which the user (of the customer) is made aware of relevant information that the customer wants to present to his user, such as enterprise history, enterprise culture, types of services and service offers that the enterprise can offer, office service guidelines, educational counseling courses, health life knowledge, etc.

In some embodiments, the name configuration module includes a first text entry box;

As one example, the first radio box is provided with 2 options, "use subtitle" and "do not use subtitle", respectively.

As one example, the subtitle configuration button displays text that is "configure subtitle style".

As one example, the subtitle style setup interface is displayed in the form of an opaque floating layer. As another example, the subtitle style setup interface is displayed in the form of a new interface.

The X-axis coordinate and the centering type are mutually exclusive, namely in a subtitle style setting interface, if a user selects to set the X-axis coordinate of a subtitle, the centering type cannot be selected at the same time; if the user chooses to set the centered type of the subtitle, the X-axis coordinates cannot be set at the same time. This is because the X-axis coordinates of the subtitles are used to control the position of the subtitles in the horizontal direction, while the centering type is to center the subtitles in alignment, both of which are contradictory. Therefore, in the subtitle style setting interface, the X-axis coordinates and the center type are mutually exclusive. The Y-axis coordinates are used to control the position of the subtitle in the vertical direction.

Thus, the name configuration module comprises a text input box for configuring the name of the virtual object interactive application, and a configurator can input the required name in the text input box, so as to configure the name for the virtual object interactive application. The single selection box in the caption configuration module is used for switching on or switching off the caption display function. When the configurator selects to turn on the subtitle display function, the subtitle configuration button is displayed. The configurator can click a subtitle configuration button, open a subtitle style setting interface, and configure the style of the subtitle. In the subtitle style setting interface, a configurator can set attributes such as font size, font color, background color, Y-axis coordinate, X-axis coordinate, centering type and the like of the subtitle, so that the subtitle style is customized. Therefore, a convenient and easy-to-use configuration mode is provided, and configuration personnel are allowed to quickly and easily configure the names and subtitle patterns of the virtual object interactive application; in addition, the UI editor is easy to understand and use, helps configuration personnel to understand and operate better, can improve user experience and satisfaction, and further facilitates use and popularization of virtual object interactive application. In some embodiments, the configurator can preview the subtitle style in real time in the subtitle style setting interface, so as to configure according to own requirements.

In some embodiments, the UI editor further comprises one or more of a LOGO configuration module, a screen clearing configuration module, and a template selection module;

Thus, the UI editor adds three new configuration modules, namely a LOGO configuration module, a screen clearing configuration module and a template selection module.

The LOGO configuration module is used for starting or closing a LOGO display function of the virtual object interactive application and can configure LOGO pictures; after the LOGO display function is started, LOGO of the virtual object interactive application appears in the user interface so as to improve brand image and identifiability of the application; in addition, LOGO pictures can be customized according to actual requirements so as to meet the requirements of different clients.

The screen clearing configuration module is used for starting or closing a side screen clearing switch display function and a bottom screen clearing switch display function of the virtual object interactive application; in the virtual object interactive application, a great deal of interactive information can be generated in the user interface, so that the interface is too complicated and complex to influence the user experience, and the screen clearing switch can help the user to clear the user interface, so that the user interface is more concise and easy to operate, and the user satisfaction degree and experience sense are improved.

The template selection module allows a configurator to select one of a plurality of preset templates as a template of the user interface, and configures the user interface according to corresponding configuration information, the selection of the preset templates can save design and configuration time of the user interface, and meanwhile, attractive appearance and consistency of the user interface are guaranteed. The new configuration modules can further perfect the functions of the UI editor, improve the development efficiency and user experience, reduce the development cost, and the configuration personnel can rapidly design and configure a user interface suitable for own application scenes by using the configuration modules, so that the code maintenance operation of the developer is reduced, and the developer is more focused on the logic and function development of the virtual object interactive application. Meanwhile, the configurator can select different configuration templates according to own requirements, a user interface required by the configurator can be quickly created, and satisfaction of the configurator is improved.

With continued reference to fig. 1, in a specific application scenario, the embodiment of the present application further provides a UI editor for configuring a style of a user interface of a virtual object interactive application, where the UI editor includes:

the name configuration module is used for configuring the name of the virtual object interactive application; the name configuration module comprises a first text input box;

the subtitle configuration module is used for starting or closing a subtitle display function of the virtual object interactive application and configuring a subtitle style when the subtitle display function is started; the subtitle configuration module comprises a first radio frame, a subtitle configuration button and a subtitle style setting interface; the first radio selection frame is used for starting or closing a subtitle display function; the subtitle configuration button is displayed when a subtitle display function is started, and is used for displaying the subtitle style setting interface in a floating layer mode after being clicked; the subtitle style setting interface is used for configuring a subtitle style when a subtitle display function is started, wherein the subtitle style comprises one or more of a font size, a font color, a background color, a Y-axis coordinate, an X-axis coordinate and a centering type, and the X-axis coordinate and the centering type are mutually exclusive;

The LOGO configuration module is used for starting or closing LOGO display functions of the virtual object interactive application and configuring the LOGO picture;

the template selection module is used for selecting one of a plurality of preset templates as the template of the user interface and configuring the user interface based on configuration information corresponding to the template, wherein the configuration information comprises one or more of name configuration information, subtitle configuration information, LOGO configuration information and screen clearing configuration information.

(UI editing method)

Referring to fig. 2, fig. 2 is a flow chart of a UI editing method according to an embodiment of the present application.

The embodiment of the application provides a UI editing method, which is used for configuring the style of a user interface of a virtual object interactive application by utilizing any UI editor, wherein the UI editor comprises a name configuration module and a subtitle configuration module, and the method comprises the following steps:

Step S101: configuring the name of the virtual object interactive application by utilizing the name configuration module so that the user interface displays the name;

step S102: starting or closing a subtitle display function of the virtual object interactive application by utilizing the subtitle configuration module;

step S103: when the subtitle display function is started, configuring a subtitle style by utilizing the subtitle configuration module so that the user interface displays subtitles according to the subtitle style;

step S104: and when the subtitle display function is closed, controlling the user interface not to display the subtitle.

The UI editing method can be operated on the electronic equipment, the electronic equipment and the terminal equipment used by the configurator can be independent, and the electronic equipment and the terminal equipment can be combined into a whole. When the electronic device and the terminal device are independent, the electronic device may be a computer, a server, or the like having computing power. The terminal device used by the configurator is not limited in the embodiment of the application, and can be, for example, an intelligent terminal device with a display screen, such as a mobile phone, a tablet computer, a notebook computer, a desktop computer, an intelligent wearable device, or the terminal device can be a workstation or a console with a display screen. The display screen may be a touch display screen or a non-touch display screen, and is configured to display one or more configuration interfaces corresponding to the UI editor.

Thus, a UI editing method is provided for configuring a user interface style of a virtual object interactive application. The UI editor comprises a name configuration module and a subtitle configuration module, wherein the name configuration module can be used for configuring the name of the virtual object interactive application so as to be displayed on a user interface, and the subtitle configuration module can be used for starting or closing the subtitle display function of the virtual object interactive application. When the caption display function is turned on, the caption pattern may be configured using the caption configuration module to cause the user interface to display the caption according to the configured caption pattern. When the subtitle display function is turned off, the user interface will not display subtitles.

Specifically, the name configuration module is used to configure the name of the virtual object interactive application first, and then the subtitle display function is turned on or off by using the subtitle configuration module. If the subtitle display function is turned on, the subtitle style may be configured using the subtitle configuration module. According to the configured names and subtitle styles, the user interface displays the names and subtitles of the virtual object interactive application accordingly. On one hand, the method can help configuration personnel to customize the user interface of the virtual object interactive application so as to enable the user interface to better meet the personalized requirements of different clients; on the other hand, the method is easier to be used and understood by a configurator, and the configurator can easily configure the user interface of the virtual object interactive application by using the method; in another aspect, the method can customize the subtitle style of the virtual object interactive application, so that the user interface is more attractive and easier to read, and the user experience is improved.

the configuring the name of the virtual object interactive application by using the name configuration module (i.e. step S101) includes:

Thus, the configurator may enter a desired name in the first text entry box, which will be displayed on the user interface. This has the advantage that the customizability and flexibility of the virtual object interactive application is improved. Because the name of the virtual object interactive application can be changed according to the requirement, the virtual object interactive application can be more in line with the requirement of a specific application scene. In addition, the name can be more conveniently configured by using the first text input box in the UI editor to input the name, so that the tedious process of manually changing codes is avoided.

Referring to fig. 3, fig. 3 is a schematic flow chart of configuring a subtitle style according to an embodiment of the present application.

In some embodiments, the caption configuration module includes a first radio box, a caption configuration button, and a caption style setup interface provided with a second text input box, a first color selector, a second color selector, a third text input box, and a slide switch button;

The method for starting or closing the subtitle display function of the virtual object interactive application by using the subtitle configuration module (i.e. step S102) includes:

in step S103, the process of configuring the subtitle style by using the subtitle configuration module includes:

step S201: displaying the caption configuration button when a caption display function is started;

step S202: responding to clicking operation of the subtitle configuration button, and displaying the subtitle style setting interface in a floating layer form;

step S203: responding to the input operation of the second text input box, acquiring font size information corresponding to a second text input by a configurator so as to configure the font size;

step S204: acquiring font color information corresponding to a first color selected by a configurator in response to a selection operation for the first color selector so as to configure a font color;

step S205: acquiring background color information corresponding to a second color selected by a configurator in response to a selection operation for the second color selector so as to configure a background color;

step S206: responding to the input operation of the third text input box, and acquiring Y-axis coordinate information corresponding to the third text input by a configurator so as to configure Y-axis coordinates;

Step S207: and responding to clicking operation of the sliding switch button, and switching whether the current centering state is in order to configure the centering type.

Thus, the subtitle display function is turned on or off by responding to the selection operation of the first radio frame. When the subtitle display function is turned on, a subtitle configuration button is displayed on the user interface to provide an entry for accessing the subtitle style setup interface. And setting various style information of the subtitles on a subtitle style setting interface in a floating layer form by a configurator. Specifically, in response to an input operation of the second text input box, font size information corresponding to the second text input by the configurator is acquired to configure the font size. And responding to the selection operation of the first color selector and the second color selector, acquiring font color information and background color information selected by a configurator so as to configure the color of the subtitle. And responding to the input operation of the third text input box, and acquiring Y-axis coordinate information corresponding to the third text input by the configurator so as to configure the position of the caption on the user interface. And responding to the clicking operation of the sliding switch button, the centering state of the caption can be switched so as to adapt to different user interfaces. Through the configuration operations, the subtitle style can flexibly adapt to different client requirements, better user experience is provided, and the usability and accessibility of the application are enhanced.

Referring to fig. 4, fig. 4 is a schematic flow chart of configuring a LOGO image according to an embodiment of the present application.

In some embodiments, the UI editor further comprises a LOGO configuration module comprising a second radio and a picture upload control;

in addition to steps S101 to S104, the method further comprises:

step S105: responding to the selection operation of the second single selection frame, and starting or closing a LOG O display function of the virtual object interactive application;

step S106: responding to clicking operation for the picture uploading control, opening a local folder, and uploading a target picture selected by a configurator to a target storage position;

step S107: and determining a LOGO picture based on the target picture, so that the user interface displays the LOGO picture.

In the embodiment of the application, the local folder refers to the local folder of the terminal equipment. After opening the local folder, the configurator can only select one picture at a time (i.e., the target picture).

As an example, in step S303, the process of determining a LOGO picture based on the target picture includes: based on the resolution of the target picture, cutting, compressing or stretching the target picture to obtain a LOGO picture with preset resolution.

Thus, the UI editor includes a LOGO configuration module that includes a second radio and a picture upload control. By selecting the second radio frame, the configurator can turn on or off the LOGO display function of the virtual object interactive application. By clicking the picture upload control, the local folder is opened and the configurator can select the target picture and upload it to the target storage location. And then, determining the LOGO picture according to the selected target picture so that the user interface displays the LOGO picture. In this way, a configurator can easily upload and set a LOGO picture without having to go deep into the code or use other tools, which can improve configuration efficiency and reduce errors. In addition, the LOGO display function is started, so that the virtual object interactive application has brand features and recognizability, and the front-end user experience and the user satisfaction are enhanced.

Referring to fig. 5, fig. 5 is a flowchart illustrating another configuration of a LOGO image according to an embodiment of the present application.

In some embodiments, the determining a LOGO picture based on the target picture (i.e., step S303) includes:

in addition to steps S101 to S107, the method further includes:

step S108: when the color of the target picture is not matched with the color of the subtitle, generating prompt information and displaying the prompt information in a popup window mode, wherein the prompt information is used for prompting the configurator that the color is not matched.

Thus, in order to make the LOGO picture more adapted to the overall style of the user interface, a color verification model is used to detect whether the color of the target picture is adapted to the subtitle color. If the color of the target picture is matched with the subtitle color, the target picture is taken as a LOGO picture, otherwise, prompt information is generated and displayed in a popup window mode.

Specifically, font color information, background color information and a target picture are input into a color verification model, the verification model is a trained deep learning model, a judging result of whether the color of the target picture is matched with the subtitle color can be output, if so, the color of the target picture accords with the integral style of a user interface, and the target picture can be used as a LOGO picture; if the color of the target picture does not match with the whole style of the user interface, generating prompt information to prompt the configurator that the color is not matched, and reselecting the picture or adjusting the font color and the background color is needed. By the method, the LOGO picture can be ensured to be consistent with the overall style of the user interface, so that the virtual object interactive application has better user experience and visual effect.

The following exemplifies the case where the color of the target picture is adapted and not adapted to the subtitle color.

Examples of color-to-subtitle color adaptation of the target picture may be: the whole style of the user interface is mainly warm tone, the font color is white, the background color is dark red, at the moment, a picture with the main tone of dark red is selected as a LOGO picture, and after detection of a color verification model, the whole style is coordinated by matching the target picture color and the subtitle color, so that the user interface is suitable for being used as the LOGO picture.

Examples of color-to-subtitle color mismatch for the target picture may be: assuming that the whole style of the user interface is mainly cold tone, the font color is white, the background color is light blue, at the moment, a picture with yellow main tone is selected as a LOGO picture, after detection of a color verification model, the color of the target picture and the subtitle color are matched, the whole style is not coordinated, the target picture is not suitable for being used as the LOGO picture, prompt information is generated and displayed in a popup window mode, and color incompatibility of configurators is prompted.

In some embodiments, the training process of the color verification model includes:

Therefore, the color verification model is used for detecting whether the color of the target picture is matched with the subtitle color, and the training process comprises the following steps: acquiring a training set, wherein the training set consists of a plurality of training data, and each training data comprises sample font color information, sample background color information, sample pictures and labeling data of color verification results; inputting the corresponding sample font color information, sample background color information and sample pictures of each training data into a preset deep learning model to obtain prediction data of a color verification result, comparing the prediction data with labeling data, and then adjusting parameters of the deep learning model according to errors; and detecting whether a preset training ending condition is met, if so, taking the trained deep learning model as a color verification model, and if not, continuing training the model by using the next training data. The training process uses training data to train the deep learning model, and model parameters are continuously adjusted until preset training ending conditions are met. By means of the method, an accurate color verification model can be trained and used for detecting whether the color of the target picture is matched or not, the color verification model can automatically judge whether the color of the target picture is matched with the color of the subtitle or not, inaccuracy and time consumption of manual judgment are avoided, meanwhile, the color verification model trained by using the deep learning model is high in accuracy, and user experience and using effect of virtual object interactive application can be improved.

In some alternative embodiments, the embodiments of the present application may use machine learning, deep learning, or migration learning to train each model (including a color verification model and a color matching model) used in the embodiments of the present application, and in other alternative embodiments, the present application may use each model trained in advance.

When each model is obtained through training in a deep learning mode, a proper amount of neuron computing nodes and a multi-layer operation hierarchical structure are established through design, a proper input layer and a proper output layer are selected, a preset deep learning model corresponding to each model (namely an initial model corresponding to each model) can be obtained, a functional relation from input to output is established through learning and optimization of the deep learning model, although the functional relation from input to output cannot be found 100%, the functional relation can be as close to the actual association relation as possible, and therefore each model obtained through training can obtain corresponding output data based on input data.

Training the deep learning model by using training sets corresponding to the models, quickly modeling can be performed by learning a small number of samples, training errors of the deep learning model can be gradually reduced in the continuous training process, and the optimal weight is stored and read; recording the accuracy of the training set and the verification set, and facilitating parameter adjustment (adjustment of model parameters); the model parameters of the deep learning model are updated, so that the model can be better fitted with data, the generalization capability is effectively achieved, and the robustness and the fitting precision are improved.

In some alternative embodiments, the historical data may be data mined to obtain sample data in the training set. That is, the sample data may be collected from a configuration process of a real configurator. In addition, the sample data may be automatically generated by using a GAN model generation network.

The GAN model generates an countermeasure network (Generative Adversarial Network) composed of a generation network and a discrimination network. The generation network samples randomly from the potential space (latency space) as input, the output of which needs to mimic as much as possible the real samples in the training set. The input of the discrimination network is then the real sample or the output of the generation network, the purpose of which is to distinguish the output of the generation network as far as possible from the real sample. And the generation of the network should be as fraudulent as possible to discriminate the network. The two networks are mutually opposed and continuously adjust parameters, and the final purpose is that the judging network can not judge whether the output result of the generated network is real or not. A large amount of sample data can be generated by using the GAN model and used for the training process of each model, so that the data volume of original data acquisition can be effectively reduced, and the cost of data acquisition and labeling is greatly reduced.

The training process of each model is not limited, and for example, a training mode of supervised learning, a training mode of semi-supervised learning or a training mode of unsupervised learning can be adopted.

When a training mode of supervised learning or semi-supervised learning is adopted, the method for acquiring the annotation data is not limited, and for example, a manual annotation mode or an automatic annotation or semi-automatic annotation mode can be adopted. When the sample data is acquired by a real configurator, the real data can be acquired from the historical data in a keyword extraction mode to serve as annotation data.

The training ending condition in the training process of each model is not limited in the embodiment of the application, for example, the training times can reach the preset times (the preset times are, for example, 1 time, 3 times, 10 times, 100 times, 1000 times, 10000 times, etc.), or the training data in the training set can be all trained once or more times, or the total loss value obtained in the training is not greater than the preset loss value.

With continued reference to FIG. 5, in some embodiments, the LOGO configuration module also includes a one-touch colored button;

In addition to steps S101 to S108, the method further comprises:

step S109: when the color of the target picture is not matched with the subtitle color, displaying the one-key coloring button;

step S110: acquiring recommended color information adapted to a subtitle color based on the font color information and the background color information in response to a click operation for the one-touch colored button;

step S111: and coloring the target picture by using the recommended color information to obtain the LOGO picture.

Therefore, the LOGO configuration module is provided with a one-key coloring button, and is used for solving the problem when the color of the target picture is not matched with the subtitle color. When the color verification model detects that the color of the target picture is not matched with the subtitle color, the background configuration interface displays a one-key coloring button, a configurator can click the one-key coloring button to obtain recommended color information matched with the subtitle color, and color processing is carried out on the target picture by utilizing the recommended color information so as to obtain a LOGO picture conforming to the subtitle color, wherein the recommended color information is calculated through a trained color matching model. The advantage of doing so is, can let the configuration personnel light be the LOGO picture coloring, avoided the LOGO that leads to because of the colour mismatch shows the problem of unsightly, the discomfort, improves the quality and the uniformity of LOGO picture, has reduced configuration personnel's work load and the possibility of making mistakes simultaneously.

As an example, the whole style of the user interface is mainly cold, the font color is white, the background color is blue, when the configurator selects a picture with the main color of green as a target picture, the color verification model judges that the color of the target picture is not matched with the subtitle color, a one-key coloring button is displayed at the moment, and the configurator can click the one-key coloring button to re-color the target picture. Specifically, the recommended color information is first acquired, and for example, the color recommended for use may be calculated as bluish green using a color matching model. And then, coloring the target picture by using the recommended color information, and converting the green part into bluish green color to obtain the LOGO picture matched with the subtitle color. By the aid of the method, the LOGO picture can be ensured to be consistent with the overall style of the user interface, particularly the subtitle color, and the attractiveness of the user interface is improved.

In other embodiments, when the color verification model detects that the color of the target picture is not matched with the subtitle color, the recommended font color information and the recommended background color information are obtained according to the color of the target picture and recommended to the configurator, the configurator can replace the current font color and background color with the recommended font color (corresponding to the recommended font color information) and the recommended background color (corresponding to the recommended background color information), at this time, the target picture can be used as the LOGO picture, and the color of the LOGO picture is matched with the subtitle color. Referring to fig. 6, fig. 6 is a schematic flow chart of configuring a user interface based on a template according to an embodiment of the present application.

In some embodiments, the UI editor further comprises a template selection module comprising a select template button;

the method further comprises the steps of:

step S112: responding to clicking operation for the selected template button, displaying a template center interface, wherein the template center interface comprises a plurality of picture buttons corresponding to preset templates, and each picture button comprises a picture which is a UI thumbnail of the corresponding preset template;

step S113: responding to clicking operation for one of the picture buttons, and taking a preset template corresponding to the clicked picture button as a template of the user interface;

step S114: and configuring the user interface based on configuration information corresponding to the template, wherein the configuration information comprises one or more of name configuration information, subtitle configuration information, LOGO configuration information and screen clearing configuration information.

Thus, the template selection module is used for facilitating the configurator to quickly create a user interface meeting the requirements. The configurator can click the select template button to open the template center interface, then select one of the plurality of preset templates, and apply the preset template to the user interface of the virtual object interactive application. The preset templates are designed and configured with information such as names, subtitles, LOGO, screen cleaning and the like in advance, and configuration personnel only need to perform further configuration on the basis of the templates. The template selection module provides a simple, quick and visual way for configurators to create the user interface, the configurators can easily create the user interface wanted by themselves without designing and configuring each detail from the beginning, the working efficiency and experience of the configurators are greatly improved, and the time and cost are saved. In addition, the consistency and stability of the user interface can be ensured by using the template, so that the possibility of errors is reduced.

In a specific application scenario, the embodiment of the application also provides a UI editing method, which is used for configuring the style of the user interface of the virtual object interactive application by using any one of the UI editors, wherein the UI editors comprise a name configuration module, a subtitle configuration module, a LOGO configuration module and a template selection module;

the name configuration module comprises a first text input box;

the subtitle configuration module comprises a first radio selection box, a subtitle configuration button and a subtitle style setting interface, wherein the subtitle style setting interface is provided with a second text input box, a first color selector, a second color selector, a third text input box and a sliding switch button;

the LOGO configuration module comprises a second radio frame, a picture uploading control and a one-key coloring button;

the template selection module comprises a template selection button;

the method comprises the following steps:

responding to the input operation of the first text input box, and taking the first text input by a configurator as the name of the virtual object interactive application so that the user interface displays the name;

when the subtitle display function is closed, controlling the user interface not to display subtitles;

when the color of the target picture is matched with the subtitle color, taking the target picture as the LOGO picture, so that the LOGO picture is displayed by the user interface;

when the color of the target picture is not matched with the color of the subtitle, generating prompt information and displaying the one-key coloring button, wherein the prompt information is displayed in a popup window mode and is used for prompting the color of a configurator to be not matched;

coloring the target picture by using the recommended color information to obtain the LOGO picture;

The training process of the color verification model comprises the following steps:

The acquiring the recommended color information adapted to the subtitle color based on the font color information and the background color information includes: inputting the font color information and the background color information into a color matching model to obtain a plurality of alternative color information matched with the subtitle color; displaying alternative colors corresponding to the various alternative color information; and responding to a selection operation for one of the candidate colors, and taking candidate color information corresponding to the selected candidate color as the recommended color information. This has the advantage that alternative color information output by a plurality of coloring algorithms can be provided for selection by a configurator according to the requirements of clients and the characteristics of the target picture, and the plurality of coloring algorithms can comprise a color conversion algorithm based on a neural network, a color conversion algorithm based on histogram matching and the like, so that the configurator can select the most suitable recommended color.

In a specific application scenario, the embodiment of the application also provides a configuration device of the virtual object interactive application, and the configuration device of the virtual object interactive application comprises a UI configurator and a UI editor.

The UI configurator includes: the system comprises a UI component library, a layout configuration module, an attribute configuration module and a preview module. The UI component library comprises a plurality of available UI components, including text input boxes, buttons, radio boxes, check boxes, color selectors, date selectors, time selectors, date time selectors, pictures, videos, lists, drop-down menus, cascading selectors, progress bars, carousel charts, menus, tabs, tab pages, sliders, switches, labels, icons, picture uploads, scores, shuttle boxes, forms, tables, tree selections, headers, head portraits, folding panels, step bars, warning prompts, loading, message prompts, popup windows, float layers, notifications, bubbles, bubble confirmation boxes, troops, time axes, separation lines, calendars, return to top, results, drawers, empty status, breadcrumbs and the like; the layout configuration module is used for configuring the arrangement and the position of the UI components; the attribute configuration module is used for configuring attributes of the UI component, including fonts, sizes, colors, transparency and the like; the preview module is used for previewing the UI effect in real time.

The UI editor comprises a name configuration module, a subtitle configuration module, a LOGO configuration module and a template selection module. The name configuration module is used for setting the name of the virtual object interactive application; the subtitle configuration module is used for configuring the style of the subtitle; the LOGO configuration module is used for configuring the style and the content of LOGO; the template selection module is used for selecting a UI preset template.

The embodiment of the application also provides a UI editing method which is used for configuring the style of the user interface of the virtual object interactive application by utilizing any UI editor. The method comprises the following steps: in response to a user operation in the UI editor, including an input operation, a selection operation, a click operation, and the like, the name, subtitle, LOGO, style, and the like of the user interface are configured. The name configuration module comprises a first text input box and a second text input box, wherein the first text input box is used for inputting the name of the virtual object interactive application; the subtitle configuration module comprises a first radio frame, a subtitle configuration button and a subtitle style setting interface, and is used for configuring the display and style of the subtitle; the LOGO configuration module comprises a second radio frame, a picture uploading control and a one-key coloring button, and is used for configuring the display and the style of LOGO; the template selection module comprises a template selection button for selecting a UI preset template.

In a specific implementation of the UI editing method, the method further includes a process of configuring a subtitle style using a subtitle configuration module, the process including displaying a subtitle configuration button when a subtitle display function is turned on, displaying a subtitle style setting interface in a floating layer form in response to a clicking operation of the subtitle configuration button, responding to an operation of a text input box and a color selector, configuring display and style of a subtitle, and the like.

The embodiment of the application provides a configuration device for a simple and easy-to-use virtual object interactive application and a corresponding UI editing method thereof, which can conveniently configure and customize a user interface, support the custom configuration of various UI components and styles and improve the experience and satisfaction of users.

(electronic device)

The embodiment of the application also provides an electronic device, the specific embodiment of which is consistent with the embodiment described in the method embodiment and the achieved technical effect, and part of the contents are not repeated.

The electronic device is used for configuring the style of a user interface of a virtual object interactive application by using any one of the UI editors, the UI editors comprise a name configuration module and a subtitle configuration module, the electronic device comprises a memory and at least one processor, the memory stores a computer program, and the at least one processor is configured to realize the following steps when executing the computer program:

the at least one processor is configured to configure the name of the virtual object interactive application with the name configuration module when executing the computer program in the following manner:

The at least one processor is configured to turn on or off a subtitle display function of the virtual object interactive application with the subtitle configuration module when executing the computer program in the following manner:

the at least one processor is configured to configure a subtitle style with the subtitle configuration module when executing the computer program in the following manner:

the at least one processor is configured to execute the computer program to further implement the steps of:

In some embodiments, the at least one processor is configured to determine a LOGO picture based on the target picture when executing the computer program in the following manner:

In some embodiments, the LOGO configuration module further comprises a one-touch colored button;

Referring to fig. 7, fig. 7 is a block diagram of an electronic device 10 according to an embodiment of the present application.

The electronic device 10 may for example comprise at least one memory 11, at least one processor 12 and a bus 13 connecting the different platform systems.

Memory 11 may include readable media in the form of volatile memory, such as Random Access Memory (RAM) 111 and/or cache memory 112, and may further include Read Only Memory (ROM) 113.

The memory 11 also stores a computer program executable by the processor 12 to cause the processor 12 to implement the steps of any of the methods described above.

Memory 11 may also include utility 114 having at least one program module 115, such program modules 115 include, but are not limited to: an operating system, one or more application programs, other program modules, and program data, each or some combination of which may include an implementation of a network environment.

Accordingly, the processor 12 may execute the computer programs described above, as well as may execute the utility 114.

The processor 12 may employ one or more application specific integrated circuits (ASICs, application Specific Integrated Circui t), DSPs, programmable logic devices (PLD, programmableLogic devices), complex programmable logic devices (CPLDs, complex Programmable Logic Device), field programmable gate arrays (FPGAs, fields-Programmable Gate Array), or other electronic components.

Bus 13 may be a local bus representing one or more of several types of bus structures including a memory bus or memory controller, a peripheral bus, an accelerated graphics port, a processor, or any of a variety of bus architectures.

The electronic device 10 may also communicate with one or more external devices such as a keyboard, pointing device, bluetooth device, etc., as well as one or more devices capable of interacting with the electronic device 10 and/or with any device (e.g., router, modem, etc.) that enables the electronic device 10 to communicate with one or more other computing devices. Such communication may be via the input-output interface 14. Also, the electronic device 10 may communicate with one or more networks such as a Local Area Network (LAN), a Wide Area Network (WAN) and/or a public network, such as the Internet, through a network adapter 15. The network adapter 15 may communicate with other modules of the electronic device 10 via the bus 13. It should be appreciated that although not shown, other hardware and/or software modules may be used in connection with the electronic device 10 in actual applications, including, but not limited to: microcode, device drivers, redundant processors, external disk drive arrays, RAID systems, tape drives, data backup storage platforms, and the like.

(computer-readable storage Medium)

The embodiment of the application also provides a computer readable storage medium, and the specific embodiment of the computer readable storage medium is consistent with the embodiment recorded in the method embodiment and the achieved technical effect, and part of the contents are not repeated.

The computer readable storage medium stores a computer program which, when executed by at least one processor, performs the steps of any of the methods or performs the functions of any of the electronic devices described above.

Referring to fig. 8, fig. 8 is a schematic structural diagram of a program product according to an embodiment of the present application.

The program product is for implementing the steps of any of the methods described above or for implementing the functions of any of the electronic devices described above. The program product may take the form of a portable compact disc read-only memory (CD-ROM) and comprises program code and may be run on a terminal device, such as a personal computer. However, the program product of the present application is not limited thereto, and in the embodiments of the present application, the readable storage medium may be any tangible medium that can contain, or store a program for use by or in connection with an instruction execution system, apparatus, or device. The program product may employ any combination of one or more readable media. The readable medium may be a readable signal medium or a readable storage medium. The readable storage medium can be, for example, but is not limited to, an electronic, magnetic, optical, electromagnetic, infrared, or semiconductor system, apparatus, or device, or a combination of any of the foregoing. More specific examples (a non-exhaustive list) of the readable storage medium would include the following: an electrical connection having one or more wires, a portable disk, a hard disk, random Access Memory (RAM), read-only memory (ROM), erasable programmable read-only memory (EPROM or flash memory), optical fiber, portable compact disk read-only memory (CD-ROM), an optical storage device, a magnetic storage device, or any suitable combination of the foregoing.

The computer readable storage medium may include a data signal propagated in baseband or as part of a carrier wave, with readable program code embodied therein. Such a propagated data signal may take any of a variety of forms, including, but not limited to, electro-magnetic, optical, or any suitable combination of the foregoing. A readable storage medium may also be any readable medium that can transmit, propagate, or transport a program for use by or in connection with an instruction execution system, apparatus, or device. Program code embodied on a readable storage medium may be transmitted using any appropriate medium, including but not limited to wireless, wireline, optical fiber cable, RF, etc., or any suitable combination of the foregoing. Program code for carrying out operations of the present invention may be written in any combination of one or more programming languages, including an object oriented programming language such as Java, C++ or the like and conventional procedural programming languages, such as the C programming language or similar programming languages. The program code may execute entirely on the user's computing device, partly on the user's device, as a stand-alone software package, partly on the user's computing device, partly on a remote computing device, or entirely on the remote computing device or server. In the case of remote computing devices, the remote computing device may be connected to the user computing device through any kind of network, including a Local Area Network (LAN) or a Wide Area Network (WAN), or may be connected to an external computing device (e.g., connected via the Internet using an Internet service provider).

The present application has been described in terms of its purpose, performance, advancement, and novelty, and the like, and is thus adapted to the functional enhancement and use requirements highlighted by the patent statutes, but the description and drawings are not limited to the preferred embodiments of the present application, and therefore, all equivalents and modifications that are included in the construction, apparatus, features, etc. of the present application shall fall within the scope of the present application.

Claims

1. A UI editor for configuring styles of a user interface of a virtual object interactive application, the UI editor comprising:

2. The UI editor of claim 1, wherein the name configuration module comprises a first text entry box;

3. The UI editor of claim 1, further comprising one or more of a LOGO configuration module, a screen clearing configuration module, and a template selection module;

4. A UI editing method, characterized by being used for configuring styles of a user interface of a virtual object interactive application using the UI editor of any one of claims 1-3, the UI editor including a name configuration module and a subtitle configuration module, the method comprising:

5. The UI editing method of claim 4, wherein the name configuration module comprises a first text entry box;

6. The UI editing method according to claim 4, wherein the caption configuration module includes a first radio box, a caption configuration button, and a caption style setting interface provided with a second text input box, a first color selector, a second color selector, a third text input box, and a slide switch button;

7. The UI editing method of claim 6, wherein the UI editor further comprises a LOGO configuration module comprising a second radio and a picture upload control;

the method further comprises the steps of:

8. The UI editing method according to claim 7, wherein the determining a LOGO picture based on the target picture comprises:

the method further comprises the steps of:

9. The UI editing method according to claim 8, wherein the training process of the color verification model comprises:

10. The UI editing method of claim 8, wherein the LOGO configuration module further comprises a one-touch coloring button;

the method further comprises the steps of:

11. The UI editing method of claim 4, wherein the UI editor further comprises a template selection module comprising selecting a template button;

the method further comprises the steps of:

12. An electronic device for configuring a style of a user interface of a virtual object interactive application using the UI editor of any of claims 1-3, the UI editor comprising a name configuration module and a subtitle configuration module, the electronic device comprising a memory storing a computer program and at least one processor configured to implement the following steps when executing the computer program:

13. A computer-readable storage medium, characterized in that it stores a computer program which, when executed by at least one processor, implements the steps of the method of any of claims 4-11 or the functions of the electronic device of claim 12.