AI chat interface construction method, device, terminal and storage medium

Abstract

The embodiments of the present application disclose a method, device, terminal and storage medium for building an AI chat interface. The solution can encapsulate the React component using a preset component library, and combine the built-in components of the preset component library to complete the construction of the user interface of the AI ​​chat system, adjust the parameters in the user interface through the first preset framework, integrate the preset natural language processing model in the back end to process the request received by the user interface, and perform state management through the first state management library and the second state management library during the operation of the AI ​​chat system. In terms of user interface design, state management and responsiveness, the solution provided by the embodiments of the present application innovatively integrates the functions of the component library, state management library and Tailwind CSS framework, while achieving customization and flexibility, while enhancing the performance and functionality of the application.

Description

Technical Field

[0001] The present application relates to the field of data processing technology, and specifically to a method, device, terminal and storage medium for building an AI chat interface. Background Art

[0002] With the continuous development of science and technology, AI virtual technology has also made great strides. AI chatbots can provide natural language processing, machine learning, and chat interaction functions for user services. They combine machine learning with symbolic reasoning and aim to automatically respond to applications including repeated queries, consulting questions and answers, to provide users with a better experience and provide attractive and efficient technical support.

[0003] During actual use, the applicant found that the existing technical solutions mainly focus on using traditional front-end frameworks and technology stacks to build AI chat interfaces. These solutions usually include the use of frameworks based on Vue.js or Angular, combined with traditional CSS layout and state management libraries (such as Redux or Vuex) to implement chat interfaces. The construction of chat interfaces often adopts more traditional component libraries, such as Bootstrap or Semantic UI. Although these libraries provide a certain degree of visual beauty and basic responsive layout, they are weak in customization and flexibility, and usually cannot adapt well to the operating habits and device characteristics of different users. In addition, for the problem of state management, existing solutions are often cumbersome and inefficient in dealing with scenarios with frequent updates and multi-source data. Summary of the invention

[0004] The embodiments of the present application provide an AI chat interface building method, device, terminal and storage medium. In terms of user interface design, state management and responsiveness, the functions of the React framework, Material UI, Jotai and Valtio state management library and Tailwind CSS framework are innovatively integrated to achieve customization and flexibility while enhancing the performance and functionality of the application.

[0005] The present application embodiment provides a method for building an AI chat interface, including:

[0006] The React component is encapsulated by using a preset component library, and the built-in components of the preset component library are combined to complete the construction of the user interface of the AI ​​chat system;

[0007] Adjusting parameters in the user interface through a first preset framework;

[0008] Integrating a preset natural language processing model in the backend to process requests received by the user interface;

[0009] During the operation of the AI ​​chat system, state management is performed through the first state management library and the second state management library.

[0010] The embodiment of the present application also provides an AI chat interface building device, including:

[0011] A design unit, used to encapsulate the React component using a preset component library, and to complete the construction of the user interface of the AI ​​chat system by combining the built-in components of the preset component library;

[0012] An adjustment unit, configured to adjust parameters in the user interface through a first preset framework;

[0013] A processing unit, configured to integrate a preset natural language processing model in a backend to process a request received by the user interface;

[0014] The management unit is used to perform state management through the first state management library and the second state management library during the operation of the AI ​​chat system.

[0015] An embodiment of the present application also provides a terminal, which includes: a memory and a processor, wherein an application processing program is stored in the memory, and when the application processing program is executed by the processor, the steps of the AI ​​chat interface building method provided in any one of the embodiments of the present application are implemented.

[0016] An embodiment of the present application also provides a computer-readable storage medium, which stores multiple instructions, and the instructions are suitable for a processor to load to execute any AI chat interface building method provided in the embodiment of the present application.

[0017] The AI ​​chat interface construction method provided in the embodiment of the present application can use a preset component library to encapsulate React components, and combine the built-in components of the preset component library to complete the construction of the user interface of the AI ​​chat system, adjust the parameters in the user interface through the first preset framework, integrate a preset natural language processing model in the back end to process the requests received by the user interface, and perform state management through the first state management library and the second state management library during the operation of the AI ​​chat system. In terms of user interface design, state management and responsiveness, the solution provided in the embodiment of the present application innovatively integrates the functions of the component library, the state management library and the Tailwind CSS framework, while achieving customization and flexibility, while enhancing the performance and functionality of the application. BRIEF DESCRIPTION OF THE DRAWINGS

[0018] In order to more clearly illustrate the technical solutions in the embodiments of the present application, the drawings required for use in the description of the embodiments will be briefly introduced below. Obviously, the drawings described below are only some embodiments of the present application. For those skilled in the art, other drawings can be obtained based on these drawings without creative work.

[0019] Figure 1 This is a first flow chart of the AI ​​chat interface construction method provided in the embodiment of the present application;

[0020] Figure 2 It is a schematic diagram of the state flow in state management provided by an embodiment of the present application;

