快速開始

1. uTools 插件應用市場安裝“余漢波 AI 助手”

2. 在 uTools 中喚起插件（可通過關鍵詞"AI"或設置的自定義關鍵詞）

3. 在輸入框中輸入問題或指令

4. 按 Enter 發送消息，或使用 Shift+Enter 插入換行

5. 注意，模型增加除了openrouter 需要增加模型路徑外（比如 openai/gpt-4.1 中的 openai），其他的都不用（比如 gemini，模型直接增加gemini-2.0-flash）。

1. 在輸入框中輸入@符號可調出提示詞搜索框

2. 選擇合適的提示詞模板后將自動添加為系統消息

3. 可以在設置中配置提示詞文件夾，存放自定義提示詞模板

1. 在頂部下拉菜單中選擇要使用的 AI 模型

2. 可以在設置中添加自定義模型

3. 設置中可指定默認使用的模型

1. 點擊"新對話"按鈕開始新的對話

2. 點擊"歷史記錄"按鈕查看和加載之前保存的對話

3. 點擊"保存對話"按鈕將當前對話保存到指定文件夾

在人工智能快速發展的今天，AI 對話助手已經成為提升工作效率的重要工具。本文將詳細解析一個基于多模型融合的 AI 對話系統的設計與實現，該系統集成了 Google Gemini、OpenAI GPT-4 和 DeepSeek 等頂級 AI 模型，為用戶提供強大而靈活的對話能力。

2. 系統架構概述 2.1 技術棧選擇

• 前端：HTML5、CSS3、原生 JavaScript

• 后端：Node.js (Electron)

• 數據存儲：本地文件系統

• API 集成：OpenRouter API、Gemini API、DeepSeek API

• 開發框架：uTools 插件框架

1. 用戶界面模塊

2. 多模型管理系統

3. 對話歷史管理

4. 提示詞系統

5. 流式響應處理

6. 數據持久化

3. 詳細設計與實現 3.1 用戶界面設計

系統采用現代化的單頁面應用設計，主要包含以下組件：

• 頂部導航欄：新對話、歷史記錄、模型選擇、設置等功能

• 對話區域：支持富文本顯示，包括代碼高亮

• 輸入區域：支持快捷鍵操作和提示詞快速調用

• 設置面板：API 密鑰配置、模型管理等

關鍵代碼實現：

• 1

• 2

• 3

• 4

• 5

• 6

• 7

• 8

• 9

// 動態調整輸入框高度 function autoResizeTextarea(textarea) {     const minHeight = 72;   // 3行     const maxHeight = 360;  // 15行     textarea.style.height = 'auto';     const newHeight = Math.max(minHeight,                      Math.min(textarea.scrollHeight, maxHeight));     textarea.style.height = newHeight + 'px'; }

系統支持多個 AI 模型的無縫集成，主要通過統一的 API 調用接口實現：

• 1

• 2

• 3

• 4

• 5

• 6

• 7

• 8

• 9

• 10

async callAPI(message, modelConfig, conversationHistory) {     switch(modelConfig.provider) {         case 'openrouter':             // OpenRouter API 調用實現         case 'gemini':             // Gemini API 調用實現         case 'deepseek':             // DeepSeek API 調用實現     } }

為提供更好的用戶體驗，系統實現了流式響應處理：

• 1

• 2

• 3

• 4

• 5

• 6

• 7

• 8

• 9

• 10

• 11

• 12

return newReadableStream({     asyncstart(controller) {         const reader = response.body.getReader();         const decoder = newTextDecoder();         while (true) {             const {done, value} = await reader.read();             if (done) break;             const chunk = decoder.decode(value);             // 處理數據塊         }     } });

系統實現了強大的提示詞管理功能，支持：

• 提示詞文件管理

• 快速搜索和調用

• Markdown 格式支持

• 動態預覽

采用本地文件系統進行數據持久化，確保數據安全性：

• 對話歷史保存為 Markdown 文件

• 設置信息使用 uTools 數據庫存儲

• 提示詞庫支持自定義路徑

4. 系統流程圖

• 1

• 2

• 3

• 4

• 5

• 6

• 7

• 8

• 9

• 10

• 11

• 12

• 13

• 14

• 15

• 16

• 17

• 18

• 19

graph TD     A[用戶輸入] --> B{模型選擇}     B --> C[OpenRouter]     B --> D[Gemini]     B --> E[DeepSeek]     C --> F[流式響應處理]     D --> F     E --> F     F --> G[消息渲染]     G --> H[歷史記錄]     H --> I[本地存儲]          J[提示詞系統] --> K{快速調用}     K --> L[模板填充]     L --> A          M[設置管理] --> N[API配置]     N --> O[模型管理]     O --> B

1. 使用流式響應提升體驗

2. 實現輸入框高度動態調整

3. 采用防抖處理搜索操作

4. 本地化存儲減少網絡請求

1. 引入消息隊列管理并發請求

2. 實現消息的離線緩存

3. 添加語音輸入支持

4. 優化大規模歷史記錄的加載性能

5. 增加更多自定義設置選項

1. API 密鑰安全存儲

2. 本地數據加密

3. 網絡請求安全性

4. 用戶數據隱私保護

該系統通過多模型融合、流式處理、提示詞系統等創新設計，實現了一個功能強大、易用性高的 AI 對話助手。系統的模塊化設計和良好的擴展性為未來的功能增強提供了堅實基礎。

8. 參考資料

1. OpenRouter API 文檔

2. Gemini API 文檔

3. DeepSeek API 文檔

4. uTools 插件開發文檔

• 編程語言：JavaScript (ES6+)

• 運行環境：uTools 平臺

• 依賴庫：Electron、Node.js 標準庫

• 開發工具：Visual Studio Code

• 版本控制：Git