# Model Metadata Card

Model Metadata Card [#model-metadata-card]

The **Model Metadata Card** (`GGUFMetadataCard`, with a `ModelMetadataCard` alias) is a structured key-value grid of parsed model metadata — architecture, parameter count, quantization, context length, embedding dimension, vocab size, head/layer counts, file size, and optional author/license — driven by a field-descriptor array so absent fields are skipped cleanly. Feed it `parseGGUFMetadata()` output from `@localmode/wllama` (or any object matching the `ModelMetadata` shape); the display is a generic metadata grid.

Preview [#preview]

```tsx
'use client';

import { GGUFMetadataCard } from '@/components/model-metadata-card';

/**
 * Demo for GGUFMetadataCard. Renders a representative parsed GGUF metadata set;
 * absent optional fields are omitted from the grid.
 */
export default function ModelMetadataCardDemo() {
  return (
    <GGUFMetadataCard
      metadata={{
        architecture: 'llama',
        parameters: 1235814400,
        quantization: 'Q4_K_M',
        contextLength: 8192,
        embeddingDimension: 2048,
        vocabSize: 128256,
        headCount: 32,
        layerCount: 16,
        fileSizeBytes: 1_288_490_188,
        license: 'llama3.2',
      }}
    />
  );
}
```

Installation [#installation]

```bash
npx shadcn@latest add @localmode/ui/local-first/model-metadata-card
```

Data source & dependencies [#data-source--dependencies]

**Data source:** renders any object matching the `ModelMetadata` shape you pass — works with any backend. Recommended producer: `parseGGUFMetadata()` from `@localmode/wllama` (on-device, optional).

* `lucide-react` — icons
* `clsx` + `tailwind-merge` — via the shared `cn()` util (installed automatically as a registry dependency)

Files installed [#files-installed]

* `model-metadata-card.tsx` — `GGUFMetadataCard` (alias `ModelMetadataCard`)
* `lib/utils.ts` — the `cn()` helper (if not already present)

Props [#props]

**GGUFMetadataCard**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `metadata` | `object` | — | **Required.** Parsed metadata fields. Absent optional fields are omitted from the grid. |
| `title` | `string` | `"Model metadata"` | Optional title. |

**ModelMetadata**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `architecture` | `string` | — | Architecture (e.g. "llama"). |
| `parameters` | `number \| string` | — | Parameter count (raw number or label). |
| `quantization` | `string` | — | Quantization scheme (e.g. "Q4_K_M"). |
| `contextLength` | `number` | — | Context length in tokens. |
| `embeddingDimension` | `number` | — | Embedding dimension. |
| `vocabSize` | `number` | — | Vocabulary size. |
| `headCount` | `number` | — | Number of attention heads. |
| `layerCount` | `number` | — | Number of transformer layers / blocks. |
| `fileSizeBytes` | `number` | — | File size in bytes. |
| `author` | `string` | — | Optional author / organization. |
| `license` | `string` | — | Optional license identifier. |

Examples [#examples]

Parsed GGUF metadata [#parsed-gguf-metadata]

```tsx
import { GGUFMetadataCard } from '@/components/model-metadata-card';
import { parseGGUFMetadata } from '@localmode/wllama';

const metadata = await parseGGUFMetadata(modelUrl);

<GGUFMetadataCard metadata={metadata} />
```

Customization [#customization]

Field formatting (bytes, large numbers) lives in the `FIELDS` descriptor array — add fields or change labels there. Parameters/file size are auto-formatted. Styled entirely with shadcn/ui CSS-variable utilities so it inherits your theme — because you own the copied file, every class and threshold is yours to change.