[0021] Figure 3 This is a second flow chart of the AI ​​chat interface building method provided in the embodiment of the present application;

[0022] Figure 4 This is a structural diagram of an AI chat interface building device provided in an embodiment of the present application;

[0023] Figure 5 It is a schematic diagram of the structure of the terminal provided in the embodiment of the present application. DETAILED DESCRIPTION

[0024] Exemplary embodiments will be described in detail herein, examples of which are shown in the accompanying drawings. When the following description refers to the drawings, the same numbers in different drawings represent the same or similar elements unless otherwise indicated. The implementations described in the following exemplary embodiments do not represent all implementations consistent with the present application. Instead, they are merely examples of devices and methods consistent with some aspects of the present application as detailed in the appended claims.

[0025] It should be noted that, in this article, the terms "include", "comprises" or any other variants thereof are intended to cover non-exclusive inclusion, so that a process, method, article or device including a series of elements includes not only those elements, but also includes other elements not explicitly listed, or also includes elements inherent to such process, method, article or device. In the absence of further restrictions, an element defined by the sentence "includes a ..." does not exclude the existence of other identical elements in the process, method, article or device including the element. In addition, components, features, and elements with the same name in different embodiments of the present application may have the same meaning or different meanings, and their specific meanings need to be determined by their explanation in the specific embodiment or further combined with the context of the specific embodiment.

[0026] It should be understood that, although the various steps in the flowchart in the embodiment of the present application are displayed in sequence according to the indication of the arrows, these steps are not necessarily performed in sequence according to the order indicated by the arrows. Unless there is a clear explanation in this article, the execution of these steps does not have a strict order restriction, and it can be performed in other orders. Moreover, at least a portion of the steps in the figure may include a plurality of sub-steps or a plurality of stages, and these sub-steps or stages are not necessarily performed at the same time, but can be performed at different times, and their execution order is not necessarily performed in sequence, but can be performed in turn or alternately with other steps or at least a portion of the sub-steps or stages of other steps.

[0027] It should be noted that, in this article, step codes such as 101, 102, etc. are used for the purpose of expressing the corresponding content more clearly and concisely, and do not constitute a substantial limitation on the sequence. When implementing the step, those skilled in the art may execute 102 first and then 101, etc., but these should all be within the scope of protection of this application.

[0028] Reference to "embodiments" herein means that a particular feature, structure, or characteristic described in conjunction with the embodiments may be included in at least one embodiment of the present application. The appearance of the phrase in various locations in the specification does not necessarily refer to the same embodiment, nor is it an independent or alternative embodiment that is mutually exclusive with other embodiments. It is explicitly and implicitly understood by those skilled in the art that the embodiments described herein may be combined with other embodiments.

[0029] An embodiment of the present application provides an AI chat interface building method. The executor of the AI ​​chat interface building method can be the AI ​​chat interface building device provided in the embodiment of the present application, or an intelligent terminal and server integrated with the AI ​​chat interface building device, wherein the AI ​​chat interface building device can be implemented in hardware or software.

[0030] Before describing the technical solution of this application, a brief explanation of the relevant technical terms is given first:

[0031] React: A JavaScript library for building user interfaces. Originated from an internal project at Facebook, the React framework is increasingly used in modern front-end development projects. The grammatical structure of the framework also deeply influences the ideas and concepts of other frameworks in design.

[0032] Material UI: Material UI is a React-based UI component library that implements Google's Material Design design specification and provides a series of beautiful and customizable UI components. Material UI is available in the form of npm packages.

[0033] Jotai: Used to build React applications. It provides a simple and extensible way to manage the state in your application. Its design is inspired by Recoil, but it uses a more simplified and intuitive API. The core concepts of Jotai are atoms and derived atoms.

[0034] Valtio: is a lightweight state management library designed for React applications. It provides a simple and intuitive way to manage the state of the application and is tightly integrated with React's lifecycle and rendering mechanism. Valtio is designed to make state management simple, predictable, and efficient. It uses an agent-based observation mechanism to monitor and trigger state changes by wrapping the state object in a proxy object.

[0035] Tailwind CSS: is a practical CSS framework that is highly customizable and practical. Compared with other frameworks, Tailwind CSS provides a set of atomic CSS classes, which allows developers to flexibly combine and customize styles.

[0036] Yjs framework: is an open source framework for implementing real-time collaborative editing. It is based on the OT (Operational Transformation) algorithm or the CRDT (Conflict-free Replicated Data Type) algorithm, which allows multiple users to collaborate when editing a document or data structure at the same time without conflicts or data loss.

[0037] Node.js: It is a JavaScript runtime environment based on the Chrome V8 engine. It uses an event-driven, non-blocking I / O model to run JavaScript on the server-side development platform. It makes JavaScript a scripting language on par with server-side languages ​​such as PHP, Python, Perl, and Ruby. Node.js optimizes some special use cases and provides alternative APIs to make V8 run better in non-browser environments. The V8 engine executes JavaScript very quickly and has very good performance. It is a platform built on the Chrome JavaScript runtime, which is used to easily build fast-response, easy-to-expand network applications.

