import { useEffect, useState } from 'react'; import { useDiveState, useSQLQuery } from '@motherduck/react-sql-query'; import { Bar, BarChart, Cell, LabelList, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts'; // Production copy: reads the public share and uses stored image classifications. // Live image questions are omitted until production supports Jev image inputs. export const REQUIRED_DATABASES = [ { type: 'share', path: 'md:_share/met_jev_public/b326c578-763b-419a-b4e9-94cd4591983a', alias: 'met_jev_gallery' }, ]; const N = (v: unknown): number => (v == null ? 0 : Number(v)); const pct = (num: number, den: number) => (den > 0 ? Math.round((100 * num) / den) : 0); // This snapshot is immutable. Keep image URLs across tab remounts, outside URL state. const IMAGE_SOURCE_CACHE = new Map(); const IMAGE_CACHE_MAX_BYTES = 64 * 1024 * 1024; const IMAGE_CACHE_MAX_ENTRIES = 1024; let imageCacheBytes = 0; let thumbnailCatalogLoaded = false; type ImageVariant = 'thumbnail' | 'full'; function cacheImageRows(rows: readonly any[], activeIds: readonly number[], variant: ImageVariant = 'full') { let changed = false; const active = new Set(activeIds.map((id) => `${variant}:${id}`)); for (const row of rows) { const id = `${variant}:${Number(row.object_id)}`; if (IMAGE_SOURCE_CACHE.has(id)) continue; const value = row.image; const bytes = value instanceof Uint8Array ? value : value?.bytes instanceof Uint8Array ? value.bytes : value instanceof ArrayBuffer ? new Uint8Array(value) : null; if (!bytes?.byteLength) throw new Error('MotherDuck returned an unsupported or empty image BLOB.'); const src = URL.createObjectURL(new Blob([bytes], { type: 'image/jpeg' })); IMAGE_SOURCE_CACHE.set(id, { src, bytes: bytes.byteLength }); imageCacheBytes += bytes.byteLength; changed = true; } // Keep the visible images; evict older, inactive images and release their URLs. for (const [id, entry] of IMAGE_SOURCE_CACHE) { if (imageCacheBytes <= IMAGE_CACHE_MAX_BYTES && IMAGE_SOURCE_CACHE.size <= IMAGE_CACHE_MAX_ENTRIES) break; if (active.has(id)) continue; IMAGE_SOURCE_CACHE.delete(id); imageCacheBytes -= entry.bytes; URL.revokeObjectURL(entry.src); } return changed; } function useImageSources(objectIds: readonly number[], ready: boolean, variant: ImageVariant = 'full') { const [, refresh] = useState(0); const [conversionError, setConversionError] = useState(null); const ids = [...new Set(objectIds.filter((id) => Number.isSafeInteger(id) && id > 0))].sort((a, b) => a - b); const idsKey = ids.join(','); const keyFor = (id: number) => `${variant}:${id}`; const missing = ready ? ids.filter((id) => !IMAGE_SOURCE_CACHE.has(keyFor(id))) : []; const table = variant === 'thumbnail' ? 'dive_thumbnails' : 'images'; const query = useSQLQuery( `SELECT object_id, image FROM "met_jev_gallery"."main"."${table}" WHERE object_id IN (${missing.join(',') || 'NULL'})`, { enabled: ready && missing.length > 0 }, ); useEffect(() => { for (const id of ids) { const key = keyFor(id); const entry = IMAGE_SOURCE_CACHE.get(key); if (entry) { IMAGE_SOURCE_CACHE.delete(key); IMAGE_SOURCE_CACHE.set(key, entry); } } setConversionError(null); }, [idsKey, variant]); useEffect(() => { if (!query.isSuccess || !Array.isArray(query.data)) return; try { if (cacheImageRows(query.data, ids, variant)) refresh((v) => v + 1); setConversionError(null); } catch (error) { setConversionError(String(error)); } }, [query.data, query.isSuccess]); return { sources: new Map(ids.map((id) => [String(id), IMAGE_SOURCE_CACHE.get(keyFor(id))?.src])), isLoading: ready && missing.length > 0 && !query.isError && !conversionError, isError: ready && missing.length > 0 && (query.isError || conversionError != null), error: conversionError ?? query.error, }; } function useThumbnailCatalog() { const [ready, setReady] = useState(thumbnailCatalogLoaded); const [conversionError, setConversionError] = useState(null); const query = useSQLQuery( 'SELECT object_id, image FROM "met_jev_gallery"."main"."dive_thumbnails" ORDER BY object_id', { enabled: !ready }, ); useEffect(() => { if (!query.isSuccess || !Array.isArray(query.data) || ready) return; try { if (query.data.length === 0) throw new Error('No artwork previews were returned.'); cacheImageRows(query.data, [], 'thumbnail'); thumbnailCatalogLoaded = true; setReady(true); setConversionError(null); } catch (error) { setConversionError(String(error)); } }, [query.data, query.isSuccess, ready]); return { ready, isLoading: !ready && !query.isError && !conversionError, error: conversionError ?? query.error }; } const PAPER = '#f6f1e6'; const PAPER_DEEP = '#efe7d6'; const INK = '#1b1a17'; const MUTED = '#6d655a'; const RULE = '#d6c9b1'; const OXBLOOD = '#8c2f1b'; const SEPIA = '#b9a17f'; const GOLD = '#a8834a'; const HEAD = '"Didot", "Bodoni 72", "Bodoni MT", "Playfair Display", "Times New Roman", Georgia, serif'; const BODY = 'Georgia, "Iowan Old Style", "Times New Roman", serif'; const SANS = '"Franklin Gothic Medium", "Helvetica Neue", Helvetica, Arial, sans-serif'; const MONO = 'Menlo, Consolas, "Courier New", monospace'; const BINS = [1400, 1450, 1500, 1550, 1600, 1650, 1700, 1750, 1800, 1850, 1900]; const ERAS = [ { label: 'Renaissance', bins: 4 }, { label: 'Baroque', bins: 3 }, { label: 'Enlightenment & Revolution', bins: 2 }, { label: 'The Modern Age', bins: 2 }, ]; const binLabel = (b: number) => `${b}-${String(b + 49).slice(2)}`; type Key = 'god' | 'smile' | 'portrait' | 'dog' | 'skull'; type Question = { tab: string; title: string; yesLabel: string; noLabel: string; base: string; yes: string; no: string; unit: string; phrase: string; order: string; eventsLens: string | null; jev: string; note: (r: any) => string; }; const QUESTIONS: Record = { god: { tab: 'God', title: 'When did art stop being about God?', yesLabel: 'Saints, gods and myths', noLabel: 'Everything else', base: 'true', yes: "w.subject = 'religious_or_mythological_scene'", no: "w.subject <> 'religious_or_mythological_scene'", unit: 'works', phrase: 'were religious or mythological scenes', order: 'w.subject_conf DESC', eventsLens: 'god', jev: 'What is the main subject of `art`?', note: () => '', }, smile: { tab: 'Smiles', title: 'When did art start smiling?', yesLabel: 'Smiling', noLabel: 'Straight face', base: "w.smile <> 'no_clear_face'", yes: "w.smile IN ('closed_mouth_smile', 'smile_showing_teeth', 'laughing')", no: "w.smile = 'neutral_or_serious'", unit: 'faces', phrase: 'were smiling', order: "CASE WHEN w.smile IN ('smile_showing_teeth', 'laughing') THEN 0 ELSE 1 END, w.smile_conf DESC", eventsLens: 'smiles', jev: 'If a human face is clearly visible in `art`, what is the expression of the most prominent face?', note: (r) => String(r.smile ?? '').replace(/_/g, ' '), }, portrait: { tab: 'Portraits', title: 'When did everyone get a portrait?', yesLabel: 'Portrait of one person', noLabel: 'Everything else', base: 'true', yes: "w.subject = 'portrait_of_one_person'", no: "w.subject <> 'portrait_of_one_person'", unit: 'works', phrase: 'were portraits of one person', order: 'w.subject_conf DESC', eventsLens: 'portrait', jev: 'What is the main subject of `art`?', note: () => '', }, dog: { tab: 'Dogs', title: 'When did dogs take over art?', yesLabel: 'Dog', noLabel: 'No dog', base: 'true', yes: 'w.dog_p >= 0.8', no: 'w.dog_p < 0.2', unit: 'works', phrase: 'had a dog in them', order: 'w.dog_box_conf DESC, w.dog_p DESC', eventsLens: null, jev: 'Is there a dog anywhere in `art`? What is it doing? Draw a box around it.', note: (r) => (r.dog_role && r.dog_role !== 'no_dog' ? String(r.dog_role).replace(/_/g, ' ') : ''), }, skull: { tab: 'Skulls', title: 'When was death everywhere?', yesLabel: 'Skull or skeleton', noLabel: 'No skull', base: 'true', yes: 'w.skull_p >= 0.8', no: 'w.skull_p < 0.2', unit: 'works', phrase: 'showed a skull or skeleton', order: 'w.skull_p DESC', eventsLens: 'skulls', jev: 'Does `art` show a human skull or skeleton?', note: () => '', }, }; const TABS: { key: Key; label: string }[] = [ { key: 'god', label: 'God' }, { key: 'smile', label: 'Smiles' }, { key: 'portrait', label: 'Portraits' }, { key: 'dog', label: 'Dogs' }, { key: 'skull', label: 'Skulls' }, ]; function Placeholder({ height }: { height: number }) { return

; } function Card({ r, note, box, onOpen }: { r: any; note?: string; box?: boolean; onOpen?: (r: any) => void }) { const showBox = box && r.dog_box_top != null && N(r.dog_box_conf) >= 0.5; return ( ); } function Lightbox({ r, onClose }: { r: any; onClose: () => void }) { const fullImage = useImageSources([N(r.object_id)], true, 'full'); const imageSrc = fullImage.sources.get(String(Number(r.object_id))) ?? r.src; useEffect(() => { const onKey = (e: KeyboardEvent) => { if (e.key === 'Escape') onClose(); }; window.addEventListener('keydown', onKey); return () => window.removeEventListener('keydown', onKey); }, [onClose]); const pretty = (s: unknown) => String(s ?? '').replace(/_/g, ' '); const facts: string[] = []; if (r.subject) facts.push(`Subject: ${pretty(r.subject)}`); if (r.smile && r.smile !== 'no_clear_face') facts.push(`Face: ${pretty(r.smile)}`); if (r.dog_p != null && N(r.dog_p) >= 0.5) facts.push(`Dog: ${Math.round(100 * N(r.dog_p))}%${r.dog_role && r.dog_role !== 'no_dog' ? `, ${pretty(r.dog_role)}` : ''}`); if (r.skull_p != null && N(r.skull_p) >= 0.5) facts.push(`Skull: ${Math.round(100 * N(r.skull_p))}%`); if (r.p != null) facts.push(`Your question: ${Math.round(100 * N(r.p))}% yes`); return (

e.stopPropagation()} style={{ background: PAPER, maxWidth: '92vw', maxHeight: '92vh', overflow: 'auto', padding: 16, boxShadow: '0 12px 40px rgba(0,0,0,0.45)', cursor: 'default' }} >

{imageSrc ? (

) : (

)} {r.showBox ? (

) : null}

{fullImage.isLoading ?

Loading full image…

: null} {fullImage.isError ?

{String(fullImage.error)}

: null}

{String(r.title ?? 'Untitled')}

{[r.artist, r.object_date].filter(Boolean).map(String).join(' · ')}

{facts.length ? (

Jev says: {facts.join(' · ')}

) : null}

{r.met_url ? ( View on metmuseum.org ) : null}

); } function TwoSided({ leftLabel, rightLabel, leftCount, rightCount, left, right, loading, cols = 4, }: { leftLabel: string; rightLabel: string; leftCount: string; rightCount: string; left: any; right: any; loading: boolean; cols?: number; }) { const side = (label: string, count: string, content: any, accent: string) => (

{label} {count}

{loading ? : (

{content}

)}

); return (

{side(leftLabel, leftCount, left, OXBLOOD)}

{side(rightLabel, rightCount, right, INK)}

); } function Timeline({ rows, bin, setBin, events, unit }: { rows: any[]; bin: number | null; setBin: (b: number | null) => void; events: any[]; unit: string }) { const data = BINS.map((b) => { const r = rows.find((x) => N(x.bin) === b); const base = N(r?.base_n); const hits = N(r?.hit_n); return { bin: b, base, hits, share: base > 0 ? (100 * hits) / base : 0 }; }); const maxShare = Math.max(5, ...data.map((d) => d.share)); return (

{ERAS.map((e, i) => (

{e.label}

))}

[`${item.payload.hits} of ${item.payload.base} ${unit}`, `${Math.round(item.payload.share)}%`]} labelFormatter={(b: any) => binLabel(Number(b))} /> { const b = N(d?.payload?.bin ?? d?.bin); setBin(bin === b ? null : b); }} > {data.map((d) => ( ))} `${Math.round(Number(v))}%`} fill={INK} fontSize={13} fontFamily={HEAD} />

