# internrobotics/ebench-home architecture

> Architecture diagram of the GitHub repository internrobotics/ebench-home, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-06-25). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/internrobotics/ebench-home
- Repository: https://github.com/internrobotics/ebench-home

## Overview

1. This repository is a static project homepage for the EBench paper, not a backend service. The runtime is a React single-page app built with Vite, TypeScript, and Tailwind CSS, and it deploys as static files to GitHub Pages.

2. The app entry is `index.html` → `src/main.tsx` → `src/App.tsx`. `App.tsx` acts as the page shell and composes the full landing page from section components rather than routing between pages.

3. The page is organized into content sections: `Hero`, `Abstract`, `Overview`, `Dimensions`, `TaskGallery`, `ResultsSection`, `Citation`, `Footer`, and `Nav`. This makes the architecture mostly presentation-driven, with each section owning one slice of the homepage.

4. Most of the paper metadata lives in `src/data/content.ts`: title, abstract, authors, links, and citation text. This is the authoritative source for the non-visual textual content shown on the page.

5. The benchmark/task definition lives in `src/data/tasks.ts`. That file defines the 26-task manifest, including names, task groupings, and instructions used by the overview and gallery components.

6. The quantitative results dashboard is data-driven from `src/data/ebench.json`. `src/lib/results.ts` provides typed accessors and chart-ready transformations over that JSON, which isolates the charts from the raw schema and keeps visualization logic separate from the data file.

7. The results area is split into dedicated chart components under `src/components/results/`: `TopLineBars`, `CapabilityRadar`, `TransferScatter`, `ClusterExplorer`, and `TaskHeatmap`, with `chartkit.tsx` supplying shared chart helpers. The README notes these are native Recharts-based visualizations ported from the original results dashboard.

8. The task showcase is asset-heavy and lives in `public/videos/`. There are 78 MP4 clips total: 26 tasks × 3 camera views (`left`, `right`, `top`). `TaskGallery` and `LoopVideo` consume those files to present the task demonstrations.

9. `src/lib/asset.ts` is an important boundary for deployment correctness: it centralizes base-path handling so links and media work both locally and on GitHub Pages under `/EBench-home/` or another configured base URL. `src/lib/icons.tsx` provides inline icons used across the page.

10. `src/components/ui/` contains reusable presentation primitives such as `Section`, `Reveal`, `LinkButton`, and `LoopVideo`. These are shared building blocks that keep layout/animation/media behavior consistent across the sections.

11. Styling is handled by Tailwind plus `src/index.css`, which defines the site’s dark “diagnostic console” theme and design tokens. The app is therefore styled as a cohesive single-page product rather than a generic component library.

12. Deployment is fully static and automated. `.github/workflows/deploy.yml` builds the site and publishes it to GitHub Pages on pushes to `main`, with the base path controlled by the `BASE_PATH` environment variable in both the workflow and `vite.config.ts`.

13. There is no runtime API, database, or server-side processing in this repo. The only “data flow” is from local content/data files and pre-rendered media into React components, then into a static build artifact served by GitHub Pages.