[0038] In the Internet environment of existing technologies, traditional front-end frameworks and technology stacks are generally used to build AI chat interfaces (user interfaces). These solutions usually include the use of frameworks such as Vue.js or Angular, combined with traditional CSS layouts and state management libraries (such as Redux or Vuex) to implement chat interfaces. In these existing technologies, chat interfaces are often built using more traditional component libraries. Although these libraries provide a certain degree of visual beauty and basic responsive layout, they are not as customizable and flexible as modern solutions such as Tailwind CSS. In addition, state management is usually handled by a single global state management library, such as Redux, which is also weak in handling large amounts of dynamic data and real-time updates. In terms of real-time collaboration, existing technologies mostly rely on basic WebSocket implementations, so there may be limitations in the real-time and accuracy of multi-user collaborative editing and data synchronization. There are several key shortcomings in the existing technologies in building AI chat interfaces, which limit the performance, user experience, and functional scalability of applications.

[0039] Based on this, the embodiment of the present application provides a new method for building an AI chat interface. By integrating TailwindCSS with the functions of Material UI, it not only provides a high degree of customization and modernity in terms of interface aesthetics and interaction, but also ensures the consistency and fluency of the AI ​​chat interface on different devices and screen sizes. For the problem of state management, Jotai provides a more lightweight and efficient state management method, which is particularly suitable for front-end applications that require fast response. The functional integration with Valtio further optimizes the efficiency of state sharing and updating, especially in real-time multi-user interaction scenarios, this state management strategy shows more powerful performance and flexibility. Regarding real-time collaboration functions, the present application solution integrates the functions of Yjs, which not only significantly improves the efficiency and accuracy of data synchronization, but also introduces more advanced collaboration mechanisms, such as operation conversion and automatic conflict resolution, which is essential to improving the experience of multiple users editing the same document or participating in the same chat session at the same time.

[0040] For details, please refer to Figure 1 , Figure 1 This is a first flow chart of the AI ​​chat interface construction method provided in the embodiment of the present application. The specific flow of the AI ​​chat interface construction method can be as follows:

[0041] 101. Use a preset component library to encapsulate the React component, and combine the built-in components of the preset component library to complete the construction of the user interface.

[0042] Among them, in the React application, the preset component library can be Material UI, which provides developers with reusable components. By encapsulating the components of the React application (i.e., React components) through Material UI, developers can more easily build beautiful and responsive user interfaces.

[0043] In one embodiment, Material UI is used to encapsulate React components, that is, the components and styles provided by Material UI are used to wrap or enhance React components. Specifically, based on the existing React components, by introducing the components and styles of Material UI, the React components have the style and interactive effects of Material Design, and some additional functions or attributes may also be added.

[0044] In addition, Material UI provides a rich set of built-in components with specific functions and styles. When encapsulating React components, you can directly use Material UI's built-in components to build user interfaces without having to write all the UI code from scratch. For example, use Material UI's Button component to create a button with a specific style and interactive effects, without the developer having to write CSS styles and JavaScript interaction logic to implement a button.

[0045] In one embodiment, developers can use the following steps to apply Material UI components to React applications:

[0046] 1. Introduce Material UI style: Introduce Material UI's CSS file into the project, or use the style plug-in provided by Material UI in the project.

[0047] 2. Introduce Material UI components: Introduce Material UI components such as TextField, Button, etc. into React components.

[0048] 3. Configure Material UI components: Set properties for Material UI components, such as style, color, size, etc.

[0049] 4. Custom components: If necessary, developers can create custom components based on Material UI components to meet specific needs.

[0050] 5. Integrated routing and state management: If necessary, you can integrate Material UI components with routing libraries such as React Router and state management libraries such as Redux to achieve more complex functions.

[0051] By adopting component libraries such as Material UI, React developers can more efficiently build beautiful, responsive, and easy-to-maintain user interfaces. At the same time, Material UI's rich components and good community support also provide strong support for developers.

[0052] 102. Adjust parameters in the user interface through a first preset framework.

[0053] In one embodiment, the first preset framework may be a Tailwind CSS framework, and the user interface is optimized and adjusted by the Tailwind CSS framework to improve the user experience, specifically including the following contents:

[0054] 1. Interface layout optimization

[0055] In the Tailwind CSS framework, you can use a flexible grid system to adjust the user interface layout. By simply applying class names such as "grid-template-columns" and "grid-gap", you can easily create a responsive layout so that page elements appear optimally on different devices.

[0056] 2. Typography

[0057] Tailwind CSS provides a wealth of text style presets, which can customize fonts, font sizes, colors, and line spacing as needed. Proper use of typography can improve the user's reading experience when browsing the user interface.

[0058] 3. Buttons and form elements

