Function ModelPage

packages/web/src/render.tsx:814–867

(props: { model: ModelEntry })

}

function ModelPage(props: { model: ModelEntry }) {
  const { model } = props;
  const metadata = model.metadata;

  return (
    <Fragment>
      <DetailHeader
        eyebrow={
          <Fragment>
            <a href="/models">Models</a>
            <span>/</span>
            <a href={labHref(model.labId)}>{model.labName}</a>
          </Fragment>
        }
        title={metadata.name}
        description={metadata.description}
        code={model.id}
        copyValue={model.id}
      />
      <Facts
        items={[
          ["Lab", <LabLink labId={model.labId} labName={model.labName} />],
          ["Family", metadata.family ?? "-"],
          ["Providers", model.providers.length],
          ["Context", formatNumber(metadata.limit?.context)],
          ["Output limit", formatNumber(metadata.limit?.output)],
          ["Knowledge", knowledgeText(metadata.knowledge)],
          ["Release", metadata.release_date ?? "-"],
          ["Updated", metadata.last_updated ?? "-"],
          ["Weights", <WeightsValue metadata={metadata} />],
          ["Input", <FactModalities modalities={metadata.modalities?.input} />],
          ["Output types", <FactModalities modalities={metadata.modalities?.output} />],
          [
            "Capabilities",
            capabilitySummary([
              ["tools", metadata.tool_call],
              ["reasoning", metadata.reasoning],
              ["structured", metadata.structured_output],
              ["temperature", metadata.temperature],
            ]),
          ],
        ]}
      />
      <TableSection
        id="providers"
        title="Providers"
        count={model.providers.length}
        columns={10}
      >
        <ProviderModelsTable models={model.providers} mode="model" />
      </TableSection>
    </Fragment>
  );
}

function ProviderPage(props: {
  providerId: string;