Merge branch 'main' into 766_admin_enhancement

website/public/locales/en/common.json

@@ -13,6 +13,5 @@
   "sign_in": "Sign In",
   "sign_out": "Sign Out",
   "terms_of_service": "Terms of Service",
-  "title": "Open Assistant",
-  "last_updated_at": "Last updated at: {{val, datetime}}"
+  "title": "Open Assistant"
 }

website/public/locales/en/index.json

@@ -1,16 +1,15 @@
 {
-  "title": "Open Assistant",
-  "subtitle": "Conversational AI for everyone.",
-  "description": "Conversational AI for everyone. An open source project to create a chat enabled GPT LLM run by LAION and contributors around the world.",
   "blurb": "We believe we can create a revolution.",
   "blurb1": "In the same way that Stable Diffusion helped the world make art and images in new ways, we want to improve the world by providing amazing conversational AI.",
-  "join_us_title": "Join us",
-  "join_us_description": "All open source projects begin with people like you. Open source is the belief that if we collaborate we can together gift our knowledge and technology to the world for the benefit of humanity. Are you in? Find us here:",
-  "faq_title": "Frequently Asked Questions",
+  "description": "Conversational AI for everyone. An open source project to create a chat enabled GPT LLM run by LAION and contributors around the world.",
   "faq_items": {
     "q0": "How far along is this project?",
     "a0": "We are in the early stages of development, working from established research in applying RLHF to large language models.",
     "q1": "Who is behind Open Assistant?",
     "a1": "Open Assistant is a project organized by LAION and individuals around the world interested in bringing this technology to everyone."
-  }
+  },
+  "faq_title": "Frequently Asked Questions",
+  "join_us_description": "All open source projects begin with people like you. Open source is the belief that if we collaborate we can together gift our knowledge and technology to the world for the benefit of humanity. Are you in? Find us here:",
+  "join_us_title": "Join us",
+  "subtitle": "Conversational AI for everyone."
 }

website/public/locales/en/leaderboard.json

@@ -0,0 +1,11 @@
+{
+  "daily": "Daily",
+  "last_updated_at": "Last updated at: {{val, datetime}}",
+  "leaderboard": "Leaderboard",
+  "monthly": "Monthly",
+  "overall": "Overall",
+  "rank": "Rank",
+  "score": "Score",
+  "user": "User",
+  "weekly": "Weekly"
+}

website/src/components/Hero.tsx

@@ -6,7 +6,7 @@ import { AnimatedCircles } from "./AnimatedCircles";
 import { Container } from "./Container";
 
 export function Hero() {
-  const { t } = useTranslation("index");
+  const { t } = useTranslation(["index", "common"]);
   const { colorMode } = useColorMode();
   const pTextColor = colorMode === "light" ? "text-gray-600" : "text-white";
   const fancyTextGradientClasses =
@@ -17,7 +17,7 @@ export function Hero() {
         <Box className="lg:grid lg:grid-cols-12 lg:gap-x-8 lg:gap-y-20">
           <Box className="relative mx-auto max-w-2xl lg:col-span-7 lg:max-w-none lg:pt-6 xl:col-span-6">
             <Text as="h1" className="text-5xl mb-6 font-bold tracking-tight">
-              {t("title")}
+              {t("common:title")}
             </Text>
             <Text
               as="h2"

website/src/components/Layout.tsx

@@ -2,7 +2,7 @@
 
 import { Box, Grid } from "@chakra-ui/react";
 import type { NextPage } from "next";
-import { FiBarChart2, FiLayout, FiMessageSquare, FiUsers } from "react-icons/fi";
+import { FiBarChart2, FiLayout, FiMessageSquare, FiUsers, FiActivity } from "react-icons/fi";
 import { Header } from "src/components/Header";
 
 import { SlimFooter } from "./Dashboard/SlimFooter";
@@ -75,6 +75,12 @@ export const getAdminLayout = (page: React.ReactElement) => (
           desc: "Users Dashboard",
           icon: FiUsers,
         },
+        {
+          label: "Status",
+          pathname: "/admin/status",
+          desc: "Status Dashboard",
+          icon: FiActivity,
+        },
       ]}
     >
       {page}

