File size: 1,368 Bytes
0bcefc4
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
import { Card, Group, Progress, Stack, Text } from "@mantine/core";

export default function LoadingModelContent({
  modelLoadingProgress,
  modelSizeInMegabytes,
}: {
  modelLoadingProgress: number;
  modelSizeInMegabytes: number;
}) {
  const isLoadingStarting = modelLoadingProgress === 0;
  const isLoadingComplete = modelLoadingProgress === 100;
  const percent =
    isLoadingComplete || isLoadingStarting ? 100 : modelLoadingProgress;
  const strokeColor = percent === 100 ? "#52c41a" : "#3385ff";
  const downloadedSize = (modelSizeInMegabytes * modelLoadingProgress) / 100;
  const sizeText = `${downloadedSize.toFixed(0)} MB / ${modelSizeInMegabytes.toFixed(0)} MB`;

  return (
    <Card withBorder shadow="sm" radius="md">
      <Card.Section withBorder inheritPadding py="xs">
        <Text fw={500}>Loading AI...</Text>
      </Card.Section>
      <Card.Section withBorder inheritPadding py="md">
        <Stack gap="xs">
          <Progress color={strokeColor} value={percent} animated />
          {!isLoadingStarting && (
            <Group justify="space-between">
              <Text size="sm" c="dimmed">
                {sizeText}
              </Text>
              <Text size="sm" c="dimmed">
                {percent.toFixed(1)}%
              </Text>
            </Group>
          )}
        </Stack>
      </Card.Section>
    </Card>
  );
}