如果一个桌面 AI 助手既能“看见”屏幕、听懂语音、查询本地岗位资料，又能尽量避开常见的投屏窗口列表，会是什么体验？

我把这些能力做进了一个开源 Electron 项目：桌面多模态 AI 助手。

它不是简单地把网页套进 Electron，而是打通了这样一条完整链路：

全局快捷键截屏 -> 视觉模型识别 -> 流式生成答案 -> 多图上下文追问 -> 实时语音补充 -> 本地岗位知识检索

项目地址：YangHeng66/interview-coder-cn

先看效果：一个悬浮在桌面上的多模态 AI 助手

应用主窗口采用无边框、透明、置顶设计。平时不需要切换窗口，按下自定义快捷键即可截取当前屏幕并开始分析。

主界面提供“截图解题”和“文字对话”两种工作模式。截图模式用于分析屏幕内容，文字模式则可以直接提问、发送附件或提交语音转录。

顶部还可以切换本地知识来源。例如准备前端岗位时，可以让模型在回答前先检索岗位 JD、个人简历、项目说明和内置前端知识。

最有“噱头”的功能：面试投屏隐身是怎么实现的？

先说结论：这里的“隐身”不是把进程从操作系统中抹掉，而是通过 Electron 的窗口能力，降低应用被常见屏幕共享和窗口选择路径捕获的概率。

核心窗口配置如下：

const mainWindow = new BrowserWindow({
  title: '',
  frame: false,
  transparent: true,
  alwaysOnTop: true,
  skipTaskbar: true,
  hiddenInMissionControl: true,
  show: false
})
​
mainWindow.setContentProtection(true)
mainWindow.setVisibleOnAllWorkspaces(true, { visibleOnFullScreen: true })

这里实际做了几件事：

1. 窗口标题保持为空：部分基于 Chromium/WebRTC 的“共享某个窗口”选择器会忽略无标题窗口，从而减少它出现在可共享窗口列表中的机会。

2. 开启内容保护：setContentProtection(true) 会让部分截图或录屏路径拿到黑屏、空白内容，而不是应用真实画面。

3. 隐藏系统入口：skipTaskbar 和 hiddenInMissionControl 分别减少它在任务栏、Mission Control 等系统界面中的暴露。

4. 透明置顶：窗口可以覆盖在题目页面上，并通过透明度调节让题目和答案同时可见。

5. 不抢焦点与鼠标穿透：应用显示时使用非激活方式，开启鼠标穿透后，鼠标事件继续落到下方的浏览器或 IDE。

悬浮工具条也是一个独立的 BrowserWindow，设置为不可聚焦。它可以点击，也可以按悬停时长触发动作，但不会把输入焦点从正在使用的软件中抢走。

边界必须说明：内容保护不是“绝对防录屏”。不同操作系统、会议软件、采集卡、摄像头和系统级录制方式的行为不同。项目只能降低部分常见捕获路径下的可见性，不能承诺在所有环境中完全隐身。

截图识题：从屏幕像素到流式答案

截图链路运行在 Electron 主进程中。用户按下全局快捷键后，应用通过 desktopCapturer 获取主显示器画面，并转换为 PNG Base64：

const sources = await desktopCapturer.getSources({
  types: ['screen'],
  thumbnailSize: { width, height }
})
​
const screenshot = sources[0].thumbnail.toPNG()
const base64Data = screenshot.toString('base64')

随后，主进程把截图组织成多模态消息，通过 Vercel AI SDK 的 streamText() 发送给视觉模型。模型返回的文本增量再经 IPC 一段一段推送到 React 渲染层，因此用户不需要等待完整答案生成完毕。

完整流程可以概括为：

全局快捷键
   -> desktopCapturer 截取屏幕
   -> PNG / Base64
   -> 拼装图片与文字消息
   -> Vercel AI SDK streamText()
   -> IPC 推送 solution-chunk
   -> React 实时渲染 Markdown

截图模型并不限定某一家服务。项目支持 Chat Completions 和 Responses 两类协议，可以连接 OpenAI、OpenRouter、硅基流动以及其他兼容服务，模型名称也可以自定义。

一张图放不下？追加截图继续分析

遇到长题目、分页代码或多段报错时，一次截图往往不够。

项目在主进程维护多模态会话历史。第一次截图会创建新会话，后续执行“追加截图”时，新图片会进入原有上下文，模型会结合之前所有截图继续分析，而不是把每张图当成孤立问题。

在同一个会话中还可以继续追问，例如：

• “把刚才的 Java 解法改成 TypeScript。”

• “只解释第二张图中的报错原因。”

• “这个方案的时间复杂度是多少？”

