Graphical user interface interaction method of electronic equipment and related device

Abstract

The invention provides a graphical user interface interaction method of electronic equipment and a related device, and relates to the technical field of artificial intelligence interaction. The interface self-adaptive display of a cross-device platform is realized, the display consistency from the mobile terminal to the desktop device is ensured, and the phenomenon of element overlapping or function missing is eliminated. Through cooperation of a dynamic layout engine and a resolution detection mechanism, the operability and visual hierarchical relationship of interface elements is maintained, so that card contents can completely display operation controls and information elements under different screen sizes, and the problem of typesetting disorder occurring during traditional interface multi-terminal adaptation is effectively solved.

Description

TECHNICAL FIELD

[0001] The present application relates to the technical field of artificial intelligence interaction, in particular to a graphical user interface interaction method of an electronic device and a related device. BACKGROUND

[0002] Current artificial intelligence assistants face multiple technical bottlenecks in graphical user interface design. At the model interaction level, mainstream systems generally use a hierarchical nested menu structure, and users need to go deep into the interface for more than three levels to complete model switching. This design not only breaks the user operation process, but also causes a 40% decrease in model selection efficiency.

[0003] The existing technology proposes a pull-down menu solution that simplifies the operation path, but cannot simultaneously display model function descriptions and performance parameters, and users still need to repeatedly jump between interfaces to obtain complete information.

[0004] There are serious technical defects in multi-device adaptation. Traditional interfaces use static layout design, and when the display environment switches from 1920x1080 resolution to tablet devices, the click hot area of the core function button will be reduced by more than 60%, and model cards often overlap and misalign.

[0005] There is a low degree of componentization at the system architecture level. The existing AI assistant interface is strongly coupled with the backend service, and the interface component reuse rate is less than 30%, and more than 70% of the view layer code needs to be rewritten for each cross-platform deployment.

[0006] There is a significant technical gap in the interaction feedback mechanism. When users perform model switching operations, the existing system lacks clear state identification and operation protection, and about 35% of users will repeatedly click due to non-response of the interface, resulting in waste of system resources. In particular, during the output process of large models, the loading animation solution cannot effectively prevent output interruption, affecting the coherence of task completion.

[0007] In view of the above problems, the existing technology needs to be improved. SUMMARY

[0008] The purpose of the present application is to provide a graphical user interface interaction method of an electronic device and a related device, which has the advantages of improving operation efficiency, enhancing interface adaptability, and optimizing state management effect.

[0009] In the first aspect, the graphical user interface interaction method of an electronic device provided by the present application adopts the following technical solution: Displaying a main interface step: presenting an AI assistant main interface based on a Vue framework on the screen of an electronic device, the main interface using a responsive layout and displaying a plurality of AI model cards; Interaction response step: in response to the user's triggering operation on the control in the main interface, dynamically switch to the corresponding interface state; State management step: update the interface display elements according to the user operation content, and maintain the visual consistency between states.

[0010] Optionally, the interaction response step includes an assistant setting interface switching sub-step: Detect the user's click operation on the target control in the main interface; In response to the click operation, display the setting interface on top of the current interface layer, which contains global dialog configuration options; In the setting interface, receive the user's configuration operation on the floating window display, default agent or shortcut, and update the system configuration parameters in real time.

[0011] Optionally, the interaction response step includes an agent dialog interface calling sub-step: Detect the user's click operation on the floating window control in the main interface; In response to the click operation, slide out a double-column dialog interface from the screen edge, with the agent list on the left and the dialog area on the right; In the dialog interface, update the interface identifier according to the user's selected agent, and receive the user's input dialog content.

[0012] Optionally, the method further includes an agent switching sub-step: In the dialog interface, detect the user's selection operation on the agent list; In response to the selection operation, synchronously update the agent identifier at the top of the dialog area and the assistant identifier in the input box at the bottom; When the agent outputs content, if it is detected that the user performs a switching operation, interrupt the current output process and display a confirmation prompt.

[0013] Optionally, the interaction response step includes an agent editing interface calling sub-step: Detect the user's click operation on the control or the card bottom editing button in the main interface; In response to the click operation, display a double-column editing interface, with the configuration area on the left and the real-time preview area on the right; In the configuration area, receive the user's input agent parameters, and synchronously display the configuration effect in the preview area.

[0014] Optionally, the method further includes a historical session management sub-step: Detect the user's click operation on the control; In response to the click operation, expand and display the complete historical session record on the right side of the dialog interface; According to the session time, dynamically display the time label; When the mouse hovers over the conversation entry, display the edit and delete operation controls.

[0015] Optionally, the method further comprises a responsive layout adaptation sub-step: detecting a change in the screen resolution of the electronic device; in response to the resolution change, dynamically adjusting the card layout and the arrangement of interface elements; maintaining the integrity and visual reasonableness of the interface functions on various devices with a resolution of no less than 750x500 pixels.

[0016] In a second aspect, the present application provides a computer device, comprising a memory and a processor, wherein the processor executes the method described above when running computer instructions stored in the memory.

[0017] In a third aspect, the present application provides a computer-readable storage medium comprising instructions, which, when executed on a computer, cause the computer to execute the method described above.

[0018] In summary, the present application realizes adaptive display of interfaces across device platforms, ensures display consistency from mobile terminals to desktop devices, and eliminates element overlap or missing functions. Through the cooperation of the dynamic layout engine and the resolution detection mechanism, the operability and visual hierarchy of interface elements are maintained, so that card content can display operation controls and information elements completely under different screen sizes, effectively solving the layout disorder problem that occurs when traditional interfaces are adapted to multiple terminals. BRIEF DESCRIPTION OF DRAWINGS

