From 4fe45e3651696d5c4100c7186592d0ce345e55d4 Mon Sep 17 00:00:00 2001 From: AbdBarho Date: Wed, 28 Dec 2022 11:45:35 +0100 Subject: [PATCH] Implement `rank_initial_prompts` for web --- .../TaskSelection/TaskSelection.tsx | 6 + .../pages/evaluate/rank_initial_prompts.tsx | 147 ++++++++++++++++++ 2 files changed, 153 insertions(+) create mode 100644 website/src/pages/evaluate/rank_initial_prompts.tsx diff --git a/website/src/components/TaskSelection/TaskSelection.tsx b/website/src/components/TaskSelection/TaskSelection.tsx index a0e0838f..e9f4876d 100644 --- a/website/src/components/TaskSelection/TaskSelection.tsx +++ b/website/src/components/TaskSelection/TaskSelection.tsx @@ -28,6 +28,12 @@ export const TaskSelection = () => { title="Rate Prompts" link="/evaluate/rate_summary" /> + ); diff --git a/website/src/pages/evaluate/rank_initial_prompts.tsx b/website/src/pages/evaluate/rank_initial_prompts.tsx new file mode 100644 index 00000000..7c5378d5 --- /dev/null +++ b/website/src/pages/evaluate/rank_initial_prompts.tsx @@ -0,0 +1,147 @@ +import { ArrowUpIcon, ArrowDownIcon } from "@heroicons/react/20/solid"; +import clsx from "clsx"; +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 { Button } from "src/components/Button"; + +const RankInitialPrompts = () => { + const [tasks, setTasks] = useState([]); + /** + * This array will contain the ranked indices of the prompts + * The best prompt will have index 0, and the worst is the last. + */ + const [ranking, setRanking] = useState([]); + + 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); + }, + }); + + 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, + }, + }); + }; + + /** + * TODO: Make this a nicer loading screen. + */ + if (tasks.length == 0) { + return
Loading...
; + } + const prompts = tasks[0].task.prompts as string[]; + const items = ranking.map((i) => ({ + text: prompts[i], + originalIndex: i, + })); + + return ( + <> + + Rank Initial Prompts + + +
+
+
Instructions
+

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

+
    + {items.map(({ text, originalIndex }, 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} + + ))} +
+
+ +
+
+ Prompt + {tasks[0].id} + Output + Submit your answer +
+ +
+ + +
+
+
+ + ); +}; + +export default RankInitialPrompts; + +const SortableItem = ({ canIncrement, canDecrement, onIncrement, onDecrement, children, ...props }) => { + return ( +
  • + + + + {children} + + + + +
    • + ); +}; + +const ArrowButton = ({ children, active, onClick }) => { + return ( + + ); +};