Model interaction page display method and device, medium and electronic equipment

Abstract

The embodiment of the invention provides a model interaction page display method and device, a computer readable medium and electronic equipment, and the method comprises the steps: defining an elastic layout container for a page, and setting attributes as follows: taking a main shaft of the elastic layout container as a vertical direction, and setting a starting point at the lower edge of the elastic layout container; sending an input message received through the page to a back-end model; storing the input message and the empty placeholder message to a predetermined data structure, and arranging the messages according to a reverse order of the generation sequence of the messages; adding each message in the predetermined data structure as a sub-element to the elastic layout container; and updating a response message returned by the back-end model according to the input message at the empty occupation message of the predetermined data structure, and updating the first target page in real time according to updating of data in the predetermined data structure. According to the embodiment of the invention, the latest message can be displayed in the visual area of the page, and the page performance is improved.

Description

TECHNICAL FIELD

[0001] The present application relates to the technical field of software development, in particular to a model interaction page display method and device, a computer readable medium and an electronic device. BACKGROUND

[0002] With the rapid development of artificial intelligence technology, large language models have emerged and become popular. The emergence of large language models not only changes the research methods of researchers, but also has a profound impact on the industry. They are applied in intelligent customer service, virtual assistants, content creation, search engine optimization and other fields, greatly improving efficiency and user experience.

[0003] With the continuous advancement of large language model applications, how to develop a model interaction page with excellent interaction experience has become a problem to be solved in the industry. However, in the current model interaction page, if the model outputs too much content at once, a part of the output content will not be in the user's visual area, and the part of the output content not in the user's visual area is often the latest output content of the model, which makes the user need additional operations to see the latest output content of the model, resulting in poor user model interaction experience. SUMMARY

[0004] Embodiments of the present application provide a model interaction page display method and device, a computer readable medium and an electronic device, which can at least to some extent make the latest generated message of the model always in the visual area of the page, optimize user experience, and improve page performance.

[0005] Other characteristics and advantages of the present application will become apparent from the following detailed description, or will be learned by practice of the present application.

[0006] According to an aspect of the embodiments of the present application, a method for displaying a model interaction page is provided. The method includes: defining an elastic layout container for a first target page, and setting a property of the elastic layout container as: a main axis of the elastic layout container as a vertical direction, and a starting point at a lower edge of the elastic layout container; receiving an input message through the first target page, and sending the input message to a backend model; storing the input message and an empty placeholder message in a predetermined data structure, and arranging messages in the predetermined data structure in a reverse order of generation of the messages, wherein, after the arrangement is completed, a sequence number of the empty placeholder message is smaller than a sequence number of the input message; adding the messages in the predetermined data structure as sub-elements to the elastic layout container; and updating, at the empty placeholder message of the predetermined data structure, a response message returned by the backend model according to the input message, and updating the first target page in real time according to an update of data in the predetermined data structure.

[0007] According to an aspect of the embodiments of the present application, a device for displaying a model interaction page is provided. The device includes: a defining and setting unit configured to define an elastic layout container for a first target page, and set a property of the elastic layout container as: a main axis of the elastic layout container as a vertical direction, and a starting point at a lower edge of the elastic layout container; a receiving and sending unit configured to receive an input message through the first target page, and send the input message to a backend model; a storage unit configured to store the input message and an empty placeholder message in a predetermined data structure, and arrange messages in the predetermined data structure in a reverse order of generation of the messages, wherein, after the arrangement is completed, a sequence number of the empty placeholder message is smaller than a sequence number of the input message; an adding unit configured to add the messages in the predetermined data structure as sub-elements to the elastic layout container; and an updating unit configured to update, at the empty placeholder message of the predetermined data structure, a response message returned by the backend model according to the input message, and update the first target page in real time according to an update of data in the predetermined data structure.

[0008] In some embodiments of the present application, based on the foregoing scheme, the updating unit is configured to: for each character in the response message returned by the backend model according to the input message, perform the following steps: when receiving one character returned by the backend model according to the input message, splicing the character with the data in the predetermined data structure located at the empty placeholder message to obtain a splicing result; replacing the data in the predetermined data structure located at the empty placeholder message with the splicing result to realize the updating of the data in the predetermined data structure; based on a preset framework, rendering the data in the predetermined data structure to the first target page in real time according to the updating of the data in the predetermined data structure.

[0009] In some embodiments of the present application, based on the foregoing scheme, the updating unit is configured to: whenever a character is rendered in the first target page, after a predetermined delay time, continue to render the next character to update the first target page in real time.

[0010] In some embodiments of the present application, based on the foregoing scheme, the updating unit is configured to: based on a preset framework, rendering the data in the predetermined data structure to the first target page in real time according to the updating of the data in the predetermined data structure.

[0011] In some embodiments of the present application, based on the foregoing scheme, the device further comprises an insertion and attribute definition unit; before receiving an input message through the first target page and sending the input message to a backend model, the insertion and attribute definition unit is configured to: inserting a blank placeholder element in the flexible layout container of the first target page, and defining the magnification and reduction of the placeholder element relative to other sub-elements as a predetermined value, so that the placeholder element can be magnified or reduced according to the available space in the flexible layout container, so that there is no blank area at the top of the first target page when displaying the message.

[0012] In some embodiments of the present application, based on the foregoing scheme, the device further comprises a sending and receiving unit; before defining a flexible layout container for the first target page, the sending and receiving unit is configured to: sending an access request to a server through a current browser, so that the server returns the first target page to the current browser when determining that the current browser supports the flexible layout container according to the version information of the current browser in the access request; receiving the first target page returned by the server through the current browser.

[0013] In some embodiments of the present application, based on the foregoing scheme, the device further comprises a page receiving unit; after sending an access request to a server through a current browser, the page receiving unit is configured to receive a second target page returned by the server through the current browser, the second target page being a page returned by the server to the current browser in a case where the current browser does not support the flexible layout container according to the version information of the current browser in the access request, and the second target page being a page in which the response message newly returned by the backend model is automatically scrolled to the bottom of the visible area by triggering the automatic scrolling logic.

[0014] In some embodiments of the present application, based on the foregoing scheme, the backend model transmits characters through a streaming interface, and the device further comprises an error processing unit; after adding each message in the predetermined data structure to the flexible layout container as a sub-element, the error processing unit is configured to, if the backend model returns an error code, process according to a type of the error code by using a corresponding processing measure, the processing measure being one of the following: retrying a call to the streaming interface, and displaying error information on the first target page.

[0015] In some embodiments of the present application, based on the foregoing scheme, the storage unit is configured to set a buffer variable in the predetermined data structure, and assign the empty placeholder message to the buffer variable.

[0016] According to an aspect of some embodiments of the present application, there is provided a computer readable medium having stored thereon a computer program which, when executed by a processor, implements the method for displaying a model interaction page as described in the above embodiments.

[0017] According to an aspect of some embodiments of the present application, there is provided an electronic device comprising: one or more processors; and a storage device storing one or more programs configured to, working with the one or more processors, cause the one or more processors to implement the method for displaying a model interaction page as described in the above embodiments.

[0018] According to an aspect of some embodiments of the present application, there is provided a computer program product comprising computer instructions stored in a computer readable storage medium, wherein a processor of a computer device reads the computer instructions from the computer readable storage medium, and the processor executes the computer instructions to cause the computer device to perform the method for displaying a model interaction page as described in the above embodiments.