[0019] Figure 1 is a computer device structure schematic diagram of a hardware running environment related to the embodiment scheme of the present application. Figure 2 is a flowchart of a first embodiment of the graphical user interface interaction method of the electronic device of the present application. DETAILED DESCRIPTION

[0020] In order to make the purpose, technical scheme and advantages of the present application clearer, the following will further describe the present application in detail through the drawings and embodiments. It should be understood that the specific embodiments described herein are only used to explain the present application and do not limit the present application.

[0021] Referring to Figure 1 , Figure 1 is a computer device structure schematic diagram of a hardware running environment related to the embodiment scheme of the present application.

[0022] As Figure 1As shown, the computer device can include a processor 1001, such as a Central Processing Unit (CPU), a communication bus 1002, a user interface 1003, a network interface 1004, and a memory 1005. The communication bus 1002 is used to realize the connection communication between these components. The user interface 1003 can include a display, an input unit such as a keyboard, and the optional user interface 1003 can further include a standard wired interface, a wireless interface. The network interface 1004 can optionally include a standard wired interface, a wireless interface (such as a Wireless-Fidelity (Wi-Fi) interface). The memory 1005 can be a high-speed Random Access Memory (RAM), and can also be a stable Non-Volatile Memory (NVM), such as a disk memory. The memory 1005 can also be an independent storage device from the aforementioned processor 1001.

[0023] Those skilled in the art can understand that the structure shown in the above is not a limitation on the computer device, and can include more or fewer components than the structure shown, or combine certain components, or different component arrangements. Figure 1

[0024] As shown, the memory 1005 as a storage medium can include an operating system, a network communication module, a user interface module, and a graphical user interface interaction program of an electronic device. Figure 1

[0025] In the computer device shown, the network interface 1004 is mainly used for data communication with a network server; the user interface 1003 is mainly used for data interaction with a user; the processor 1001 and the memory 1005 in the present application can be arranged in the computer device, and the computer device calls the graphical user interface interaction program of the electronic device stored in the memory 1005 through the processor 1001, and executes the graphical user interface interaction method of the electronic device provided by the present application. Figure 1 The present application provides a graphical user interface interaction method of an electronic device, which will be described in detail below with reference to the accompanying drawings.

[0026] Figure 2 Figure 2 The flowchart of the first embodiment of the graphical user interface interaction method of the electronic device of the present application is shown.

[0027] In the present embodiment, the graphical user interface interaction method of the electronic device includes the following steps: ​​​​Displaying the main interface step 10: presenting an AI assistant main interface based on the Vue framework on the screen of the electronic device, the main interface adopting a responsive layout and displaying a plurality of AI model cards; Interaction response step 20: in response to the triggering operation of the user on the control in the main interface, dynamically switching to the corresponding interface state; State management step 30: updating the interface display elements according to the user operation content, and maintaining the visual consistency between states.

[0028] In the traditional existing graphical user interface design, the model selection function is nested in a multi-layer menu structure, resulting in redundant operation paths, and users cannot obtain complete model information in a single view; the responsive layout lacks a dynamic adjustment mechanism, and interface elements are misaligned and missing functions on different resolution devices; interface components are highly coupled with business logic, resulting in repeated development of core interaction modules when integrating across systems; the operation feedback mechanism does not establish real-time state synchronization, and users lack process indication and interruption protection mechanisms when performing key operations.

[0029] For example, in a cross-platform collaborative development environment, developers need to synchronize the AI model interaction process on the desktop and mobile end. When the screen resolution is switched to the common size of the mobile end, the interface layout does not trigger the adaptive reconstruction algorithm, resulting in model card stacking beyond the visible area, and the operation control being truncated and unable to trigger the click event. Users need to browse the model list by horizontal sliding, but the sliding event conflicts with the default scrolling behavior of the browser, causing the probability of accidental triggering to increase. During the model output process, the system does not establish a rendering process monitoring thread, and the user cannot obtain the remaining generation time prediction when switching agents, which may cause incomplete tasks to occupy memory resources.

[0030] If the above problems are not solved, it will cause the user's cognitive load to increase exponentially with the depth of the operation level, reducing the efficiency of task completion; the differences in interface display between multiple devices will destroy the unity of the operation logic, increasing the training cost; the strong coupling relationship between components will hinder the decoupling of functions under the microservice architecture, limiting the system scalability; the lack of state synchronization mechanism may cause thread blocking and resource competition, reducing the system running stability.

[0031] In the face of the above problems, in the specific implementation, the embodiment first considers how to optimize the visual presentation of model selection. By analyzing the operation path redundancy caused by the multi-layer menu structure, it is found that displaying model information in a single view can effectively reduce user cognitive load. When trying to use waterfall layout, it is found that there is a problem of too high information density, and the traditional grid layout cannot adapt to different screen sizes. Further research finds that card design can not only ensure complete information display, but also has flexible arrangement characteristics, and finally determines to use responsive card layout as the basic scheme.

[0032] For the interface element cross-device adaptation problem, in the specific implementation, the embodiment explores a variety of responsive layout implementation schemes. The traditional equal scaling scheme is prone to element stacking on the mobile end, and the completely independent device adaptation scheme increases the development and maintenance cost. By introducing a dynamic reconstruction algorithm, a solution is proposed to adjust the card arrangement mode and interface element size in real time according to the screen resolution, ensuring the integrity of the function and the visual rationality under different devices.

[0033] For the integration difficulty problem caused by component coupling, in the specific implementation, the embodiment tests a variety of decoupling schemes. The traditional iframe embedding method has communication delay, and the micro-frontend architecture increases system complexity. By modularizing the interface elements into independent components and establishing a standardized communication interface, the separation of interface function and business logic is realized, which not only retains the advantages of the Vue framework but also improves the embeddability.