[0059] Buttons and form elements are vital components of user interfaces. With Tailwind CSS, you can easily create attractive button and form styles. For example, you can create a blue button with the "bg-blue-500" class name and set rounded corners with the "border-radius" class name. At the same time, you can also customize the appearance of elements such as form input boxes, selection boxes, and submit buttons.

[0060] 4. Navigation Bar and Links

[0061] Navigation bars and links are an integral part of the user interface. Tailwind CSS provides useful styles for creating navigation bars and links. By applying the "text-decoration-line" class name, you can set the underline style of the links. At the same time, you can also set the vertical spacing of the navigation bar using the "py-2" class name, and set the bold font of the navigation bar items using the "font-bold" class name.

[0062] 5. Componentization

[0063] To improve the maintainability and reusability of the code, you can componentize the interface elements. Tailwind CSS provides a variety of component styles, such as cards, lists, tables, etc. By creating custom components, you can easily combine interface elements together to build a beautiful and practical user interface.

[0064] 6. Responsive Design

[0065] With the popularity of mobile devices, responsive design is becoming more and more important. Tailwind CSS has built-in rich responsive class names, such as "sm:flex", "md:flex" and "lg:flex". By using these class names properly, you can ensure that interface elements present the best layout on different devices.

[0066] 7. Color and background

[0067] Color and background are crucial to user interface design. Tailwind CSS provides a variety of color and background styles, such as "bg-blue-500", "bg-gray-100", etc. You can choose different colors and backgrounds according to your needs to add a personalized style to the user interface.

[0068] 8. States and Animations

[0069] States and animations can make page elements more interactive. Tailwind CSS provides a variety of state class names, such as "active", "disabled", and "focused". In addition, you can also animate interface elements by applying the "animate" class name.

[0070] In summary, by adjusting the user interface with the Tailwind CSS framework, you can easily create a beautiful, practical, and user-friendly interface. In actual projects, you can flexibly use the styles and components provided by Tailwind CSS according to your needs to create a satisfactory user interface.

[0071] 103. Integrate a preset natural language processing model in the backend to process the requests received by the user interface.

[0072] The embodiments of the present application also demonstrate advantages in processing dynamic content and natural language processing (NLP) integration. By leveraging the flexibility of React and the powerful component library of Material UI, complex AI functions such as chatbots, natural language understanding, and sentiment analysis can be integrated more easily, thereby providing users with a more intelligent and humanized interactive experience.

[0073] Specifically, you can first select a suitable backend framework, such as Node.js, Python's Flask or Django, and build the model according to the project requirements. On this basis, use the machine learning framework (such as TensorFlow, PyTorch, etc.) to train the corresponding preset natural language processing model (AI model). These preset natural language processing models can include text classification, entity recognition, sentiment analysis, etc. to meet the needs of different scenarios. For example, when building a text classification model, you can use annotated text data sets (such as news article classification data sets, including categories such as science and technology, economy, and sports) to preprocess the text data into a format acceptable to the model (such as word vector representation or character-level encoding). Then use the machine learning framework to build a neural network model, the network structure of which can include a multi-layer perceptron (MLP), a convolutional neural network (CNN) or a recurrent neural network (RNN) and its variants (such as LSTM, GRU). During the model training process, the parameters of the model are adjusted by defining the loss function (such as cross entropy loss) and the optimization algorithm (such as stochastic gradient descent and its variants) so that the model can accurately predict the category to which the text belongs. When constructing a sentiment analysis model, text data (such as product reviews, social media comments, etc.) with sentiment labels (such as positive, negative, neutral) can be used for training. Data preprocessing includes steps such as text cleaning, word segmentation, and word vector generation. The preset natural language processing model can use a simple neural network structure (such as a fully connected layer based on word vectors) or a more complex model (such as fine-tuning a pre-trained model based on Transformer). The model is trained by minimizing the loss function (such as mean square error or cross entropy loss) so that it can accurately judge the sentiment tendency of the text.

[0074] Next, integrate the trained preset natural language processing model into the backend service. This can be achieved by using AI services provided by cloud service providers (such as Alibaba Cloud, Tencent Cloud, AWS, etc.). These services usually have a complete API interface, which can easily apply the preset natural language processing model to actual scenarios. For example, you can use the backend service framework to create an API endpoint (Endpoint) to receive requests sent by the front-end user interface or other client user interfaces, and return the prediction results of the preset natural language processing model. During the backend integration process, you also need to pay attention to aspects such as performance optimization, model adjustment, and error handling to ensure the stability and accuracy of the system.

[0075] Selecting a suitable AI model is crucial to improving the performance of the chat system. In one embodiment, a traditional machine learning model, such as a decision tree, a support vector machine, etc., can be selected according to specific needs, or a deep learning model, such as a recurrent neural network (RNN), a long short-term memory network (LSTM), etc. can be selected. In addition, the accuracy of the model can be further improved by continuously adjusting the model parameters and hyperparameters.

[0076] 104. During the operation of the AI ​​chat system, state management is performed through the first state management library and the second state management library.

