mirror of
https://github.com/hanzo-apps/hanzo.ai.git
synced 2026-10-29 07:20:43 +00:00
zeekay
0f5536b707
Every word the landing, the header menus, the phone sheet, the footer,
the help corner and the way in (sign-in, sign-up, the reset, the
invitation, the callback, onboarding, the 404) write goes through
@hanzo/i18n's t(): one sentence is one message, its figures, names and
links arguments; copy written as data is phrase('…') where written and
t(label) where drawn. Plans, the chart, the API states and the lines
lib/kai and lib/enso build for the landing do the same.
Right to left: <html lang dir> is set before the first paint (the
package's bootScript first in the head); a figure, clock, range or
price outside a sentence is isolated; sides are logical gui props, the
layout's [data-join] corners logical, a bar grows from the start;
arrows along the line mirror (Onward for "words ->" links). The repo
dates read in the reader's language.
Gates select by slot, never by an English label (rtl, help). New gate
translated.spec.ts: in Arabic the landing at 1440 and 390, every menu
open, the phone sheet, sign-in, sign-up and the app signed in hold no
authored English, nothing scrolls sideways, every range is isolated;
French the same for English's commonest words. What another package
draws with no words prop is listed by name (@hanzo/ui's Footer label,
@hanzo/build's composer row and suggestions).
@hanzo/i18n 0.5.3 (the catalogs: 1,443 keys, every offered locale
complete), @hanzo/app 0.2.1 (the app's words). The link gate imports
the terms versions from @hanzo/app, the one SDK main now resolves.
73 lines
3.3 KiB
TypeScript
73 lines
3.3 KiB
TypeScript
'use client'
|
|
|
|
import { Cpu, Gauge } from 'lucide-react'
|
|
import { useI18n } from '@hanzo/i18n/react'
|
|
import { Text, View, YStack } from '@hanzo/ui'
|
|
import { More } from '@hanzo/ui/marketing'
|
|
import { DESKS, MEASURED } from '@/components/zen/desks'
|
|
import { lead } from '@/lib/home'
|
|
import { date } from '@/lib/tally'
|
|
import { Lane } from './lane'
|
|
import { Section, Win, useSeen } from './chrome'
|
|
import { Onward } from './label'
|
|
|
|
/**
|
|
* Speed is Zen 6's, on the three machines Hanzo runs (components/zen/desks),
|
|
* measured by Hanzo: prompt prefill beside decode, tokens a second, each
|
|
* figure's bars drawn to its own scale across the machines. Kai's clock is a
|
|
* section of its own (./Flash), so no model's figure stands in another's
|
|
* section. A machine is named as its maker names it; a build is authored copy
|
|
* (`phrase` in components/zen/desks), and a figure keeps its own order on a
|
|
* right-to-left page (./lane).
|
|
*/
|
|
|
|
/** A desk's figure as a sentence quotes it, the range or the mark it was read at. */
|
|
const says = (shown: string) => `${shown} tok/s`
|
|
/** How long a bar takes to grow: a throughput is not a time, so every bar takes the same beat. */
|
|
const GROW = 900
|
|
|
|
function Figure({ title, icon, slot, pick, play }: { title: string; icon: React.ReactNode; slot: string; pick: (d: (typeof DESKS)[number]) => string; play: boolean }) {
|
|
const { t } = useI18n()
|
|
const top = Math.max(...DESKS.map((d) => lead(pick(d))))
|
|
return (
|
|
<Win title={title} icon={icon} aside={t('tokens a second')} slot={slot}>
|
|
<YStack px={16} py={10}>
|
|
{DESKS.map((d) => (
|
|
<Lane key={d.machine} label={d.machine} value={lead(pick(d))} top={top} play={play} ours text={says(pick(d))} duration={GROW} />
|
|
))}
|
|
</YStack>
|
|
</Win>
|
|
)
|
|
}
|
|
|
|
export default function Speed() {
|
|
const { t, locale } = useI18n()
|
|
const [ref, seen] = useSeen(0.25)
|
|
const zen = DESKS[0]
|
|
if (!zen) return null
|
|
return (
|
|
<Section
|
|
id="speed"
|
|
label="Clock.Speed"
|
|
title={t('Zen 6, on our own hardware.')}
|
|
lede={t('Prompt prefill beside decode on the three machines Hanzo runs, tokens a second, measured by Hanzo. Each figure is drawn to its own scale.')}
|
|
>
|
|
<View ref={ref} display="grid" gridTemplateColumns="minmax(0, 1fr)" gap={16} $lg={{ gridTemplateColumns: 'repeat(2, minmax(0, 1fr))' }}>
|
|
<Figure title="Zen6.Prefill" icon={<Gauge size={14} color="var(--background)" strokeWidth={2.2} />} slot="prefill" pick={(d) => d.prefill} play={seen} />
|
|
<Figure title="Zen6.Decode" icon={<Cpu size={14} color="var(--background)" strokeWidth={2.2} />} slot="decode" pick={(d) => d.decode} play={seen} />
|
|
</View>
|
|
<YStack gap={6}>
|
|
<Text fontSize="$3" lineHeight="$4" color="var(--foreground)" data-figure="prefill">
|
|
{t('Zen 6 reads {prefill} prompt tokens a second on {machine}, {build}, and decodes {decode}.', { prefill: zen.prefill, machine: zen.machine, build: t(zen.build), decode: zen.decode })}
|
|
</Text>
|
|
<Text fontSize="$1" lineHeight="$1" color="var(--muted-foreground)">
|
|
{t('Measured by Hanzo on {date}, each machine on its own build of the same generation.', { date: date(MEASURED, locale) })}
|
|
</Text>
|
|
</YStack>
|
|
<More href="/benchmarks/zen-6">
|
|
<Onward>{t('Zen 6 on three machines')}</Onward>
|
|
</More>
|
|
</Section>
|
|
)
|
|
}
|