wassname/Open-Assistant
1
0
Fork 0
mirror of https://github.com/wassname/Open-Assistant.git synced 2026-09-12 12:03:06 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merging with main changes

Browse Source
This commit is contained in:
Keith Stevens
2023-01-14 17:03:18 +09:00
parent ddfb497764 58cbc50b31
commit 8203406fa1
24 changed files with 360 additions and 398 deletions
Download Patch File Download Diff File Expand all files Collapse all files
website/src/pages/404.tsx
+26 -11
View File
@@ -1,32 +1,47 @@
import { Button, Link, Stack } from "@chakra-ui/react";
import { Box, Button, Center, Link, Text, useColorModeValue } from "@chakra-ui/react";
import Head from "next/head";
import NextLink from "next/link";
import { useRouter } from "next/router";
import { FiAlertTriangle } from "react-icons/fi";
import { PageEmptyState } from "src/components/EmptyState";
import { getTransparentHeaderLayout } from "src/components/Layout";
function Error() {
const router = useRouter();
const backgroundColor = useColorModeValue("white", "gray.800");
export default function Error() {
return (
<>
<Head>
<title>404 - Open Assistant</title>
<meta name="404" content="Sorry, this page doesn't exist." />
</Head>
<main className="flex h-3/4 items-center justify-center overflow-hidden subpixel-antialiased text-xl">
<Stack>
<p>Sorry, the page you are looking for does not exist.</p>
<p>If you were trying to contribute data but ended up here, please file a bug</p>
<Button leftIcon={<FiAlertTriangle className="text-blue-500" aria-hidden="true" />} variant="solid">
<Center flexDirection="column" gap="4" fontSize="lg" className="subpixel-antialiased">
<PageEmptyState />
<Box display="flex" flexDirection="column" alignItems="center" gap="2" mt="6">
<Text fontSize="sm">If you were trying to contribute data but ended up here, please file a bug.</Text>
<Button
width="fit-content"
leftIcon={<FiAlertTriangle className="text-blue-500" aria-hidden="true" />}
variant="solid"
size="xs"
>
<Link
as={NextLink}
key="Report a Bug"
href="https://github.com/LAION-AI/Open-Assistant/issues/new/choose"
aria-label="Report a Bug"
className="flex items-center"
_hover={{ textDecoration: "none" }}
isExternal
>
Report a Bug
</Link>
</Button>
</Stack>
</main>
</Box>
</Center>
</>
);
}
Error.getLayout = getTransparentHeaderLayout;
export default Error;
website/src/pages/api/leaderboard.ts
+18
View File
@@ -0,0 +1,18 @@
import { withoutRole } from "src/lib/auth";
import { oasstApiClient } from "src/lib/oasst_api_client";
/**
* Returns the set of valid labels that can be applied to messages.
*/
const handler = withoutRole("banned", async (req, res) => {
const { leaderboard } = await oasstApiClient.fetch_leaderboard();
res.status(200).json(
leaderboard.map(({ display_name, ranking, score }) => ({
display_name,
ranking,
score,
}))
);
});
export default handler;
website/src/pages/leaderboard.tsx
+25
View File
@@ -0,0 +1,25 @@
import { Box, Heading } from "@chakra-ui/react";
import Head from "next/head";
import { getDashboardLayout } from "src/components/Layout";
import { LeaderboardGridCell } from "src/components/LeaderboardGridCell";
const Leaderboard = () => {
return (
<>
<Head>
<title>Leaderboard - Open Assistant</title>
<meta name="description" content="Leaderboard Rankings" charSet="UTF-8" />
</Head>
<Box display="flex" flexDirection="column">
<Heading fontSize="2xl" fontWeight="bold" pb="4">
Leaderboard
</Heading>
<LeaderboardGridCell />
</Box>
</>
);
};
Leaderboard.getLayout = getDashboardLayout;
export default Leaderboard;
website/src/pages/leaderboard/index.tsx
-80
View File
@@ -1,80 +0,0 @@
import { Box, Grid, GridItem, GridItemProps, Heading, Text, useColorModeValue } from "@chakra-ui/react";
import Head from "next/head";
import { FiChevronDown } from "react-icons/fi";
import { getDashboardLayout } from "src/components/Layout";
import RankItem from "src/components/RankItem";
const Leaderboard = () => {
const backgroundColor = useColorModeValue("white", "gray.800");
const GridProps: GridItemProps = {
justifyContent: "start",
};
const filter = [
{
title: "User",
isActive: false,
GridItemProps: { ...GridProps, justifyContent: "start" },
},
{
title: "Rank",
isActive: false,
GridItemProps: { ...GridProps, justifyContent: "center" },
},
{
title: "Score",
isActive: false,
GridItemProps: { ...GridProps, justifyContent: "center" },
},
{
title: "Medal",
isActive: false,
GridItemProps: { ...GridProps, justifyContent: "center" },
},
];
return (
<>
<Head>
<title>Leaderboard - Open Assistant</title>
<meta name="description" content="Leaderboard Rankings" charSet="UTF-8" />
</Head>
<Box display="flex" flexDirection="column">
<Heading fontSize="2xl" fontWeight="bold" pb="4">
Leaderboard
</Heading>
<Grid>
<GridItem
colSpan={4}
bg={backgroundColor}
display="grid"
gridTemplateColumns="repeat(4, 1fr)"
p="4"
borderRadius="lg"
mb="4"
shadow="base"
>
{filter.map((item, index) => (
<GridItem key={index} display="flex" {...item.GridItemProps}>
<Box display="flex" alignItems="center" gap="2" width="fit-content" borderRadius="md" cursor="pointer">
<Text fontSize="sm" fontWeight="bold" textTransform="uppercase">
{item.title}
</Text>
<FiChevronDown size="16" />
</Box>
</GridItem>
))}
</GridItem>
</Grid>
<Grid templateColumns="repeat(4, 1fr)" bg={backgroundColor} borderRadius="xl" shadow="base" p="4" gap="6">
<RankItem />
</Grid>
</Box>
</>
);
};
Leaderboard.getLayout = getDashboardLayout;
export default Leaderboard;
website/src/pages/messages/[id]/index.tsx
+2 -3
View File
@@ -9,7 +9,7 @@ import { get } from "src/lib/api";
import useSWR from "swr";
const MessageDetail = ({ id }) => {
const backgroundColor = useColorModeValue("white", "gray.700");
const backgroundColor = useColorModeValue("white", "gray.800");
const [parent, setParent] = useState(null);
const { isLoading: isLoadingParent } = useSWR(id ? `/api/messages/${id}/parent` : null, get, {
@@ -38,11 +38,10 @@ const MessageDetail = ({ id }) => {
{parent && (
<>
<Box pb="4">
<Text fontFamily="Inter" fontWeight="bold" fontSize="xl" pb="2">
<Text fontWeight="bold" fontSize="xl" pb="2">
Parent
</Text>
<Box bg={backgroundColor} padding="4" borderRadius="xl" boxShadow="base" width="fit-content">
{" "}
<MessageTableEntry enabled item={parent} />
</Box>
</Box>
website/src/pages/messages/index.tsx
+9 -35
View File
@@ -1,38 +1,16 @@
import { Box, CircularProgress, SimpleGrid, Text, useColorModeValue } from "@chakra-ui/react";
import Head from "next/head";
import { useEffect, useState } from "react";
import { getDashboardLayout } from "src/components/Layout";
import { MessageTable } from "src/components/Messages/MessageTable";
import { get } from "src/lib/api";
import { Message } from "src/types/Conversation";
import useSWRImmutable from "swr/immutable";
const MessagesDashboard = () => {
const boxBgColor = useColorModeValue("white", "gray.700");
const boxBgColor = useColorModeValue("white", "gray.800");
const boxAccentColor = useColorModeValue("gray.200", "gray.900");
const [messages, setMessages] = useState<Message[]>(null);
const [userMessages, setUserMessages] = useState<Message[]>(null);
const { isLoading: isLoadingAll, mutate: mutateAll } = useSWRImmutable("/api/messages", get, {
onSuccess: setMessages,
});
const { isLoading: isLoadingUser, mutate: mutateUser } = useSWRImmutable(`/api/messages/user`, get, {
onSuccess: setUserMessages,
});
const receivedMessages = !isLoadingAll && Array.isArray(messages);
const receivedUserMessages = !isLoadingUser && Array.isArray(userMessages);
useEffect(() => {
if (!receivedMessages) {
mutateAll();
}
if (!receivedUserMessages) {
mutateUser();
}
}, [receivedMessages, mutateAll, receivedUserMessages, mutateUser]);
const { data: messages } = useSWRImmutable("/api/messages", get, { revalidateOnMount: true });
const { data: userMessages } = useSWRImmutable(`/api/messages/user`, get, { revalidateOnMount: true });
return (
<>
@@ -40,24 +18,24 @@ const MessagesDashboard = () => {
<title>Messages - Open Assistant</title>
<meta name="description" content="Chat with Open Assistant and provide feedback." />
</Head>
<SimpleGrid fontFamily="Inter" columns={[1, 1, 1, 2]} gap={4}>
<SimpleGrid columns={[1, 1, 1, 1, 1, 2]} gap={4}>
<Box>
<Text className="text-2xl font-bold" pb="4">
Recent messages
Recent Messages
</Text>
<Box
backgroundColor={boxBgColor}
boxShadow="base"
dropShadow={boxAccentColor}
borderRadius="xl"
className="p-6 shadow-sm"
className="p-3 sm:p-4 shadow-sm"
>
{receivedMessages ? <MessageTable enableLink messages={messages} /> : <CircularProgress isIndeterminate />}
{messages ? <MessageTable enableLink messages={messages} /> : <CircularProgress isIndeterminate />}
</Box>
</Box>
<Box>
<Text className="text-2xl font-bold" pb="4">
Your recent messages
Your Recent Messages
</Text>
<Box
backgroundColor={boxBgColor}
@@ -66,11 +44,7 @@ const MessagesDashboard = () => {
borderRadius="xl"
className="p-6 shadow-sm"
>
{receivedUserMessages ? (
<MessageTable enableLink messages={userMessages} />
) : (
<CircularProgress isIndeterminate />
)}
{userMessages ? <MessageTable enableLink messages={userMessages} /> : <CircularProgress isIndeterminate />}
</Box>
</Box>
</SimpleGrid>