Display number of available tasks

website/public/locales/en/tasks.json

@@ -77,5 +77,6 @@
     "label": "Classify Assistant Reply",
     "desc": "Provide labels for a prompt.",
     "overview": "Read the following conversation and then answer the question about the last reply in the discussion."
-  }
+  },
+  "available_task_count": "{{count}} tasks available"
 }

website/src/components/Dashboard/TaskOption.tsx

@@ -1,5 +1,7 @@
 import {
+  Badge,
   Box,
+  Card,
   Flex,
   GridItem,
   Heading,
@@ -8,7 +10,6 @@ import {
   SimpleGrid,
   Spacer,
   Text,
-  useColorModeValue,
 } from "@chakra-ui/react";
 import { HelpCircle } from "lucide-react";
 import Link from "next/link";
@@ -20,18 +21,17 @@ import { TaskCategory, TaskInfo, TaskType } from "src/types/Task";
 import { TaskCategoryLabels, TaskInfos } from "../Tasks/TaskTypes";
 
 export interface TasksOptionProps {
-  content: Partial<Record<TaskCategory, TaskType[]>>;
+  content: Partial<Record<TaskCategory, Array<{ taskType: TaskType; count: number }>>>;
 }
 
 export const TaskOption = ({ content }: TasksOptionProps) => {
   const { t } = useTranslation(["dashboard", "tasks"]);
-  const backgroundColor = useColorModeValue("white", "gray.700");
 
   const taskInfoMap = useMemo(
     () =>
       Object.values(content)
         .flat()
-        .reduce((obj, taskType) => {
+        .reduce((obj, { taskType }) => {
           obj[taskType] = TaskInfos.filter((t) => t.type === taskType).pop();
           return obj;
         }, {} as Record<TaskType, TaskInfo>),
@@ -53,23 +53,35 @@ export const TaskOption = ({ content }: TasksOptionProps) => {
           </Flex>
           <SimpleGrid columns={[1, 1, 2, 2, 3, 4]} gap={4}>
             {taskTypes
-              .map((taskType) => taskInfoMap[taskType])
+              .map(({ taskType, count }) => ({ ...taskInfoMap[taskType], count }))
               .map((item) => (
                 <Link key={category + item.id} href={item.pathname}>
-                  <GridItem
+                  <GridItem as={Card} height="100%" justifyContent="space-between">
-                    bg={backgroundColor}
+                    <Flex px="6" pt="6" flexDir="column" gap="3" justifyContent="space-between" height="100%">
-                    borderRadius="xl"
+                      <Flex flexDir="column" gap="3">
-                    boxShadow="base"
+                        <Heading size="md">{t(getTypeSafei18nKey(`tasks:${item.id}.label`))}</Heading>
-                    className="flex flex-col justify-between h-full"
+                        <Text size="sm">{t(getTypeSafei18nKey(`tasks:${item.id}.desc`))}</Text>
-                  >
+                      </Flex>
-                    <Flex className="p-6 pb-10" flexDir="column" gap="3">
+                      <Box>
-                      <Heading size="md">{t(getTypeSafei18nKey(`tasks:${item.id}.label`))}</Heading>
+                        <Badge
-                      <Text size="sm">{t(getTypeSafei18nKey(`tasks:${item.id}.desc`))}</Text>
+                          colorScheme="blue"
+                          flexGrow={0}
+                          rounded="lg"
+                          px={2}
+                          py={0.5}
+                          variant="solid"
+                          textTransform="none"
+                          fontWeight="600"
+                        >
+                          {t("tasks:available_task_count", { count: item.count })}
+                        </Badge>
+                      </Box>
                     </Flex>
                     <Text
                       fontWeight="bold"
                       color="white"
                       borderBottomRadius="xl"
+                      mt="6"
                       className="px-6 py-2 transition-colors duration-300 bg-blue-500 hover:bg-blue-600"
                     >
                       {t("go")} -&gt;
@@ -85,12 +97,20 @@ export const TaskOption = ({ content }: TasksOptionProps) => {
 };
 
 export const allTaskOptions: TasksOptionProps["content"] = {
-  [TaskCategory.Random]: [TaskType.random],
+  [TaskCategory.Random]: [{ taskType: TaskType.random, count: 0 }],
-  [TaskCategory.Create]: [TaskType.initial_prompt, TaskType.prompter_reply, TaskType.assistant_reply],
+  [TaskCategory.Create]: [
+    { taskType: TaskType.initial_prompt, count: 0 },
+    { taskType: TaskType.prompter_reply, count: 0 },
+    { taskType: TaskType.assistant_reply, count: 0 },
+  ],
   [TaskCategory.Evaluate]: [
-    TaskType.rank_initial_prompts,
+    { taskType: TaskType.rank_initial_prompts, count: 0 },
-    TaskType.rank_prompter_replies,
+    { taskType: TaskType.rank_prompter_replies, count: 0 },
-    TaskType.rank_assistant_replies,
+    { taskType: TaskType.rank_assistant_replies, count: 0 },
+  ],
+  [TaskCategory.Label]: [
+    { taskType: TaskType.label_initial_prompt, count: 0 },
+    { taskType: TaskType.label_prompter_reply, count: 0 },
+    { taskType: TaskType.label_assistant_reply, count: 0 },
   ],
-  [TaskCategory.Label]: [TaskType.label_initial_prompt, TaskType.label_prompter_reply, TaskType.label_assistant_reply],
 };

website/src/pages/dashboard.tsx

@@ -59,4 +59,4 @@ const filterAvailableTasks = (availableTasks: Partial<AvailableTasks>) =>
   Object.entries(availableTasks)
     .filter(([, count]) => count > 0)
     .sort((a, b) => b[1] - a[1])
-    .map(([taskType]) => taskType) as TaskType[];
+    .map(([taskType, count]) => ({ taskType, count })) as Array<{ taskType: TaskType; count: number }>;