PACTHub 网站框架
面向三维光声计算机断层成像(3D PACT)研究的静态网站,集中展示数据、样本预览、已完成的图像增强方法与复现资源。使用原生 HTML、CSS 和 JavaScript,无构建依赖;全屏视频首屏搭配浅色内容区与文档。
当前状态
- 数据标准化与图像增强算法均已完成。 待补的是获准公开的网站材料;网站 JSON 是现有标准的展示映射,不重新定义数据标准。
- 当前已接入 6 张项目提供样本图像,均按项目方要求归入验证集。原 PNG 保持不变;展示窗口仅旋转、取景与适度亮度调整;完整原图关闭所有展示调整。采集参数、体数据、代码、权重和实验结果仍待补充。
- 项目作者、版本、许可、论文、引用与资源链接需按真实资料填写。空值不表示相关研究尚未完成。
- 本次图像更新不包含远程推送或公开部署。已有 GitHub Pages 工作流仅支持手动触发;公开前必须核实材料与许可。
六个内容板块
- 项目概览:研究任务、资源范围、适用人群。
- 样本与预览:检索、分类筛选、划分筛选与样本详情。
- 图像增强算法:方法概述、输入输出、代码及权重入口。
- 下载与使用:数据包、轻量样例、复现资源及指南。
- 论文与引用:论文入口、DOI 与引用复制。
- 团队与贡献:团队成员、机构、分工与反馈入口。
完整材料要求见内容地图与材料清单,其中区分上线必需内容与可后补的增强项。资料未提供时保留明确说明,不用猜测值或虚构链接补齐。
直接查看前端
交付包中的 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;查看与部署网站不需要这些工具。
接入真实材料
- 按内容地图准备获准公开的文字、图片、链接与文件,先完善
site-config.json。
- 按数据接入指南将现有标准映射到
samples.json,核实单位、轴顺序、来源、版本及文件校验值;无需重做标准化。
- 按算法接入指南补充已完成方法的说明、真实对照图、环境与验证过的复现步骤。
- 将需要额外图文结构的内容放入
index.html;超出当前配置支持范围的字段必须同步读取逻辑。
- 按发布检查清单检查页面、权限、许可、链接及 DEMO 状态。
公开 JSON 可被直接下载,不得含有内部路径、凭据或敏感信息。大型体数据与模型权重应放在获准使用的数据仓库;本站没有服务端、在线推理、登录鉴权或受控数据分发功能。
手动发布
本项目附带 .github/workflows/pages.yml。只有明确批准公开后才配置并运行;私有源码仓库不等于已发布网页受控访问。
- 把审核后的文件与工作流保存至获准使用的 GitHub 仓库。
- 按 GitHub Pages 官方说明配置发布源。
- 在 Actions 中手动运行
Deploy website to GitHub Pages。当前工作流只响应 workflow_dispatch,普通推送不会自动发布。
- 等待构建与部署成功,以部署记录的实际网址为准;复查仓库子路径、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,不代表真实浏览器渲染、原生对话框焦点、视频解码、剪贴板权限或外部下载已经验证。公开前仍需在实际浏览器和目标部署路径复查。
PACTHub website framework
A static website for three-dimensional photoacoustic computed tomography (3D PACT) research, bringing together data, sample previews, a completed image-enhancement method, and reproducibility resources. It uses plain HTML, CSS, and JavaScript with no build dependencies, combining a full-screen video hero with light content sections and documentation.
Current status
- Data standardization and the image-enhancement algorithm are already complete. The outstanding work is supplying approved public website materials. Website JSON maps the existing standard for presentation; it does not redefine the data standard.
- Six project-supplied sample images are integrated, all assigned to Validation by the project owner. Original PNGs are unchanged; display windows adjust rotation, framing and brightness; full-original views disable all display adjustments. Acquisition metadata, volumes, code, weights, and experimental results remain pending.
- Project authors, versions, licenses, papers, citations, and resource links must be filled from actual materials. Empty fields do not imply that the associated research is unfinished.
- This delivery has not been pushed to a remote repository or deployed publicly. The included GitHub Pages workflow supports manual triggering only. Verify materials and permissions before publication.
Six content sections
- Project overview: Research task, resource scope, and intended audience.
- Samples and previews: Search, category and split filters, and sample details.
- Image-enhancement algorithm: Method overview, inputs and outputs, code, and weights.
- Downloads and usage: Dataset packages, lightweight examples, reproducibility resources, and guides.
- Paper and citation: Paper links, DOI, and citation copying.
- Team and contributions: Members, affiliations, roles, and feedback routes.
See the content map and materials checklist for full requirements, distinguishing launch essentials from possible later enhancements. When materials are missing, explain their status clearly instead of filling gaps with guesses or fabricated links.
Open the frontend directly
PACTHub-preview.html in the delivery package is a standalone offline preview. Download it and open it in a browser; no dependencies or server are required. It embeds the source site's styles, interactions, project-provided video, illustrative samples, and documentation. It does not access real research data and has not been publicly deployed. It is not a screenshot that establishes completed browser verification.
After editing source files, run python3 scripts/build-preview.py to regenerate the offline preview in the parent directory, then python3 scripts/build-package.py to create the allowlisted source ZIP. GitHub Pages continues to use the original relative-path files and does not publish the preview file.
Local preview
Run from the project root:
python3 -m http.server 8000 --bind 127.0.0.1
Open http://localhost:8000 in a browser. Press Ctrl+C to stop the server. This command listens only on the local computer. The source homepage loads JSON with fetch, so use an HTTP server rather than double-clicking the source index.html.
Directories and editing entry points
index.html Six homepage sections, static text, and layout
assets/css/styles.css Shared responsive homepage/document styles
assets/js/app.js Configuration, search, filters, details, and citation copying
assets/js/i18n.js Shared Chinese/English language runtime
assets/js/docs-i18n.js Guide labels and language-section switching
assets/images/ Website images and video poster
assets/media/hero-pact.mp4 Project-provided 20-second 3D visualization
data/site-config.json Introductions, release info, paper, team, and links
data/samples.json Sample index; 6 supplied validation images
data/metadata.schema.json Website index constraints
data/sample.template.json Blank mapping template for one real sample
docs/content-map.md / .html Six-section content map and materials checklist
docs/project-guide.md / .html Bilingual project guide
docs/ Data/algorithm integration and release guides
.github/workflows/pages.yml Manual publishing workflow
Published documentation uses docs/*.html; Markdown remains in the source for maintenance. There is no automatic documentation build pipeline, so keep both versions synchronized when editing. Internal resources use relative paths to support deployment under repository subpaths.
Site configuration
The root of data/site-config.json is an object. These fields are connected to the current page:
site_title: Project display name and page title.
hero: Hero video, poster, crop position, and source statement; see below.
description, overview_summary: Homepage introduction and overview summary.
demo_mode: Toggle for the hero's demo notice. Setting it to false only hides that notice; it does not alter illustrations, sample is_demo values, or documentation.
license: License summary in the download section. If data, code, and weights have different licenses, explain them fully in their respective materials.
citation: Official citation text or BibTeX. A nonempty value is displayed and enables copying. If clipboard access is unavailable, the text is selected for manual copying.
doi: A full DOI identifier in 10.digits/suffix format, without the https://doi.org/ prefix. Valid syntax creates a DOI link. Enter only an existing DOI, never a placeholder.
algorithm: name, summary, status, repository_url, and weights_url control the method name, introduction, material status, and code/weight entry points.
downloads: An array of cards with id, title, description, url, version, size_label, and sha256. A valid URL enables the link; version, size, and checksum appear when provided.
paper: title, summary, and url control the paper title, explanation, and reading link.
team.members: An array of members with name, affiliation, role, and url. The name is required; fill other fields from actual information.
team.contribution, team.contribution_url: Contribution instructions and a contact/contribution page.
release_version is retained as the site-wide release record and currently has no dedicated display. Download cards use their individual version fields.
Keep unknown or unverified information as null, and missing members as []. Empty configurable text retains the HTML default explanation; empty or unsupported resource URLs do not enable links. Configuration is rendered as plain text and does not accept HTML content.
Resource and contact links accept HTTP(S) only. Internal relative paths work during HTTP(S) preview. Do not use mailto:, javascript:, or other schemes for member websites or contribution links. Put approved public email addresses in explanatory text and link to a team contact page. Protocol checks do not establish link validity; open and verify every address.
Full-screen video hero
The hero uses an edge-to-edge video background, a dark overlay, and a concise heading and buttons; the six content sections below remain light. The project-provided finished video received on 2026-10-10 is now included: 1920×1080, 20 seconds, 30 fps, H.264, without audio. The original picture and frame rate are preserved; only MP4 fast-start packaging was applied. The poster is taken at 9 seconds. Including this video does not establish a formal dataset or research release.
Set these fields in the hero object of data/site-config.json:
mp4_url: MP4 file URL; defaults to assets/media/hero-pact.mp4.
webm_url: Optional WebM URL; defaults to null. The browser tries WebM before MP4.
poster_url: Static poster; defaults to assets/images/hero-poster.jpg.
object_position: Crop focus, such as 60% 50%. Narrow screens place the video above the copy, with a 75% 50% focal point to retain the right-hand subject.
media_label: Media source statement. Currently “Project-provided video · 3D visualization.” demo_mode does not hide this statement.
Prefer an approximately 8–15 second, 16:9 loop without essential embedded text. Use H.264, yuv420p, and faststart for MP4, aiming for around 5 MB. The background is always muted; research videos with spoken explanations need a separate player. When replacing the poster, update both the image src and video poster in index.html so a poster remains available without JavaScript. Update the Pages workflow's public-file allowlist after renaming assets.
The video autoplays when allowed, with a pause/play button in the hero. Reduced-motion or data-saving settings prevent automatic downloading and playback; visitors can start it manually. It pauses when the tab becomes hidden or the hero scrolls out of view, and scrolling does not override a manual pause. Missing video, playback failures, or blocked autoplay leave the poster and navigation available.
The offline preview embeds only project-local video and poster assets and does not download remote media. External or missing video is left empty in the offline version, retaining the poster; the published site still uses configured URLs. Run python3 scripts/generate-hero-media.py to regenerate illustrative media. Only this regeneration step requires existing NumPy, Pillow, and ffmpeg installations; viewing and deploying the website does not require them.
Integrating real materials
- Prepare approved public text, images, links, and files according to the content map, starting with
site-config.json.
- Follow the data integration guide to map the existing standard into
samples.json, verifying units, axis order, provenance, versions, and file checksums. No new standardization work is required.
- Follow the algorithm integration guide to add descriptions of the completed method, real comparison images, environment details, and verified reproducibility steps.
- Put content requiring additional text/image structure in
index.html. Fields beyond current configuration support require matching rendering logic.
- Use the release checklist to check pages, permissions, licenses, links, and DEMO states.
Public JSON can be downloaded directly and must not contain internal paths, credentials, or sensitive information. Store large volumes and model weights in approved data repositories. This site has no backend, online inference, authentication, or controlled-data distribution feature.
Manual publishing
The project includes .github/workflows/pages.yml. Configure and run it only after explicit approval for public release. A private source repository does not mean the published website has controlled access.
- Save reviewed files and the workflow to an approved GitHub repository.
- Configure the publishing source using the official GitHub Pages instructions.
- Manually run
Deploy website to GitHub Pages in Actions. The current workflow responds only to workflow_dispatch; ordinary pushes do not automatically deploy it.
- Wait for successful build and deployment. Use the actual URL in the deployment record, and recheck repository subpaths, JSON, navigation, images, and resource permissions.
The workflow copies only explicitly listed public pages, static assets, and index files. Markdown, tests, screenshots, and source archives are not on the public allowlist. Update that list when adding public files; simply putting content in the repository does not add it to the website. Recheck official instructions, service limits, and project authorization before deployment.
Licenses and citations
No website, data, code, or model license has been selected or granted on the project team's behalf. Before launch, confirm the license scope, actual authors, and citation instructions for each resource and third-party asset. Empty website fields do not change the completion status of the research.
Chinese/English support and maintenance
The homepage, sample details, and all web guides share the 中 / EN switch. The initial language is Chinese on pacthub.cn and www.pacthub.cn, and English on other hostnames (including pacthub.net), regardless of browser language. A saved manual choice takes precedence on the current origin. When storage is available, pacthub-language retains the choice across pages and reloads. If storage is blocked, switching still works on the current page. Language changes do not alter technical identifiers, data values, or public resource availability.
Display text in site configuration accepts a legacy string or { "zh": "中文说明", "en": "English description" }. Supported fields include site_title, description, overview_summary, algorithm.name/summary/status, download title/description/size_label, paper.title/summary, member name/affiliation/role, team.contribution, hero.media_label, and license. Text uses the active language first, then Chinese, then English when a translation is absent. Supply both versions wherever possible.
Sample title, description, intensity_unit, and provenance descriptions acquisition, reconstruction, and standardization_reference also accept bilingual objects. IDs, filenames, URLs, category and split keys, data_version, source_id, and canonical citation text remain original strings. Do not translate technical identifiers or the authors' official citation.
Add new interface text in both languages to assets/js/i18n.js. Maintain guide bodies in HTML sections marked data-lang-section="zh" and data-lang-section="en", with shared labels in assets/js/docs-i18n.js. Inactive content is hidden using hidden and inert to prevent duplicate screen-reader reading. Markdown retains complete Chinese and English versions. Keep HTML synchronized, then rebuild the offline preview and source package. Research information must still come from actual materials; neither language may replace missing facts with examples.
Verification and packaging
Run these commands from the project root in order, checking that each succeeds. The offline tests read the generated preview, so run them only after 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
The current suites cover 51 original interaction cases, 45 bilingual cases, and 5 offline checks. Static validation checks paths, anchors, accessibility labels, and JSON. JavaScript tests use a simulated DOM; they do not establish real browser rendering, native dialog focus behavior, video decoding, clipboard permissions, or external download availability. Recheck in an actual browser and under the target deployment path before publication.