[0034] Regarding the lack of operation feedback mechanism, in the specific implementation, the embodiment compares two schemes of state prompt and process monitoring. Simple state prompt cannot solve the thread blocking problem, and comprehensive process monitoring will increase system overhead. By establishing a real-time synchronization mechanism between interface state and system configuration, while maintaining the visual consistency between states, the instant response to user operations and resource management optimization are realized.

[0035] In this regard, in the specific implementation, the embodiment provides a graphical user interface interaction method of an electronic device, including: presenting an AI assistant main interface based on a Vue framework on a screen of the electronic device, the main interface adopting a responsive layout and displaying a plurality of AI model cards; in response to a triggering operation of a user on a control in the main interface, dynamically switching to a corresponding interface state; updating the interface display elements according to the user operation content, and maintaining the visual consistency between states.

[0036] Among them, the responsive layout refers to a layout method that can automatically adjust the arrangement and size of interface elements according to the screen size of the device, which can be realized by using CSS media queries combined with Flexbox flexible box model. By setting breakpoint thresholds and percentage width parameters, the complete display of interface elements on devices with different resolutions is ensured. Among them, the AI model card refers to a rectangular visual unit that carries AI model information and operation entry. It can be realized by encapsulating Vue components. Each card contains a model icon, name, and shortcut operation button. The card list is dynamically rendered through data-driven mode to realize the visual centralized display of multiple models. Among them, the dynamic switching of interface state refers to the process of changing the interface display content in real time according to user operation. In specific implementation, it can be realized by using Router routing jump combined with dynamic component loading technology. By listening to user click events to trigger component switching, CSS transition animation is applied to ensure the smoothness of interface conversion. Among them, maintaining visual consistency refers to maintaining uniform design specifications when interface elements switch between different states. Specifically, it can use Vuex state management library to centrally store interface theme colors, spacing parameters, and component styles. Through responsive data binding, it ensures that all interfaces share the same visual configuration parameters.

[0037] In specific implementation, the core innovation of the embodiment is to combine responsive layout with card design to build an AI model visualization operation platform that can adapt to different devices. At the same time, component-based state management mechanism is adopted to maintain a unified visual interaction experience while ensuring fast switching between multiple interfaces.

[0038] In specific implementation, the working process and principle of the embodiment are as follows: an AI assistant main interface based on Vue framework is presented on the screen of an electronic device. The main interface uses responsive layout to dynamically adjust the arrangement of interface elements to adapt to devices with different resolutions. Multiple AI models are displayed in card form, and each card contains model name, description, icon, etc. Users can browse and select models by clicking, sliding, etc.

[0039] When detecting user triggering operation on the controls in the main interface, the system will dynamically switch to the corresponding interface state according to the operation type. For example, clicking the settings button will pop up the settings panel, and clicking the chat button will switch to the chat interface. The interface state switching process maintains a smooth transition effect to avoid abrupt changes.

[0040] According to the user's operation content, the system updates the interface display elements in real time. For example, if the user modifies the setting parameters, the relevant configuration items will immediately reflect the changes. At the same time, the system will maintain the visual consistency between states, including color scheme, font style, layout structure, etc., to ensure that the user maintains good operation continuity when switching between different interface states.

[0041] In a specific implementation, first, an AI assistant main interface developed based on the Vue framework is presented on the screen of an electronic device. The main interface adopts a responsive grid layout, which automatically adjusts the number of columns according to the screen width. On the desktop, 4 columns of cards are displayed, on the tablet, 3 columns, and on the mobile phone, 2 columns. Each AI model is displayed in the form of a card, which contains information such as model name, introduction, applicable scenarios, and icons. The card adopts a rounded rectangular design and enhances the three-dimensional effect through a shadow effect.

[0042] The main interface is provided with a search bar and filtering buttons at the top, making it easy for users to quickly find specific models. The bottom is provided with a paging control, which supports sliding page turning. The setting icon and user avatar are placed in the upper right corner, and clicking on them can enter the corresponding function interface.

[0043] When a user clicks on a certain model card, the system detects this triggering operation and switches to the dialog interface of the model. The dialog interface adopts a left-right two-column design, with the conversation history displayed on the left and the input area on the right. The interface displays the selected model name and a return button at the top.

[0044] During the conversation, the system updates the conversation history area after the user inputs each time, displaying the user input and AI response. After each message is sent, the input box is automatically emptied and focused, making it easy for the user to continue inputting. If the user switches to another model, the system will save the current conversation state to ensure that the user can resume the previous conversation at any time.

[0045] Through the above scheme, in a specific implementation, the embodiment realizes intuitive display and quick switching of AI models, improving user operation efficiency. The responsive layout design ensures good display effect and functional integrity on different devices. The dynamic interface state switching and real-time updating mechanism enhances the smoothness and immediacy of interaction. The consistency of vision provides users with a coherent operation experience, reducing cognitive burden.

[0046] In a specific implementation, in some of the above schemes of the embodiment, the main interface displays multiple AI model cards through a responsive layout and supports interface state switching, but when the user performs system configuration, it still needs to jump to an independent setting page, resulting in a long operation path and the inability to preview the configuration effect in real time, affecting configuration efficiency and operation continuity.

[0047] In a specific implementation, the embodiment further proposes an assistant setting interface switching sub-step: detecting a user's click operation on a target control of the main interface; in response to the click operation, a setting interface is displayed on top of the current interface layer, and the setting interface contains global conversation configuration options; in the setting interface, a user's configuration operation on the floating window display, default agent, and shortcut is received, and the system configuration parameters are updated in real time.

