Method for building AIGC interactive interface based on pure configuration

Abstract

The embodiment of the invention provides a method for constructing an AI GC interactive interface based on pure configuration. The method comprises the following steps: constructing a callable front-end component resource pool; analyzing the front-end component configuration data to generate an analysis result set; based on the front-end component resource pool and the analysis result set, generating a static front-end AI GC interface comprising the front-end component; establishing a data link for interaction between a front-end component and a rear end in the static front-end interface; obtaining a response result of the back end to the data input by the user through the data link; and updating the front-end component based on the response result and the front-end component resource pool to form a front-end AI GC interaction interface. According to the method for building the AI GC interactive interface based on pure configuration, the AI GC front-end development efficiency is improved, the maintenance cost is reduced, the flexibility is improved, and the technical threshold is reduced.

Description

Technical Field

[0001] The embodiments of the present invention relate to the field of data processing, and in particular to a method for building an AIGC interactive interface based on pure configuration. Background Art

[0002] Artificial intelligence generated content (AIGC) technology is rapidly penetrating into diverse scenarios such as digital voice broadcasting and multimedia content generation, driving the high-frequency iteration of front-end interactive interface requirements.

[0003] Existing technologies, while general front-end component libraries (such as Ant Design and Element) can provide basic UI components, lack support for AIGC scenario-specific interactions and lack configuration flexibility, making it difficult to meet AIGC application requirements for rapid interface construction and dynamic adaptation. Therefore, a low-code or no-code front-end construction solution is urgently needed to decouple interface configuration from code implementation, improve the efficiency of AIGC feature launches, and lower the technical threshold. Summary of the Invention

[0004] In view of this, an embodiment of the present invention provides a method for building an AIGC interaction interface based on pure configuration, so as to at least partially solve the above problems.

[0005] A method for building an AIGC interactive interface based on pure configuration, comprising:

[0006] Build a callable front-end component resource pool;

[0007] Parse the front-end component configuration data to generate a parsing result set;

[0008] Generate a static front-end AIGC interface including front-end components based on the front-end component resource pool and the parsing result set;

[0009] Establish a data link between the front-end components and the back-end in the static front-end interface;

[0010] Obtain the backend's response to the user input data through the data link;

[0011] Based on the response results and the front-end component resource pool, the front-end components are updated to form the front-end AIGC interaction interface.

[0012] In the solution of the embodiment of the present invention, the method of building the AIGC interactive interface based on pure configuration has the following technical advantages:

[0013] The method for building an AIGC interactive interface based on pure configuration provided by this application addresses the problems of low AIGC front-end development efficiency, high maintenance costs, insufficient flexibility, and high technical barriers in the existing technology, and achieves significant technical improvements through the following technical solutions:

[0014] 1. Decouple configuration and code to improve development efficiency

[0015] By "building a front-end component resource pool", the code implementation of common components is separated from the interface configuration; by "parsing the front-end component configuration data", rendering instructions are generated, and static interfaces are dynamically generated based on the configuration data (not the code). To this end, non-technical personnel can quickly build interfaces by modifying JSON configurations (such as adjusting component types and layout structures) without having to write component rendering code, thus shortening the AIGC function from demand to launch by more than 50%. In addition, when business requirements change (such as adding an "audio synthesis" input component), only the type field and component parameters in the configuration data need to be updated, without modifying the front-end code, thus achieving "configuration is development".

[0016] 2. Dynamically adapt to diverse scenarios and enhance flexibility

[0017] The "Front-End Component Resource Pool" pre-integrates AIGC-specific components; "Update Front-End Components Based on Response Results" supports dynamic rendering of corresponding components based on different types of data returned by the backend. This allows the same component resource pool to support multiple scenarios, switching input and output component types through configuration data, eliminating the need to develop separate components for each scenario. Furthermore, the "Component Resource Pool" automatically matches output components with backend return results, eliminating the need for hard-coded processing logic on the frontend and improving the system's compatibility with multiple data types.

[0018] 3. Lower the technical threshold and support non-technical personnel to participate

[0019] The entire interface construction process is based on configuration data (JSON format), eliminating the need to write JavaScript / HTML code. The decoupled design of the "parsed result set" and "component resource pool" separates configuration logic from component implementation. To this end, operations or product managers can define interface layout and interaction logic through a graphical configuration interface (such as dragging and dropping components and modifying fields) without having to master front-end development techniques, expanding the scope of development participation. Furthermore, adjustments to business needs do not rely on the development team's schedule, reducing demand delays caused by technical staff bottlenecks and improving team collaboration efficiency.

[0020] 4. Modular architecture reduces maintenance costs

[0021] The "component resource pool" uses a factory model to manage component instances and supports independent expansion and updating; the "data link" and "component rendering" logics are separated, and when the back-end interface changes, only the communication protocol configuration needs to be adjusted, without affecting the front-end component rendering. To this end, when adding a new component type (such as 3D model display), it is only necessary to register the new component constructor in the resource pool, without modifying the configuration parsing or rendering process, and following the "open-closed principle". Moreover, through the "configuration hot update" mechanism (such as monitoring configuration file changes), the interface layout or component behavior can be updated without restarting the application, reducing service interruption time due to maintenance.

[0022] In summary, this application transforms the construction process of the AIGC front-end interface from "code development" to "configuration-driven" through the core design of "pure configuration", effectively solving the problems of low development efficiency, poor flexibility and high technical barriers in existing technologies. BRIEF DESCRIPTION OF THE DRAWINGS

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

