This commit is contained in:
rsandb
2023-01-16 17:16:18 -06:00
19 changed files with 141 additions and 65 deletions
+5 -2
View File
@@ -11,6 +11,8 @@ import {
} from "@chakra-ui/react";
import React, { ReactNode } from "react";
const killEvent = (e) => e.stopPropagation();
export const CollapsableText = ({
text,
maxLength = 220,
@@ -44,8 +46,9 @@ export const CollapsableText = ({
</Button>
</span>
<Modal isOpen={isOpen} onClose={onClose} size="xl" scrollBehavior={"inside"}>
<ModalOverlay style={{ width: "100%", height: "100%" }}>
<ModalContent maxH="400">
{/* we kill the event here to disable drag and drop, since it is in the same container */}
<ModalOverlay onMouseDown={killEvent}>
<ModalContent alignItems="center">
<ModalHeader>Full Text</ModalHeader>
<ModalCloseButton />
<ModalBody>{text}</ModalBody>
@@ -0,0 +1,45 @@
import { Box, Divider } from "@chakra-ui/react";
import Image from "next/image";
import Link from "next/link";
import { useMemo } from "react";
export function SlimFooter() {
return (
<footer>
<Box>
<Divider />
<Box display="flex" gap="4" flexDir="column" alignItems="center" my="8">
<Box display="flex" alignItems="center">
<Link href="/" aria-label="Home" className="flex items-center gap-1">
<Image src="/images/logos/logo.svg" className="mx-auto object-fill" width="48" height="48" alt="logo" />
</Link>
</Box>
<nav>
<Box display="flex" gap="5" fontSize="xs" color="blue.500">
<FooterLink href="/privacy-policy" label="Privacy Policy" />
<FooterLink href="/terms-of-service" label="Terms of Service" />
<FooterLink href="https://github.com/LAION-AI/Open-Assistant" label="Github" />
<FooterLink href="https://ykilcher.com/open-assistant-discord" label="Discord" />
</Box>
</nav>
</Box>
</Box>
</footer>
);
}
const FooterLink = ({ href, label }: { href: string; label: string }) =>
useMemo(
() => (
<Link
href={href}
rel="noopener noreferrer nofollow"
target="_blank"
aria-label={label}
className="hover:underline underline-offset-2"
>
{label}
</Link>
),
[href, label]
);
+57 -35
View File
@@ -1,40 +1,66 @@
import { useColorMode } from "@chakra-ui/react";
import { Box, Divider, Flex, Text, useColorMode } from "@chakra-ui/react";
import Image from "next/image";
import Link from "next/link";
import { useMemo } from "react";
export function Footer() {
const { colorMode } = useColorMode();
const bgColorClass = colorMode === "light" ? "bg-transparent" : "bg-gray-800";
const borderClass = colorMode === "light" ? "border-slate-200" : "border-transparent";
const backgroundColor = colorMode === "light" ? "white" : "gray.800";
const textColor = colorMode === "light" ? "black" : "gray.300";
return (
<footer className={bgColorClass}>
<div className={`flex mx-auto max-w-7xl justify-between border-t p-10 ${borderClass}`}>
<div className="flex items-center pr-8">
<Link href="/" aria-label="Home" className="flex items-center">
<Image src="/images/logos/logo.svg" className="mx-auto object-fill" width="52" height="52" alt="logo" />
</Link>
<footer>
<Box bg={backgroundColor}>
<Divider />
<Box
display="flex"
flexDirection={["column", "row"]}
justifyContent="space-between"
alignItems="center"
gap="6"
p="8"
pb={["14", "8"]}
w="full"
mx="auto"
maxWidth="7xl"
>
<Flex alignItems="center">
<Box pr="2">
<Link href="/" aria-label="Home">
<Image src="/images/logos/logo.svg" width="52" height="52" alt="logo" />
</Link>
</Box>
<div className="ml-2">
<p className="text-base font-bold">Open Assistant</p>
<p className="text-sm">Conversational AI for everyone.</p>
</div>
</div>
<Box>
<Text fontSize="md" fontWeight="bold">
Open Assistant
</Text>
<Text fontSize="sm" color="gray.500">
Conversational AI for everyone.
</Text>
</Box>
</Flex>
<nav className="grid grid-cols-2 gap-20 leading-5 text-sm">
<div className="flex flex-col">
<b className="pb-1">Legal</b>
<FooterLink href="/privacy-policy" label="Privacy Policy" />
<FooterLink href="/terms-of-service" label="Terms of Service" />
</div>
<div className="flex flex-col">
<b className="pb-1">Connect</b>
<FooterLink href="https://github.com/LAION-AI/Open-Assistant" label="Github" />
<FooterLink href="https://ykilcher.com/open-assistant-discord" label="Discord" />
</div>
</nav>
</div>
<nav>
<Box display="flex" flexDirection={["column", "row"]} gap={["6", "14"]} alignItems="center" fontSize="sm">
<Flex direction="column" alignItems={["center", "start"]}>
<Text fontWeight="bold" color={textColor}>
Legal
</Text>
<FooterLink href="/privacy-policy" label="Privacy Policy" />
<FooterLink href="/terms-of-service" label="Terms of Service" />
</Flex>
<Flex direction="column" alignItems={["center", "start"]}>
<Text fontWeight="bold" color={textColor}>
Connect
</Text>
<FooterLink href="https://github.com/LAION-AI/Open-Assistant" label="Github" />
<FooterLink href="https://ykilcher.com/open-assistant-discord" label="Discord" />
</Flex>
</Box>
</nav>
</Box>
</Box>
</footer>
);
}
@@ -42,14 +68,10 @@ export function Footer() {
const FooterLink = ({ href, label }: { href: string; label: string }) =>
useMemo(
() => (
<Link
href={href}
rel="noopener noreferrer nofollow"
target="_blank"
aria-label={label}
className="hover:underline underline-offset-2"
>
{label}
<Link href={href} rel="noopener noreferrer nofollow" target="_blank" aria-label={label}>
<Text color="blue.500" textUnderlineOffset={2} _hover={{ textDecoration: "underline" }}>
{label}
</Text>
</Link>
),
[href, label]
+10 -4
View File
@@ -1,9 +1,11 @@
// https://nextjs.org/docs/basic-features/layouts
import { Box, Grid } from "@chakra-ui/react";
import type { NextPage } from "next";
import { FiBarChart2, FiLayout, FiMessageSquare, FiUsers } from "react-icons/fi";
import { Header } from "src/components/Header";
import { SlimFooter } from "./Dashboard/SlimFooter";
import { Footer } from "./Footer";
import { SideMenuLayout } from "./SideMenuLayout";
@@ -28,7 +30,7 @@ export const getTransparentHeaderLayout = (page: React.ReactElement) => (
);
export const getDashboardLayout = (page: React.ReactElement) => (
<div className="grid grid-rows-[min-content_1fr_min-content] h-full justify-items-stretch">
<Grid templateRows="min-content 1fr" h="full">
<Header transparent={true} />
<SideMenuLayout
menuButtonOptions={[
@@ -52,10 +54,14 @@ export const getDashboardLayout = (page: React.ReactElement) => (
},
]}
>
{page}
<Grid templateRows="1fr min-content" h="full">
<Box>{page}</Box>
<Box mt="10">
<SlimFooter />
</Box>
</Grid>
</SideMenuLayout>
<Footer />
</div>
</Grid>
);
export const getAdminLayout = (page: React.ReactElement) => (
@@ -8,7 +8,7 @@ import useSWRImmutable from "swr/immutable";
const columns = [
{
Header: "Rank",
accessor: (item: LeaderboardEntity, rowIndex: number) => "#" + item.rank,
accessor: "rank",
style: { width: "90px" },
},
{
+1 -1
View File
@@ -51,7 +51,7 @@ const Roadmap = () => {
</div>
<h4 className="font-bold text-xl text-[#858585] text-center max-w-[10rem]">Growing Up</h4>
<ul className="ml-6 md:ml-8 lg:ml-6 space-y-4 text-[#858585] list-disc">
<li>Third-Party Extentions</li>
<li>Third-Party Extensions</li>
<li>Device Control</li>
<li>Multi-Modality</li>
</ul>
+3 -3
View File
@@ -12,11 +12,11 @@ export const SideMenuLayout = (props: SideMenuLayoutProps) => {
return (
<Box backgroundColor={colorMode === "light" ? colors.light.bg : colors.dark.bg} className="sm:overflow-hidden">
<Box className="sm:flex h-full lg:gap-6">
<Box className="p-3 lg:p-6 lg:pr-0">
<Box display="flex" flexDirection={["column", "row"]} h="full" gap={["0", "0", "0", "6"]}>
<Box p={["3", "3", "3", "6"]} pr={["3", "3", "3", "0"]}>
<SideMenu buttonOptions={props.menuButtonOptions} />
</Box>
<Box className="flex flex-col overflow-y-auto p-3 lg:p-6 lg:pl-0 gap-14 w-full">{props.children}</Box>
<Box className="overflow-y-auto p-3 lg:p-6 lg:pl-0 w-full">{props.children}</Box>
</Box>
</Box>
);
@@ -28,7 +28,7 @@ const label_messages: { [label: string]: { description: string; explanation: str
explanation: [
'We consider the following unwanted content as spam: trolling, intentional undermining of our purpose, illegal material, material that violates our code of conduct, and other things that are inappropriate for our dataset. We collect these under the common heading of "spam".',
"This is not an assessment of whether this message is the best possible answer. Especially for prompts or user-replies, we very much want to retain all kinds of responses in the dataset, so that the assistant can learn to reply appropriately.",
"Please mark this text as spam only if it is clearly unsuited to be part of our dataset, as outlined above, and try not to make any subjective value-judgements beyond that.",
"Please mark this text as spam only if it is clearly unsuited to be part of our dataset, as outlined above, and try not to make any subjective value-judgments beyond that.",
],
},
};
+4 -4
View File
@@ -91,7 +91,7 @@ export const TaskTypes: TaskInfo[] = [
unchanged_title: "Order Unchanged",
unchanged_message: "You have not changed the order of the prompts. Are you sure you would like to continue?",
},
// label (fuill)
// label (full)
{
label: "Label Initial Prompt",
desc: "Provide labels for a prompt.",
@@ -107,7 +107,7 @@ export const TaskTypes: TaskInfo[] = [
desc: "Provide labels for a prompt.",
category: TaskCategory.Label,
pathname: "/label/label_prompter_reply",
overview: "Given the following discussion, provide labels for the final promp",
overview: "Given the following discussion, provide labels for the final prompt",
type: "label_prompter_reply",
mode: "full",
update_type: "text_labels",
@@ -138,7 +138,7 @@ export const TaskTypes: TaskInfo[] = [
desc: "Provide labels for a prompt.",
category: TaskCategory.Label,
pathname: "/label/label_prompter_reply",
overview: "Read the following conversation and then answer the question about the last prompt in the disscusion.",
overview: "Read the following conversation and then answer the question about the last prompt in the discussion.",
type: "label_prompter_reply",
mode: "simple",
update_type: "text_labels",
@@ -148,7 +148,7 @@ export const TaskTypes: TaskInfo[] = [
desc: "Provide labels for a prompt.",
category: TaskCategory.Label,
pathname: "/label/label_assistant_reply",
overview: "Read the following conversation and then answer the question about the last prompt in the disscusion.",
overview: "Read the following conversation and then answer the question about the last prompt in the discussion.",
type: "label_assistant_reply",
mode: "simple",
update_type: "text_labels",
+1 -1
View File
@@ -170,7 +170,7 @@ export class OasstApiClient {
const params = new URLSearchParams();
params.append("max_count", max_count.toString());
// The backend API uses different query paramters depending on the
// The backend API uses different query parameters depending on the
// pagination direction but they both take the same cursor value.
// Depending on direction, pick the right query param.
if (cursor !== "") {
-3
View File
@@ -6,9 +6,6 @@ import { PageEmptyState } from "src/components/EmptyState";
import { getTransparentHeaderLayout } from "src/components/Layout";
function Error() {
const router = useRouter();
const backgroundColor = useColorModeValue("white", "gray.800");
return (
<>
<Head>
+1 -1
View File
@@ -42,7 +42,7 @@ const errorMessages: Record<SignInErrorTypes, string> = {
interface SigninProps {
providers: Awaited<ReturnType<typeof getProviders>>;
}
// eslint-disable-next-line @typescript-eslint/no-unused-vars
function Signin({ providers }: SigninProps) {
const router = useRouter();
const { discord, email, github, credentials } = providers;
+2 -2
View File
@@ -19,8 +19,8 @@ const InitialPrompt = () => {
return (
<>
<Head>
<title>Reply as Assistant</title>
<meta name="description" content="Reply as Assistant." />
<title>Initial Prompt</title>
<meta name="description" content="Add an initial Prompt." />
</Head>
<Task key={tasks[0].task.id} frontendId={tasks[0].id} task={tasks[0].task} trigger={trigger} mutate={reset} />
</>
+2 -2
View File
@@ -19,8 +19,8 @@ const UserReply = () => {
return (
<>
<Head>
<title>Reply as Assistant</title>
<meta name="description" content="Reply as Assistant." />
<title>Reply as User</title>
<meta name="description" content="Reply as User." />
</Head>
<Task key={tasks[0].task.id} frontendId={tasks[0].id} task={tasks[0].task} trigger={trigger} mutate={reset} />
</>
+5 -2
View File
@@ -1,3 +1,4 @@
import { Flex } from "@chakra-ui/react";
import Head from "next/head";
import { useSession } from "next-auth/react";
import { LeaderboardTable, TaskOption } from "src/components/Dashboard";
@@ -16,8 +17,10 @@ const Dashboard = () => {
<title>Dashboard - Open Assistant</title>
<meta name="description" content="Chat with Open Assistant and provide feedback." />
</Head>
<TaskOption displayTaskCategories={[TaskCategory.Tasks]} />
<LeaderboardTable />
<Flex direction="column" gap="10">
<TaskOption displayTaskCategories={[TaskCategory.Tasks]} />
<LeaderboardTable />
</Flex>
</>
);
};
+1 -1
View File
@@ -1,4 +1,4 @@
import { Box, Heading, Tabs, TabList, TabPanels, Tab, TabPanel } from "@chakra-ui/react";
import { Box, Heading, Tab, TabList, TabPanel, TabPanels, Tabs } from "@chakra-ui/react";
import Head from "next/head";
import { getDashboardLayout } from "src/components/Layout";
import { LeaderboardGridCell } from "src/components/LeaderboardGridCell";
+1 -1
View File
@@ -88,7 +88,7 @@ const PrivacyPolicy = () => {
{
number: "4",
title: "Inquiries",
desc: "When you contact us via e-mail, telephone or telefax, your inquiry, including all personal data arising thereof will be stored by us for the purpose of processing your request. We will not pass on these data without your consent. The processing of these data is based on Article 6 (1) (1) (b) GDPR, if your inquiry is related to the fulfilment of a contract concluded with us or required for the implementation of pre-contractual measures. Furthermore, the processing is based on Article 6 (1) (1) (f) GDPR, because we have a legitimate interest in the effective handling of requests sent to us. In addition, according to Article 6 (1) (1) (c) GDPR we are also entitled to the processing of the above-mentioned data, because we are legally bound to enable fast electronic contact and immediate communication. Of course, your data will only be used strictly according to purpose and only for processing and responding to your request. After final processing, your data will immediately be anonymized or deleted, unless we are bound by a legally prescribed storage period.",
desc: "When you contact us via e-mail, telephone or telefax, your inquiry, including all personal data arising thereof will be stored by us for the purpose of processing your request. We will not pass on these data without your consent. The processing of these data is based on Article 6 (1) (1) (b) GDPR, if your inquiry is related to the fulfillment of a contract concluded with us or required for the implementation of pre-contractual measures. Furthermore, the processing is based on Article 6 (1) (1) (f) GDPR, because we have a legitimate interest in the effective handling of requests sent to us. In addition, according to Article 6 (1) (1) (c) GDPR we are also entitled to the processing of the above-mentioned data, because we are legally bound to enable fast electronic contact and immediate communication. Of course, your data will only be used strictly according to purpose and only for processing and responding to your request. After final processing, your data will immediately be anonymized or deleted, unless we are bound by a legally prescribed storage period.",
sections: [],
},
{
+1 -1
View File
@@ -14,7 +14,7 @@ const TermsOfService = () => {
{
number: "1.1",
title: "",
desc: `LAION (association in formation), Marie-Henning-Weg 143, 21035 Hamburg (hereinafter referred to as: "LAION") operates an online portal for the producing a machine learning model called Open Assistant using crowdsourced data.`,
desc: `LAION (association in formation), Marie-Henning-Weg 143, 21035 Hamburg (hereinafter referred to as: "LAION") operates an online portal for the producing a machine learning model called Open Assistant using crowd-sourced data.`,
},
{
number: "1.2",
View File