[0048] The target control is positioned in the significant area of the AI model card, and its click operation is transmitted to the parent component for processing through the event bubbling mechanism. The overlay display is realized by a semi-transparent mask layer to separate the visual levels. The interface size is controlled within 60% of the screen width, and the configuration options are arranged in different blocks according to the function modules. The global dialog configuration options include three types of interactive elements: switch controls, drop-down selectors, and input boxes. The system configuration parameters are stored persistently by the Vuex state management library.

[0049] Specifically, when the user clicks on the preset gear icon control in the main interface, the system captures the click coordinates and verifies the control type through the event listener. The interface rendering engine calls the modal box component to insert the DOM node of the setting interface as the reference layer, and realizes the overlay display through CSS positioning attributes. The watch listener is triggered by the configuration operation, and the floating window display Boolean value, the default agent ID, and the shortcut array are synchronized to the local storage. Among them, the floating window display parameter controls the dialog interface callout logic, the default agent ID is bound to the user account configuration table, and the shortcut array is stored in the browser cache through JSON serialization. This implementation avoids the context loss problem caused by page jumping in traditional schemes, ensuring the coherence of configuration operations and main interface functions in terms of visual and logical levels.

[0050] In specific implementation, an AI assistant main interface based on the Vue framework is presented on the screen of an electronic device. The main interface adopts a responsive layout and displays multiple AI model cards. The main interface includes a target control for opening a setting interface. When detecting a click operation performed by a user on the target control, the system displays the setting interface on top of the current interface layer. The setting interface includes global dialog configuration options, such as a floating window display switch, a default agent selection, and a shortcut setting. The user can perform these configuration operations in the setting interface, and the system updates the corresponding configuration parameters in real time. Specifically, the floating window display switch allows the user to select whether to display a floating dialog window on the main interface; the default agent selection enables the user to specify an AI model to be automatically loaded at startup; and the shortcut setting supports the user to customize shortcut keys for frequently used functions. After completing these configuration operations, the system immediately applies the new settings without the need to restart the application.

[0051] It should be noted that the embodiment realizes quick and convenient global setting adjustment. The user does not need to exit the main interface or perform multi-layer menu navigation to directly access and modify key configuration options. The overlay display of the setting interface maintains the user's operation context, reducing the cognitive burden caused by interface switching. The real-time update mechanism ensures that the user can immediately see the effects of configuration changes, improving the intuitiveness of operations and the timeliness of feedback. This design not only simplifies the user's operation process, but also enhances the customizability of the system, making the AI assistant better adapt to different users' usage habits and needs.

[0052] In a specific implementation, in some of the schemes described above in this embodiment, when the main interface invokes the dialog interface through the floating window control, there is a problem of untimely state synchronization and lack of operation protection in the intelligent agent switching process. When the user attempts to switch the intelligent agent during the dialog process, there is a delay in updating the interface identifier, and directly switching during the model output process can cause process interruption or data loss.

[0053] In a specific implementation, this embodiment further proposes detecting a click operation of a user on the floating window control of the main interface; in response to the click operation, sliding a double-column dialog interface out from the edge of the screen, displaying an intelligent agent list on the left side and a dialog area on the right side; in the dialog interface, updating the interface identifier according to the intelligent agent selected by the user, and receiving dialog content input by the user; in the dialog interface, detecting a selection operation of the user on the intelligent agent list; in response to the selection operation, synchronously updating the intelligent agent identifier at the top of the dialog area and the assistant identifier of the input box at the bottom; when the intelligent agent outputs content, if it is detected that the user performs a switching operation, interrupting the current output process and displaying a confirmation prompt.

[0054] The double-column dialog interface is presented by a side sliding animation, the intelligent agent list on the left side displays available models in a vertical scrolling manner, and the dialog area on the right side is divided into a top identifier area, a middle conversation area, and a bottom input area. The intelligent agent identifier update is implemented by real-time replacement of DOM elements, the top identifier area adopts an icon and text combination form, and the assistant identifier of the bottom input box is injected through a CSS pseudo element. When the output process is interrupted, the switching operation is captured through an event listener, the system immediately terminates the calling of the ongoing API data stream output, and a modal dialog box is triggered to display a confirmation option.

[0055] Specifically, after the user clicks the floating window control of the main interface, the interface slides out from the right side of the screen, the left side list loads preset intelligent agent data, and the right side area initializes a blank conversation state. When the user clicks an intelligent agent in the list, the top identifier area and the input box are notified through an event bus to update the corresponding identifier synchronously, and the update delay is controlled within 200 milliseconds. During the content generation process of the intelligent agent, if a list selection event is detected, the content generation interface call is first interrupted, and then a confirmation dialog box is popped up, which contains two operation options of continuing the original task and switching a new intelligent agent. The double-column layout is implemented by a flex box, the left column has a fixed width of 30%, and the right column adapts to the remaining space; the identifier update during intelligent agent switching is completed through the responsive data binding of Vue; and the output interruption mechanism is implemented through the monitoring of a Worker thread in a specific implementation of Web, ensuring that the main thread interaction is not blocked.

[0056] In a specific implementation, in the graphical user interface of an electronic device, a click operation of a user on a main interface floating window control is detected. The floating window control can be set in the lower right corner of the screen and presented as a circular icon.

[0057] In response to the click operation, a two-column conversation interface is slid out from the right edge of the screen to the left. The left column has a width of 30% of the screen width and displays a list of agents. The right column has a width of 70% of the screen width and displays a conversation area.

[0058] In the conversation interface, the interface identifier is updated according to the agent selected by the user. Specifically, when the user selects an agent from the left list, the title bar at the top of the right conversation area displays the name and avatar of the agent.