[0019] In the technical solutions provided in some embodiments of the present application, by defining an elastic layout container for the first target page, and setting the attribute of the elastic layout container as: the main axis of the elastic layout container is in the vertical direction, and the starting point is at the lower edge of the elastic layout container, when the user submits an input message through the first target page, the input message can be received and sent to the backend model; the input message and the empty placeholder message are also stored in a predetermined data structure, and in the predetermined data structure, the messages are arranged in the reverse order of the generation sequence of the messages, and the empty placeholder message is used to store the response message returned by the backend model according to the input message, so that in the predetermined data structure, the sorting sequence number of the empty placeholder message is smaller than that of the input message, that is, the empty placeholder message is arranged before the input message; then, the messages in the predetermined data structure are added to the elastic layout container as sub-elements; finally, the response message returned by the backend model according to the input message is updated at the empty placeholder message of the predetermined data structure, and the view of the first target page is updated in real time according to the update of the data in the predetermined data structure. In the scheme of the embodiments of the present application, because of the attribute setting of the elastic layout container and the arrangement of the messages in the predetermined data structure in the reverse order of the generation sequence of the messages, and the fact that the messages in the predetermined data structure are all located in the elastic layout container, the model interaction messages displayed on the first target page can be stacked in the reverse direction along the vertical axis, and the reverse rendering of the model interaction page is realized, which not only makes the latest response message generated by the model always in the visible area of the page, but also eliminates the need for frequent document object model operations, improves the performance of the page, eliminates page flickering, and enables the user to view historical messages during the process of returning the response message by the model, so that the model interaction process is smoother and more fluent, thereby improving the user experience. In addition, the scheme of the embodiments of the present application also has the characteristics of low complexity and small code size, which can facilitate maintenance and extension.

[0020] It should be understood that the above general description and the following detailed description are only exemplary and explanatory, and cannot limit the present application. BRIEF DESCRIPTION OF DRAWINGS

[0021] The drawings incorporated in the specification and constituting a part of the specification illustrate embodiments consistent with the present application and, together with the specification, serve to explain the principles of the present application. Obviously, the drawings in the following description are only some embodiments of the present application, and other drawings can be obtained by those skilled in the art without creative labor. In the drawings:

[0022] Figure 1 A schematic diagram showing the display state of the model interaction page in the visible area in the related art without a scrolling operation is shown;

[0023] Figure 2 Fig. 1 shows a schematic diagram of a model interaction page in the prior art; Figure 1 Fig. 2 shows a schematic diagram of the display state of the model interaction page in the prior art after a scroll operation is performed on the model interaction page shown in Fig. 1;

[0024] Figure 3 Fig. 3 shows a schematic diagram of a flow of a scheme for returning the latest message to the model interaction page in the prior art;

[0025] Figure 4 Fig. 4 shows a schematic diagram of the message list data stored in the prior art in a forward order;

[0026] Figure 5 Fig. 5 shows a schematic diagram of a forward order rendering effect in the prior art;

[0027] Figure 6 Fig. 6 shows a schematic diagram of an exemplary system architecture to which the technical scheme of the embodiments of the present application can be applied;

[0028] Figure 7 Fig. 7 shows a flow chart of a display method of a model interaction page according to an embodiment of the present application;

[0029] Figure 8 Fig. 8 shows a flow chart of a display method of a model interaction page according to an embodiment of the present application; Figure 7 Fig. 9 shows a flow chart of the steps before step 730 in the embodiment;

[0030] Figure 9 Fig. 10 shows a flow chart of the steps before step 750 in the embodiment; Figure 7 Fig. 11 shows a flow chart of the details of step 760 in the embodiment;

[0031] Figure 10 Fig. 12 shows a schematic diagram of a blank area existing in the display area of a model interaction page;

[0032] Figure 11 Fig. 13 shows a schematic diagram of an overall flow according to an embodiment of the present application;

[0033] Figure 12 Fig. 14 shows a schematic diagram of a display method of a model interaction page according to an embodiment of the present application; Figure 7 Fig. 15 shows a flow chart of the details of step 760 in the embodiment;

[0034] Figure 13 Fig. 16 shows a schematic diagram of the message list data stored in a reverse order according to an embodiment of the present application;

[0035] Figure 14 Fig. 17 shows a schematic diagram of a reverse order rendering of a page according to an embodiment of the present application;

[0036] Figure 15A flow chart showing steps performed for each character in a response message returned by a backend model according to an embodiment of the present application is shown;

[0037] Figure 16 A schematic diagram showing an interface displaying error information in a model interaction page according to an embodiment of the present application is shown;

[0038] Figure 17 A schematic diagram showing a reverse rendering effect according to an embodiment of the present application is shown;

[0039] Figure 18 A block diagram showing a display apparatus of a model interaction page according to an embodiment of the present application is shown;

[0040] Figure 19 A structural schematic diagram of a computer system of an electronic device suitable for implementing embodiments of the present application is shown. DETAILED DESCRIPTION

[0041] Example implementations will now be described more fully with reference to the accompanying drawings. Example implementations can be implemented in any

[0042] Moreover, described features, structures, or characteristics can be combined in any suitable manner in one or more embodiments. In the following description, numerous specific details are provided to give a thorough understanding of embodiments of the application. One skilled in the relevant art will recognize, however, that the

[0043] In embodiments of the present application, the term "module" or "unit" refers to a computer program or a part of a computer program with a predetermined function, and works together with other relevant parts to achieve a predetermined target, and can be implemented wholly or partially by using software, hardware (such as a processing circuit or a memory), or a combination thereof. Similarly, one processor (or multiple processors or memories) can be used to implement one or more modules or units. In addition, each module or unit can be a part of an integral module or unit that contains the function of the module or unit.

[0044] The block diagrams shown in the accompanying drawings are merely functional entities and do not necessarily correspond to physically independent entities. That is, these functional entities can be implemented in software, in one or more hardware modules or integrated circuits, or in different network and / or processor devices and / or microcontroller devices.

[0045] The flowcharts shown in the accompanying drawings are merely illustrative and do not necessarily include all content and operations / steps, nor do they necessarily have to be performed in the described order. For example, some operations / steps can be broken down, while others can be combined or partially combined; therefore, the actual execution order may change depending on the specific circumstances.

[0046] With the development of large language model technology, many companies have begun to launch various artificial intelligence (AI) applications based on this technology. These applications typically include a model interaction page, through which users can interact with the large language model, such as through a chat. Users submit questions or other input information through the model interaction page, and the page can return responses such as answers generated by the model based on the input information.

[0047] Figure 1 This diagram illustrates the display state of a model interaction page within the visible area in related technologies when no scrolling is performed. Please refer to... Figure 1 As shown, after a user submits the input information "sort" to the model through the model interaction page, the model interaction page will display the response information returned by the model. However, although the model may have returned all the response information and the model interaction page may have obtained the complete response information, some of the response information is not in the visible area. This often requires the user to operate the scroll bar 110 to make this part of the response information appear in the visible area.

[0048] Figure 2 This illustrates the relevant technology in the application of... Figure 1 The diagram illustrates the display state of the model interaction page within the visible area after scrolling. Please refer to [link / reference]. Figure 2 As shown, when scrolling through the scrollbar... Figure 1 Only after scrolling the model interaction page shown can the bottom of the page be displayed in the visible area, allowing the user to see the latest response from the model.

[0049] Such an interactive experience is obviously not user-friendly. In related technologies, there is also a solution to display the latest messages returned by the model in the visible area.

[0050] Figure 3 A flowchart of a scheme in the related art in which the latest message returned by the model is displayed in the visible area is shown. See Figure 3 The scheme in which the latest message returned by the model is displayed in the visible area can include the following flow:

[0051] Step 310, start.

[0052] Step 320, send a message.

[0053] The user sends a message to the model through the model interaction page.

[0054] Step 330, message list storage, including the message sent by the user and the AI assistant reply empty message placeholder.

[0055] The message list is stored according to a certain data structure, the message sent by the user is stored, and an empty message placeholder is used to overwrite the message replied by the AI assistant to the placeholder message.

[0056] Step 340, call the large model interface.

[0057] By calling the large model interface, the message sent by the user is input into the large model in the backend, and each character returned by the large model can be obtained.

[0058] Step 350, render character by character.

[0059] Render each character returned by the large model on the page.

[0060] Rendering refers to the process by which a browser converts HTML, CSS, and JavaScript code into visual content that users can see. This process involves multiple steps, including parsing code, building a DOM tree, calculating styles, layout, and drawing. Rendering character by character means that the rendering process is performed multiple times based on message elements containing characters, and each time a character in the message element changes, the rendering process is performed again. For example, if the message element includes "ABC", the message element including "ABC" is rendered to the page; if the large model returns the character D next, the character sequence included in the message element is "ABCD", and at this time the rendering process is performed again on the message element, that is, the message element including "ABCD" is rendered to the page.

