electron开发一个pc桌面chatgpt聊天程序-BFW博客

electron开发一个pc桌面chatgpt聊天程序

chatgpt为首的人工智能的兴起给aigc带来了重大的发展，我们无需在打开搜索引擎，直接用chatgpt进行搜索，今天我们来使用electron开发一个可在linux、windows、mac运行的chatgpt客户端，先看效果：

electron开发一个pc桌面<a href='/tag/chatgpt.html'>chatgpt</a>聊天程序

这是托盘及菜单

electron开发一个pc桌面<a href='/tag/chatgpt.html'>chatgpt</a>聊天程序

当我们关闭窗体的时候他会自动隐藏起来没有退出，当我们按快捷键ctrl+shift+x的时候，他又会显示出来，非常的方便，那么我们来讲解一下如何开发这样的electron程序。

一、标题

1. 安装electron-forge：在命令行中输入`npm install -g electron-forge`，安装完成后可以使用`electron-forge`命令。2. 创建一个新的electron-forge项目：在命令行中输入`electron-forge init my-app`，其中`my-app`是你的项目名称。3. 进入项目目录：在命令行中输入`cd my-app`。4. 创建主进程文件：在项目根目录下创建一个`main.js`文件，这是应用程序的主进程文件。

5. 编写主进程代码：在`main.js`文件中编写应用程序的主进程代码，例如创建窗口、处理事件等。

import { app, BrowserWindow ,globalShortcut,Menu, Tray } from 'electron';

// Handle creating/removing shortcuts on Windows when installing/uninstalling.
if (require('electron-squirrel-startup')) { // eslint-disable-line global-require
  app.quit();
}

// Keep a global reference of the window object, if you don't, the window will
// be closed automatically when the JavaScript object is garbage collected.
let mainWindow;
let tray = null;
let isquit=false;
const createWindow = () => {
  // Create the browser window.
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
webPreferences: {
      nodeIntegration: true
    },
icon: `${__dirname}/icon.png`
  });
mainWindow.setMenuBarVisibility(false)

  // and load the index.html of the app.
  mainWindow.loadURL(`file://${__dirname}/index.html`);

  // Open the DevTools.
 // mainWindow.webContents.openDevTools();
mainWindow.on('close', function (e) {
if(!isquit){
  e.preventDefault();
  mainWindow.hide();
}

})
  // Emitted when the window is closed.
  mainWindow.on('closed', () => {
    // Dereference the window object, usually you would store windows
    // in an array if your app supports multi windows, this is the time
    // when you should delete the corresponding element.
   //mainWindow.minimize()
 mainWindow = null;
  });
  // 注册全局快捷键
  globalShortcut.register('CommandOrControl+Shift+X', () => {
   mainWindow.show()
    console.log('全局快捷键被触发')
  })
};

// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.on('ready', createWindow);

// Quit when all windows are closed.
app.on('window-all-closed', () => {
  // On OS X it is common for applications and their menu bar
  // to stay active until the user quits explicitly with Cmd + Q
//event.preventDefault(); // 防止默认行为
 //mainWindow.minimize();
if (process.platform !== 'darwin') {
  app.quit();
 }
});

app.on('activate', () => {
  // On OS X it's common to re-create a window in the app when the
  // dock icon is clicked and there are no other windows open.
  if (mainWindow === null) {
    createWindow();
  }
});

// In this file you can include the rest of your app's specific main process
// code. You can also put them in separate files and import them here.

//const { app, globalShortcut } = require('electron')


app.whenReady().then(() => {
  
  tray = new Tray(`${__dirname}/icon.png`);
  const contextMenu = Menu.buildFromTemplate([
  
    {label: '显示',click: () => { mainWindow.show();}},
    // {label: '显示, type: 'radio', checked: true},
    {label: '退出', click: () => { isquit=true;mainWindow.close();app.quit()}}
  ]);
  tray.setContextMenu(contextMenu);
tray.on("click",()=>{
  mainWindow.show();
  //tray.destory()
})
});
app.on('will-quit', () => {
  // 注销全局快捷键
  globalShortcut.unregisterAll()
})

