ModelMatch 2000

Problem

Choosing an AI model means balancing task fit, API cost, local hardware, reliability, latency, and hallucination risk. ModelMatch reframes that genuinely difficult decision as a humorous early-2000s portal built for a creative hackathon. The design challenge was to make a deliberately overloaded interface remain searchable, responsive, and useful.

Approach

The site combines a static model directory with ModelFit, a lightweight recommendation flow based on task, budget, and machine constraints. Visitors can search, filter, sort, compare detailed model profiles, explore historical AI systems, browse creators, and discover intentionally absurd popups and easter eggs. All content is driven by local JSON files so the experience remains deployable without a backend.

Technical implementation

Vanilla JavaScript loads model, creator, guestbook, error, and vintage datasets, with embedded fallbacks for browsers that block local fetch. Stable IDs connect cards, filters, popups, pagination, and comparison views. User-facing data is escaped before DOM insertion. The CSS implements the intentionally chaotic FrontPage-era visual language while retaining responsive layouts. The project has no build step and deploys directly to Netlify or any static host.

const matches = models
  .filter((model) => supportsTask(model, selectedTask))
  .filter((model) => fitsBudget(model, selectedBudget))
  .filter((model) => fitsMachine(model, selectedMachine))
  .sort((a, b) => b.compatibilityScore - a.compatibilityScore);