[0061] A brief overview of the rendering process is as follows:

[0062] Parse HTML: The browser first parses the HTML code and builds a DOM tree. The DOM tree is a structured representation of the document, which contains all the elements on the page.

[0063] Parsing CSS: At the same time, the browser parses the CSS code and builds the CSSOM tree. CSSOM (CSS Object Model) is a structured representation of all styles on the page.

[0064] Building the Render Tree: The browser combines the DOM tree and the CSSOM tree to build the Render Tree. The Render Tree contains information about all visible elements and their styles.

[0065] Layout / Reflow: The browser calculates the position and size of each element in the Render Tree. This process is called Layout or Reflow. Layout determines the exact position of elements on the page.

[0066] Paint: Finally, the browser draws elements onto the screen. This process involves rendering the background, border, text, and other content of elements onto the page.

[0067] Step 360, the new message overwrites the placeholder message.

[0068] When performing literal rendering, the new message returned by the model overwrites the placeholder message.

[0069] Step 370, trigger js automatic scroll logic.

[0070] Take js method to realize automatic scrolling to the bottom of the page when the message is updated by using scrollIntoView() method or assigning scroll height.

[0071] Step 380, the new message appears in time in the visible area.

[0072] Display the new message returned by the model in real time in the visible area.

[0073] Figure 4 A schematic diagram of the message list data stored in the related art in chronological order is shown. Please refer to Figure 4 As shown, the message list data is stored in chronological order, that is, the later the message is generated, the later it is stored. The newly generated new message is stored at the last position. Therefore, the messages in the model interaction page are displayed in chronological order.

[0074] Figure 5 A schematic diagram of the chronological rendering effect in the related art is shown. Please refer to Figure 5As shown, it shows two regions, the left region is an interactive region, and the right region is a debugging region. The interactive region displays a model interaction page in the related art, which includes a first message 510 and a second message 520 generated by an AI assistant (such as a large model) according to an input message of a user; the debugging region displays code information corresponding to the model interaction page displayed in the visual region, which includes code elements corresponding to each object in the model interaction page, and specifically can include a first code element 530 and a second code element 540, wherein the first code element 530 corresponds to the first message 510 and is used to render the first message 510, and the second code element 540 corresponds to the second message 520 and is used to render the second message 520.

[0075] However, the related art still has the following problems:

[0076] 1. The scroll method needs to be called once through JavaScript every time the message is updated, which will cause the following problems: frequent JavaScript scroll calls, scroll once for every output character, frequent operation of the Document Object Model (DOM), which may cause performance bottlenecks and page flickering.

[0077] 2. When the AI is outputting content, the user cannot scroll to view the historical messages. The user scrolls up to view the historical messages, which will be interrupted by the scrollIntoView() method executed by JavaScript. Developers need to write special logic to avoid this situation.

[0078] 3. Due to the need to constantly detect frequently changing data and perform scrolling when the data changes, based on the design of a single thread of the browser, it is inevitable that the scrolling behavior will be delayed, resulting in a less smooth chat experience.

[0079] Therefore, the present application first provides a display method of a model interaction page. The display method of the model interaction page provided by the embodiments of the present application can overcome the above-mentioned defects in the related art. On the one hand, the new message can automatically appear within the user's field of view without the need for manual scrolling. The user can also scroll up to view the historical messages while the model interaction page is outputting the response message returned by the model, effectively improving the user experience. On the other hand, the Document Object Model (DOM) does not need to be frequently operated, unnecessary scroll bar adjustment is reduced, the page performance can be improved, the problem of page flickering can be avoided, and a more smooth and smooth interaction experience can be provided for the user.

[0080] The solutions in this application can be applied to AI chat tools or AI search tools based on large-scale artificial intelligence models. Below, we will use the application of the solutions in this application to an AI chat tool as an example to illustrate the solutions in this application.

[0081] Figure 6 A schematic diagram of an exemplary system architecture to which the technical solutions of the embodiments of this application can be applied is shown. For example... Figure 6 As shown, the system architecture 600 may include a user terminal 610 and a cloud 620. The cloud 620 specifically includes a backend server 621 and an inference server cluster 622. The inference server cluster 622 specifically includes a first inference server 6221 and a second inference server 6222. The user terminal 610 establishes a communication connection with the cloud 620, enabling the user terminal 610 to communicate with the backend server 621 in the cloud 620. The backend server 621 in the cloud 620 can also communicate with the inference server cluster 622, and different inference servers in the inference server cluster 622 can also communicate with each other. A client for interacting with the model is deployed and runs on the user terminal 610, and a server for model interaction is deployed and runs on the backend server 621. Large models for generating response messages are deployed on each inference server of the inference server cluster 622. The user terminal 610 can be the execution subject of the scheme in the embodiments of this application. When the model interaction page display method provided in the embodiments of this application is applied... Figure 6In the illustrated system architecture, a process can be as follows: first, a user sends an access request to the backend server 621 through the client of the user terminal 610; then, the server of the backend server 621 returns a target page to the user terminal 610 according to the access request, and the client of the user terminal 610 defines an elastic layout container for the target page and sets the properties of the elastic layout container as follows: the main axis is in the vertical direction, and the starting point is at the lower end; then, the client of the user terminal 610 renders and displays the target page in the visual interface of the client; next, the user submits an input message through an input box in the target page, and the client of the user terminal 610 stores the input message and an empty placeholder message in a predetermined data structure, and adds each message in the predetermined data structure as a sub-element to the elastic layout container; the client of the user terminal 610 also sends the input message to the backend server 621, and the backend server 621 forwards the input message to the inference server cluster 622, so as to input the input message into a large model deployed on the inference server, and generate a corresponding response message by the large model; finally, the inference server cluster 622 returns the response message generated according to the input message to the backend server 621, and the backend server 621 returns the response message to the user terminal 610, and the client of the user terminal 610 updates the empty placeholder message in the predetermined data structure to the response message, and the visual interface provided by the client of the user terminal 610 updates the view of the target page in real time according to the update of the data in the predetermined data structure.

[0082] In some embodiments of the present application, the client of the user terminal is a browser capable of accessing web pages.

[0083] In some embodiments of the present application, the cloud end further comprises a knowledge base, and after receiving the input message, the inference server retrieves information related to the input message from the knowledge base and generates a response message according to the information related to the input message.

[0084] In some embodiments of the present application, a first large model is deployed on the first inference server, and a second large model with more parameters than the first large model is deployed on the second inference server, and after receiving the input message, the first inference server rewrites the input message by using the first large model and sends the rewriting result to the second large model, and the second large model generates a response message according to the rewriting result and returns the response message to the backend server.

[0085] In some embodiments of the present application, the inference server cluster is deployed with a large model, and the large model is deployed on multiple inference servers of the inference server cluster.

[0086] It should be understood that, Figure 6The number of user terminals, backend servers and inference servers in the cloud is only illustrative. According to the implementation needs, there can be any number of user terminals, and the number of backend servers and inference servers in the cloud can also be any number. That is, the number of user terminals can be multiple, the backend servers in the cloud can be a server cluster composed of multiple servers, and the inference server cluster can include only one inference server or more than two inference servers.

[0087] It should be noted that, Figure 6 The embodiment shown is only one embodiment of the present application. Although in the Figure 6 In the scheme of the embodiment, the user terminal is a desktop computer, but in other embodiments of the present application, the user terminal can also be a smart phone, a notebook computer, a tablet computer, a vehicle terminal, a portable wearable device, a workstation, and various types of terminal devices; although in the Figure 6 In the scheme of the embodiment, the client is a browser that can access web pages, but in other embodiments of the present application, the client can also be other various application programs with web page access function; although in the Figure 6 In the scheme of the embodiment, the backend server and the inference server cluster are both located in the cloud, but in other embodiments of the present application, at least one of the backend server and the inference server cluster can not be located in the cloud, for example, the backend server can be a normal server, not a cloud server; although in the Figure 6 In the scheme of the embodiment, the server and the large model are deployed in different devices, but in other embodiments of the present application, the server and the large model can also be deployed in the same device (such as an AI server); although in the Figure 6 In the scheme of the embodiment, the response message generated by the large model is forwarded to the user terminal via the backend server, but in other embodiments of the present application, the response message generated by the large model can also be sent directly to the user terminal by the inference server. The embodiments of the present application do not make any limitation on this, and the protection scope of the present application should not be limited in any way.