[0024] Figure 1 A flowchart of a method for building an AIGC interactive interface based on pure configuration provided in an embodiment of the present application.

[0025] Figure 2 A schematic diagram of the interface configured for the AIGC component of this application;

[0026] Figure 3-Figure 8 These are interface diagrams one to six for implementing the solution of this application. DETAILED DESCRIPTION

[0027] like Figure 1 As shown, the embodiment of the present application provides a method for building an AIGC interactive interface based on pure configuration, which includes:

[0028] Build a callable front-end component resource pool;

[0029] Parse the front-end component configuration data to generate a parsing result set;

[0030] Generate a static front-end AIGC interface including front-end components based on the front-end component resource pool and the parsing result set;

[0031] Establish a data link between the front-end components and the back-end in the static front-end interface;

[0032] Obtain the backend's response to the user input data through the data link;

[0033] Based on the response results and the front-end component resource pool, the front-end components are updated to form the front-end AIGC interaction interface.

[0034] Optionally, building a dynamically callable front-end component resource pool includes: parsing the AIGC general component library to build a dynamically callable front-end component resource pool in memory.

[0035] Optionally, the AIGC general component library is parsed to build a dynamically callable front-end component resource pool in memory, including: accessing the AIGC general component library code file in the local or remote warehouse and parsing it to register the constructor, property configuration items and public interface of each front-end component to the component resource pool in memory, and establishing a mapping index between different types of front-end components and actual component codes in the component resource pool to form a dynamically callable front-end component resource pool.

[0036] Optionally, the front-end component includes at least an input component and an output component, the input component includes at least any one of text input, card selection, radio button group, uploading picture / video / audio, and link resolution components, and the output component includes at least any one of video playback, picture display, text display, and audio playback components.

[0037] To this end, in a specific application scenario, by parsing the AIGC general component library code files, each front-end component's constructor, property configuration items, and public interface are registered in an in-memory component resource pool. Objects are created using the factory pattern, reducing the coupling between objects and separating component instance creation from client code. A mapping index is established between different types of front-end components and the actual component code, similar to the idea of ​​dynamically creating component instances based on component type (such as textarea, image, etc.) in the handout. This ultimately forms a dynamically callable resource pool to support subsequent component instantiation.

[0038] In summary, during component library parsing and memory registration, when establishing a digital mapping of component resources, the code file is structured parsed, the AIGC universal component library code (such as JavaScript modules) in the local or remote repository is read, the component definition code is parsed, and the following key information is extracted:

[0039] Constructor: The class definition of the component (such as class UploadImgComponent{}), used to create a component instance;

[0040] Property configuration items: configurable parameters of the component (such as fieldName, label, required) and their default values;

[0041] Public interface: methods exposed by components (such as render() and updateData()), used for data interaction and interface updates.

[0042] To this end, the physically stored code files are converted into executable objects in memory to form a "digital asset catalog" of component resources.

[0043] During memory registration and index creation, the parsed constructor, property configuration items, and public interface are registered to the component resource pool in memory (such as the global object componentPool); with the component type (such as uploadImg, image) as the key, a mapping index is created (such as componentPool['uploadImg'] = UploadImgComponent).

[0044] To this end, a memory index is used to quickly map the "component type name → actual code", similar to a dictionary query mechanism, to ensure that component implementations can be quickly located based on the configured type field at runtime.

[0045] In addition, a factory pattern is implemented to drive component instantiation. When decoupling the creation logic from the client code, the creation of component instances is uniformly managed through the component factory (such as the ComponentFactory class). The client code only needs to provide the component type and configuration parameters without worrying about the specific creation details.

[0046]

[0047] To this end, the component creation logic is concentrated in the factory class, and the client code does not need to directly rely on the specific component class, reducing the coupling between modules; when adding a new component type, only the resource pool registration logic needs to be modified, without changing the factory code or the client calling method.

[0048] When dynamically creating and adapting parameters,

[0049] When the configuration parsing engine encounters type: "uploadImg", it calls ComponentFactory.createComponent('uploadImg',{fieldName:'originImg',label:'original picture'}). The factory obtains the UploadImgComponent constructor from the resource pool based on the uploadImg index and passes in the props parameter to create an instance.

[0050] When the configuration drives instantiation, the component's properties (such as required: true) are passed to the constructor through the props parameter, and initialization is completed during the instantiation phase, realizing the dynamic binding of "configuration parameters → component properties".

[0051] The resource pool is dynamic and reusable, supporting flexible expansion and efficient reuse. Dynamic expansion allows for adding new components (e.g., AudioUploadComponent) and writing code. The new component's constructor is registered with the component resource pool (e.g., componentPool['audioUpload'] = AudioUploadComponent). The new component type is referenced in the configuration file (e.g., type: "audioUpload"), without modifying existing business logic.

[0052] To this end, combined with dynamic module loading technology (such as Webpack HMR), the resource pool can update component definitions at runtime to achieve "support for new components without restarting the application."

[0053] Furthermore, cross-scene reuse logic is implemented. Input components (such as uploadImg) and output components (such as image) follow unified interface specifications (such as the render() method) and can be reused in multiple scenarios such as digital voice broadcasting and picture face swapping.

[0054] Configure differentiated calls: The same component type can achieve differentiated functions through different configuration parameters. For example, the uploadImg component uses fieldName to distinguish between the upload entrances of "original pictures" and "face-swapped pictures"; the image component uses the value field to render different picture URLs returned by the backend (such as user-uploaded pictures and AIGC-generated pictures).

