Merge https://github.com/LAION-AI/Open-Assistant into dark-mode-implementation

website/src/components/Button.tsx

@@ -1,19 +0,0 @@
-import clsx from "clsx";
-
-export const Button = (
-  props: React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>
-) => {
-  const { className, children, ...rest } = props;
-  return (
-    <button
-      type="button"
-      className={clsx(
-        "inline-flex items-center rounded-md border border-transparent px-4 py-2 text-sm font-medium focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2",
-        className
-      )}
-      {...rest}
-    >
-      {children}
-    </button>
-  );
-};

website/src/components/Buttons/Skip.tsx

@@ -0,0 +1,9 @@
+import { Button, ButtonProps } from "@chakra-ui/react";
+
+export const SkipButton = ({ children, ...props }: ButtonProps) => {
+  return (
+    <Button size="lg" variant="outline" {...props}>
+      {children}
+    </Button>
+  );
+};

website/src/components/Buttons/Submit.tsx

@@ -0,0 +1,9 @@
+import { Button, ButtonProps } from "@chakra-ui/react";
+
+export const SubmitButton = ({ children, ...props }: ButtonProps) => {
+  return (
+    <Button size="lg" variant="solid" {...props}>
+      {children}
+    </Button>
+  );
+};

website/src/components/CircleBackground.tsx