[0088] It is easy to understand that the model interaction page display method provided by the embodiments of the present application is generally executed by a terminal device such as a user terminal, and correspondingly, the model interaction page display device is generally provided in the terminal device. However, in other embodiments of the present application, the server can also have similar functions as the terminal device, thereby executing the model interaction page display scheme provided by the embodiments of the present application.

[0089] Therefore, the embodiments of the present application can be applied in a terminal or a server. The server can be a stand-alone physical server, a server cluster or a distributed system composed of multiple physical servers, or a cloud server providing cloud services, cloud databases, cloud computing, cloud functions, cloud storage, network services, cloud communication, middleware services, domain name services, security services, CDNs, and basic cloud computing services such as big data and artificial intelligence platforms. The terminal can be a smart phone, a tablet computer, a notebook computer, a desktop computer, a smart speaker, a smart watch, and the like, but is not limited thereto. The terminal and the server can be directly or indirectly connected through wired or wireless communication, which is not limited in the present application.

[0090] As described above, the scheme of the embodiments of the present application can be applied in a cloud computing scenario. Cloud computing is a computing mode that distributes computing tasks on a resource pool composed of a large number of computing devices, so that various application systems can obtain computing power, storage space and information services according to needs. The network providing resources is called "cloud". The resources in the "cloud" are infinitely expandable to users and can be obtained at any time, used on demand, expanded at any time, and paid according to use.

[0091] As a basic capability provider of cloud computing, a cloud computing resource pool (referred to as a cloud platform, generally referred to as an IaaS (Infrastructure as a Service) platform) is established, and a plurality of types of virtual resources are deployed in the resource pool for external customers to select and use. The cloud computing resource pool mainly includes: computing devices (virtualized machines containing operating systems), storage devices, network devices.

[0092] According to logical function division, the PaaS (Platform as a Service) layer can be deployed on the IaaS (Infrastructure as a Service) layer, and the SaaS (Software as a Service) layer is deployed above the PaaS layer, or the SaaS can be directly deployed on the IaaS. The PaaS is a platform for software running, such as databases, web containers, etc. The SaaS is various business software, such as web portal websites, SMS mass senders, etc. Generally, the SaaS and the PaaS are upper layers relative to the IaaS.

[0093] The implementation details of the technical scheme of the embodiments of the present application are described in detail as follows:

[0094] Figure 7A flowchart illustrating a method for displaying a model interaction page according to an embodiment of this application is shown. This method can be executed by various devices with processing and computing capabilities. Specifically, it can be executed by a target device, such as a user terminal or a cloud server. User terminals include, but are not limited to, mobile phones, computers, smart voice interaction devices, smart home appliances, in-vehicle terminals, aircraft, smartwatches, etc. Please refer to... Figure 7 As shown, the method for displaying the interactive page of this model includes at least the following steps:

[0095] Step 730: Define a flex layout container for the first target page and set the properties of the flex layout container to be: vertically oriented with the main axis of the flex layout container as the starting point at the bottom edge of the flex layout container.

[0096] Step 750: When an input message is received through the first target page, the input message is sent to the backend model.

[0097] Step 760: Store the input message and the empty placeholder message into a predetermined data structure, and arrange the messages in the predetermined data structure in reverse order of their generation. After the arrangement is completed, the sorting number of the empty placeholder message is less than the sorting number of the input message.

[0098] Step 770: Add each message in the predetermined data structure as a child element to the flex layout container.

[0099] Step 780: At the empty placeholder message in the predetermined data structure, update the response message returned by the backend model based on the input message, and update the first target page in real time according to the update of the data in the predetermined data structure.

[0100] In detail Figure 7 Before the steps shown in the embodiment, let's first introduce... Figure 7 The steps preceding the steps shown in the example. Figure 8 An embodiment according to this application is shown. Figure 7 A flowchart of the steps preceding step 730 in this embodiment. Please refer to [link / reference]. Figure 8 As shown, before defining a flexible layout container for the first target page, the method for displaying this model's interactive page may include the following steps:

[0101] In step 710, an access request is sent to the server through the current browser, so that if the server determines that the current browser supports the flexible layout container based on the version information of the current browser in the access request, it can return the first target page to the current browser.

[0102] The current browser is a browser used by the user, which can be a mobile browser or a computer browser. In the embodiment of the application, the user can access the model interaction page through the browser and realize interaction with the model.

[0103] A browser is an application program used to retrieve, display, and deliver Web information resources. It uses Uniform Resource Identifier (URI) to locate and access various resources on the network, such as web pages, pictures, videos, etc. Users can browse the information by clicking on hyperlinks.

[0104] Of course, in other embodiments of the application, the user can also obtain and display the first target page through other various application programs with the functions of retrieving, displaying, and delivering Web information resources.

[0105] The first target page can be a mobile or computer web page, or a mini-program page.

[0106] After receiving the access request, the server determines whether the current browser supports the flexible layout container according to the version information of the current browser in the access request.

[0107] The access request can contain a User-Agent header, which can include the browser type, version, and other related information initiating the request. The server can identify the browser type and version used by the visitor by checking the User-Agent header.

[0108] A corresponding relationship table of the version information of the browser and the support information of the flexible layout container can be established in advance; the server can determine the support information of the flexible layout container corresponding to the version information of the current browser by querying the corresponding relationship table, and then determine whether the current browser supports the flexible layout container.

[0109] In step 720, the first target page returned by the server is received through the current browser.

[0110] After receiving the first target page returned by the server, the current browser parses the first target page and renders the first target page to the interaction interface of the current browser according to the parsing result, so as to display the first target page on the screen of the terminal where the current browser is located.

[0111] In an embodiment of the present application, after sending the access request to the server through the current browser, the display method of the model interaction page can further include the following steps: receiving the second target page returned by the server through the current browser, the second target page being the page returned by the server to the current browser in the case that the server determines that the current browser does not support the flexible layout container according to the version information of the current browser in the access request, and the second target page being a page in which the latest response message returned by the backend model is automatically scrolled to the bottom of the visible area by triggering the automatic scrolling logic.

[0112] Specifically, the automatic scrolling logic can be implemented through JavaScript. JavaScript is a programming language commonly used for implementing web page interaction functions.

[0113] The automatic scrolling logic can include a call to the scrollIntoView() method or an assignment of a scroll height, so as to automatically scroll the page to the bottom and display the latest response message returned by the backend model in the visible area, which can be a browser window. The browser window is an application interface in the operating system that displays web page content, and it is the visual part of the user's interaction with the web browser. The second target page can use a traditional block element layout and control the scrolling position through JavaScript.

[0114] The scrollIntoView() method is a method in JavaScript for scrolling an element to the visible area of the viewport (i.e., the browser window). It is part of the Element interface and can be used for any DOM element, allowing developers to control the scrolling behavior of page content.

[0115] Since not all browsers support flexible layout containers, in the embodiment of the present application, in the case that the current browser does not support the flexible layout container, the server will return a second target page that does not use the flexible layout container technology to the current browser. This not only ensures that the latest response message returned by the backend model is displayed at the bottom of the visible area, but also provides a fallback solution and improves the compatibility of the solution.

[0116] Below, the steps shown in the embodiment are described in detail. Figure 7

[0117] In step 730, an elastic layout container is defined for the first target page, and the properties of the elastic layout container are set as follows: the main axis of the elastic layout container is in the vertical direction, and the starting point is at the lower edge of the elastic layout container.

[0118] ​A Flexible Box (FlexBox) container is a layout model in Cascading Style Sheets (CSS) designed to simplify one-dimensional layouts such as rows or columns. Flexbox is particularly suitable for creating responsive designs because it is based on containers that can easily adjust the size and position of elements regardless of the size changes of the container. Cascading Style Sheets is used to describe the presentation of HTML or XML documents.

