From 3204924e3472bafcca1919c57129fc897474fbe6 Mon Sep 17 00:00:00 2001
From: Lucian Petri <petri.lucian@outlook.com>
Date: Tue, 27 Dec 2022 03:37:12 +0200
Subject: [PATCH 01/10] created UserChoice Component

---
 website/src/components/UserChoice.tsx | 52 +++++++++++++++++++++++++++
 1 file changed, 52 insertions(+)
 create mode 100644 website/src/components/UserChoice.tsx

diff --git a/website/src/components/UserChoice.tsx b/website/src/components/UserChoice.tsx
new file mode 100644
index 00000000..39a46aee
--- /dev/null
+++ b/website/src/components/UserChoice.tsx
@@ -0,0 +1,52 @@
+import { Card, CardBody, Flex, Heading } from "@chakra-ui/react";
+import Link from "next/link";
+import React from "react";
+import Image from "next/image";
+
+const UserChoice = () => {
+  return (
+    <Flex gap={10} wrap="wrap" justifyContent={"center"}>
+      <Choice alt="Rate Prompts" title="Rate prompts" link="/grading/grade-output" />
+      <Choice alt="Summarize Stories" title="Summarize stories" link="/summarize/story" />
+    </Flex>
+  );
+};
+
+type ChoiceProps = {
+  img?: string;
+  alt: string;
+  title: string;
+  link: string;
+};
+
+const Choice = (props: ChoiceProps) => {
+  const { img, title, link } = props;
+  // NEXT STEPS: FIND BETTER IMAGES AND USE img PROP AS SRC
+  return (
+    <Link href={link}>
+      <Card maxW="sm" minW="sm" minH="sm" maxH="sm">
+        <CardBody width="full" height="full">
+          <Flex direction="column" alignItems="center" justifyContent="center">
+            <Image
+              className="transition ease-in-out duration-300 sm:grayscale hover:grayscale-0"
+              src={"/images/logos/logo.svg"}
+              alt="Green double couch with wooden legs"
+              width={500}
+              height={500}
+            />
+            <Heading
+              mt={-10}
+              className="bg-gradient-to-r from-indigo-600 via-sky-400 to-indigo-700 bg-clip-text tracking-tight text-transparent"
+              textAlign={"center"}
+              fontSize={"4xl"}
+            >
+              {title}
+            </Heading>
+          </Flex>
+        </CardBody>
+      </Card>
+    </Link>
+  );
+};
+
+export default UserChoice;

From 34b4b5ca1c6abee2753e9ef33816d6b51329ad8d Mon Sep 17 00:00:00 2001
From: Lucian Petri <petri.lucian@outlook.com>
Date: Tue, 27 Dec 2022 03:37:52 +0200
Subject: [PATCH 02/10] removed artifacts and linted UserChoice

---
 website/src/components/UserChoice.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/website/src/components/UserChoice.tsx b/website/src/components/UserChoice.tsx