6. 创建渲染进程文件：在项目根目录下创建一个`index.html`文件，这是应用程序的渲染进程文件。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta charset="utf-8" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
    <style>
        @charset "UTF-8";
@import url("https://fonts.googleapis.com/css?family=Manrope:300,400,500,600,700&display=swap&subset=latin-ext");
:root {
  --body-bg-color: #e5ecef;
  --theme-bg-color: #fff;
  --settings-icon-hover: #9fa7ac;
  --developer-color: #f9fafb;
  --input-bg: #f8f8fa;
  --input-chat-color: #a2a2a2;
  --border-color: #eef2f4;
  --body-font: "Manrope", sans-serif;
  --body-color: #273346;
  --settings-icon-color: #c1c7cd;
  --msg-message: #969eaa;
  --chat-text-bg: #f1f2f6;
  --theme-color: #0086ff;
  --msg-date: #c0c7d2;
  --button-bg-color: #f0f7ff;
  --button-color: var(--theme-color);
  --detail-font-color: #919ca2;
  --msg-hover-bg: rgba(238, 242, 244, 0.4);
  --active-conversation-bg: linear-gradient(
   to right,
   rgba(238, 242, 244, 0.4) 0%,
   rgba(238, 242, 244, 0) 100%
  );
  --overlay-bg: linear-gradient(
   to bottom,
   rgba(255, 255, 255, 0) 0%,
   rgba(255, 255, 255, 1) 65%,
   rgba(255, 255, 255, 1) 100%
  );
  --chat-header-bg: linear-gradient(
   to bottom,
   rgba(255, 255, 255, 1) 0%,
   rgba(255, 255, 255, 1) 78%,
   rgba(255, 255, 255, 0) 100%
  );
}

[data-theme=purple] {
  --theme-color: #9f7aea;
  --button-color: #9f7aea;
  --button-bg-color: rgba(159, 122, 234, 0.12);
}

[data-theme=green] {
  --theme-color: #38b2ac;
  --button-color: #38b2ac;
  --button-bg-color: rgba(56, 178, 171, 0.15);
}

[data-theme=orange] {
  --theme-color: #ed8936;
  --button-color: #ed8936;
  --button-bg-color: rgba(237, 137, 54, 0.12);
}

.dark-mode {
  --body-bg-color: #1d1d1d;
  --theme-bg-color: #27292d;
  --border-color: #323336;
  --body-color: #d1d1d2;
  --active-conversation-bg: linear-gradient(
   to right,
   rgba(47, 50, 56, 0.54),
   rgba(238, 242, 244, 0) 100%
  );
  --msg-hover-bg: rgba(47, 50, 56, 0.54);
  --chat-text-bg: #383b40;
  --chat-text-color: #b5b7ba;
  --msg-date: #626466;
  --msg-message: var(--msg-date);
  --overlay-bg: linear-gradient(
   to bottom,
   rgba(0, 0, 0, 0) 0%,
   #27292d 65%,
   #27292d 100%
  );
  --input-bg: #2f3236;
  --chat-header-bg: linear-gradient(
   to bottom,
   #27292d 0%,
   #27292d 78%,
   rgba(255, 255, 255, 0) 100%
  );
  --settings-icon-color: #7c7e80;
  --developer-color: var(--border-color);
  --button-bg-color: #393b40;
  --button-color: var(--body-color);
  --input-chat-color: #6f7073;
  --detail-font-color: var(--input-chat-color);
}

.blue {
  background-color: #0086ff;
}

.purple {
  background-color: #9f7aea;
}

.green {
  background-color: #38b2ac;
}

.orange {
  background-color: #ed8936;
}

* {
  outline: none;
  box-sizing: border-box;
}

img {
  max-width: 100%;
}

body {
  background-color: var(--body-bg-color);
  font-family: var(--body-font);
  color: var(--body-color);
}

html {
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
}

