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

Dashboard

Browse Source
This commit is contained in:
rsandb
2023-01-03 22:43:21 -06:00
parent 66662d9f7a
commit ba2c4cbc0f
19 changed files with 526 additions and 146 deletions
Download Patch File Download Diff File Expand all files Collapse all files
website/src/components/Widgets/LeaderboardWidget.tsx
+94
View File
@@ -0,0 +1,94 @@
import { Badge, Box, Image, Link, Stack, StackDivider, Text, useColorModeValue } from "@chakra-ui/react";
export function LeaderboardWidget() {
const backgroundColor = useColorModeValue("white", "gray.700");
const accentColor = useColorModeValue("gray.200", "gray.900");
//need to add streak info to chart
const leaderInfo = [
{
name: "fozziethebeat#6690",
image: "/images/temp-avatars/av1.jpg",
score: "5,208",
arrowDir: "increase",
streak: false,
streakCount: "5-Day Streak",
},
{
name: "k_nearest_neighbor#8579",
image: "/images/temp-avatars/av2.jpg",
score: "5,164",
arrowDir: "decrease",
streak: false,
streakCount: "",
},
{
name: "andreaskoepf#2266",
image: "/images/temp-avatars/av3.jpg",
score: "5,120",
arrowDir: "",
streak: false,
streakCount: "2-Day Streak",
},
{
name: "AbdBarho#1684",
image: "/images/temp-avatars/av4.jpg",
score: "4,260",
arrowDir: "",
streak: false,
streakCount: "",
},
{
name: "zu#9016",
image: "/images/temp-avatars/av5.jpg",
score: "3,608",
arrowDir: "",
streak: false,
streakCount: "",
},
];
return (
<main className="h-fit col-span-3">
<div className="flex flex-col gap-4">
<div className="flex items-end justify-between">
<Text className="text-2xl font-bold">Top 5 Contributors</Text>
<Link key="Leaderboard" href="#" _hover={{ textDecoration: "none" }}>
<Text color="blue.400" className="text-sm font-bold">
View All -&gt;
</Text>
</Link>
</div>
<Box
backgroundColor={backgroundColor}
boxShadow="base"
dropShadow={accentColor}
borderRadius="xl"
className="p-6 shadow-sm"
>
<Stack divider={<StackDivider />} spacing="4">
<div className="grid grid-cols-4 items-center font-bold">
<p>Name</p>
<div className="col-start-4 flex justify-center">
<p>Score</p>
</div>
</div>
{leaderInfo.map((item) => (
<div key="User" className="grid grid-cols-4 items-center">
<div className="flex items-center gap-3">
<Image alt="Profile Picture" src={item.image} boxSize="7" borderRadius="full"></Image>
<p>{item.name}</p>
<Badge colorScheme="purple">{item.streakCount}</Badge>
</div>
<Box bg={backgroundColor} className="col-start-4 flex justify-center">
<p>{item.score}</p>
</Box>
</div>
))}
</Stack>
</Box>
</div>
</main>
);
}
website/src/components/Widgets/SideMenu.tsx
+83
View File
@@ -0,0 +1,83 @@
import { Box, Button, Link, Text, Tooltip, useColorMode } from "@chakra-ui/react";
import { useRouter } from "next/router";
import { FiLayout, FiSun } from "react-icons/fi";
import { colors } from "styles/Theme/colors";
export function SideMenu() {
const router = useRouter();
const { colorMode, toggleColorMode } = useColorMode();
const buttonOptions = [
{
label: "Dashboard",
pathname: "/dashboard",
desc: "Dashboard Home",
icon: FiLayout,
},
// {
// label: "Leaderboard",
// pathname: "#",
// desc: "Public Leaderboard",
// icon: FiAward,
// },
// {
// label: "Stats",
// pathname: "#",
// desc: "User Statistics",
// icon: FiBarChart2,
// },
];
return (
<main className="sticky top-0 sm:h-full">
<Box
width={["100%", "100%", "100px", "280px"]}
backgroundColor={colorMode === "light" ? colors.light.div : colors.dark.div}
boxShadow="base"
borderRadius="xl"
className="grid grid-cols-4 gap-2 sm:flex sm:flex-col sm:justify-between p-4 h-full"
>
<nav className="grid grid-cols-3 col-span-3 sm:flex sm:flex-col gap-2">
{buttonOptions.map((item) => (
<Tooltip
key="Tooltip"
fontFamily="inter"
label={item.label}
placement="right"
className="hidden lg:hidden sm:block"
>
<Link key="{item.label}" href={item.pathname} style={{ textDecoration: "none" }}>
<Button
justifyContent={["center", "center", "center", "left"]}
gap="3"
size="lg"
width="full"
bg={router.pathname === item.pathname ? "blue.500" : null}
_hover={router.pathname === item.pathname ? { bg: "blue.600" } : null}
>
<item.icon className={router.pathname === item.pathname ? "text-blue-200" : null} />
<Text
fontWeight="normal"
color={router.pathname === item.pathname ? "white" : null}
className="hidden lg:block"
>
{item.label}
</Text>
</Button>
</Link>
</Tooltip>
))}
</nav>
<div>
<Tooltip fontFamily="inter" label="Toggle Dark Mode" placement="right" className="hidden lg:hidden sm:block">
<Button size="lg" width="full" justifyContent="center" onClick={toggleColorMode} gap="2">
<FiSun />
<Text fontWeight="normal" className="hidden lg:block">
{colorMode === "light" ? "Dark Mode" : "Light Mode"}
</Text>
</Button>
</Tooltip>
</div>
</Box>
</main>
);
}
website/src/components/Widgets/TaskOption.tsx
+120
View File
@@ -0,0 +1,120 @@
import { Box, Flex, GridItem, Heading, SimpleGrid, Text, useColorModeValue } from "@chakra-ui/react";
import Link from "next/link";
const crTasks = [
{
label: "Reply as User",
desc: "Chat with Open Assistant and help improve it’s responses as you interact with it.",
type: "create",
pathname: "/create/assistant_reply",
},
{
label: "Reply as Assistant",
desc: "Help Open Assistant improve its responses to conversations with other users.",
type: "create",
pathname: "/create/assistant_reply",
},
];
const evTasks = [
{
label: "Rank User Replies",
type: "eval",
desc: "Help Open Assistant improve its responses to conversations with other users.",
pathname: "/evaluate/rank_user_replies",
},
{
label: "Rank Assistant Replies",
desc: "Score prompts given by Open Assistant based on their accuracy and readability.",
type: "eval",
pathname: "/evaluate/rank_assistant_replies",
},
{
label: "Rank Initial Prompts",
desc: "Score prompts given by Open Assistant based on their accuracy and readability.",
type: "eval;",
pathname: "/evaluate/rank_initial_prompts",
},
];
export const TaskOption = () => {
const backgroundColor = useColorModeValue("white", "gray.700");
return (
<Box className="flex flex-col gap-14" fontFamily="inter">
<div>
<Text className="text-2xl font-bold pb-4">Create</Text>
<SimpleGrid columns={[1, 2, 2, 3, 4]} gap={4}>
{crTasks.map((item) => (
<Link key="Create Option" href={item.pathname}>
<GridItem
bg={backgroundColor}
borderRadius="xl"
boxShadow="base"
className="flex flex-col justify-between h-full"
>
<Box className="p-6 pb-10">
<Flex flexDir="column" gap="3">
<Heading size="md" fontFamily="inter">
{item.label}
</Heading>
<Text size="sm" opacity="80%">
{item.desc}
</Text>
</Flex>
</Box>
<Box
bg="blue.500"
borderBottomRadius="xl"
className="px-6 py-2 transition-colors duration-300"
_hover={{ backgroundColor: "blue.600" }}
>
<Text fontWeight="bold" color="white">
Go
</Text>
</Box>
</GridItem>
</Link>
))}
</SimpleGrid>
</div>
<div>
<Text className="text-2xl font-bold pb-4">Evaluate</Text>
<SimpleGrid columns={[1, 2, 2, 3, 4]} gap={4}>
{evTasks.map((item) => (
<Link key="Evaluate Option" href={item.pathname}>
<GridItem
bg={backgroundColor}
borderRadius="xl"
boxShadow="base"
className="flex flex-col justify-between h-full"
>
<Box className="p-6 pb-10">
<Flex flexDir="column" gap="3">
<Heading size="md" fontFamily="inter">
{item.label}
</Heading>
<Text size="sm" opacity="80%">
{item.desc}
</Text>
</Flex>
</Box>
<Box
bg="blue.500"
borderBottomRadius="xl"
className="px-6 py-2 transition-colors duration-300"
_hover={{ backgroundColor: "blue.600" }}
>
<Text fontWeight="bold" color="white">
Go
</Text>
</Box>
</GridItem>
</Link>
))}
</SimpleGrid>
</div>
</Box>
);
};
website/src/components/Widgets/index.ts
+3
View File
@@ -0,0 +1,3 @@
export { LeaderboardWidget } from "./LeaderboardWidget";
export { SideMenu } from "./SideMenu";
export { TaskOption } from "./TaskOption";