iCAN.github.io

This folder is a GitHub Pages site for iCAN.

What it does

• Report view: renders Markdown reports from reports/*.md (generated by render_predictions_report.py)
• Data view: loads JSON datasets from data/*.json, supports search + filters, and shows a detail panel
• Images: uses compressed thumbnails from thumbs/ for fast loading

Local preview

Because the site uses fetch(), you should serve it from a local web server (not file://).

From the repo root:

python3 -m http.server 8000

Then open http://localhost:8000/iCAN.github.io/.

Folder structure

• iCAN.github.io/index.html: UI
• iCAN.github.io/app.js: site logic
• iCAN.github.io/styles.css: styling
• iCAN.github.io/data/: prediction datasets (*.json) + the generated manifest.json
• iCAN.github.io/reports/: report markdown files (*.md)
• iCAN.github.io/thumbs/: generated WebP thumbnails for report + data images

Add a new dataset/report (the usual workflow)

1. Generate a report Markdown from your JSON:

python3 render_predictions_report.py path/to/predictions_new_run.json

2. Copy the JSON + report into the site:

cp path/to/predictions_new_run.json iCAN.github.io/data/
cp path/to/predictions_new_run.md iCAN.github.io/reports/

3. Regenerate the site manifest (so it appears in the sidebar):

python3 tools/build_site_manifest.py

4. Generate thumbnails (so images show in Report + Data view, without shipping full-res images):

python3 tools/generate_thumbnails.py

The JSON format expected is an array of objects (like your predictions_*.json files).

How manifest.json works

GitHub Pages cannot list directories at runtime, so the site reads:

• iCAN.github.io/data/manifest.json

This file is generated by:

python3 tools/build_site_manifest.py

It scans:

• iCAN.github.io/data/*.json (excluding manifest.json)
• iCAN.github.io/reports/*.md

and includes any dataset where both files exist with the same basename.

Images & thumbnails (recommended approach)

The generated reports reference images like:

detections/detections-YYYYMMDD/<image>.jpg

Some reports may instead reference collection folders like:

Collection-Detections-YYYYMMDD/<image>.jpg

To keep the repo small and the site fast, we publish thumbnails only.

Generate thumbnails

python3 tools/generate_thumbnails.py

This writes WebPs under:

• iCAN.github.io/thumbs/<original-image-src>.webp

The website automatically prefers these thumbnails for:

• <img src="..."> in reports
• the image preview in the Data tab detail panel

Publish on GitHub Pages

On GitHub:

• Repo → Settings → Pages
• Source: “Deploy from a branch”
• Branch: main
• Folder: /iCAN.github.io

Then your site will be available at your GitHub Pages URL.