Nanbeige 4.1-3B一文详解：如何将像素终端打包为Electron桌面应用

Nanbeige 4.1-3B一文详解：如何将像素终端打包为Electron桌面应用

1. 项目背景与目标

Nanbeige 4.1-3B像素冒险聊天终端是一款独具特色的AI对话前端，采用复古JRPG风格设计。本文将详细介绍如何将这个基于Streamlit的Web应用打包为跨平台的Electron桌面应用，使其具备更好的用户体验和离线使用能力。

为什么要打包为Electron应用？

• 提供原生应用体验（窗口、菜单栏、系统托盘等）
• 支持离线使用（模型可本地部署）
• 避免浏览器兼容性问题
• 方便分发和安装

2. 环境准备与工具链

2.1 基础环境要求

• Node.js 16+（包含npm）
• Python 3.8+（用于原Streamlit应用）
• Git（可选，用于版本控制）

2.2 关键依赖安装

# 全局安装Electron打包工具 npm install -g electron electron-builder

2.3 项目结构准备

建议按以下结构组织项目：

nanbeige-electron/ ├── main.js # Electron主进程代码 ├── preload.js # 安全通信脚本 ├── package.json # 项目配置 ├── build/ # 打包配置 └── src/ # 原Streamlit应用代码 ├── app.py # 主应用文件 └── assets/ # 静态资源

3. Electron基础配置

3.1 package.json配置

{ "name": "nanbeige-desktop", "version": "1.0.0", "main": "main.js", "scripts": { "start": "electron .", "pack": "electron-builder --dir", "dist": "electron-builder" }, "dependencies": { "electron": "^25.0.0" }, "build": { "appId": "com.example.nanbeige", "win": { "target": "nsis", "icon": "build/icon.ico" }, "mac": { "target": "dmg", "icon": "build/icon.icns" }, "linux": { "target": "AppImage", "icon": "build/icon.png" } } }

3.2 主进程配置（main.js）

const { app, BrowserWindow } = require('electron') const path = require('path') function createWindow() { const win = new BrowserWindow({ width: 1200, height: 800, webPreferences: { preload: path.join(__dirname, 'preload.js'), nodeIntegration: false, contextIsolation: true }, icon: path.join(__dirname, 'build/icon.png') }) // 加载本地Streamlit服务 win.loadURL('http://localhost:8501') // 或者打包后的静态文件 // win.loadFile('dist/index.html') } app.whenReady().then(() => { createWindow() app.on('activate', () => { if (BrowserWindow.getAllWindows().length === 0) { createWindow() } }) }) app.on('window-all-closed', () => { if (process.platform !== 'darwin') { app.quit() } })

4. Streamlit应用适配改造

4.1 端口与URL配置调整

修改Streamlit应用，确保使用固定端口：

import streamlit as st # 配置固定端口 st.set_page_config( page_title="Nanbeige RPG Terminal", layout="wide" ) # 应用主逻辑...

4.2 静态资源处理

将像素风格所需的CSS和图片资源放入static目录：

# 在app.py中添加静态文件配置 st.markdown(""" <link rel="stylesheet" href="static/pixel.css"> """, unsafe_allow_html=True)

4.3 启动脚本集成

创建启动脚本start.sh（Linux/macOS）或start.bat（Windows）：

#!/bin/bash # 启动Streamlit服务 streamlit run src/app.py --server.port=8501 --server.headless=true

5. 打包与分发

5.1 构建配置优化

在package.json中添加资源拷贝配置：

"build": { "extraResources": [ { "from": "src", "to": "app", "filter": ["**/*"] } ] }

5.2 执行打包命令

# 开发测试 npm start # 生成可分发包 npm run dist

5.3 平台特定说明

Windows平台：

• 生成NSIS安装包
• 可添加开始菜单快捷方式

macOS平台：

• 生成.dmg镜像文件
• 支持拖拽安装

Linux平台：

• 生成AppImage通用包
• 支持大多数主流发行版

6. 常见问题解决

6.1 端口冲突问题

解决方案：在Electron主进程中检测端口占用，自动切换备用端口

const portfinder = require('portfinder') portfinder.getPort({ port: 8501 }, (err, port) => { // 使用可用端口启动服务 })

6.2 静态资源加载失败

解决方案：确保资源路径正确，使用绝对路径

win.loadURL(`file://${path.join(__dirname, 'app/index.html')}`)

6.3 跨平台样式差异

解决方案：添加平台特定CSS覆盖

/* 在pixel.css中添加 */ .platform-win { /* Windows样式覆盖 */ } .platform-mac { /* macOS样式覆盖 */ } .platform-linux { /* Linux样式覆盖 */ }

7. 总结与进阶建议

通过本文的步骤，我们成功将Nanbeige 4.1-3B像素冒险聊天终端打包为Electron桌面应用。这种方案结合了Streamlit的快速开发优势和Electron的跨平台分发能力。

进阶优化建议：

1. 使用PyInstaller将Python环境打包，实现完全离线
2. 添加自动更新功能（electron-updater）
3. 集成系统通知功能
4. 开发插件系统扩展功能
5. 优化启动速度（使用vite等构建工具）

最终效果对比：

获取更多AI镜像

想探索更多AI镜像和应用场景？访问 CSDN星图镜像广场，提供丰富的预置镜像，覆盖大模型推理、图像生成、视频生成、模型微调等多个领域，支持一键部署。