@@ -1,7 +1,7 @@
 import { useId } from "react";
 
 export function CircleBackground({ color, width = 558, height = 558, ...props }) {
-  let id = useId();
+  const id = useId();
 
   return (
     <svg viewBox="0 0 558 558" width={width} height={height} fill="none" aria-hidden="true" {...props}>

website/src/components/Footer.tsx

@@ -34,17 +34,19 @@ export function Footer() {
                 </Link>
               </div>
             </div>
-            <div className="flex flex-col text-sm leading-7">
-              <b>Legal</b>
-              <div className="flex flex-col leading-5">
-                <Link href="#" aria-label="Privacy Policy" className="hover:underline underline-offset-2">
-                  Privacy Policy
-                </Link>
-                <Link href="#" aria-label="Terms of Service" className="hover:underline underline-offset-2">
-                  Terms of Service
-                </Link>
+            <nav className="flex justify-center gap-20">
+              <div className="flex flex-col text-sm leading-7">
+                <b>Information</b>
+                <div className="flex flex-col leading-5">
+                  <Link href="#" aria-label="Our Team" className="hover:underline underline-offset-2">
+                    Our Team
+                  </Link>
+                  <Link href="/#join-us" aria-label="Join Us" className="hover:underline underline-offset-2">
+                    Join Us
+                  </Link>
+                </div>
               </div>
-            </div>
+            </nav>
             <div className="flex flex-col text-sm leading-7">
               <b>Connect</b>
               <div className="flex flex-col leading-5">

website/src/components/Header/Header.tsx

@@ -100,8 +100,8 @@ export function Header(props) {
                         className="absolute inset-x-0 top-0 z-0 origin-top rounded-b-2xl bg-white px-6 pb-6 pt-32 shadow-2xl shadow-gray-900/20"
                       >
                         <div className="space-y-4">
-                          <MobileNavLink href="#join-us">Join Us</MobileNavLink>
-                          <MobileNavLink href="#faqs">FAQs</MobileNavLink>
+                          <MobileNavLink href="/#join-us">Join Us</MobileNavLink>
+                          <MobileNavLink href="/#faqs">FAQs</MobileNavLink>
                         </div>
                         <div className="mt-8 flex flex-col gap-4"></div>
                       </Popover.Panel>

website/src/components/Header/NavLinks.tsx

@@ -3,13 +3,13 @@ import Link from "next/link";
 import { AnimatePresence, motion } from "framer-motion";
 
 export function NavLinks(): JSX.Element {
-  let [hoveredIndex, setHoveredIndex] = useState(null);
+  const [hoveredIndex, setHoveredIndex] = useState(null);
 
   return (
     <>
       {[
-        ["Join Us", "#join-us"],
-        ["FAQ", "#faq"],
+        ["Join Us", "/#join-us"],
+        ["FAQ", "/#faq"],
       ].map(([label, href], index) => (
         <Link
           key={label}

website/src/components/Header/UserMenu.tsx

@@ -3,7 +3,7 @@ import { signOut, useSession } from "next-auth/react";
 import Image from "next/image";
 import { Popover } from "@headlessui/react";
 import { AnimatePresence, motion } from "framer-motion";
-import { FaCog, FaSignOutAlt, FaGithub } from "react-icons/fa";
+import { FaCog, FaSignOutAlt } from "react-icons/fa";
 import { Box, useColorModeValue } from "@chakra-ui/react";
 
 export function UserMenu() {

website/src/components/Layout.tsx

@@ -5,7 +5,7 @@ import type { NextPage } from "next";
 import { Footer } from "./Footer";
 import { Header } from "src/components/Header";
 
-export type NextPageWithLayout<P = {}, IP = P> = NextPage<P, IP> & {
+export type NextPageWithLayout<P = unknown, IP = P> = NextPage<P, IP> & {
   getLayout?: (page: React.ReactElement) => React.ReactNode;
 };
 

website/src/components/Sortable/Sortable.tsx

@@ -0,0 +1,48 @@
+import { ReactNode, useEffect, useState } from "react";
+import { SortableItem } from "./SortableItem";
+
+export interface SortableProps {
+  items: ReactNode[];
+  onChange: (newSortedIndices: number[]) => void;
+}
+
+export const Sortable = ({ items, onChange }) => {
+  const [sortOrder, setSortOrder] = useState<number[]>([]);
+
+  const update = (newRanking: number[]) => {
+    setSortOrder(newRanking);
+    onChange(newRanking);
+  };
+
+  useEffect(() => {
+    const indices = Array.from({ length: items.length }).map((_, i) => i);
+    setSortOrder(indices);
+    onChange(indices);
+  }, [items, onChange]);
+
+  return (
+    <ul className="flex flex-col gap-4">
+      {sortOrder.map((rank, i) => (
+        <SortableItem
+          key={`${rank}`}
+          canIncrement={i > 0}
+          onIncrement={() => {
+            const newRanking = sortOrder.slice();
+            const newIdx = i - 1;
+            [newRanking[i], newRanking[newIdx]] = [newRanking[newIdx], newRanking[i]];
+            update(newRanking);
+          }}
+          canDecrement={i < sortOrder.length - 1}
+          onDecrement={() => {
+            const newRanking = sortOrder.slice();
+            const newIdx = i + 1;
+            [newRanking[i], newRanking[newIdx]] = [newRanking[newIdx], newRanking[i]];
+            update(newRanking);
+          }}
+        >
+          {items[rank]}
+        </SortableItem>
+      ))}
+    </ul>
+  );
+};

website/src/components/Sortable/SortableItem.tsx

@@ -0,0 +1,40 @@
+import { ArrowUpIcon, ArrowDownIcon } from "@heroicons/react/20/solid";
+import { Button } from "@chakra-ui/react";
+import clsx from "clsx";
+
+export interface SortableItemProps {
+  canIncrement: boolean;
+  canDecrement: boolean;
+  onIncrement: () => void;
+  onDecrement: () => void;
+  children: React.ReactNode;
+}
+
+export const SortableItem = ({ canIncrement, canDecrement, onIncrement, onDecrement, children }: SortableItemProps) => {
+  return (
+    <li className="grid grid-cols-[min-content_1fr] items-center rounded-lg shadow-md gap-x-2 p-2">
+      <ArrowButton active={canIncrement} onClick={onIncrement}>
+        <ArrowUpIcon width={28} />
+      </ArrowButton>
+      <span style={{ gridRow: "span 2" }}>{children}</span>
+
+      <ArrowButton active={canDecrement} onClick={onDecrement}>
+        <ArrowDownIcon width={28} />
+      </ArrowButton>
+    </li>
+  );
+};
+
+interface ArrowButtonProps {
+  active: boolean;
+  onClick: () => void;
+  children: React.ReactNode;
+}
+
+const ArrowButton = ({ children, active, onClick }: ArrowButtonProps) => {
+  return (
+    <Button justifyContent="center" variant="ghost" onClick={onClick} disabled={!active}>
+      {children}
+    </Button>
+  );
+};

website/src/components/TaskInfo/TaskInfo.tsx

@@ -0,0 +1,10 @@
+export const TaskInfo = ({ id, output }: { id: string; output: any }) => {
+  return (
+    <div className="grid grid-cols-[min-content_auto] gap-x-2 text-gray-700">
+      <b>Prompt</b>
+      <span>{id}</span>
+      <b>Output</b>
+      <span>{output}</span>
+    </div>
+  );
+};

website/src/components/TaskSelection/TaskSelection.tsx

@@ -34,6 +34,18 @@ export const TaskSelection = () => {
           title="Rank Initial Prompts"
           link="/evaluate/rank_initial_prompts"
         />
+        <TaskOption
+          alt="Rank User Replies"
+          img="/images/logos/logo.svg"
+          title="Rank User Replies"
+          link="/evaluate/rank_user_replies"
+        />
+        <TaskOption
+          alt="Rank Assistant Replies"
+          img="/images/logos/logo.svg"
+          title="Rank Assistant Replies"
+          link="/evaluate/rank_assistant_replies"
+        />
       </TaskOptions>
     </Flex>
   );

website/src/lib/prismadb.ts

@@ -1,10 +1,10 @@
 import { PrismaClient } from "@prisma/client";
-
 declare global {
-  var prisma;
+  // eslint-disable-next-line no-var
+  var prisma: PrismaClient | undefined;
 }
 
-const client = globalThis.prisma || new PrismaClient();
+const client = new PrismaClient();
 if (process.env.NODE_ENV !== "production") {
   globalThis.prisma = client;
 }

website/src/pages/_app.tsx

@@ -1,7 +1,7 @@
 import { SessionProvider } from "next-auth/react";
 import type { AppProps } from "next/app";
 
-import { getDefaultLayout, NextPageWithLayout } from "src/components/Layout";
+import { NextPageWithLayout, getDefaultLayout } from "src/components/Layout";
 
 import "../styles/globals.css";
 import "focus-visible";

website/src/pages/auth/signin.tsx

@@ -1,19 +1,26 @@
 import { Button, Input, Stack } from "@chakra-ui/react";
 import Head from "next/head";
-import { FaDiscord, FaEnvelope, FaGithub } from "react-icons/fa";
+import { FaDiscord, FaEnvelope, FaGithub, FaBug } from "react-icons/fa";
 import { getCsrfToken, getProviders, signIn } from "next-auth/react";
-import { useRef } from "react";
+import React, { useRef } from "react";
 import Link from "next/link";
 
 import { AuthLayout } from "src/components/AuthLayout";
 
 export default function Signin({ csrfToken, providers }) {
-  const { discord, email, github } = providers;
+  const { discord, email, github, credentials } = providers;
   const emailEl = useRef(null);
-  const signinWithEmail = () => {
+  const signinWithEmail = (ev: React.FormEvent) => {
+    ev.preventDefault();
     signIn(email.id, { callbackUrl: "/", email: emailEl.current.value });
   };
 
+  const debugUsernameEl = useRef(null);
+  function signinWithDebugCredentials(ev: React.FormEvent) {
+    ev.preventDefault();
+    signIn(credentials.id, { callbackUrl: "/", username: debugUsernameEl.current.value });
+  }
+
   return (
     <>
       <Head>
@@ -22,19 +29,26 @@ export default function Signin({ csrfToken, providers }) {
       </Head>
       <AuthLayout>
         <Stack spacing="2">
+          {credentials && (
+            <form onSubmit={signinWithDebugCredentials} className="border-2 border-orange-200 rounded-md p-4 relative">
+              <span className="text-orange-600 absolute -top-3 left-5 bg-white px-1">For Debugging Only</span>
+              <Stack>
+                <Input variant="outline" size="lg" placeholder="Username" ref={debugUsernameEl} />
+                <Button size={"lg"} leftIcon={<FaBug />} colorScheme="gray" type="submit">
+                  Continue with Debug User
+                </Button>
+              </Stack>
+            </form>
+          )}
           {email && (
-            <Stack>
-              <Input variant="outline" size="lg" placeholder="Email Address" ref={emailEl} />
-              <Button
-                size={"lg"}
-                leftIcon={<FaEnvelope />}
-                colorScheme="gray"
-                onClick={signinWithEmail}
-                // isDisabled="false"
-              >
-                Continue with Email
-              </Button>
-            </Stack>
+            <form onSubmit={signinWithEmail}>
+              <Stack>
+                <Input variant="outline" size="lg" placeholder="Email Address" ref={emailEl} />
+                <Button size={"lg"} leftIcon={<FaEnvelope />} colorScheme="gray" type="submit">
+                  Continue with Email
+                </Button>
+              </Stack>
+            </form>
           )}
           {discord && (
             <Button

website/src/pages/create/assistant_reply.tsx

@@ -1,14 +1,17 @@
-import { Container, Textarea } from "@chakra-ui/react";
+import { Container, Flex, Textarea } from "@chakra-ui/react";
 import { useRef, useState } from "react";
 import useSWRMutation from "swr/mutation";
 import useSWRImmutable from "swr/immutable";
 
 import fetcher from "src/lib/fetcher";
 import poster from "src/lib/poster";
+
 import { Messages } from "src/components/Messages";
 import { TwoColumns } from "src/components/TwoColumns";
-import { Button } from "src/components/Button";
 import { LoadingScreen } from "src/components/Loading/LoadingScreen";
+import { TaskInfo } from "src/components/TaskInfo/TaskInfo";
+import { SkipButton } from "src/components/Buttons/Skip";
+import { SubmitButton } from "src/components/Buttons/Submit";
 
 const AssistantReply = () => {
   const [tasks, setTasks] = useState([]);
@@ -61,22 +64,12 @@ const AssistantReply = () => {
       </TwoColumns>
 
       <section className="mb-8 p-4 rounded-lg shadow-lg bg-white flex flex-row justify-items-stretch ">
-        <div className="grid grid-cols-[min-content_auto] gap-x-2 text-gray-700">
-          <b>Prompt</b>
-          <span>{tasks[0].id}</span>
-          <b>Output</b>
-          <span>Submit your answer</span>
-        </div>
+        <TaskInfo id={tasks[0].id} output="Submit your answer" />
 
-        <div className="flex justify-center ml-auto">
-          <Button className="mr-2 bg-indigo-100 text-indigo-700 hover:bg-indigo-200">Skip</Button>
-          <Button
-            onClick={() => submitResponse(tasks[0])}
-            className="bg-indigo-600 text-white shadow-sm hover:bg-indigo-700"
-          >
-            Submit
-          </Button>
-        </div>
+        <Flex justify="center" ml="auto" gap={2}>
+          <SkipButton>Skip</SkipButton>
+          <SubmitButton onClick={() => submitResponse(tasks[0])}>Submit</SubmitButton>
+        </Flex>
       </section>
     </Container>
   );

website/src/pages/create/summarize_story.tsx

@@ -1,4 +1,4 @@
-import { Textarea } from "@chakra-ui/react";
+import { Flex, Textarea } from "@chakra-ui/react";
 import Head from "next/head";
 import { useRef, useState } from "react";
 import useSWRImmutable from "swr/immutable";
@@ -7,9 +7,11 @@ import useSWRMutation from "swr/mutation";
 import fetcher from "src/lib/fetcher";
 import poster from "src/lib/poster";
 
+import { LoadingScreen } from "src/components/Loading/LoadingScreen";
 import { TwoColumns } from "src/components/TwoColumns";
-import { Button } from "src/components/Button";
-import { LoadingScreen } from "@/components/Loading/LoadingScreen";
+import { TaskInfo } from "src/components/TaskInfo/TaskInfo";
+import { SkipButton } from "src/components/Buttons/Skip";
+import { SubmitButton } from "src/components/Buttons/Submit";
 
 const SummarizeStory = () => {
   // Use an array of tasks that record the sequence of steps until a task is
@@ -75,22 +77,12 @@ const SummarizeStory = () => {
         </TwoColumns>
 
         <section className="mb-8 p-4 rounded-lg shadow-lg bg-white flex flex-row justify-items-stretch ">
-          <div className="grid grid-cols-[min-content_auto] gap-x-2 text-gray-700">
-            <b>Prompt</b>
-            <span>{tasks[0].id}</span>
-            <b>Output</b>
-            <span>Submit your answer</span>
-          </div>
+          <TaskInfo id={tasks[0].id} output="Submit your answer" />
 
-          <div className="flex justify-center ml-auto">
-            <Button className="mr-2 bg-indigo-100 text-indigo-700 hover:bg-indigo-200">Skip</Button>
-            <Button
-              onClick={() => submitResponse(tasks[0])}
-              className="bg-indigo-600 text-white shadow-sm hover:bg-indigo-700"
-            >
-              Submit
-            </Button>
-          </div>
+          <Flex justify="center" ml="auto" gap={2}>
+            <SkipButton>Skip</SkipButton>
+            <SubmitButton onClick={() => submitResponse(tasks[0])}>Submit</SubmitButton>
+          </Flex>
         </section>
       </main>
     </>

website/src/pages/create/user_reply.tsx

@@ -1,14 +1,17 @@
-import { Container, Textarea, useColorModeValue } from "@chakra-ui/react";
+import { Container, Flex, Textarea, useColorModeValue } from "@chakra-ui/react";
 import { useRef, useState } from "react";
 import useSWRMutation from "swr/mutation";
 import useSWRImmutable from "swr/immutable";
 
 import fetcher from "src/lib/fetcher";
 import poster from "src/lib/poster";
+
+import { LoadingScreen } from "src/components/Loading/LoadingScreen";
 import { Messages } from "src/components/Messages";
+import { TaskInfo } from "src/components/TaskInfo/TaskInfo";
 import { TwoColumns } from "src/components/TwoColumns";
-import { Button } from "src/components/Button";
-import { LoadingScreen } from "@/components/Loading/LoadingScreen";
+import { SkipButton } from "src/components/Buttons/Skip";
+import { SubmitButton } from "src/components/Buttons/Submit";
 
 const UserReply = () => {
   const [tasks, setTasks] = useState([]);
@@ -62,24 +65,14 @@ const UserReply = () => {
         <Textarea name="reply" placeholder="Reply..." ref={inputRef} />
       </TwoColumns>
 
-      <Container bg={bg} className="p-4 rounded-lg shadow-lg flex flex-row justify-items-stretch">
-        <div className="grid grid-cols-[min-content_auto] gap-x-2 text-gray-700">
-          <b>Prompt</b>
-          <span>{tasks[0].id}</span>
-          <b>Output</b>
-          <span>Submit your answer</span>
-        </div>
+      <section className="mb-8 p-4 rounded-lg shadow-lg bg-white flex flex-row justify-items-stretch ">
+        <TaskInfo id={tasks[0].id} output="Submit your answer" />
 
-        <div className="flex justify-center ml-auto">
-          <Button className="mr-2 bg-indigo-100 text-indigo-700 hover:bg-indigo-200">Skip</Button>
-          <Button
-            onClick={() => submitResponse(tasks[0])}
-            className="bg-indigo-600 text-white shadow-sm hover:bg-indigo-700"
-          >
-            Submit
-          </Button>
-        </div>
-      </Container>
+        <Flex justify="center" ml="auto" gap={2}>
+          <SkipButton>Skip</SkipButton>
+          <SubmitButton onClick={() => submitResponse(tasks[0])}>Submit</SubmitButton>
+        </Flex>
+      </section>
     </Container>
   );
 };

website/src/pages/evaluate/rank_assistant_replies.tsx

@@ -0,0 +1,86 @@
+import { Button, Flex } from "@chakra-ui/react";
+import Head from "next/head";
+import { useState } from "react";
+import useSWRImmutable from "swr/immutable";
+import useSWRMutation from "swr/mutation";
+
+import fetcher from "src/lib/fetcher";
+import poster from "src/lib/poster";
+
+import { LoadingScreen } from "src/components/Loading/LoadingScreen";
+import { Sortable } from "src/components/Sortable/Sortable";
+import { TaskInfo } from "src/components/TaskInfo/TaskInfo";
+import { SubmitButton } from "src/components/Buttons/Submit";
+import { SkipButton } from "src/components/Buttons/Skip";
+
+const RankAssistantReplies = () => {
+  const [tasks, setTasks] = useState([]);
+  /**
+   * This array will contain the ranked indices of the replies
+   * The best reply will have index 0, and the worst is the last.
+   */
+  const [ranking, setRanking] = useState<number[]>([]);
+
+  const { isLoading } = useSWRImmutable("/api/new_task/rank_assistant_replies", fetcher, {
+    onSuccess: (data) => {
+      setTasks([data]);
+    },
+  });
+
+  const { trigger, isMutating } = useSWRMutation("/api/update_task", poster, {
+    onSuccess: async (data) => {
+      const newTask = await data.json();
+      setTasks((oldTasks) => [...oldTasks, newTask]);
+    },
+  });
+
+  const submitResponse = (task) => {
+    trigger({
+      id: task.id,
+      update_type: "post_ranking",
+      content: {
+        ranking,
+      },
+    });
+  };
+
+  if (isLoading) {
+    return <LoadingScreen text="Loading..." />;
+  }
+
+  if (tasks.length == 0) {
+    return <div className="p-6 bg-slate-100 text-gray-800">Loading...</div>;
+  }
+  const replies = tasks[0].task.replies as string[];
+
+  return (
+    <>
+      <Head>
+        <title>Rank Assistant Replies</title>
+        <meta name="description" content="Rank Assistant Replies." />
+      </Head>
+      <main className="p-6 bg-slate-100 text-gray-800">
+        <div className="rounded-lg shadow-lg block bg-white p-6 mb-8">
+          <h5 className="text-lg font-semibold mb-4">Instructions</h5>
+          <p className="text-lg py-1">
+            Given the following replies, sort them from best to worst, best being first, worst being last.
+          </p>
+          <Sortable items={replies} onChange={setRanking} />
+        </div>
+
+        <section className="mb-8 p-4 rounded-lg shadow-lg bg-white flex flex-row justify-items-stretch">
+          <TaskInfo id={tasks[0].id} output="Submit your answer" />
+
+          <Flex justify="center" ml="auto" gap={2}>
+            <SkipButton>Skip</SkipButton>
+            <SubmitButton onClick={() => submitResponse(tasks[0])} disabled={ranking.length === 0}>
+              Submit
+            </SubmitButton>
+          </Flex>
+        </section>
+      </main>
+    </>
+  );
+};
+
+export default RankAssistantReplies;

website/src/pages/evaluate/rank_initial_prompts.tsx

@@ -1,5 +1,4 @@
-import { ArrowUpIcon, ArrowDownIcon } from "@heroicons/react/20/solid";
-import clsx from "clsx";
+import { Flex } from "@chakra-ui/react";
 import Head from "next/head";
 import { useState } from "react";
 import useSWRImmutable from "swr/immutable";
@@ -8,9 +7,12 @@ import useSWRMutation from "swr/mutation";
 import fetcher from "src/lib/fetcher";
 import poster from "src/lib/poster";
 
-import { Button } from "src/components/Button";
-import { LoadingScreen } from "@/components/Loading/LoadingScreen";
 import { Container, useColorModeValue } from "@chakra-ui/react";
+import { LoadingScreen } from "src/components/Loading/LoadingScreen";
+import { Sortable } from "src/components/Sortable/Sortable";
+import { TaskInfo } from "src/components/TaskInfo/TaskInfo";
+import { SkipButton } from "src/components/Buttons/Skip";
+import { SubmitButton } from "src/components/Buttons/Submit";
 
 const RankInitialPrompts = () => {
   const [tasks, setTasks] = useState([]);
@@ -24,9 +26,6 @@ const RankInitialPrompts = () => {
   const { isLoading } = useSWRImmutable("/api/new_task/rank_initial_prompts", fetcher, {
     onSuccess: (data) => {
       setTasks([data]);
-
-      const indices = Array.from({ length: data.task.prompts.length }).map((_, i) => i);
-      setRanking(indices);
     },
   });
 
@@ -55,12 +54,6 @@ const RankInitialPrompts = () => {
     return <Container className="p-6 bg-slate-100 text-gray-800">No tasks found...</Container>;
   }
 
-  const prompts = tasks[0].task.prompts as string[];
-  const items = ranking.map((i) => ({
-    text: prompts[i],
-    originalIndex: i,
-  }));
-
   return (
     <>
       <Head>
@@ -73,49 +66,18 @@ const RankInitialPrompts = () => {
           <p className="text-lg py-1">
             Given the following prompts, sort them from best to worst, best being first, worst being last.
           </p>
-          <ul className="flex flex-col gap-4">
-            {items.map(({ text, originalIndex }, i) => (
-              <SortableItem
-                key={`${originalIndex}_${i}`}
-                canIncrement={i > 0}
-                onIncrement={() => {
-                  const newRanking = ranking.slice();
-                  const newIdx = i - 1;
-                  [newRanking[i], newRanking[newIdx]] = [newRanking[newIdx], newRanking[i]];
-                  setRanking(newRanking);
-                }}
-                canDecrement={i < items.length - 1}
-                onDecrement={() => {
-                  const newRanking = ranking.slice();
-                  const newIdx = i + 1;
-                  [newRanking[i], newRanking[newIdx]] = [newRanking[newIdx], newRanking[i]];
-                  setRanking(newRanking);
-                }}
-              >
-                {text}
-              </SortableItem>
-            ))}
-          </ul>
+          <Sortable items={tasks[0].task.prompts} onChange={setRanking} />
         </Container>
 
-        <section className="mb-8 p-4 rounded-lg shadow-lg bg-white flex flex-row justify-items-stretch ">
-          <div className="grid grid-cols-[min-content_auto] gap-x-2 text-gray-700">
-            <b>Prompt</b>
-            <span>{tasks[0].id}</span>
-            <b>Output</b>
-            <span>Submit your answer</span>
-          </div>
+        <section className="mb-8 p-4 rounded-lg shadow-lg bg-white flex flex-row justify-items-stretch">
+          <TaskInfo id={tasks[0].id} output="Submit your answer" />
 
-          <div className="flex justify-center ml-auto">
-            <Button className="mr-2 bg-indigo-100 text-indigo-700 hover:bg-indigo-200">Skip</Button>
-            <Button
-              onClick={() => submitResponse(tasks[0])}
-              disabled={ranking.length === 0}
-              className="bg-indigo-600 text-white shadow-sm hover:bg-indigo-700"
-            >
+          <Flex justify="center" ml="auto" gap={2}>
+            <SkipButton>Skip</SkipButton>
+            <SubmitButton onClick={() => submitResponse(tasks[0])} disabled={ranking.length === 0}>
               Submit
-            </Button>
-          </div>
+            </SubmitButton>
+          </Flex>
         </section>
       </Container>
     </>
@@ -123,30 +85,3 @@ const RankInitialPrompts = () => {
 };
 
 export default RankInitialPrompts;
-
-const SortableItem = ({ canIncrement, canDecrement, onIncrement, onDecrement, children, ...props }) => {
-  return (
-    <li className="grid grid-cols-[min-content_1fr] items-center rounded-lg shadow-md gap-x-2 p-2">
-      <ArrowButton active={canIncrement} onClick={onIncrement}>
-        <ArrowUpIcon width={28} />
-      </ArrowButton>
-      <span style={{ gridRow: "span 2" }}>{children}</span>
-
-      <ArrowButton active={canDecrement} onClick={onDecrement}>
-        <ArrowDownIcon width={28} />
-      </ArrowButton>
-    </li>
-  );
-};
-
-const ArrowButton = ({ children, active, onClick }) => {
-  return (
-    <Button
-      className={clsx("justify-center", active ? "hover:bg-indigo-200" : "opacity-10")}
-      onClick={onClick}
-      disabled={!active}
-    >
-      {children}
-    </Button>
-  );
-};

website/src/pages/evaluate/rank_user_replies.tsx

@@ -0,0 +1,86 @@
+import Head from "next/head";
+import { useState } from "react";
+import useSWRImmutable from "swr/immutable";
+import useSWRMutation from "swr/mutation";
+
+import fetcher from "src/lib/fetcher";
+import poster from "src/lib/poster";
+
+import { LoadingScreen } from "src/components/Loading/LoadingScreen";
+import { Sortable } from "src/components/Sortable/Sortable";
+import { TaskInfo } from "src/components/TaskInfo/TaskInfo";
+import { Flex } from "@chakra-ui/react";
+import { SkipButton } from "src/components/Buttons/Skip";
+import { SubmitButton } from "src/components/Buttons/Submit";
+
+const RankUserReplies = () => {
+  const [tasks, setTasks] = useState([]);
+  /**
+   * This array will contain the ranked indices of the replies
+   * The best reply will have index 0, and the worst is the last.
+   */
+  const [ranking, setRanking] = useState<number[]>([]);
+
+  const { isLoading } = useSWRImmutable("/api/new_task/rank_user_replies", fetcher, {
+    onSuccess: (data) => {
+      setTasks([data]);
+    },
+  });
+
+  const { trigger, isMutating } = useSWRMutation("/api/update_task", poster, {
+    onSuccess: async (data) => {
+      const newTask = await data.json();
+      setTasks((oldTasks) => [...oldTasks, newTask]);
+    },
+  });
+
+  const submitResponse = (task) => {
+    trigger({
+      id: task.id,
+      update_type: "post_ranking",
+      content: {
+        ranking,
+      },
+    });
+  };
+
+  if (isLoading) {
+    return <LoadingScreen text="Loading..." />;
+  }
+
+  if (tasks.length == 0) {
+    return <div className="p-6 bg-slate-100 text-gray-800">Loading...</div>;
+  }
+  const replies = tasks[0].task.replies as string[];
+
+  return (
+    <>
+      <Head>
+        <title>Rank User Replies</title>
+        <meta name="description" content="Rank User Replies." />
+      </Head>
+      <main className="p-6 bg-slate-100 text-gray-800">
+        <div className="rounded-lg shadow-lg block bg-white p-6 mb-8">
+          <h5 className="text-lg font-semibold mb-4">Instructions</h5>
+          <p className="text-lg py-1">
+            Given the following replies, sort them from best to worst, best being first, worst being last.
+          </p>
+          <Sortable items={replies} onChange={setRanking} />
+        </div>
+
+        <section className="mb-8 p-4 rounded-lg shadow-lg bg-white flex flex-row justify-items-stretch ">
+          <TaskInfo id={tasks[0].id} output="Submit your answer" />
+
+          <Flex justify="center" ml="auto" gap={2}>
+            <SkipButton>Skip</SkipButton>
+            <SubmitButton onClick={() => submitResponse(tasks[0])} disabled={ranking.length === 0}>
+              Submit
+            </SubmitButton>
+          </Flex>
+        </section>
+      </main>
+    </>
+  );
+};
+
+export default RankUserReplies;

website/src/pages/evaluate/rate_summary.tsx

@@ -1,4 +1,4 @@
-import { Textarea } from "@chakra-ui/react";
+import { Flex, Textarea } from "@chakra-ui/react";
 import { QuestionMarkCircleIcon } from "@heroicons/react/20/solid";
 import Head from "next/head";
 import { useState } from "react";
@@ -9,9 +9,11 @@ import RatingRadioGroup from "src/components/RatingRadioGroup";
 import fetcher from "src/lib/fetcher";
 import poster from "src/lib/poster";
 
+import { LoadingScreen } from "src/components/Loading/LoadingScreen";
 import { TwoColumns } from "src/components/TwoColumns";
-import { Button } from "src/components/Button";
-import { LoadingScreen } from "@/components/Loading/LoadingScreen";
+import { TaskInfo } from "src/components/TaskInfo/TaskInfo";
+import { SkipButton } from "src/components/Buttons/Skip";
+import { SubmitButton } from "src/components/Buttons/Submit";
 
 const RateSummary = () => {
   // Use an array of tasks that record the sequence of steps until a task is
@@ -91,22 +93,12 @@ const RateSummary = () => {
         </TwoColumns>
 
         <section className="mb-8 p-4 rounded-lg shadow-lg bg-white flex flex-row justify-items-stretch ">
-          <div className="grid grid-cols-[min-content_auto] gap-x-2 text-gray-700">
-            <b>Prompt</b>
-            <span>{tasks[0].id}</span>
-            <b>Output</b>
-            <span>Submit your answer</span>
-          </div>
+          <TaskInfo id={tasks[0].id} output="Submit your answer" />
 
-          <div className="flex justify-center ml-auto">
-            <Button className="mr-2 bg-indigo-100 text-indigo-700 hover:bg-indigo-200">Skip</Button>
-            <Button
-              onClick={() => submitResponse(tasks[0])}
-              className="bg-indigo-600 text-white shadow-sm hover:bg-indigo-700"
-            >
-              Submit
-            </Button>
-          </div>
+          <Flex justify="center" ml="auto" gap={2}>
+            <SkipButton>Skip</SkipButton>
+            <SubmitButton onClick={() => submitResponse(tasks[0])}>Submit</SubmitButton>
+          </Flex>
         </section>
       </main>
     </>

website/src/pages/leaderboard/score-leaderboard.tsx

@@ -1,7 +1,5 @@
 import RankItem from "src/components/RankItem";
-import { BarsArrowUpIcon, BarsArrowDownIcon } from "@heroicons/react/24/solid";
-import Image from "next/image";
-import { HiBarsArrowUp, HiBarsArrowDown } from "react-icons/hi2";
+import { HiBarsArrowDown } from "react-icons/hi2";
 
 const LeaderBoard = () => {
   const PlaceHolderProps = { username: "test_user", score: 10 };