PACTHub 网站框架

面向三维光声计算机断层成像(3D PACT)研究的静态网站,集中展示数据、样本预览、已完成的图像增强方法与复现资源。使用原生 HTML、CSS 和 JavaScript,无构建依赖;全屏视频首屏搭配浅色内容区与文档。

当前状态

  • 数据标准化与图像增强算法均已完成。 待补的是获准公开的网站材料;网站 JSON 是现有标准的展示映射,不重新定义数据标准。
  • 当前已接入 6 张项目提供样本图像,均按项目方要求归入验证集。原 PNG 保持不变;展示窗口仅旋转、取景与适度亮度调整;完整原图关闭所有展示调整。采集参数、体数据、代码、权重和实验结果仍待补充。
  • 项目作者、版本、许可、论文、引用与资源链接需按真实资料填写。空值不表示相关研究尚未完成。
  • 本次图像更新不包含远程推送或公开部署。已有 GitHub Pages 工作流仅支持手动触发;公开前必须核实材料与许可。

六个内容板块

  1. 项目概览:研究任务、资源范围、适用人群。
  2. 样本与预览:检索、分类筛选、划分筛选与样本详情。
  3. 图像增强算法:方法概述、输入输出、代码及权重入口。
  4. 下载与使用:数据包、轻量样例、复现资源及指南。
  5. 论文与引用:论文入口、DOI 与引用复制。
  6. 团队与贡献:团队成员、机构、分工与反馈入口。

完整材料要求见内容地图与材料清单,其中区分上线必需内容与可后补的增强项。资料未提供时保留明确说明,不用猜测值或虚构链接补齐。

直接查看前端

交付包中的 PACTHub-preview.html 是独立离线预览,下载后直接用浏览器打开即可,不需要安装依赖或启动服务。它内嵌与源站一致的样式、交互、项目提供视频、样本图像和说明文档;不会访问真实研究数据,;离线预览本身不会发布。它不是已完成浏览器验证的截图。

修改源文件后,可运行 python3 scripts/build-preview.py 重新生成上一级目录的离线预览,再运行 python3 scripts/build-package.py 生成白名单源码 ZIP。GitHub Pages 继续使用原始相对路径文件,不发布此预览文件。

本地预览

在项目根目录运行:

python3 -m http.server 8000 --bind 127.0.0.1

浏览器打开 http://localhost:8000;按 Ctrl+C 停止服务。此命令仅监听本机。源码首页会通过 fetch 加载 JSON,请使用 HTTP 服务,不要直接双击源码 index.html。

目录与编辑入口

index.html                      六个首页板块、静态文案与图文布局
assets/css/styles.css           首页与文档的共用响应式样式
assets/js/app.js                 配置读取、检索筛选、详情与引用复制
assets/js/i18n.js                中英双语共用运行逻辑
assets/js/docs-i18n.js           指南标签与语言正文切换
assets/images/                  网站图片与视频封面
assets/media/hero-pact.mp4  项目提供的 20 秒三维影像视频
data/site-config.json           介绍、发布信息、论文、团队与资源链接
data/samples.json               样本索引;6 张项目提供的验证集图像
data/metadata.schema.json       网站索引字段约束
data/sample.template.json       单条真实样本的待填映射模板
docs/content-map.md / .html     六板块内容地图与材料清单
docs/project-guide.md / .html    中英双语项目指南
docs/                           数据、算法接入与发布检查指南
.github/workflows/pages.yml     手动发布工作流

