手把手带你基于 Electron 开发一个简单的 AI 对话聊天应用

以下内容假设您已具备基本的 JavaScript 知识。

1. 准备环境

安装 Node.js 和 npm

确保已安装 Node.js 和 npm，下载地址：Node.js 官网。

安装 Electron

运行以下命令全局安装 Electron：

npm install -g electron

2. 创建项目并初始化

创建项目文件夹

mkdir ai-chat-app
cd ai-chat-app

初始化 `package.json`

npm init -y

3. 安装依赖

安装必要的依赖：

Electron：用于构建桌面应用。
Axios：发送 HTTP 请求与 AI 接口通信。
dotenv：管理环境变量。

运行以下命令：

npm install electron axios dotenv

4. 配置项目结构

创建以下目录和文件结构：

ai-chat-app/
├── main.js        // Electron 主进程入口文件
├── preload.js     // 预加载脚本
├── renderer/      // 渲染进程
│   ├── index.html
│   ├── style.css
│   └── index.js
├── .env           // 环境变量文件
└── package.json

5. 编写代码

配置 `.env`

将你的 AI 服务密钥（例如 OpenAI）写入 .env：

OPENAI_API_KEY=your_openai_api_key

编写 `main.js`

负责启动 Electron 主窗口：

const { app, BrowserWindow } = require('electron');
const path = require('path');

let mainWindow;

app.on('ready', () => {
    mainWindow = new BrowserWindow({
        width: 800,
        height: 600,
        webPreferences: {
            preload: path.join(__dirname, 'preload.js'),
        },
    });

    mainWindow.loadFile('./renderer/index.html');
});

编写 `preload.js`

允许渲染进程与主进程通信：

const { contextBridge } = require('electron');

contextBridge.exposeInMainWorld('api', {
    fetchAIResponse: async (prompt) => {
        const response = await fetch('http://localhost:3000/api/chat', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({ prompt }),
        });
        return response.json();
    },
});

编写 `renderer/index.html`

简单的用户界面：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>AI Chat App</title>
</head>
<body>
    <div id="app">
        <textarea id="input" placeholder="Ask something..."></textarea>
        <button id="send">Send</button>
        <div id="output"></div>
    </div>
    <script src="index.js"></script>
</body>
</html>

编写 `renderer/style.css`

简单的样式：

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    background-color: #f0f0f0;
}

#app {
    width: 80%;
    max-width: 600px;
}

textarea {
    width: 100%;
    height: 100px;
    margin-bottom: 10px;
    padding: 10px;
    font-size: 16px;
}

button {
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
}

#output {
    margin-top: 20px;
    background: #fff;
    padding: 10px;
    border-radius: 5px;
}

编写 `renderer/index.js`

处理用户输入和显示响应：

const input = document.getElementById('input');
const sendButton = document.getElementById('send');
const output = document.getElementById('output');

sendButton.addEventListener('click', async () => {
    const prompt = input.value;
    if (!prompt) return;

    const response = await window.api.fetchAIResponse(prompt);
    output.innerText = response.answer || 'No response.';
});

6. 运行项目

添加启动脚本

修改 package.json：

"scripts": {
    "start": "electron ."
}

启动应用

运行以下命令：

npm start

7. 部署 AI 接口（选用 OpenAI）

示例：设置一个简单的 Node.js 服务器来代理 OpenAI API

安装依赖：

npm install express body-parser openai

创建 server.js：

require('dotenv').config();
const express = require('express');
const bodyParser = require('body-parser');
const { Configuration, OpenAIApi } = require('openai');

const app = express();
app.use(bodyParser.json());

const openai = new OpenAIApi(
    new Configuration({ apiKey: process.env.OPENAI_API_KEY })
);

app.post('/api/chat', async (req, res) => {
    const { prompt } = req.body;

    try {
        const completion = await openai.createCompletion({
            model: 'text-davinci-003',
            prompt,
            max_tokens: 100,
        });

        res.json({ answer: completion.data.choices[0].text.trim() });
    } catch (error) {
        res.status(500).send('Error fetching response.');
    }
});

app.listen(3000, () => console.log('Server running on port 3000.'));

启动服务器：

node server.js

这样，你就完成了一个简单的 AI 对话聊天应用！如需进一步优化，请考虑以下方向：

UI 美化：使用更高级的 CSS 或集成框架如 Bootstrap。
功能扩展：添加聊天记录、用户登录等功能。
打包应用：使用 electron-packager 或 electron-builder 将项目打包为可执行文件。

需要更深入的指导，随时提问！

#前端开发分享于 2025-01-07