[0077] In the front-end user interface, the capabilities of the natural language processing model are combined to implement functions such as chatbots, intelligent question and answer, sentiment analysis, etc. This can be achieved by using React Hooks and state management libraries. With the help of these libraries, it is more convenient to manage the state of the front-end components and interact with the natural language processing model on the back-end.

[0078] In one embodiment, the running process of the AI ​​chat system can be managed in state through Jotai and Valtio. Jotai is a lightweight state management library based on Java, which can help developers manage complex states in applications more easily. Through Jotai, the AI ​​chat system can obtain and update user information in real time to provide users with more personalized replies. At the same time, Jotai also supports asynchronous operations, so that the system can remain efficient when processing a large number of user requests.

[0079] Valtio is a state management tool for speech recognition and natural language processing. It allows developers to manage various AI components on a unified platform, thereby improving development efficiency. With Valtio, AI chat systems can more easily implement functions such as multi-round conversations and context understanding. By integrating various NLP technologies and speech recognition modules, Valtio can help AI chatbots better understand user intentions and provide more accurate responses.

[0080] Specifically, in terms of state management, the integration of Jotai and Valtio is reflected in the code as an efficient and clear state sharing mode. In the embodiment of this application, Jotai provides a more lightweight and efficient state management method, which is particularly suitable for front-end applications that require fast response. The integration with Valtio further optimizes the efficiency of state sharing and updating. Especially in real-time multi-user interaction scenarios, this state management strategy shows more powerful performance and flexibility. For state flow and schematic diagrams in state management and data exchange between components, please refer to Figure 2 .

[0081] Finally, in order to ensure the security and stability of the AI ​​chat system, the entire application needs to be rigorously tested, including unit testing, integration testing, performance testing, etc., to ensure the normal operation of each component and function. At the same time, follow the security programming specifications to prevent potential security risks, such as SQL injection, cross-site scripting, etc.

[0082] As described above, the AI ​​chat interface construction method proposed in the embodiment of the present application can use a preset component library to encapsulate React components, and combine the built-in components of the preset component library to complete the construction of the user interface, adjust the parameters in the user interface through the first preset framework, and integrate the preset natural language processing model in the back end to process the requests received by the user interface. During the operation of the AI ​​chat system, state management is performed through the first state management library and the second state management library. In terms of user interface design, state management and responsiveness, the solution provided in the embodiment of the present application innovatively integrates the functions of the component library, state management library and Tailwind CSS framework, while achieving customization and flexibility, while enhancing the performance and functionality of the application.

[0083] The method described in the above embodiment will be further described below.

[0084] See also Figure 3 , Figure 3 This is a second flow chart of the method for building an AI chat interface provided in an embodiment of the present application. The method includes:

[0085] 201. Use Material UI to encapsulate React components and provide built-in components to complete the design of the user interface.

[0086] In this embodiment, when designing the user interface, Material UI is used for secondary encapsulation of React components, which not only improves the aesthetics of the interface and the user's interactive experience, but also ensures the consistency and scalability of interface elements in different application scenarios. The wide application and optimization of Material UI ensures the modernity and attractiveness of the user interface design, while also simplifying the development process.

[0087] 202. Determine a layout method of the user interface according to the screen size information and the device type.

[0088] 203. Determine the style of built-in components based on the layout method.

[0089] 204. Adjust the user interface based on the layout method and the style of the built-in components through the atomic classes of the Tailwind CSS framework.

[0090] In terms of responsive design, by introducing Tailwind CSS, the embodiments of the present application provide an efficient and flexible method to build user interfaces that adapt to various devices and screen sizes. Tailwind CSS's practicality-first design concept enables developers to quickly build customized, responsive interface elements, thereby providing a consistent user experience across platforms.

[0091] Specifically, when designing the user interface, this embodiment generally designs at least three sets of layout designs for each user interface, which are applied to the mobile phone side, tablet side and PC side respectively. For example, it can be considered that the screen size is less than 480px for the mobile phone side, 480px to 1024px for the tablet side, 1024px to 1280px for the mixed area of ​​large pad size and small notebook screen, and greater than 1280px for the PC side. This embodiment can choose to make layout changes at any breakpoint to control the adaptive layout effect in a fine-grained manner. For example, for mobile phones and pads, the layout can be top-middle-bottom, with fixed heights for the top and bottom and adaptive in the middle, while for the PC side, the layout can be left-right, with a fixed width on the left and adaptive on the right.

[0092] When using Tailwind CSS and Material UI integration for user interface design, Tailwind's atomic classes are used to quickly lay out the user interface, while Material UI components are used to implement complex interactions and beautiful designs. For example, a chat bubble component can quickly customize its layout and style using Tailwind's tool classes, while Material UI provides built-in components such as buttons and input boxes, making the entire user interface both unified and customizable.

[0093] 205. Build an intermediate service layer in the Node.js operating environment.