[0055] Optionally, parsing the front-end component configuration data to generate a parsing result set includes: parsing the front-end component configuration data to generate a parsing result set, which includes: layout instructions, component instantiation parameters and output area initial configuration, including:

[0056] Parse the layout description field in the front-end component configuration data to match it with the preset layout template to generate the corresponding DOM structure description and form a layout instruction set accordingly;

[0057] Parse the input component description array and the front-end component resource pool in the front-end component configuration data, and determine the component constructor that matches the component properties in the front-end component resource pool;

[0058] Associating component properties with their corresponding constructors to generate component instantiation parameter objects and forming input component instantiation parameter sets accordingly;

[0059] Parsing the placeholder text and title from the output description field in the front-end component configuration data, generating the initial attribute configuration of the output area based on the placeholder text and title, and forming the initial configuration set of the output area accordingly;

[0060] The layout instruction set, the input component instantiation parameter set, and the output region initial configuration set are structured to generate a parsing result set.

[0061] To this end, in a specific application scenario, the configuration parsing engine reads the AIGC workflow's input / output components, layout, and other configuration information from the interface. In this step, the layout description field in the front-end component configuration data is parsed and matched with the preset layout template to generate a DOM structure description, similar to determining the overall page layout based on the layout field (e.g., "leftInputRightOutput" represents the left and right partitions). The input component description array and resource pool are parsed to determine the component properties and constructor, consistent with the principle of traversing the components array under input and determining the component type and setting component properties based on the type field. The output description field is parsed to generate the initial configuration of the output area, which is also consistent with the logic of setting the output area properties based on the fields under output. Finally, the parsed results of each part are structured to form a complete parsed result set, providing instructions for interface rendering.

[0062] In summary, the configuration parsing engine converts the abstract JSON configuration into an executable interface rendering instruction set, implementing the core logic of the "configuration definition interface". Its implementation principle can be divided into the following four key stages:

[0063] 1. Layout parsing: mapping from configuration to DOM structure

[0064] 1. Layout template matching mechanism

[0065] Technical moves:

[0066] Parse the layout field in the configuration (such as "leftInputRightOutput") and match it with the preset layout template (such as the CSS grid layout of the left input area and the right output area).

[0067] Implementation principle:

[0068] The preset layout template defines the basic DOM structure and style rules, for example:

[0069]

[0070] The configuration parsing engine indexes the template through the layout field and generates the corresponding DOM structure description (such as {tag:'div',className:'grid grid-cols-2',children:[...]}).

[0071] 2. Instruction set generation logic

[0072] Output:

[0073] Form a layout instruction set (such as {type:'layout',template:'leftInputRightOutput',containerId:'root'}) to clarify the basic skeleton and partition structure of the interface.

[0074] 2. Input Component Parsing: Type Mapping and Parameter Binding

[0075] 1. Component type identification and constructor matching

[0076] Technical moves:

[0077] Traverse the components array in the configuration and obtain the corresponding constructor (such as UploadImgComponent) from the component resource pool based on the type field (such as "uploadImg").

[0078] Implementation principle:

[0079] The mapping from type to constructor is implemented through the factory pattern, for example:

[0080]

[0081] 2. Parameterized property configuration

[0082] Parameter binding:

[0083] Convert component attributes in the configuration (such as fieldName:"originImg") into component instantiation parameters, for example:

[0084]

[0085] Dynamic parameter verification:

[0086] The constructor in the component resource pool can define attribute validation rules (such as required field validation) to ensure that the configuration parameters are legal.

[0087] 3. Output Area Initialization: Placeholder Content and Attribute Configuration

[0088] 1. Placeholder content generation

[0089] Technical moves:

[0090] Parse the output.placeholder field in the configuration (such as "Click to generate immediately after the input port plays the text") and generate the initial placeholder DOM node (such as <div class＝"placeholder-text"> Input the broadcast text... ).

[0091] 2. Regional attribute configuration

[0092] Parameter passing:

[0093] Convert output.resultTitle (such as "Generation Results") to the title attribute of the output area for subsequent dynamic updates.

[0094] Initial state definition:

[0095] Configure the parsing engine to generate an initial configuration set for the output area (such as {title:"Generated results", placeholder:"Input port broadcast text..."}), providing a basic template for subsequent result rendering.

[0096] 4. Structured Integration: Generate Unified Rendering Instructions

[0097] 1. Multi-dimensional instruction integration

[0098] Data structure design:

[0099] Integrate layout instructions, component instantiation parameters, and output area configurations into a unified parsing result set, for example:

[0100]

[0101] 2. Instruction serialization and delivery

[0102] Execution logic:

[0103] The parsing result set is used as input for the subsequent rendering phase, and the rendering engine converts the instructions into actual DOM nodes. For example:

[0104]

[0105]

[0106] Optionally, generating a static front-end AIGC interface including the front-end components based on the front-end component resource pool and the parsing result set includes: performing preliminary rendering of the front-end interface according to the front-end component resource pool and the parsing result set to present the static front-end AIGC interface including the front-end components in the browser, including:

[0107] Create the root DOM element of the page based on the layout instruction set in the parsed result set, and divide the input area and output area according to the layout rules to generate the basic layout DOM structure;

[0108] According to the input component instantiation parameter set in the parsing result set, the corresponding constructor is obtained from the component resource pool and the initialization parameters are passed in to create a component instance, so as to generate DOM nodes in the same way as the instance is called, and thus form an input component DOM node set, which is the component element not mounted on the page;

