Electron Forge实战：百度智能云千帆大模型集成AI聊天应用

摘要

本文以Electron Forge为开发框架，结合百度智能云千帆大模型API，系统讲解如何构建一个跨平台的桌面端AI聊天应用。从环境搭建、API调用、界面开发到性能优化，提供完整的实现方案与代码示例，帮助开发者快速掌握大模型与桌面应用的集成技术。

一、项目背景与技术选型

1.1 为什么选择Electron Forge？

Electron Forge作为Electron生态的标准化工具链，提供了零配置的脚手架、多平台打包能力以及插件化开发支持。相比原生Electron开发，Forge通过模板系统（如electron-forge-template-react）大幅降低开发门槛，尤其适合快速构建跨平台桌面应用。

1.2 百度智能云千帆大模型的技术优势

千帆大模型平台提供预训练的NLP模型，支持自然语言理解、生成及多轮对话能力。其API接口设计简洁，支持流式响应（SSE），能够满足实时聊天场景的低延迟需求。开发者可通过申请API Key快速接入，无需自行训练模型。

二、环境搭建与初始化

2.1 创建Electron Forge项目

npx create-electron-app my-ai-chat --template=webpack-typescript-react
cd my-ai-chat
npm install

此命令生成一个基于TypeScript和React的Electron项目模板，包含开发服务器、热重载及打包配置。

2.2 安装依赖库

npm install axios @types/axios --save

• axios：用于HTTP请求调用千帆API。
• @types/axios：提供TypeScript类型支持。

2.3 配置百度智能云API

1. 登录百度智能云控制台，创建千帆大模型应用并获取API Key和Secret Key。
2. 在项目根目录创建.env文件：

   BAIDU_API_KEY=your_api_key
   BAIDU_SECRET_KEY=your_secret_key

3. 使用dotenv加载环境变量（需安装dotenv包）。

三、核心功能实现

3.1 封装千帆API调用

创建src/api/baiduQianFan.ts，封装认证与请求逻辑：

import axios from 'axios';
import dotenv from 'dotenv';
dotenv.config();
const getAccessToken = async () => {
  const authUrl = 'https://aip.baidubce.com/oauth/2.0/token';
  const response = await axios.post(authUrl, {
    grant_type: 'client_credentials',
    client_id: process.env.BAIDU_API_KEY,
    client_secret: process.env.BAIDU_SECRET_KEY
  });
  return response.data.access_token;
};
export const chatWithQianFan = async (message: string) => {
  const token = await getAccessToken();
  const url = `https://aip.baidubce.com/rpc/2.0/ai_custom/v1/wenxinworkshop/chat/completions?access_token=${token}`;
  const response = await axios.post(url, {
    messages: [{ role: 'user', content: message }]
  }, {
    headers: { 'Content-Type': 'application/json' }
  });
  return response.data.result;
};

3.2 实时聊天界面开发

使用React实现聊天界面（src/components/ChatWindow.tsx）：

import React, { useState } from 'react';
import { chatWithQianFan } from '../api/baiduQianFan';
const ChatWindow = () => {
  const [messages, setMessages] = useState<{ role: 'user' | 'assistant', content: string }[]>([]);
  const [input, setInput] = useState('');
  const handleSend = async () => {
    if (!input.trim()) return;
    // 添加用户消息
    const newMessages = [...messages, { role: 'user', content: input }];
    setMessages(newMessages);
    setInput('');
    // 调用API并添加回复
    try {
      const reply = await chatWithQianFan(input);
      setMessages([...newMessages, { role: 'assistant', content: reply }]);
    } catch (error) {
      setMessages([...newMessages, { role: 'assistant', content: '请求失败，请重试' }]);
    }
  };
  return (
    <div className="chat-container">
      <div className="messages">
        {messages.map((msg, index) => (
          <div key={index} className={`message ${msg.role}`}>
            {msg.content}
          </div>
        ))}
      </div>
      <div className="input-area">
        <input
          value={input}
          onChange={(e) => setInput(e.target.value)}
          onKeyPress={(e) => e.key === 'Enter' && handleSend()}
        />
        <button onClick={handleSend}>发送</button>
      </div>
    </div>
  );
};

3.3 样式优化与跨平台适配

在src/styles/chat.css中添加响应式样式：

.chat-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
}
.messages {
  flex: 1;
  padding: 16px;
  overflow-y: auto;
}
.message {
  margin-bottom: 12px;
  padding: 8px 12px;
  border-radius: 8px;
}
.user {
  background-color: #e3f2fd;
  align-self: flex-end;
}
.assistant {
  background-color: #f1f1f1;
  align-self: flex-start;
}
.input-area {
  display: flex;
  padding: 16px;
  border-top: 1px solid #ddd;
}
.input-area input {
  flex: 1;
  padding: 8px;
  margin-right: 8px;
}

四、性能优化与打包

4.1 启用流式响应（SSE）

千帆API支持流式返回，可修改chatWithQianFan为流式处理：

export const chatWithQianFanStream = async (message: string, onData: (chunk: string) => void) => {
  const token = await getAccessToken();
  const url = `https://aip.baidubce.com/rpc/2.0/ai_custom/v1/wenxinworkshop/chat/eb-instant?access_token=${token}`;
  const response = await axios.post(url, {
    messages: [{ role: 'user', content: message }]
  }, {
    headers: { 'Content-Type': 'application/json' },
    responseType: 'stream'
  });
  // 解析流式数据（需根据实际API响应格式调整）
  response.data.on('data', (chunk: Buffer) => {
    const text = chunk.toString();
    if (text.includes('data:')) {
      const content = text.split('data: ')[1].trim();
      onData(content);
    }
  });
};

4.2 打包配置优化

在electron-forge.config.js中启用ASAR打包和代码签名：

module.exports = {
  packagerConfig: {
    asar: true,
    icon: 'src/assets/icon',
    win32metadata: {
      CompanyName: 'Your Company',
      ProductName: 'AI Chat'
    }
  },
  makers: [
    {
      name: '@electron-forge/maker-squirrel',
      config: {
        name: 'ai_chat',
        setupIcon: 'src/assets/icon.ico'
      }
    },
    {
      name: '@electron-forge/maker-dmg',
      config: {
        background: 'src/assets/dmg-background.png',
        icon: 'src/assets/icon.icns'
      }
    }
  ]
};

五、安全与隐私建议

1. API密钥保护：避免在前端代码中直接暴露密钥，建议通过后端服务中转请求。
2. 输入过滤：对用户输入进行XSS过滤，防止恶意代码注入。
3. 数据加密：敏感对话内容可考虑端到端加密。

六、扩展功能方向

1. 多模型支持：集成千帆平台的其他模型（如文心一言）。
2. 插件系统：通过Electron的IPC机制支持第三方插件。
3. 离线模式：使用TensorFlow.js加载轻量级模型实现本地推理。

七、总结

通过Electron Forge与百度智能云千帆大模型的结合，开发者可以快速构建功能完善的桌面端AI应用。本文从环境搭建到性能优化提供了全流程指导，关键点包括：

• 使用TypeScript确保代码健壮性。
• 封装API调用逻辑，分离认证与业务。
• 通过流式响应提升用户体验。
• 跨平台适配与打包优化。

实际开发中，建议结合Electron的session模块管理网络请求，并利用ipcMain/ipcRenderer实现主进程与渲染进程的安全通信。