Merge pull request #192 from LAION-AI/104-load-new-tasks

Update all the task pages to fetch a new taks after submission
This commit is contained in:
Keith Stevens
2022-12-31 18:37:58 +09:00
committed by GitHub
8 changed files with 80 additions and 25 deletions
@@ -22,7 +22,9 @@ export const TaskSelection = () => {
/>
</TaskOptions>
<TaskOptions key="evaluate" title="Evaluate">
{/* <TaskOption
{/*
Commented out while the backend does not support them.
<TaskOption
alt="Rate Prompts"
img="/images/logos/logo.svg"
title="Rate Prompts"
+2 -2
View File
@@ -22,7 +22,7 @@ const handler = async (req, res) => {
}
// Parse out the local task ID and the interaction contents.
const { id, content } = await JSON.parse(req.body);
const { id, content, update_type } = await JSON.parse(req.body);
// Log the interaction locally to create our user_post_id needed by the Task
// Backend.
@@ -46,7 +46,7 @@ const handler = async (req, res) => {
"Content-Type": "application/json",
},
body: JSON.stringify({
type: "message_rating",
type: update_type,
user: {
id: token.sub,
display_name: token.name || token.email,
+12 -3
View File
@@ -18,9 +18,8 @@ const AssistantReply = () => {
const inputRef = useRef<HTMLTextAreaElement>(null);
const { isLoading } = useSWRImmutable("/api/new_task/assistant_reply ", fetcher, {
const { isLoading, mutate } = useSWRImmutable("/api/new_task/assistant_reply ", fetcher, {
onSuccess: (data) => {
console.log(data);
setTasks([data]);
},
});
@@ -43,6 +42,11 @@ const AssistantReply = () => {
});
};
const fetchNextTask = () => {
inputRef.current.value = "";
mutate();
};
if (isLoading) {
return <LoadingScreen text="Loading..." />;
}
@@ -52,6 +56,7 @@ const AssistantReply = () => {
}
const task = tasks[0].task;
const endTask = tasks[tasks.length - 1];
return (
<div className="p-6 bg-slate-100 text-gray-800">
<TwoColumns>
@@ -68,7 +73,11 @@ const AssistantReply = () => {
<Flex justify="center" ml="auto" gap={2}>
<SkipButton>Skip</SkipButton>
<SubmitButton onClick={() => submitResponse(tasks[0])}>Submit</SubmitButton>
{endTask.task.type !== "task_done" ? (
<SubmitButton onClick={() => submitResponse(tasks[0])}>Submit</SubmitButton>
) : (
<SubmitButton onClick={fetchNextTask}>Next Task</SubmitButton>
)}
</Flex>
</section>
</div>
+12 -3
View File
@@ -18,9 +18,8 @@ const UserReply = () => {
const inputRef = useRef<HTMLTextAreaElement>(null);
const { isLoading } = useSWRImmutable("/api/new_task/prompter_reply", fetcher, {
const { isLoading, mutate } = useSWRImmutable("/api/new_task/prompter_reply", fetcher, {
onSuccess: (data) => {
console.log(data);
setTasks([data]);
},
});
@@ -43,6 +42,11 @@ const UserReply = () => {
});
};
const fetchNextTask = () => {
inputRef.current.value = "";
mutate();
};
if (isLoading) {
return <LoadingScreen text="Loading..." />;
}
@@ -52,6 +56,7 @@ const UserReply = () => {
}
const task = tasks[0].task;
const endTask = tasks[tasks.length - 1];
return (
<div className="p-6 bg-slate-100 text-gray-800">
<TwoColumns>
@@ -69,7 +74,11 @@ const UserReply = () => {
<Flex justify="center" ml="auto" gap={2}>
<SkipButton>Skip</SkipButton>
<SubmitButton onClick={() => submitResponse(tasks[0])}>Submit</SubmitButton>
{endTask.task.type !== "task_done" ? (
<SubmitButton onClick={() => submitResponse(tasks[0])}>Submit</SubmitButton>
) : (
<SubmitButton onClick={fetchNextTask}>Next Task</SubmitButton>
)}
</Flex>
</section>
</div>
@@ -21,7 +21,7 @@ const RankAssistantReplies = () => {
*/
const [ranking, setRanking] = useState<number[]>([]);
const { isLoading } = useSWRImmutable("/api/new_task/rank_assistant_replies", fetcher, {
const { isLoading, mutate } = useSWRImmutable("/api/new_task/rank_assistant_replies", fetcher, {
onSuccess: (data) => {
setTasks([data]);
},
@@ -44,6 +44,11 @@ const RankAssistantReplies = () => {
});
};
const fetchNextTask = () => {
setRanking([]);
mutate();
};
if (isLoading) {
return <LoadingScreen text="Loading..." />;
}
@@ -51,8 +56,9 @@ const RankAssistantReplies = () => {
if (tasks.length == 0) {
return <div className="p-6 bg-slate-100 text-gray-800">Loading...</div>;
}
const replies = tasks[0].task.replies as string[];
const replies = tasks[0].task.replies as string[];
const endTask = tasks[tasks.length - 1];
return (
<>
<Head>
@@ -73,9 +79,13 @@ const RankAssistantReplies = () => {
<Flex justify="center" ml="auto" gap={2}>
<SkipButton>Skip</SkipButton>
<SubmitButton onClick={() => submitResponse(tasks[0])} disabled={ranking.length === 0}>
Submit
</SubmitButton>
{endTask.task.type !== "task_done" ? (
<SubmitButton onClick={() => submitResponse(tasks[0])} disabled={ranking.length === 0}>
Submit
</SubmitButton>
) : (
<SubmitButton onClick={fetchNextTask}>Next Task</SubmitButton>
)}
</Flex>
</section>
</main>
@@ -21,7 +21,7 @@ const RankInitialPrompts = () => {
*/
const [ranking, setRanking] = useState<number[]>([]);
const { isLoading } = useSWRImmutable("/api/new_task/rank_initial_prompts", fetcher, {
const { isLoading, mutate } = useSWRImmutable("/api/new_task/rank_initial_prompts", fetcher, {
onSuccess: (data) => {
setTasks([data]);
},
@@ -44,6 +44,11 @@ const RankInitialPrompts = () => {
});
};
const fetchNextTask = () => {
setRanking([]);
mutate();
};
if (isLoading) {
return <LoadingScreen text="Loading..." />;
}
@@ -52,6 +57,7 @@ const RankInitialPrompts = () => {
return <div className="p-6 bg-slate-100 text-gray-800">No tasks found...</div>;
}
const endTask = tasks[tasks.length - 1];
return (
<>
<Head>
@@ -72,9 +78,13 @@ const RankInitialPrompts = () => {
<Flex justify="center" ml="auto" gap={2}>
<SkipButton>Skip</SkipButton>
<SubmitButton onClick={() => submitResponse(tasks[0])} disabled={ranking.length === 0}>
Submit
</SubmitButton>
{endTask.task.type !== "task_done" ? (
<SubmitButton onClick={() => submitResponse(tasks[0])} disabled={ranking.length === 0}>
Submit
</SubmitButton>
) : (
<SubmitButton onClick={fetchNextTask}>Next Task</SubmitButton>
)}
</Flex>
</section>
</main>
@@ -21,7 +21,7 @@ const RankUserReplies = () => {
*/
const [ranking, setRanking] = useState<number[]>([]);
const { isLoading } = useSWRImmutable("/api/new_task/rank_prompter_replies", fetcher, {
const { isLoading, mutate } = useSWRImmutable("/api/new_task/rank_prompter_replies", fetcher, {
onSuccess: (data) => {
setTasks([data]);
},
@@ -44,6 +44,11 @@ const RankUserReplies = () => {
});
};
const fetchNextTask = () => {
setRanking([]);
mutate();
};
if (isLoading) {
return <LoadingScreen text="Loading..." />;
}
@@ -53,6 +58,7 @@ const RankUserReplies = () => {
}
const replies = tasks[0].task.replies as string[];
const endTask = tasks[tasks.length - 1];
return (
<>
<Head>
@@ -73,9 +79,13 @@ const RankUserReplies = () => {
<Flex justify="center" ml="auto" gap={2}>
<SkipButton>Skip</SkipButton>
<SubmitButton onClick={() => submitResponse(tasks[0])} disabled={ranking.length === 0}>
Submit
</SubmitButton>
{endTask.task.type !== "task_done" ? (
<SubmitButton onClick={() => submitResponse(tasks[0])} disabled={ranking.length === 0}>
Submit
</SubmitButton>
) : (
<SubmitButton onClick={fetchNextTask}>Next Task</SubmitButton>
)}
</Flex>
</section>
</main>
+8 -3
View File
@@ -23,9 +23,8 @@ const RateSummary = () => {
// Fetch the very fist task. We can ignore everything except isLoading
// because the onSuccess handler will update `tasks` when ready.
const { isLoading } = useSWRImmutable("/api/new_task/rate_summary", fetcher, {
const { isLoading, mutate } = useSWRImmutable("/api/new_task/rate_summary", fetcher, {
onSuccess: (data) => {
console.log(data);
setTasks([data]);
},
});
@@ -46,6 +45,7 @@ const RateSummary = () => {
const submitResponse = (t) => {
trigger({
id: t.id,
update_type: "message_rating",
content: {
rating: rating,
},
@@ -60,6 +60,7 @@ const RateSummary = () => {
return <div className="p-6 bg-slate-100 text-gray-800">No tasks found...</div>;
}
const endTask = tasks[tasks.length - 1];
return (
<>
<Head>
@@ -97,7 +98,11 @@ const RateSummary = () => {
<Flex justify="center" ml="auto" gap={2}>
<SkipButton>Skip</SkipButton>
<SubmitButton onClick={() => submitResponse(tasks[0])}>Submit</SubmitButton>
{endTask.task.type !== "task_done" ? (
<SubmitButton onClick={() => submitResponse(tasks[0])}>Submit</SubmitButton>
) : (
<SubmitButton onClick={mutate}>Next Task</SubmitButton>
)}
</Flex>
</section>
</main>