Electron Forge【实战】百度智能云千帆大模子 —— AI聊天 ...

1. 获取 Access Key 与 Secret Key

  登录百度智能云
https://login.bce.baidu.com/

   2. 安装node.js sdk

1. npm install @baiducloud/qianfan

复制代码

  3. src/main.ts

1. import { setupIPC } from "./ipc";

复制代码

在 const mainWindow 之后

1. setupIPC(mainWindow);

复制代码

  4. src/ipc.ts

1. import { ipcMain, BrowserWindow } from "electron";
2. import { createProvider } from "./providers/createProvider";
4. interface CreateChatProps {
5.   messages: {
6.     role: string;
7.     content: string;
8.     imagePath?: string;
9.   }[];
10.   providerName: string;
11.   selectedModel: string;
12.   messageId: number;
13. }
15. export function setupIPC(mainWindow: BrowserWindow) {
16.   ipcMain.on("start-chat", async (event, data: CreateChatProps) => {
17.     const { providerName, messages, messageId, selectedModel } = data;
19.     try {
20.       const provider = createProvider(providerName);
21.       const stream = await provider.chat(messages, selectedModel);
22.       for await (const chunk of stream) {
23.         const content = {
24.           messageId,
25.           data: chunk,
26.         };
27.         mainWindow.webContents.send("update-message", content);
28.       }
29.     } catch (error) {
30.       const errorContent = {
31.         messageId,
32.         data: {
33.           is_end: true,
34.           result:
35.             error instanceof Error ? error.message : "与AI服务通信时发生错误",
36.           is_error: true,
37.         },
38.       };
39.       mainWindow.webContents.send("update-message", errorContent);
40.     }
41.   });
42. }

复制代码

  5. src/providers/createProvider.ts

  下方代码中，留意更改为第1步得到的 accessKey 和 secretKey

1. import { QianfanProvider } from "./QianfanProvider";
3. export function createProvider(providerName: string) {
4.   // 定义 QianfanConfig 接口
5.   interface QianfanConfig {
6.     accessKey: string;
7.     secretKey: string;
8.   }
10.   // 定义完整的配置接口
11.   interface Config {
12.     qianfan: QianfanConfig;
13.   }
15.   const providerConfigs: Config = {
16.     qianfan: {
17.       accessKey: "填第1步获取的accessKey",
18.       secretKey: "填第1步获取的secretKey",
19.     },
20.   };
22.   const providerConfig = providerConfigs[providerName as keyof Config] || {};
23.   switch (providerName) {
24.     case "qianfan":
25.       if (!providerConfig.accessKey || !providerConfig.secretKey) {
26.         throw new Error(
27.           "缺少千帆API配置：请在设置中配置 accessKey 和 secretKey"
28.         );
29.       }
30.       return new QianfanProvider(
31.         providerConfig.accessKey,
32.         providerConfig.secretKey
33.       );
34.     default:
35.       throw new Error(`不支持的AI服务提供商: ${providerName}`);
36.   }
37. }

复制代码

  6. src/providers/QianfanProvider.ts

1. import { ChatCompletion } from "@baiducloud/qianfan";
3. interface ChatMessageProps {
4.   role: string;
5.   content: string;
6.   imagePath?: string;
7. }
9. export class QianfanProvider {
10.   // eslint-disable-next-line @typescript-eslint/no-explicit-any
11.   private client: any;
12.   constructor(accessKey: string, secretKey: string) {
13.     this.client = new ChatCompletion({
14.       QIANFAN_ACCESS_KEY: accessKey,
15.       QIANFAN_SECRET_KEY: secretKey,
16.       ENABLE_OAUTH: true,
17.     });
18.   }
19.   async chat(messages: ChatMessageProps[], model: string) {
20.     const stream = await this.client.chat(
21.       {
22.         messages,
23.         stream: true,
24.       },
25.       model
26.     );
27.     return {
28.       async *[Symbol.asyncIterator]() {
29.         for await (const chunk of stream) {
30.           yield chunk;
31.         }
32.       },
33.     };
34.   }
35. }

复制代码

  7. src/preload.ts

1. import { ipcRenderer, contextBridge } from "electron";
3. contextBridge.exposeInMainWorld("electronAPI", {
4.   startChat: (data: CreateChatProps) => ipcRenderer.send("start-chat", data),
5.   onUpdateMessage: (callback: OnUpdatedCallback) =>
6.     ipcRenderer.on("update-message", (_event, value) => callback(value)),
7. });
9. interface CreateChatProps {
10.   messages: {
11.     role: string;
12.     content: string;
13.     imagePath?: string;
14.   }[];
15.   providerName: string;
16.   selectedModel: string;
17.   messageId: number;
18. }
20. interface UpdatgedStreamData {
21.   messageId: number;
22.   data: {
23.     is_end: boolean;
24.     result: string;
25.     is_error?: boolean;
26.   };
27. }
29. type OnUpdatedCallback = (data: UpdatgedStreamData) => void;

复制代码

  8. 页面中利用

1. // 访问 AI 模型，获取答案
2. const get_AI_answer = async (answerIndex: number) => {
3.   await (window as any).electronAPI.startChat({
4.     messageId: answerIndex,
5.     providerName: convsersation.value!.AI_providerName,
6.     selectedModel: convsersation.value!.AI_modelName,
7.     // 发给AI模型的消息需移除最后一条加载状态的消息,使最后一条消息为用户的提问
8.     messages: convsersation
9.       .value!.msgList.map((message) => ({
10.         role: message.type === "question" ? "user" : "assistant",
11.         content: message.content,
12.       }))
13.       .slice(0, -1),
14.   });
15. };

复制代码

完备利用范例见
https://blog.csdn.net/weixin_41192489/article/details/146472170

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。