|
🌐 Live → ollama-explorer.vercel.app 📦 Source → github.com/serkan-uslu/ollama-explorer |
Ollama Explorer is Part 2 of 2. The structured metadata that powers every filter, badge, and benchmark score is generated automatically every week by the companion data pipeline:
| Repo | Role | |
|---|---|---|
| ⛏️ Data pipeline | Ollama Miner |
Python pipeline — crawls ollama.com/library, enriches 214+ models via LLM, validates every field, pushes models.json via PR |
| 🌐 You are here | Ollama Explorer |
Next.js 16 app — consumes public/data/models.json and presents it as a fast, filterable model directory |
ollama.com/library
▼ (crawled every Monday 03:00 UTC)
┌─────────────────────┐ PR: models.json ┌──────────────────────────┐
│ Ollama Miner │ ────────────────────────▶ │ Ollama Explorer │
│ crawl → enrich │ public/data/models.json │ 🔍 filter · compare · │
│ validate → export │ │ search (you are here) │
└─────────────────────┘ └──────────────────────────┘
🔗 Want to improve the data or run the pipeline yourself? → Ollama Miner
- 🔍 Full-text search across model name, description, use-cases and domain
- 🎛 Multi-dimensional filters — capability, domain, complexity, RAM, parameter size, language, use-case
- 🌗 Dark / light mode with FOUC-free theme persistence
- 📋 One-click copy for
ollama run <model>commands - 📱 Fully responsive — mobile bottom-sheet filters, desktop sticky sidebar
- ⚡ Zero JS on initial load — fully statically generated (
force-static) - 🗺 Sitemap + robots.txt auto-generated via Next.js metadata API
- 🖼 Dynamic OG images per page via edge
ImageResponse - 📊 JSON-LD structured data —
WebSite,SoftwareApplication,BreadcrumbList
| Layer | Technology |
|---|---|
| Framework | Next.js 16 (App Router, Server Components) |
| Language | TypeScript 5 — strict mode |
| Styling | Tailwind CSS v4 (CSS-native tokens, no config file) |
| Components | Atomic Design — atoms → molecules → organisms → templates → pages |
| Icons | Lucide React |
| Fonts | Geist Sans + Geist Mono (next/font) |
| Linting | ESLint (Next.js core-web-vitals + TypeScript rules) |
| Formatting | Prettier |
| Commit hooks | Husky + lint-staged + Commitlint (Conventional Commits) |
ollama-explorer/
├── app/ # Next.js App Router
│ ├── layout.tsx # Root layout, metadata, FOUC-prevention script
│ ├── page.tsx # Home — hero + stats
│ ├── models/
│ │ ├── page.tsx # Model browser with filters
│ │ └── [id]/
│ │ ├── page.tsx # Model detail + JSON-LD
│ │ └── opengraph-image.tsx # Dynamic per-model OG image
│ ├── about/page.tsx # About page
│ ├── opengraph-image.tsx # Global OG image (edge ImageResponse)
│ ├── robots.ts # /robots.txt
│ └── sitemap.ts # /sitemap.xml (217 URLs)
│
├── components/
│ ├── ui/
│ │ ├── atoms/ # Button, Badge, Input, Divider, Spinner, JsonLd
│ │ └── molecules/ # SearchInput, FilterChip, StatCard, CopyCommand
│ ├── features/
│ │ ├── layout/ # Header, Footer, ThemeToggle
│ │ └── models/ # ModelCard, ModelGrid, ModelFilters, ModelsBrowser
│ └── templates/ # BrowseLayout, DetailLayout
│
├── lib/
│ ├── constants.ts # App-wide constants (sort options, pagination)
│ ├── types/ # model.ts, filter.ts
│ ├── data/ # models.ts, filters.ts — data access layer
│ ├── hooks/ # useFilters, useTheme, useDebounce
│ └── utils/ # cn.ts, format.ts
│
└── public/
└── models.json # 214 models scraped from ollama.com/library
git clone https://github.com/serkan-uslu/ollama-explorer.git
cd ollama-explorer
npm install
npm run devOpen http://localhost:3000.
| Command | Description |
|---|---|
npm run dev |
Start development server |
npm run build |
Production build |
npm run start |
Start production server |
npm run lint |
Run ESLint |
npm run format |
Run Prettier across all source files |
Components are organised into atoms → molecules → organisms → templates → pages. Each layer may only import from layers below it. This prevents circular dependencies and makes every component independently testable.
All pages use force-static export. Model detail pages are pre-rendered via generateStaticParams at build time — no runtime server needed after deploy.
All colours, radii, shadows and typography are defined as CSS custom properties in globals.css. Tailwind is used for layout utilities only. Swapping themes or redesigning takes one file.
public/models.json is only accessed through lib/data/models.ts. No component imports JSON directly. This means swapping to an API/database later is a one-file change.
214+ models scraped from ollama.com/library by the Ollama Miner — an automated Python pipeline that runs every week and opens a PR with a fresh models.json.
Each model is enriched with:
- Domain classification (General, Code, Vision, Math, Medical, Language, Embedding)
- Use-case tagging (14 categories: Chat Assistant, Code Generation, Reasoning, RAG, etc.)
- RAM requirement buckets + context window size
- Complexity ratings (Beginner / Intermediate / Advanced)
- Language support (9 languages)
- Strengths, limitations, model family, benchmark scores
The structured metadata powering every filter and badge is generated by 6 focused LLM calls per model (via Ollama or Groq +
instructor). See Ollama Miner for details.
We welcome contributions! Check out CONTRIBUTING.md to get started.
Looking for help with:
- 🎨 UI/UX improvements
- 📊 Model data enrichment (benchmarks, ratings)
- 🌍 Internationalization (translations)
- ⚡ Performance optimizations
- 📝 Documentation improvements
- AI-powered chat interface to help users discover the right model through natural conversation
- Model rating & review system
- User favorites & collections
- Advanced comparison features
- API for model data access
- Dark mode schedule (auto-switch)
- More language support
- Export comparison results
- Model recommendations based on use case
If you find this project useful, please consider giving it a star! ⭐
MIT © Serkan Uslu