[0059] The conversation content input by the user in the input box at the bottom of the conversation area is received. A send button is displayed above the input box, and after being clicked, the user input is sent to the conversation area.

[0060] The conversation area adopts a bubble layout, with user input content displayed on the right and agent replies displayed on the left. The sending time is displayed above each message.

[0061] The left agent list supports scrolling and searching. The list item contains the agent avatar, name, and introduction. When the mouse hovers over the list item, the "edit" and "delete" buttons are displayed.

[0062] It should be noted that the embodiment realizes quick invocation of the AI conversation interface, provides intuitive agent selection and switching functions. The two-column layout enables the user to conveniently browse and switch between different agents while maintaining the coherence of the conversation. This design improves the user experience and increases the efficiency of the AI assistant. At the same time, the sliding-out interface and the bubble conversation layout create a familiar interaction experience similar to instant messaging software, reducing the learning cost.

[0063] In a specific implementation, in some of the above schemes of the embodiment, when the user performs an agent switching operation in the conversation interface, if there is currently existing output content, the system lacks an effective interruption prompt mechanism, which may cause the output process to not terminate normally and cause resource conflicts, and the user cannot clearly perceive the actual effectiveness of the switching operation.

[0064] In a specific implementation, the embodiment further proposes detecting a user's selection operation on the agent list in the conversation interface, synchronously updating the agent identifier at the top of the conversation area and the assistant identifier of the input box at the bottom in response to the selection operation, and detecting the user's execution of the switching operation when the agent outputs content to interrupt the current output process and display a confirmation prompt.

[0065] The detection operation is realized by capturing the click event of the list item in real time through an event listener module, which communicates asynchronously with the interface rendering thread. The identification update adopts a two-way data binding mechanism, and the change of the agent ID triggers the cascading update of the interface elements. The top identification uses dynamic icon loading technology, and the bottom input box replaces the style through CSS selector positioning of the specific DOM node. The output interruption control is realized through a message queue. When the switching instruction is detected, a termination signal is sent to the execution thread and the current output progress is preserved, and a modal window component is called to generate a confirmation prompt box.

[0066] Specifically, when the user clicks on the agent list item, the event handler first verifies the legality of the target element, and then extracts the identification data stored in the data-agentid attribute. This data is distributed to the conversation area component through the Vuex state management library, triggering the recomputation of the computed attribute rendering parameters of the interface elements. When the output thread is active, the thread monitor detects the state switching request and immediately suspends the output stream of the text generator, saving the current output content to a temporary storage area. At this time, the interface layer calls the confirm component to generate an overlay, where the confirmation button is bound to the callback function of continuing the switch, and the cancel button restores the original output process. During this process, the thread state flag bit and the interface display are strictly synchronized to ensure the consistency of user operations and system responses.

[0067] In specific implementation, in the conversation interface, the system detects the user's selection operation on the agent list. The selection operation can be a mouse click or touching the agent icon on the screen.

[0068] In response to the selection operation, the system synchronously updates the agent identification at the top of the conversation area and the assistant identification at the bottom of the input box. Specifically, the conversation area at the top will display the name and icon of the newly selected agent, and the placeholder text of the input box at the bottom will also be updated to "Converse with [new agent name]".

[0069] When the agent is outputting content, if the user performs a switching operation, the system will interrupt the current output process and display a confirmation prompt. The prompt appears in the form of a pop-up window, with the content "Are you sure you want to switch agents? The current conversation will be interrupted." The user can choose "Confirm" or "Cancel".

[0070] It should be noted that the embodiment realizes the rapid switching and state protection of the agent. The user can conveniently change the conversation object during the conversation process, and the system will respond in time and update the interface identification, maintaining visual consistency. At the same time, through the interruption protection mechanism, the user's misoperation leading to conversation interruption is avoided, improving the reliability and user experience of the interaction.

[0071] In specific implementation, the interface is highly coupled with the business system, resulting in a large amount of customized development when embedding other web applications, and the lack of componentization leads to poor reusability of interface elements, which restricts development efficiency. In addition, the lack of real-time visualization configuration methods leads to low efficiency of agent parameter adjustment.

[0072] In specific implementation, the embodiment further proposes detecting a user's click operation on a control or a card bottom edit button in the main interface; in response to the click operation, a two-column editing interface is displayed, with a configuration area on the left and a real-time preview area on the right; the agent parameters input by the user are received in the configuration area, and the configuration effect is displayed synchronously in the preview area.

[0073] Among them, the two-column editing interface adopts a left-right split screen layout, the left configuration area contains form input boxes, switch controls and drop-down selectors, and the right preview area embeds a simulated interface of the actual application scenario through iframe. When the user modifies the agent name, function description or dialogue style parameters in the configuration area, the preview area instantly renders the corresponding interface element changes. For example, the agent avatar size parameter adjustment range is limited to 48-96 pixels, and when it exceeds this range, the system automatically corrects it to the boundary value and triggers a prompt message.

[0074] Specifically, after the user clicks the edit button at the bottom of the main interface card, the system calls the modal component of the Vue framework to create an overlay, which loads the editing interface with a two-column layout. The left configuration area realizes two-way data binding through v-model, and the right preview area establishes a real-time communication channel through WebSocket to ensure that parameter modifications are synchronized within 200 milliseconds. When the agent icon transparency parameter in the configuration area is adjusted from 80% to 60%, the corresponding icon component in the preview area is immediately updated through the CSS opacity property. This design allows developers to directly observe the impact of configuration modifications on the interface in a visual environment, eliminating the need for repeated code compilation and deployment operations, effectively improving agent configuration efficiency and component reusability.

