diff --git a/node_modules/.package-lock.json b/node_modules/.package-lock.json new file mode 100644 index 00000000..cfd645f0 --- /dev/null +++ b/node_modules/.package-lock.json @@ -0,0 +1,6 @@ +{ + "name": "Open-Assistant", + "lockfileVersion": 2, + "requires": true, + "packages": {} +} diff --git a/website/src/components/Container.tsx b/website/src/components/Container.tsx index f65ed282..4149c0da 100644 --- a/website/src/components/Container.tsx +++ b/website/src/components/Container.tsx @@ -1,5 +1,5 @@ import clsx from "clsx"; export function Container({ className, ...props }) { - return
; + return
; } diff --git a/website/src/components/Header/Header.tsx b/website/src/components/Header/Header.tsx index ddc369ea..ed41936f 100644 --- a/website/src/components/Header/Header.tsx +++ b/website/src/components/Header/Header.tsx @@ -1,45 +1,11 @@ -import { Box, Button, useColorMode } from "@chakra-ui/react"; -import { Popover } from "@headlessui/react"; -import { AnimatePresence, motion } from "framer-motion"; +import { Box, Button, Text, useColorMode } from "@chakra-ui/react"; import Image from "next/image"; import Link from "next/link"; import { useSession } from "next-auth/react"; import { FaUser } from "react-icons/fa"; -import { ColorModeIconToggle } from "../UI/ColorModeIconToggle"; import { UserMenu } from "./UserMenu"; -function MenuIcon(props) { - const { colorMode } = useColorMode(); - const stroke = colorMode === "light" ? "black" : "white"; - return ( - - ); -} - -function ChevronUpIcon(props) { - return ( - - ); -} - -function MobileNavLink({ children, ...props }) { - return ( - - {children} - - ); -} - function AccountButton() { const { data: session } = useSession(); if (session) { @@ -61,64 +27,20 @@ export function Header(props) { : colorMode === "light" ? "border-b border-gray-400" : "border-b border-zinc-800"; - return ( diff --git a/website/src/components/Header/NavLinks.tsx b/website/src/components/Header/NavLinks.tsx index 4f559e7e..47bd90be 100644 --- a/website/src/components/Header/NavLinks.tsx +++ b/website/src/components/Header/NavLinks.tsx @@ -1,7 +1,8 @@ -import { useColorMode } from "@chakra-ui/react"; +import { Text, useColorMode } from "@chakra-ui/react"; import { AnimatePresence, motion } from "framer-motion"; import Link from "next/link"; import { useState } from "react"; +import { colors } from "styles/Theme/colors"; export function NavLinks(): JSX.Element { const [hoveredIndex, setHoveredIndex] = useState(null); @@ -14,8 +15,8 @@ export function NavLinks(): JSX.Element { return ( <> {[ - ["Join Us", "/#join-us"], ["FAQ", "/#faq"], + ["Join Us", "/#join-us"], ].map(([label, href], index) => ( )} - {label} + + {label} + ))} diff --git a/website/src/components/Header/UserMenu.tsx b/website/src/components/Header/UserMenu.tsx index 35b71698..3e0e5dee 100644 --- a/website/src/components/Header/UserMenu.tsx +++ b/website/src/components/Header/UserMenu.tsx @@ -1,14 +1,15 @@ -import { Box, useColorModeValue } from "@chakra-ui/react"; +import { Box, Link, Text, useColorModeValue } from "@chakra-ui/react"; import { Popover } from "@headlessui/react"; import { AnimatePresence, motion } from "framer-motion"; import Image from "next/image"; import { signOut, useSession } from "next-auth/react"; import React from "react"; -import { FaCog, FaSignOutAlt } from "react-icons/fa"; +import { FiLayout, FiLogOut } from "react-icons/fi"; export function UserMenu() { const { data: session } = useSession(); - const backgroundColor = useColorModeValue("#FFFFFF", "#000000"); + const backgroundColor = useColorModeValue("white", "gray.700"); + const accentColor = useColorModeValue("gray.300", "gray.600"); if (!session) { return <>; @@ -16,10 +17,10 @@ export function UserMenu() { if (session && session.user) { const accountOptions = [ { - name: "Account Settings", - href: "/account", - desc: "Account Settings", - icon: FaCog, + name: "Dashboard", + href: "/dashboard", + desc: "Dashboard", + icon: FiLayout, //For future use }, ]; @@ -28,18 +29,22 @@ export function UserMenu() { {({ open }) => ( <> -
+ Profile Picture

{session.user.name || session.user.email}

-
+ {open && ( @@ -54,35 +59,45 @@ export function UserMenu() { y: -10, transition: { duration: 0.2 }, }} - className="absolute right-0 mt-3 w-screen bg-inherit max-w-xs p-4 rounded-md border border-slate-300/70" > - - {accountOptions.map((item) => ( - + + {accountOptions.map((item) => ( + +
+
+
+ {item.name} +
+ + ))} + signOut({ callbackUrl: "/" })} >
-
-

{item.name}

+ Sign Out
- - ))} - signOut({ callbackUrl: "/" })} - > -
- -
-
-

Sign Out

-
- + + diff --git a/website/src/components/Sortable/Sortable.tsx b/website/src/components/Sortable/Sortable.tsx index 269c39a4..270c67e7 100644 --- a/website/src/components/Sortable/Sortable.tsx +++ b/website/src/components/Sortable/Sortable.tsx @@ -17,8 +17,8 @@ import { verticalListSortingStrategy, } from "@dnd-kit/sortable"; import { ReactNode, useEffect, useState } from "react"; -import { CollapsableText } from "../CollapsableText"; +import { CollapsableText } from "../CollapsableText"; import { SortableItem } from "./SortableItem"; export interface SortableProps { diff --git a/website/src/components/Widgets/LeaderboardWidget.tsx b/website/src/components/Widgets/LeaderboardWidget.tsx new file mode 100644 index 00000000..5f680179 --- /dev/null +++ b/website/src/components/Widgets/LeaderboardWidget.tsx @@ -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 ( +
+
+
+ Top 5 Contributors + + + View All -> + + +
+ + } spacing="4"> +
+

Name

+
+

Score

+
+
+ {leaderInfo.map((item) => ( +
+
+ Profile Picture +

{item.name}

+ {item.streakCount} +
+ +

{item.score}

+ +
+ ))} + + +
+
+ ); +} diff --git a/website/src/components/Widgets/SideMenu.tsx b/website/src/components/Widgets/SideMenu.tsx new file mode 100644 index 00000000..8b21b71f --- /dev/null +++ b/website/src/components/Widgets/SideMenu.tsx @@ -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 ( +
+ + +
+ + + +
+ +
+ ); +} diff --git a/website/src/components/Widgets/TaskOption.tsx b/website/src/components/Widgets/TaskOption.tsx new file mode 100644 index 00000000..f807f391 --- /dev/null +++ b/website/src/components/Widgets/TaskOption.tsx @@ -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 ( + +
+ Create + + {crTasks.map((item) => ( + + + + + + {item.label} + + + {item.desc} + + + + + + Go + + + + + ))} + +
+
+ Evaluate + + {evTasks.map((item) => ( + + + + + + {item.label} + + + {item.desc} + + + + + + Go + + + + + ))} + +
+ + ); +}; diff --git a/website/src/components/Widgets/index.ts b/website/src/components/Widgets/index.ts new file mode 100644 index 00000000..48a40e74 --- /dev/null +++ b/website/src/components/Widgets/index.ts @@ -0,0 +1,3 @@ +export { LeaderboardWidget } from "./LeaderboardWidget"; +export { SideMenu } from "./SideMenu"; +export { TaskOption } from "./TaskOption"; diff --git a/website/src/middleware.ts b/website/src/middleware.ts index 8e48d3b7..b6a539b4 100644 --- a/website/src/middleware.ts +++ b/website/src/middleware.ts @@ -4,5 +4,5 @@ export { default } from "next-auth/middleware"; * Guards all pages under `/grading` and redirects them to the sign in page. */ export const config = { - matcher: ["/create/:path*", "/evaluate/:path*", "/account/:path*"], + matcher: ["/create/:path*", "/evaluate/:path*", "/account/:path*", "/dashboard"], }; diff --git a/website/src/pages/account/edit.tsx b/website/src/pages/account/edit.tsx index 322f4113..f695fce7 100644 --- a/website/src/pages/account/edit.tsx +++ b/website/src/pages/account/edit.tsx @@ -51,7 +51,6 @@ export default function Account() { -

{session.user.email}

); diff --git a/website/src/pages/auth/signin.tsx b/website/src/pages/auth/signin.tsx index 221eb1f0..59fc7c05 100644 --- a/website/src/pages/auth/signin.tsx +++ b/website/src/pages/auth/signin.tsx @@ -15,13 +15,13 @@ function Signin({ csrfToken, providers }) { const emailEl = useRef(null); const signinWithEmail = (ev: React.FormEvent) => { ev.preventDefault(); - signIn(email.id, { callbackUrl: "/", email: emailEl.current.value }); + signIn(email.id, { callbackUrl: "/dashboard", email: emailEl.current.value }); }; const debugUsernameEl = useRef(null); function signinWithDebugCredentials(ev: React.FormEvent) { ev.preventDefault(); - signIn(credentials.id, { callbackUrl: "/", username: debugUsernameEl.current.value }); + signIn(credentials.id, { callbackUrl: "/dashboard", username: debugUsernameEl.current.value }); } const { colorMode } = useColorMode(); @@ -98,7 +98,8 @@ function Signin({ csrfToken, providers }) { )} -
+
+
By signing up you agree to our

Terms of Service diff --git a/website/src/pages/dashboard.tsx b/website/src/pages/dashboard.tsx new file mode 100644 index 00000000..018227af --- /dev/null +++ b/website/src/pages/dashboard.tsx @@ -0,0 +1,37 @@ +import { Box, useColorMode } from "@chakra-ui/react"; +import Head from "next/head"; +import { Header } from "src/components/Header"; +import { LeaderboardWidget, SideMenu, TaskOption } from "src/components/Widgets"; +import { colors } from "styles/Theme/colors"; + +const Dashboard = () => { + const { colorMode } = useColorMode(); + return ( + <> + + Dashboard - Open Assistant + + + + + + + + + + + + + + + ); +}; + +Dashboard.getLayout = (page) => ( +
+
+ {page} +
+); + +export default Dashboard; diff --git a/website/src/pages/evaluate/rank_user_replies.tsx b/website/src/pages/evaluate/rank_user_replies.tsx index 250b17fc..3f806a8a 100644 --- a/website/src/pages/evaluate/rank_user_replies.tsx +++ b/website/src/pages/evaluate/rank_user_replies.tsx @@ -1,7 +1,9 @@ import { useColorMode } from "@chakra-ui/react"; import Head from "next/head"; import { useState } from "react"; +import { ContextMessages } from "src/components/ContextMessages"; import { LoadingScreen } from "src/components/Loading/LoadingScreen"; +import { Message } from "src/components/Messages"; import { Sortable } from "src/components/Sortable/Sortable"; import { SurveyCard } from "src/components/Survey/SurveyCard"; import { TaskControls } from "src/components/Survey/TaskControls"; @@ -9,8 +11,6 @@ import fetcher from "src/lib/fetcher"; import poster from "src/lib/poster"; import useSWRImmutable from "swr/immutable"; import useSWRMutation from "swr/mutation"; -import { Message } from "src/components/Messages"; -import { ContextMessages } from "src/components/ContextMessages"; const RankUserReplies = () => { const [tasks, setTasks] = useState([]); diff --git a/website/src/pages/index.tsx b/website/src/pages/index.tsx index 08528245..04f99829 100644 --- a/website/src/pages/index.tsx +++ b/website/src/pages/index.tsx @@ -1,16 +1,10 @@ import Head from "next/head"; -import { useSession } from "next-auth/react"; import { CallToAction } from "src/components/CallToAction"; import { Faq } from "src/components/Faq"; -import { Footer } from "src/components/Footer"; -import { Header } from "src/components/Header"; import { Hero } from "src/components/Hero"; import { getTransparentHeaderLayout } from "src/components/Layout"; -import { TaskSelection } from "src/components/TaskSelection"; const Home = () => { - const { data: session } = useSession(); - return ( <> @@ -20,15 +14,11 @@ const Home = () => { content="Conversational AI for everyone. An open source project to create a chat enabled GPT LLM run by LAION and contributors around the world." /> - {session ? ( - - ) : ( -
- - - -
- )} +
+ + + +
); }; diff --git a/website/styles/Theme/Components/Container.tsx b/website/styles/Theme/Components/Container.tsx new file mode 100644 index 00000000..ec7eeed9 --- /dev/null +++ b/website/styles/Theme/Components/Container.tsx @@ -0,0 +1,25 @@ +import { + color, + defineStyle, + defineStyleConfig, + // transition, +} from "@chakra-ui/styled-system"; +import { colors } from "../colors"; + +const baseStyle = defineStyle(({ colorMode }) => ({ + minWidth: "100%", + bg: colorMode === "light" ? colors.light.bg : colors.dark.bg, + // transition: "background-color 300ms cubic-bezier(0.4, 0, 1, 1)", + color: colorMode === "light" ? colors.light.text : colors.dark.text, +})); + +const variants = { + "no-padding": { + padding: 0, + }, +}; + +export const containerTheme = defineStyleConfig({ + baseStyle, + variants, +}); diff --git a/website/styles/Theme/colors.tsx b/website/styles/Theme/colors.tsx new file mode 100644 index 00000000..acadfa2b --- /dev/null +++ b/website/styles/Theme/colors.tsx @@ -0,0 +1,14 @@ +export const colors = { + light: { + bg: "gray.100", + btn: "gray.50", + div: "white", + text: "black", + }, + dark: { + bg: "gray.900", + btn: "gray.600", + div: "gray.700", + text: "gray.200", + }, +}; diff --git a/website/styles/Theme/index.tsx b/website/styles/Theme/index.tsx new file mode 100644 index 00000000..9e9b0d82 --- /dev/null +++ b/website/styles/Theme/index.tsx @@ -0,0 +1,68 @@ +import { + type ThemeConfig, + extendTheme, + usePrefersReducedMotion, +} from "@chakra-ui/react"; +import { containerTheme } from "./Components/Container"; +import { StyleFunctionProps, Styles } from "@chakra-ui/theme-tools"; + +const config: ThemeConfig = { + initialColorMode: "system", + useSystemColorMode: false, + disableTransitionOnChange: true, +}; + +const components = { + Container: containerTheme, + Box: (props: StyleFunctionProps) => ({ + backgroundColor: props.colorMode === "light" ? "white" : "gray.800", + }), + Button: { + baseStyle: { + fontWeight: "normal", + }, + sizes: { + lg: { + fontSize: "md", + paddingY: "7", + }, + }, + variants: { + solid: (props: StyleFunctionProps) => ({ + bg: props.colorMode === "light" ? "gray.100" : "gray.600", + _hover: { + bg: props.colorMode === "light" ? "gray.200" : "#3D4A60", + }, + _active: { + bg: props.colorMode === "light" ? "gray.300" : "#374254", + }, + borderRadius: "lg", + }), + // gradient: (props: StyleFunctionProps) => ({ + // bg: `linear-gradient(${white}, ${bgColor}) padding-box, + // linear-gradient(135deg, ${lgFrom}, ${lgTo}) border-box`, + // }), + }, + }, +}; + +const breakpoints = { + sm: "640px", + md: "768px", + lg: "1024px", + xl: "1280px", + "2xl": "1536px", +}; + +const styles = { + global: (props) => ({ + main: { + fontFamily: "Inter", + }, + header: { + fontFamily: "Inter", + }, + }), +}; + +export const theme = extendTheme({ config, styles, components, breakpoints });