文章目錄
- 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、代碼塊
)