新请求会自动中止旧流，用户也可以手动停止生成，避免多个回答并行写入同一界面。

不只会看：实时语音也能进入上下文

项目支持阿里云百炼 Fun-ASR 和火山引擎豆包 Seed-ASR，两套配置相互独立。音频来源可以选择：

• 系统音频

• 麦克风

• 麦克风与系统音频混合

识别到的文本有两种使用方式：

1. 截图时自动附加到图片提示中，让模型同时理解“屏幕上有什么”和“刚才说了什么”。

2. 在文字对话模式中手动发送，或开启自动回答，在检测到句末、停顿后自动进入回答队列。

这让应用不再只是一个截图 OCR 工具，而是一个同时接收图片、文字和语音的桌面多模态入口。

本地岗位知识库：让回答真正贴近你的经历

通用模型能回答算法和八股题，但它不知道你的项目经历，也不知道目标岗位的 JD。为此，我又加了一套本地岗位知识库。

每个岗位档案可以保存：

• 公司与岗位名称

• 职位描述 JD

• 个人简历

• 项目说明

• 面试笔记

知识库支持导入 PDF、DOCX、TXT 和 Markdown。文档在 Electron Worker 中完成解析、切片和索引，使用 MiniSearch 配合中英文分词在本地检索。命中的少量片段会随当前问题发送给模型，文档原件和完整索引仍保存在本机。

项目还内置了一套只读的前端开发通用知识，覆盖 HTML/CSS、JavaScript/TypeScript、浏览器、React/Vue、工程化、性能、安全和质量等常见面试主题。

需要强调的是：当前实现是本地关键词检索，不是向量数据库；扫描版 PDF 也暂不提供 OCR。公开项目时把能力边界说清楚，比堆概念更重要。

独立文字对话：截图之外的第二工作区

截图模型和文字对话模型使用相互独立的配置。文字对话支持 DeepSeek，也可以连接自定义 OpenAI 兼容服务，并提供：

• 多轮流式对话

• Chat Completions / Responses 协议切换

• 独立系统提示词

• 常见文本、Markdown、JSON、CSV 和代码附件

• 语音转录手动发送或自动回答

• 本地岗位知识检索与来源展示

这样做的好处是，视觉模型可以专注于读图，文本模型则可以按成本、速度和推理能力单独选择。

快捷键和悬浮工具条：尽量不打断当前操作

桌面辅助工具最忌讳频繁抢焦点，所以项目的大部分能力都可以通过全局快捷键完成：

• 截图并创建新对话

• 追加截图

• 停止生成

• 显示或隐藏窗口

• 开启鼠标穿透

• 调整透明度

• 移动窗口、上下翻页

• 开始、暂停和清空语音转录

不喜欢背快捷键时，也可以使用悬浮工具条。帮助中心会同步展示当前快捷键和功能说明。

技术架构

项目使用 Electron 37、React 19 和 TypeScript 5.8，整体分为三层：

层级	主要职责
Electron 主进程	截图、全局快捷键、窗口控制、AI 流编排、语音 WebSocket、本地知识库
Preload	通过 contextBridge 暴露受控 IPC API
React 渲染层	页面、Markdown 答案、设置、Zustand 状态与交互

主要技术栈：

• Electron + electron-vite

• React + TypeScript

• Tailwind CSS + shadcn/ui

• Zustand

• Vercel AI SDK

• MiniSearch + unpdf + mammoth

• DashScope Fun-ASR / Volcengine Seed-ASR

• electron-builder

如何运行

git clone https://github.com/YangHeng66/interview-coder-cn.git
cd interview-coder-cn
npm install
npm run dev

启动后进入设置页，分别配置截图模型、文字对话模型和可选的语音服务。截图、语音转录、文字对话和命中的知识片段会发送给你配置的 AI 服务，因此请根据数据敏感程度选择服务商。

Windows 打包：

npm run build:win

写在最后

这个项目最初解决的是“如何不离开当前页面，就能让 AI 理解屏幕内容”的问题。继续做下去后，它逐渐变成了一个完整的桌面多模态工作台：能看截图、听语音、记住上下文、检索本地资料，还能用悬浮窗尽量减少对当前操作的打扰。

如果你对 Electron 窗口控制、多模态 AI、实时语音或本地知识库感兴趣，可以到 GitHub 查看源码：

项目地址： GitHub - YangHeng66/interview-coder-cn: 截屏解题助手：支持多种 OpenAI 兼容 API、Responses API、实时语音转录与悬浮工具栏 · GitHub

项目采用 CC BY-NC 4.0 许可，仅允许非商业使用。也请在合法、合规并获得授权的场景中使用，不要把辅助工具变成违反面试、考试或平台规则的工具。