HTML 77.2%
TypeScript 10.5%
Python 9.6%
JavaScript 2.5%
1import type { Metadata } from 'next';2import Link from 'next/link';3import type { Series } from '@/components/charts';4import { HardwareStepChart } from '@/components/intelligence/client-charts';5import { fmtMemory, HW_KIND_LABELS, memoryRange, releaseMs, releaseOf } from '@/components/hardware/hardware-bits';6import { EstimateBanner, Methodology } from '@/components/intelligence/bits';7import { Chip, Estimated } from '@/components/ui/badges';8import { DataTable, EmptyRow, Td, Th } from '@/components/ui/data-table';9import { EntityLink } from '@/components/ui/entity';10import { Container, Note, PageHeader, Section } from '@/components/ui/section';11import { EmptyState, Unavailable } from '@/components/ui/unavailable';12import { intel, safe } from '@/lib/api';13import { fmtDate, fmtInt, num } from '@/lib/format';14import { routes, SITE_NAME, SITE_URL } from '@/lib/site';15import type { EntitySummary } from '@/lib/types';1617export const revalidate = 600;18const TITLE = 'Hardware frontier — accelerator memory and bandwidth by release';19const DESC = 'Timeline of accelerators and devices by release date: memory and bandwidth per generation and manufacturer, as published, connected to the models each device is estimated to run at 4-bit.';20export const metadata: Metadata = { title: TITLE, description: DESC, alternates: { canonical: '/hardware/frontier' }, openGraph: { title: `${TITLE} | ${SITE_NAME}`, description: DESC, url: `${SITE_URL}/hardware/frontier`, siteName: SITE_NAME } };2122const COLORS = ['var(--series-1)', 'var(--series-2)', 'var(--series-3)', 'var(--series-4)', 'var(--series-5)', 'var(--series-6)'];2324export default async function HardwareFrontierPage() {25 const page = await safe(intel.hardware({ limit: 100, sort: 'memory' }));26 if (!page) {27 return (28 <Container wide>29 <PageHeader eyebrow="Hardware frontier" title="Accelerators by generation" />30 <Unavailable what="Hardware" />31 </Container>32 );33 }34 const all = page.items;35 const dated = all.map((e) => ({ e, at: releaseMs(releaseOf(e)), mem: memoryRange(e.attributes?.memory_gb), bw: num(e.attributes?.memory_bandwidth_gbs), maker: typeof e.attributes?.manufacturer === 'string' ? (e.attributes.manufacturer as string) : e.organization?.name ?? 'Unknown' })).filter((x) => x.at !== null);36 const makers = [...new Set(dated.map((x) => x.maker))].sort();37 const memSeries: Series[] = makers.map((m, i) => ({ name: m, color: COLORS[i % COLORS.length], points: dated.filter((x) => x.maker === m && x.mem).sort((a, b) => (a.at as number) - (b.at as number)).map((x) => ({ x: new Date(x.at as number), y: (x.mem as [number, number])[1] })) })).filter((s) => s.points.length > 0);38 const bwSeries: Series[] = makers.map((m, i) => ({ name: m, color: COLORS[i % COLORS.length], points: dated.filter((x) => x.maker === m && x.bw !== null).sort((a, b) => (a.at as number) - (b.at as number)).map((x) => ({ x: new Date(x.at as number), y: x.bw as number })) })).filter((s) => s.points.length > 0);39 const undated = all.length - dated.length;4041 // connect to fit estimates: models estimated to fit each dated device at 4-bit / 8K (largest configuration)42 const fits = await Promise.all(dated.slice(0, 40).map(async (x) => ({ slug: x.e.slug, fit: await safe(intel.hardwareSlugFit(x.e.slug, { limit: 1 })) })));43 const fitBy = new Map(fits.map((f) => [f.slug, f.fit]));44 const assumptions = fits.find((f) => f.fit)?.fit?.assumptions ?? [];45 const byMaker = makers.map((m) => ({ maker: m, rows: dated.filter((x) => x.maker === m).sort((a, b) => (b.at as number) - (a.at as number)) }));46 const label = (e: EntitySummary) => `${e.name}`;4748 return (49 <Container wide>50 <PageHeader eyebrow={<><Link href={routes.hardware()} className="hover:text-ink">Hardware</Link> <span aria-hidden>/</span> Frontier</>} title="Accelerators by generation" lede="Memory and bandwidth of every dated device the atlas knows, plotted by release and manufacturer (largest configuration when several exist). The right-hand columns connect each device to the models it is estimated to run." aside={<p className="tnum text-sm text-ink-3">{fmtInt(dated.length)} dated devices · {fmtInt(undated)} without a release date</p>} />5152 <Section eyebrow="Memory per device" title="Device memory by release date" lede="Largest published memory configuration, GB. Steps mark a new generation; hover for the exact device." hairline={false}>53 {memSeries.reduce((n, s) => n + s.points.length, 0) < 2 ? <EmptyState title="Not enough dated devices to draw" /> : <HardwareStepChart series={memSeries} unit="GB" yLabel="Memory (GB)" />}54 </Section>55 <Section eyebrow="Bandwidth per device" title="Memory bandwidth by release date" lede="GB/s as published — the figure that bounds token generation speed for memory-bound inference.">56 {bwSeries.reduce((n, s) => n + s.points.length, 0) < 2 ? <EmptyState title="Not enough dated devices to draw" /> : <HardwareStepChart series={bwSeries} unit="GB/s" yLabel="Bandwidth (GB/s)" />}57 </Section>5859 <Section eyebrow="By manufacturer" title="Every dated device, newest first" lede={<span className="inline-flex flex-wrap items-center gap-2">Fit columns are estimates <Estimated /> — models with a known parameter count estimated to fit at 4-bit, 8K context, batch 1, largest configuration.</span>}>60 <EstimateBanner assumptions={assumptions} className="mb-4" />61 {byMaker.map((g) => (62 <div key={g.maker} className="mb-8">63 <h3 className="mb-2 flex items-baseline gap-2 text-[15px] font-semibold">64 {g.maker} <span className="tnum text-xs font-normal text-ink-3">{fmtInt(g.rows.length)} devices</span>65 </h3>66 <DataTable compact caption={`${g.maker} devices`}>67 <thead>68 <tr>69 <Th>Device</Th>70 <Th>Kind</Th>71 <Th>Release</Th>72 <Th num>Memory</Th>73 <Th num>Bandwidth</Th>74 <Th num>Models that fit @4bit</Th>75 <Th>Run locally</Th>76 </tr>77 </thead>78 <tbody>79 {g.rows.length === 0 && <EmptyRow cols={7} />}80 {g.rows.map(({ e, mem, bw }) => {81 const f = fitBy.get(e.slug);82 const rel = releaseOf(e);83 return (84 <tr key={e.id}>85 <Td primary><EntityLink e={e}>{label(e)}</EntityLink></Td>86 <Td label="Kind">{typeof e.attributes?.kind === 'string' ? <Chip>{HW_KIND_LABELS[e.attributes.kind as string] ?? (e.attributes.kind as string)}</Chip> : '—'}</Td>87 <Td label="Release" className="tnum text-ink-2 whitespace-nowrap">{rel ? fmtDate(rel) : '—'}</Td>88 <Td num label="Memory" className="tnum">{mem ? fmtMemory(e.attributes?.memory_gb) : '—'}</Td>89 <Td num label="Bandwidth" className="tnum text-ink-2">{bw === null ? '—' : `${fmtInt(bw)} GB/s`}</Td>90 <Td num label="Fit @4bit" className="tnum">91 {f ? (92 <>93 <span className="font-medium text-positive">{fmtInt(f.counts.fits)}</span> <span className="text-ink-3">/ {fmtInt(f.counts.evaluated)}</span>94 </>95 ) : (96 <span className="text-ink-3">—</span>97 )}98 </Td>99 <Td label="Run locally">100 <Link href={`${routes.runLocally()}?hardware=${encodeURIComponent(e.slug)}`} className="link text-xs whitespace-nowrap">101 What can it run? →102 </Link>103 </Td>104 </tr>105 );106 })}107 </tbody>108 </DataTable>109 </div>110 ))}111 {undated > 0 && (112 <Note>113 {fmtInt(undated)} device{undated === 1 ? '' : 's'} without a sourced release date are not plotted (they remain in the <Link href={routes.hardware()} className="link">listing</Link>).114 </Note>115 )}116 <Methodology text="Release dates and specifications as published by the manufacturer (year- or month-precision dates are plotted mid-period). Fit counts come from GET /hardware/{slug}/fit with default inputs and are estimates." />117 </Section>118 </Container>119 );120}121