From 2987ec76ffe85020778ced7f98aed7f5bb88ac2b Mon Sep 17 00:00:00 2001 From: Kostia Date: Sat, 7 Jan 2023 05:13:28 +0200 Subject: [PATCH 1/3] Refactor tasks into components --- .../src/components/Dashboard/TaskOption.tsx | 151 +++++------------- website/src/components/Tasks/CreateTask.tsx | 54 +++++++ website/src/components/Tasks/EvaluateTask.tsx | 46 ++++++ website/src/components/Tasks/Task.tsx | 20 +++ website/src/components/Tasks/TaskTypes.tsx | 44 +++++ website/src/pages/create/assistant_reply.tsx | 56 ++----- website/src/pages/create/initial_prompt.tsx | 52 ++---- website/src/pages/create/user_reply.tsx | 57 ++----- .../pages/evaluate/rank_assistant_replies.tsx | 48 +----- .../pages/evaluate/rank_initial_prompts.tsx | 43 +---- .../src/pages/evaluate/rank_user_replies.tsx | 47 +----- 11 files changed, 238 insertions(+), 380 deletions(-) create mode 100644 website/src/components/Tasks/CreateTask.tsx create mode 100644 website/src/components/Tasks/EvaluateTask.tsx create mode 100644 website/src/components/Tasks/Task.tsx create mode 100644 website/src/components/Tasks/TaskTypes.tsx diff --git a/website/src/components/Dashboard/TaskOption.tsx b/website/src/components/Dashboard/TaskOption.tsx index 50f707a6..c2c86bd1 100644 --- a/website/src/components/Dashboard/TaskOption.tsx +++ b/website/src/components/Dashboard/TaskOption.tsx @@ -1,126 +1,57 @@ 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 { 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", - }, +const displayTaskCategories = ["create", "evaluate"]; - { - 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", - }, -]; +function capitalize(text: string) { + return text.charAt(0).toUpperCase() + text.slice(1); +} export const TaskOption = () => { const backgroundColor = useColorModeValue("white", "gray.700"); return ( -
- Create - - {crTasks.map((item, itemIndex) => ( - - - - - - {item.label} - - - {item.desc} - - - - ( +
+ {capitalize(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..6fe75acb --- /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, 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 ( +
+ + <> +
Reply as the assistant
+

Given the following conversation, provide an adequate reply

+ {task.conversation ? : null} + + <> +
Provide the assistant`s reply
+ + + + + +
+ ); +}; 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..d6d4ebf6 --- /dev/null +++ b/website/src/components/Tasks/Task.tsx @@ -0,0 +1,20 @@ +import { CreateTask } from "./CreateTask"; +import { EvaluateTask } from "./EvaluateTask"; +import { TaskTypes } from "./TaskTypes"; + +export const Task = ({ tasks, trigger, mutate, mainBgClasses }) => { + const task = tasks[0].task; + + function taskTypeComponent(type) { + const category = TaskTypes.find((taskType) => taskType.type === type).category; + + switch (category) { + case "create": + return ; + case "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..5117c662 --- /dev/null +++ b/website/src/components/Tasks/TaskTypes.tsx @@ -0,0 +1,44 @@ +export const TaskTypes = [ + { + label: "Create Initial Prompts", + desc: "Write initial prompts to help Open Assistant to try replying to diverse messages.", + category: "create", + pathname: "/create/initial_prompt", + type: "initial_prompt", + }, + { + label: "Reply as User", + desc: "Chat with Open Assistant and help improve it’s responses as you interact with it.", + category: "create", + pathname: "/create/user_reply", + type: "prompter_reply", + }, + { + label: "Reply as Assistant", + desc: "Help Open Assistant improve its responses to conversations with other users.", + category: "create", + pathname: "/create/assistant_reply", + type: "assistant_reply", + }, + { + label: "Rank User Replies", + category: "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: "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: "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} - /> -
+ ); }; From 7d6a8fa8d0426c148c2bd6fa72d6d98169da5f54 Mon Sep 17 00:00:00 2001 From: Kostia Date: Sat, 7 Jan 2023 16:56:47 +0200 Subject: [PATCH 2/3] Add instruction/overview to TaskType. Fix capitalize. --- website/src/components/Dashboard/TaskOption.tsx | 8 +++----- website/src/components/Tasks/CreateTask.tsx | 8 ++++---- website/src/components/Tasks/Task.tsx | 14 +++++++++++--- website/src/components/Tasks/TaskTypes.tsx | 6 ++++++ 4 files changed, 24 insertions(+), 12 deletions(-) diff --git a/website/src/components/Dashboard/TaskOption.tsx b/website/src/components/Dashboard/TaskOption.tsx index c2c86bd1..e782fa8c 100644 --- a/website/src/components/Dashboard/TaskOption.tsx +++ b/website/src/components/Dashboard/TaskOption.tsx @@ -5,10 +5,6 @@ import { TaskTypes } from "../Tasks/TaskTypes"; const displayTaskCategories = ["create", "evaluate"]; -function capitalize(text: string) { - return text.charAt(0).toUpperCase() + text.slice(1); -} - export const TaskOption = () => { const backgroundColor = useColorModeValue("white", "gray.700"); @@ -16,7 +12,9 @@ export const TaskOption = () => { {displayTaskCategories.map((category, categoryIndex) => (
- {capitalize(category)} + + {category} + {TaskTypes.filter((task) => task.category == category).map((item, itemIndex) => ( diff --git a/website/src/components/Tasks/CreateTask.tsx b/website/src/components/Tasks/CreateTask.tsx index 6fe75acb..057177d2 100644 --- a/website/src/components/Tasks/CreateTask.tsx +++ b/website/src/components/Tasks/CreateTask.tsx @@ -4,7 +4,7 @@ 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, trigger, mutate, mainBgClasses }) => { +export const CreateTask = ({ tasks, taskType, trigger, mutate, mainBgClasses }) => { const task = tasks[0].task; const [inputText, setInputText] = useState(""); @@ -33,12 +33,12 @@ export const CreateTask = ({ tasks, trigger, mutate, mainBgClasses }) => {
<> -
Reply as the assistant
-

Given the following conversation, provide an adequate reply

+
{taskType.label}
+

{taskType.overview}

{task.conversation ? : null} <> -
Provide the assistant`s reply
+
{taskType.instruction}
{ const task = tasks[0].task; function taskTypeComponent(type) { - const category = TaskTypes.find((taskType) => taskType.type === type).category; - + const taskType = TaskTypes.find((taskType) => taskType.type === type); + const category = taskType.category; switch (category) { case "create": - return ; + return ( + + ); case "evaluate": return ; } diff --git a/website/src/components/Tasks/TaskTypes.tsx b/website/src/components/Tasks/TaskTypes.tsx index 5117c662..4f48d043 100644 --- a/website/src/components/Tasks/TaskTypes.tsx +++ b/website/src/components/Tasks/TaskTypes.tsx @@ -5,6 +5,8 @@ export const TaskTypes = [ category: "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", @@ -12,6 +14,8 @@ export const TaskTypes = [ category: "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", @@ -19,6 +23,8 @@ export const TaskTypes = [ category: "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", From 7d014cc35bda8b0cf511417ecbde80c565bb09c7 Mon Sep 17 00:00:00 2001 From: Kostia Date: Sat, 7 Jan 2023 17:25:15 +0200 Subject: [PATCH 3/3] Added TaskCategory enum --- website/src/components/Dashboard/TaskOption.tsx | 8 +++----- website/src/components/Tasks/Task.tsx | 6 +++--- website/src/components/Tasks/TaskTypes.tsx | 17 +++++++++++------ 3 files changed, 17 insertions(+), 14 deletions(-) diff --git a/website/src/components/Dashboard/TaskOption.tsx b/website/src/components/Dashboard/TaskOption.tsx index e782fa8c..5e6ceb2f 100644 --- a/website/src/components/Dashboard/TaskOption.tsx +++ b/website/src/components/Dashboard/TaskOption.tsx @@ -1,9 +1,9 @@ import { Box, Flex, GridItem, Heading, SimpleGrid, Text, useColorModeValue } from "@chakra-ui/react"; import Link from "next/link"; -import { TaskTypes } from "../Tasks/TaskTypes"; +import { TaskCategory, TaskTypes } from "../Tasks/TaskTypes"; -const displayTaskCategories = ["create", "evaluate"]; +const displayTaskCategories = [TaskCategory.Create, TaskCategory.Evaluate]; export const TaskOption = () => { const backgroundColor = useColorModeValue("white", "gray.700"); @@ -12,9 +12,7 @@ export const TaskOption = () => { {displayTaskCategories.map((category, categoryIndex) => (
- - {category} - + {TaskCategory[category]} {TaskTypes.filter((task) => task.category == category).map((item, itemIndex) => ( diff --git a/website/src/components/Tasks/Task.tsx b/website/src/components/Tasks/Task.tsx index 093d2240..ce9505e9 100644 --- a/website/src/components/Tasks/Task.tsx +++ b/website/src/components/Tasks/Task.tsx @@ -1,6 +1,6 @@ import { CreateTask } from "./CreateTask"; import { EvaluateTask } from "./EvaluateTask"; -import { TaskTypes } from "./TaskTypes"; +import { TaskCategory, TaskTypes } from "./TaskTypes"; export const Task = ({ tasks, trigger, mutate, mainBgClasses }) => { const task = tasks[0].task; @@ -9,7 +9,7 @@ export const Task = ({ tasks, trigger, mutate, mainBgClasses }) => { const taskType = TaskTypes.find((taskType) => taskType.type === type); const category = taskType.category; switch (category) { - case "create": + case TaskCategory.Create: return ( { mainBgClasses={mainBgClasses} /> ); - case "evaluate": + case TaskCategory.Evaluate: return ; } } diff --git a/website/src/components/Tasks/TaskTypes.tsx b/website/src/components/Tasks/TaskTypes.tsx index 4f48d043..413a1e16 100644 --- a/website/src/components/Tasks/TaskTypes.tsx +++ b/website/src/components/Tasks/TaskTypes.tsx @@ -1,8 +1,13 @@ +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: "create", + category: TaskCategory.Create, pathname: "/create/initial_prompt", type: "initial_prompt", overview: "Create an initial message to send to the assistant", @@ -11,7 +16,7 @@ export const TaskTypes = [ { label: "Reply as User", desc: "Chat with Open Assistant and help improve it’s responses as you interact with it.", - category: "create", + category: TaskCategory.Create, pathname: "/create/user_reply", type: "prompter_reply", overview: "Given the following conversation, provide an adequate reply", @@ -20,7 +25,7 @@ export const TaskTypes = [ { label: "Reply as Assistant", desc: "Help Open Assistant improve its responses to conversations with other users.", - category: "create", + category: TaskCategory.Create, pathname: "/create/assistant_reply", type: "assistant_reply", overview: "Given the following conversation, provide an adequate reply", @@ -28,7 +33,7 @@ export const TaskTypes = [ }, { label: "Rank User Replies", - category: "evaluate", + category: TaskCategory.Evaluate, desc: "Help Open Assistant improve its responses to conversations with other users.", pathname: "/evaluate/rank_user_replies", type: "rank_prompter_replies", @@ -36,14 +41,14 @@ export const TaskTypes = [ { label: "Rank Assistant Replies", desc: "Score prompts given by Open Assistant based on their accuracy and readability.", - category: "evaluate", + 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: "evaluate", + category: TaskCategory.Evaluate, pathname: "/evaluate/rank_initial_prompts", type: "rank_initial_prompts", },