Hugging Face's logo

Spaces:
NeerajCodz
/
aiBatteryLifeCycle
Running

App Files Community
aiBatteryLifeCycle / docs /frontend.md
NeerajCodz's picture
NeerajCodz
feat: full project — ML simulation, dashboard UI, models on HF Hub
f381be8
preview code
|
raw
history blame contribute delete
9.17 kB

Frontend Documentation

Technology Stack

Technology Version Purpose
Vite 7.x Build tool & dev server
React 19.x UI framework
TypeScript 5.9.x Type safety
Recharts 3.7.x Interactive 2D charts (BarChart, LineChart, AreaChart, RadarChart, ScatterChart, PieChart)
lucide-react 0.575.x Icon system — no emojis in UI
TailwindCSS 4.x Utility-first CSS
Axios 1.x HTTP client

Project Structure 

frontend/
├── index.html
├── vite.config.ts          # Vite + /api proxy
├── tsconfig.json
├── package.json
└── src/
    ├── main.tsx
    ├── App.tsx             # Root, tab navigation, v1/v2 selector
    ├── api.ts              # All API calls + TypeScript types
    ├── index.css
    └── components/
        ├── Dashboard.tsx           # Fleet overview heatmap + capacity charts
        ├── PredictionForm.tsx      # Single-cycle SOH prediction + gauge
        ├── SimulationPanel.tsx     # Multi-battery lifecycle simulation
        ├── MetricsPanel.tsx        # Full model metrics dashboard
        ├── GraphPanel.tsx          # Analytics — fleet, single battery, compare, temperature
        └── RecommendationPanel.tsx # Operating condition optimizer with charts

Tab Order

Tab Component Description
Simulation SimulationPanel ML-backed multi-battery lifecycle forecasting
Predict PredictionForm Single-cycle SOH + RUL prediction
Metrics MetricsPanel Full model evaluation dashboard
Analytics GraphPanel Fleet & per-battery interactive analytics
Recommendations RecommendationPanel Operating condition optimizer
Research Paper — Embedded research PDF

Components

MetricsPanel

Full interactive model evaluation dashboard with 6 switchable sections:

  • Overview — KPI stat cards with lucide icons, R² ranking bar chart, model family pie chart, normalized radar chart (top 5), R² vs MAE scatter trade-off plot, Top-3 rankings podium
  • Models — Interactive sort (R²/MAE/RMSE/MAPE, asc/desc), family filter dropdown, chart-type toggle (bar/radar/scatter), multi-select compare mode, colour-coded metric badges, full metrics table with per-row highlighting
  • Validation — Within-5% / within-10% grouped bar chart, full validation table with pass/fail badges
  • Deep Learning — LSTM/ensemble/VAE-LSTM/DG-iTransformer results with charts and metric tables
  • Dataset — Battery stats cards, engineered features list, temperature groups, degradation distribution bar chart, SOH range gauge
  • Figures — Searchable grid of all artifact figures with modal lightbox on click

Key features:

  • All icons via lucide-react (no emojis)
  • filteredModels useMemo respects active sort/filter state
  • MetricBadge component colour-codes values green/yellow/red based on model quality thresholds
  • SectionBadge nav bar with icon + label

GraphPanel (Analytics)

Four-section analytics dashboard:

  • Fleet Overview — SOH bar chart sorted by health (colour-coded green/yellow/red), SOH vs cycles bubble scatter (bubble = temperature), fleet status KPI cards (healthy/degraded/near-EOL), filter controls (min SOH slider, temp range), clickable battery roster table
  • Single Battery — SOH trajectory + linear RUL projection overlay, capacity fade area chart, smoothed degradation rate area chart, show/hide EOL reference line toggle
  • Compare — Multi-select up to 5 batteries; SOH overlay line chart with distinct colours per battery, capacity fade overlay, summary comparison table (final SOH, cycles, min capacity)
  • Temperature Analysis — Temperature vs SOH scatter, temperature distribution histogram

Key features:

  • Multi-battery data loaded in parallel using Promise.all
  • RUL projection via least-squares on last 20 cycles → extrapolated to 70% SOH
  • SohBadge component with dynamic colour + icon

RecommendationPanel