[0109] For the input component DOM node set and the input area container in the basic layout DOM structure, insert the DOM node of each input component into the input area container in the configuration order to render the input area component and form a visible user input form;

[0110] Set the text content and properties for the output area initial configuration set in the parsing result set to perform output area placeholder rendering;

[0111] The user input form and the rendered output area are associated with the basic layout DOM structure and mounted on the browser to form a static front-end AIGC interface including front-end components.

[0112] To this end, in a specific application scenario, based on the configuration parsing engine, the page root DOM element is created and the area is divided according to the layout instructions in the parsing result set. The constructor is obtained from the resource pool based on the input component instantiation parameters to create a component instance and render it to the input area. Placeholder rendering is performed according to the initial configuration of the output area. These operations are all specific implementations of the configuration parsing engine's "dynamic generation of the front-end interactive interface from the configuration information". Finally, the various parts are combined and mounted on the browser to present a static front-end AIGC interface.

[0113] In summary, the above solution transforms abstract parsing results into concrete DOM structures through configuration-driven component-based rendering, enabling "zero-code" interface construction. Its core principle can be broken down into the following five execution phases:

[0114] 1. Layout rendering: building the interface skeleton

[0115] 1. Template-driven DOM generation

[0116] Technical moves:

[0117] According to the layout instructions in the parsing result (such as leftInputRightOutput), the corresponding HTML structure (such as the div container with left and right columns) is obtained from the preset layout template.

[0118] Implementation principle:

[0119] The layout template predefines the basic grid structure of the interface, for example:

[0120]

[0121] Use document.createElement or DOMParser to convert the template string into a DOM node to form a root container.

[0122] 2. Regional division and identification

[0123] Execution logic:

[0124] Create an input area (such as id="input-container") and an output area (such as id="output-container") in the root container to provide anchor points for subsequent component mounting.

[0125] 2. Component instantiation: mapping configuration parameters to DOM nodes

[0126] 1. Factory pattern creates components

[0127] Technical moves:

[0128] Traverse the inputComponents array in the parsing result and configure each component (such as {type:'uploadImg',props:{fieldName:'originImg'}}):

[0129] Get the corresponding constructor (such as UploadImgComponent) from the component resource pool;

[0130] Pass in configuration parameters (such as {fieldName:'originImg'}) to instantiate the component.

[0131] Implementation principle:

[0132]

[0133] 2. Stateless component rendering

[0134] Component Contract:

[0135] All components need to implement a unified render() interface and return a complete DOM node. For example:

[0136]

[0137]

[0138] 3. Input Area Assembly: Mount Components in Order

[0139] 1. Container positioning and node insertion

[0140] Execution logic:

[0141] Get the input area container through document.getElementById('input-container') and insert the component DOM node into the container according to the configuration order. For example:

[0142] javascript

[0143] const inputContainer=document.getElementById('input-container');

[0144] inputElements.forEach(element=>inputContainer.appendChild(element));

[0145] 2. Form structure formation

[0146] Interface effects:

[0147] Multiple input components in the configuration (such as two uploadImg components) are rendered as form elements arranged in order to form a complete user input interface.

[0148] 4. Output Area Initialization: Placeholder Content Rendering

[0149] 1. Attribute configuration mapping

[0150] Technical moves:

[0151] According to the outputConfig in the parsing result (such as {title: "Generation result", placeholder: "After the input port broadcasts the text..."}):

[0152] Create an output area title element (such as <h3> Generate results< / h3> );

[0153] Set the placeholder content (such as <div class＝"placeholder"> After entering the spoken text... ).

[0154] 2. Dynamic placeholder mechanism

[0155] Implementation principle:

[0156] The placeholder content serves as a visual cue before the AIGC result is generated, and its style is controlled by CSS (such as gray text and dotted borders). For example:

[0157]

[0158] 5. Overall mounting: building a complete DOM tree

[0159] 1. Root node association

[0160] Execution logic:

[0161] Add the rendered input and output areas to the root layout container to form a complete interface structure:

[0162] javascript

[0163] const rootContainer=document.getElementById('root');

[0164] rootContainer.appendChild(layoutElement); / / layoutElement contains input / output areas

[0165] 2. Browser rendering trigger

[0166] Key actions:

[0167] When the root node is mounted to document.body, the browser triggers reflow and repaint to render the DOM structure into a visible interface.

[0168] Optionally, establishing a data link for interaction between the front-end component and the back-end in the static front-end interface includes: building a data link for interaction between the front-end component and the back-end AIGC workflow interface in the static front-end interface, including:

[0169] Bind event listeners to front-end components in the static front-end interface to obtain input components with event response capabilities;

[0170] Configure the event listener to detect event triggering of the input component, and call the data formatting interface registered through the resource pool inside the component to generate a data object that meets the requirements of the backend API;

[0171] Generate executable API request configuration based on data objects and backend AIGC workflow interface;

[0172] Based on the executable API request configuration, a data link is constructed for the interaction between the front-end components in the static front-end interface and the back-end AIGC workflow interface.

[0173] To this end, in this step, an event listener is bound to the front-end component, user input data is collected and formatted into data objects that meet the requirements of the back-end API, a communication channel with the back-end is established and data is sent. Consistent with the above principles, a data link for front-end and back-end interaction is built to ensure that data can be accurately transmitted between the front-end component and the back-end AIGC workflow interface.