[0075] In specific implementation, in the main interface of the electronic device, an edit button is provided. When detecting that a user clicks the edit button, the system calls an interface switching function to replace the current display content with a two-column editing interface. The editing interface displays a configuration area on the left side of the screen and a real-time preview area on the right side.

[0076] The configuration area contains multiple input boxes and selectors for receiving user input agent parameters. These parameters include but are not limited to agent name, avatar picture URL, dialogue style, knowledge domain, response speed, etc. When the user inputs content in any input box or adjusts the selector, the system will trigger a parameter update function.

[0077] The preview area is implemented by a Vue component for real-time rendering. Whenever the parameter update function is triggered, the system passes the latest configuration data to the preview component. The preview component then re-renders, presenting the agent card style generated according to the current parameters. This process does not require page refresh, ensuring smooth user experience.

[0078] To improve user operation efficiency, the system also sets "Save" and "Cancel" buttons at the bottom of the configuration area. Clicking the "Save" button saves the current configuration to the database and closes the editing interface to return to the main interface. Clicking the "Cancel" button directly closes the editing interface and discards the unsaved changes.

[0079] It should be noted that the embodiment realizes intuitive editing and instant preview of agent parameters. Users can complete parameter adjustment and effect confirmation in the same interface without switching between multiple pages. This design greatly improves the efficiency and accuracy of agent configuration, enabling users to quickly create or modify AI assistants that meet their needs. At the same time, the real-time preview function also reduces the risk of parameter setting errors, helping to improve the overall user experience.

[0080] In specific implementation, the double-column dialogue interface display of the agent dialogue interface invocation sub-step in some of the above schemes of the embodiment does not fully meet the user's need for efficient management of historical conversation records. The access entry of historical conversation records lacks intuitiveness, the conversation items lack time identifiers, and the operation controls are hidden deep, resulting in low efficiency of users in finding and managing historical conversations.

[0081] In specific implementation, the embodiment further proposes a scheme including a historical conversation management sub-step, which includes the following technical means: detecting a user's click operation on a control; in response to the click operation, expanding and displaying complete historical conversation records on the right side of the dialogue interface; dynamically displaying time labels according to conversation times; when a mouse hovers over a conversation item, displaying editing and deletion operation controls.

[0082] Among them, the control click detection is realized through DOM event listening, and the interface expansion module is called after triggering. The interface expansion module controls the horizontal expansion of the right side area of the dialogue interface, and uses dynamic loading technology to page historical data. The time label generation module parses the conversation timestamp and automatically classifies and displays date or time identifiers according to the preset time interval. The hover event handling module realizes control display through CSS hover selector listening triggering operation. The control includes editing and deletion buttons composed of SVG icons, and is bound to the corresponding event handler.

[0083] Specifically, when the user clicks the operation control in the preset position of the conversation interface, the system obtains historical conversation data through an AJAX request. The right side area of the interface expands horizontally in an animated form, displaying a conversation list with a scroll bar. Each conversation entry displays a circular time label on the left side, and the color of the time label changes according to the conversation period, showing blue in the early morning and green during the day. When the user hovers the mouse over a specific conversation entry for more than 500 milliseconds, the edit pencil icon and the delete trash can icon gradually appear on the right side of the entry. Clicking the edit icon calls the rich text editor popup, and clicking the delete icon triggers a secondary confirmation dialog box. When the conversation list is loaded, the time label is dynamically updated according to the scroll position, and conversations over three days are automatically folded to display the week identifier. This scheme realizes the visual management and quick operation of historical conversations through the combination of expanded display, dynamic labels, and hover operations.

[0084] In specific implementation, in the conversation interface, when the user clicks the historical conversation management button, the system detects the click operation. Subsequently, the system expands and displays the complete historical conversation record list on the right side of the conversation interface. The list is arranged in chronological order of conversation time, and a corresponding time label is dynamically displayed above each conversation entry. For example, the specific time "14:30" is displayed for conversations on the same day, "Yesterday" is displayed for yesterday's conversations, and the specific date "2023-05-01" is displayed for earlier conversations.

[0085] Further, when the user hovers the mouse over a certain conversation entry, the system automatically displays the icon buttons for editing and deleting operations on the right side of the entry. The user can click the edit button to modify the conversation title, or click the delete button to remove the conversation record. These operation controls are only displayed when the mouse is hovering, to maintain the cleanliness of the interface.

[0086] It should be noted that the embodiment realizes efficient historical conversation management function. The user can quickly view and operate past conversation records, improving the efficiency of information retrieval and management. The design of dynamic time labels enables users to intuitively understand the time information of each conversation without additional operations to obtain context. The hover-displayed editing and deleting controls provide flexible conversation management options while maintaining a clean interface. This design not only optimizes user experience, but also enhances the practicality and usability of AI assistants.

[0087] In specific implementation, in some of the above schemes of the embodiment, the responsive layout fails to effectively adjust the arrangement of interface elements when the screen resolution of different devices changes, resulting in disordered layout, content overflow or missing functions, affecting visual rationality and functional integrity.

[0088] In a specific implementation, the embodiment further proposes a responsive layout adaptation sub-step: detecting a change in the screen resolution of the electronic device; in response to the resolution change, dynamically adjusting the card layout mode and the arrangement of interface elements; maintaining the integrity of the interface functions and visual rationality on various devices with a resolution of no less than 750x500 pixels.

[0089] The detection of the resolution change is achieved through browser window size listening events, and the layout adjustment mechanism is triggered when the screen size change reaches a preset threshold. The dynamic adjustment of the card layout mode includes automatic switching between grid layout and list layout according to the current resolution, and the arrangement of interface elements is achieved using percentage width combined with media query technology. The maintenance of functional integrity is achieved through preset breakpoints, and when the resolution reaches the 750x500 pixel threshold, the visible area of the core function control is forcibly retained.

