Hugging Face's logo

Spaces:
Shyamnath
/
inferencing-llm
Sleeping

App Files Community
inferencing-llm
File size: 2,241 Bytes 
c40c75a
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
 
import React from "react";
import { Tooltip } from "antd";
import { 
  ClockCircleOutlined, 
  NumberOutlined, 
  ImportOutlined, 
  ExportOutlined,
  ThunderboltOutlined,
  BulbOutlined
} from "@ant-design/icons";

export interface TokenUsage {
  completionTokens?: number;
  promptTokens?: number;
  totalTokens?: number;
  reasoningTokens?: number;
}

interface ResponseMetricsProps {
  timeToFirstToken?: number; // in milliseconds
  usage?: TokenUsage;
}

const ResponseMetrics: React.FC<ResponseMetricsProps> = ({ 
  timeToFirstToken, 
  usage 
}) => {
  if (!timeToFirstToken && !usage) return null;

  return (
    <div className="response-metrics mt-2 pt-2 border-t border-gray-100 text-xs text-gray-500 flex flex-wrap gap-3">
      {timeToFirstToken !== undefined && (
        <Tooltip title="Time to first token">
          <div className="flex items-center">
            <ClockCircleOutlined className="mr-1" />
            <span>{(timeToFirstToken / 1000).toFixed(2)}s</span>
          </div>
        </Tooltip>
      )}
      
      {usage?.promptTokens !== undefined && (
        <Tooltip title="Prompt tokens">
          <div className="flex items-center">
            <ImportOutlined className="mr-1" />
            <span>In: {usage.promptTokens}</span>
          </div>
        </Tooltip>
      )}
      
      {usage?.completionTokens !== undefined && (
        <Tooltip title="Completion tokens">
          <div className="flex items-center">
            <ExportOutlined className="mr-1" />
            <span>Out: {usage.completionTokens}</span>
          </div>
        </Tooltip>
      )}
      
      {usage?.reasoningTokens !== undefined && (
        <Tooltip title="Reasoning tokens">
          <div className="flex items-center">
            <BulbOutlined className="mr-1" />
            <span>Reasoning: {usage.reasoningTokens}</span>
          </div>
        </Tooltip>
      )}
      
      {usage?.totalTokens !== undefined && (
        <Tooltip title="Total tokens">
          <div className="flex items-center">
            <NumberOutlined className="mr-1" />
            <span>Total: {usage.totalTokens}</span>
          </div>
        </Tooltip>
      )}
    </div>
  );
};

export default ResponseMetrics;