[0174] In summary, the above solution establishes a standardized communication mechanism between front-end components and back-end APIs through an event-driven data pipeline. Its core principle can be broken down into the following four key stages:

[0175] 1. Event Binding: Converting Component Behavior into Data Flow Trigger Points

[0176] 1. Component interface standardization

[0177] Technical moves:

[0178] All input components (such as UploadImgComponent) must implement a unified on(eventType, callback) interface to register event listeners.

[0179] Implementation principle:

[0180] When the component is instantiated, specific events (such as change, click) are bound according to the configuration, for example:

[0181]

[0182]

[0183] 2.DOM Event Mapping

[0184] Execution logic:

[0185] When rendering a component, map the business event to a DOM native event, for example:

[0186]

[0187] 2. Data Formatting: Converting User Input into API Request Format

[0188] 1. Component internal interface registration

[0189] Technical moves:

[0190] Each component needs to provide the formatData() interface when registering in the resource pool to convert user input into a format recognizable by the backend API.

[0191] Implementation example:

[0192]

[0193] 2. Unified Data Collector

[0194] Execution logic:

[0195] When the event is triggered, all input component data is collected by calling the formatData() method on the component instance, for example:

[0196]

[0197] Request Generation: Configuration-Driven API Calls

[0198] 1. API Configuration Mapping

[0199] Technical moves:

[0200] Define API endpoints, request methods, parameter mappings, and other information through configuration files. For example:

[0201]

[0202] 2. Request configuration generation

[0203] Implementation logic:

[0204] Combine the collected form data with the API configuration to generate an executable request object, for example:

[0205]

[0206] 4. Data Link Integration: Building an End-to-End Communication Pipeline

[0207] 1. Event-Request Pipeline

[0208] Technology Integration:

[0209] Connect event listeners, data formatting, and request generation into a unified process, for example:

[0210]

[0211] 2. Two-way data flow

[0212] Backend response processing:

[0213] Define unified response processing logic to map backend results to output components, for example:

[0214]

[0215] Optionally, obtain the backend's response to the user input data through the data link, including:

[0216] In response to user input data, an event listener of a target front-end component is triggered to generate component data;

[0217] Format component data to generate user input data objects;

[0218] Create an HTTP client instance based on the user input data object and configure communication parameters to generate API requests to be responded to;

[0219] The API request to be responded to is negotiated to match the corresponding AIGC workflow to generate a response result.

[0220] To this end, on the basis of establishing a data link, when user input triggers a front-end event and the data is sent to the back-end, the back-end completes processing and returns the result to the front-end. The front-end receives the response result through the data link and provides data for subsequent interface updates.

[0221] To this end, the above solution uses an event-driven data transmission pipeline and standardized protocol adaptation to achieve the automated flow and processing of user input data from the front-end to the back-end. Its core principle can be broken down into the following four execution phases:

[0222] 1. Event triggering and data collection: Converting user behavior into machine-processable data

[0223] 1. Event-driven data collection mechanism

[0224] Technical moves:

[0225] When the user operates the front-end component (such as clicking the upload button or entering text), the event listener bound to the component (such as change, input) is triggered, and the data collection interface inside the component is called to generate the original component data.

[0226] Implementation principle:

[0227] The input component encapsulates user input as event parameters (such as image file objects and text strings) through the this.trigger('change',data) method;

[0228] The data collection logic is decoupled from the components, and the data of each component is collected through a unified event bus. For example:

[0229]

[0230] 2. Data structuring and verification

[0231] Technical moves:

[0232] The original component data is structured (such as converting a file object into a Base64 string) and its validity is verified according to the configuration rules (such as the required field).

[0233] Output:

[0234] Generates a component data collection that conforms to business logic (such as {originImg:fileData,targetImg:fileData}).

[0235] 2. Data Formatting: Building a Request Carrier Recognizable by the Backend

[0236] 1. Protocol Adaptation Layer Design

[0237] Technical moves:

[0238] The component data is converted into the format required by the backend API (such as a JSON object) through the data formatting interface, and metadata (such as the workflow identifier workflowKey) is added.

[0239] Implementation example:

[0240]

[0241]

[0242] 2. Request parameter standardization

[0243] Technical essence:

[0244] Define field mapping rules (such as the correspondence between fieldName and backend interface parameter name) through configuration files (such as front-end component configuration data) to ensure accurate matching of data fields.

[0245] 3. API Request Generation and Sending: Establishing a Standardized Communication Link

[0246] 1. HTTP client instantiation

[0247] Technical moves:

[0248] Create an HTTP client instance (such as using fetch or axios) based on the backend interface information (such as URL and request method) and configure communication parameters (such as request header and timeout).

[0249] Implementation logic:

[0250]

[0251] 2. Request sending and loading feedback

[0252] User experience optimization:

[0253] Update the interface status before sending the request (such as disabling the submit button and displaying a loading spinner) to ensure that the user is aware of the progress of the operation:

[0254] javascript

[0255] / / Update the interface status before sending the request

[0256] submitButton.disabled=true;

[0257] loadingIndicator.style.display='block';

[0258] 4. Backend Processing and Response Receiving: Data-Driven Workflow Matching

[0259] 1. Workflow routing and algorithm calling

[0260] Technical moves:

[0261] After receiving the request, the backend matches the corresponding AIGC workflow (such as the image face-changing process) according to the workflowKey (such as hl_flow) and calls the algorithm model to process the input data (such as using the GAN model to generate face-changing images).

[0262] Implementation principle:

[0263] The backend distributes requests to specific workflow processors through a routing mechanism:

