qidao123.com技术社区-IT企服评测·应用市场

标题: Electron Forge【实战】百度智能云千帆大模子 —— AI聊天 [打印本页]
作者: 北冰洋以北    时间: 2025-4-27 01:21
标题: 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企服之家，中国第一个企服评测及商务社交产业平台。



欢迎光临 qidao123.com技术社区-IT企服评测·应用市场 (https://dis.qidao123.com/) Powered by Discuz! X3.4