[0119] The attribute "vertical to the main axis of the flexible layout container, starting from the lower edge of the flexible layout container" set for the flexible layout container can be the column-reverse attribute value set for the flex-direction attribute.

[0120] The flexible layout container has two axes by default: the horizontal main axis and the vertical cross axis. The flex-direction attribute determines the direction of the main axis, that is, the arrangement direction of the child elements in the flexible layout container. When flex-direction: column-reverse is set, it changes the arrangement order of the child elements in the flexible layout container, so that the child elements are arranged from bottom to top instead of the default top to bottom.

[0121] By setting the above attribute for the flexible layout container, the child elements in the flexible layout container can be arranged in the order from bottom to top, that is, the later the generation time of the child element, the later the sorting position of the child element on the page, and the latest message displayed during user interaction with the model can automatically appear at the bottom of the visible area, and the old history messages are stacked upwards. Thus, the present application realizes the real-time appearance of new messages at the bottom of the visible area through Cascading Style Sheets (CSS), that is, the self-scrolling bottom effect.

[0122] Before introducing step 750, the steps before step 750 are introduced.

[0123] Figure 9 A flowchart of the steps before step 750 in the embodiment is shown. Figure 7 A flowchart of the steps before step 750 in the embodiment is shown. Please refer to Figure 9 As shown, before receiving the input message through the first target page and sending the input message to the backend model, the display method of the model interaction page can further include the following steps:

[0124] In step 740, a blank placeholder element is inserted into the flexible layout container of the first target page, and the magnification and the reduction of the placeholder element relative to other sub-elements are defined as predetermined values, so that the placeholder element can be magnified or reduced according to the available space in the flexible layout container, so that there is no blank area at the top of the first target page when the first target page displays the message.

[0125] The blank placeholder element can be inserted into the top position of the flexible layout container, that is, the beginning position of the message list.

[0126] Specifically, the value of the magnification (flex-grow) of the placeholder element relative to other sub-elements can be set to 1, and the value of the reduction (flex-shrink) of the placeholder element relative to other sub-elements can be set to 1.

[0127] Figure 10 A schematic diagram of the model interaction page in which there is a blank area in the display area is shown. Please see Figure 10 As shown, when the number of messages is not large enough to fill the entire container, if the scheme of the embodiment shown in Figure 9 When the number of messages is not large enough to fill the entire container, if the scheme of the embodiment shown in

[0128] Therefore, when defining the flexible layout container, it is necessary to ensure that the flexible layout container has sufficient height (such as greater than a predetermined height threshold) to display the message and the placeholder element.

[0129] In step 750, when an input message is received through the first target page, the input message is sent to the backend model.

[0130] The input message can be a user input prompt text, which can be a question or a question information, or other various types of text. When the user submits the input message, the first target page can not display any message that the user has interacted with the model, or can display the historical message that the user has interacted with the model.

[0131] The step of sending the input message to the backend model can be performed before step 760, after step 760, or simultaneously with step 760.

[0132] The backend model can be a large language model (LLM). The backend model can be deployed on the same device as the service, or on a different device from the service.

[0133] The large language model can be a language model with more than 1 billion parameters. Large language models are a major breakthrough in the field of artificial intelligence in recent years. They are natural language processing (NLP) models based on deep learning technology, especially the Transformer architecture. These models have learned the potential patterns and rules of language by learning vast amounts of text data, and have the ability to generate and understand natural language.

[0134] The backend model can also be a multi-modal large model that can receive input of at least one modal data such as text, image, audio, video, and 3D model, and output at least one modal data such as text, image, audio, video, and 3D model.

[0135] The backend model can be a Transformer-based model. Transformer is a deep learning model widely used in natural language processing. Its core component is an encoder-decoder structure, where the encoder part is composed of multiple layers of self-attention mechanisms and feedforward neural networks, and the decoder part is also composed of multiple layers of self-attention mechanisms, encoder-decoder attention mechanisms, and feedforward neural networks. Self-attention mechanism allows the model to consider all positions in the sequence when extracting features, without the need to process the sequence step by step like a recurrent neural network (RNN).

[0136] The input message can be input to the backend model by calling an interface provided by the backend model.

[0137] Next, the scheme of the embodiments of the present application will be further introduced in combination with Figure 11 Figure 11 An overall flowchart according to an embodiment of the present application is shown. Please refer to Figure 11 As shown in the figure, the specific process can include the following steps:

[0138] Step 1110, start.

[0139] Start the entire process.

[0140] ​Step 1120, sending the message.

[0141] The user sends a message to the model through the model interaction page, and the model can receive the message sent by the user.

[0142] Please continue to see Figure 7 In step 760, the input message and the empty placeholder message are stored in the predetermined data structure, and the messages in the predetermined data structure are arranged in the reverse order of the order in which the messages are generated. After the arrangement is completed, the ordering number of the empty placeholder message is smaller than the ordering number of the input message.

[0143] Before storing the input message and the empty placeholder message in the predetermined data structure, the predetermined data structure can be empty or can already contain messages generated by the user interacting with the model.

[0144] The predetermined data structure can be an array, a stack, or various data structures. Taking a responsive message list array created in a Vue component as an example, the message list array is used to store records of user interaction with the model, and each record is an object. Each record can contain message content, sender identification, etc. Each message in the predetermined data structure has an ordering number, which can be an array subscript or index. The smaller the ordering number of a message, the earlier its ordering position.

[0145] After the arrangement is completed, the ordering number of the empty placeholder message is smaller than the ordering number of the input message, which means that the empty placeholder message in the predetermined data structure is arranged before the input message.

[0146] The predetermined data structure can include messages corresponding to each object already displayed in the first target page.

[0147] Figure 12 A flowchart showing details of step 760 in an embodiment of the present application is shown. Figure 7 A flowchart showing details of step 760 in an embodiment of the present application is shown. Figure 12 As shown, the input message and the empty placeholder message are stored in the predetermined data structure, which can include the following steps:

[0148] In step 760', a buffer variable is set in the predetermined data structure, and the empty placeholder message is assigned to the buffer variable.

[0149] The buffer variable is used to temporarily store data. The large model can return streaming data, and the buffer variable can be used to accumulate the returned data character by character.

[0150] Figure 13 A schematic diagram showing the reverse storage of message list data according to an embodiment of the present application is shown. Please see Figure 13As shown, the message generated by the user through interaction with the model already exists in the predetermined data structure, and compared with the stored data of the message list in the related art, the predetermined data structure of the embodiment of the application is stored in the reverse order of the generation sequence of each message. The user's question, that is, the input message received through the first target page, can be "the capital of Guangdong", which is stored as a message list. An empty string is added to the message list to occupy the position, and the position is used to store the response message returned by the backend model.

[0151] The result of arranging the messages in the predetermined data structure in the reverse order of the generation sequence of each message is that in the predetermined data structure, the input message is always located before the response message returned by the backend model according to the input message, and the input message received first is located before the input message received later, and the response message returned by the backend model first is located before the response message returned by the backend model later.

[0152] In an embodiment of the application, storing the input message and the empty placeholder message in the predetermined data structure and arranging the messages in the predetermined data structure in the reverse order of the generation sequence of each message includes: moving the positions of all messages in the predetermined data structure by one bit, and storing the input message in the first position of the predetermined data structure; moving the positions of all messages in the predetermined data structure by one bit again, and storing the empty placeholder message in the first position of the predetermined data structure.

[0153] After moving the positions of all messages in the predetermined data structure by one bit, the first position of the predetermined data structure is in an unstored state, and the input message or the empty placeholder message can be stored in the first position of the predetermined data structure.

[0154] In the embodiment of the application, the input message and the empty placeholder message are stored in sequence by moving the positions of all messages in the predetermined data structure twice.

[0155] Of course, in other embodiments of the application, the positions of all messages in the predetermined data structure can be moved by two bits at a time, the empty placeholder message is stored in the first position of the predetermined data structure, and the input message is stored in the second position of the predetermined data structure, so as to realize the storage of the messages in the predetermined data structure in sequence.

[0156] Please continue to see Figure 11 As shown, after step 1120, the following steps can also be included:

[0157] Step 1130: Adding the message sent by the user and the AI assistant reply empty message placeholder at the beginning of the message list.

