← 返回列表
未验证
HTML 实时渲染插件：模型通过专门的 artifact 工具创建/修补 HTML 文档，GUI 在沙箱 iframe…
尚未跑自动兼容性验证，可查看页面内的依赖与入口分析。 · 最近上游提交 2026/8/15 · 已提供中文文档
综合分
27.7
GitHub 分
27.7
用户评分
—
★ Stars
2
周下载量
—
安装插件（需先安装 dsh CLI 引擎：npm install -g @deepseek-ai/dsh）
dsh plugin --profile web add lehhair/dsh-html-artifact该插件未发布到 npm，走 GitHub 源安装（pnpm 若拦截 prepare 脚本，按其提示在 pnpm-workspace.yaml 的 allowBuilds 中放行后重跑）
信任档位：仅索引本站尚未对其实装验证，仅收录元数据
- 是什么
- dsh 原生插件 · chat
- 装得上吗
- 本站尚未做安装检查
- 安全吗
- 本站尚未对该插件做风险分级（暂未覆盖，不等同于无风险）
- 还在维护吗
- 更新放缓：最近一次提交在 41 天前
档位由下列信号合成：本站实装验证（真实安装，当前最高到 L4）· 验证所用 dsh 版本 · 静态安装检查 · 风险分级 · 仓库维护状态。下方各区块是它的证据明细。 验证判据与等级说明 →
数据截至 2026/9/23（元数据每日更新 · 实装验证按队列轮转，单条结论的验证时间见上方）
依赖的 DSH / Cordis 模块
@deepseek-ai/cordis@deepseek-ai/dsh-agent@deepseek-ai/dsh-commands@deepseek-ai/dsh-llm@deepseek-ai/dsh-session@deepseek-ai/dsh-tools@deepseek-ai/schemastery@deepseek-ai/dsh-client-locale@deepseek-ai/dsh-client-runtime@deepseek-ai/dsh-client-test-runtime@deepseek-ai/dsh-client-ui-primitives@deepseek-ai/dsh-client-ui-slots用户评分
还没有人投票，来当第一个
订阅周报，不错过优质插件更新
每周一封 · 高评分插件 + 新用户活动
README
由 DeepSeek 最新模型翻译生成dshfind
dsh-html-artifact
HTML 实时渲染插件：模型通过专门的 artifact 工具创建/修补 HTML 文档，GUI 在沙箱 iframe 里实时渲染。核心区别：模型打 patch（old_string/new_string，和文件 edit 工具同一套语义），而不是每次重发整个 HTML —— 只传增量，预览原地更新。
纯扩展实现，不改 harness core：
- 服务端：artifact 工具（create / patch / read / destroy / list），per-session 注册表；card: 'artifact' 渲染意图通过 presentResult 走线（core 的 union 不认识这个 card，返回值做了边界强转，客户端未知 card 自动降级 generic）。
- 客户端：tool.call.toolview keyed slot 注册 artifact 行的原子视图，沙箱 iframe（CSP default-src 'none' + sandbox="allow-scripts" 不透明源 + 主题变量 + 尺寸桥 + 存储 shim），同一 artifact id 的后续 patch 调用原地更新预览。
安装
发布版走 GitHub Releases 的 tarball（dsh plugin 安装后自动加入 profile 层栈），releases/latest 永远指向最新版本，链接不用随版本改动：
dsh plugin --profile web add "https://github.com/lehhair/dsh-html-artifact/releases/latest/download/dsh-external-dsh-html-artifact.tgz"
然后重启 dsh web 服务，刷新页面。不要用 dsh plugin add github:lehhair/dsh-html-artifact 安装源码（仓库的 lib/ 被 gitignore，源码安装没有构建产物）。
⚠️ 升级注意：pnpm 会按 URL 缓存 tarball——同一 latest 链接在新版本发布后可能命中旧缓存。装到旧版时先 dsh plugin --profile web remove @dsh-external/dsh-html-artifact 再重新安装（必要时 pnpm store prune）。
用法
模型侧（工具描述已内置）：
1. artifact create { title?, html? } —— 创建，GUI 立即渲染沙箱预览。
2. artifact patch { id, old_string, new_string, replace_all? } —— 对已有 artifact 打补丁，只发变更；每个 patch 调用结算后预览原地更新，会话里显示一行旧/新对比。
3. artifact read { id } / artifact destroy { id } / artifact list —— 读取源码 / 关闭 / 枚举。
安全边界：预览在 srcdoc iframe 中，CSP default-src 'none'（脚本/样式允许内联，外部 https/http 资源允许），iframe 无 allow-same-origin（不透明源），artifact 脚本无法触达宿主文档；localStorage/sessionStorage 被内存 shim 替代。
交互数据提交
预览底部 Submit interaction 按钮会把用户在 artifact 内的交互数据注入当前会话（Agent.followup，agent 立即读取分析）。收集三层：
1. 显式协议（推荐，游戏/计数器等内部状态）：artifact 脚本把值得提交的状态写成 JSON 值并随状态变化更新：
window.__dshArtifactData = { score: currentScore, moves: moves }
工具描述里已内置该指令，模型生成带内部状态的 artifact 时会自动写。
2. 表单控件（自动）：input / textarea / select / checkbox / radio 的当前值按 name/id 收集。
3. 按钮点击（自动）：点击过的按钮（data-artifact-action 优先，否则按钮文本）与次数自动记录。
开发
pnpm install # devDeps 是 link: 到 ../dsh2026/deepseek-harness 的本地 checkout
pnpm run check # typecheck + test + build
测试：tests/registry.spec.ts（服务端纯逻辑：替换语义、字节上限、截断、错误分类）+ tests/artifact-row.spec.tsx（客户端渲染：沙箱 iframe、patch 对比、跨调用实时更新、destroy/list/read 分支）。
CI（.github/workflows/build-release.yml）：发布时 checkout 固定 ref 的 harness 构建后打包 tarball 上传到 Release。注意：同 URL 重建 release 会命中 pnpm 的 URL 缓存，出新版本务必 bump version。