[0090] Specifically, when the user switches the device from a desktop to a mobile terminal, the system continuously monitors the change in the screen resolution value. When the resolution is detected to be lower than the preset threshold, the card grid layout is automatically converted to a vertical stack arrangement, and the element spacing is reduced to adapt to narrow screen display. Interface elements use the flexible box model to achieve dynamic scaling, and the input box and button group maintain a fixed proportional relationship. On devices with a resolution of no less than 750x500 pixels, the two-column layout structure is maintained through CSS media query to ensure that the function button group is fully displayed in the visible area. For example, on a tablet device with a resolution of 800x600 pixels, the card maintains a 3-column grid layout and the element spacing is adjusted to 2% of the window width, while the resolution is reduced to 740x480 pixels, switching to a single-column layout and hiding the auxiliary icons.

[0091] In a specific implementation, the change in the screen resolution of the electronic device is detected. Specifically, by listening to the browser window size change event, the width and height pixel values of the current device screen are obtained. For example, the window.addEventListener('resize', function()) method of JavaScript is used to capture the screen size change in real time.

[0092] In response to the resolution change, the card layout mode and the arrangement of interface elements are dynamically adjusted. Further, according to the obtained screen width, different breakpoint values are set. When the screen width is greater than 1200 pixels, a four-column grid layout is used; when the screen width is between 768 and 1200 pixels, a three-column grid layout is used; when the screen width is between 500 and 768 pixels, a two-column grid layout is used; and when the screen width is less than 500 pixels, a single-column layout is used. Thus, adaptive adjustment of the card layout is achieved.

[0093] The interface function integrity and visual rationality are maintained on various devices with a resolution not less than 750x500 pixels. Specifically, for devices with a width less than 750 pixels, part of the non-core functions are folded into a pull-down menu to ensure the display integrity of the main function area. For devices with a height less than 500 pixels, a scroll bar is used to display the content beyond the screen to ensure that all function modules can be accessed by scrolling. For example, on a mobile device, the agent list is collapsed into an expandable drawer menu, and the conversation area is displayed as the main content.

[0094] It should be noted that the embodiment realizes adaptive adjustment of the interface layout, improves the display effect and operation experience of the user interface on different devices. Thus, the deficiencies of the traditional AI assistant interface in multi-end adaptation are solved, and the availability and consistency of the core functions on devices of various sizes are ensured. Further, through reasonable layout adjustment and function folding, the display effect of the mobile terminal is optimized, and the operation convenience of the user on a small screen device is improved.

[0095] In specific implementation, in some of the above schemes of the embodiment, when dynamically adjusting the card layout mode and the interface element arrangement, there is a problem that the resolution adaptation threshold is not clear, which may cause display abnormalities of interface elements or overlapping of function controls in a specific resolution interval, affecting the integrity of the interface function and the operation accuracy.

[0096] In specific implementation, the embodiment further proposes a responsive layout adaptation sub-step: detecting changes in the screen resolution of the electronic device; dynamically adjusting the card layout mode and the interface element arrangement in response to the resolution changes; and maintaining the integrity of the interface function and the visual rationality on various devices with a resolution not less than 750x500 pixels.

[0097] The detection of the resolution changes is realized by real-time acquisition of device pixel data through a screen attribute interface provided by the operating system, and the layout adjustment event is triggered when the detected resolution value changes exceed a preset threshold. The dynamic adjustment of the card layout mode adopts a calculation logic combining the grid system and the flexible box model, automatically calculates the number of card columns according to the current resolution, and scales the card width in proportion with a minimum width set to 200 pixels. The interface element arrangement is performed through preset breakpoint rules, and when the resolution is in the range of 750x500 pixels to 1280x800 pixels, a two-column card layout is adopted, and when the resolution exceeds 1280x800 pixels, a three-column layout is switched. The visual rationality guarantee is realized through dynamic calculation of the element spacing, and the horizontal spacing of the elements is kept at 5% of the card width, and the vertical spacing is fixed at 20 pixels.

[0098] Specifically, when the user switches the device from a tablet to a desktop display, the system continuously monitors the resolution change. After detecting that the resolution is raised from 1200x800 pixels to 1920x1080 pixels, the touch layout calculation module regenerates the interface structure. Based on the current resolution of 1920 pixels in width, the grid system calculates the available area to be 1800 pixels after deducting the preset margin. According to the minimum card width of 200 pixels and the spacing rule, it is automatically determined to use a three-column layout. The width of each card is adjusted to 580 pixels, the horizontal spacing is calculated to be 29 pixels, and the vertical spacing remains unchanged at 20 pixels. The interface functionality integrity is achieved by maintaining the operable area of all card interactive controls. The button size of each card is enlarged proportionally with the card width, ensuring that the click hot area is not less than 44x44 pixels. The visual rationality is achieved by dynamically adjusting the font size of the card title and the line height of the content area. The title font size is kept in the interval of 18-22pt, and the line height is set to 1.5 times the font size, thereby maintaining the reading comfort at different resolutions.

[0099] In a specific implementation, when the screen resolution of the electronic device is detected to change to 480x320 pixels, a responsive layout adaptation mechanism is triggered. The main interface automatically switches the card layout from a three-column grid arrangement to a single-column vertical arrangement, and adjusts the card spacing from 16px to 8px. The navigation bar at the top of the interface is folded into a hamburger menu icon, and the operation buttons are converted into floating round buttons and fixed at the lower right corner of the screen. When the resolution returns to 1024x768 pixels, the card layout is automatically restored to a double-column waterfall arrangement, the sidebar is expanded to display complete function entrances, and the operation buttons are restored to a fixed arrangement in the bottom navigation bar.

