Merge pull request #82 from AbdBarho/layout

Add per-page layout

website/src/components/AuthLayout.tsx

@@ -1,14 +1,8 @@
-import Link from "next/link";
-import Image from "next/image";
-
 export function AuthLayout({ children }) {
   return (
-    <main className="flex items-center justify-center min-h-full overflow-hidden pt-16 sm:py-28 subpixel-antialiased">
+    <main className="flex items-center justify-center sm:py-4 subpixel-antialiased">
       <div className="flex items-center w-full max-w-2xl flex-col px-4 sm:px-6">
-        <Link href="/" aria-label="Home" className="flex items-center text-3xl font-bold text-black">
-          <Image src="/images/logos/logo.svg" width="100" height="100" alt="Open Assistant Logo" /> Open Assistant
-        </Link>
-        <div className="flex-auto items-center justify-center w-full py-10 px-4 sm:mx-0 sm:flex-none sm:rounded-2xl sm:p-20">
+        <div className="flex-auto items-center justify-center w-full py-10 px-4 sm:mx-0 sm:flex-none sm:rounded-2xl sm:p-4">
           {children}
         </div>
       </div>

website/src/components/Footer.tsx

@@ -6,9 +6,9 @@ import { NavLinks } from "./NavLinks";
 
 export function Footer() {
   return (
-    <footer className="border-t border-gray-200">
+    <footer className="border-t border-gray-200 bg-white">
       <Container className="">
-        <div className="flex flex-col items-start justify-between gap-y-12 pt-16 pb-6 lg:flex-row lg:items-center lg:py-16">
+        <div className="flex flex-col items-start justify-between gap-y-12 pt-16 pb-6 lg:flex-row lg:items-center lg:py-6">
           <div>
             <div className="flex items-center text-gray-900">
               <Link href="/" aria-label="Home" className="flex items-center">
@@ -20,7 +20,9 @@ export function Footer() {
                 <p className="mt-1 text-sm">Conversational AI for everyone.</p>
               </div>
             </div>
-            <nav className="mt-11 flex gap-8">{/* <NavLinks /> */}</nav>
+            {/* <nav className="mt-11 flex gap-8">
+              <NavLinks />
+            </nav> */}
           </div>
         </div>
       </Container>

website/src/components/Header.tsx

@@ -55,9 +55,9 @@ function AccountButton() {
 
 export function Header() {
   return (
-    <header>
+    <header className="bg-white">
       <nav>
-        <Container className="relative bg-white z-10 flex justify-between py-8">
+        <Container className="relative z-10 flex justify-between py-8">
           <div className="relative z-10 flex items-center gap-16">
             <Link href="/" aria-label="Home" className="flex items-center">
               <Image src="/images/logos/logo.svg" className="mx-auto object-fill" width="50" height="50" alt="logo" />

website/src/components/Layout.tsx

@@ -0,0 +1,20 @@
+// https://nextjs.org/docs/basic-features/layouts
+
+import type { NextPage } from "next";
+
+import { Footer } from "./Footer";
+import { Header } from "./Header";
+
+export type NextPageWithLayout<P = {}, IP = P> = NextPage<P, IP> & {
+  getLayout?: (page: React.ReactElement) => React.ReactNode;
+};
+
+export const getDefaultLayout = (page: React.ReactElement) => (
+  <div className="grid grid-rows-[min-content_1fr_min-content] h-full justify-items-stretch">
+    <Header />
+    {page}
+    <Footer />
+  </div>
+);
+
+export const noLayout = (page: React.ReactElement) => page;

website/src/pages/_app.tsx

@@ -2,6 +2,9 @@ import { ChakraProvider } from "@chakra-ui/react";
 import { SessionProvider } from "next-auth/react";
 import { Inter } from "@next/font/google";
 import { extendTheme } from "@chakra-ui/react";
+import type { AppProps } from "next/app";
+
+import { getDefaultLayout, NextPageWithLayout } from "src/components/Layout";
 
 import "../styles/globals.css";
 import "focus-visible";
@@ -27,12 +30,17 @@ const theme = extendTheme({
   },
 });
 
-function MyApp({ Component, pageProps: { session, ...pageProps } }) {
+type AppPropsWithLayout = AppProps & {
+  Component: NextPageWithLayout;
+};
+
+function MyApp({ Component, pageProps: { session, ...pageProps } }: AppPropsWithLayout) {
+  const getLayout = Component.getLayout ?? getDefaultLayout;
+  const page = getLayout(<Component {...pageProps} />);
+
   return (
     <ChakraProvider theme={theme}>
-      <SessionProvider session={session}>
-        <Component {...pageProps} />
-      </SessionProvider>
+      <SessionProvider session={session}>{page}</SessionProvider>
     </ChakraProvider>
   );
 }

website/src/pages/_document.tsx

@@ -2,11 +2,11 @@ import { Head, Html, Main, NextScript } from "next/document";
 
 export default function Document() {
   return (
-    <Html className="h-full bg-gray-50 antialiased" lang="en">
+    <Html className="h-full antialiased" lang="en">
       <Head>
         <link rel="shortcut icon" type="image/png" href="/images/logos/favicon.png" />
       </Head>
-      <body className="flex h-full flex-col">
+      <body className="flex h-full flex-col bg-gray-50">
         <Main />
         <NextScript />
       </body>

website/src/pages/create/assistant_reply.tsx

@@ -43,12 +43,12 @@ const AssistantReply = () => {
    * TODO: Make this a nicer loading screen.
    */
   if (tasks.length == 0) {
-    return <div className="p-6 h-full mx-auto bg-slate-100 text-gray-800">Loading...</div>;
+    return <div className="p-6 bg-slate-100 text-gray-800">Loading...</div>;
   }
 
   const task = tasks[0].task;
   return (
-    <div className="p-6 h-full mx-auto bg-slate-100 text-gray-800">
+    <div className="p-6 bg-slate-100 text-gray-800">
       <TwoColumns>
         <>
           <h5 className="text-lg font-semibold">Reply as the assistant</h5>

website/src/pages/create/summarize_story.tsx

@@ -4,11 +4,12 @@ import { useRef, useState } from "react";
 import useSWRImmutable from "swr/immutable";
 import useSWRMutation from "swr/mutation";
 
-import { Footer } from "src/components/Footer";
-import { Header } from "src/components/Header";
 import fetcher from "src/lib/fetcher";
 import poster from "src/lib/poster";
 
+import { TwoColumns } from "src/components/TwoColumns";
+import { Button } from "src/components/Button";
+
 const SummarizeStory = () => {
   // Use an array of tasks that record the sequence of steps until a task is
   // deemed complete.
@@ -52,7 +53,7 @@ const SummarizeStory = () => {
    * TODO: Make this a nicer loading screen.
    */
   if (tasks.length == 0) {
-    return <div className=" p-6 h-full mx-auto bg-slate-100 text-gray-800">Loading...</div>;
+    return <div className=" p-6 bg-slate-100 text-gray-800">Loading...</div>;
   }
 
   return (
@@ -61,69 +62,35 @@ const SummarizeStory = () => {
         <title>Summarize A Story</title>
         <meta name="description" content="Summarize a story to train our model." />
       </Head>
-      <Header />
-      <main className="h-3/4  z-0 bg-white flex flex-col items-center justify-center gap-2">
-        <div className=" p-6 h-full mx-auto bg-slate-100 text-gray-800">
-          {/* Instrunction and Output panels */}
-          <section className="mb-8  lt-lg:mb-12 ">
-            <div className="grid lg:gap-x-12 lg:grid-cols-2">
-              {/* Instruction panel */}
-              <div className="rounded-lg shadow-lg h-full block bg-white">
-                <div className="p-6">
-                  <h5 className="text-lg font-semibold">Instruction</h5>
-                  <p className="text-lg py-1">Summarize the following story</p>
-                  <div className="bg-slate-800 p-6 rounded-xl text-white whitespace-pre-wrap">
-                    {tasks[0].task.story}
-                  </div>
-                </div>
-              </div>
+      <main className="p-6 h-full mx-auto bg-slate-100 text-gray-800">
+        <TwoColumns>
+          <>
+            <h5 className="text-lg font-semibold">Instruction</h5>
+            <p className="text-lg py-1">Summarize the following story</p>
+            <div className="bg-slate-800 p-6 rounded-xl text-white whitespace-pre-wrap">{tasks[0].task.story}</div>
+          </>
+          <Textarea name="summary" placeholder="Summary" ref={inputRef} />
+        </TwoColumns>
 
-              {/* Output panel */}
-              <div className="mt-6 lg:mt-0 rounded-lg shadow-lg h-full block bg-white">
-                <div className="flex justify-center p-6">
-                  <Textarea name="summary" placeholder="Summary" ref={inputRef} />
-                </div>
-              </div>
-            </div>
-          </section>
+        <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>
 
-          {/* Info & controls */}
-          <section className="mb-8 p-4 rounded-lg shadow-lg bg-white flex flex-row justify-items-stretch ">
-            <div className="flex flex-col justify-self-start text-gray-700">
-              <div>
-                <span>
-                  <b>Prompt</b>
-                </span>
-                <span className="ml-2">{tasks[0].id}</span>
-              </div>
-              <div>
-                <span>
-                  <b>Output</b>
-                </span>
-                <span className="ml-2">Submit your answer</span>
-              </div>
-            </div>
-
-            {/* Skip / Submit controls */}
-            <div className="flex justify-center ml-auto">
-              <button
-                type="button"
-                className="mr-2 inline-flex items-center rounded-md border border-transparent bg-indigo-100 px-4 py-2 text-sm font-medium text-indigo-700 hover:bg-indigo-200 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
-              >
-                Skip
-              </button>
-              <button
-                type="button"
-                onClick={() => submitResponse(tasks[0])}
-                className="inline-flex items-center rounded-md border border-transparent bg-indigo-600 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
-              >
-                Submit
-              </button>
-            </div>
-          </section>
-        </div>
+          <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>
+        </section>
       </main>
-      <Footer />
     </>
   );
 };

website/src/pages/create/user_reply.tsx

@@ -43,12 +43,12 @@ const UserReply = () => {
    * TODO: Make this a nicer loading screen.
    */
   if (tasks.length == 0) {
-    return <div className="p-6 h-full mx-auto bg-slate-100 text-gray-800">Loading...</div>;
+    return <div className="p-6 bg-slate-100 text-gray-800">Loading...</div>;
   }
 
   const task = tasks[0].task;
   return (
-    <div className="p-6 h-full mx-auto bg-slate-100 text-gray-800">
+    <div className="p-6 bg-slate-100 text-gray-800">
       <TwoColumns>
         <>
           <h5 className="text-lg font-semibold">Reply as a user</h5>

website/src/pages/evaluate/rate_summary.tsx

@@ -1,27 +1,23 @@
-import { HStack, Textarea } from "@chakra-ui/react";
+import { Textarea } from "@chakra-ui/react";
 import { QuestionMarkCircleIcon } from "@heroicons/react/20/solid";
 import Head from "next/head";
-import { useSession, signIn, signOut } from "next-auth/react";
-import { useEffect, useRef, useState } from "react";
+import { useState } from "react";
 import useSWRImmutable from "swr/immutable";
 import useSWRMutation from "swr/mutation";
 
-import { Footer } from "src/components/Footer";
-import { Header } from "src/components/Header";
 import RatingRadioGroup from "src/components/RatingRadioGroup";
 import fetcher from "src/lib/fetcher";
 import poster from "src/lib/poster";
 
+import { TwoColumns } from "src/components/TwoColumns";
+import { Button } from "src/components/Button";
+
 const RateSummary = () => {
   // Use an array of tasks that record the sequence of steps until a task is
   // deemed complete.
   const [tasks, setTasks] = useState([]);
   const [rating, setRating] = useState(0);
 
-  // A quick reference to the input element.  This should be factored into the
-  // component doing the actual task rendering.
-  const responseEl = useRef(null);
-
   // Fetch the very fist task.  We can ignore everything except isLoading
   // because the onSuccess handler will update `tasks` when ready.
   const { isLoading } = useSWRImmutable("/api/new_task/rate_summary", fetcher, {
@@ -57,7 +53,7 @@ const RateSummary = () => {
    * TODO: Make this a nicer loading screen.
    */
   if (tasks.length == 0) {
-    return <div className=" p-6 h-full mx-auto bg-slate-100 text-gray-800"></div>;
+    return <div className="p-6 bg-slate-100 text-gray-800">Loading...</div>;
   }
 
   return (
@@ -66,99 +62,51 @@ const RateSummary = () => {
         <title>Rate A Summary</title>
         <meta name="description" content="Rate a proposed story summary." />
       </Head>
-      <Header />
-      <main className="z-0 bg-white flex flex-col items-center justify-center gap-2">
-        <div className=" p-6 mx-auto bg-slate-100 text-gray-800">
-          {/* Instrunction and Output panels */}
-          <section className="mb-8  lt-lg:mb-12 ">
-            <div className="grid lg:gap-x-12 lg:grid-cols-2">
-              {/* Instruction panel */}
-              <div className="rounded-lg shadow-lg h-full block bg-white">
-                <div className="p-6">
-                  <h5 className="text-lg font-semibold mb-4">Instruction</h5>
-                  <div className="bg-slate-800 p-6 rounded-xl text-white whitespace-pre-wrap">
-                    {tasks[0].task.full_text}
-                  </div>
-                </div>
-              </div>
+      <main className="p-6 bg-slate-100 text-gray-800">
+        <TwoColumns>
+          <>
+            <h5 className="text-lg font-semibold mb-4">Instruction</h5>
+            <div className="bg-slate-800 p-6 rounded-xl text-white whitespace-pre-wrap">{tasks[0].task.full_text}</div>
+          </>
 
-              {/* Output panel */}
-              <div className="mt-6 lg:mt-0 rounded-lg shadow-lg h-full block bg-white">
-                <div className="p-6">
-                  <h5 className="text-lg font-semibold mb-4">Output</h5>
-                  <div className="bg-slate-800 p-6 rounded-xl text-white whitespace-pre-wrap">
-                    {tasks[0].task.summary}
-                  </div>
-                </div>
-                {/* Form  wrap*/}
-                <div className="p-6">
-                  <h3 className="text-lg text-center font-medium leading-6 text-gray-900">Rating</h3>
-                  <p className="text-center mt-1 text-sm text-gray-500">
-                    ({tasks[0].task.scale.min} = worst, {tasks[0].task.scale.max} = best)
-                  </p>
-
-                  {/* Rating buttons */}
-                  <div className="flex justify-center p-6">
-                    <RatingRadioGroup
-                      min={tasks[0].task.scale.min}
-                      max={tasks[0].task.scale.max}
-                      onChange={setRating}
-                    />
-                  </div>
-                </div>
-
-                {/* Annotation checkboxes */}
-                <div className="flex justify-center px-10">
-                  <ul>
-                    {ANNOTATION_FLAGS.map((option, i) => {
-                      return <AnnotationCheckboxLi option={option} key={i}></AnnotationCheckboxLi>;
-                    })}
-                  </ul>
-                </div>
-                <div className="flex justify-center p-6">
-                  <Textarea name="notes" placeholder="Optional notes" />
-                </div>
-              </div>
+          <section className="grid grid-row-[auto] gap-3">
+            <h5 className="text-lg font-semibold">Output</h5>
+            <p className="bg-slate-800 p-6 rounded-xl text-white whitespace-pre-wrap">{tasks[0].task.summary}</p>
+            <h3 className="text-lg text-center font-medium leading-6 text-gray-900">Rating</h3>
+            <p className="text-center text-sm text-gray-500">
+              ({tasks[0].task.scale.min} = worst, {tasks[0].task.scale.max} = best)
+            </p>
+            <div className="m-auto">
+              <RatingRadioGroup min={tasks[0].task.scale.min} max={tasks[0].task.scale.max} onChange={setRating} />
             </div>
+            <ul>
+              {ANNOTATION_FLAGS.map((option, i) => (
+                <AnnotationCheckboxLi option={option} key={i} />
+              ))}
+            </ul>
+            <Textarea name="notes" placeholder="Optional notes" />
           </section>
+        </TwoColumns>
 
-          {/* Info & controls */}
-          <section className="mb-8 p-4 rounded-lg shadow-lg bg-white flex flex-row justify-items-stretch ">
-            <div className="flex flex-col justify-self-start text-gray-700">
-              <div>
-                <span>
-                  <b>Prompt</b>
-                </span>
-                <span className="ml-2">{tasks[0].id}</span>
-              </div>
-              <div>
-                <span>
-                  <b>Output</b>
-                </span>
-                <span className="ml-2">{tasks.length === 2 ? tasks[1].id : "Submit your answer"}</span>
-              </div>
-            </div>
+        <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>
 
-            {/* Skip / Submit controls */}
-            <div className="flex justify-center ml-auto">
-              <button
-                type="button"
-                className="mr-2 inline-flex items-center rounded-md border border-transparent bg-indigo-100 px-4 py-2 text-sm font-medium text-indigo-700 hover:bg-indigo-200 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
-              >
-                Skip
-              </button>
-              <button
-                type="button"
-                onClick={() => submitResponse(tasks[0])}
-                className="inline-flex items-center rounded-md border border-transparent bg-indigo-600 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
-              >
-                Submit
-              </button>
-            </div>
-          </section>
-        </div>
+          <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>
+        </section>
       </main>
-      <Footer />
     </>
   );
 };
@@ -176,20 +124,18 @@ function AnnotationCheckboxLi(props: { option: annotationBool }): JSX.Element {
   }
 
   return (
-    <>
-      <li className="form-check flex mb-1">
-        <input
-          className="form-check-input appearance-none h-4 w-4 border border-gray-300 rounded-sm bg-white checked:bg-blue-600 checked:border-blue-600 focus:outline-none transition duration-200 mt-1 align-top bg-no-repeat bg-center bg-contain float-left mr-2 cursor-pointer"
-          type="checkbox"
-          value=""
-          id={props.option.attributeName}
-        />
-        <label className="flex ml-1 form-check-label  hover:cursor-pointer" htmlFor={props.option.attributeName}>
-          <span className="text-gray-800 hover:text-blue-700">{props.option.labelText}</span>
-          {AdditionalExplanation}
-        </label>
-      </li>
-    </>
+    <li className="form-check flex mb-1">
+      <input
+        className="form-check-input appearance-none h-4 w-4 border border-gray-300 rounded-sm bg-white checked:bg-blue-600 checked:border-blue-600 focus:outline-none transition duration-200 mt-1 align-top bg-no-repeat bg-center bg-contain float-left mr-2 cursor-pointer"
+        type="checkbox"
+        value=""
+        id={props.option.attributeName}
+      />
+      <label className="flex ml-1 form-check-label  hover:cursor-pointer" htmlFor={props.option.attributeName}>
+        <span className="text-gray-800 hover:text-blue-700">{props.option.labelText}</span>
+        {AdditionalExplanation}
+      </label>
+    </li>
   );
 }
 

website/src/pages/index.tsx

@@ -1,39 +1,14 @@
-import { Button, Input, Stack } from "@chakra-ui/react";
 import Head from "next/head";
-import Link from "next/link";
 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 { TaskSelection } from "src/components/TaskSelection";
 
 const Home = () => {
   const { data: session } = useSession();
 
-  if (!session) {
-    return (
-      <>
-        <Head>
-          <title>Open Assistant</title>
-          <meta
-            name="description"
-            content="Conversational AI for everyone. An open source project to create a chat enabled GPT LLM run by LAION and contributors around the world."
-          />
-        </Head>
-        <Header />
-        <main className="z-0">
-          <Hero />
-          <CallToAction />
-
-          <Faq />
-        </main>
-        <Footer />
-      </>
-    );
-  }
   return (
     <>
       <Head>
@@ -43,11 +18,18 @@ 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."
         />
       </Head>
-      <Header />
-      <main className="h-3/4 m-20 z-0 bg-white flex flex-col items-center justify-center gap-2">
-        <TaskSelection />
-      </main>
-      <Footer />
+      {session ? (
+        <main className="my-4">
+          <TaskSelection />
+        </main>
+      ) : (
+        <main>
+          <Hero />
+          <CallToAction />
+
+          <Faq />
+        </main>
+      )}
     </>
   );
 };

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

@@ -6,7 +6,7 @@ import { HiBarsArrowUp, HiBarsArrowDown } from "react-icons/hi2";
 const LeaderBoard = () => {
   const PlaceHolderProps = { username: "test_user", score: 10 };
   return (
-    <div className=" p-6 h-full mx-auto bg-slate-100 text-gray-800">
+    <div className="p-6 bg-slate-100 text-gray-800">
       <div className="flex flex-col">
         <div className="rounded-lg shadow-lg h-full block bg-white">
           <div className="p-8">