Hugging Face's logo

SaylorTwift
/
openhands

agent
coding-agent
cli
llm
tool-use
Model card Files
xet
 Community
openhands
File size: 1,473 Bytes
3201ca6
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
import { useTranslation } from "react-i18next";
import { I18nKey } from "#/i18n/declaration";
import { MetricRow } from "./metric-row";

interface UsageSectionProps {
  usage: {
    prompt_tokens: number;
    completion_tokens: number;
    cache_read_tokens: number;
    cache_write_tokens: number;
  };
}

export function UsageSection({ usage }: UsageSectionProps) {
  const { t } = useTranslation("openhands");

  return (
    <>
      <MetricRow
        label={t(I18nKey.CONVERSATION$INPUT)}
        value={usage.prompt_tokens.toLocaleString()}
      />

      <div className="grid grid-cols-2 gap-2 pl-4 text-sm">
        <span className="text-[var(--oh-muted)]">
          {t(I18nKey.CONVERSATION$CACHE_HIT)}
        </span>
        <span className="text-right">
          {usage.cache_read_tokens.toLocaleString()}
        </span>
        <span className="text-[var(--oh-muted)]">
          {t(I18nKey.CONVERSATION$CACHE_WRITE)}
        </span>
        <span className="text-right">
          {usage.cache_write_tokens.toLocaleString()}
        </span>
      </div>

      <MetricRow
        label={t(I18nKey.CONVERSATION$OUTPUT)}
        value={usage.completion_tokens.toLocaleString()}
      />

      <MetricRow
        label={t(I18nKey.CONVERSATION$TOTAL)}
        value={(usage.prompt_tokens + usage.completion_tokens).toLocaleString()}
        labelClassName="font-semibold"
        valueClassName="font-bold"
        showBorder={false}
      />
    </>
  );
}