[0158] The message list is stored in a predetermined data structure such as an array, a message sent by a user is stored in a head position of the predetermined data structure, and an empty message is used to occupy a position so that a message replied by an AI assistant is overwritten in the position of the occupying message.

[0159] Please continue to see Figure 7 In step 770, each message in the predetermined data structure is added as a sub-element to the flexible layout container.

[0160] By adding each message as a sub-element to the flexible layout container, each message becomes a container member of the flexible layout container.

[0161] Since each message is added as a sub-element to the flexible layout container, each message is arranged according to the layout rule defined by the flexible layout container to which the message belongs.

[0162] In step 780, the response message returned by the backend model according to the input message is updated at the empty occupying message of the predetermined data structure, and the first target page is updated in real time according to the update of the data in the predetermined data structure.

[0163] Since the input message has been completely stored in the predetermined data structure, the input message can be rendered in real time based on the preset framework to display the input message in the first target page in real time.

[0164] A streaming interface can be designed for the backend model to support the transmission of streaming response data returned by the backend model. The server can forward the streaming data returned by the backend model to the front end in real time after receiving the streaming data, instead of waiting until the entire reply content is generated. That is, the backend model transmits characters through the streaming interface, that is, the backend model can transmit characters according to a call to the streaming interface provided by the backend model.

[0165] Figure 14 A schematic diagram of implementing page reverse rendering according to an embodiment of the present application is shown. Please see Figure 14 As shown in FIG. 8, according to the messages in the predetermined data structure, corresponding DOM elements are generated, which are located in the left region of Figure 14 , and the ordering of these DOM elements and the corresponding messages in the predetermined data structure is consistent, but since each message in the predetermined data structure is located in the flexible layout container, and the aforementioned attribute is set for the flexible layout container, the objects in the view of the page will be displayed in a reverse arrangement manner from the DOM elements.

[0166] In an embodiment of the present application, at the empty placeholder message of the predetermined data structure, the updated backend model returns the response message according to the input message, and the first target page is updated in real time according to the update of the data in the predetermined data structure, specifically including: for each character in the response message returned by the backend model according to the input message, performing the steps shown in the embodiment Figure 15 The steps shown in the embodiment.

[0167] For each character in the response message returned by the backend model according to the input message, the steps shown in the embodiment are repeatedly performed Figure 15 The steps shown in the embodiment until the backend model no longer returns characters, i.e., the backend model has output a complete response message.

[0168] Figure 15 A flowchart showing the steps performed for each character in the response message returned by the backend model according to the input message is shown according to an embodiment of the present application. Please refer to Figure 15 As shown, it can specifically include the following steps:

[0169] In step 1510, when a character returned by the backend model according to the input message is received, the character is spliced with the data in the predetermined data structure located at the empty placeholder message to obtain a splicing result.

[0170] The backend model is a generative large language model that returns stream data character by character.

[0171] In step 1520, the data in the predetermined data structure located at the empty placeholder message is replaced with the splicing result to update the data in the predetermined data structure.

[0172] By splicing the characters returned by the backend model with the data located at the empty placeholder message one by one, and replacing the data based on the splicing result, the gradual accumulation of the response message can be realized, thereby realizing the storage and display of the complete response message.

[0173] In step 1530, based on the preset framework, the data in the predetermined data structure is rendered to the first target page in real time according to the update of the data in the predetermined data structure.

[0174] The preset framework can be Vue.js, which is a progressive JavaScript framework for building user interfaces. Its core library mainly focuses on the view layer (View), and is easy to integrate with other libraries and existing projects. The design inspiration of Vue.js comes from the Model-View-ViewModel pattern, that is, the MVVM (Model-View-ViewModel) pattern, but it makes some improvements and simplifications to the pattern. In the MVVM pattern, Model represents the data model, View represents the user interface, and ViewModel is responsible for bidirectional data binding between Model and View.

[0175] Through the Vue framework, the data and view can be bidirectionally bound in the front end, and the view can be updated in real time when the data is updated, so that the answer of the large model can be presented on the page in the effect of typing.

[0176] Whenever the data in the predetermined data structure is updated once, the entire page can be rendered based on all the data in the predetermined data structure.

[0177] Please continue to see Figure 11 As shown in FIG. 11, after step 1130, the following steps can also be included:

[0178] Step 1140, calling a large model interface.

[0179] By calling the large model interface, the message sent by the user is input into the large model in the backend, and each character returned by the large model can be obtained.

[0180] Step 1150, rendering character by character.

[0181] The rendering of each character returned by the large model is performed on the page. This is because the message body size accepted by the chat box of the AI assistant based on the large model is not fixed, and will become larger and larger with the output of the large model.

[0182] Step 1160, new message overwrites placeholder message.

[0183] When rendering character by character, the new message returned by the model is used to overwrite the placeholder message in the message list.

[0184] Step 1170, new message appears in the visible area in time.

[0185] According to the stored message list, the new message returned by the model is displayed in the visible area in real time.

[0186] In an embodiment of the present application, the first target page is updated in real time according to the update of the data in the predetermined data structure, including: whenever a character is rendered in the first target page, the next character is continued to be rendered after a predetermined delay time length, so as to update the first target page in real time.

[0187] The first target page can further include a delay statement, which is used to make the first target page render the next character after a predetermined delay time length whenever a character is rendered.

[0188] In the embodiment of the present application, by making each word have a small delay, the rhythm of real person typing can be simulated, and the user experience can be improved.

[0189] In an embodiment of the present application, based on the preset framework, the first target page is updated in real time according to the update of the data in the predetermined data structure, including: based on the preset framework, the first target page is updated in real time according to the update of the data in the predetermined data structure.

[0190] Specifically, in the embodiment of the present application, before updating the visible area, it can be judged whether each message is in the visible area, and then only the messages in the visible area are rendered, and the visible area is dynamically updated when there is a new message. In this way, resources can be saved.

[0191] In an embodiment of the present application, after each message in the predetermined data structure is added to the flexible layout container as a sub-element, the method can further include the following steps: if the backend model returns an error code, the corresponding processing measure is adopted for processing according to the type of the error code, and the processing measure is one of the following: retrying the call of the streaming interface, displaying error information on the first target page.

[0192] For the processing measure of "displaying error information on the first target page", corresponding error information can be displayed according to the type of the error code, and different error information can be displayed for different types of error codes.

[0193] Figure 16 An interface schematic diagram of displaying error information in a model interaction page according to an embodiment of the present application is shown. Please refer to Figure 16 As shown, after the user submits the input message, if the call of the large model interface fails, the error information "no content returned" can be displayed in the model interaction page.

[0194] Figure 17 A schematic diagram of reverse rendering effect according to an embodiment of the present application is shown. Please refer to Figure 17As shown, it shows two regions, the left region is an interaction region, and the right region is a debugging region. The interaction region displays a model interaction page, which includes a first historical message 1710 and a second historical message 1720 generated by an AI assistant (such as a large model) according to a user's input message; the debugging region displays code information corresponding to the model interaction page, which includes code elements corresponding to each object in the model interaction page, specifically, it can include a first historical code element 1730 and a second historical code element 1740, wherein the first historical code element 1730 is a code element corresponding to the second historical message 1720 and used to render the second historical message 1720, and the second historical code element 1740 is a code element corresponding to the first historical message 1710 and used to render the first historical message 1710. It can be seen that the display order of the first historical message 1710 and the second historical message 1720 in the interaction region is opposite to the display order of their corresponding historical code elements in the right debugging region.

[0195] In summary, according to the display method of the model interaction page provided in the embodiments of the present application, the following technical effects can be achieved at least:

[0196] 1. The frequency of operation on DOM is reduced, the performance of the page and the user's interactive experience are improved, the scrolling of the message list is more smooth and natural, and there is no jumping or delay.

[0197] 2. The amount and complexity of the front-end code are reduced, and the method combining CSS can realize the reverse rendering of the message list and the automatic scrolling of the new message without substantially modifying the existing HTML structure, which is convenient for maintenance and extension.

[0198] 3. The front-end performance is improved, and the reflow operation of the browser is reduced.