[0094] 206. A preset natural language processing model is integrated based on the intermediate service layer and the component library of Material UI, so that the preset natural language processing model processes the request from the user interface received by the backend.

[0095] In one embodiment, in the integration step with the preset natural language processing model, a dedicated middle layer service can be established to efficiently handle the interaction with the preset natural language processing model of the back end. This middle layer can be built using back-end technologies such as Node.js, which is responsible for processing requests from the front end, communicating with the preset natural language processing model of the back end, and returning the processing results of the preset natural language processing model to the front-end application. Such an architecture not only reduces the burden on the front end, but also improves the efficiency and security of data processing. For example, after the user enters a piece of text, the front end sends the request to the middle layer, and the middle layer calls the preset natural language processing model for processing, and the processing results are then fed back to the front end for display.

[0096] Therefore, this embodiment, by leveraging the flexibility of React and the powerful component library of Material UI, can more easily integrate complex AI functions such as chatbots, natural language understanding, and sentiment analysis, thereby providing users with a more intelligent and humanized interactive experience.

[0097] 207. During the operation of the AI ​​chat system, state management is performed through Jotai and Valtio.

[0098] This embodiment integrates the functions of Jotai and Valtio. As an atomic state management library, Jotai can provide more detailed and flexible state control, which is particularly suitable for large-scale dynamic data processing. The introduction of Valtio further enhances the ability of state sharing and management, especially when cooperating with Yjs to realize real-time collaboration functions. The efficiency of this state management strategy significantly improves the response speed and data processing capabilities of the application.

[0099] Specifically, the integration of Jotai and Valtio is reflected in the code as an efficient and clear state sharing mode. Jotai uses its atomic concept (Atoms) to manage the local state of the AI ​​chat system operation process, and each Atom represents a small piece of state in the application. For example, an Atom of user input can be used only for the chat input component, while another Atom of the chat history is used to store and display the entire conversation history. Valtio plays a role in global state management, and implements responsive updates of state through its proxy mechanism to ensure that state changes can be reflected in the UI in a timely and accurate manner. That is, the above steps of state management through Jotai and Valtio can include: Jotai manages the local state of the AI ​​chat system operation process through atoms, and updates atoms through hook functions, and Valtio manages the global state of the AI ​​chat system operation process through a proxy mechanism, and uses the subscribe function to subscribe to state updates.

[0100] 208. The corresponding user interfaces between different users are synchronized through the sharing type in the Yjs framework.

[0101] A notable feature of the embodiment of the present application in terms of real-time collaboration is the integration of the Yjs framework, which uses its efficient shared data structures and operational transformation technology to achieve seamless real-time interaction and collaborative editing among multiple users. This feature is particularly important in AI chat system applications because it enables multiple users to participate in the same conversation at the same time and see each other's input and feedback in real time.

[0102] Specifically, Yjs can synchronize the status between different users through its shared types (such as Y.Array, Y.Map). For example, in a shared document, each edit operation will be reflected in real time on the interface of all collaborators. Yjs's algorithm for handling conflicts ensures that all users' changes can be merged seamlessly and accurately even in a high-latency network environment. By combining WebSocket technology, Yjs can transmit these changes to all participants in real time, ensuring real-time synchronization.

[0103] In one embodiment, the method may further include: when synchronizing the corresponding user interfaces between different users, determining whether there is a conflict between multiple user operations; if so, converting the operation data through an operation conversion algorithm, executing the converted operation content and synchronizing it to all user interfaces.

[0104] Among them, Operation Transformation (OT) is a real-time collaborative editing technology that allows multiple users to edit shared documents simultaneously in a network environment. The main principle of OT is to convert operations into a form that adapts to remote operations when performing local operations. In this way, when multiple operations occur simultaneously, they can be correctly merged without causing conflicts.

[0105] Specifically, the core of the OT algorithm is two transformation functions, such as transform(client_operation, server_operation) and transform(server_operation, client_operation), which transform one operation into another operation, so that the client and server operations can be smoothly merged. That is, the step of converting the edit content corresponding to the operation log can include: extracting two operation sequences corresponding to the conflicting edit content, and converting the two operation sequences into a target operation sequence that can be executed serially through the operation conversion algorithm.

[0106] For example, suppose there are two users A and B editing a document at the same time. User A inserts the character 'a' in the document, while user B inserts the character 'b' at the same position. In order for the two operations to merge correctly, a transformation function can be used to transform these operations relative to each other's operation. In this way, the final document will contain two characters 'ab' or 'ba' instead of conflicting. Specifically, you can first define a transform function that can accept two operations (clientOp and serverOp) as input. This function determines how to transform the client operation to adapt to the server operation based on the position of the operation, then initializes the document as a string and defines the insertion operations of users A and B. Each operation has a type (insert), an insertion position, and an insertion character. Use the transform function to process user A's operation. In this example, user A's operation can be transformed to insert the character "a" between "hb". The transformed operation is applied to the document, first applying user B's operation, and then applying the transformed user A's operation. That is, the above operation sequence includes type, insertion position and insertion symbol. The step of converting the two operation sequences into a target operation sequence that can be executed serially through the operation conversion algorithm may include: using the transform function to process the two operation sequences based on the type, insertion position and insertion symbol to obtain a target operation sequence that can be executed serially.

