alihan/OpenPipe-llm
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

styling tweaks for SelectModelModal

Browse Source
This commit is contained in:
Kyle Corbitt
2023-07-19 07:17:56 -07:00
parent 654f8c7cf2
commit 4fa2dffbcb
2 changed files with 58 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

102
src/components/SelectModelModal/ModelStatsCard.tsx
View File

@@ -1,67 +1,73 @@
import {
Heading,
VStack,
Text,
HStack,
type StackProps,
Icon,
Button,
GridItem,
SimpleGrid,
Link,
} from "@chakra-ui/react";
import { BsChevronRight } from "react-icons/bs";
import { modelStats } from "~/server/modelStats";
import { type SupportedModel } from "~/server/types";
export const ModelStatsCard = ({ label, model }: { label: string; model: SupportedModel }) => {
const stats = modelStats[model];
return (
<VStack w="full" spacing={6} bgColor="gray.100" p={4} borderRadius={8}>
<HStack w="full" justifyContent="space-between">
<Text fontWeight="bold" fontSize="xs">
{label}
</Text>
<Button variant="link" onClick={() => window.open(stats.learnMoreUrl, "_blank")}>
<HStack alignItems="center" spacing={0} color="blue.500" fontWeight="bold">
<Text fontSize="xs">Learn More</Text>
<Icon as={BsChevronRight} boxSize={3} strokeWidth={1} />
</HStack>
</Button>
</HStack>
<HStack w="full" justifyContent="space-between">
<Heading as="h3" size="md">
{model}
</Heading>
<Text fontWeight="bold">{stats.provider}</Text>
</HStack>
<SimpleGrid
w="full"
justifyContent="space-between"
alignItems="flex-start"
fontSize="sm"
columns={{ base: 2, md: 4 }}
>
<SelectedModelLabeledInfo label="Context" info={stats.contextLength} />
<SelectedModelLabeledInfo
label="Input"
info={
<Text>
${(stats.promptTokenPrice * 1000).toFixed(3)}
<Text color="gray.500"> / 1K tokens</Text>
<VStack w="full" align="start">
<Text fontWeight="bold" fontSize="sm" textTransform="uppercase">
{label}
</Text>
<VStack w="full" spacing={6} bgColor="gray.100" p={4} borderRadius={4}>
<HStack w="full" align="flex-start">
<Text flex={1} fontSize="lg">
<Text as="span" color="gray.600">
{stats.provider} /{" "}
</Text>
}
/>
<SelectedModelLabeledInfo
label="Output"
info={
<Text>
${(stats.promptTokenPrice * 1000).toFixed(3)}
<Text color="gray.500"> / 1K tokens</Text>
<Text as="span" fontWeight="bold" color="gray.900">
{model}
</Text>
}
/>
<SelectedModelLabeledInfo label="Speed" info={<Text>{stats.speed}</Text>} />
</SimpleGrid>
</Text>
<Link
href={stats.learnMoreUrl}
isExternal
color="blue.500"
fontWeight="bold"
fontSize="sm"
ml={2}
>
Learn More
</Link>
</HStack>
<SimpleGrid
w="full"
justifyContent="space-between"
alignItems="flex-start"
fontSize="sm"
columns={{ base: 2, md: 4 }}
>
<SelectedModelLabeledInfo label="Context" info={stats.contextLength} />
<SelectedModelLabeledInfo
label="Input"
info={
<Text>
${(stats.promptTokenPrice * 1000).toFixed(3)}
<Text color="gray.500"> / 1K tokens</Text>
</Text>
}
/>
<SelectedModelLabeledInfo
label="Output"
info={
<Text>
${(stats.promptTokenPrice * 1000).toFixed(3)}
<Text color="gray.500"> / 1K tokens</Text>
</Text>
}
/>
<SelectedModelLabeledInfo label="Speed" info={<Text>{stats.speed}</Text>} />
</SimpleGrid>
</VStack>
</VStack>
);
};

8
src/components/SelectModelModal/SelectModelModal.tsx
View File

@@ -52,10 +52,10 @@ export const SelectModelModal = ({
<ModalHeader>Select a New Model</ModalHeader>
<ModalCloseButton />
<ModalBody maxW="unset">
<VStack spacing={4}>
<ModelStatsCard label="ORIGINAL MODEL" model={originalModel} />
<VStack spacing={8}>
<ModelStatsCard label="Original Model" model={originalModel} />
{originalModel !== selectedModel && (
<ModelStatsCard label="SELECTED MODEL" model={selectedModel} />
<ModelStatsCard label="New Model" model={selectedModel} />
)}
<SelectModelSearch selectedModel={selectedModel} setSelectedModel={setSelectedModel} />
</VStack>
@@ -65,7 +65,7 @@ export const SelectModelModal = ({
<Button
colorScheme="blue"
onClick={createNewVariant}
w={20}
minW={24}
disabled={originalModel === selectedModel}
>
{creationInProgress ? <Spinner boxSize={4} /> : <Text>Continue</Text>}