dshbase

插件目录 / Developer / dsh-canvas-preview

dsh-canvas-preview

已验证 · 实测可装 jiuyuechuwuhao

✓ 持续维护

查看 GitHub ↗ ← 返回插件目录

2Stars
0Forks
0未关闭 issue
语言
2026-08-19最近推送
跨平台平台

功能简介

🎨 DeepSeek Harness 的画板预览插件 — AI 生成的网页产物实时预览 · PNG/JPG/SVG 一键导出(对标 Gemini Canvas 体验)

我们的评价
可用 — 实测通过,早期项目

🎨 DeepSeek Harness 的画板预览插件 — AI 生成的网页产物实时预览 · PNG/JPG/SVG 一键导出(对标 Gemini Canvas 体验) 实测能干净安装、正常启动。早期项目,但功能可用。

「已验证」表示我们的自动化 CI 在干净 profile 里实际执行了 dsh plugin add 并启动成功——仅此而已。功能描述与版本兼容性均为作者声明。这不是安全审计,也不代表对第三方代码的背书。

README

🎨 dsh-canvas-preview

DeepSeek Harness 的画板预览插件 — AI 生成的网页产物,实时预览 · 一键高清导出

Canvas preview panel for DeepSeek Harness
live-preview AI-generated HTML artifacts and export them as high-res PNG/JPG in one click.

npm
Platform: DeepSeek Harness
License: MIT
topic: dsh-plugin
Author
GitHub Release


🤔 什么是 DeepSeek Harness?

DeepSeek Harness(DSH) 是 DeepSeek 开源的
AI 智能体运行台:浏览器里跑一个能读写文件、执行命令、调用工具的 AI 编程助手。
它的每一项能力都是一个 Cordis 插件 —— 本项目就是其中之一。

DeepSeek Harness (DSH) is DeepSeek's open-source agent harness: a browser-based AI coding
assistant whose every capability is a Cordis plugin. This project is one of them.


✨ 它解决什么问题 / What it solves

用 DSH 做内容创作时,AI 经常生成自包含 HTML 产物——架构图、信息图、网页原型、幻灯片……
但你只能去文件夹里双击打开,来回切换窗口。

dsh-canvas-preview 把「Gemini / Claude 的 Canvas 画板体验」带进 DSH

🖼 画板页签 与「聊天」并排的独立视图,左侧文件列表 + 右侧沙箱实时预览
🔄 自动同步 每 4 秒扫描工作区,AI 一保存你立刻看到,无需手动刷新
↗️ 右上角通知卡 AI 生成新产物瞬间弹出实时渲染缩略图,整卡可拖动、可展开、可调大小
📂 另存为 原生 macOS 目录选择器,默认 HTML 同目录,可改存「下载」或任何位置
📥 PNG/JPG/SVG 导出 位图:Chrome 无头 2x 高清(3200×2400)· ~2s;矢量:SVG 直提(瞬时 · 无限缩放)· 点击结果直达 Finder
🌓 细节体验 宽度三档(适配/1280/手机竖屏)· 深色预览 · 导出耗时显示

🏗 架构 / Architecture

双平面插件架构

双平面 Cordis 插件:Client 半(浏览器)注册画板页签与通知卡,通过独立 RPC 频道
/canvas(不占用官方 /api 拦截器)调用 Host 半(Node.js)的文件扫描与导出引擎。
导出采用「Chrome 后台启动 + 轮询截图文件 + 稳定即杀」策略——不受被墙字体影响,永不挂起。

🚀 安装 / Install

别人装只需要一条命令(会自动装包、写入 profile、尝试重启 Harness):

npx dsh-canvas-preview

然后打开 http://127.0.0.1:3080/ ,会话顶栏出现「画板」即可。

等价官方装包命令(包内已声明 dsh.bundle,会套用 cordis.patch.yml 启用画板):

dsh plugin --profile web add dsh-canvas-preview

npx 安装器同样会写入 profile 并尝试重启。)

本地开发(file: 链接,改源码即生效):

dsh plugin --profile web add \
  "dsh-canvas-preview@file:/绝对路径/dsh-canvas-preview"

然后在 ~/.dsh/profiles/web/cordis.patch.yml 启用(示例见 install/cordis.patch.example.yml)。

动态插件方式(创造模式,不写 profile)

  1. 克隆本仓库到任意位置
  2. 在 DSH 会话中对 Agent 说:

    dsh-canvas-preview/dynamic/ 的 host.js + client.js 定义并运行画板插件

  3. 批准一次插件运行 —— 画板页签即出现在会话顶部

🔐 访问范围 / What it accesses

访问 说明
工作区 HTML 扫描会话 cwd 下的 .html / .htm,在沙箱 iframe 中预览
本机 Chrome PNG/JPG 导出时启动无头 Chrome 截图,写回工作区或指定目录
网络 把产物发到第三方。被预览的 HTML 自己请求远程字体/图时除外
凭据 不读取 API Key

🔎 在哪找到 / Discover

🗺 Roadmap

  • 画板页签 · 文件列表 · 沙箱预览
  • 会话 cwd 智能定位扫描根
  • 自动同步(签名轮询,不重置用户选中)
  • 宽度适配 / 深色预览
  • 右上角产物通知卡(实时缩略图 + 整卡拖动 + 可调大小)
  • PNG/JPG 导出(2x · ~2s · 抗字体墙 · 会话沙箱策略直传)
  • 另存为(原生目录选择器)+ 导出后 Finder 定位
  • v0.4 · 静态包dsh plugin add + __ModuleLoader__ 客户端包装
  • SVG 矢量导出(直接提取 <svg> 块,瞬时完成,无限缩放不失真)
  • 自定义导出尺寸
  • 英文文档与演示 GIF

🤝 参与贡献 / Contributing

欢迎 Issue 反馈 bug 与功能建议;欢迎 Fork 后自由修改(MIT 协议)。
PR 会被认真审阅。开发备忘(沙箱策略、Chrome 挂死等硬核经验)见
dynamic/README.md

👤 作者 / Author

jiuyuechuwuhaoGitHub 主页

📄 License

MIT © 2026 jiuyuechuwuhao

安装

🧩 让 Agent 自动装(推荐)

装一次目录插件,之后本站所有插件都能让 DeepSeek Harness 自动找、自动装:

dsh plugin add dshbase-catalog

然后对 agent 说「帮我装 dsh-canvas-preview」,它会在目录里找到并自动安装。文档:dshbase-catalog · 已验证场景包

该插件是 GitHub 源码(未发 npm)——直接从仓库装:

Web profile:

dsh plugin --profile web add github:jiuyuechuwuhao/dsh-canvas-preview

Headless(CLI)profile:

dsh plugin --profile headless add github:jiuyuechuwuhao/dsh-canvas-preview

实测报告

验证通过:从 GitHub 源码完成 L1 安装 + L2 加载 + L3 运行(dsh 0.1.0-rc.6)。

安全:尚未扫描——我们的每日静态扫描将很快覆盖它。

分享徽章

Developer 里更多

浏览全部 7789 个插件 →