[0100] It should be noted that the embodiment effectively solves the defect of insufficient multi-end adaptation capability of the traditional interface. By establishing dynamic layout conversion rules, the functionality integrity of various devices from mobile end to desktop end is ensured, and the visual coordination of interface elements at different resolutions is maintained. By using the adaptive element arrangement strategy, the content overflow problem of small-screen devices is avoided, and the display space of large-screen devices is fully utilized, thereby realizing the consistency of cross-platform operation experience.

[0101] In addition, the embodiment of the application further provides a computer readable storage medium, and the storage medium stores a program of the graphical user interface interaction of the electronic device. When the program of the graphical user interface interaction of the electronic device is executed by a processor, the steps of the method of the graphical user interface interaction of the electronic device are implemented.

[0102] It should be noted that the workflow described above is only illustrative and does not limit the protection scope of the application. In actual application, a person skilled in the art can select part or all of them according to actual needs to achieve the purpose of the embodiment scheme, which is not limited here.

[0103] In addition, technical details not described in detail in the present embodiment can be found in the method for graphical user interface interaction of the electronic device provided by any embodiment of the present application, which will not be described here.

[0104] Furthermore, it should be noted that, in the present document, the terms "comprises", "comprising", or any other variations thereof, are intended to cover a non-exclusive inclusion, so that a process, method, article, or system that comprises a list of elements does not include only those elements, but can also include other elements not expressly listed or inherent to such process, method, article, or system. Without more limitations, an element defined by the phrase "comprising a" does not exclude the existence of additional identical elements in the process, method, article, or system that includes the element.

[0105] The above-mentioned sequence numbers of embodiments of the present application are only for description, and do not represent the advantages or disadvantages of the embodiments.

[0106] From the above description of the embodiments, those skilled in the art can clearly understand that the above-mentioned embodiment methods can be realized by means of software and necessary general hardware platforms, of course, they can also be realized by hardware, but in many cases the former is a better embodiment. Based on such understanding, the technical solutions of the present application can be embodied in the form of a software product in essence or in the form of a contribution to the prior art. The computer software product is stored in a storage medium (such as a read-only memory (ROM) / RAM, a magnetic disk, an optical disk), and includes a number of instructions for making a terminal device (which can be a mobile phone, a computer, a server, or a network device, etc.) execute the methods of various embodiments of the present application. The above is only the preferred embodiments of the present application, and does not limit the patent scope of the present application, and any equivalent structure or equivalent process transformation using the contents of the present application specification and drawings, or direct or indirect application in other related technical fields, are also included in the patent protection scope of the present application.

Claims

1. A graphical user interface interaction method for an electronic device, characterized in that, include: The main interface is displayed as follows: The main interface of the AI ​​assistant based on the Vue framework is presented on the screen of the electronic device. The main interface adopts a responsive layout and displays multiple AI model cards. Interactive response steps: Respond to the user's trigger operation on the controls in the main interface and dynamically switch to the corresponding interface state; State management steps: Update the interface display elements according to the user's operation content, and maintain visual consistency between states.

2. The method according to claim 1, characterized in that, The interactive response steps include the assistant settings interface switching sub-step: Detect user clicks on target controls on the main interface; In response to the click operation, a settings interface is overlaid on top of the current interface layer, which contains global dialog configuration options; The system receives user configurations for floating window display, default smart agent, or shortcuts in the settings interface and updates system configuration parameters in real time.

3. The method according to claim 1, characterized in that, The interactive response steps include a sub-step for activating the agent's dialogue interface: Detect user clicks on the floating window controls on the main interface; In response to the click operation, a two-column dialogue interface slides out from the edge of the screen, displaying a list of smart agents on the left and a dialogue area on the right. In the dialogue interface, the interface identifier is updated according to the smart agent selected by the user, and the dialogue content input by the user is received.

4. The method according to claim 3, characterized in that, The method also includes an agent switching sub-step: In the dialogue interface, detect the user's selection of the list of agents; In response to the selection operation, the agent icon at the top of the dialogue area and the assistant icon in the bottom input box are updated synchronously. When the agent is outputting content, if it detects that the user has performed a switching operation, it will interrupt the current output process and display a confirmation prompt.

5. The method according to claim 1, characterized in that, The interactive response steps include a sub-step that invokes the agent editing interface: Detect user clicks on controls or edit buttons at the bottom of cards in the main interface; In response to the click operation, a two-column editing interface is displayed, with the configuration area on the left and the real-time preview area on the right; The system receives user-inputted agent parameters in the configuration area and displays the configuration effect synchronously in the preview area.

6. The method according to claim 3, characterized in that, The method also includes a historical session management sub-step: Detect user clicks on controls; In response to the click operation, the complete history of the conversation is expanded to the right side of the dialog interface; Dynamically display time tags based on session duration; When the mouse hovers over a session entry, edit and delete controls are displayed.

7. The method according to claim 1, characterized in that, The method also includes a responsive layout adaptation sub-step: Detecting changes in the screen resolution of electronic devices; The card layout and interface element arrangement are dynamically adjusted in response to changes in resolution. Maintain the integrity and visual rationality of the interface functions on various devices with a resolution of no less than 750×500 pixels.

8. A computer device, characterized in that, The device includes a memory and a processor, wherein the processor, when executing computer instructions stored in the memory, performs the method as described in any one of claims 1 to 7.

9. A computer-readable storage medium, characterized in that, Includes instructions that, when executed on a computer, cause the computer to perform the method as described in any one of claims 1 to 7.

Images