[0107] Therefore, the embodiment of the present application provides a user interface that is both beautiful and highly responsive by integrating the front-end design of Tailwind CSS and Material UI, and also integrates the state management functions of Jotai and Valtio to make the state processing more efficient and intuitive. This management method simplifies the complexity of the data flow, allowing developers to more easily understand and track changes in application status, thereby reducing errors and maintenance costs in development. At the same time, through the integration of Yjs, an efficient and seamless multi-user real-time collaboration environment is successfully implemented. In the application of the AI ​​chat system, users can see each other's input and changes in real time with almost no delay, greatly improving the fluency and efficiency of collaboration. In addition, a specially designed middle layer is used to handle the interaction with the preset natural language processing model, which not only improves the communication efficiency with the preset natural language processing model at the back end, but also ensures the stability and security of data processing.

[0108] As described above, the AI ​​chat interface construction method proposed in the embodiment of the present application can use Material UI to encapsulate React components and provide built-in components to complete the design of the user interface, determine the layout of the user interface according to the screen size information and the device type, determine the style of the built-in component according to the layout, and adjust the user interface through the atomic class of the Tailwind CSS framework based on the layout and the style of the built-in component. Build an intermediate service layer in the Node.js operating environment, integrate a preset natural language processing model based on the intermediate service layer and the component library of Material UI, so that the preset natural language processing model processes the request from the user interface received by the back end. During the operation of the AI ​​chat system, the state management of the operation process of the AI ​​chat system is performed through Jotai and Valtio, and the corresponding user interfaces between different users are synchronized through the shared type in the Yjs framework. The solution provided in the embodiment of the present application is in terms of user interface design, state management and responsiveness, by innovatively integrating the functions of the React framework, Material UI, Jotai and Valtio state management library and Tailwind CSS framework, while achieving customization and flexibility, enhancing the performance and functionality of the application.

[0109] In order to implement the above method, an embodiment of the present application also provides an AI chat interface building device, which can be specifically integrated into terminal devices such as mobile phones, tablet computers and other devices.

[0110] For example, Figure 4 , which is a schematic diagram of the first structure of the AI ​​chat interface construction device provided in the embodiment of the present application. The AI ​​chat interface construction device may include:

[0111] The design unit 301 is used to encapsulate the React component using a preset component library, and to complete the construction of the user interface by combining the built-in components of the preset component library;

[0112] An adjusting unit 302, configured to adjust parameters in the user interface through a first preset framework;

[0113] A processing unit 303, configured to integrate a preset natural language processing model in a backend to process a request received by the user interface;

[0114] The management unit 304 is used to perform state management through the first state management library and the second state management library during the operation of the AI ​​chat system.

[0115] The AI ​​chat interface building device proposed in the embodiment of the present application can use a preset component library to encapsulate React components, and combine the built-in components of the preset component library to complete the construction of the user interface, adjust the parameters in the user interface through the first preset framework, integrate a preset natural language processing model in the back end to process the requests received by the user interface, and perform state management through the first state management library and the second state management library during the operation of the AI ​​chat system. In terms of user interface design, state management and responsiveness, the solution provided in the embodiment of the present application innovatively integrates the functions of the component library, the state management library and the Tailwind CSS framework, while achieving customization and flexibility, while enhancing the performance and functionality of the application.

[0116] The present application also provides a terminal, such as Figure 5 As shown, the terminal 400 may include a memory 401 and a processor 402, wherein the memory 401 stores an application processing program, and when the application processing program is executed by the processor 402, the steps of the above-mentioned AI chat interface building method in this embodiment are implemented.

[0117] Specifically in this embodiment, the processor 402 in the terminal will load the executable files corresponding to the processes of one or more applications into the memory 401 according to the following instructions, and the processor 402 will run the applications stored in the memory 401 to implement various functions:

[0118] The React component is encapsulated by using a preset component library, and the built-in components of the preset component library are combined to complete the construction of the user interface;

[0119] Adjusting parameters in the user interface through a first preset framework;

[0120] Integrating a preset natural language processing model in the backend to process requests received by the user interface;

[0121] During the operation of the AI ​​chat system, state management is performed through the first state management library and the second state management library.

[0122] In the above embodiments, the description of each embodiment has its own focus. For the part that is not described in detail in a certain embodiment, please refer to the detailed description of the method for building an AI chat interface above, which will not be repeated here.