[0264]

[0265] 2. Response parsing and result encapsulation

[0266] Technical moves:

[0267] The backend encapsulates the processing results (such as the URL of the synthesized image) into a standardized response format (such as a JSON object containing an outputs array) and returns it to the frontend:

[0268]

[0269] Optionally, based on the response result and the front-end component resource pool, the front-end component is updated to form a front-end AIGC interaction interface, including:

[0270] Parse the response results and determine the array elements therein to generate a structured result list;

[0271] Find a front-end component constructor that matches the structured result list from the front-end component resource pool to generate a component implementation example instruction item;

[0272] Based on the component embodiment instruction item, a front-end component DOM node is generated to be inserted into the output area DOM container and the output area is dynamically rendered to form a front-end AIGC interaction interface.

[0273] To this end, after receiving the back-end response result, the result is parsed to determine the component type and value, the corresponding output component constructor is obtained from the front-end component resource pool, a component instance is created and rendered to the output area, the original placeholder content is replaced, the front-end component is updated, and finally a complete and interactive AIGC front-end interface is formed.

[0274] In a specific application scenario, based on the above solution, the dynamic construction and intelligent response of the AIGC interactive interface are achieved by configuring the driver component architecture and the front-end and back-end data closed loop. The specific principles are explained as follows with code and pictures:

[0275]

[0276]

[0277] 1. Configuration-driven component architecture: decoupling interface logic from code implementation

[0278] 1. Component standardization and resource pool mechanism

[0279] Technical essence: Abstract common interactions in AIGC scenarios into standardized components (such as the uploadImg image upload component), and manage the creation logic of component instances through the component resource pool.

[0280] Code Mapping:

[0281] In the input configuration, type: "uploadImg" corresponds to the image upload component constructor in the component resource pool. The data field is uniquely identified by fieldName (such as originImg) to achieve field alignment between the component and the backend interface.

[0282] In the output configuration, type:"image" triggers the resource pool to call the image display component and render the image URL in the value field (such as https: / / tec-creative-os.tec-do.cn / ... / lss.jpg).

[0283] Image content related:

[0284] The image URL (such as lss.jpg, lyf.jpeg) is transmitted as the component value, and the front-end component automatically resolves it into an image tag based on the type. , reflecting the core logic of "configuration defines component behavior".

[0285] 2. Configure the parsing engine: automatic translation from JSON to UI

[0286] Technical essence: Dynamically generate DOM structure and component instances by parsing the layout, component list, and output properties in the JSON configuration.

[0287] Code mapping: layout: "leftInputRightOutput" drives the interface into left and right partitions, rendering input components (such as two uploadImg components) on the left and reserving the output area on the right.

[0288] The label (such as "Original Image") and required attributes of the input component directly determine the label text and required validation logic displayed on the interface, without the need for hard coding.

[0289] Execution process: Configure the parsing engine to convert JSON fields into component rendering instructions, for example:

[0290] javascript

[0291] / / Create a component instance based on type

[0292] const component=componentPool.create(type,{fieldName,label,required});

[0293] 2. Closed-loop data flow between front-end and back-end: Automated flow from user input to AIGC results

[0294] 1. Standardized interaction of data links

[0295] Technical essence: Collect user input through event monitoring, format it into JSON data according to fieldName (such as {originImg:file,targetImg:file}), and transmit it to the backend AIGC workflow (such as the face-changing process identified by workflowKey:"hl_flow") through the HTTP protocol.

[0296] Code Mapping:

[0297] The change event of the input component triggers data collection and generates a JSON object that meets the requirements of the backend interface. For example:

[0298]

[0299] The outputs array returned by the backend (such as type: "image", value: synthetic image URL) drives the frontend to dynamically render the result component.

[0300] 2. Dynamic rendering and interactive closed loop

[0301] Technical essence: Based on the result type returned by the backend, the output component (such as the image display component) is matched from the component resource pool to achieve an automated closed loop of "input-processing-display".

[0302] Image content related:

[0303] Output the value field in the configuration (such as the composite image URL https: / / tec-creative-os.tec-do.cn / ai_workflow / ) as a component parameter and call ImageDisplayComponent to render it. <img src＝"..."> , users can see the AIGC generation results without refreshing the page.

[0304] Interaction logic:

[0305] The interface generates input forms and result display areas through configuration drivers. User operations (such as uploading pictures) trigger data links, and the interface is automatically updated after back-end processing is completed, forming a complete interactive chain of "user operation → data transmission → intelligent generation → dynamic display".

[0306] In summary, by defining the interface structure, component behavior, and data flow logic through configuration files (JSON), the code logic in traditional front-end development is converted into editable configuration parameters, allowing non-technical personnel to adjust the interface by modifying JSON fields (such as label, type) without having to write HTML / JavaScript code. Moreover, general component libraries (such as uploadImg, image) can be reused across scenarios, and diverse AIGC needs (such as digital population broadcasting, picture face-changing) can be met through configuration combinations. In addition, both user input and back-end results are transferred in the form of structured data (JSON), and the front-end automatically matches component rendering according to the data type to achieve seamless mapping of "data to interface".

[0307] join Figure 2 The "AIGC Component Configuration Requirements" document includes front-end components (component types, optional component options), configuration rules (input area, output area, component-related rules), and relevant JSON for application scenarios (video analysis, TikTok video analysis, YouTube video analysis, page-generated video, text-driven digital humans, etc.). It defines the configuration specifications for AIGC components, providing a basis for building the front-end component resource pool and parsing configuration data. It clarifies different component types and their configuration methods, as well as JSON configuration examples for different application scenarios, serving as the foundational guidelines for component configuration throughout the solution.

