60765e51ac
Storing the model on promptVariant is problematic because it isn't always in sync with the actual prompt definition. I'm removing it for now to see if we can get away with that -- might have to add it back in later if this causes trouble. Added `cost` to modelOutput as well so we can cache that, which is important given that the cost calculations won't be the same between different API providers.
66 lines
2.0 KiB
TypeScript
66 lines
2.0 KiB
TypeScript
import { type Scenario } from "../types";
|
|
import { type RouterOutputs } from "~/utils/api";
|
|
import { HStack, Icon, Text, Tooltip } from "@chakra-ui/react";
|
|
import { BsCheck, BsClock, BsCurrencyDollar, BsX } from "react-icons/bs";
|
|
import { CostTooltip } from "~/components/tooltip/CostTooltip";
|
|
|
|
const SHOW_TIME = true;
|
|
|
|
export const OutputStats = ({
|
|
modelOutput,
|
|
}: {
|
|
modelOutput: NonNullable<
|
|
NonNullable<RouterOutputs["scenarioVariantCells"]["get"]>["modelOutput"]
|
|
>;
|
|
scenario: Scenario;
|
|
}) => {
|
|
const timeToComplete = modelOutput.timeToComplete;
|
|
|
|
const promptTokens = modelOutput.promptTokens;
|
|
const completionTokens = modelOutput.completionTokens;
|
|
|
|
return (
|
|
<HStack w="full" align="center" color="gray.500" fontSize="2xs" mt={{ base: 0, md: 1 }}>
|
|
<HStack flex={1}>
|
|
{modelOutput.outputEvaluation.map((evaluation) => {
|
|
const passed = evaluation.result > 0.5;
|
|
return (
|
|
<Tooltip
|
|
isDisabled={!evaluation.details}
|
|
label={evaluation.details}
|
|
key={evaluation.id}
|
|
>
|
|
<HStack spacing={0}>
|
|
<Text>{evaluation.evaluation.label}</Text>
|
|
<Icon
|
|
as={passed ? BsCheck : BsX}
|
|
color={passed ? "green.500" : "red.500"}
|
|
boxSize={6}
|
|
/>
|
|
</HStack>
|
|
</Tooltip>
|
|
);
|
|
})}
|
|
</HStack>
|
|
{modelOutput.cost && (
|
|
<CostTooltip
|
|
promptTokens={promptTokens}
|
|
completionTokens={completionTokens}
|
|
cost={modelOutput.cost}
|
|
>
|
|
<HStack spacing={0}>
|
|
<Icon as={BsCurrencyDollar} />
|
|
<Text mr={1}>{modelOutput.cost.toFixed(3)}</Text>
|
|
</HStack>
|
|
</CostTooltip>
|
|
)}
|
|
{SHOW_TIME && (
|
|
<HStack spacing={0.5}>
|
|
<Icon as={BsClock} />
|
|
<Text>{(timeToComplete / 1000).toFixed(2)}s</Text>
|
|
</HStack>
|
|
)}
|
|
</HStack>
|
|
);
|
|
};
|