Vue-25-利用Vue3大模型对话框设计之前端和后端的基础实现
文章目录
- 1 设计思路
-
- 1.1 核心布局与组件
- 1.2 交互设计(Interaction Design)
- 1.3 视觉与用户体验
- 1.4 高级功能与创新设计
- 2 vue3前端设计
-
- 2.1 项目启动
-
- 2.1.1 创建和启动项目(vite+vue)
- 2.1.2 清理不需要的代码
- 2.1.3 下载必备的依赖(element-plus)
- 2.1.4 完整引入并注册(main.sj)
- 2.1.5 设置@别名(vite.config.js)
- 2.2 项目结构
-
- 2.2.1 api/chat.js(封装axios)
- 2.2.2 stores/chat.js(pinia管理)
- 2.2.3 ChatPage.vue(聊天界面)
- 2.2.4 App.vue
- 3 flask后端设计
-
- 3.1 main_flask.py
- 3.2 ttest_flask.py
flask提供大模型访问的接口API， Pinia状态管理，用于存储聊天消息和加载状态。Axios封装，用于发送消息到后端API。element-ui聊天页面组件，包含消息列表和输入框。
1 设计思路
大模型对话框(通常指聊天界面或聊天机器人界面)的设计是连接用户与大语言模型(LLM)能力的关键桥梁。
一个优秀的设计不仅能提升用户体验，还能更有效地引导用户与模型互动。
设计一个优秀的大模型对话框，核心在于清晰、高效、流畅。
它应该：
(1)降低认知负荷：用户能一眼看懂谁说了什么。
(2)提供即时反馈：让用户知道系统已收到指令并正在处理。
(3)支持自然交互：通过流式输出、快捷键等让对话感觉更自然。
(4)赋能用户：通过复制、重新生成、反馈等功能，让用户对对话有控制感。
最终，好的对话框设计能让用户忘记界面的存在，专注于与大模型的思想交流。
其设计通常包含以下几个核心方面：
1.1 核心布局与组件
一个典型的对话框界面通常由以下几个主要部分构成：
1、消息历史区 (Message History Area):展示完整的对话历史记录，包括用户的提问和模型的回复。
(1)视觉区分: 清晰地区分用户消息(通常靠右对齐，使用不同背景色)和模型回复(通常靠左对齐，可能带有模型标识或头像)。
(2)时间戳: 可选地显示消息发送时间。
(3)可滚动: 支持平滑滚动，便于回顾长对话。
(4)消息格式化: 正确渲染模型回复中的 Markdown、代码块