ChatGPT 桌面端开发实战：从零构建跨平台 AI 应用

1次阅读

共计 2876 个字符，预计需要花费 8 分钟才能阅读完成。

ChatGPT 的网页版虽然功能强大，但在日常使用中存在一些局限性。首先，每次使用都需要打开浏览器并登录，对于高频用户来说操作略显繁琐。其次，网页版无法实现系统级集成，比如全局快捷键唤醒、通知提醒等功能。最重要的是，网页版对话历史完全依赖云端存储，存在隐私和安全顾虑。

桌面端应用能够很好地解决这些问题：

可以常驻系统托盘，随时快速访问
支持系统级集成功能
对话历史可以本地存储，保护隐私
提供更好的离线体验

目前主流的跨平台桌面开发框架主要有 Electron 和 Tauri。我们对两者进行了详细对比：

优点：
成熟稳定，社区生态丰富
支持完整的 Node.js API
开发体验与 Web 开发一致
缺点：
打包体积较大
内存占用较高

优点：
打包体积小
内存占用低
使用系统原生 WebView
缺点：
相对年轻，生态系统不够完善
Node.js API 支持有限

考虑到 ChatGPT 桌面应用需要丰富的 Node.js 生态支持，我们最终选择了 Electron + React 的技术栈。

我们使用 create-react-app 初始化项目，并添加 electron-builder 进行打包。界面主要包含三个部分：

对话列表区
消息输入区
设置面板

关键点：

使用 Context API 管理全局状态
采用 styled-components 实现样式隔离
实现响应式布局适配不同尺寸窗口

为了避免在前端代码中暴露 API Key，我们通过 Electron 主进程进行 API 调用：

渲染进程通过 IPC 发送请求
主进程处理请求并调用 OpenAI API
主进程通过 IPC 返回响应

这样可以确保 API Key 不会暴露在客户端代码中。

我们使用 electron-store 实现本地数据持久化：

对话历史存储在本地 JSON 文件中
采用 LRU 策略管理存储空间
提供导入 / 导出功能方便数据迁移

Electron 的进程间通信 (IPC) 是关键。我们封装了通用的 IPC 工具类：

// ipcUtils.js
const {ipcRenderer, ipcMain} = require('electron');

// 渲染进程调用
const sendToMain = (channel, data) => {return new Promise((resolve) => {ipcRenderer.once(`${channel}-reply`, (_, result) => resolve(result));
    ipcRenderer.send(channel, data);
  });
};

// 主进程处理
const handleFromRenderer = (channel, handler) => {ipcMain.on(channel, async (event, data) => {
    try {const result = await handler(data);
      event.sender.send(`${channel}-reply`, {success: true, data: result});
    } catch (error) {event.sender.send(`${channel}-reply`, {success: false, error});
    }
  });
};

module.exports = {sendToMain, handleFromRenderer};

// openaiService.js
const {Configuration, OpenAIApi} = require('openai');

class OpenAIService {constructor(apiKey) {const configuration = new Configuration({ apiKey});
    this.openai = new OpenAIApi(configuration);
  }

  async chatCompletion(messages) {
    try {
      const response = await this.openai.createChatCompletion({
        model: 'gpt-3.5-turbo',
        messages,
        temperature: 0.7,
      });

      return response.data.choices[0].message.content;
    } catch (error) {console.error('API Error:', error);
      throw error;
    }
  }
}

module.exports = OpenAIService;

// conversationStore.js
const Store = require('electron-store');

class ConversationStore {constructor() {
    this.store = new Store({
      name: 'conversations',
      defaults: {conversations: [],
        settings: {}}
    });
  }

  addConversation(conversation) {const conversations = this.store.get('conversations');
    conversations.unshift(conversation);
    this.store.set('conversations', conversations.slice(0, 100)); // 限制存储数量
  }

  getConversations() {return this.store.get('conversations');
  }

  clearConversations() {this.store.set('conversations', []);
  }
}

module.exports = ConversationStore;