dsh-pages:让模型用 show_page 把回答做成对话里可交互的网页

前言

在 DeepSeek Harness(DSH)里,模型常见输出是长段 Markdown:对比表、清单、小工具往往要读者自己在脑子里「排版」。若希望「做成一页能点、能填、能算」,以往要么复制 HTML 到浏览器,要么依赖外部 Artifact 类能力,和当前对话上下文脱节。

下面介绍客户端插件 dsh-pages(npm 包名 @orderg-x/dsh-pages,维护者 OrderG-X):模型通过工具 show_page 提交自包含 HTML,页面嵌在回复下方或右侧栏,跟随 DSH 深浅色,带版本与本地持久化,存盘后在无头浏览器里自动体检,并可导出 PNG / PDF / HTML。

这是什么

一句话:DSH 插件;模型调用 show_page,把回答变成嵌在对话里的可交互网页。

  • 分类:客户端(package.json 中 dsh.client.platform 为 web,向对话尾部、工具视图、右侧栏注入 UI)。
  • 许可证:MIT。
  • 当前包版本(仓库 package.json):0.1.0;README 注明该版本尚未发布到 npm,发版前需用文末本地链装方式试跑。

社区目录页:skillhub.cn 上的 dsh-pages。源码与说明:GitHub OrderG-X/dsh-pages。DSH 插件生态由社区目录与独立仓库维护,与 DeepSeek / 幻方无官方从属关系。

核心功能

show_page 与展示方式

模型写入页面时,工具组会先出现骨架卡片(如「正在写页面… 已写 12 KB」)。完成后:

  1. inline(默认):整页嵌在回复下方,高度按内容预量,避免加载后跳动;过高时可收起,点「展开」看全。
  2. card:对话里只放缩略图卡片,点开在右侧栏看整页。

再改同一页时带上上次返回的 page_id,会存为新版本(v2、v3…);旧回合仍显示旧版本,新回合显示新版本。右侧栏可翻版本、刷新、导出,并有「全部页面」列表(带缩略图)。

深浅色与页面内状态

卡片与右侧栏使用 DSH 设计变量。页面内切换主题不重载表单与滑块:运行时脚本在 <html> 上设置 data-theme、data-bs-theme、.dark 与 color-scheme,并覆盖 @media (prefers-color-scheme: dark),使页面跟随 DSH 而非系统偏好。仅一段 HTML 时,外壳提供 --fg、--bg、--card 等变量。

沙箱内默认可用的存储被插件替换为按页持久化:localStorage 写入 ~/.dsh/dsh-pages/pages/<page_id>/state.json(每页约 25 万字上限);sessionStorage 仅本次打开;cookie 读为空;IndexedDB 不可用。对话内嵌页与右侧栏同开一页时,监听 storage 的会同步,否则移回鼠标时整页重载。

自动体检

存盘后在本机无头 Chrome / Edge(与对话相同沙箱策略)打开,约一两秒把结果随工具回传给模型,例如:脚本报错、CDN 库加载失败、被沙箱拦截的请求、空白页、720px / 390px 下横向溢出、深色模式下背景仍浅、嵌高与 100vh 撑高问题。未安装 Chrome / Edge 时跳过。通过时会截深浅色缩略图供「我的页面」使用。

导出与安全边界

右侧栏可导出 PNG、PDF、HTML;导出文件出现在系统「下载」目录。「在文件夹里显示」仅认本次导出过的文件。

页面经 CSP 沙箱加载:connect-src 'none'(无 fetch / XHR / WebSocket);脚本与样式主要从 cdn.jsdelivr.net、cdnjs.cloudflare.com、unpkg.com 引入;图片等多为 data: / blob:。页面无法访问 DSH 接口与用户 cookie。体检与展示用短期本机口令载入,无头浏览器无 DSH cookie。插件以当前 DSH 进程权限运行,安装前宜自行审阅源码与 MIT 许可证。

安装与启用

官方 npm 安装命令(README:0.1.0 发到 npm 后可用):

