| import { useState } from 'react' |
| import './HowItWorks.css' |
|
|
| const API_URL = import.meta.env.VITE_API_URL || 'https://fairrelay-backend.onrender.com' |
|
|
| const steps = [ |
| { |
| step: '01', |
| title: 'Geographic Clustering Agent', |
| desc: 'scikit-learn KMeans clusters shipments by pickup/drop proximity (4D feature vectors). Silhouette-score selects optimal K. Groups nearby shipments heading the same direction.', |
| code: `curl -X POST ${API_URL}/api/v1/consolidate/optimize \\ |
| -H "Content-Type: application/json" \\ |
| -d '{ |
| "shipments": [ |
| {"id": "SH-1", "pickupLat": 19.076, "pickupLng": 72.877, |
| "dropLat": 18.520, "dropLng": 73.856, "weight": 800} |
| ], |
| "trucks": [{"id": "T-1", "maxWeight": 2000, "maxVolume": 8}] |
| }'`, |
| color: '#f97316', |
| endpoint: 'POST /api/v1/consolidate/optimize', |
| }, |
| { |
| step: '02', |
| title: 'Time Window Compatibility Agent', |
| desc: 'Filters clusters by delivery time window overlap. Splits groups where shipments have incompatible schedules. Configurable tolerance (default: 120 min).', |
| code: `# Time windows are part of the shipment payload: |
| { |
| "shipments": [{ |
| "id": "SH-1", |
| "timeWindowStart": "2026-02-20T06:00:00Z", |
| "timeWindowEnd": "2026-02-20T12:00:00Z", |
| ... |
| }] |
| } |
| # Agent auto-splits groups with >120min gap`, |
| color: '#3b82f6', |
| endpoint: 'Integrated in consolidate pipeline', |
| }, |
| { |
| step: '03', |
| title: 'Capacity Optimization Agent', |
| desc: 'OR-Tools CP-SAT integer programming solver assigns shipments to trucks. Minimizes vehicles used while respecting weight + volume constraints. FFD heuristic fallback.', |
| code: `# Response includes packed truck assignments: |
| { |
| "groups": [{ |
| "groupId": 1, |
| "truckId": "T-1", |
| "shipmentCount": 3, |
| "totalWeight": 1850, |
| "utilizationWeight": 92.5 |
| }], |
| "metrics": { |
| "utilizationBefore": 27.3, |
| "utilizationAfter": 82.1, |
| "tripsReduced": 4 |
| } |
| }`, |
| color: '#10b981', |
| endpoint: 'Response from /consolidate/optimize', |
| }, |
| { |
| step: '04', |
| title: 'Fair Dispatch Engine (8 Agents)', |
| desc: 'LangGraph multi-agent workflow: ML Effort → Route Planner (OR-Tools) → Fairness Manager (Gini ≤ 0.33) → Driver Liaison → Final Resolution → Explainability.', |
| code: `curl -X POST ${API_URL}/api/dispatch/allocate \\ |
| -H "Content-Type: application/json" \\ |
| -d '{ |
| "drivers": [ |
| {"id": "D-1", "name": "Rajesh", "vehicle_capacity_kg": 500} |
| ], |
| "packages": [ |
| {"id": "P-1", "weight_kg": 12, "latitude": 19.13, |
| "longitude": 72.82, "priority": "HIGH"} |
| ], |
| "warehouse": {"lat": 19.076, "lng": 72.877} |
| }'`, |
| color: '#f59e0b', |
| endpoint: 'POST /api/dispatch/allocate', |
| }, |
| { |
| step: '05', |
| title: 'Continuous Learning Agent', |
| desc: 'Q-learning RL agent records (state, action, reward) per run. Builds Q-table over time to recommend optimal parameters. Self-improves with every execution.', |
| code: `# Health check — verify all agents are active: |
| curl ${API_URL}/api/dispatch/health |
| |
| # Response: |
| { |
| "brain_status": "connected", |
| "brain_health": {"status": "healthy", "database": "connected"}, |
| "gateway": "operational" |
| }`, |
| color: '#ec4899', |
| endpoint: 'GET /api/dispatch/health', |
| }, |
| ] |
|
|
| function CopyButton({ text }: { text: string }) { |
| const [copied, setCopied] = useState(false) |
| |
| const handleCopy = () => { |
| navigator.clipboard.writeText(text).then(() => { |
| setCopied(true) |
| setTimeout(() => setCopied(false), 2000) |
| }) |
| } |
|
|
| return ( |
| <button onClick={handleCopy} className="hiw__copy-btn" title="Copy to clipboard"> |
| {copied ? '✓ Copied' : '📋 Copy'} |
| </button> |
| ) |
| } |
|
|
| export default function HowItWorks() { |
| return ( |
| <section className="hiw" id="how-it-works"> |
| <div className="container"> |
| <div className="section-header"> |
| <div className="tag">Multi-Agent Pipeline</div> |
| <h2 className="section-title">How FairRelay's AI Engine works</h2> |
| <p className="section-sub"> |
| 13 specialized AI agents orchestrated by LangGraph — 8 for fair dispatch + 5 for load consolidation. |
| Every endpoint is live. Try the curl commands below. |
| </p> |
| </div> |
| |
| <div className="hiw__steps"> |
| {steps.map((s, i) => ( |
| <div key={s.step} className="hiw__step"> |
| <div className="hiw__step-num" style={{ color: s.color, borderColor: s.color + '33', background: s.color + '0d' }}> |
| {s.step} |
| </div> |
| {i < steps.length - 1 && ( |
| <div className="hiw__connector"> |
| <svg width="24" height="24" viewBox="0 0 24 24" fill="none"> |
| <path d="M5 12h14M13 6l6 6-6 6" stroke={s.color} strokeWidth="1.5" strokeLinecap="round"/> |
| </svg> |
| </div> |
| )} |
| <div className="hiw__step-content"> |
| <h3 className="hiw__step-title">{s.title}</h3> |
| <p className="hiw__step-desc">{s.desc}</p> |
| <div className="hiw__step-endpoint" style={{ color: s.color }}> |
| <code>{s.endpoint}</code> |
| </div> |
| <div className="hiw__step-code"> |
| <CopyButton text={s.code} /> |
| <pre><code>{s.code}</code></pre> |
| </div> |
| </div> |
| </div> |
| ))} |
| </div> |
| </div> |
| |
| <style>{` |
| .hiw__copy-btn { position: absolute; top: 8px; right: 8px; background: rgba(249,115,22,0.15); border: 1px solid rgba(249,115,22,0.3); color: #f97316; font-size: 0.7rem; padding: 4px 10px; border-radius: 6px; cursor: pointer; font-weight: 600; z-index: 2; transition: all 0.2s; } |
| .hiw__copy-btn:hover { background: rgba(249,115,22,0.25); } |
| .hiw__step-code { position: relative; } |
| .hiw__step-endpoint { font-size: 0.7rem; font-family: 'JetBrains Mono', monospace; margin-bottom: 0.5rem; opacity: 0.8; } |
| .hiw__step-endpoint code { background: rgba(255,255,255,0.03); padding: 2px 8px; border-radius: 4px; border: 1px solid rgba(255,255,255,0.06); } |
| `}</style> |
| </section> |
| ) |
| } |
|
|