[0199] In general, the scheme provided in the embodiments of the present application uses the flex-direction attribute of CSS to be set as column-reverse to realize the reverse rendering of the message list, and through reasonable setting of the CSS attribute, the dynamic updating of the message list is realized in the AI chat scene, the message is inserted at the head of the message list data, and the new message at the bottom of the chat box pushes the message above to the top, ensuring that the new message can be displayed at the bottom of the view in time, simulating the natural conversation habit of people in real life, optimizing the user experience, and therefore, the scheme of the embodiments of the present application can realize a user-friendly chat interface, in which the message list is always displayed from the bottom, and scrolls upwards with the increase of new messages, while maintaining good visual effect and user experience.

[0200] The device embodiment of the present application is introduced below, which can be used to execute the display method of the model interaction page in the above-mentioned embodiments of the present application. For details not disclosed in the device embodiment of the present application, please refer to the above-mentioned embodiments of the display method of the model interaction page.

[0201] Figure 18 A block diagram of a display device of a model interaction page is shown according to an embodiment of the present application. Please refer to Figure 18 As shown in the figure, the display device 1800 of the model interaction page according to an embodiment of the present application includes a definition and setting unit 1810, a receiving and sending unit 1820, a storage unit 1830, an adding unit 1840, and an updating unit 1850. The definition and setting unit 1810 is configured to define an elastic layout container for a first target page, and set the attribute of the elastic layout container as: the main axis of the elastic layout container is the vertical direction, and the starting point is at the lower edge of the elastic layout container. The receiving and sending unit 1820 is configured to send an input message to a backend model when the input message is received through the first target page. The storage unit 1830 is configured to store the input message and an empty placeholder message in a predetermined data structure, and arrange the messages in the predetermined data structure in the reverse order of the generation sequence of the messages. After the arrangement is completed, the ordering number of the empty placeholder message is smaller than that of the input message. The adding unit 1840 is configured to add each message in the predetermined data structure as a sub-element to the elastic layout container. The updating unit 1850 is configured to update the response message returned by the backend model according to the input message at the empty placeholder message of the predetermined data structure, and update the first target page in real time according to the update of the data in the predetermined data structure.

[0202] In some embodiments of the present application, based on the foregoing scheme, the updating unit 1850 is configured to, for each character in the response message returned by the backend model according to the input message, perform the following steps: when one character returned by the backend model according to the input message is received, splice the character with the data located at the empty placeholder message in the predetermined data structure to obtain a splicing result; replace the data located at the empty placeholder message in the predetermined data structure with the splicing result to realize the update of the data in the predetermined data structure; and based on a preset framework, render the data in the predetermined data structure to the first target page in real time according to the update of the data in the predetermined data structure.

[0203] In some embodiments of the present application, based on the foregoing scheme, the updating unit 1850 is configured to, whenever a character is rendered in the first target page, continue to render the next character after a predetermined delay duration to update the first target page in real time.

[0204] In some embodiments of the present application, based on the foregoing scheme, the updating unit 1850 is configured to update the visible area of the first target page in real time according to the update of the data in the predetermined data structure based on the preset framework.

[0205] In some embodiments of the present application, based on the foregoing scheme, the device further comprises an insertion and attribute definition unit; before the input message received through the first target page is sent to the backend model, the insertion and attribute definition unit is configured to insert a blank placeholder element into the flexible layout container of the first target page, and define the magnification and reduction of the placeholder element relative to other sub-elements as a predetermined value, so that the placeholder element can be magnified or reduced according to the available space in the flexible layout container, so that there is no blank area at the top of the first target page when the first target page displays the message. In some embodiments of the present application, based on the foregoing scheme, the device further comprises a sending and receiving unit; before the flexible layout container is defined for the first target page, the sending and receiving unit is configured to send an access request to the server through the current browser, so that the server returns the first target page to the current browser when it is determined that the current browser supports the flexible layout container according to the version information of the current browser in the access request; the first target page returned by the server is received through the current browser.

[0206] In some embodiments of the present application, based on the foregoing scheme, the device further comprises a page receiving unit; after sending an access request to the server through the current browser, the page receiving unit is configured to receive the second target page returned by the server through the current browser, the second target page is the page returned by the server to the current browser when it is determined that the current browser does not support the flexible layout container according to the version information of the current browser in the access request, and the second target page is a page in which the latest response message returned by the backend model is automatically scrolled to the bottom of the visible area by triggering the automatic scrolling logic. In some embodiments of the present application, based on the foregoing scheme, the backend model transmits characters through a streaming interface, and the device further comprises an error handling unit; after each message in the predetermined data structure is added to the flexible layout container as a sub-element, the error handling unit is configured to, if the backend model returns an error code, handle it according to the type of the error code using a corresponding handling measure, which is one of the following: retrying the call to the streaming interface, displaying error information on the first target page.

[0207] In some embodiments of the present application, based on the foregoing scheme, the storage unit 1830 is configured to set a buffer variable in the predetermined data structure, and assign the empty placeholder message to the buffer variable.

[0208] Figure 19 A structural diagram of a computer system of an electronic device suitable for implementing embodiments of the present application is shown.

[0209] It should be noted that, Figure 19 The computer system 1900 of the electronic device shown is only an example and should not impose any limitation on the functions and usage range of embodiments of the present application.

[0210] As Figure 19 shown, the computer system 1900 includes a central processing unit (CPU) 1901, which can perform various appropriate actions and processes according to programs stored in a read-only memory (ROM) 1902 or programs loaded from a storage portion 1908 into a random access memory (RAM) 1903, such as performing the methods described in the above embodiments. Various programs and data required for system operation are also stored in the RAM 1903. The CPU 1901, the ROM 1902, and the RAM 1903 are connected to each other through a bus 1904. An input / output (I / O) interface 1905 is also connected to the bus 1904.

[0211] The following components are connected to the I / O interface 1905: an input portion 1906 including a keyboard, a mouse, and the like; an output portion 1907 including a display such as a cathode ray tube (CRT), a liquid crystal display (LCD), and the like, and a speaker, and the like; a storage portion 1908 including a hard disk, and the like; and a communication portion 1909 including a network interface card such as a LAN (Local Area Network) card, a modem, and the like. The communication portion 1909 performs communication processing via a network such as the Internet. A drive 1910 is also connected to the I / O interface 1905 as necessary. A removable recording medium 1911 such as a magnetic disk, an optical disk, a magneto-optical disk, a semiconductor memory, and the like is attached to the drive 1910 as necessary, so that a computer program read therefrom is installed in the storage portion 1908 as necessary.

[0212] In particular, the processes described above with reference to the flow charts can be implemented as a computer software program in accordance with the embodiments of the present application. For example, an embodiment of the present application includes a computer program product which includes a computer program tangibly embodied on a computer readable medium, the computer program containing program code for executing the methods illustrated by the flow charts. In such an embodiment, the computer program can be downloaded and installed from a network via the communication section 1909, and / or installed from the removable media 1911. When the computer program is executed by the central processing unit (CPU) 1901, various functions defined in the system of the present application are executed.

[0213] It should be noted that the computer readable medium shown in the embodiments of the present application can be a computer readable signal medium or a computer readable storage medium or any combination of the two. The computer readable storage medium may, for example, but is not limited to, an electrical, magnetic, optical, electromagnetic, infrared, or semiconductor system, device or apparatus, or any combination of the above. More specific examples of the computer readable storage medium can include, but are not limited to, an electrical connection having one or more wires, a portable computer diskette, a hard disk, a random access memory (RAM), a read-only memory (ROM), an erasable programmable read-only memory (EPROM), a flash memory, an optical fiber, a portable compact disk read-only memory (Compact Disc Read-Only Memory, CD-ROM), an optical storage device, a magnetic storage device, or any suitable combination of the above. In the present application, the computer readable storage medium can be any tangible medium containing or storing a program that can be used by or in conjunction with an instruction execution system, device or apparatus. In the present application, the computer readable signal medium can include a data signal carried in a baseband or as a part of a carrier wave, which carries computer readable program code. Such a propagated data signal can take many forms, including but not limited to an electromagnetic signal, an optical signal or any suitable combination of the above. The computer readable signal medium can also be any computer readable medium other than the computer readable storage medium, which can send, propagate or transmit a program for use by or in conjunction with an instruction execution system, device or apparatus. The program code contained on the computer readable medium can be transmitted using any suitable medium, including but not limited to wireless, wired, or the like, or any suitable combination of the above.

