Merge pull request #859 from LAION-AI/fetch-available-tasks

Fetch available tasks

website/src/components/Dashboard/TaskOption.tsx

@@ -1,19 +1,19 @@
 import { Box, Flex, GridItem, Heading, SimpleGrid, Text, useColorModeValue } from "@chakra-ui/react";
 import Link from "next/link";
 
-import { TaskTypes } from "../Tasks/TaskTypes";
+import { TaskCategory, TaskCategoryLabels, TaskTypes } from "../Tasks/TaskTypes";
 
-export const TaskOption = ({ displayTaskCategories }) => {
+export const TaskOption = ({ displayTaskCategories }: { displayTaskCategories: TaskCategory[] }) => {
   const backgroundColor = useColorModeValue("white", "gray.700");
 
   return (
     <Box className="flex flex-col gap-14">
-      {displayTaskCategories.map((category, categoryIndex) => (
-        <div key={categoryIndex}>
-          <Text className="text-2xl font-bold pb-4">{category}</Text>
+      {displayTaskCategories.map((category) => (
+        <div key={category}>
+          <Text className="text-2xl font-bold pb-4">{TaskCategoryLabels[category]}</Text>
           <SimpleGrid columns={[1, 1, 2, 2, 3, 4]} gap={4}>
-            {TaskTypes.filter((task) => task.category === category).map((item, itemIndex) => (
-              <Link key={itemIndex} href={item.pathname}>
+            {TaskTypes.filter((task) => task.category === category).map((item) => (
+              <Link key={category + item.label} href={item.pathname}>
                 <GridItem
                   bg={backgroundColor}
                   borderRadius="xl"

website/src/components/Tasks/TaskTypes.tsx

@@ -1,5 +1,5 @@
 export enum TaskCategory {
-  Tasks = "Tasks",
+  Random = "Random",
   Create = "Create",
   Evaluate = "Evaluate",
   Label = "Label",
@@ -20,12 +20,19 @@ export interface TaskInfo {
   unchanged_message?: string;
 }
 
+export const TaskCategoryLabels: { [key in TaskCategory]: string } = {
+  [TaskCategory.Random]: "I'm feeling lucky",
+  [TaskCategory.Create]: "Create",
+  [TaskCategory.Evaluate]: "Evaluate",
+  [TaskCategory.Label]: "Label",
+};
+
 export const TaskTypes: TaskInfo[] = [
   // general/random
   {
     label: "Start a Task",
     desc: "Help us improve Open Assistant by starting a random task.",
-    category: TaskCategory.Tasks,
+    category: TaskCategory.Random,
     pathname: "/tasks/random",
     help_link: "https://projects.laion.ai/Open-Assistant/docs/guides/prompting",
     type: "random",

website/src/hooks/tasks/useGenericTaskAPI.tsx

@@ -1,23 +1,22 @@
 import { useState } from "react";
 import { get, post } from "src/lib/api";
-import { BaseTask, TaskResponse } from "src/types/Task";
+import { BaseTask, TaskResponse, TaskType as TaskTypeEnum } from "src/types/Task";
 import useSWRImmutable from "swr/immutable";
 import useSWRMutation from "swr/mutation";
 
-export const useGenericTaskAPI = <TaskType extends BaseTask>(taskApiEndpoint: string) => {
+export const useGenericTaskAPI = <TaskType extends BaseTask>(taskType: TaskTypeEnum) => {
   type ConcreteTaskResponse = TaskResponse<TaskType>;
 
   const [tasks, setTasks] = useState<ConcreteTaskResponse[]>([]);
 
-  const { isLoading, mutate, error } = useSWRImmutable<ConcreteTaskResponse>("/api/new_task/" + taskApiEndpoint, get, {
+  const { isLoading, mutate, error } = useSWRImmutable<ConcreteTaskResponse>("/api/new_task/" + taskType, get, {
     onSuccess: (data) => setTasks([data]),
     revalidateOnMount: true,
     dedupingInterval: 500,
   });
 
   const { trigger } = useSWRMutation("/api/update_task", post, {
-    onSuccess: async (response) => {
-      const newTask: ConcreteTaskResponse = response;
+    onSuccess: async (newTask: ConcreteTaskResponse) => {
       setTasks((oldTasks) => [...oldTasks, newTask]);
       mutate();
     },

website/src/lib/oasst_api_client.ts

@@ -1,5 +1,6 @@
 import type { Message } from "src/types/Conversation";
 import { LeaderboardReply, LeaderboardTimeFrame } from "src/types/Leaderboard";
+import type { AvailableTasks } from "src/types/Task";
 import type { BackendUser, BackendUserCore } from "src/types/Users";
 
 export class OasstError {
@@ -205,6 +206,13 @@ export class OasstApiClient {
   async fetch_leaderboard(time_frame: LeaderboardTimeFrame): Promise<LeaderboardReply> {
     return this.get(`/api/v1/leaderboards/${time_frame}`);
   }
+
+  /**
+   * Returns the counts of all tasks (some might be zero)
+   */
+  async fetch_available_tasks(user: BackendUserCore): Promise<AvailableTasks> {
+    return this.post(`/api/v1/tasks/availability`, user);
+  }
 }
 
 const oasstApiClient = new OasstApiClient(process.env.FASTAPI_URL, process.env.FASTAPI_KEY);

website/src/pages/api/available_tasks.ts

@@ -0,0 +1,11 @@
+import { withoutRole } from "src/lib/auth";
+import { oasstApiClient } from "src/lib/oasst_api_client";
+import { getBackendUserCore } from "src/lib/users";
+
+const handler = withoutRole("banned", async (req, res, token) => {
+  const user = await getBackendUserCore(token.sub);
+  const availableTasks = await oasstApiClient.fetch_available_tasks(user);
+  res.status(200).json(availableTasks);
+});
+
+export default handler;

website/src/pages/dashboard.tsx

@@ -1,11 +1,20 @@
 import { Flex } from "@chakra-ui/react";
 import Head from "next/head";
+import { useMemo } from "react";
 import { LeaderboardTable, TaskOption, WelcomeCard } from "src/components/Dashboard";
 import { getDashboardLayout } from "src/components/Layout";
 import { TaskCategory } from "src/components/Tasks/TaskTypes";
+import { get } from "src/lib/api";
+import type { AvailableTasks, TaskType } from "src/types/Task";
 export { getDefaultStaticProps as getStaticProps } from "src/lib/default_static_props";
+import useSWRImmutable from "swr/immutable";
 
 const Dashboard = () => {
+  const { data } = useSWRImmutable<AvailableTasks>("/api/available_tasks", get);
+
+  // TODO: show only these tasks:
+  const availableTasks = useMemo(() => filterAvailableTasks(data ?? {}), [data]);
+
   return (
     <>
       <Head>
@@ -14,13 +23,19 @@ const Dashboard = () => {
       </Head>
       <Flex direction="column" gap="10">
         <WelcomeCard />
-        <TaskOption displayTaskCategories={[TaskCategory.Tasks]} />
+        <TaskOption displayTaskCategories={[TaskCategory.Random]} />
         <LeaderboardTable />
       </Flex>
     </>
   );
 };
 
-Dashboard.getLayout = (page) => getDashboardLayout(page);
+Dashboard.getLayout = getDashboardLayout;
 
 export default Dashboard;
+
+const filterAvailableTasks = (availableTasks: Partial<AvailableTasks>) =>
+  Object.entries(availableTasks)
+    .filter(([_, count]) => count > 0)
+    .sort((a, b) => b[1] - a[1])
+    .map(([taskType]) => taskType) as TaskType[];

website/src/pages/tasks/random.tsx

@@ -4,9 +4,10 @@ import { getDashboardLayout } from "src/components/Layout";
 import { LoadingScreen } from "src/components/Loading/LoadingScreen";
 import { Task } from "src/components/Tasks/Task";
 import { useGenericTaskAPI } from "src/hooks/tasks/useGenericTaskAPI";
+import { TaskType } from "src/types/Task";
 
 const RandomTask = () => {
-  const { tasks, isLoading, trigger, reset } = useGenericTaskAPI("random");
+  const { tasks, isLoading, trigger, reset } = useGenericTaskAPI(TaskType.random);
 
   if (isLoading) {
     return <LoadingScreen text="Loading..." />;

website/src/types/Task.ts

@@ -10,6 +10,8 @@ export const enum TaskType {
   label_initial_prompt = "label_initial_prompt",
   label_prompter_reply = "label_prompter_reply",
   label_assistant_reply = "label_assistant_reply",
+
+  random = "random",
 }
 
 // we need to reconsider how to handle task content types
@@ -32,3 +34,5 @@ export interface TaskResponse<Task extends BaseTask> {
   userId: string;
   task: Task;
 }
+
+export type AvailableTasks = { [taskType in TaskType]: number };