[0308] See also Figure 3-Figure 8, configured with an audio-driven digital human: The left input area contains the "Original Audio" upload component, showing the uploaded audio file as jmx2095.mp3, and a "Digital Human Role" selection. The right output area displays the "Generation Results," showing a digital human in a specific scene. Vincent Digital Human: The left input area contains the "Spoken Text" input box, the "Target Language" selection, and the "Digital Human Role" selection. The right output area displays the "Generation Results," showing the digital human image.

[0309] Video Face Swap: The left input area contains the "Original Video" and "Face Swap Image" upload components, as well as a "Resolution Selection" drop-down box. The right output area displays the "Generated Result," which is the video playback screen after the face swap.

[0310] Image Face Swapping: The left input area contains the "Original Image" and "Face Swapping Image" upload components, as well as a "Resolution Selection" drop-down box. The right output area displays the "Generated Result," which shows the image after the face swap.

[0311] YouTube Video Analysis: The left input area contains a "YouTube Video Link" input box. The right output area displays the "Video Storyboard Analysis" results, including storyboard time, image description, and audio description.

[0312] AI Dubbing: The left input area contains the "Narration Text" input box, along with "Dub Language" and "Dub Role" selection options. The right output area displays the "Generation Results" interface, which is an audio playback interface with a progress bar.

[0313] Interpretation: These interfaces demonstrate the user interaction interfaces in different AIGC application scenarios, clarifying the application forms of input components (such as file upload, text input, drop-down selection boxes, etc.) and output components (such as video playback, image display, text display, etc.) in actual scenarios. They are the specific interactive interface forms finally presented by the solution.

[0314] To this end, when implementing the above solution of this application, a front-end component resource pool is constructed: the AIGC general component library is parsed according to the component types defined in the "AIGC Component Configuration Requirements" document. The constructors, property configuration items, and public interfaces of various input components (such as audio upload, text input, image upload, etc.) and output components (such as video playback, image display, etc.) are registered to the component resource pool in memory, and a mapping index is established. For example, register the constructor of the "audio upload" component so that it can be instantiated later according to the configuration.

[0315] Parse the front-end component configuration data: According to the configuration rules in the document, parse the front-end component configuration data of different application scenarios (such as Vincent Digital Human, video face-changing, etc.). Determine the interface layout from the layout description field, such as the common left-input and right-output layout; determine the properties of each input component (such as fieldName, label, required, etc.) and the matching constructor in the component resource pool from the input component description array; parse the placeholder copy and title and other information from the output description field, generate layout instructions, component instantiation parameters and the initial configuration of the output area, and finally form a parsing result set. For example, in the Vincent Digital Human scenario, parse the relevant properties and constructor of the "spoken text" input box, as well as the placeholder copy of the output area.

[0316] Generate a static front-end AIGC interface: Perform preliminary rendering of the front-end interface based on the front-end component resource pool and the parsed result set. Create the page root DOM element according to the layout instructions, divide the input area and output area, and generate the basic layout DOM structure; based on the input component instantiation parameter set, obtain the corresponding constructor from the component resource pool and pass in the initialization parameters to create a component instance, generate DOM nodes, and form an input component DOM node set. These nodes are then inserted into the input area container in the configured order, and the input area component is rendered to form a user input form; set the text content and attributes for the output area initial configuration set, and render the output area placeholder; finally, associate the user input form and the rendered output area with the basic layout DOM structure and mount it on the browser to form a static front-end AIGC interface. For example, in a video face-swapping scenario, build the video and image upload components for the input area, as well as the placeholder display for the output area.

[0317] Establishing a data link: Bind an event listener to the front-end component in the static front-end interface to enable it to respond to events. When an event is triggered, the data formatting interface registered through the resource pool inside the component is called to generate a data object that meets the requirements of the back-end API. Based on the data object and the back-end AIGC workflow interface, an executable API request configuration is generated to build a data link for front-end and back-end interaction. For example, in the face-swapping scenario, when the user uploads the original image and the face-swapping image, the event listener is triggered, the image data is formatted into a data object that the back-end can recognize, and a request is sent.

[0318] Obtaining the backend response: When user input data triggers the frontend component's event listener, component data is generated and formatted to create a user input data object. Based on this object, an HTTP client instance is created and communication parameters are configured. The API request is generated and sent to the backend. After the backend completes processing, the response is returned to the frontend via a data link. For example, in an AI dubbing scenario, the frontend sends data such as narration text to the backend, which processes and returns the generated audio data.

[0319] Update the front-end components to create an interactive interface: Parse the response returned by the backend, identify the array elements, and generate a structured result list. Find the front-end component constructor that matches the structured result list from the front-end component resource pool and generate component instance directives. Based on the directives, generate the front-end component DOM node and insert it into the output area DOM container for dynamic rendering, forming the front-end AIGC interactive interface. For example, in a YouTube video analysis scenario, after the back-end returns the video storyboard analysis results, the front-end updates the output area based on the results to display the detailed analysis content.

[0320] The above embodiments are only used to illustrate the embodiments of the present invention, and are not intended to limit the embodiments of the present invention. Ordinary technicians in the relevant technical field can make various changes and modifications without departing from the spirit and scope of the embodiments of the present invention. Therefore, all equivalent technical solutions also fall within the scope of the embodiments of the present invention, and the scope of patent protection of the embodiments of the present invention should be defined by the claims. The systems, devices, modules or units described in the above embodiments are specifically implemented by computer chips or entities, or by products with certain functions.

