PACTHub← Back to home

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

  1. Project overview: Research task, resource scope, and intended audience.
  2. Samples and previews: Search, category and split filters, and sample details.
  3. Image-enhancement algorithm: Method overview, inputs and outputs, code, and weights.
  4. Downloads and usage: Dataset packages, lightweight examples, reproducibility resources, and guides.
  5. Paper and citation: Paper links, DOI, and citation copying.
  6. 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

  1. Prepare approved public text, images, links, and files according to the content map, starting with site-config.json.
  2. 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.
  3. Follow the algorithm integration guide to add descriptions of the completed method, real comparison images, environment details, and verified reproducibility steps.
  4. Put content requiring additional text/image structure in index.html. Fields beyond current configuration support require matching rendering logic.
  5. 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.

  1. Save reviewed files and the workflow to an approved GitHub repository.
  2. Configure the publishing source using the official GitHub Pages instructions.
  3. Manually run Deploy website to GitHub Pages in Actions. The current workflow responds only to workflow_dispatch; ordinary pushes do not automatically deploy it.
  4. 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 follows the browser language (Chinese for Chinese-language browsers, English otherwise), with a saved choice taking precedence. 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.