本文档描述了 GPT4All 桌面应用程序的 UI 架构，重点关注用户界面组件的结构、它们之间的交互以及不同视图之间的流程。有关与语言模型的后端集成信息，请参阅 后端系统。
GPT4All 的 UI 使用 Qt/QML 技术构建，提供了一个跨平台应用程序，可以在 Windows、macOS 和 Linux 上一致运行。该应用程序遵循现代单窗口设计，带有导航侧边栏和由 StackLayout 管理的多个视图。
来源：gpt4all-chat/main.qml17-24 gpt4all-chat/main.qml596-771
应用程序的 UI 被组织成由 StackLayout 管理的一系列视图。一次只有一个视图可见，由 StackLayout 的 currentIndex 属性控制。
每个视图都实现了标准的 show() 和 isShown() 函数来管理可见性。
来源：gpt4all-chat/main.qml615-770
导航系统由左侧的 viewBar 组成，其中包含一组 MyToolButton 组件，用于在不同视图之间切换。每个按钮都会触发其对应视图的 show() 方法。
来源：gpt4all-chat/main.qml257-435 gpt4all-chat/qml/MyToolButton.qml1-59
主窗口配置有适当的尺寸和布局，包含三个主要区域：
ViewBar 包含主导航按钮和页脚元素，如 Nomic 徽标和天线指示器。
来源：gpt4all-chat/main.qml17-248 gpt4all-chat/main.qml569-594 gpt4all-chat/main.qml596-613
应用程序包含多个不同的视图，每个视图都有特定用途：
| 视图 | 目的 | 关键组件 |
|---|---|---|
| HomeView | 欢迎屏幕和起始点 | 欢迎文字、功能按钮、链接 |
| ChatView | 主要聊天界面 | 模型选择器、聊天记录、输入框 |
| ModelsView | 模型管理 | 已安装模型的列表、下载选项 |
| LocalDocsView | 文档集成 | 管理文档集合以供上下文使用 |
| SettingsView | 应用程序配置 | 设置类别和选项 |
| AddCollectionView | 添加文档集合 | 添加/扫描文档的界面 |
| AddModelView | 添加新模型 | 下载模型的界面 |
来源：gpt4all-chat/main.qml615-770 gpt4all-chat/qml/HomeView.qml1-289 gpt4all-chat/qml/ChatView.qml1-1220
聊天界面 (ChatView) 是与语言模型的主要交互点。它具有一个复杂的结构，包含多个嵌套组件。
聊天界面在左右两侧均设有可折叠的侧边栏：
来源：gpt4all-chat/qml/ChatView.qml18-656 gpt4all-chat/qml/ChatDrawer.qml1-323
ChatDrawer 和 CollectionsDrawer 组件均采用响应式设计，允许它们折叠，从而为主要对话区域提供更多空间。
抽屉使用 QML 状态和过渡来实现展开或折叠时的平滑动画。
来源：gpt4all-chat/qml/ChatView.qml175-214 gpt4all-chat/qml/ChatView.qml618-655
GPT4All 通过 Theme.qml 组件实现了一个全面的主题系统，该组件可在应用程序中提供一致的样式。主题系统
主题对象会在每个需要样式的 QML 组件中实例化，确保整个应用程序的外观一致。
来源：gpt4all-chat/qml/Theme.qml1-1233
UI 架构通过一套自定义 QML 组件强调组件重用。
| 组件 | 目的 | 关键属性 |
|---|---|---|
| MyToolButton | 具有一致样式的图标按钮 | backgroundColor, source, toggledColor |
| MyButton | 具有一致样式的文本按钮 | textColor, backgroundColor, backgroundRadius |
| PopupDialog | 带超时选项的消息对话框 | text, shouldTimeOut, shouldShowBusy |
| MyBusyIndicator | 加载指示器 | color, size |
| ConfirmationDialog | 是/否确认对话框 | dialogTitle, description, onAccepted |
这些组件确保了视觉上的一致性，并减少了应用程序中的代码重复。
来源：gpt4all-chat/qml/MyToolButton.qml1-59 gpt4all-chat/qml/MyButton.qml1-44
该应用程序实现了一个结构化的启动流程，负责初始化、验证和用户通知。
此流程确保在启动应用程序时提供流畅的用户体验，特别是对于首次使用的用户。
来源：gpt4all-chat/main.qml79-140 gpt4all-chat/main.qml142-195
UI 组件通过属性、信号和槽函数与后端系统通信。
关键绑定包括：
property var currentChat: ChatListModel.currentChatproperty var currentModelInfo: currentChat && currentChat.modelInfoenabled: !currentChat.isCurrentlyLoading && ModelList.selectableModels.count !== 0来源：gpt4all-chat/main.qml1-15 gpt4all-chat/qml/ChatView.qml25-34
该应用程序与系统托盘集成，允许在关闭窗口时在后台运行。
此功能使用户即使在主窗口关闭时，也能保持模型加载并随时可用。