Repository navigation
Redesign the model catalog with model pages, compare and normalized pricing - #578
Open
sabrinaaquino wants to merge 8 commits into
Open
sabrinaaquino wants to merge 8 commits into
sabrinaaquino wants to merge 8 commits into
Conversation
…nd model pages Redesign direction for the Models section, built on live data: - Explorer on /models/overview and the modality pages: modality tabs, per-modality columns, quick picks, filter rail, pricing lens, gallery view with reference renders, compare tray. - 251 generated model family pages (/models/<family>) in a hidden, searchable navigation group: variants, key numbers, capabilities, pricing calculators, endpoint guidance, code samples, and slots for performance and benchmarks (sample layout behind ?preview=1). - Compare view with same-prompt side-by-side output for image and video. - Build-time video price matrix from POST /video/quote replaces the per-row browser quotes and the "Variable" label. - Methodology page and a direction doc with research in design/. - Hourly sync workflow builds the catalog, quotes and media.
Importing the 178 KB UI snippet on 251 model pages made every page compile it: mint validate took ~19 minutes and mint dev would not start in reasonable time. Root .js files are inlined into every docs page, so a global script was not an option either. - src/model-hub.jsx holds the UI as a factory that receives React. - scripts/build-model-hub.js compiles it with sucrase into data/model-hub.bundle.json and checks that it evaluates. - snippets/model-hub-mount.jsx (<HubMount view="...">) is the only thing pages import; it loads the bundle once per session. - Generated and hand-authored hub pages now use HubMount; their static Markdown stays in the HTML for search and agents. mint dev now starts in ~3.5 minutes with all 251 model pages, and every model page, the explorer and compare view server-render cleanly through the bundle.
Adopt the docs type scale (30/500 titles, 18px descriptions, 14px tables), a 4px spacing scale, 4/8/16px radii and the existing catalog badges. Replace cards with rules and whitespace; drop gradients, blur, pills, decorative icons and quick picks. Distinguish primary, secondary and tertiary actions; add focus, disabled, selected, overflow and error states; collapse table columns by priority on small screens; hide empty telemetry and benchmark scaffolding until data exists.
…nce and benchmarks Model pages get '<model> API' titles, 60-character document titles, per-modality meta descriptions, keywords, an H1, a generated FAQ and a server-rendered text version (H1, pricing, specs, cURL example, FAQ, related links) in a collapsed Accordion after <HubMount>, since Mintlify does not server-render snippet children. Modality tables link model names to their pages. Sample telemetry and benchmark data now show by default, labeled, behind SAMPLE_DATA_DEFAULT: p50/p95 latency, uptime bars, probe details, composite index, serving parity, reasoning-effort switch, and per-benchmark scores with intervals, provenance and dates.
…pty tiles Image and video galleries show only families with reference renders; the rest follow in the explorer table. Model pages omit Reference outputs until a family is rendered, videos without a poster paint a first frame, and image and video tables keep two sample columns so they fit.
Resolved conflicts in the generated model tables by regenerating them from main's model snapshot.
Contributor
|
Preview deployment for your docs. Learn more about Mintlify Previews.
|
Regenerated the model tables from main's latest snapshot to resolve conflicts.
This branch was successfully deployed
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Replaces the flat model lists with a model hub:
/models/overviewand the modality pages): 366 model IDs grouped into 251 families, filters per modality, prices normalized to a comparable unit (video priced from a fullPOST /video/quotematrix), the privacy tier on every row, a gallery of reference outputs for image and video, and a compare tray./models/<family>): variants, key specs, capabilities and reasoning details, pricing (cost estimator for text, clip-price matrix for video), parameters, voices, endpoint guidance with code samples, performance and benchmark modules, FAQ and related models./models/compare): up to four models side by side, with same-prompt outputs for image and video.design/models-redesign/DIRECTION.md(plus research notes).How it's built
scripts/build-model-catalog.jsbuildsdata/model-catalog.jsonand the model pages fromGET /models, mergingdata/video-pricing.json(scripts/quote-video-pricing.js),data/model-media.json(scripts/sync-model-media.js) and curateddata/model-overrides.json.src/model-hub.jsx.scripts/build-model-hub.jscompiles it todata/model-hub.bundle.json, whichsnippets/model-hub-mount.jsxloads once and caches. Compiling the UI as a snippet in every page mademint validatetake ~19 minutes; the bundle keeps builds normal. Styles are inmodel-hub.cssand follow the docs' type scale and components.Most of the diff is generated (model pages and data files). The hand-written code is in
src/,scripts/,snippets/model-hub-mount.jsx,model-hub.css, the hub pages inmodels/and.github/workflows/sync-static-models.yml.Before merging
SAMPLE_DATA_DEFAULT = falseinsrc/model-hub.jsxand runnode scripts/build-model-hub.js; otherwise search engines that run JavaScript will index them.data/model-overrides.jsonrecommends/responsesfor GPT-5-class OpenAI reasoning models; it's marked pending API team confirmation.new Functionloading. The mount evaluates the cached bundle withnew Function(the docs CSP allowsunsafe-eval). The direction doc describes the alternative.Known gaps, fine to follow up:
Testing
models/compile with@mdx-js/mdx; all 253 hub views server-render with React.To preview locally:
mintlify devdoesn't serve.json, so on localhost the mount first trieshttp://localhost:3333. Runnpx http-server -p 3333 --corsfrom the repo root next tonpx mintlify dev. Preview and production deployments serve/data/*.jsondirectly.