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

1次阅读

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

深度系统集成 ：可以访问本地文件系统、剪贴板等资源，实现网页版无法完成的系统级操作
定制交互体验 ：支持全局快捷键、通知中心提醒等个性化功能，提升使用效率
数据自主可控 ：本地存储聊天记录和配置，避免完全依赖云端服务

优势：
生态成熟，社区资源丰富
完整的 Node.js API 支持
跨平台打包工具链完善
劣势：
内存占用较高（基础约 80MB）
打包体积较大（基础约 120MB）

优势：
轻量化（内存占用约 Electron 的 1 /3）
使用系统原生 WebView
打包体积小（可控制在 5MB 内）
劣势：
新兴框架，社区资源较少
Node.js API 需要额外配置

优势：
高性能渲染引擎
完美的 UI 一致性
热重载开发体验
劣势：
桌面端功能 API 仍在完善
需要 Dart 语言栈

// forge.config.ts
import {Configuration} from 'electron-builder';

export default {
  appId: 'com.example.chatgpt',
  productName: 'ChatGPT Desktop',
  directories: {output: 'dist'},
  files: ['build/**/*'],
  mac: {
    category: 'public.app-category.productivity',
    target: 'dmg',
    hardenedRuntime: true, // 必须开启公证
    entitlements: 'entitlements.mac.plist'
  },
  win: {
    target: 'nsis',
    certificateFile: './cert.pfx',
    certificatePassword: process.env.WIN_CERT_PASSWORD
  }
} as Configuration;

// ipcMain.ts
import {ipcMain} from 'electron';
import OpenAI from 'openai';

ipcMain.handle('stream-completion', async (event, { prompt}) => {const openai = new OpenAI(process.env.API_KEY!);

  try {
    const stream = await openai.chat.completions.create({
      model: 'gpt-4',
      messages: [{role: 'user', content: prompt}],
      stream: true
    });

    for await (const chunk of stream) {event.sender.send('stream-data', chunk.choices[0]?.delta?.content || '');
    }
    event.sender.send('stream-end');
  } catch (err) {event.sender.send('stream-error', err.message);
  }
});

// db.ts
const DB_NAME = 'chat_history';
const STORE_NAME = 'conversations';

async function initDB() {return new Promise<IDBDatabase>((resolve, reject) => {const request = indexedDB.open(DB_NAME, 1);

    request.onupgradeneeded = (event) => {const db = (event.target as IDBOpenDBRequest).result;
      if (!db.objectStoreNames.contains(STORE_NAME)) {db.createObjectStore(STORE_NAME, { keyPath: 'id'});
      }
    };

    request.onsuccess = () => resolve(request.result);
    request.onerror = () => reject(request.error);
  });
}

async function saveMessage(tx: IDBTransaction, message: ChatMessage) {return new Promise<void>((resolve, reject) => {const store = tx.objectStore(STORE_NAME);
    const request = store.put(message);

    request.onsuccess = () => resolve();
    request.onerror = () => reject(request.error);
  });
}

import keytar from 'keytar';

const SERVICE_NAME = 'ChatGPTDesktop';
const ACCOUNT_NAME = 'APIKeys';

async function saveKey(key: string) {await keytar.setPassword(SERVICE_NAME, ACCOUNT_NAME, key);
}

async function getKey() {return await keytar.getPassword(SERVICE_NAME, ACCOUNT_NAME);
}

import DOMPurify from 'dompurify';

// 在预加载脚本中初始化
const sanitizeConfig = {ALLOWED_TAGS: ['b', 'i', 'em', 'strong', 'code', 'pre'],
  ALLOWED_ATTR: ['class']
};

contextBridge.exposeInMainWorld('api', {sanitize: (dirty: string) => DOMPurify.sanitize(dirty, sanitizeConfig)
});

通过将频繁使用的 Node.js API 提前注入，实测可减少约 40% 的 IPC 通信开销：

// preload.ts
contextBridge.exposeInMainWorld('fs', {readFile: (path: string) => fs.promises.readFile(path, 'utf-8'),
  writeFile: (path: string, content: string) => 
    fs.promises.writeFile(path, content)
});

// VirtualList.tsx
const VirtualList = ({items, itemHeight, renderItem}) => {const [scrollTop, setScrollTop] = useState(0);
  const containerRef = useRef<HTMLDivElement>(null);

  const height = items.length * itemHeight;
  const startIdx = Math.floor(scrollTop / itemHeight);
  const endIdx = Math.min(startIdx + Math.ceil(containerRef.current?.clientHeight! / itemHeight) + 2,
    items.length
  );

  return (
    <div 
      ref={containerRef}
      onScroll={e => setScrollTop(e.currentTarget.scrollTop)}
      style={{overflowY: 'auto', height: '100%'}}
    >
      <div style={{height, position: 'relative'}}>
        <div style={{ 
          position: 'absolute',
          top: startIdx * itemHeight,
          width: '100%'
        }}>
          {items.slice(startIdx, endIdx).map((item, i) => (<div key={item.id} style={{height: itemHeight}}>
              {renderItem(item)}
            </div>
          ))}
        </div>
      </div>
    </div>
  );
};