{data.map((d) => ( ))}

{BINS.map((b) => { const ev = events.filter((e) => N(e.year) >= b && N(e.year) < b + 50); return (

{ev.map((e) => (

{N(e.year)}: {String(e.label)}

))}

); })}

); } function QuestionView({ k, thumbnailsReady }: { k: Key; thumbnailsReady: boolean }) { const Q = QUESTIONS[k]; const [bin, setBin] = useDiveState(`bin_${k}`, null); const [showSql, setShowSql] = useState(false); const [zoom, setZoom] = useState(null); const binClause = bin == null ? '' : `AND w.period >= ${bin} AND w.period < ${bin + 50}`; const scope = bin == null ? '1400 to 1950' : binLabel(bin); const seriesSql = `SELECT (floor(w.period / 50) * 50)::INT AS bin, count(*) FILTER (WHERE ${Q.base}) AS base_n, count(*) FILTER (WHERE ${Q.base} AND ${Q.yes}) AS hit_n FROM "met_jev_gallery"."main"."works" w -- Jev's answers joined to the Met catalog WHERE w.in_timeline AND NOT coalesce(w.rejected, true) GROUP BY 1`; const series = useSQLQuery(` WITH agg AS (${seriesSql}) SELECT b.range::INT AS bin, coalesce(agg.base_n, 0) AS base_n, coalesce(agg.hit_n, 0) AS hit_n FROM range(1400, 1950, 50) b LEFT JOIN agg ON agg.bin = b.range ORDER BY 1 `); const events = useSQLQuery( `SELECT year, label FROM "met_jev_gallery"."main"."timeline_events" WHERE lens = '${Q.eventsLens ?? ''}' ORDER BY year`, { enabled: Q.eventsLens != null }, ); const cardCols = `w.object_id, w.title, w.object_date, w.met_url, w.artist, w.dog_p, w.skull_p, w.subject, w.smile, w.dog_role, w.dog_box_conf, w.dog_box_top, w.dog_box_bottom, w.dog_box_left, w.dog_box_right`; const yesCards = useSQLQuery(` SELECT ${cardCols} FROM "met_jev_gallery"."main"."works" w WHERE NOT coalesce(w.rejected, true) AND w.in_timeline AND ${Q.base} AND ${Q.yes} ${binClause} ORDER BY ${Q.order}, w.object_id LIMIT 8 `); const noCards = useSQLQuery(` SELECT ${cardCols} FROM "met_jev_gallery"."main"."works" w WHERE NOT coalesce(w.rejected, true) AND w.in_timeline AND ${Q.base} AND ${Q.no} ${binClause} ORDER BY hash(w.object_id), w.object_id LIMIT 8 `); const counts = useSQLQuery(` SELECT count(*) FILTER (WHERE ${Q.yes}) AS yes_n, count(*) FILTER (WHERE ${Q.no}) AS no_n FROM "met_jev_gallery"."main"."works" w WHERE NOT coalesce(w.rejected, true) AND w.in_timeline AND ${Q.base} ${binClause} `); const rows = Array.isArray(series.data) ? series.data : []; const evRows = Array.isArray(events.data) ? events.data : []; const shareOf = (pred: (b: number) => boolean) => { const sel = rows.filter((r) => pred(N(r.bin))); return pct(sel.reduce((a, r) => a + N(r.hit_n), 0), sel.reduce((a, r) => a + N(r.base_n), 0)); }; const before = shareOf((b) => b < 1600); const after = shareOf((b) => b >= 1850); const peak = rows .map((r) => ({ bin: N(r.bin), share: pct(N(r.hit_n), N(r.base_n)), base: N(r.base_n) })) .filter((r) => r.base >= 15) .reduce((a: any, r) => (a == null || r.share > a.share ? r : a), null); const c = Array.isArray(counts.data) ? counts.data[0] : undefined; const yesRaw = Array.isArray(yesCards.data) ? yesCards.data : []; const noRaw = Array.isArray(noCards.data) ? noCards.data : []; const pics = useImageSources( [...yesRaw, ...noRaw].map((r) => Number(r.object_id)), thumbnailsReady && yesCards.isSuccess && noCards.isSuccess && !yesCards.isLoading && !noCards.isLoading, 'thumbnail', ); const withSrc = (r: any) => ({ ...r, src: pics.sources.get(String(Number(r.object_id))) }); const yesRows = yesRaw.map(withSrc); const noRows = noRaw.map(withSrc); return (

{Q.title}

{[ { v: before, l: `before 1600` }, { v: peak ? peak.share : 0, l: peak ? `peak, ${binLabel(peak.bin)}` : 'peak' }, { v: after, l: `after 1850` }, ].map((s, i) => (

{series.isLoading ? : (

{s.v}%

)}

of {Q.unit} {Q.phrase}, {s.l}

))}

Share per half-century. Click a period to fill the cards below. {bin != null ? ( ) : null}

{series.isLoading ? : series.isError ? (

{String(series.error)}

) : ( )}

{pics.isLoading ?

Loading artwork images…

: null} {[yesCards, noCards, counts, pics].some((q) => q.isError) ? (

Could not load the artwork: {String([yesCards, noCards, counts, pics].find((q) => q.isError)?.error)}

) : null} )} right={noRows.map((r) => )} />