.app {
  display: flex;
  flex-direction: column;
  background-color: var(--theme-bg-color);
  max-width: 1600px;
  height: 100vh;
  margin: 0 auto;
  overflow: hidden;
}

.header {
  height: 80px;
  width: 100%;
  border-bottom: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  padding: 0 20px;
}

.wrapper {
  width: 100%;
  display: flex;
  flex-grow: 1;
  overflow: hidden;
}

.conversation-area,
.detail-area {
  width: 340px;
  flex-shrink: 0;
}

.detail-area {
  border-left: 1px solid var(--border-color);
  margin-left: auto;
  padding: 30px 30px 0 30px;
  display: flex;
  flex-direction: column;
  overflow: auto;
}

.chat-area {
  flex-grow: 1;
}

.search-bar {
  height: 80px;
  z-index: 3;
  position: relative;
  margin-left: 280px;
}
.search-bar input {
  height: 100%;
  width: 100%;
  display: block;
  background-color: transparent;
  border: none;
  color: var(--body-color);
  padding: 0 54px;

  background-repeat: no-repeat;
  background-size: 16px;
  background-position: 25px 48%;
  font-family: var(--body-font);
  font-weight: 600;
  font-size: 15px;
}
.search-bar input::placeholder {
  color: var(--input-chat-color);
}

.logo {
  color: var(--theme-color);
  width: 38px;
  flex-shrink: 0;
}
.logo svg {
  width: 100%;
}

.user-settings {
  display: flex;
  align-items: center;
  cursor: pointer;
  margin-left: auto;
  flex-shrink: 0;
}
.user-settings > * + * {
  margin-left: 14px;
}

.dark-light {
  width: 22px;
  height: 22px;
  color: var(--settings-icon-color);
  flex-shrink: 0;
}
.dark-light svg {
  width: 100%;
  fill: transparent;
  transition: 0.5s;
}

.user-profile {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

.settings {
  color: var(--settings-icon-color);
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}

.conversation-area {
  border-right: 1px solid var(--border-color);
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
}

.msg-profile {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  margin-right: 15px;
}
.msg-profile.group {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--border-color);
}
.msg-profile.group svg {
  width: 60%;
}

.msg {
  display: flex;
  align-items: center;
  padding: 20px;
  cursor: pointer;
  transition: 0.2s;
  position: relative;
}
.msg:hover {
  background-color: var(--msg-hover-bg);
}
.msg.active {
  background: var(--active-conversation-bg);
  border-left: 4px solid var(--theme-color);
}
.msg.online:before {
  content: "";
  position: absolute;
  background-color: #23be7e;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 2px solid var(--theme-bg-color);
  left: 50px;
  bottom: 19px;
}

.msg-username {
  margin-bottom: 4px;
  font-weight: 600;
  font-size: 15px;
}

.msg-detail {
  overflow: hidden;
}

.msg-content {
  font-weight: 500;
  font-size: 13px;
  display: flex;
}

.msg-message {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--msg-message);
}

.msg-date {
  font-size: 14px;
  color: var(--msg-date);
  margin-left: 3px;
}
.msg-date:before {
  content: "•";
  margin-right: 2px;
}

.add {
  position: sticky;
  bottom: 25px;
  background-color: var(--theme-color);
  width: 60px;
  height: 60px;
  border: 0;
  border-radius: 50%;

  background-repeat: no-repeat;
  background-position: 50%;
  background-size: 28px;
  box-shadow: 0 0 16px var(--theme-color);
  margin: auto auto -55px;
  flex-shrink: 0;
  z-index: 1;
  cursor: pointer;
}

.overlay {
  position: sticky;
  bottom: 0;
  left: 0;
  width: 340px;
  flex-shrink: 0;
  background: var(--overlay-bg);
  height: 80px;
}