[0214] The flowcharts and block diagrams in the drawings illustrate the architecture, functionality, and operation of possible implementations of systems, methods and computer program products according to various embodiments of the present application. In this regard, each block in the flowcharts or block diagrams can represent a module, segment, or portion of code, which comprises one or more executable instructions for implementing the specified logical functions. It should also be noted that in some alternative implementations, the functions noted in the blocks can occur out of the order noted in the figures. For example, two blocks shown in succession may, in fact, be executed substantially concurrently or the blocks can sometimes be executed in the reverse order, depending upon the functionality involved. It will also be noted that each block of the block diagrams and / or flowchart illustrations, and combinations thereof, can be implemented by a dedicated hardware-based system that performs the specified functions or operations, or combinations of hardware and software.

[0215] The units described in the embodiments of the present application can be implemented by software, or by hardware, or by a combination of software and hardware. The units described may

[0216] As an aspect, the present application also provides a computer readable medium, which can be included in the electronic device described in the above embodiments, or can exist separately without being assembled into the electronic device. The computer readable medium carries one or more programs, which, when executed by the electronic device, cause the electronic device to implement the method described in the above embodiments.

[0217] It should be noted that although several modules or units of the device for action execution are mentioned in the above detailed description, the division is not mandatory. In fact, according to the embodiments of the present application, the features and functions of two or more modules or units described above can be embodied in one module or unit. Conversely, the features and functions of one module or unit described above can be further divided into a plurality of modules or units.

[0218] From the above description of the embodiments, those skilled in the art will readily appreciate that the example embodiments described herein can be implemented by software and / or by hardware coupled with software. Accordingly, the technical solutions according to the embodiments of the present application can be embodied in the form of a software product. The software product can be stored in a non-volatile storage medium (which can be a CD-ROM, a USB flash drive, a mobile hard disk, or the like) or on a network, and includes a number of instructions for causing a computing device (which can be a personal computer, a server, a touch terminal, or a network device, etc.) to perform the methods according to the embodiments of the present application.

[0219] Other embodiments of the application will be apparent to those skilled in the art from consideration of the specification and practice of the features disclosed herein. It is intended that the specification and examples be considered as exemplary only, with a true scope of the application being indicated by the following claims.

[0220] The relevant data collection and processing scheme in this application file needs to strictly follow the requirements of relevant national laws and regulations, obtain the informed consent or separate consent of the personal information subject (or have the legal basis provided by relevant national laws and regulations), and carry out subsequent data use and processing behavior within the scope of authorization of laws and regulations and personal information subject.

[0221] It should be understood that the application is not limited to the precise construction that has been described above and shown in the accompanying drawings, and that various modifications and changes can be made without departing from the scope thereof. The scope of the application is limited only by the claims that follow.

Claims

1. A method for displaying a model interaction page, characterized in that, The method comprises: defining an elastic layout container for a first target page, and setting a property of the elastic layout container as: a vertical direction of a main axis of the elastic layout container, and a starting point at a lower edge of the elastic layout container; when an input message is received through the first target page, sending the input message to a backend model; storing the input message and a null placeholder message in a predetermined data structure, and arranging the messages in the predetermined data structure in a reverse order of generation of the messages, wherein after the arrangement is completed, the null placeholder message has a smaller order number than the input message; adding the messages in the predetermined data structure as sub-elements to the elastic layout container; updating, at the null placeholder message in the predetermined data structure, a response message returned by the backend model according to the input message, and updating the first target page in real time according to the update of the data in the predetermined data structure.

2. The method of claim 1, wherein, The updating, at the null placeholder message in the predetermined data structure, of the response message returned by the backend model according to the input message, and the updating of the first target page in real time according to the update of the data in the predetermined data structure, comprises: for each character in the response message returned by the backend model according to the input message, performing the following steps: when one character returned by the backend model according to the input message is received, concatenating the character with data located at the null placeholder message in the predetermined data structure to obtain a concatenation result; replacing the data located at the null placeholder message in the predetermined data structure with the concatenation result to update the data in the predetermined data structure; based on a preset framework, rendering the data in the predetermined data structure to the first target page in real time according to the update of the data in the predetermined data structure.

3. The method of claim 2, wherein, The updating of the first target page in real time according to the update of the data in the predetermined data structure comprises: whenever a character is rendered in the first target page, after a predetermined delay duration, the next character is continued to be rendered to update the first target page in real time.

4. The method of claim 2, wherein, The updating of the first target page in real time according to the update of the data in the predetermined data structure based on the preset framework comprises: based on a preset framework, updating a visible area of the first target page in real time according to the update of the data in the predetermined data structure.

5. The method of claim 1, wherein, Before the input message is sent to the backend model through the first target page, the method further comprises: inserting a blank placeholder element in the elastic layout container of the first target page, and defining an enlargement ratio and a reduction ratio of the placeholder element relative to other sub-elements as predetermined values, so that the placeholder element can be enlarged or reduced according to available space in the elastic layout container, so that when the first target page displays a message, there is no blank area at the top of the first target page.

6. The method of claim 1, wherein, Before the elastic layout container is defined for the first target page, the method further comprises: sending, by a current browser, an access request to a server, so that the server returns a first target page to the current browser in a case that the server determines, according to version information of the current browser in the access request, that the current browser supports a flexible layout container; receiving, by the current browser, the first target page returned by the server.

7. The method of claim 6, wherein, After sending, by a current browser, an access request to a server, the method further comprises: receiving, by the current browser, a second target page returned by the server, the second target page being returned by the server to the current browser in a case that the server determines, according to version information of the current browser in the access request, that the current browser does not support a flexible layout container, the second target page being a page in which a response message newly returned by a backend model is automatically scrolled to the bottom of a visible area of the second target page by triggering automatic scrolling logic.

8. The method of claim 1, wherein, The backend model transmits characters through a streaming interface, and after adding each message in the predetermined data structure as a child element into the flexible layout container, the method further comprises: if the backend model returns an error code, processing the error code according to a type of the error code by using a corresponding processing measure, the processing measure being one of the following: retrying a call to the streaming interface, displaying error information on the first target page.

9. The method of claim 1, wherein, The storing the input message and the empty placeholder message into the predetermined data structure comprises: setting a buffer variable in the predetermined data structure, and assigning the empty placeholder message to the buffer variable.

10. A display device for a model interactive page, characterized in that, The apparatus comprises: a defining and setting unit configured to define a flexible layout container for a first target page, and set an attribute of the flexible layout container as: taking a main axis of the flexible layout container as a vertical direction, and taking a starting point at a lower edge of the flexible layout container; a receiving and sending unit configured to send an input message to a backend model when receiving the input message through the first target page; a storing unit configured to store the input message and an empty placeholder message into a predetermined data structure, and arrange each message in the predetermined data structure in a reverse order of generation of each message, wherein after completing the arrangement, a sequence number of the empty placeholder message is smaller than a sequence number of the input message; an adding unit configured to add each message in the predetermined data structure as a child element into the flexible layout container; an updating unit configured to update, at the empty placeholder message in the predetermined data structure, a response message returned by the backend model according to the input message, and update the first target page in real time according to an update of data in the predetermined data structure.

11. A computer readable medium having stored thereon a computer program, characterized in that, The computer program, when executed by a processor, implements the method for displaying a model interaction page according to any one of claims 1 to 9.

12. An electronic device, comprising: comprises: one or more processors; a storage device configured to store one or more programs, which, when executed by the one or more processors, cause the one or more processors to implement the method for displaying a model interaction page according to any one of claims 1 to 9.

13. A computer program product, characterised in that, The computer program product comprises computer instructions stored in a computer readable storage medium, a processor of a computer device reads the computer instructions from the computer readable storage medium, and the processor executes the computer instructions, so that the computer device executes the display method of the model interaction page according to any one of claims 1 to 9.

Images