Model Arena: LLM Comparison Dashboard

[+] Status: Complete [+] Origin: Portfolio Project [+] Date: 2025.01
>> TECH_STACK:
[React][TypeScript][Tailwind CSS][SVG Charts][Vite]

Model Arena is a dashboard for comparing large language model outputs side-by-side. It provides a structured evaluation framework where users can send the same prompt to multiple models, compare responses in real time, and score outputs across configurable criteria. The tool visualizes performance differences using custom SVG radar charts and comparison matrices.

The project focuses heavily on data visualization. Rather than pulling in a charting library, I built all visualizations from scratch using SVG path calculations and React state for animations. This keeps the bundle small and gives full control over the visual design.

Open Source

This project is open source and available on GitHub

Live Demo View Repository 32 Commits Star on GitHub

Frontend application focused on custom data visualization:

React + TypeScript
UI Framework

Type-safe component architecture for managing model configurations, prompt inputs, and response comparison panels

SVG Charts
Data Visualization

Custom SVG-based radar charts, bar graphs, and comparison matrices for visualizing model performance metrics

Tailwind CSS
Styling

Responsive grid layouts for side-by-side model comparisons with dark mode and mobile-friendly design

Vite
Build Tool

Fast development iteration with hot module replacement for rapid UI prototyping

Visualization Custom SVG Radar Charts
Problem: Comparing LLM capabilities across multiple dimensions (speed, accuracy, cost, context window) requires more than simple bar charts
Solution: Built custom SVG radar charts from scratch using calculated polygon vertices, animated transitions between model selections, and interactive tooltips on each axis
Result: Multi-dimensional comparison at a glance without relying on chart libraries
Architecture Side-by-Side Response Comparison
Problem: Evaluating model outputs requires seeing responses next to each other with the same prompt and parameters
Solution: Designed a split-panel interface that sends the same prompt to multiple configured models simultaneously, displays responses side-by-side with syntax highlighting, and tracks response time and token usage per model
Result: Direct visual comparison eliminates switching between tabs or windows to evaluate outputs
UX Design Configurable Evaluation Criteria
Problem: Different use cases prioritize different model attributes. Code generation cares about accuracy. Chat cares about tone
Solution: Built a criteria editor where users define weighted evaluation dimensions. The radar chart and scoring system adapt dynamically to reflect the configured weights
Result: Flexible evaluation framework that adapts to the user's specific comparison needs
Data Visualization
  • SVG path calculations
  • Radar chart geometry
  • Animated transitions
  • Interactive tooltips
React Architecture
  • Multi-panel layouts
  • Synchronized state
  • Dynamic form generation
  • Responsive grids
TypeScript
  • Generic component patterns
  • Type-safe chart data
  • Discriminated unions
  • Utility types
Frontend Performance
  • Lazy rendering
  • Debounced inputs
  • Memoized calculations
  • CSS containment
Complete
  • ✓ Side-by-side model response comparison
  • ✓ Custom SVG radar charts with animations
  • ✓ Configurable evaluation criteria with weights
  • ✓ Response time and token usage tracking
  • ✓ Dark mode responsive interface
  • ✓ Export comparison results to JSON