Interactive optimizer replacing the previous plain form + table:

  • Input form — Text input for battery ID, range sliders for SOH and ambient temperature, numeric inputs for cycle and top-k
  • Summary cards — Battery ID, best predicted RUL, best improvement, config count
  • Visual Analysis tabs:
    • RUL Comparison — bar chart comparing predicted RUL across all recommendations
    • Parameters — grouped bar chart showing temp/current/cutoff per rank
    • Radar — normalized multi-metric radar chart for top-3 configs
  • Recommendations table — rank icons (Trophy/Award/Medal from lucide), colour-coded improvement badges, expandable rows showing per-recommendation explanation and parameter details

SimulationPanel

  • Configure up to N battery simulations with individual parameters (temp, voltage, current, EOL threshold)
  • Select ML model for lifecycle prediction (or pure physics fallback)
  • Animated SOH trajectory charts, final stats table, degradation state timeline

Dashboard

  • Fleet battery grid with SOH colour coding
  • Capacity fade line chart per selected battery
  • Model metrics bar chart

PredictionForm

  • 12-input form with all engineered cycle features
  • SOH gauge visualization (SVG ring) with degradation state colour
  • Confidence interval display
  • Model selector (v2 models / best_ensemble)

API Integration (api.ts)

All API calls return typed TypeScript response objects:

Function Endpoint Description
fetchDashboard() GET /api/dashboard Fleet overview + capacity fade data
fetchBatteries() GET /api/batteries All battery metadata
fetchBatteryCapacity(id) GET /api/battery/{id}/capacity Per-battery cycles, capacity, SOH arrays
predictSoh(req) POST /api/v2/predict Single-cycle SOH + RUL prediction
fetchRecommendations(req) POST /api/v2/recommend Operating condition optimization
simulateBatteries(req) POST /api/v2/simulate Multi-battery lifecycle simulation
fetchMetrics() GET /api/metrics Full model evaluation metrics
fetchModels() GET /api/v2/models All loaded models with metadata

Development 

cd frontend
npm install
npm run dev        # http://localhost:5173

API requests proxy to http://localhost:7860 in dev mode (see vite.config.ts).

Build 

npm run build      # outputs to dist/

The built dist/ folder is served as static files by FastAPI at the root path. | Vite | 6.x | Build tool & dev server | | React | 18.x | UI framework | | TypeScript | 5.x | Type safety | | Three.js | latest | 3D rendering | | @react-three/fiber | latest | React renderer for Three.js | | @react-three/drei | latest | Three.js helpers | | Recharts | latest | 2D charts | | TailwindCSS | 4.x | Utility-first CSS | | Axios | latest | HTTP client |

Project Structure 

frontend/
├── index.html              # Entry HTML
├── vite.config.ts          # Vite + proxy config
├── tsconfig.json           # TypeScript config
├── package.json
├── public/
│   └── vite.svg            # Favicon
└── src/
    ├── main.tsx            # React entry point
    ├── App.tsx             # Root component + tab navigation
    ├── api.ts              # API client + types
    ├── index.css           # TailwindCSS import
    └── components/
        ├── Dashboard.tsx       # Fleet overview + charts
        ├── PredictionForm.tsx  # SOH prediction form + gauge
        ├── BatteryViz3D.tsx    # 3D battery pack heatmap
        ├── GraphPanel.tsx      # Analytics / per-battery graphs
        └── RecommendationPanel.tsx  # Operating condition optimizer

Components

Dashboard

  • Stat cards (battery count, models, best R²)
  • Battery fleet grid with SOH color coding
  • SOH capacity fade line chart (Recharts)
  • Model R² comparison bar chart

PredictionForm

  • 12-input form with all cycle features
  • SOH gauge visualization (SVG ring)
  • Result display with degradation state coloring
  • Confidence interval display

BatteryViz3D

  • 3D battery pack with cylindrical cells
  • SOH-based fill level and color mapping
  • Click-to-inspect with side panel details
  • Auto-rotation with orbit controls
  • Health legend and battery list sidebar

GraphPanel

  • Battery selector dropdown
  • Per-battery SOH trajectory (line chart)
  • Per-battery capacity fade curve
  • Fleet scatter plot (SOH vs cycles, bubble size = temperature)

RecommendationPanel

  • Input: battery ID, current cycle, SOH, temperature, top_k
  • Table of ranked recommendations
  • Shows temperature, current, cutoff voltage, predicted RUL, improvement %

Development 

cd frontend
npm install
npm run dev        # http://localhost:5173

API requests are proxied to http://localhost:7860 during development.

Production Build 

npm run build      # Outputs to dist/

The built files are served by FastAPI as static assets.