dsh plugin add @orderg-x/dsh-pages

装完后重启 DSH(客户端在启动时打包,不重启看不到页面)。DSH「插件」页中显示名称为「页面」。

发版前本地开发可链到目录(改代码后同样需重启):

dsh plugin --profile desktop add link:/path/to/dsh-pages

peerDependencies 要求 @deepseek-ai/dsh-tools 在 >=0.1.0-rc.1 <0.2.0-0 或 >=0.2.0-rc.1 <0.3.0-0 区间(optional)。

典型用法

用户侧说法示例(来自 README):「做成一页给我看」「做个房贷计算器」「三款手机对比一下」——需要一页比纯文字更清楚时。

模型调用 show_page 参数如下:

参数 必填 说明
title 是 页面标题,宜短
html 是 完整、自包含 HTML;样式脚本写在页内,库可从 cdn.jsdelivr.net / cdnjs.cloudflare.com / unpkg.com 引用
page_id 否 修改已有页时填上次返回的 page_id,存为新版本
display 否 inline(默认)或 card

HTML 应自包含;需要联网取数的逻辑会被沙箱拒绝,体检结果会提示把数据写进页面。

桌面端 README 记载:用 DeepSeek-V4.1-Flash 实测「做一个房贷计算器」,一轮两步调用 show_page,深色适配与体检通过。仓库在 DSH 0.2.1-rc.3 网页版上跑过端到端测试(深浅色各 31 项)。

文件位置与管理

页面数据目录:

~/.dsh/dsh-pages/pages/<page_id>/

含 meta.json(标题、版本、体检结果)、v1.html、缩略图 v1.jpg / v1-dark.jpg、state.json(页面 localStorage)。删除的页面在 ~/.dsh/dsh-pages/trash/,手动挪回 pages/ 可恢复。「我的页面」支持搜标题;确认删除后进回收站。

配合 dsh-mobile 时,页面仍嵌在对话里,「在右侧打开」可铺满手机屏。

架构概览

服务端  show_page ──存一版──▶ 无头 Chrome 体检 ──▶ 结果 + page_id + 地址回给模型
路由    /dsh-pages/page?id=&v=&theme=   CSP 沙箱 · 深浅色 / 高度脚本
        /dsh-pages/api/{list,meta,thumb,export,reveal,delete,state}
客户端  turnTail 槽 · toolview 槽 · 右侧栏「页面」标签

主要模块:lib/index.js(工具与路由)、lib/store.js(版本与状态)、lib/runtime.js(页面内脚本)、lib/check.js(体检与导出)、lib/browser.js(CDP 无头浏览器)、lib/client.js(客户端注入)。

适用场景与注意

适合:对比表、清单、图表、计算器、小测验等需要交互、又希望留在同一条对话里的场景。

注意:

  1. 页面不能依赖外网 API;数据与逻辑应写在 HTML 或允许的 CDN 库内。
  2. 不要在页面里填写密码等敏感信息;沙箱会拦跳转,但无法在跳转发出前完全杜绝用户误操作。
  3. 插件与 DSH 同进程权限;仅安装你信任的来源,并阅读 README「安全」一节。
  4. npm 包未发布前,勿假设 dsh plugin add @orderg-x/dsh-pages 一定可用,可按 README 使用 link: 本地安装。

问题反馈可在 GitHub 新建 issue,注明 DSH 版本与插件版本。

结尾

dsh-pages 把「模型回答」收敛成对话内可版本化、可体检、可导出的 HTML 页,深浅色与 DSH 一致,表单类状态可跨重启保留。安装命令以 README 为准,启用后重启 DSH,由模型在合适场景调用 show_page 即可。

  • 目录页:https://www.skillhub.cn/plugins/OrderG-X/dsh-pages
  • GitHub:https://github.com/OrderG-X/dsh-pages
羽毛球分组比赛记分
小程序二维码

欢迎使用《羽毛球分组比赛记分》微信小程序

Xiaoye