index 39a46aee..18c0e640 100644
--- a/website/src/components/UserChoice.tsx
+++ b/website/src/components/UserChoice.tsx
@@ -5,7 +5,7 @@ import Image from "next/image";
 
 const UserChoice = () => {
   return (
-    <Flex gap={10} wrap="wrap" justifyContent={"center"}>
+    <Flex gap={10} wrap="wrap" justifyContent="center">
       <Choice alt="Rate Prompts" title="Rate prompts" link="/grading/grade-output" />
       <Choice alt="Summarize Stories" title="Summarize stories" link="/summarize/story" />
     </Flex>
@@ -29,8 +29,8 @@ const Choice = (props: ChoiceProps) => {
           <Flex direction="column" alignItems="center" justifyContent="center">
             <Image
               className="transition ease-in-out duration-300 sm:grayscale hover:grayscale-0"
-              src={"/images/logos/logo.svg"}
-              alt="Green double couch with wooden legs"
+              src="/images/logos/logo.sv"
+              alt="LAION Logo"
               width={500}
               height={500}
             />

From f5e3b552a96b021cda5ee76a0d3561deb3829734 Mon Sep 17 00:00:00 2001
From: Lucian Petri <petri.lucian@outlook.com>
Date: Tue, 27 Dec 2022 03:38:42 +0200
Subject: [PATCH 03/10] added UserChoice and cleaned index

---
 website/src/pages/index.tsx | 14 ++------------
 1 file changed, 2 insertions(+), 12 deletions(-)

diff --git a/website/src/pages/index.tsx b/website/src/pages/index.tsx
index 4aa93585..b591535c 100644
--- a/website/src/pages/index.tsx
+++ b/website/src/pages/index.tsx
@@ -1,16 +1,11 @@
 import { useSession } from "next-auth/react";
-
 import Head from "next/head";
-import Link from "next/link";
-import { Button, Input, Stack } from "@chakra-ui/react";
-
 import { CallToAction } from "../components/CallToAction";
 import { Faq } from "../components/Faq";
 import { Footer } from "../components/Footer";
 import { Header } from "../components/Header";
 import { Hero } from "../components/Hero";
-
-import styles from "../styles/Home.module.css";
+import UserChoice from "../components/UserChoice";
 
 export default function Home() {
   const { data: session } = useSession();
@@ -47,12 +42,7 @@ export default function Home() {
       </Head>
       <Header />
       <main className="h-3/4  z-0 bg-white flex flex-col items-center justify-center gap-2">
-        <Button size="lg" colorScheme="blue" className="drop-shadow">
-          <Link href="/grading/grade-output">Rate a prompt and output now</Link>
-        </Button>
-        <Button size="lg" colorScheme="blue" className="drop-shadow">
-          <Link href="/summarize/story">Summarize a story</Link>
-        </Button>
+        <UserChoice />
       </main>
       <Footer />
     </>

From afae42f6589c9a34dbcfa66f30592f7a1e8ff0d5 Mon Sep 17 00:00:00 2001
From: Lucian Petri <petri.lucian@outlook.com>
Date: Tue, 27 Dec 2022 03:43:48 +0200
Subject: [PATCH 04/10] fixed typo

---
 website/src/components/UserChoice.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/website/src/components/UserChoice.tsx b/website/src/components/UserChoice.tsx
index 18c0e640..15f736d9 100644
--- a/website/src/components/UserChoice.tsx
+++ b/website/src/components/UserChoice.tsx
@@ -29,7 +29,7 @@ const Choice = (props: ChoiceProps) => {
           <Flex direction="column" alignItems="center" justifyContent="center">
             <Image
               className="transition ease-in-out duration-300 sm:grayscale hover:grayscale-0"
-              src="/images/logos/logo.sv"
+              src="/images/logos/logo.svg"
               alt="LAION Logo"
               width={500}
               height={500}

From e5ed9b43f9093085c7572a214b4682510be56ebe Mon Sep 17 00:00:00 2001
From: Lucian Petri <petri.lucian@outlook.com>
Date: Tue, 27 Dec 2022 03:48:19 +0200
Subject: [PATCH 05/10] moved transition up to contain heading

---
 website/src/components/UserChoice.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/website/src/components/UserChoice.tsx b/website/src/components/UserChoice.tsx
index 15f736d9..c2fa079e 100644
--- a/website/src/components/UserChoice.tsx
+++ b/website/src/components/UserChoice.tsx
@@ -26,9 +26,8 @@ const Choice = (props: ChoiceProps) => {
     <Link href={link}>
       <Card maxW="sm" minW="sm" minH="sm" maxH="sm">
         <CardBody width="full" height="full">
-          <Flex direction="column" alignItems="center" justifyContent="center">
+          <Flex direction="column" alignItems="center" justifyContent="center" className="transition ease-in-out duration-500 sm:grayscale hover:grayscale-0">
             <Image
-              className="transition ease-in-out duration-300 sm:grayscale hover:grayscale-0"
               src="/images/logos/logo.svg"
               alt="LAION Logo"
               width={500}

From 33af6fce4072692bd152df5e7a6fc8e94c73ad9b Mon Sep 17 00:00:00 2001
From: Lucian Petri <petri.lucian@outlook.com>
Date: Tue, 27 Dec 2022 13:55:19 +0200
Subject: [PATCH 06/10] removing UserChoice

---
 website/src/components/UserChoice.tsx | 51 ---------------------------
 1 file changed, 51 deletions(-)
 delete mode 100644 website/src/components/UserChoice.tsx

diff --git a/website/src/components/UserChoice.tsx b/website/src/components/UserChoice.tsx
deleted file mode 100644
index c2fa079e..00000000
--- a/website/src/components/UserChoice.tsx
+++ /dev/null
@@ -1,51 +0,0 @@
-import { Card, CardBody, Flex, Heading } from "@chakra-ui/react";
-import Link from "next/link";
-import React from "react";
-import Image from "next/image";
-
-const UserChoice = () => {
-  return (
-    <Flex gap={10} wrap="wrap" justifyContent="center">
-      <Choice alt="Rate Prompts" title="Rate prompts" link="/grading/grade-output" />
-      <Choice alt="Summarize Stories" title="Summarize stories" link="/summarize/story" />
-    </Flex>
-  );
-};
-
-type ChoiceProps = {
-  img?: string;
-  alt: string;
-  title: string;
-  link: string;
-};
-
-const Choice = (props: ChoiceProps) => {
-  const { img, title, link } = props;
-  // NEXT STEPS: FIND BETTER IMAGES AND USE img PROP AS SRC
-  return (
-    <Link href={link}>
-      <Card maxW="sm" minW="sm" minH="sm" maxH="sm">
-        <CardBody width="full" height="full">
-          <Flex direction="column" alignItems="center" justifyContent="center" className="transition ease-in-out duration-500 sm:grayscale hover:grayscale-0">
-            <Image
-              src="/images/logos/logo.svg"
-              alt="LAION Logo"
-              width={500}
-              height={500}
-            />
-            <Heading
-              mt={-10}
-              className="bg-gradient-to-r from-indigo-600 via-sky-400 to-indigo-700 bg-clip-text tracking-tight text-transparent"
-              textAlign={"center"}
-              fontSize={"4xl"}
-            >
-              {title}
-            </Heading>
-          </Flex>
-        </CardBody>
-      </Card>
-    </Link>
-  );
-};
-
-export default UserChoice;

From 32a0f14d8ad4efb0ea498c8121002c4a370134b9 Mon Sep 17 00:00:00 2001
From: Lucian Petri <petri.lucian@outlook.com>
Date: Tue, 27 Dec 2022 13:56:01 +0200
Subject: [PATCH 07/10] Refactor to TaskSelection

---
 .../components/TaskSelection/TaskOption.tsx   | 39 +++++++++++++++++++
 .../components/TaskSelection/TaskOptions.tsx  | 23 +++++++++++
 .../TaskSelection/TaskSelection.tsx           | 22 +++++++++++
 website/src/components/TaskSelection/index.ts |  3 ++
 website/src/pages/index.tsx                   |  6 +--
 5 files changed, 90 insertions(+), 3 deletions(-)
 create mode 100644 website/src/components/TaskSelection/TaskOption.tsx
 create mode 100644 website/src/components/TaskSelection/TaskOptions.tsx
 create mode 100644 website/src/components/TaskSelection/TaskSelection.tsx
 create mode 100644 website/src/components/TaskSelection/index.ts

diff --git a/website/src/components/TaskSelection/TaskOption.tsx b/website/src/components/TaskSelection/TaskOption.tsx
new file mode 100644
index 00000000..764efa68
--- /dev/null
+++ b/website/src/components/TaskSelection/TaskOption.tsx
@@ -0,0 +1,39 @@
+import { Card, CardBody, Flex, Heading } from "@chakra-ui/react";
+import Image from "next/image";
+import Link from "next/link";
+
+export type OptionProps = {
+  img: string;
+  alt: string;
+  title: string;
+  link: string;
+};
+
+export const TaskOption = (props: OptionProps) => {
+  const { alt, img, title, link } = props;
+  return (
+    <Link href={link}>
+      <Card
+        maxW="300"
+        minW="300"
+        minH="300"
+        maxH="300"
+        className="transition ease-in-out duration-500 sm:grayscale hover:grayscale-0"
+      >
+        <CardBody width="full" height="full">
+          <Flex direction="column" alignItems="center" justifyContent="center">
+            <Image src={img} alt={alt} width={200} height={200} />
+            <Heading
+              mt={-10}
+              className="bg-gradient-to-r from-indigo-600 via-sky-400 to-indigo-700 bg-clip-text tracking-tight text-transparent"
+              textAlign="center"
+              fontSize="3xl"
+            >
+              {title}
+            </Heading>
+          </Flex>
+        </CardBody>
+      </Card>
+    </Link>
+  );
+};
diff --git a/website/src/components/TaskSelection/TaskOptions.tsx b/website/src/components/TaskSelection/TaskOptions.tsx
new file mode 100644
index 00000000..aba68f6d
--- /dev/null
+++ b/website/src/components/TaskSelection/TaskOptions.tsx
@@ -0,0 +1,23 @@
+import { Divider, Flex, Heading } from "@chakra-ui/react";
+import React from "react";
+
+export type TaskOptionsProps = {
+  title: string;
+  children: JSX.Element;
+};
+
+export const TaskOptions = (props: TaskOptionsProps) => {
+  const { title, children } = props;
+  return (
+    <Flex gap={10} wrap="wrap" justifyContent="center">
+      <Heading
+        className="bg-gradient-to-r from-indigo-600 via-sky-400 to-indigo-700 bg-clip-text tracking-tight text-transparent"
+        fontSize="5xl"
+      >
+        {title}
+      </Heading>
+      <Divider mt={-8} />
+      {children}
+    </Flex>
+  );
+};
diff --git a/website/src/components/TaskSelection/TaskSelection.tsx b/website/src/components/TaskSelection/TaskSelection.tsx
new file mode 100644
index 00000000..edc3e807
--- /dev/null
+++ b/website/src/components/TaskSelection/TaskSelection.tsx
@@ -0,0 +1,22 @@
+import React from "react";
+import { TaskOptions } from "./TaskOptions";
+import { Flex } from "@chakra-ui/react";
+import { TaskOption } from "./TaskOption";
+
+export const TaskSelection = () => {
+  return (
+    <Flex gap={10} wrap="wrap" justifyContent="space-evenly" width="full" height="full" alignItems={"center"}>
+      <TaskOptions key="create" title="Create">
+        <TaskOption
+          alt="Summarize Stories"
+          img="/images/logos/logo.svg"
+          title="Summarize stories"
+          link="/summarize/story"
+        />
+      </TaskOptions>
+      <TaskOptions key="evaluate" title="Evaluate">
+        <TaskOption alt="Rate Summaries" img="/images/logos/logo.svg" title="Rate Summaries" link="/summarize/story" />
+      </TaskOptions>
+    </Flex>
+  );
+};
diff --git a/website/src/components/TaskSelection/index.ts b/website/src/components/TaskSelection/index.ts
new file mode 100644
index 00000000..854acd91
--- /dev/null
+++ b/website/src/components/TaskSelection/index.ts
@@ -0,0 +1,3 @@
+export { TaskSelection } from "./TaskSelection";
+export { TaskOptions } from "./TaskOptions";
+export { TaskOption } from "./TaskOption";
\ No newline at end of file
diff --git a/website/src/pages/index.tsx b/website/src/pages/index.tsx
index b591535c..6535c865 100644
--- a/website/src/pages/index.tsx
+++ b/website/src/pages/index.tsx
@@ -5,7 +5,7 @@ import { Faq } from "../components/Faq";
 import { Footer } from "../components/Footer";
 import { Header } from "../components/Header";
 import { Hero } from "../components/Hero";
-import UserChoice from "../components/UserChoice";
+import { TaskSelection } from "../components/TaskSelection";
 
 export default function Home() {
   const { data: session } = useSession();
@@ -41,8 +41,8 @@ export default function Home() {
         />
       </Head>
       <Header />
-      <main className="h-3/4  z-0 bg-white flex flex-col items-center justify-center gap-2">
-        <UserChoice />
+      <main className="h-3/4 m-20 z-0 bg-white flex flex-col items-center justify-center gap-2">
+        <TaskSelection />
       </main>
       <Footer />
     </>

From 689667447660fdd52da52e61aa4843e2e49005c1 Mon Sep 17 00:00:00 2001
From: Lucian Petri <petri.lucian@outlook.com>
Date: Tue, 27 Dec 2022 14:14:29 +0200
Subject: [PATCH 08/10] adding new Tasks

---
 website/src/components/TaskSelection/TaskOptions.tsx   | 2 +-
 website/src/components/TaskSelection/TaskSelection.tsx | 9 ++++++++-
 2 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/website/src/components/TaskSelection/TaskOptions.tsx b/website/src/components/TaskSelection/TaskOptions.tsx
index aba68f6d..fe24b393 100644
--- a/website/src/components/TaskSelection/TaskOptions.tsx
+++ b/website/src/components/TaskSelection/TaskOptions.tsx
@@ -3,7 +3,7 @@ import React from "react";
 
 export type TaskOptionsProps = {
   title: string;
-  children: JSX.Element;
+  children: JSX.Element | JSX.Element[];
 };
 
 export const TaskOptions = (props: TaskOptionsProps) => {
diff --git a/website/src/components/TaskSelection/TaskSelection.tsx b/website/src/components/TaskSelection/TaskSelection.tsx
index edc3e807..81c067e8 100644
--- a/website/src/components/TaskSelection/TaskSelection.tsx
+++ b/website/src/components/TaskSelection/TaskSelection.tsx
@@ -13,9 +13,16 @@ export const TaskSelection = () => {
           title="Summarize stories"
           link="/summarize/story"
         />
+        <TaskOption alt="Reply as User" img="/images/logos/logo.svg" title="Reply as User" link="/create/user_reply" />
+        <TaskOption
+          alt="Reply as Assistant"
+          img="/images/logos/logo.svg"
+          title="Reply as Assistant"
+          link="/create/assistant_reply"
+        />
       </TaskOptions>
       <TaskOptions key="evaluate" title="Evaluate">
-        <TaskOption alt="Rate Summaries" img="/images/logos/logo.svg" title="Rate Summaries" link="/summarize/story" />
+        <TaskOption alt="Rate Prompts" img="/images/logos/logo.svg" title="Rate Prompts" link="/grading/grade-output" />
       </TaskOptions>
     </Flex>
   );

From b87dd9c73201f53d7c5182853194734fbe642762 Mon Sep 17 00:00:00 2001
From: Lucian Petri <24479867+LucianPetri@users.noreply.github.com>
Date: Tue, 27 Dec 2022 16:30:24 +0200
Subject: [PATCH 09/10] fixing pre-commit on TaskSelection

---
 website/src/components/TaskSelection/index.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/website/src/components/TaskSelection/index.ts b/website/src/components/TaskSelection/index.ts
index 854acd91..bb95d0c4 100644
--- a/website/src/components/TaskSelection/index.ts
+++ b/website/src/components/TaskSelection/index.ts
@@ -1,3 +1,4 @@
 export { TaskSelection } from "./TaskSelection";
 export { TaskOptions } from "./TaskOptions";
-export { TaskOption } from "./TaskOption";
\ No newline at end of file
+export { TaskOption } from "./TaskOption";
+s

From ea47c08e4d90186a4e44a29b38be30243fa0a292 Mon Sep 17 00:00:00 2001
From: Lucian Petri <petri.lucian@outlook.com>
Date: Tue, 27 Dec 2022 18:39:19 +0200
Subject: [PATCH 10/10] typo fix

---
 website/src/components/TaskSelection/index.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/website/src/components/TaskSelection/index.ts b/website/src/components/TaskSelection/index.ts
index bb95d0c4..4da7ea7f 100644
--- a/website/src/components/TaskSelection/index.ts
+++ b/website/src/components/TaskSelection/index.ts
@@ -1,4 +1,3 @@
 export { TaskSelection } from "./TaskSelection";
 export { TaskOptions } from "./TaskOptions";
 export { TaskOption } from "./TaskOption";
-s