Skip to content

README.md

Latest commit

 

History

History
94 lines (65 loc) · 4.38 KB

README.md

File metadata and controls

94 lines (65 loc) · 4.38 KB
Raw

AgML Hub — Frontend

React + Vite + TypeScript frontend for browsing AgML datasets and benchmark results. Uses Tailwind CSS, React Router v6, TanStack Table, and Recharts.

Features

  • Dataset browser — Filter by ML task, agricultural task, platform; search by name; link to dataset detail pages.
  • Leaderboard — Benchmark table with task filter, dataset search, sortable columns; bar chart view; dataset names link to detail pages; mAP50 column for detector rows; precision/recall in row tooltip.
  • Responsive layout — Stacked filters on small screens; touch-friendly chips and controls; horizontal scroll for wide table.
  • Accessibility — Skip-to-main link; ARIA on table (sort, scope, caption); keyboard-accessible MultiSelectDropdown; visible focus rings.
  • Contribute section — Landing page includes a call-to-action to contribute datasets, linking to the AgML contribution guide.

Design

  • Typography: Plus Jakarta Sans (Google Fonts).
  • Colors: Slate-based palette (ink, paper, muted, accent teal).
  • Surfaces: Rounded cards with soft shadows; buttons and inputs use consistent radii and focus states.

Prerequisites

  • Node.js (v18+ recommended) and npm
  • AgML source — The repo must be cloned next to this app so the build can generate datasets.json and leaderboard.json from AgML’s docs and assets. By default the scripts look for ../agml-source (i.e. agml-source next to the frontend folder).

Install

cd frontend
npm install

Data (manifest generation)

Dataset and leaderboard data are not checked in as source; they are produced at build time from the AgML repo:

  • public/datasets.json — Generated by parsing agml-source/docs/datasets/*.md (dataset metadata tables and example image URLs).
  • public/leaderboard.json — Generated by merging agml-source/agml/_assets/model_benchmarks.json and detector_benchmarks.json.

To point at a different AgML root (e.g. not ../agml-source), set AGML_SOURCE when running the generator or build:

AGML_SOURCE=/path/to/agml-repo node scripts/generate-datasets.js
AGML_SOURCE=/path/to/agml-repo node scripts/generate-leaderboard.js

Or run the full prebuild with the same env:

AGML_SOURCE=/path/to/agml-repo npm run prebuild

The app loads data at runtime via publicUrl() so datasets.json and leaderboard.json resolve correctly for any Vite base (including subpath deployment).

Scripts

Script Description
npm run dev Start Vite dev server (e.g. http://localhost:5173). Uses existing public/datasets.json and public/leaderboard.json; run prebuild first if they’re missing or stale.
npm run prebuild Generate public/datasets.json and public/leaderboard.json from the AgML repo. Run from frontend/ with agml-source at ../agml-source (or set AGML_SOURCE).
npm run build Run prebuild (via npm lifecycle), then TypeScript check and Vite production build. Output in dist/.
npm run preview Serve the dist/ build locally.
npm run lint Run ESLint.

Project layout

  • src/pages/ — Landing, DatasetBrowser, DatasetDetail (/datasets/:name), Leaderboard.
  • src/components/ — Header, LeaderboardChart, MultiSelectDropdown.
  • src/lib/ — useDatasets, filterDatasets, publicUrl (base-path-aware asset URLs).
  • src/data/types.ts — TypeScript types for Dataset and LeaderboardRow.
  • scripts/ — Build-time scripts: generate-datasets.js, generate-leaderboard.js.
  • public/ — Generated manifests and static assets; Vite serves these at the root (or under base).

Subpath deployment (e.g. GitHub Pages)

If the app is served from a subpath (e.g. https://user.github.io/AgML-Hub/), set base in vite.config.ts:

export default defineConfig({
  base: '/AgML-Hub/',  // match your deployment path
  plugins: [react()],
})

Without this, the leaderboard and dataset browser may show no data because the JSON assets are requested from the wrong path.

Making sure data is current

  1. Ensure the AgML repo is at ../agml-source (or set AGML_SOURCE).

  2. From frontend/, run:

    npm run prebuild

  3. Start the app with npm run dev (or run npm run build and npm run preview). The UI loads datasets.json and leaderboard.json from the server.