How we know Jev looked at each image once and answered "{Q.jev}" MotherDuck counts those stored answers by half-century in SQL, joined to the Met's catalog. {showSql ? (

{seriesSql}

) : null}

{zoom ? setZoom(null)} /> : null}

); } export default function MetMeasured() { const [tab, setTab] = useDiveState('question', 'god'); const thumbnails = useThumbnailCatalog(); const stats = useSQLQuery(` SELECT (SELECT count(*) FROM "met_jev_gallery"."main"."works") AS works, (SELECT count(*) FROM "met_jev_gallery"."main"."features" WHERE NOT rejected) AS answered, (SELECT count(*) FROM "met_jev_gallery"."main"."objects") AS catalog_rows, (SELECT sum(rows) / nullif(sum(seconds), 0) FROM "met_jev_gallery"."main"."bench_log" WHERE step = 'jev_call') AS jev_rate `); const s = Array.isArray(stats.data) ? stats.data[0] : undefined; const statItems = [ { v: N(s?.works).toLocaleString(), l: 'public-domain paintings, prints, drawings and photos' }, { v: '14', l: 'questions asked of every image, in one Jev call' }, { v: (N(s?.answered) * 14).toLocaleString(), l: 'answers from Jev' }, { v: N(s?.jev_rate) > 0 ? `~${Math.max(1, Math.round(N(s?.answered) / N(s?.jev_rate) / 60))} min` : '-', l: N(s?.jev_rate) > 0 ? `to classify every image (${Math.round(N(s?.jev_rate))} images/s on MotherDuck)` : 'to classify every image', }, { v: N(s?.catalog_rows).toLocaleString(), l: 'catalog rows joined in SQL' }, ]; return (

The Met, Measured · MotherDuck × Jev October 15, 2026

Five Centuries of Art, One GROUP BY

An AI model looked at every public-domain painting, print, drawing and photograph at the Metropolitan Museum of Art, once. Every question below is answered with SQL over what it saw.

{stats.isError ?

{String(stats.error)}

: null}

{statItems.map((it, i) => (

{stats.isLoading ? :

{it.v}

}

{it.l}

))}

{thumbnails.isLoading ?

Loading artwork previews once for all periods…

: null} {thumbnails.error ?

{String(thumbnails.error)}

: null}

Images and catalog: The Met Open Access (CC0). Vision: Jev, through prompt_jev on MotherDuck. Shares use the 58,000 works the Met dates to within 25 years, between 1400 and 1950.

); }

The Met, Measured: Five Centuries of Art, One GROUP BY

Comments