| import React, { useEffect, useMemo, useRef, useState } from 'react' |
| import { api, hubTop } from './api.js' |
| import { Sparkline, Stat, AreaChart, fmt, pct } from './components.jsx' |
| import { ModelPage, AuthorPage, Loading, ErrBox } from './pages.jsx' |
|
|
| function parseHash() { |
| const h = location.hash |
| if (h.startsWith('#/m/')) return { v: 'model', id: decodeURIComponent(h.slice(4)) } |
| if (h.startsWith('#/a/')) return { v: 'author', author: decodeURIComponent(h.slice(4)) } |
| return { v: 'home' } |
| } |
|
|
| const BOARDS = [ |
| { key: 'gainers_7d', label: 'Gainers 7d', sub: 'biggest absolute 7-day gains' }, |
| { key: 'growth_7d', label: 'Fastest growing', sub: 'relative growth vs week before' }, |
| { key: 'breakouts', label: 'Breakouts', sub: 'new entries with traction' }, |
| { key: 'likes_7d', label: 'Most liked 7d', sub: 'likes gained this week' }, |
| { key: 'families', label: 'Top families', sub: 'ecosystems by family downloads' }, |
| { key: 'authors_dl30', label: 'Authors 30d', sub: 'most downloaded authors' }, |
| { key: 'authors_7d', label: 'Authors 7d', sub: 'this week\'s top authors' }, |
| ] |
|
|
| function BoardTable({ rows, go, isAuthors }) { |
| if (!rows || !rows.length) return <p className="py-6 text-sm text-[var(--dim)]">Empty board this week.</p> |
| const maxdl = Math.max(1, ...rows.map((r) => r.dl30 || 0)) |
| return ( |
| <table className="w-full"> |
| <thead> |
| <tr className="text-[10.5px] uppercase tracking-[0.06em] text-[var(--faint)]"> |
| <th className="w-8 py-2 pl-1 text-left font-semibold">#</th> |
| <th className="py-2 text-left font-semibold">{isAuthors ? 'Author' : 'Model'}</th> |
| <th className="hidden px-3 py-2 text-right font-semibold md:table-cell">30d</th> |
| <th className="px-3 py-2 text-right font-semibold">7d</th> |
| {!isAuthors && <th className="hidden px-3 py-2 text-right font-semibold sm:table-cell">Growth</th>} |
| <th className="px-3 py-2 pr-1 text-right font-semibold">♥</th> |
| </tr> |
| </thead> |
| <tbody> |
| {rows.map((r, i) => { |
| const name = isAuthors ? r.author : r.id |
| const href = isAuthors ? '#/a/' + r.author : '#/m/' + r.id |
| return ( |
| <tr key={name} onClick={() => go(href)} className="cursor-pointer border-b border-[var(--line2)] transition-colors hover:bg-[var(--accent-soft)]/40"> |
| <td className="tnum py-2.5 pl-1 text-[var(--faint)]">{i + 1}</td> |
| <td className="break-all py-2.5 pr-3 font-mono text-[12.5px] font-semibold"> |
| {name}{!isAuthors && r.pipeline_tag && <span className="ml-2 hidden font-sans text-[11px] font-normal text-[var(--faint)] lg:inline">{r.pipeline_tag}</span>} |
| {isAuthors && <span className="ml-2 font-sans text-[11px] font-normal text-[var(--faint)]">{fmt(r.models)} models</span>} |
| </td> |
| <td className="tnum hidden px-3 py-2.5 text-right md:table-cell">{fmt(r.dl30)}</td> |
| <td className="tnum px-3 py-2.5 text-right font-semibold">{fmt(r.dl_7d)}</td> |
| {!isAuthors && <td className={'tnum hidden px-3 py-2.5 text-right font-mono text-[12px] sm:table-cell ' + ((r.growth_7d || 0) >= 0 ? 'text-[var(--up)]' : 'text-[var(--danger)]')}>{r.growth_7d != null ? pct(r.growth_7d) : '—'}</td>} |
| <td className="tnum px-3 py-2.5 pr-1 text-right text-[var(--dim)]">♥ {fmt(r.likes)}</td> |
| </tr> |
| ) |
| })} |
| </tbody> |
| </table> |
| ) |
| } |
|
|
| function Home({ go }) { |
| const [hub, setHub] = useState(null) |
| const [hubErr, setHubErr] = useState(null) |
| const [boards, setBoards] = useState(null) |
| const [board, setBoard] = useState('gainers_7d') |
| const [top, setTop] = useState(null) |
| const [trend, setTrend] = useState(null) |
| useEffect(() => { |
| api.hub().then(setHub).catch(setHubErr) |
| api.leaderboards().then(setBoards).catch(() => {}) |
| hubTop('downloads', 12).then(setTop).catch(() => {}) |
| hubTop('trendingScore', 10).then(setTrend).catch(() => {}) |
| }, []) |
| const pulse = useMemo(() => { |
| if (!hub || !hub.day) return null |
| const byDay = new Map() |
| const low = new Set(hub.low_days || []) |
| hub.day.forEach((day, i) => { if (low.has(day)) return; byDay.set(day, (byDay.get(day) || 0) + (hub.dl[i] || 0)) }) |
| const days = Array.from(byDay.keys()).sort() |
| return { days, vals: days.map((d) => byDay.get(d)) } |
| }, [hub]) |
| const yestTotal = pulse ? pulse.vals[pulse.vals.length - 1] : null |
| const prevTotal = pulse ? pulse.vals[pulse.vals.length - 8] : null |
| const week = pulse ? pulse.vals.slice(-7).reduce((a, b) => a + b, 0) : null |
| return ( |
| <div className="rise"> |
| <h1 className="max-w-2xl pt-10 text-3xl font-extrabold leading-[1.08] tracking-tight sm:pt-14 sm:text-[42px]"> |
| The pulse of the <span className="text-[var(--accent)]">whole Hub</span>, day by day. |
| </h1> |
| <p className="mt-3 max-w-xl text-sm leading-relaxed text-[var(--dim)] sm:text-[15px]"> |
| Download history for every model on Hugging Face — search any repo, follow its curve, |
| climb through the leaderboards. ~1M+ models, updated daily. |
| </p> |
| |
| {hubErr && <ErrBox e={hubErr} retry={() => location.reload()} />} |
| {!pulse && !hubErr && ( |
| <div className="mt-10 rounded-2xl border border-[var(--line)] bg-[var(--panel)] p-6"> |
| <div className="h-40 animate-pulse rounded-lg bg-[var(--line2)]" /> |
| </div> |
| )} |
| {pulse && ( |
| <section className="mt-8 rounded-2xl border border-[var(--line)] bg-[var(--panel)] p-4 sm:p-6"> |
| <div className="flex flex-wrap items-baseline justify-between gap-2"> |
| <h2 className="text-[13px] font-bold uppercase tracking-[0.08em]">Hub downloads per day</h2> |
| <span className="tnum font-mono text-[11.5px] text-[var(--faint)]">{fmt(yestTotal)} yesterday · {fmt(week)} last 7d · vs {fmt(prevTotal)} week before</span> |
| </div> |
| <div className="mt-2"><AreaChart days={pulse.days} vals={pulse.vals} /></div> |
| <p className="mt-2 text-[11px] text-[var(--faint)]">Aggregate across the 8 largest task families · gaps in the source data are smoothed out</p> |
| </section> |
| )} |
| |
| {trend && trend.length > 0 && ( |
| <section className="mt-6"> |
| <h2 className="text-[12px] font-semibold uppercase tracking-[0.06em] text-[var(--dim)]">Trending right now <span className="font-normal normal-case text-[var(--faint)]">· live from the Hub API</span></h2> |
| <div className="mt-2 flex flex-wrap gap-2"> |
| {trend.map((m) => ( |
| <a key={m.id} href={'#/m/' + m.id} className="rounded-full border border-[var(--line)] px-3 py-1.5 font-mono text-[11.5px] transition-colors hover:border-[var(--accent)]"> |
| {m.id} |
| </a> |
| ))} |
| </div> |
| </section> |
| )} |
| |
| <section className="mt-10"> |
| <div className="flex flex-wrap items-baseline justify-between gap-3"> |
| <h2 className="text-[13px] font-bold uppercase tracking-[0.08em]">Leaderboards <span className="font-medium normal-case tracking-normal text-[var(--faint)]">· week of {boards ? boards.updated : '…'}</span></h2> |
| </div> |
| <div className="mt-3 flex flex-wrap gap-2"> |
| {BOARDS.map((b) => ( |
| <button key={b.key} onClick={() => setBoard(b.key)} |
| className={'rounded-full border px-3.5 py-1.5 text-xs font-semibold transition-colors ' + (board === b.key ? 'border-[var(--accent)] bg-[var(--accent-soft)] text-[var(--ink)]' : 'border-[var(--line)] text-[var(--dim)] hover:border-[var(--accent)] hover:text-[var(--ink)]')}> |
| {b.label} |
| </button> |
| ))} |
| </div> |
| <p className="mt-2 text-[11.5px] text-[var(--faint)]">{(BOARDS.find((b) => b.key === board) || {}).sub}</p> |
| <div className="mt-2"> |
| {boards ? <BoardTable rows={boards[board]} go={go} isAuthors={board.startsWith('authors')} /> : <Loading label="Loading leaderboards…" />} |
| </div> |
| </section> |
| |
| {top && ( |
| <section className="mt-10"> |
| <h2 className="border-b border-[var(--ink)] pb-2 text-[13px] font-bold uppercase tracking-[0.08em]">Most downloaded right now <span className="font-medium normal-case tracking-normal text-[var(--faint)]">· live from the Hub API</span></h2> |
| <table className="mt-1 w-full"> |
| <tbody> |
| {top.map((m, i) => ( |
| <tr key={m.id} onClick={() => go('#/m/' + m.id)} className="cursor-pointer border-b border-[var(--line2)] transition-colors hover:bg-[var(--accent-soft)]/40"> |
| <td className="tnum w-8 py-2.5 pl-1 text-[var(--faint)]">{i + 1}</td> |
| <td className="break-all py-2.5 pr-3 font-mono text-[12.5px] font-semibold">{m.id}<span className="ml-2 hidden font-sans text-[11px] font-normal text-[var(--faint)] lg:inline">{m.pipeline_tag || ''}</span></td> |
| <td className="tnum px-3 py-2.5 text-right font-semibold">{fmt(m.downloads)}</td> |
| <td className="tnum hidden px-3 py-2.5 text-right text-[var(--dim)] sm:table-cell">{fmt(m.downloadsAllTime)} all time</td> |
| <td className="tnum hidden px-3 py-2.5 pr-1 text-right text-[var(--dim)] md:table-cell">♥ {fmt(m.likes)}</td> |
| </tr> |
| ))} |
| </tbody> |
| </table> |
| </section> |
| )} |
| </div> |
| ) |
| } |
|
|
| export default function App() { |
| const [route, setRoute] = useState(parseHash()) |
| const [theme, setTheme] = useState(() => (localStorage.getItem('hf-theme') || 'dark')) |
| const [query, setQuery] = useState('') |
| const [results, setResults] = useState(null) |
| const [searching, setSearching] = useState(false) |
| const searchRef = useRef(null) |
| const boxRef = useRef(null) |
|
|
| useEffect(() => { |
| document.documentElement.classList.toggle('light', theme === 'light') |
| localStorage.setItem('hf-theme', theme) |
| }, [theme]) |
|
|
| useEffect(() => { |
| const f = () => { setRoute(parseHash()); setResults(null); setQuery('') } |
| window.addEventListener('hashchange', f) |
| return () => window.removeEventListener('hashchange', f) |
| }, []) |
|
|
| useEffect(() => { |
| const onKey = (e) => { |
| if (e.key === '/' && document.activeElement !== searchRef.current) { e.preventDefault(); searchRef.current?.focus() } |
| if (e.key === 'Escape') { setResults(null); searchRef.current?.blur() } |
| } |
| const onClick = (e) => { if (boxRef.current && !boxRef.current.contains(e.target)) setResults(null) } |
| window.addEventListener('keydown', onKey) |
| window.addEventListener('mousedown', onClick) |
| return () => { window.removeEventListener('keydown', onKey); window.removeEventListener('mousedown', onClick) } |
| }, []) |
|
|
| useEffect(() => { |
| const q = query.trim() |
| if (q.length < 2) { setResults(null); setSearching(false); return } |
| setSearching(true) |
| const t = setTimeout(() => { |
| api.search(q).then((r) => { setResults(r.slice(0, 8)); setSearching(false) }).catch(() => { setResults([]); setSearching(false) }) |
| }, 250) |
| return () => clearTimeout(t) |
| }, [query]) |
|
|
| const go = (href) => { location.hash = href } |
| const open = (href) => { setResults(null); setQuery(''); go(href) } |
|
|
| return ( |
| <div className="min-h-screen"> |
| <header className="sticky top-0 z-40 border-b border-[var(--line)] bg-[var(--bg)]/95"> |
| <div className="mx-auto flex max-w-6xl flex-wrap items-center gap-x-4 gap-y-2 px-4 py-3 sm:px-6"> |
| <a href="#/" className="flex items-baseline gap-1 text-xl font-extrabold tracking-tight"> |
| hub<span className="text-[var(--accent)]">·</span><span className="text-[var(--dim)]">flow</span> |
| </a> |
| <span className="hidden rounded-full border border-[var(--line)] px-2.5 py-0.5 font-mono text-[11px] text-[var(--dim)] sm:inline"> |
| {route.v === 'home' ? 'every model on the hub' : route.v === 'model' ? 'model' : 'author'} |
| </span> |
| <div className="relative ml-auto" ref={boxRef}> |
| <input ref={searchRef} value={query} onChange={(e) => setQuery(e.target.value)} |
| placeholder={'Search models /'} |
| className="w-44 rounded-lg border border-[var(--line)] bg-[var(--panel)] px-3 py-1.5 font-mono text-xs text-[var(--ink)] placeholder-[var(--faint)] outline-none transition-colors focus:border-[var(--accent)] sm:w-64" /> |
| {results && results.length > 0 && ( |
| <div className="absolute right-0 top-10 z-50 w-[320px] overflow-hidden rounded-xl border border-[var(--line)] bg-[var(--panel)] shadow-2xl"> |
| {results.map((r) => ( |
| <button key={r.id} onClick={() => open('#/m/' + r.id)} className="flex w-full items-baseline justify-between gap-3 px-3.5 py-2 text-left transition-colors hover:bg-[var(--accent-soft)]"> |
| <span className="truncate font-mono text-[12px] font-semibold text-[var(--ink)]">{r.id}</span> |
| <span className="tnum shrink-0 font-mono text-[11px] text-[var(--faint)]">{fmt(r.dl30)}/30d</span> |
| </button> |
| ))} |
| </div> |
| )} |
| {results && !results.length && !searching && ( |
| <div className="absolute right-0 top-10 z-50 w-[320px] rounded-xl border border-[var(--line)] bg-[var(--panel)] px-3.5 py-3 text-xs text-[var(--dim)] shadow-2xl">Nothing found for “{query}”</div> |
| )} |
| </div> |
| <button onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')} aria-label="toggle theme" |
| className="rounded-lg border border-[var(--line)] px-2.5 py-1.5 text-xs text-[var(--dim)] transition-colors hover:text-[var(--ink)]"> |
| {theme === 'dark' ? '☾' : '☀'} |
| </button> |
| </div> |
| </header> |
| |
| <div className="grid-tex pointer-events-none absolute inset-x-0 top-0 h-56 opacity-40" aria-hidden="true" /> |
| |
| <main className="relative mx-auto max-w-6xl px-4 pb-16 sm:px-6"> |
| {route.v === 'home' && <Home go={open} />} |
| {route.v === 'model' && <ModelPage key={route.id} id={route.id} go={open} />} |
| {route.v === 'author' && <AuthorPage key={route.author} author={route.author} go={open} />} |
| |
| <footer className="mt-16 border-t border-[var(--line)] pt-6 text-xs leading-relaxed text-[var(--faint)]"> |
| <p> |
| <b className="text-[var(--dim)]">Data & history API:</b>{' '} |
| <a className="underline decoration-[var(--line)] underline-offset-2 hover:decoration-[var(--dim)]" href="https://modelpulse.ifsp.dev" target="_blank" rel="noopener">model-pulse</a>{' '} |
| over the open dataset{' '} |
| <a className="underline decoration-[var(--line)] underline-offset-2 hover:decoration-[var(--dim)]" href="https://huggingface.co/datasets/modelpulse/model-pulse-data" target="_blank" rel="noopener">modelpulse/model-pulse-data</a>{' '} |
| (built on <a className="underline decoration-[var(--line)] underline-offset-2 hover:decoration-[var(--dim)]" href="https://huggingface.co/datasets/cfahlgren1/hub-stats" target="_blank" rel="noopener">cfahlgren1/hub-stats</a>). |
| “Right now” lists come live from the public Hugging Face Hub API. Big thanks to the model-pulse project for open-sourcing both data and API. |
| </p> |
| <p className="mt-1.5"> |
| <b className="text-[var(--dim)]">hub-flow</b> is an independent project, not affiliated with Hugging Face or model-pulse.{' '} |
| Sibling space: <a className="underline decoration-[var(--line)] underline-offset-2 hover:decoration-[var(--dim)]" href="https://mindchain-model-flow.static.hf.space/" target="_blank" rel="noopener">mindchain/model-flow</a>.{' '} |
| Press <kbd className="rounded border border-[var(--line)] px-1 font-mono">/</kbd> to search any of the ~1M models. |
| </p> |
| </footer> |
| </main> |
| </div> |
| ) |
| } |
|
|
