【免费下载链接】hi-kidHiKid - Your AI English Pal. A desktop app built with React and TypeScript, targeting children in non-English-speaking countries who want to practice English speaking and listening.项目地址https://gitcode.com/gh_mirrors/hi/hi-kid点击查看免费下载HiKid 是一款免费开源的AI 英语陪练桌面应用专为非英语国家儿童设计支持语音对话、故事讲述与单词游戏且完全离线运行。本文将完整拆解 HiKid 如何基于electron-vite 三进程模型Main 主进程、Preload 预加载、Renderer 渲染进程构建跨平台桌面应用覆盖目录结构、IPC 通信、路径别名与 electron-builder 打包全流程。HiKid 是什么先看效果HiKid 的界面是一只可爱的小猫Kitten按住麦克风说话AI 会理解你的英语并用语音回答。所有录音、语音识别ASR、大模型对话与语音合成TTS都在本地完成数据不出机器。技术上HiKid 的核心选型非常主流层面选型说明桌面框架Electron 39提供窗口、文件系统、子进程等系统能力构建工具electron-vite 5 Vite 7一条命令同时构建三个进程前端React 19 TypeScript 5.9渲染进程是一个标准 React SPA打包electron-builder 26一键产出 win / mac / linux 安装包测试Vitest 4主进程服务层单元测试目录结构三进程一目了然electron-vite 项目最直观的特点就是src/下按进程划分的目录HiKid 完全遵循这一约定hi-kid/ ├── electron.vite.config.ts # electron-vite 构建配置三个构建目标 ├── electron-builder.yml # 跨平台打包配置 ├── package.json # 启动/构建/打包脚本 ├── src/ │ ├── main/ # ① 主进程Node.js 环境 │ │ ├── index.ts # 应用入口窗口创建、生命周期 │ │ ├── ipc/channels.ts # IPC 通道注册业务逻辑中枢 │ │ ├── services/ # 服务层agent、recorder、servers… │ │ └── __tests__/ # Vitest 单元测试 │ ├── preload/ # ② 预加载脚本安全桥 │ │ ├── index.ts # contextBridge 暴露 window.api │ │ └── index.d.ts # 渲染进程可用的全局类型声明 │ ├── renderer/ # ③ 渲染进程React SPA │ │ ├── index.html │ │ └── src/ # App.tsx、组件、hooks │ └── shared/ # ④ 三进程共享代码i18n 等这套结构的直接好处每个文件属于哪个进程、能用哪些 API一眼就能判断。比如services/recorder.ts用了 Node 的fs和子进程它只能在主进程而Kitten.tsx只用 React属于渲染进程。主进程Main应用的生命线主进程入口是 src/main/index.ts职责清晰创建 BrowserWindow900×860 的无边框菜单栏窗口并通过webPreferences.preload挂上预加载脚本区分开发/生产加载开发环境加载ELECTRON_RENDERER_URL支持 HMR 热更新生产环境加载打包后的本地index.html管理生命周期app.whenReady()时注册 IPC、创建窗口before-quit/window-all-closed时调用cleanup()停止本地 TTS/ASR 服务与语音播放避免残留子进程跨平台细节macOS 自定义应用菜单显示 HiKid、Windows 设置 AppUserModelId、Linux 单独设置窗口图标。业务逻辑则集中在 src/main/ipc/channels.ts它通过ipcMain.handle注册了全部请求通道服务启停、录音、模型下载、配置读写等并借助webContents.send主动向渲染进程推送事件。底层的实际能力由 src/main/services/ 下的模块化服务承担agent.ts— 大模型对话 Agent含打断、流式输出recorder.ts— 带 VAD静音检测的录音servers.ts— 本地 TTS / ASR 服务进程管理download.ts/releases.ts— 模型下载与安装清单config.ts— 用户配置持久化~/.config/hi-kidlogger.ts、window.ts— 日志与主窗口引用这种入口薄、通道集中、服务独立的分层是三进程项目保持可维护性的关键实践。Preload 进程安全的关键桥梁渲染进程运行在沙箱浏览器环境里无法直接访问 Node.js。electron-vite 的三进程模型中Preload 正是补上这一环的角色——它通过contextBridge.exposeInMainWorld把白名单式的 API 挂到window上。看 src/preload/index.ts 的收尾代码if (process.contextIsolated) { contextBridge.exposeInMainWorld(electron, electronAPI) contextBridge.exposeInMainWorld(api, api) }这里暴露了两个对象window.electron— 来自electron-toolkit/preload提供窗口控制最小化、关闭等window.api— HiKid 自定义 API全部基于ipcRenderer.invoke的 Promise 调用例如sendMessage(text)、startRecording()、setConfig(config)。更值得一提的是类型安全src/preload/index.d.ts 用全局declare global声明了window.api的完整接口渲染进程里写window.api.startRecording()时能获得完整的智能提示和参数校验——新增一个 IPC 功能只需四处改动preload 定义 → d.ts 类型 → main 处理 → renderer 调用流程在 CLAUDE.md 中有明确约定。渲染进程Renderer一个标准 React SPA渲染进程与做 Web 前端没有任何区别src/renderer/src/main.tsx 挂载根组件src/renderer/src/App.tsx 负责屏幕状态机loading → 依赖检查 → 模型下载 → 引导页 → 对话页并通过两个 hooks 与主进程解耦useConversation— 订阅kitten:state、transcription、llm:delta等事件驱动小猫状态机idle / listening / thinking / speaking与聊天气泡useConfig— 读取与保存 AI 名称、System Prompt、模型接入地址等配置。组件按功能拆分在 src/renderer/src/components/Kitten、VoiceButton、ChatBubbles、SettingsPanel 等共享的 i18n 资源放在src/shared/实现同一份文案在中英文界面复用。IPC 通信设计invoke 请求 事件推送HiKid 的 IPC 分为两类这也是桌面应用通信的通用范式方向机制典型通道渲染 → 主请求/响应ipcRenderer.invokeipcMain.handleservices:start、recorder:start、config:set、models:download主 → 渲染事件推送webContents.sendipcRenderer.onkitten:state、transcription、llm:delta、tts:event、download:progress、error请求/响应通道天然适合有返回值的操作如读取配置而语音对话天然是流式的——识别出文字推transcription、模型逐字输出推llm:delta、开始/停止发音推tts:event。渲染进程只需订阅事件UI 就会自动活起来。订阅类 API 在 preload 中还统一返回一个取消函数onKittenState(cb)返回() unsubscribe配合 React 的useEffect清理函数能优雅避免事件监听泄漏——这是一个很值得抄作业的细节。路径别名与构建electron.vite.config.ts 只需十几行三进程项目的构建配置出奇地简单因为 electron-vite 默认就按src/main、src/preload、src/renderer三个约定目录分别构建。HiKid 的配置 electron.vite.config.ts 只额外做了两件事为 renderer 注入renderer→src/renderer/src、shared→src/shared的路径别名启用vitejs/plugin-react支持 JSX 与 HMR。三个 TypeScript 工程tsconfig.json、tsconfig.node.json、tsconfig.web.json分别覆盖 mainpreload、web 与渲染层npm run typecheck可分别校验。构建产物统一输出到out/目录main / preload / renderer 三份 bundlepackage.json的main字段直接指向./out/main/index.js。开发体验方面package.json 提供了完整的脚本链npm run dev # electron-vite dev三进程并行构建 热更新 npm start # 生产模式预览 npm run build:win # 打包 Windows 安装包 npm run build:mac # 打包 macOS 应用 npm run build:linux# 打包 Linux 版本跨平台打包与工程化打包交给 electron-builderelectron-builder.yml 描述通用配置另有 electron-builder.bundled.yml 用于内嵌依赖的 macOS 精简发行包配合 scripts/prepare-bundled.js 预处理。工程化配套同样齐整单元测试src/main/tests/ 下对 agent、config、i18n、logger、recorder、window 等服务逐一覆盖npm test即跑 Vitest规范检查ESLint 9 flat config Prettiernpm run lint/npm run format需求与计划文档docs/plans/ 与 docs/brainstorms/ 保留了语音对话集成、可配置 AI 等特性的需求与实施记录是很好的功能演进参考安装文档INSTALL.md / INSTALL-cn.md 分中英文说明依赖准备。动手跑起来本地环境要求 Node.js ≥ 20git clone https://gitcode.com/gh_mirrors/hi/hi-kid cd hi-kid npm install npm run dev # 开发模式带热更新总结三进程模型的实践要点通过 HiKid 这个项目可以提炼出 electron-vite 三进程架构的 5 个可复用实践目录即进程src/main/src/preload/src/renderer物理隔离杜绝跨进程误用 API白名单暴露preload 只暴露最小 API 面并用.d.ts让调用方享受完整类型提示双向通信分层请求用invoke流式状态用send 订阅订阅 API 返回取消函数入口薄、服务厚主进程入口只管窗口与生命周期业务下沉到services/便于单测一条命令跨平台electron-vite 管构建electron-builder 管打包build:win/mac/linux各一行。这套模式简单、可预期是构建跨平台 Electron 桌面应用的可靠起点。赞分享【免费下载链接】hi-kidHiKid - Your AI English Pal. A desktop app built with React and TypeScript, targeting children in non-English-speaking countries who want to practice English speaking and listening.项目地址https://gitcode.com/gh_mirrors/hi/hi-kid点击查看免费下载相关推荐SimVLA-LIBERO部署实战快速将模型应用到真实机器人系统SimVLA LIBERO部署实战快速将模型应用到真实机器人系统 想要快速将先进的视觉 语言 动作VLA模型部署到真实机器人系统吗SimVLA LIBE让旧 Mac 运行新版 macOS 的免费完整方案 OpenCore Legacy Patcher让旧 Mac 运行新版 macOS 的免费完整方案 OpenCore Legacy Patcher 新版 macOS 不再列出你的机型升级却不必就此停下。Op操作系统固件驱动开发daisyUI × Electron用纯 CSS 组件库构建跨平台桌面应用 UI 的完整实践daisyUI × Electron用纯 CSS 组件库构建跨平台桌面应用 UI 的完整实践 本文围绕 daisyUI 官方文档 Electron compo前端UI组件创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考