wassname/Open-Assistant
1
0
Fork 0
mirror of https://github.com/wassname/Open-Assistant.git synced 2026-09-10 11:41:04 +08:00
Code Issues Packages Projects Releases Wiki Activity

Refactor tasks into components

Browse Source
This commit is contained in:
Kostia
2023-01-07 05:13:28 +02:00
parent 64a8543290
commit 2987ec76ff
11 changed files with 238 additions and 380 deletions
Download Patch File Download Diff File Expand all files Collapse all files
website/src/pages/evaluate/rank_assistant_replies.tsx
+2 -46
View File
@@ -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<number[]>([]);
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 (
<>
<Head>
<title>Rank Assistant Replies</title>
<meta name="description" content="Rank Assistant Replies." />
</Head>
<div className={`p-12 ${mainBgClasses}`}>
<SurveyCard className="max-w-7xl mx-auto h-fit mb-24">
<h5 className="text-lg font-semibold mb-4">Instructions</h5>
<p className="text-lg py-1">
Given the following replies, sort them from best to worst, best being first, worst being last.
</p>
<ContextMessages messages={messages} />
<Sortable items={replies} onChange={setRanking} className="my-8" />
</SurveyCard>
<TaskControlsOverridable
tasks={tasks}
isValid={ranking.length == tasks[0].task.replies.length}
prepareForSubmit={() => setRanking(tasks[0].task.replies.map((_, idx) => idx))}
onSubmitResponse={submitResponse}
onSkip={fetchNextTask}
/>
</div>
<Task tasks={tasks} trigger={trigger} mutate={mutate} mainBgClasses={mainBgClasses} />
</>
);
};
website/src/pages/evaluate/rank_initial_prompts.tsx
+2 -41
View File
@@ -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<number[]>([]);
// 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 = () => {
<title>Rank Initial Prompts</title>
<meta name="description" content="Rank initial prompts." />
</Head>
<div className={`p-12 ${mainBgClasses}`}>
<SurveyCard className="max-w-7xl mx-auto h-fit mb-24">
<h5 className="text-lg font-semibold mb-4">Instructions</h5>
<p className="text-lg py-1">
Given the following prompts, sort them from best to worst, best being first, worst being last.
</p>
<Sortable items={tasks[0].task.prompts} onChange={setRanking} className="my-8" />
</SurveyCard>
<TaskControlsOverridable
tasks={tasks}
isValid={ranking.length == tasks[0].task.prompts.length}
prepareForSubmit={() => setRanking(tasks[0].task.prompts.map((_, idx) => idx))}
onSubmitResponse={submitResponse}
onSkip={fetchNextTask}
/>
</div>
<Task tasks={tasks} trigger={trigger} mutate={mutate} mainBgClasses={mainBgClasses} />
</>
);
};
website/src/pages/evaluate/rank_user_replies.tsx
+2 -45
View File
@@ -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<number[]>([]);
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 = () => {
</div>
);
}
const replies = tasks[0].task.replies as string[];
const messages = tasks[0].task.conversation.messages as Message[];
return (
<>
@@ -79,24 +53,7 @@ const RankUserReplies = () => {
<title>Rank User Replies</title>
<meta name="description" content="Rank User Replies." />
</Head>
<div className={`p-12 ${mainBgClasses}`}>
<SurveyCard className="max-w-7xl mx-auto h-fit mb-24">
<h5 className="text-lg font-semibold mb-4">Instructions</h5>
<p className="text-lg py-1">
Given the following replies, sort them from best to worst, best being first, worst being last.
</p>
<ContextMessages messages={messages} />
<Sortable items={replies} onChange={setRanking} className="my-8" />
</SurveyCard>
<TaskControlsOverridable
tasks={tasks}
isValid={ranking.length == tasks[0].task.replies.length}
prepareForSubmit={() => setRanking(tasks[0].task.replies.map((_, idx) => idx))}
onSubmitResponse={submitResponse}
onSkip={fetchNextTask}
/>
</div>
<Task tasks={tasks} trigger={trigger} mutate={mutate} mainBgClasses={mainBgClasses} />
</>
);
};