diff --git a/website/src/components/Dashboard/TaskOption.tsx b/website/src/components/Dashboard/TaskOption.tsx index 50f707a6..5e6ceb2f 100644 --- a/website/src/components/Dashboard/TaskOption.tsx +++ b/website/src/components/Dashboard/TaskOption.tsx @@ -1,126 +1,53 @@ import { Box, Flex, GridItem, Heading, SimpleGrid, Text, useColorModeValue } from "@chakra-ui/react"; import Link from "next/link"; -const crTasks = [ - { - label: "Create Initial Prompts", - desc: "Write initial prompts to help Open Assistant to try replying to diverse messages.", - type: "create", - pathname: "/create/initial_prompt", - }, - { - label: "Reply as User", - desc: "Chat with Open Assistant and help improve it’s responses as you interact with it.", - type: "create", - pathname: "/create/user_reply", - }, - { - label: "Reply as Assistant", - desc: "Help Open Assistant improve its responses to conversations with other users.", - type: "create", - pathname: "/create/assistant_reply", - }, -]; +import { TaskCategory, TaskTypes } from "../Tasks/TaskTypes"; -const evTasks = [ - { - label: "Rank User Replies", - type: "eval", - desc: "Help Open Assistant improve its responses to conversations with other users.", - pathname: "/evaluate/rank_user_replies", - }, - - { - label: "Rank Assistant Replies", - desc: "Score prompts given by Open Assistant based on their accuracy and readability.", - type: "eval", - pathname: "/evaluate/rank_assistant_replies", - }, - { - label: "Rank Initial Prompts", - desc: "Score prompts given by Open Assistant based on their accuracy and readability.", - type: "eval;", - pathname: "/evaluate/rank_initial_prompts", - }, -]; +const displayTaskCategories = [TaskCategory.Create, TaskCategory.Evaluate]; export const TaskOption = () => { const backgroundColor = useColorModeValue("white", "gray.700"); return ( -
- Create - - {crTasks.map((item, itemIndex) => ( - - - - - - {item.label} - - - {item.desc} - - - - ( +
+ {TaskCategory[category]} + + {TaskTypes.filter((task) => task.category == category).map((item, itemIndex) => ( + + - - Go - - - - - ))} - -
-
- Evaluate - - {evTasks.map((item, itemIndex) => ( - - - - - - {item.label} - - - {item.desc} + + + + {item.label} + + + {item.desc} + + + + + + Go - - - - - Go - - - - - ))} - -
+
+
+ + ))} +
+
+ ))}
); }; diff --git a/website/src/components/Tasks/CreateTask.tsx b/website/src/components/Tasks/CreateTask.tsx new file mode 100644 index 00000000..057177d2 --- /dev/null +++ b/website/src/components/Tasks/CreateTask.tsx @@ -0,0 +1,54 @@ +import { useState } from "react"; +import { Messages } from "src/components/Messages"; +import { TaskControls } from "src/components/Survey/TaskControls"; +import { TrackedTextarea } from "src/components/Survey/TrackedTextarea"; +import { TwoColumnsWithCards } from "src/components/Survey/TwoColumnsWithCards"; + +export const CreateTask = ({ tasks, taskType, trigger, mutate, mainBgClasses }) => { + const task = tasks[0].task; + + const [inputText, setInputText] = useState(""); + + const submitResponse = (task: { id: string }) => { + const text = inputText.trim(); + trigger({ + id: task.id, + update_type: "text_reply_to_message", + content: { + text, + }, + }); + }; + + const fetchNextTask = () => { + setInputText(""); + mutate(); + }; + + const textChangeHandler = (event: React.ChangeEvent) => { + setInputText(event.target.value); + }; + + return ( +
+ + <> +
{taskType.label}
+

{taskType.overview}

+ {task.conversation ? : null} + + <> +
{taskType.instruction}
+ + +
+ + +
+ ); +}; diff --git a/website/src/components/Tasks/EvaluateTask.tsx b/website/src/components/Tasks/EvaluateTask.tsx new file mode 100644 index 00000000..94b47fbb --- /dev/null +++ b/website/src/components/Tasks/EvaluateTask.tsx @@ -0,0 +1,46 @@ +import { useState } from "react"; +import { ContextMessages } from "src/components/ContextMessages"; +import { Sortable } from "src/components/Sortable/Sortable"; +import { SurveyCard } from "src/components/Survey/SurveyCard"; +import { TaskControlsOverridable } from "src/components/Survey/TaskControlsOverridable"; + +export const EvaluateTask = ({ tasks, trigger, mutate, mainBgClasses }) => { + const [ranking, setRanking] = useState([]); + const submitResponse = (task) => { + trigger({ + id: task.id, + update_type: "message_ranking", + content: { + ranking, + }, + }); + }; + + const fetchNextTask = () => { + setRanking([]); + mutate(); + }; + + const sortables = tasks[0].task.replies ? "replies" : "prompts"; + + return ( +
+ +
Instructions
+

+ Given the following {sortables}, sort them from best to worst, best being first, worst being last. +

+ {tasks[0].task.conversation ? : null} + +
+ + setRanking(tasks[0].task[sortables].map((_, idx) => idx))} + onSubmitResponse={submitResponse} + onSkip={fetchNextTask} + /> +
+ ); +}; diff --git a/website/src/components/Tasks/Task.tsx b/website/src/components/Tasks/Task.tsx new file mode 100644 index 00000000..ce9505e9 --- /dev/null +++ b/website/src/components/Tasks/Task.tsx @@ -0,0 +1,28 @@ +import { CreateTask } from "./CreateTask"; +import { EvaluateTask } from "./EvaluateTask"; +import { TaskCategory, TaskTypes } from "./TaskTypes"; + +export const Task = ({ tasks, trigger, mutate, mainBgClasses }) => { + const task = tasks[0].task; + + function taskTypeComponent(type) { + const taskType = TaskTypes.find((taskType) => taskType.type === type); + const category = taskType.category; + switch (category) { + case TaskCategory.Create: + return ( + + ); + case TaskCategory.Evaluate: + return ; + } + } + + return taskTypeComponent(task.type); +}; diff --git a/website/src/components/Tasks/TaskTypes.tsx b/website/src/components/Tasks/TaskTypes.tsx new file mode 100644 index 00000000..413a1e16 --- /dev/null +++ b/website/src/components/Tasks/TaskTypes.tsx @@ -0,0 +1,55 @@ +export enum TaskCategory { + Create, + Evaluate, +} + +export const TaskTypes = [ + { + label: "Create Initial Prompts", + desc: "Write initial prompts to help Open Assistant to try replying to diverse messages.", + category: TaskCategory.Create, + pathname: "/create/initial_prompt", + type: "initial_prompt", + overview: "Create an initial message to send to the assistant", + instruction: "Provide the initial prompt", + }, + { + label: "Reply as User", + desc: "Chat with Open Assistant and help improve it’s responses as you interact with it.", + category: TaskCategory.Create, + pathname: "/create/user_reply", + type: "prompter_reply", + overview: "Given the following conversation, provide an adequate reply", + instruction: "Provide the user`s reply", + }, + { + label: "Reply as Assistant", + desc: "Help Open Assistant improve its responses to conversations with other users.", + category: TaskCategory.Create, + pathname: "/create/assistant_reply", + type: "assistant_reply", + overview: "Given the following conversation, provide an adequate reply", + instruction: "Provide the assistant`s reply", + }, + { + label: "Rank User Replies", + category: TaskCategory.Evaluate, + desc: "Help Open Assistant improve its responses to conversations with other users.", + pathname: "/evaluate/rank_user_replies", + type: "rank_prompter_replies", + }, + { + label: "Rank Assistant Replies", + desc: "Score prompts given by Open Assistant based on their accuracy and readability.", + category: TaskCategory.Evaluate, + pathname: "/evaluate/rank_assistant_replies", + type: "rank_assistant_replies", + }, + { + label: "Rank Initial Prompts", + desc: "Score prompts given by Open Assistant based on their accuracy and readability.", + category: TaskCategory.Evaluate, + pathname: "/evaluate/rank_initial_prompts", + type: "rank_initial_prompts", + }, +]; diff --git a/website/src/pages/create/assistant_reply.tsx b/website/src/pages/create/assistant_reply.tsx index 17036b6e..6dad3931 100644 --- a/website/src/pages/create/assistant_reply.tsx +++ b/website/src/pages/create/assistant_reply.tsx @@ -1,11 +1,9 @@ import { Container } from "@chakra-ui/react"; import { useColorMode } from "@chakra-ui/react"; +import Head from "next/head"; import { useEffect, useState } from "react"; import { LoadingScreen } from "src/components/Loading/LoadingScreen"; -import { Messages } from "src/components/Messages"; -import { TaskControls } from "src/components/Survey/TaskControls"; -import { TrackedTextarea } from "src/components/Survey/TrackedTextarea"; -import { TwoColumnsWithCards } from "src/components/Survey/TwoColumnsWithCards"; +import { Task } from "src/components/Tasks/Task"; import fetcher from "src/lib/fetcher"; import poster from "src/lib/poster"; import useSWRImmutable from "swr/immutable"; @@ -13,7 +11,6 @@ import useSWRMutation from "swr/mutation"; const AssistantReply = () => { const [tasks, setTasks] = useState([]); - const [inputText, setInputText] = useState(""); const { isLoading, mutate } = useSWRImmutable("/api/new_task/assistant_reply ", fetcher, { onSuccess: (data) => { @@ -34,26 +31,6 @@ const AssistantReply = () => { }, }); - const submitResponse = (task: { id: string }) => { - const text = inputText.trim(); - trigger({ - id: task.id, - update_type: "text_reply_to_message", - content: { - text, - }, - }); - }; - - const fetchNextTask = () => { - setInputText(""); - mutate(); - }; - - const textChangeHandler = (event: React.ChangeEvent) => { - setInputText(event.target.value); - }; - const { colorMode } = useColorMode(); const mainBgClasses = colorMode === "light" ? "bg-slate-300 text-gray-800" : "bg-slate-900 text-white"; @@ -65,29 +42,14 @@ const AssistantReply = () => { return No tasks found...; } - const task = tasks[0].task; - return ( -
- - <> -
Reply as the assistant
-

Given the following conversation, provide an adequate reply

- - - <> -
Provide the assistant`s reply
- - -
- - -
+ <> + + Reply as Assistant + + + + ); }; diff --git a/website/src/pages/create/initial_prompt.tsx b/website/src/pages/create/initial_prompt.tsx index 5d289d34..fc9ba39b 100644 --- a/website/src/pages/create/initial_prompt.tsx +++ b/website/src/pages/create/initial_prompt.tsx @@ -1,10 +1,9 @@ import { Container } from "@chakra-ui/react"; import { useColorMode } from "@chakra-ui/react"; +import Head from "next/head"; import { useEffect, useState } from "react"; import { LoadingScreen } from "src/components/Loading/LoadingScreen"; -import { TaskControls } from "src/components/Survey/TaskControls"; -import { TrackedTextarea } from "src/components/Survey/TrackedTextarea"; -import { TwoColumnsWithCards } from "src/components/Survey/TwoColumnsWithCards"; +import { Task } from "src/components/Tasks/Task"; import fetcher from "src/lib/fetcher"; import poster from "src/lib/poster"; import useSWRImmutable from "swr/immutable"; @@ -12,7 +11,6 @@ import useSWRMutation from "swr/mutation"; const InitialPrompt = () => { const [tasks, setTasks] = useState([]); - const [inputText, setInputText] = useState(""); const { isLoading, mutate } = useSWRImmutable("/api/new_task/initial_prompt ", fetcher, { onSuccess: (data) => { @@ -33,26 +31,6 @@ const InitialPrompt = () => { } }, [tasks]); - const submitResponse = (task: { id: string }) => { - const text = inputText.trim(); - trigger({ - id: task.id, - update_type: "text_reply_to_message", - content: { - text, - }, - }); - }; - - const fetchNextTask = () => { - setInputText(""); - mutate(); - }; - - const textChangeHandler = (event: React.ChangeEvent) => { - setInputText(event.target.value); - }; - const { colorMode } = useColorMode(); const mainBgClasses = colorMode === "light" ? "bg-slate-300 text-gray-800" : "bg-slate-900 text-white"; @@ -65,25 +43,13 @@ const InitialPrompt = () => { } return ( -
- - <> -
Start a conversation
-

Create an initial message to send to the assistant

- - <> -
Provide the initial prompt
- - -
- - -
+ <> + + Reply as Assistant + + + + ); }; diff --git a/website/src/pages/create/user_reply.tsx b/website/src/pages/create/user_reply.tsx index eec832cb..70487805 100644 --- a/website/src/pages/create/user_reply.tsx +++ b/website/src/pages/create/user_reply.tsx @@ -1,10 +1,8 @@ import { useColorMode } from "@chakra-ui/react"; +import Head from "next/head"; import { useEffect, useState } from "react"; import { LoadingScreen } from "src/components/Loading/LoadingScreen"; -import { Messages } from "src/components/Messages"; -import { TaskControls } from "src/components/Survey/TaskControls"; -import { TrackedTextarea } from "src/components/Survey/TrackedTextarea"; -import { TwoColumnsWithCards } from "src/components/Survey/TwoColumnsWithCards"; +import { Task } from "src/components/Tasks/Task"; import fetcher from "src/lib/fetcher"; import poster from "src/lib/poster"; import useSWRImmutable from "swr/immutable"; @@ -12,7 +10,6 @@ import useSWRMutation from "swr/mutation"; const UserReply = () => { const [tasks, setTasks] = useState([]); - const [inputText, setInputText] = useState(""); const { isLoading, mutate } = useSWRImmutable("/api/new_task/prompter_reply", fetcher, { onSuccess: (data) => { @@ -33,26 +30,6 @@ const UserReply = () => { }, }); - const submitResponse = (task: { id: string }) => { - const text = inputText.trim(); - trigger({ - id: task.id, - update_type: "text_reply_to_message", - content: { - text, - }, - }); - }; - - const fetchNextTask = () => { - setInputText(""); - mutate(); - }; - - const textChangeHandler = (event: React.ChangeEvent) => { - setInputText(event.target.value); - }; - const { colorMode } = useColorMode(); const mainBgClasses = colorMode === "light" ? "bg-slate-300 text-gray-800" : "bg-slate-900 text-white"; @@ -70,30 +47,14 @@ const UserReply = () => { ); } - const task = tasks[0].task; - return ( -
- - <> -
Reply as a user
-

Given the following conversation, provide an adequate reply

- - {task.hint &&

Hint: {task.hint}

} - - <> -
Provide the user`s reply
- - -
- - -
+ <> + + Reply as Assistant + + + + ); }; diff --git a/website/src/pages/evaluate/rank_assistant_replies.tsx b/website/src/pages/evaluate/rank_assistant_replies.tsx index d20f6364..ccf6d55b 100644 --- a/website/src/pages/evaluate/rank_assistant_replies.tsx +++ b/website/src/pages/evaluate/rank_assistant_replies.tsx @@ -1,12 +1,8 @@ import { useColorMode } from "@chakra-ui/react"; import Head from "next/head"; import { useEffect, useState } from "react"; -import { ContextMessages } from "src/components/ContextMessages"; import { LoadingScreen } from "src/components/Loading/LoadingScreen"; -import { Message } from "src/components/Messages"; -import { Sortable } from "src/components/Sortable/Sortable"; -import { SurveyCard } from "src/components/Survey/SurveyCard"; -import { TaskControlsOverridable } from "src/components/Survey/TaskControlsOverridable"; +import { Task } from "src/components/Tasks/Task"; import fetcher from "src/lib/fetcher"; import poster from "src/lib/poster"; import useSWRImmutable from "swr/immutable"; @@ -14,11 +10,6 @@ import useSWRMutation from "swr/mutation"; 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, mutate } = useSWRImmutable("/api/new_task/rank_assistant_replies", fetcher, { onSuccess: (data) => { @@ -39,21 +30,6 @@ const RankAssistantReplies = () => { }, }); - const submitResponse = (task) => { - trigger({ - id: task.id, - update_type: "message_ranking", - content: { - ranking, - }, - }); - }; - - const fetchNextTask = () => { - setRanking([]); - mutate(); - }; - const { colorMode } = useColorMode(); const mainBgClasses = colorMode === "light" ? "bg-slate-300 text-gray-800" : "bg-slate-900 text-white"; @@ -71,33 +47,13 @@ const RankAssistantReplies = () => { ); } - const replies = tasks[0].task.replies as string[]; - const messages = tasks[0].task.conversation.messages as Message[]; - return ( <> Rank Assistant Replies -
- -
Instructions
-

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

- - -
- - setRanking(tasks[0].task.replies.map((_, idx) => idx))} - onSubmitResponse={submitResponse} - onSkip={fetchNextTask} - /> -
+ ); }; diff --git a/website/src/pages/evaluate/rank_initial_prompts.tsx b/website/src/pages/evaluate/rank_initial_prompts.tsx index a0a48b27..e7c69573 100644 --- a/website/src/pages/evaluate/rank_initial_prompts.tsx +++ b/website/src/pages/evaluate/rank_initial_prompts.tsx @@ -2,9 +2,7 @@ import { useColorMode } from "@chakra-ui/react"; import Head from "next/head"; import { useEffect, useState } from "react"; import { LoadingScreen } from "src/components/Loading/LoadingScreen"; -import { Sortable } from "src/components/Sortable/Sortable"; -import { SurveyCard } from "src/components/Survey/SurveyCard"; -import { TaskControlsOverridable } from "src/components/Survey/TaskControlsOverridable"; +import { Task } from "src/components/Tasks/Task"; import fetcher from "src/lib/fetcher"; import poster from "src/lib/poster"; import useSWRImmutable from "swr/immutable"; @@ -12,12 +10,6 @@ import useSWRMutation from "swr/mutation"; 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 bg = useColorModeValue("gray.100", "gray.800"); const { isLoading, mutate } = useSWRImmutable("/api/new_task/rank_initial_prompts", fetcher, { onSuccess: (data) => { @@ -38,21 +30,6 @@ const RankInitialPrompts = () => { } }, [tasks]); - const submitResponse = (task) => { - trigger({ - id: task.id, - update_type: "message_ranking", - content: { - ranking, - }, - }); - }; - - const fetchNextTask = () => { - setRanking([]); - mutate(); - }; - const { colorMode } = useColorMode(); const mainBgClasses = colorMode === "light" ? "bg-slate-300 text-gray-800" : "bg-slate-900 text-white"; @@ -76,23 +53,7 @@ const RankInitialPrompts = () => { Rank Initial Prompts -
- -
Instructions
-

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

- -
- - setRanking(tasks[0].task.prompts.map((_, idx) => idx))} - onSubmitResponse={submitResponse} - onSkip={fetchNextTask} - /> -
+ ); }; diff --git a/website/src/pages/evaluate/rank_user_replies.tsx b/website/src/pages/evaluate/rank_user_replies.tsx index 09e24fa2..13e8923a 100644 --- a/website/src/pages/evaluate/rank_user_replies.tsx +++ b/website/src/pages/evaluate/rank_user_replies.tsx @@ -1,12 +1,8 @@ import { useColorMode } from "@chakra-ui/react"; import Head from "next/head"; import { useEffect, useState } from "react"; -import { ContextMessages } from "src/components/ContextMessages"; import { LoadingScreen } from "src/components/Loading/LoadingScreen"; -import { Message } from "src/components/Messages"; -import { Sortable } from "src/components/Sortable/Sortable"; -import { SurveyCard } from "src/components/Survey/SurveyCard"; -import { TaskControlsOverridable } from "src/components/Survey/TaskControlsOverridable"; +import { Task } from "src/components/Tasks/Task"; import fetcher from "src/lib/fetcher"; import poster from "src/lib/poster"; import useSWRImmutable from "swr/immutable"; @@ -14,11 +10,6 @@ import useSWRMutation from "swr/mutation"; 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, mutate } = useSWRImmutable("/api/new_task/rank_prompter_replies", fetcher, { onSuccess: (data) => { @@ -39,21 +30,6 @@ const RankUserReplies = () => { }, }); - const submitResponse = (task) => { - trigger({ - id: task.id, - update_type: "message_ranking", - content: { - ranking, - }, - }); - }; - - const fetchNextTask = () => { - setRanking([]); - mutate(); - }; - const { colorMode } = useColorMode(); const mainBgClasses = colorMode === "light" ? "bg-slate-300 text-gray-800" : "bg-slate-900 text-white"; @@ -70,8 +46,6 @@ const RankUserReplies = () => { ); } - const replies = tasks[0].task.replies as string[]; - const messages = tasks[0].task.conversation.messages as Message[]; return ( <> @@ -79,24 +53,7 @@ const RankUserReplies = () => { Rank User Replies -
- -
Instructions
-

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

- - -
- - setRanking(tasks[0].task.replies.map((_, idx) => idx))} - onSubmitResponse={submitResponse} - onSkip={fetchNextTask} - /> -
+ ); };