website/src/components/LeaderboardGridCell/LeaderboardGridCell.tsx

@@ -6,19 +6,19 @@ import { get } from "src/lib/api";
 import { LeaderboardReply, LeaderboardTimeFrame } from "src/types/Leaderboard";
 import useSWRImmutable from "swr/immutable";
 
-const columns = [
+const getColumns = (t) => [
   {
-    Header: "Rank",
+    Header: t("rank"),
     accessor: "rank",
     style: { width: "90px" },
   },
   {
-    Header: "Score",
+    Header: t("score"),
     accessor: "leader_score",
     style: { width: "90px" },
   },
   {
-    Header: "User",
+    Header: t("user"),
     accessor: "display_name",
   },
 ];
@@ -27,11 +27,13 @@ const columns = [
  * Presents a grid of leaderboard entries with more detailed information.
  */
 const LeaderboardGridCell = ({ timeFrame }: { timeFrame: LeaderboardTimeFrame }) => {
-  const { t } = useTranslation();
+  const { t } = useTranslation(["leaderboard", "common"]);
   const { data: reply } = useSWRImmutable<LeaderboardReply>(`/api/leaderboard?time_frame=${timeFrame}`, get, {
     revalidateOnMount: true,
   });
 
+  const columns = useMemo(() => getColumns(t), [t]);
+
   const { getTableProps, getTableBodyProps, headerGroups, rows, prepareRow } = useTable({
     columns,
     data: reply?.leaderboard ?? [],

website/src/lib/oasst_api_client.ts

@@ -164,6 +164,27 @@ export class OasstApiClient {
     });
   }
 
+  /**
+   * Returns the tasks availability information for given `user`.
+   */
+  async fetch_tasks_availability(user: object): Promise<any> {
+    return this.post("/api/v1/tasks/availability", user);
+  }
+
+  /**
+   * Returns the message stats from the backend.
+   */
+  async fetch_stats(): Promise<any> {
+    return this.get("/api/v1/stats/");
+  }
+
+  /**
+   * Returns the tree manager stats from the backend.
+   */
+  async fetch_tree_manager(): Promise<any> {
+    return this.get("/api/v1/stats/tree_manager");
+  }
+
   /**
    * Returns the `BackendUser` associated with `user_id`
    */

website/src/pages/admin/status/index.tsx

@@ -0,0 +1,174 @@
+import {
+  Box,
+  Card,
+  CardBody,
+  CircularProgress,
+  SimpleGrid,
+  Text,
+  Table,
+  TableCaption,
+  TableContainer,
+  Tbody,
+  Td,
+  Th,
+  Thead,
+  Tr,
+  useColorMode,
+} from "@chakra-ui/react";
+import Head from "next/head";
+import { useRouter } from "next/router";
+import { useSession } from "next-auth/react";
+import { useEffect } from "react";
+import useSWRImmutable from "swr/immutable";
+import { getAdminLayout } from "src/components/Layout";
+import { get } from "src/lib/api";
+
+/**
+ * Provides the admin status page that shows result of calls to several backend API endpoints,
+ * namely /api/v1/tasks/availability, /api/v1/stats/, /api/v1/stats/tree_manager
+ */
+
+const StatusIndex = () => {
+  const router = useRouter();
+  const { data: session, status } = useSession();
+
+  const { colorMode } = useColorMode();
+  const dataBackgroundColor = colorMode === "light" ? "gray.100" : "gray.800";
+  // Check when the user session is loaded and re-route if the user is not an
+  // admin.  This follows the suggestion by NextJS for handling private pages:
+  //   https://nextjs.org/docs/api-reference/next/router#usage
+  //
+  // All admin pages should use the same check and routing steps.
+  useEffect(() => {
+    if (status === "loading") {
+      return;
+    }
+    if (session?.user?.role === "admin") {
+      return;
+    }
+    router.push("/");
+  }, [router, session, status]);
+
+  const {
+    data: dataStatus,
+    error: errorStatus,
+    isLoading: isLoadingStatus,
+  } = useSWRImmutable("/api/admin/status", get);
+
+  const { tasksAvailability, stats, treeManager } = dataStatus || {};
+
+  return (
+    <>
+      <Head>
+        <title>Status - Open Assistant</title>
+        <meta
+          name="description"
+          content="Conversational AI for everyone. An open source project to create a chat enabled GPT LLM run by LAION and contributors around the world."
+        />
+      </Head>
+
+      <SimpleGrid columns={[1, 1, 1, 1, 1, 2]} gap={4}>
+        <Card>
+          <CardBody>
+            <Text as="h1" fontSize="3xl" textAlign="center">
+              /api/v1/tasks/availability
+            </Text>
+            <Box bg={dataBackgroundColor} borderRadius="xl" p="6" pt="4" pr="12">
+              {tasksAvailability?.status === "fulfilled" ? (
+                <pre>{JSON.stringify(tasksAvailability.value, null, 2)}</pre>
+              ) : tasksAvailability?.status === "rejected" ? (
+                <pre>{JSON.stringify(tasksAvailability.reason, null, 2)}</pre>
+              ) : errorStatus ? (
+                <pre>{JSON.stringify(errorStatus, null, 2)}</pre>
+              ) : (
+                <CircularProgress isIndeterminate />
+              )}
+            </Box>
+          </CardBody>
+        </Card>
+
+        <Card>
+          <CardBody>
+            <Text as="h1" fontSize="3xl" textAlign="center">
+              /api/v1/stats/
+            </Text>
+            <Box bg={dataBackgroundColor} borderRadius="xl" p="6" pt="4" pr="12">
+              {stats?.status === "fulfilled" ? (
+                <pre>{JSON.stringify(stats.value, null, 2)}</pre>
+              ) : stats?.status === "rejected" ? (
+                <pre>{JSON.stringify(stats.reason, null, 2)}</pre>
+              ) : errorStatus ? (
+                <pre>{JSON.stringify(errorStatus, null, 2)}</pre>
+              ) : (
+                <CircularProgress isIndeterminate />
+              )}
+            </Box>
+          </CardBody>
+        </Card>
+      </SimpleGrid>
+      <br />
+      <Card>
+        <CardBody>
+          <Text as="h1" fontSize="3xl" textAlign="center">
+            /api/v1/stats/tree_manager
+          </Text>
+          {treeManager?.status === "fulfilled" ? (
+            <Box>
+              <Text as="h2" fontSize="2xl">
+                state_counts
+              </Text>
+              <Box bg={dataBackgroundColor} borderRadius="xl" p="6" pt="4" pr="12">
+                <pre>{JSON.stringify(treeManager.value.state_counts, null, 2)}</pre>
+              </Box>
+              <TableContainer>
+                <br />
+                <Text as="h2" fontSize="2xl">
+                  message_counts
+                </Text>
+                <Table variant="simple">
+                  <TableCaption>Tree Manager</TableCaption>
+                  <Thead>
+                    <Tr>
+                      <Th>Message Tree ID</Th>
+                      <Th>State</Th>
+                      <Th>Depth</Th>
+                      <Th>Oldest</Th>
+                      <Th>Youngest</Th>
+                      <Th>Count</Th>
+                      <Th>Goal Tree Size</Th>
+                    </Tr>
+                  </Thead>
+                  <Tbody>
+                    {treeManager.value.message_counts.map(
+                      ({ message_tree_id, state, depth, oldest, youngest, count, goal_tree_size }) => (
+                        <Tr key={message_tree_id}>
+                          <Td>{message_tree_id}</Td>
+                          <Td>{state}</Td>
+                          <Td>{depth}</Td>
+                          <Td>{oldest}</Td>
+                          <Td>{youngest}</Td>
+                          <Td>{count}</Td>
+                          <Td>{goal_tree_size}</Td>
+                        </Tr>
+                      )
+                    )}
+                  </Tbody>
+                </Table>
+              </TableContainer>
+            </Box>
+          ) : treeManager?.status === "rejected" ? (
+            <pre>{JSON.stringify(treeManager.reason, null, 2)}</pre>
+          ) : errorStatus ? (
+            <pre>{JSON.stringify(errorStatus, null, 2)}</pre>
+          ) : (
+            <CircularProgress isIndeterminate />
+          )}
+        </CardBody>
+      </Card>
+    </>
+  );
+};
+
+StatusIndex.getLayout = getAdminLayout;
+
+export default StatusIndex;

website/src/pages/api/admin/status.ts

@@ -0,0 +1,30 @@
+import { getToken } from "next-auth/jwt";
+import { withRole } from "src/lib/auth";
+import { oasstApiClient } from "src/lib/oasst_api_client";
+import { getBackendUserCore } from "src/lib/users";
+
+/**
+ * Returns tasks availability, stats, and tree manager stats.
+ */
+const handler = withRole("admin", async (req, res) => {
+  const dummyUser = {
+    id: "__dummy_user__",
+    display_name: "Dummy User",
+    auth_method: "local",
+  };
+  const [tasksAvailabilityOutcome, statsOutcome, treeManagerOutcome] = await Promise.allSettled([
+    oasstApiClient.fetch_tasks_availability(dummyUser),
+    oasstApiClient.fetch_stats(),
+    oasstApiClient.fetch_tree_manager(),
+  ]);
+
+  const status = {
+    tasksAvailability: tasksAvailabilityOutcome,
+    stats: statsOutcome,
+    treeManager: treeManagerOutcome,
+  };
+
+  res.status(200).json(status);
+});
+
+export default handler;

website/src/pages/index.tsx

@@ -3,17 +3,17 @@ import Head from "next/head";
 import { useRouter } from "next/router";
 import { useSession } from "next-auth/react";
 import { useTranslation } from "next-i18next";
-import { serverSideTranslations } from "next-i18next/serverSideTranslations";
 import { useEffect } from "react";
 import { CallToAction } from "src/components/CallToAction";
 import { Faq } from "src/components/Faq";
 import { Hero } from "src/components/Hero";
 import { getTransparentHeaderLayout } from "src/components/Layout";
+export { getDefaultStaticProps as getStaticProps } from "src/lib/default_static_props";
 
 const Home = () => {
   const router = useRouter();
   const { status } = useSession();
-  const { t } = useTranslation("index");
+  const { t } = useTranslation();
   useEffect(() => {
     if (status === "authenticated") {
       router.push("/dashboard");
@@ -37,10 +37,4 @@ const Home = () => {
 
 Home.getLayout = getTransparentHeaderLayout;
 
-export const getStaticProps = async ({ locale }) => ({
-  props: {
-    ...(await serverSideTranslations(locale, ["index", "common"])),
-  },
-});
-
 export default Home;

website/src/pages/leaderboard.tsx

@@ -1,27 +1,29 @@
 import { Box, Heading, Tab, TabList, TabPanel, TabPanels, Tabs } from "@chakra-ui/react";
 import Head from "next/head";
+import { useTranslation } from "next-i18next";
 import { getDashboardLayout } from "src/components/Layout";
 import { LeaderboardGridCell } from "src/components/LeaderboardGridCell";
 export { getDefaultStaticProps as getStaticProps } from "src/lib/default_static_props";
 import { LeaderboardTimeFrame } from "src/types/Leaderboard";
 
 const Leaderboard = () => {
+  const { t } = useTranslation(["leaderboard", "common"]);
   return (
     <>
       <Head>
-        <title>Leaderboard - Open Assistant</title>
+        <title>{`${t("leaderboard")} - ${t("common:title")}`}</title>
         <meta name="description" content="Leaderboard Rankings" charSet="UTF-8" />
       </Head>
       <Box display="flex" flexDirection="column">
         <Heading fontSize="2xl" fontWeight="bold" pb="4">
-          Leaderboard
+          {t("leaderboard")}
         </Heading>
         <Tabs isFitted isLazy>
           <TabList>
-            <Tab>Daily</Tab>
-            <Tab>Weekly</Tab>
-            <Tab>Monthly</Tab>
-            <Tab>Overall</Tab>
+            <Tab>{t("daily")}</Tab>
+            <Tab>{t("weekly")}</Tab>
+            <Tab>{t("monthly")}</Tab>
+            <Tab>{t("overall")}</Tab>
           </TabList>
 
           <TabPanels>