d6b97b29f7
* Move DeleteButton into a separate file * Rename plural relations * Add ability to fork * Fork automatically after auth upon return * Add experiment card skeleton * Create HeaderButtons component * return no header buttons while experiment loading * Fix prettier * Remove unused variable * Remove newline * Default json values to undefined * Change header styles * Fix prettier * Give AddScenario icon less width * Move useEffect * Skip invalidating experiments list after forking * Require user to be able to view experiment to fork it * Move experiment creation into same transaction * Only return the forked experiment id * Put delete button in experiment settings drawer * Move useEffect hook
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.outputEvaluations.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>
|
|
);
|
|
};
|