Claims

1. A method for building an AIGC interactive interface based on pure configuration, characterized in that: include: Build a callable front-end component resource pool; Parse the front-end component configuration data to generate a parsing result set; Generate a static front-end AIGC interface including front-end components based on the front-end component resource pool and the parsing result set; Establish a data link between the front-end components and the back-end in the static front-end interface; Obtain the backend's response to the user input data through the data link; Based on the response results and the front-end component resource pool, the front-end components are updated to form the front-end AIGC interaction interface.

2. The method for building an AIGC interactive interface based on pure configuration according to claim 1, characterized in that: Constructing a dynamically callable front-end component resource pool, including: parsing the AIGC general component library to construct a dynamically callable front-end component resource pool in memory.

3. The method for building an AIGC interactive interface based on pure configuration according to claim 2, characterized in that: Parse the AIGC universal component library to build a dynamically callable front-end component resource pool in memory, including: accessing the AIGC universal component library code file in the local or remote warehouse and parsing it to register the constructor, property configuration items and public interface of each front-end component to the component resource pool in memory, and establish a mapping index between different types of front-end components and actual component codes in the component resource pool to form a dynamically callable front-end component resource pool.

4. The method for building an AIGC interactive interface based on pure configuration according to claim 3, characterized in that: The front-end component includes at least an input component and an output component, the input component includes at least any one of text input, card selection, radio button group, image / video / audio upload, and link resolution components, and the output component includes at least any one of video playback, image display, text display, and audio playback components.

5. The method for building an AIGC interactive interface based on pure configuration according to claim 1, characterized in that: Parsing the front-end component configuration data to generate a parsing result set includes: parsing the front-end component configuration data to generate a parsing result set, which includes: layout instructions, component instantiation parameters and output area initial configuration, including: Parse the layout description field in the front-end component configuration data to match it with the preset layout template to generate the corresponding DOM structure description and form a layout instruction set accordingly; Parse the input component description array and the front-end component resource pool in the front-end component configuration data, and determine the component constructor that matches the component properties in the front-end component resource pool; Associating component properties with their corresponding constructors to generate component instantiation parameter objects and forming input component instantiation parameter sets accordingly; Parsing the placeholder text and title from the output description field in the front-end component configuration data, generating the initial attribute configuration of the output area based on the placeholder text and title, and forming the initial configuration set of the output area accordingly; The layout instruction set, the input component instantiation parameter set, and the output region initial configuration set are structured to generate a parsing result set.

6. The method for building an AIGC interactive interface based on pure configuration according to claim 1, characterized in that: Based on the front-end component resource pool and the parsing result set, a static front-end AIGC interface including the front-end components is generated, including: performing preliminary rendering of the front-end interface according to the front-end component resource pool and the parsing result set to present the static front-end AIGC interface including the front-end components in the browser, including: Create the root DOM element of the page based on the layout instruction set in the parsed result set, and divide the input area and output area according to the layout rules to generate the basic layout DOM structure; According to the input component instantiation parameter set in the parsing result set, the corresponding constructor is obtained from the component resource pool and the initialization parameters are passed in to create a component instance, so as to generate DOM nodes in the same way as the instance is called, and thus form an input component DOM node set, which is the component element not mounted on the page; For the input component DOM node set and the input area container in the basic layout DOM structure, insert the DOM node of each input component into the input area container in the configuration order to render the input area component and form a visible user input form; Set the text content and properties for the output area initial configuration set in the parsing result set to perform output area placeholder rendering; The user input form and the rendered output area are associated with the basic layout DOM structure and mounted on the browser to form a static front-end AIGC interface including front-end components.

7. The method for building an AIGC interactive interface based on pure configuration according to claim 1, characterized in that: Establishing a data link for the front-end components in the static front-end interface to interact with the back-end, including: Building a data link for the front-end components in the static front-end interface to interact with the back-end AIGC workflow interface, including: Bind event listeners to front-end components in the static front-end interface to obtain input components with event response capabilities; Configure the event listener to detect event triggering of the input component, and call the data formatting interface registered through the resource pool inside the component to generate a data object that meets the requirements of the backend API; Generate executable API request configuration based on data objects and backend AIGC workflow interface; Based on the executable API request configuration, a data link is constructed for the interaction between the front-end components in the static front-end interface and the back-end AIGC workflow interface.

8. The method for building an AIGC interactive interface based on pure configuration according to claim 1, characterized in that: Obtain the backend's response to user input data through the data link, including: In response to user input data, an event listener of a target front-end component is triggered to generate component data; Format component data to generate user input data objects; Create an HTTP client instance based on the user input data object and configure communication parameters to generate API requests to be responded to; The API request to be responded to is negotiated to match the corresponding AIGC workflow to generate a response result.

9. The method for building an AIGC interactive interface based on pure configuration according to claim 1, characterized in that: Based on the response results and the front-end component resource pool, the front-end components are updated to form the front-end AIGC interaction interface, including: Parse the response results and determine the array elements therein to generate a structured result list; Find a front-end component constructor that matches the structured result list from the front-end component resource pool to generate a component implementation example instruction item; Based on the component embodiment instruction item, a front-end component DOM node is generated to be inserted into the output area DOM container and the output area is dynamically rendered to form a front-end AIGC interaction interface.

Images