From 66b89d4685064cd6536526481144332e8b8ea50c Mon Sep 17 00:00:00 2001 From: AbdBarho Date: Wed, 28 Dec 2022 22:25:12 +0100 Subject: [PATCH] Implement `rank_user_replies` in web --- .pre-commit-config.yaml | 2 +- website/package-lock.json | 252 ++++++++++++++++++ website/src/components/Sortable/Sortable.tsx | 48 ++++ .../src/components/Sortable/SortableItem.tsx | 44 +++ website/src/components/TaskInfo/TaskInfo.tsx | 10 + .../TaskSelection/TaskSelection.tsx | 6 + website/src/pages/create/assistant_reply.tsx | 12 +- website/src/pages/create/summarize_story.tsx | 10 +- website/src/pages/create/user_reply.tsx | 13 +- .../pages/evaluate/rank_initial_prompts.tsx | 73 +---- .../src/pages/evaluate/rank_user_replies.tsx | 86 ++++++ website/src/pages/evaluate/rate_summary.tsx | 10 +- 12 files changed, 467 insertions(+), 99 deletions(-) create mode 100644 website/src/components/Sortable/Sortable.tsx create mode 100644 website/src/components/Sortable/SortableItem.tsx create mode 100644 website/src/components/TaskInfo/TaskInfo.tsx create mode 100644 website/src/pages/evaluate/rank_user_replies.tsx diff --git a/.pre-commit-config.yaml b/.pre-commit-config.yaml index 6bb53e46..de06c7ba 100644 --- a/.pre-commit-config.yaml +++ b/.pre-commit-config.yaml @@ -60,4 +60,4 @@ repos: types_or: [javascript, jsx, ts, tsx] language: system pass_filenames: false - entry: bash -c 'cd website && npm install && npm run lint' + entry: bash -c 'cd website && npm ci && npm run lint' diff --git a/website/package-lock.json b/website/package-lock.json index 746a3366..c912164e 100644 --- a/website/package-lock.json +++ b/website/package-lock.json @@ -3768,6 +3768,51 @@ "version": "13.1.0", "license": "MIT" }, + "node_modules/@next/swc-android-arm-eabi": { + "version": "13.0.6", + "resolved": "https://registry.npmjs.org/@next/swc-android-arm-eabi/-/swc-android-arm-eabi-13.0.6.tgz", + "integrity": "sha512-FGFSj3v2Bluw8fD/X+1eXIEB0PhoJE0zfutsAauRhmNpjjZshLDgoXMWm1jTRL/04K/o9gwwO2+A8+sPVCH1uw==", + "cpu": [ + "arm" + ], + "optional": true, + "os": [ + "android" + ], + "engines": { + "node": ">= 10" + } + }, + "node_modules/@next/swc-android-arm64": { + "version": "13.0.6", + "resolved": "https://registry.npmjs.org/@next/swc-android-arm64/-/swc-android-arm64-13.0.6.tgz", + "integrity": "sha512-7MgbtU7kimxuovVsd7jSJWMkIHBDBUsNLmmlkrBRHTvgzx5nDBXogP0hzZm7EImdOPwVMPpUHRQMBP9mbsiJYQ==", + "cpu": [ + "arm64" + ], + "optional": true, + "os": [ + "android" + ], + "engines": { + "node": ">= 10" + } + }, + "node_modules/@next/swc-darwin-arm64": { + "version": "13.0.6", + "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-13.0.6.tgz", + "integrity": "sha512-AUVEpVTxbP/fxdFsjVI9d5a0CFn6NVV7A/RXOb0Y+pXKIIZ1V5rFjPwpYfIfyOo2lrqgehMNQcyMRoTrhq04xg==", + "cpu": [ + "arm64" + ], + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": ">= 10" + } + }, "node_modules/@next/swc-darwin-x64": { "version": "13.0.6", "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-13.0.6.tgz", @@ -3783,6 +3828,141 @@ "node": ">= 10" } }, + "node_modules/@next/swc-freebsd-x64": { + "version": "13.0.6", + "resolved": "https://registry.npmjs.org/@next/swc-freebsd-x64/-/swc-freebsd-x64-13.0.6.tgz", + "integrity": "sha512-6Lbxd9gAdXneTkwHyYW/qtX1Tdw7ND9UbiGsGz/SP43ZInNWnW6q0au4hEVPZ9bOWWRKzcVoeTBdoMpQk9Hx9w==", + "cpu": [ + "x64" + ], + "optional": true, + "os": [ + "freebsd" + ], + "engines": { + "node": ">= 10" + } + }, + "node_modules/@next/swc-linux-arm-gnueabihf": { + "version": "13.0.6", + "resolved": "https://registry.npmjs.org/@next/swc-linux-arm-gnueabihf/-/swc-linux-arm-gnueabihf-13.0.6.tgz", + "integrity": "sha512-wNdi5A519e1P+ozEuYOhWPzzE6m1y7mkO6NFwn6watUwO0X9nZs7fT9THmnekvmFQpaZ6U+xf2MQ9poQoCh6jQ==", + "cpu": [ + "arm" + ], + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 10" + } + }, + "node_modules/@next/swc-linux-arm64-gnu": { + "version": "13.0.6", + "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-13.0.6.tgz", + "integrity": "sha512-e8KTRnleQY1KLk5PwGV5hrmvKksCc74QRpHl5ffWnEEAtL2FE0ave5aIkXqErsPdXkiKuA/owp3LjQrP+/AH7Q==", + "cpu": [ + "arm64" + ], + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 10" + } + }, + "node_modules/@next/swc-linux-arm64-musl": { + "version": "13.0.6", + "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-13.0.6.tgz", + "integrity": "sha512-/7RF03C3mhjYpHN+pqOolgME3guiHU5T3TsejuyteqyEyzdEyLHod+jcYH6ft7UZ71a6TdOewvmbLOtzHW2O8A==", + "cpu": [ + "arm64" + ], + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 10" + } + }, + "node_modules/@next/swc-linux-x64-gnu": { + "version": "13.0.6", + "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-13.0.6.tgz", + "integrity": "sha512-kxyEXnYHpOEkFnmrlwB1QlzJtjC6sAJytKcceIyFUHbCaD3W/Qb5tnclcnHKTaFccizZRePXvV25Ok/eUSpKTw==", + "cpu": [ + "x64" + ], + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 10" + } + }, + "node_modules/@next/swc-linux-x64-musl": { + "version": "13.0.6", + "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-13.0.6.tgz", + "integrity": "sha512-N0c6gubS3WW1oYYgo02xzZnNatfVQP/CiJq2ax+DJ55ePV62IACbRCU99TZNXXg+Kos6vNW4k+/qgvkvpGDeyA==", + "cpu": [ + "x64" + ], + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 10" + } + }, + "node_modules/@next/swc-win32-arm64-msvc": { + "version": "13.0.6", + "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-13.0.6.tgz", + "integrity": "sha512-QjeMB2EBqBFPb/ac0CYr7GytbhUkrG4EwFWbcE0vsRp4H8grt25kYpFQckL4Jak3SUrp7vKfDwZ/SwO7QdO8vw==", + "cpu": [ + "arm64" + ], + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">= 10" + } + }, + "node_modules/@next/swc-win32-ia32-msvc": { + "version": "13.0.6", + "resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-13.0.6.tgz", + "integrity": "sha512-EQzXtdqRTcmhT/tCq81rIwE36Y3fNHPInaCuJzM/kftdXfa0F+64y7FAoMO13npX8EG1+SamXgp/emSusKrCXg==", + "cpu": [ + "ia32" + ], + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">= 10" + } + }, + "node_modules/@next/swc-win32-x64-msvc": { + "version": "13.0.6", + "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-13.0.6.tgz", + "integrity": "sha512-pSkqZ//UP/f2sS9T7IvHLfEWDPTX0vRyXJnAUNisKvO3eF3e1xdhDX7dix/X3Z3lnN4UjSwOzclAI87JFbOwmQ==", + "cpu": [ + "x64" + ], + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">= 10" + } + }, "node_modules/@nodelib/fs.scandir": { "version": "2.1.5", "license": "MIT", @@ -24834,12 +25014,84 @@ "@next/font": { "version": "13.1.0" }, + "@next/swc-android-arm-eabi": { + "version": "13.0.6", + "resolved": "https://registry.npmjs.org/@next/swc-android-arm-eabi/-/swc-android-arm-eabi-13.0.6.tgz", + "integrity": "sha512-FGFSj3v2Bluw8fD/X+1eXIEB0PhoJE0zfutsAauRhmNpjjZshLDgoXMWm1jTRL/04K/o9gwwO2+A8+sPVCH1uw==", + "optional": true + }, + "@next/swc-android-arm64": { + "version": "13.0.6", + "resolved": "https://registry.npmjs.org/@next/swc-android-arm64/-/swc-android-arm64-13.0.6.tgz", + "integrity": "sha512-7MgbtU7kimxuovVsd7jSJWMkIHBDBUsNLmmlkrBRHTvgzx5nDBXogP0hzZm7EImdOPwVMPpUHRQMBP9mbsiJYQ==", + "optional": true + }, + "@next/swc-darwin-arm64": { + "version": "13.0.6", + "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-13.0.6.tgz", + "integrity": "sha512-AUVEpVTxbP/fxdFsjVI9d5a0CFn6NVV7A/RXOb0Y+pXKIIZ1V5rFjPwpYfIfyOo2lrqgehMNQcyMRoTrhq04xg==", + "optional": true + }, "@next/swc-darwin-x64": { "version": "13.0.6", "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-13.0.6.tgz", "integrity": "sha512-SasCDJlshglsPnbzhWaIF6VEGkQy2NECcAOxPwaPr0cwbbt4aUlZ7QmskNzgolr5eAjFS/xTr7CEeKJtZpAAtQ==", "optional": true }, + "@next/swc-freebsd-x64": { + "version": "13.0.6", + "resolved": "https://registry.npmjs.org/@next/swc-freebsd-x64/-/swc-freebsd-x64-13.0.6.tgz", + "integrity": "sha512-6Lbxd9gAdXneTkwHyYW/qtX1Tdw7ND9UbiGsGz/SP43ZInNWnW6q0au4hEVPZ9bOWWRKzcVoeTBdoMpQk9Hx9w==", + "optional": true + }, + "@next/swc-linux-arm-gnueabihf": { + "version": "13.0.6", + "resolved": "https://registry.npmjs.org/@next/swc-linux-arm-gnueabihf/-/swc-linux-arm-gnueabihf-13.0.6.tgz", + "integrity": "sha512-wNdi5A519e1P+ozEuYOhWPzzE6m1y7mkO6NFwn6watUwO0X9nZs7fT9THmnekvmFQpaZ6U+xf2MQ9poQoCh6jQ==", + "optional": true + }, + "@next/swc-linux-arm64-gnu": { + "version": "13.0.6", + "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-13.0.6.tgz", + "integrity": "sha512-e8KTRnleQY1KLk5PwGV5hrmvKksCc74QRpHl5ffWnEEAtL2FE0ave5aIkXqErsPdXkiKuA/owp3LjQrP+/AH7Q==", + "optional": true + }, + "@next/swc-linux-arm64-musl": { + "version": "13.0.6", + "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-13.0.6.tgz", + "integrity": "sha512-/7RF03C3mhjYpHN+pqOolgME3guiHU5T3TsejuyteqyEyzdEyLHod+jcYH6ft7UZ71a6TdOewvmbLOtzHW2O8A==", + "optional": true + }, + "@next/swc-linux-x64-gnu": { + "version": "13.0.6", + "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-13.0.6.tgz", + "integrity": "sha512-kxyEXnYHpOEkFnmrlwB1QlzJtjC6sAJytKcceIyFUHbCaD3W/Qb5tnclcnHKTaFccizZRePXvV25Ok/eUSpKTw==", + "optional": true + }, + "@next/swc-linux-x64-musl": { + "version": "13.0.6", + "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-13.0.6.tgz", + "integrity": "sha512-N0c6gubS3WW1oYYgo02xzZnNatfVQP/CiJq2ax+DJ55ePV62IACbRCU99TZNXXg+Kos6vNW4k+/qgvkvpGDeyA==", + "optional": true + }, + "@next/swc-win32-arm64-msvc": { + "version": "13.0.6", + "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-13.0.6.tgz", + "integrity": "sha512-QjeMB2EBqBFPb/ac0CYr7GytbhUkrG4EwFWbcE0vsRp4H8grt25kYpFQckL4Jak3SUrp7vKfDwZ/SwO7QdO8vw==", + "optional": true + }, + "@next/swc-win32-ia32-msvc": { + "version": "13.0.6", + "resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-13.0.6.tgz", + "integrity": "sha512-EQzXtdqRTcmhT/tCq81rIwE36Y3fNHPInaCuJzM/kftdXfa0F+64y7FAoMO13npX8EG1+SamXgp/emSusKrCXg==", + "optional": true + }, + "@next/swc-win32-x64-msvc": { + "version": "13.0.6", + "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-13.0.6.tgz", + "integrity": "sha512-pSkqZ//UP/f2sS9T7IvHLfEWDPTX0vRyXJnAUNisKvO3eF3e1xdhDX7dix/X3Z3lnN4UjSwOzclAI87JFbOwmQ==", + "optional": true + }, "@nodelib/fs.scandir": { "version": "2.1.5", "requires": { diff --git a/website/src/components/Sortable/Sortable.tsx b/website/src/components/Sortable/Sortable.tsx new file mode 100644 index 00000000..3f805726 --- /dev/null +++ b/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([]); + + 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 ( + + ); +}; diff --git a/website/src/components/Sortable/SortableItem.tsx b/website/src/components/Sortable/SortableItem.tsx new file mode 100644 index 00000000..057e9674 --- /dev/null +++ b/website/src/components/Sortable/SortableItem.tsx @@ -0,0 +1,44 @@ +import { ArrowUpIcon, ArrowDownIcon } from "@heroicons/react/20/solid"; +import { Button } from "src/components/Button"; +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 ( +
  • + + + + {children} + + + + +
    • + ); +}; + +interface ArrowButtonProps { + active: boolean; + onClick: () => void; + children: React.ReactNode; +} + +const ArrowButton = ({ children, active, onClick }: ArrowButtonProps) => { + return ( + + ); +}; diff --git a/website/src/components/TaskInfo/TaskInfo.tsx b/website/src/components/TaskInfo/TaskInfo.tsx new file mode 100644 index 00000000..629d5c1a --- /dev/null +++ b/website/src/components/TaskInfo/TaskInfo.tsx @@ -0,0 +1,10 @@ +export const TaskInfo = ({ id, output }: { id: string; output: any }) => { + return ( +
    + Prompt + {id} + Output + {output} +
    + ); +}; diff --git a/website/src/components/TaskSelection/TaskSelection.tsx b/website/src/components/TaskSelection/TaskSelection.tsx index 6077408f..eaf1f41e 100644 --- a/website/src/components/TaskSelection/TaskSelection.tsx +++ b/website/src/components/TaskSelection/TaskSelection.tsx @@ -34,6 +34,12 @@ export const TaskSelection = () => { title="Rank Initial Prompts" link="/evaluate/rank_initial_prompts" /> + ); diff --git a/website/src/pages/create/assistant_reply.tsx b/website/src/pages/create/assistant_reply.tsx index a7f058f8..92938f35 100644 --- a/website/src/pages/create/assistant_reply.tsx +++ b/website/src/pages/create/assistant_reply.tsx @@ -5,10 +5,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 { Button } from "src/components/Button"; import { LoadingScreen } from "src/components/Loading/LoadingScreen"; +import { TaskInfo } from "src/components/TaskInfo/TaskInfo"; const AssistantReply = () => { const [tasks, setTasks] = useState([]); @@ -61,13 +63,7 @@ const AssistantReply = () => {
    -
    - Prompt - {tasks[0].id} - Output - Submit your answer -
    - +
    diff --git a/website/src/pages/create/user_reply.tsx b/website/src/pages/create/user_reply.tsx index 40bdb5c5..a9c4a079 100644 --- a/website/src/pages/create/user_reply.tsx +++ b/website/src/pages/create/user_reply.tsx @@ -5,10 +5,12 @@ 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 { Messages } from "src/components/Messages"; +import { TaskInfo } from "src/components/TaskInfo/TaskInfo"; +import { TwoColumns } from "src/components/TwoColumns"; const UserReply = () => { const [tasks, setTasks] = useState([]); @@ -62,12 +64,7 @@ const UserReply = () => {
    -
    - Prompt - {tasks[0].id} - Output - Submit your answer -
    +
    diff --git a/website/src/pages/evaluate/rank_initial_prompts.tsx b/website/src/pages/evaluate/rank_initial_prompts.tsx index d0522b15..645ddd9c 100644 --- a/website/src/pages/evaluate/rank_initial_prompts.tsx +++ b/website/src/pages/evaluate/rank_initial_prompts.tsx @@ -1,5 +1,3 @@ -import { ArrowDownIcon, ArrowUpIcon } from "@heroicons/react/20/solid"; -import clsx from "clsx"; import Head from "next/head"; import { useState } from "react"; import useSWRImmutable from "swr/immutable"; @@ -10,6 +8,8 @@ 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"; const RankInitialPrompts = () => { const [tasks, setTasks] = useState([]); @@ -22,9 +22,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); }, }); @@ -53,12 +50,6 @@ const RankInitialPrompts = () => { return
    No tasks found...
    ; } - const prompts = tasks[0].task.prompts as string[]; - const items = ranking.map((i) => ({ - text: prompts[i], - originalIndex: i, - })); - return ( <> @@ -71,38 +62,11 @@ const RankInitialPrompts = () => {

    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 -
    +
    +
    @@ -121,30 +85,3 @@ const RankInitialPrompts = () => { }; export default RankInitialPrompts; - -const SortableItem = ({ canIncrement, canDecrement, onIncrement, onDecrement, children, ...props }) => { - return ( -
  • - - - - {children} - - - - -
    • - ); -}; - -const ArrowButton = ({ children, active, onClick }) => { - return ( - - ); -}; diff --git a/website/src/pages/evaluate/rank_user_replies.tsx b/website/src/pages/evaluate/rank_user_replies.tsx new file mode 100644 index 00000000..50df5a9c --- /dev/null +++ b/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 { Button } from "src/components/Button"; +import { Sortable } from "src/components/Sortable/Sortable"; +import { TaskInfo } from "src/components/TaskInfo/TaskInfo"; + +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([]); + + 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, + }, + }); + }; + + /** + * TODO: Make this a nicer loading screen. + */ + if (tasks.length == 0) { + return
    Loading...
    ; + } + const replies = tasks[0].task.replies as string[]; + + return ( + <> + + Rank User Replies + + +
    +
    +
    Instructions
    +

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

    + +
    + +
    + + +
    + + +
    +
    +
    + + ); +}; + +export default RankUserReplies; diff --git a/website/src/pages/evaluate/rate_summary.tsx b/website/src/pages/evaluate/rate_summary.tsx index cc529324..8ffe2a9d 100644 --- a/website/src/pages/evaluate/rate_summary.tsx +++ b/website/src/pages/evaluate/rate_summary.tsx @@ -9,9 +9,10 @@ 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"; import { LoadingScreen } from "src/components/Loading/LoadingScreen"; +import { TwoColumns } from "src/components/TwoColumns"; +import { TaskInfo } from "src/components/TaskInfo/TaskInfo"; const RateSummary = () => { // Use an array of tasks that record the sequence of steps until a task is @@ -91,12 +92,7 @@ const RateSummary = () => {
    -
    - Prompt - {tasks[0].id} - Output - Submit your answer -
    +