Main entry points: [`src/App.tsx`](https://github.com/internrobotics/ebench-home/blob/main/src/App.tsx) (App), [`src/components/results/ResultsSection.tsx`](https://github.com/internrobotics/ebench-home/blob/main/src/components/results/ResultsSection.tsx) (ResultsSection), [`src/components/TaskGallery.tsx`](https://github.com/internrobotics/ebench-home/blob/main/src/components/TaskGallery.tsx) (TaskGallery), [`src/components/results/chartkit.tsx`](https://github.com/internrobotics/ebench-home/blob/main/src/components/results/chartkit.tsx) (chartkit)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_group_runtime["Runtime"]
  node_index_html["index.html<br/>entry shell<br/>[index.html]"]
  node_main_tsx["main.tsx<br/>bootstraps app<br/>[main.tsx]"]
  node_app_tsx["App<br/>page shell<br/>[App.tsx]"]
  node_hero_section["Hero<br/>landing section<br/>[Hero.tsx]"]
  node_abstract_section["Abstract<br/>content section<br/>[Abstract.tsx]"]
  node_overview_section["Overview<br/>content section<br/>[Overview.tsx]"]
  node_dimensions_section["Dimensions<br/>content section<br/>[Dimensions.tsx]"]
  node_task_gallery["TaskGallery<br/>task showcase<br/>[TaskGallery.tsx]"]
  node_results_section["ResultsSection<br/>results dashboard<br/>[ResultsSection.tsx]"]
  node_citation_section["Citation<br/>content section<br/>[Citation.tsx]"]
  node_footer_section["Footer<br/>[Footer.tsx]"]
  node_nav_section["Nav<br/>[Nav.tsx]"]
  node_section_ui["Section<br/>layout primitive<br/>[Section.tsx]"]
  node_reveal_ui["Reveal<br/>animation primitive<br/>[Reveal.tsx]"]
  node_linkbutton_ui["LinkButton<br/>button primitive<br/>[LinkButton.tsx]"]
  node_loopvideo_ui["LoopVideo<br/>media primitive<br/>[LoopVideo.tsx]"]
  node_toplinebars_chart["TopLineBars<br/>recharts chart<br/>[TopLineBars.tsx]"]
  node_capabilityradar_chart["CapabilityRadar<br/>recharts chart"]
  node_transferscatter_chart["TransferScatter<br/>recharts chart"]
  node_clusterexplorer_chart["ClusterExplorer<br/>recharts chart"]
  node_taskheatmap_chart["TaskHeatmap<br/>recharts chart<br/>[TaskHeatmap.tsx]"]
  node_chartkit["chartkit<br/>chart helpers<br/>[chartkit.tsx]"]
  node_styles["index.css<br/>site styling<br/>[index.css]"]
end

subgraph group_group_data["Content data"]
  node_content_data["content.ts<br/>paper metadata<br/>[content.ts]"]
  node_tasks_data["tasks.ts<br/>task manifest<br/>[tasks.ts]"]
  node_results_data["ebench.json<br/>results dataset<br/>[ebench.json]"]
  node_results_lib["results.ts<br/>results transforms<br/>[results.ts]"]
  node_asset_lib["asset.ts<br/>base-path helper<br/>[asset.ts]"]
  node_icons_lib["icons.tsx<br/>icon set<br/>[icons.tsx]"]
  node_task_videos[("Task videos<br/>media assets")]
end

subgraph group_group_delivery["Delivery"]
  node_deploy_workflow["deploy.yml<br/>static deploy<br/>[deploy.yml]"]
  node_vite_config["vite.config.ts<br/>build config<br/>[vite.config.ts]"]
end

node_index_html -->|"loads"| node_main_tsx
node_main_tsx -->|"mounts"| node_app_tsx
node_app_tsx -->|"renders"| node_hero_section
node_app_tsx -->|"renders"| node_abstract_section
node_app_tsx -->|"renders"| node_overview_section
node_app_tsx -->|"renders"| node_dimensions_section
node_app_tsx -->|"renders"| node_task_gallery
node_app_tsx -->|"renders"| node_results_section
node_app_tsx -->|"renders"| node_citation_section
node_app_tsx -->|"renders"| node_footer_section
node_app_tsx -->|"renders"| node_nav_section
node_abstract_section -->|"reads"| node_content_data
node_overview_section -->|"reads"| node_content_data
node_dimensions_section -->|"reads"| node_content_data
node_citation_section -->|"reads"| node_content_data
node_task_gallery -->|"reads"| node_tasks_data
node_task_gallery -->|"plays"| node_task_videos
node_task_gallery -->|"uses"| node_loopvideo_ui
node_task_gallery -->|"resolves"| node_asset_lib
node_results_section -->|"transforms"| node_results_lib
node_results_section -->|"reads"| node_results_data
node_results_section -->|"renders"| node_toplinebars_chart
node_results_section -->|"renders"| node_capabilityradar_chart
node_results_section -->|"renders"| node_transferscatter_chart
node_results_section -->|"renders"| node_clusterexplorer_chart
node_results_section -->|"renders"| node_taskheatmap_chart
node_toplinebars_chart -->|"uses"| node_chartkit
node_capabilityradar_chart -->|"uses"| node_chartkit
node_transferscatter_chart -->|"uses"| node_chartkit
node_clusterexplorer_chart -->|"uses"| node_chartkit
node_taskheatmap_chart -->|"uses"| node_chartkit
node_app_tsx -->|"uses"| node_section_ui
node_app_tsx -->|"uses"| node_reveal_ui
node_app_tsx -->|"uses"| node_linkbutton_ui
node_app_tsx -->|"uses"| node_icons_lib
node_app_tsx -->|"styled by"| node_styles
node_deploy_workflow -->|"builds with"| node_vite_config
node_deploy_workflow -->|"configures"| node_asset_lib

click node_index_html "https://github.com/internrobotics/ebench-home/blob/main/index.html"
click node_main_tsx "https://github.com/internrobotics/ebench-home/blob/main/src/main.tsx"
click node_app_tsx "https://github.com/internrobotics/ebench-home/blob/main/src/App.tsx"
click node_hero_section "https://github.com/internrobotics/ebench-home/blob/main/src/components/Hero.tsx"
click node_abstract_section "https://github.com/internrobotics/ebench-home/blob/main/src/components/Abstract.tsx"
click node_overview_section "https://github.com/internrobotics/ebench-home/blob/main/src/components/Overview.tsx"
click node_dimensions_section "https://github.com/internrobotics/ebench-home/blob/main/src/components/Dimensions.tsx"
click node_task_gallery "https://github.com/internrobotics/ebench-home/blob/main/src/components/TaskGallery.tsx"
click node_results_section "https://github.com/internrobotics/ebench-home/blob/main/src/components/results/ResultsSection.tsx"
click node_citation_section "https://github.com/internrobotics/ebench-home/blob/main/src/components/Citation.tsx"
click node_footer_section "https://github.com/internrobotics/ebench-home/blob/main/src/components/Footer.tsx"
click node_nav_section "https://github.com/internrobotics/ebench-home/blob/main/src/components/Nav.tsx"
click node_section_ui "https://github.com/internrobotics/ebench-home/blob/main/src/components/ui/Section.tsx"
click node_reveal_ui "https://github.com/internrobotics/ebench-home/blob/main/src/components/ui/Reveal.tsx"
click node_linkbutton_ui "https://github.com/internrobotics/ebench-home/blob/main/src/components/ui/LinkButton.tsx"
click node_loopvideo_ui "https://github.com/internrobotics/ebench-home/blob/main/src/components/ui/LoopVideo.tsx"
click node_content_data "https://github.com/internrobotics/ebench-home/blob/main/src/data/content.ts"
click node_tasks_data "https://github.com/internrobotics/ebench-home/blob/main/src/data/tasks.ts"
click node_results_data "https://github.com/internrobotics/ebench-home/blob/main/src/data/ebench.json"
click node_results_lib "https://github.com/internrobotics/ebench-home/blob/main/src/lib/results.ts"
click node_asset_lib "https://github.com/internrobotics/ebench-home/blob/main/src/lib/asset.ts"
click node_icons_lib "https://github.com/internrobotics/ebench-home/blob/main/src/lib/icons.tsx"
click node_toplinebars_chart "https://github.com/internrobotics/ebench-home/blob/main/src/components/results/TopLineBars.tsx"
click node_capabilityradar_chart "https://github.com/internrobotics/ebench-home/blob/main/src/components/results/CapabilityRadar.tsx"
click node_transferscatter_chart "https://github.com/internrobotics/ebench-home/blob/main/src/components/results/TransferScatter.tsx"
click node_clusterexplorer_chart "https://github.com/internrobotics/ebench-home/blob/main/src/components/results/ClusterExplorer.tsx"
click node_taskheatmap_chart "https://github.com/internrobotics/ebench-home/blob/main/src/components/results/TaskHeatmap.tsx"
click node_chartkit "https://github.com/internrobotics/ebench-home/blob/main/src/components/results/chartkit.tsx"
click node_styles "https://github.com/internrobotics/ebench-home/blob/main/src/index.css"
click node_deploy_workflow "https://github.com/internrobotics/ebench-home/blob/main/.github/workflows/deploy.yml"
click node_vite_config "https://github.com/internrobotics/ebench-home/blob/main/vite.config.ts"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_index_html,node_main_tsx,node_app_tsx,node_hero_section,node_abstract_section,node_overview_section,node_dimensions_section,node_task_gallery,node_results_section,node_citation_section,node_footer_section,node_nav_section,node_section_ui,node_reveal_ui,node_linkbutton_ui,node_loopvideo_ui,node_toplinebars_chart,node_capabilityradar_chart,node_transferscatter_chart,node_clusterexplorer_chart,node_taskheatmap_chart,node_chartkit,node_styles toneBlue
class node_content_data,node_tasks_data,node_results_data,node_results_lib,node_asset_lib,node_icons_lib,node_task_videos toneAmber
class node_deploy_workflow,node_vite_config toneMint
```

## Components

### Runtime

React/Vite page shell, sections, shared UI, and styling.

- [index.html](https://github.com/internrobotics/ebench-home/blob/main/index.html): entry shell · HTML entrypoint that loads the React app. · `index.html`
- [main.tsx](https://github.com/internrobotics/ebench-home/blob/main/src/main.tsx): bootstraps app · Mounts the React application into the page. · `src/main.tsx`
- [App](https://github.com/internrobotics/ebench-home/blob/main/src/App.tsx): page shell · Composes the one-page landing screen from sections. · `src/App.tsx`
- [Hero](https://github.com/internrobotics/ebench-home/blob/main/src/components/Hero.tsx): landing section · Top-of-page title and positioning block. · `src/components/Hero.tsx`
- [Abstract](https://github.com/internrobotics/ebench-home/blob/main/src/components/Abstract.tsx): content section · Paper summary section on the homepage. · `src/components/Abstract.tsx`
- [Overview](https://github.com/internrobotics/ebench-home/blob/main/src/components/Overview.tsx): content section · High-level benchmark overview section. · `src/components/Overview.tsx`
- [Dimensions](https://github.com/internrobotics/ebench-home/blob/main/src/components/Dimensions.tsx): content section · Benchmark dimension breakdown section. · `src/components/Dimensions.tsx`
- [TaskGallery](https://github.com/internrobotics/ebench-home/blob/main/src/components/TaskGallery.tsx): task showcase · Presents benchmark tasks and embedded demo clips. · `src/components/TaskGallery.tsx`
- [ResultsSection](https://github.com/internrobotics/ebench-home/blob/main/src/components/results/ResultsSection.tsx): results dashboard · Wraps the benchmark visual analytics area. · `src/components/results/ResultsSection.tsx`
- [Citation](https://github.com/internrobotics/ebench-home/blob/main/src/components/Citation.tsx): content section · Citation and paper reference block. · `src/components/Citation.tsx`
- [Footer](https://github.com/internrobotics/ebench-home/blob/main/src/components/Footer.tsx): page footer · Closing page footer and links. · `src/components/Footer.tsx`
- [Nav](https://github.com/internrobotics/ebench-home/blob/main/src/components/Nav.tsx): site nav · In-page navigation for the landing page. · `src/components/Nav.tsx`
- [Section](https://github.com/internrobotics/ebench-home/blob/main/src/components/ui/Section.tsx): layout primitive · Shared section wrapper used across the page. · `src/components/ui/Section.tsx`
- [Reveal](https://github.com/internrobotics/ebench-home/blob/main/src/components/ui/Reveal.tsx): animation primitive · Shared reveal/entrance animation wrapper. · `src/components/ui/Reveal.tsx`
- [LinkButton](https://github.com/internrobotics/ebench-home/blob/main/src/components/ui/LinkButton.tsx): button primitive · Reusable linked button styling and behavior. · `src/components/ui/LinkButton.tsx`
- [LoopVideo](https://github.com/internrobotics/ebench-home/blob/main/src/components/ui/LoopVideo.tsx): media primitive · Reusable looping video player for task demos. · `src/components/ui/LoopVideo.tsx`
- [TopLineBars](https://github.com/internrobotics/ebench-home/blob/main/src/components/results/TopLineBars.tsx): recharts chart · Primary results bar visualization. · `src/components/results/TopLineBars.tsx`
- [CapabilityRadar](https://github.com/internrobotics/ebench-home/blob/main/src/components/results/CapabilityRadar.tsx): recharts chart · Capability summary radar visualization. · `src/components/results/CapabilityRadar.tsx`
- [TransferScatter](https://github.com/internrobotics/ebench-home/blob/main/src/components/results/TransferScatter.tsx): recharts chart · Transfer behavior scatter visualization. · `src/components/results/TransferScatter.tsx`
- [ClusterExplorer](https://github.com/internrobotics/ebench-home/blob/main/src/components/results/ClusterExplorer.tsx): recharts chart · Cluster exploration visualization. · `src/components/results/ClusterExplorer.tsx`
- [TaskHeatmap](https://github.com/internrobotics/ebench-home/blob/main/src/components/results/TaskHeatmap.tsx): recharts chart · Per-task heatmap visualization. · `src/components/results/TaskHeatmap.tsx`
- [chartkit](https://github.com/internrobotics/ebench-home/blob/main/src/components/results/chartkit.tsx): chart helpers · Shared helpers used by the results charts. · `src/components/results/chartkit.tsx`
- [index.css](https://github.com/internrobotics/ebench-home/blob/main/src/index.css): site styling · Tailwind-driven global theme and design tokens. · `src/index.css`

### Content data

Paper metadata, task manifest, benchmark results, and media assets.

- [content.ts](https://github.com/internrobotics/ebench-home/blob/main/src/data/content.ts): paper metadata · Title, abstract, authors, links, and citation text. · `src/data/content.ts`
- [tasks.ts](https://github.com/internrobotics/ebench-home/blob/main/src/data/tasks.ts): task manifest · Defines the 26 benchmark tasks, groups, and instructions. · `src/data/tasks.ts`
- [ebench.json](https://github.com/internrobotics/ebench-home/blob/main/src/data/ebench.json): results dataset · Raw quantitative benchmark results used by the dashboard. · `src/data/ebench.json`
- [results.ts](https://github.com/internrobotics/ebench-home/blob/main/src/lib/results.ts): results transforms · Typed accessors and chart-ready derived data for the dashboard. · `src/lib/results.ts`
- [asset.ts](https://github.com/internrobotics/ebench-home/blob/main/src/lib/asset.ts): base-path helper · Handles local vs GitHub Pages asset and link paths. · `src/lib/asset.ts`
- [icons.tsx](https://github.com/internrobotics/ebench-home/blob/main/src/lib/icons.tsx): icon set · Inline icons used across the page. · `src/lib/icons.tsx`
- **Task videos**: media assets · Static MP4 clips for 26 tasks across three camera views.

### Delivery

Static build and GitHub Pages deployment.

- [deploy.yml](https://github.com/internrobotics/ebench-home/blob/main/.github/workflows/deploy.yml): static deploy · Builds and publishes the site to GitHub Pages. · `.github/workflows/deploy.yml`
- [vite.config.ts](https://github.com/internrobotics/ebench-home/blob/main/vite.config.ts): build config · Sets the Vite build behavior and base path integration. · `vite.config.ts`

## Connections

- index.html → main.tsx: loads · The HTML entrypoint loads the app bootstrap.
- main.tsx → App: mounts · React mounts the top-level page shell.
- App → Hero: renders · The shell composes the hero section.
- App → Abstract: renders · The shell includes the abstract section.
- App → Overview: renders · The shell includes the overview section.
- App → Dimensions: renders · The shell includes the dimensions section.
- App → TaskGallery: renders · The shell includes the task showcase.
- App → ResultsSection: renders · The shell includes the results dashboard.
- App → Citation: renders · The shell includes the citation block.
- App → Footer: renders · The shell closes with the footer.
- App → Nav: renders · Navigation is included in the one-page layout.
- Abstract → content.ts: reads · Textual homepage content comes from the metadata file.
- Overview → content.ts: reads · Overview copy is sourced from paper metadata.
- Dimensions → content.ts: reads · Section text is sourced from paper metadata.
- Citation → content.ts: reads · Citation text is sourced from the metadata file.
- TaskGallery → tasks.ts: reads · Task cards and groupings are driven by the manifest.
- TaskGallery → Task videos: plays · Gallery clips are loaded from the static media bundle.
- TaskGallery → LoopVideo: uses · Gallery uses the looping video primitive.
- TaskGallery → asset.ts: resolves · Task media paths are normalized for deployment.
- ResultsSection → results.ts: transforms · The dashboard consumes typed result adapters.
- ResultsSection → ebench.json: reads · Charts are driven from the raw benchmark JSON.
- ResultsSection → TopLineBars: renders · The section includes the main bar chart.
- ResultsSection → CapabilityRadar: renders · The section includes the capability radar.
- ResultsSection → TransferScatter: renders · The section includes the transfer scatter plot.
- ResultsSection → ClusterExplorer: renders · The section includes the cluster explorer.
- ResultsSection → TaskHeatmap: renders · The section includes the task heatmap.
- TopLineBars → chartkit: uses · Charts share common chart helpers.
- CapabilityRadar → chartkit: uses · Charts share common chart helpers.
- TransferScatter → chartkit: uses · Charts share common chart helpers.
- ClusterExplorer → chartkit: uses · Charts share common chart helpers.
- TaskHeatmap → chartkit: uses · Charts share common chart helpers.
- App → Section: uses · The page shell relies on shared section structure.
- App → Reveal: uses · Sections use shared reveal behavior.
- App → LinkButton: uses · Calls to action use the shared button primitive.
- App → icons.tsx: uses · Icons are shared across the page shell and sections.
- App → index.css: styled by · The app is themed by Tailwind and global CSS.
- deploy.yml → vite.config.ts: builds with · Deployment uses the Vite build configuration.
- deploy.yml → asset.ts: configures · The workflow and app agree on the base path.