网页文档使用 docs/*.html;Markdown 留在源码中维护。没有自动文档构建流程,修改时需同步两种版本。站内资源使用相对路径,避免仓库子路径部署时失效。

站点配置

data/site-config.json 的根是一个对象。下列字段已接入当前页面:

  • site_title:项目显示名与页面标题。
  • hero:首屏视频、封面、裁剪位置和来源说明,见下节。
  • description、overview_summary:首页主介绍与概览摘要。
  • demo_mode:首屏演示提示开关。设为 false 只隐藏该提示,不会改变示意图、样本的 is_demo 或文档。
  • license:下载区的许可摘要。数据、代码、权重若许可不同,应在各自资料中完整说明。
  • citation:正式引用文本或 BibTeX;非空时显示文本并启用复制按钮。剪贴板不可用时会选中文本供手动复制。
  • doi:完整 DOI 标识符,格式为 10.数字/后缀,不带 https://doi.org/ 前缀;格式有效时生成 DOI 链接。只有真实存在的 DOI 才能填写,不能使用占位示例。
  • algorithm:name、summary、status、repository_url、weights_url,分别控制方法名称、简介、资料状态及代码/权重入口。
  • downloads:卡片数组,每项包含 id、title、description、url、version、size_label、sha256;有效地址启用入口,版本、大小与校验值按已提供内容显示。
  • paper:title、summary、url,用于论文题名、说明与阅读入口。
  • team.members:成员数组,每项可填 name、affiliation、role、url;姓名必需,其余按实际资料填写。
  • team.contribution、team.contribution_url:贡献说明与联系/贡献页面。

release_version 保留为全站发布记录,目前没有独立展示位置;下载卡片使用各项的 version。

未知或未核验的信息保留 null,成员未提供时保留 []。可配置文案为空时保留 HTML 默认说明,资源地址为空或协议不受支持时不启用入口。配置以纯文本显示,不接受 HTML 内容。

资源与联系链接仅接受 HTTP(S) 协议;站内相对路径在 HTTP(S) 预览中可用。成员主页、贡献入口不要填 mailto:、javascript: 或其他协议;需要公布邮箱时写入经批准的说明文字,并使用团队联系页作入口。协议检查不等于验证链接有效,所有地址仍需实际打开核对。

全屏视频首屏

首屏采用边到边的视频背景、暗色遮罩和精简标题按钮;下方六个板块保持浅色。已接入项目方于 2026-10-10 提供的成片:1920×1080、20 秒、30 fps、H.264,无音轨。保留原始画面与帧率,仅整理 MP4 为渐进加载;封面取自第 9 秒。素材接入不代表数据集或科研结果已正式发布。

在 data/site-config.json 的 hero 对象中填写:

  • mp4_url:MP4 文件地址,默认 assets/media/hero-pact.mp4。
  • webm_url:可选 WebM,默认 null。浏览器先尝试 WebM,再尝试 MP4。
  • poster_url:静态封面,默认 assets/images/hero-poster.jpg。
  • object_position:裁剪焦点,如 60% 50%。窄屏采用上方影像、下方文案,影像焦点固定为 75% 50%,保留右侧主体。
  • media_label:素材来源说明。当前为“项目提供视频 · 三维影像展示”;demo_mode 不隐藏此说明。

推荐约 8–15 秒、16:9、无关键文字的短循环。MP4 使用 H.264、yuv420p、faststart,尽量控制在 5 MB 左右。背景始终静音;带声音说明的研究视频应另设播放器。更换封面时同步 index.html 中的图片 src 与视频 poster,保证无 JavaScript 时也有封面。修改文件名后更新 Pages 工作流的公开文件白名单。

视频在允许时自动播放,首屏有暂停/播放按钮。减少动态效果或节省流量设置下不会自动下载或播放,可手动开始。离开标签页或滚出首屏会暂停;手动暂停不会被滚动覆盖。缺少视频、播放失败或自动播放被阻止时保留封面与可用导航。

离线预览只内嵌项目内的视频和封面,不下载外部媒体。远程或缺失的视频在离线版中留空并保留封面;正式站点仍使用配置地址。重新生成示意素材可运行 python3 scripts/generate-hero-media.py,仅这一步需要已有 NumPy、Pillow 和 ffmpeg;查看与部署网站不需要这些工具。

接入真实材料

  1. 按内容地图准备获准公开的文字、图片、链接与文件,先完善 site-config.json。
  2. 按数据接入指南将现有标准映射到 samples.json,核实单位、轴顺序、来源、版本及文件校验值;无需重做标准化。
  3. 按算法接入指南补充已完成方法的说明、真实对照图、环境与验证过的复现步骤。
  4. 将需要额外图文结构的内容放入 index.html;超出当前配置支持范围的字段必须同步读取逻辑。
  5. 按发布检查清单检查页面、权限、许可、链接及 DEMO 状态。

公开 JSON 可被直接下载,不得含有内部路径、凭据或敏感信息。大型体数据与模型权重应放在获准使用的数据仓库;本站没有服务端、在线推理、登录鉴权或受控数据分发功能。

手动发布

本项目附带 .github/workflows/pages.yml。只有明确批准公开后才配置并运行;私有源码仓库不等于已发布网页受控访问。

  1. 把审核后的文件与工作流保存至获准使用的 GitHub 仓库。
  2. 按 GitHub Pages 官方说明配置发布源。
  3. 在 Actions 中手动运行 Deploy website to GitHub Pages。当前工作流只响应 workflow_dispatch,普通推送不会自动发布。
  4. 等待构建与部署成功,以部署记录的实际网址为准;复查仓库子路径、JSON、导航、图片及资源权限。

工作流只复制明确列出的公开网页、静态素材与索引。Markdown、测试、截图和源码压缩包不在公开清单中。新增公开文件需同步该清单;新增内容不会因放入仓库而自动加入站点。执行部署前再次核对官方说明、服务限制与项目授权。

许可与引用

目前未替项目方选定或授予网站、数据、代码或模型许可。上线前分别确认上述资源及第三方素材的许可范围、真实作者与引用方式;研究成果的完成状态不因网站字段为空而改变。

中英双语与维护

首页、样本详情与全部网页指南共用“中 / EN”切换。首次访问 pacthub.cn 与 www.pacthub.cn 默认显示中文,其他域名(包括 pacthub.net)默认显示英文,与浏览器语言无关;已有手动选择优先。存储可用时,选择保存在 pacthub-language,跨页面和刷新延续;存储被阻止时,本页仍可切换。切换不会更改技术标识、数据值或研究资料的公开状态。

站点配置中的展示文案可写为普通字符串或 { "zh": "中文说明", "en": "English description" }。适用字段包括 site_title、description、overview_summary、algorithm.name/summary/status、下载项的 title/description/size_label、paper.title/summary、成员 name/affiliation/role、team.contribution、hero.media_label 和 license。读取时先选当前语言,缺少时回退中文,再回退英文;两种版本都应尽量齐全。

样本的 title、description、intensity_unit 与来源说明 acquisition、reconstruction、standardization_reference 同样支持双语对象。ID、文件名、URL、类别与划分键、data_version、source_id 和正式引用保持原始字符串,不翻译技术标识或作者提供的正式引用。

新增界面文案应同时补入 assets/js/i18n.js 的两种语言。指南正文分别维护于 HTML 的 data-lang-section="zh" 和 data-lang-section="en",共用标签在 assets/js/docs-i18n.js 中维护;不可见语言使用 hidden 和 inert 隐藏,避免屏幕阅读器重复朗读。Markdown 同时保留完整中文和英文,更新后同步 HTML,再重新生成离线预览与源码包。科研信息仍应按真实资料填入,两种语言都不能用示例代替未提供的事实。

验证与打包

在项目根目录依次运行以下命令,并确认每一步通过。离线测试读取生成后的预览文件,必须在 build-preview.py 之后运行:

python3 scripts/validate.py
node scripts/test-interactions.cjs
node scripts/test-i18n.cjs
python3 scripts/build-preview.py
node scripts/test-i18n-offline.cjs
python3 scripts/build-package.py

当前测试套件覆盖 51 项原有交互、45 项双语行为与 5 项离线检查。静态检查验证路径、锚点、无障碍标签和 JSON;JavaScript 测试使用模拟 DOM,不代表真实浏览器渲染、原生对话框焦点、视频解码、剪贴板权限或外部下载已经验证。公开前仍需在实际浏览器和目标部署路径复查。