.chat-area {
  display: flex;
  flex-direction: column;
  overflow: auto;
}
.chat-area-header {
  display: flex;
  position: sticky;
  top: 0;
  left: 0;
  z-index: 2;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  padding: 20px;
  background: var(--chat-header-bg);
}
.chat-area-profile {
  width: 32px;
  border-radius: 50%;
  object-fit: cover;
}
.chat-area-title {
  font-size: 18px;
  font-weight: 600;
}
.chat-area-main {
  flex-grow: 1;
}

.chat-msg-img {
  height: 40px;
  width: 40px;
  border-radius: 50%;
  object-fit: cover;
}

.chat-msg-profile {
  flex-shrink: 0;
  margin-top: auto;
  margin-bottom: -20px;
  position: relative;
}

.chat-msg-date {
  position: absolute;
  left: calc(100% + 12px);
  bottom: 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--msg-date);
  white-space: nowrap;
}

.chat-msg {
  display: flex;
  padding: 0 20px 45px;
}
.chat-msg-content {
  margin-left: 12px;
  max-width: 70%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.chat-msg-text {
  background-color: var(--chat-text-bg);
  padding: 15px;
  border-radius: 20px 20px 20px 0;
  line-height: 1.5;
  font-size: 14px;
  font-weight: 500;
}
.chat-msg-text + .chat-msg-text {
  margin-top: 10px;
}

.chat-msg-text {
  color: var(--chat-text-color);
}

.owner {
  flex-direction: row-reverse;
}
.owner .chat-msg-content {
  margin-left: 0;
  margin-right: 12px;
  align-items: flex-end;
}
.owner .chat-msg-text {
  background-color: var(--theme-color);
  color: #fff;
  border-radius: 20px 20px 0 20px;
}
.owner .chat-msg-date {
  left: auto;
  right: calc(100% + 12px);
}

.chat-msg-text img {
  max-width: 300px;
  width: 100%;
}

.chat-area-footer {
  display: flex;
  border-top: 1px solid var(--border-color);
  width: 100%;
  padding: 10px 20px;
  align-items: center;
  background-color: var(--theme-bg-color);
  position: sticky;
  bottom: 0;
  left: 0;
}

.chat-area-footer svg {
  color: var(--settings-icon-color);
  ...

点击查看剩余70%

打赏博主×

electron开发一个pc桌面chatgpt聊天程序

网友评论0

手把手教你打造千万并发级别的核算检测系统

java、python、js、golang、php通过二进制散列设计权限组合控制代码

介绍5款chrome谷歌浏览器的屏幕录像扩展插件

安卓、苹果ios app上架审核的网址及技巧提示

用socket.io打造一个分布式的基于html的即时通讯系统

php一维二维数组差异对比，新增修改删除了哪些

用js实现抖音字说的动画效果

将coze插件通过api封装成mcp服务给cursor等调用教程

如何在Ubuntu 18.04中使用Coturn创建和配置自己的STUN / TURN服务器

元宇宙即将带火的几大行业

{{item.title}}

console.log() 高级用法你知道几个？

使用 JavaScript 进行实时视频色度抠图绿幕抠像处理（无需插件实现）

electron开发一个pc桌面chatgpt聊天程序

分享一个国内就能使用chatgpt api的开源库chatgpt-api

纯CSS实现函数节流效果的几种方式

Comlink 简介与使用指南

介绍5款js调用webgpu的库

vue+ollama打造离线ai助手，支持语音聊天交互、智能体、工具插件webui的html页面

微信小程序接入阿里Paraformer实时麦克风语音识别成文字教程及代码

three+python加载加密解密渲染展示三维模型解决方案

Blackwell芯片与量子芯片哪个性能更好？

有没有开源的社交账号个人信息收集分享软件？

如何实现文档中包含多国语言跨语言的rag ai文档检索？

js如何在浏览器中对图片或视频使用WebCodecs api进行马赛克处理？

有没有开源的公众号文章排版神器？

5年后手机与app真的会消失？

如何让ai帮我自动在小红书或抖音上自动根据需求截流与潜在客户聊天拉客？

如果用go编写一个在virtualbox中启动的简单操作系统？

go如何搭建一个零信任网络？

如何用python实现一个公网代理访问软件？