From 4f8c4e04577f1fc58bcf6b7727b7cb26251e24da Mon Sep 17 00:00:00 2001 From: AbdBarho Date: Thu, 29 Dec 2022 18:20:33 +0100 Subject: [PATCH] Implement `rank_assistant_replies` in web --- website/src/components/Button.tsx | 19 ---- website/src/components/Buttons/Skip.tsx | 9 ++ website/src/components/Buttons/Submit.tsx | 9 ++ .../src/components/Sortable/SortableItem.tsx | 8 +- .../TaskSelection/TaskSelection.tsx | 6 ++ website/src/pages/create/assistant_reply.tsx | 19 ++-- website/src/pages/create/summarize_story.tsx | 18 ++-- website/src/pages/create/user_reply.tsx | 18 ++-- .../pages/evaluate/rank_assistant_replies.tsx | 86 +++++++++++++++++++ .../pages/evaluate/rank_initial_prompts.tsx | 18 ++-- .../src/pages/evaluate/rank_user_replies.tsx | 18 ++-- website/src/pages/evaluate/rate_summary.tsx | 18 ++-- 12 files changed, 157 insertions(+), 89 deletions(-) delete mode 100644 website/src/components/Button.tsx create mode 100644 website/src/components/Buttons/Skip.tsx create mode 100644 website/src/components/Buttons/Submit.tsx create mode 100644 website/src/pages/evaluate/rank_assistant_replies.tsx diff --git a/website/src/components/Button.tsx b/website/src/components/Button.tsx deleted file mode 100644 index 5ae1e7b4..00000000 --- a/website/src/components/Button.tsx +++ /dev/null @@ -1,19 +0,0 @@ -import clsx from "clsx"; - -export const Button = ( - props: React.DetailedHTMLProps, HTMLButtonElement> -) => { - const { className, children, ...rest } = props; - return ( - - ); -}; diff --git a/website/src/components/Buttons/Skip.tsx b/website/src/components/Buttons/Skip.tsx new file mode 100644 index 00000000..74ca0926 --- /dev/null +++ b/website/src/components/Buttons/Skip.tsx @@ -0,0 +1,9 @@ +import { Button, ButtonProps } from "@chakra-ui/react"; + +export const SkipButton = ({ children, ...props }: ButtonProps) => { + return ( + + ); +}; diff --git a/website/src/components/Buttons/Submit.tsx b/website/src/components/Buttons/Submit.tsx new file mode 100644 index 00000000..daeab32b --- /dev/null +++ b/website/src/components/Buttons/Submit.tsx @@ -0,0 +1,9 @@ +import { Button, ButtonProps } from "@chakra-ui/react"; + +export const SubmitButton = ({ children, ...props }: ButtonProps) => { + return ( + + ); +}; diff --git a/website/src/components/Sortable/SortableItem.tsx b/website/src/components/Sortable/SortableItem.tsx index 057e9674..0b7e7ba7 100644 --- a/website/src/components/Sortable/SortableItem.tsx +++ b/website/src/components/Sortable/SortableItem.tsx @@ -1,5 +1,5 @@ import { ArrowUpIcon, ArrowDownIcon } from "@heroicons/react/20/solid"; -import { Button } from "src/components/Button"; +import { Button } from "@chakra-ui/react"; import clsx from "clsx"; export interface SortableItemProps { @@ -33,11 +33,7 @@ interface ArrowButtonProps { const ArrowButton = ({ children, active, onClick }: ArrowButtonProps) => { return ( - ); diff --git a/website/src/components/TaskSelection/TaskSelection.tsx b/website/src/components/TaskSelection/TaskSelection.tsx index eaf1f41e..414ad76e 100644 --- a/website/src/components/TaskSelection/TaskSelection.tsx +++ b/website/src/components/TaskSelection/TaskSelection.tsx @@ -40,6 +40,12 @@ export const TaskSelection = () => { title="Rank User Replies" link="/evaluate/rank_user_replies" /> + ); diff --git a/website/src/pages/create/assistant_reply.tsx b/website/src/pages/create/assistant_reply.tsx index 92938f35..f2f2af85 100644 --- a/website/src/pages/create/assistant_reply.tsx +++ b/website/src/pages/create/assistant_reply.tsx @@ -1,4 +1,4 @@ -import { Textarea } from "@chakra-ui/react"; +import { Flex, Textarea } from "@chakra-ui/react"; import { useRef, useState } from "react"; import useSWRMutation from "swr/mutation"; import useSWRImmutable from "swr/immutable"; @@ -6,11 +6,12 @@ import useSWRImmutable from "swr/immutable"; import fetcher from "src/lib/fetcher"; import poster from "src/lib/poster"; -import { Button } from "src/components/Button"; import { Messages } from "src/components/Messages"; import { TwoColumns } from "src/components/TwoColumns"; 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([]); @@ -64,15 +65,11 @@ const AssistantReply = () => {
-
- - -
+ + + Skip + submitResponse(tasks[0])}>Submit +
); diff --git a/website/src/pages/create/summarize_story.tsx b/website/src/pages/create/summarize_story.tsx index 28ee734c..2a86eb4b 100644 --- a/website/src/pages/create/summarize_story.tsx +++ b/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,10 +7,11 @@ 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 "src/components/Loading/LoadingScreen"; import { TwoColumns } from "src/components/TwoColumns"; 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 @@ -78,15 +79,10 @@ const SummarizeStory = () => {
-
- - -
+ + Skip + submitResponse(tasks[0])}>Submit +
diff --git a/website/src/pages/create/user_reply.tsx b/website/src/pages/create/user_reply.tsx index a9c4a079..663af48d 100644 --- a/website/src/pages/create/user_reply.tsx +++ b/website/src/pages/create/user_reply.tsx @@ -1,4 +1,4 @@ -import { Textarea } from "@chakra-ui/react"; +import { Flex, Textarea } from "@chakra-ui/react"; import { useRef, useState } from "react"; import useSWRMutation from "swr/mutation"; import useSWRImmutable from "swr/immutable"; @@ -6,11 +6,12 @@ import useSWRImmutable from "swr/immutable"; import fetcher from "src/lib/fetcher"; import poster from "src/lib/poster"; -import { Button } from "src/components/Button"; 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 { SkipButton } from "src/components/Buttons/Skip"; +import { SubmitButton } from "src/components/Buttons/Submit"; const UserReply = () => { const [tasks, setTasks] = useState([]); @@ -66,15 +67,10 @@ const UserReply = () => {
-
- - -
+ + Skip + submitResponse(tasks[0])}>Submit +
); diff --git a/website/src/pages/evaluate/rank_assistant_replies.tsx b/website/src/pages/evaluate/rank_assistant_replies.tsx new file mode 100644 index 00000000..3d2973a9 --- /dev/null +++ b/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([]); + + 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 ; + } + + if (tasks.length == 0) { + return
Loading...
; + } + const replies = tasks[0].task.replies as string[]; + + return ( + <> + + Rank Assistant Replies + + +
+
+
Instructions
+

+ Given the following replies, sort them from best to worst, best being first, worst being last. +

+ +
+ +
+ + + + Skip + submitResponse(tasks[0])} disabled={ranking.length === 0}> + Submit + + +
+
+ + ); +}; + +export default RankAssistantReplies; diff --git a/website/src/pages/evaluate/rank_initial_prompts.tsx b/website/src/pages/evaluate/rank_initial_prompts.tsx index 645ddd9c..1b85a655 100644 --- a/website/src/pages/evaluate/rank_initial_prompts.tsx +++ b/website/src/pages/evaluate/rank_initial_prompts.tsx @@ -1,3 +1,4 @@ +import { Flex } from "@chakra-ui/react"; import Head from "next/head"; import { useState } from "react"; import useSWRImmutable from "swr/immutable"; @@ -6,10 +7,11 @@ 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 "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([]); @@ -68,16 +70,12 @@ const RankInitialPrompts = () => {
-
- - -
+ +
diff --git a/website/src/pages/evaluate/rank_user_replies.tsx b/website/src/pages/evaluate/rank_user_replies.tsx index 74b2ac8a..f56d8a43 100644 --- a/website/src/pages/evaluate/rank_user_replies.tsx +++ b/website/src/pages/evaluate/rank_user_replies.tsx @@ -6,10 +6,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 "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([]); @@ -69,16 +71,12 @@ const RankUserReplies = () => {
-
- - -
+ +
diff --git a/website/src/pages/evaluate/rate_summary.tsx b/website/src/pages/evaluate/rate_summary.tsx index 8ffe2a9d..ff6d01b8 100644 --- a/website/src/pages/evaluate/rate_summary.tsx +++ b/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,10 +9,11 @@ import RatingRadioGroup from "src/components/RatingRadioGroup"; import fetcher from "src/lib/fetcher"; import poster from "src/lib/poster"; -import { Button } from "src/components/Button"; import { LoadingScreen } from "src/components/Loading/LoadingScreen"; import { TwoColumns } from "src/components/TwoColumns"; 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 @@ -94,15 +95,10 @@ const RateSummary = () => {
-
- - -
+ + Skip + submitResponse(tasks[0])}>Submit +