[0123] As can be seen from the above, the terminal of the embodiment of the present application can use the preset component library to encapsulate the React component, and combine the built-in components of the preset component library to complete the construction of the user interface, adjust the parameters in the user interface through the first preset framework, integrate the preset natural language processing model in the back end to process the request received by the user interface, and perform state management through the first state management library and the second state management library during the operation of the AI ​​chat system. In terms of user interface design, state management and responsiveness, the solution provided by the embodiment of the present application innovatively integrates the functions of the component library, state management library and Tailwind CSS framework, while achieving customization and flexibility, while enhancing the performance and functionality of the application.

[0124] A person of ordinary skill in the art will appreciate that all or part of the steps in the various methods of the above embodiments may be completed by instructions, or by controlling related hardware through instructions. The instructions may be stored in a computer-readable storage medium and loaded and executed by a processor.

[0125] To this end, an embodiment of the present application provides a computer-readable storage medium, in which multiple instructions are stored, and the instructions can be loaded by a processor to execute the steps in any AI chat interface building method provided in the embodiment of the present application.

[0126] The specific implementation of the above operations can be found in the previous embodiments, which will not be described in detail here.

[0127] The storage medium may include: a read-only memory (ROM), a random access memory (RAM), a magnetic disk or an optical disk, etc.

[0128] Since the instructions stored in the storage medium can execute the steps in any AI chat interface building method provided in the embodiments of the present application, the beneficial effects that can be achieved by any AI chat interface building method provided in the embodiments of the present application can be achieved. Please see the previous embodiments for details and will not be repeated here.

[0129] The above is a detailed introduction to an AI chat interface building method, device, terminal and storage medium provided in the embodiments of the present application. Specific examples are used in this article to illustrate the principles and implementation methods of the present application. The description of the above embodiments is only used to help understand the method of the present application and its core idea; at the same time, for technical personnel in this field, according to the ideas of the present application, there will be changes in the specific implementation methods and application scope. In summary, the content of this specification should not be understood as a limitation on the present application.

Claims

1. A method for building an AI chat interface, characterized in that: include: The React component is encapsulated by using a preset component library, and the built-in components of the preset component library are combined to complete the construction of the user interface of the AI ​​chat system; Adjusting parameters in the user interface through a first preset framework; Integrating a preset natural language processing model in the backend to process requests received by the user interface; During the operation of the AI ​​chat system, state management is performed through the first state management library and the second state management library.

2. The AI ​​chat interface construction method according to claim 1, characterized in that: The adjusting the parameters in the user interface through the first preset framework includes: Get the screen size information of the client device; The user interface is quickly laid out using the atomic classes of the first preset framework according to the screen size information.

3. The AI ​​chat interface construction method according to claim 2, characterized in that: The quickly laying out the user interface through the atomic class of the first preset framework according to the screen size information includes: Determining a layout mode of the user interface according to the screen size information and the device type; Determining the style of the built-in component according to the layout mode; The user interface is quickly laid out through the atomic classes of the first preset framework based on the layout mode and the style of the built-in components.

4. The AI ​​chat interface construction method according to claim 1, characterized in that: The step of integrating a preset natural language processing model in the back end to process the request received by the user interface includes: Build an intermediate service layer in the Node.js runtime environment; The preset natural language processing model is integrated in the backend based on the intermediate service layer and the preset component library, so that the preset natural language processing model processes the request received by the backend from the user interface.

5. The AI ​​chat interface construction method according to claim 4, characterized in that: The state management is performed by the first state management library and the second state management library, including: Performing local state management of the AI ​​chat system operation process through the atoms of the first state management library, and updating the atoms through the hook function; The global state management of the operation process of the AI ​​chat system is performed through the proxy mechanism of the second state management library, and the subscribe function is used to subscribe to the state update.

6. The AI ​​chat interface building method according to any one of claims 1 to 5, characterized in that: The method further comprises: During the operation of the AI ​​chat system, the corresponding user interfaces between different users are synchronized through the sharing type in the second preset framework.

7. The AI ​​chat interface construction method according to claim 6, characterized in that: The method further comprises: When synchronizing the user interfaces corresponding to different users, determine whether there is a conflict between multiple user operations; If so, the operation data is converted using an operation conversion algorithm, and the converted operation content is executed and synchronized to all user interfaces.

8. An AI chat interface building device, characterized in that: include: A design unit, used to encapsulate the React component using a preset component library, and to complete the construction of the user interface of the AI ​​chat system by combining the built-in components of the preset component library; An adjustment unit, configured to adjust parameters in the user interface through a first preset framework; A processing unit, configured to integrate a preset natural language processing model in a backend to process a request received by the user interface; The management unit is used to perform state management through the first state management library and the second state management library during the operation of the AI ​​chat system.

9. A terminal, characterized in that: The terminal includes: a memory and a processor, wherein an application processing program is stored in the memory, and when the application processing program is executed by the processor, the steps of the AI ​​chat interface building method as described in any one of claims 1 to 7 are implemented.

10. A computer-readable storage medium, characterized in that: The storage medium stores multiple instructions, which are suitable for loading by a processor to execute the AI ​​chat interface building method described in any one of claims 1 to 7.

Images