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>
<TaskOptions key="evaluate" title="Evaluate"> <TaskOptions key="evaluate" title="Evaluate">
{/* <TaskOption {/*
Commented out while the backend does not support them.
<TaskOption
alt="Rate Prompts" alt="Rate Prompts"
img="/images/logos/logo.svg" img="/images/logos/logo.svg"
title="Rate Prompts" 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. // 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 // Log the interaction locally to create our user_post_id needed by the Task
// Backend. // Backend.
@@ -46,7 +46,7 @@ const handler = async (req, res) => {
"Content-Type": "application/json", "Content-Type": "application/json",
}, },
body: JSON.stringify({ body: JSON.stringify({
type: "message_rating", type: update_type,
user: { user: {
id: token.sub, id: token.sub,
display_name: token.name || token.email, display_name: token.name || token.email,
+12 -3
View File
@@ -18,9 +18,8 @@ const AssistantReply = () => {
const inputRef = useRef<HTMLTextAreaElement>(null); 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) => { onSuccess: (data) => {
console.log(data);
setTasks([data]); setTasks([data]);
}, },
}); });
@@ -43,6 +42,11 @@ const AssistantReply = () => {
}); });
}; };
const fetchNextTask = () => {
inputRef.current.value = "";
mutate();
};
if (isLoading) { if (isLoading) {
return <LoadingScreen text="Loading..." />; return <LoadingScreen text="Loading..." />;
} }
@@ -52,6 +56,7 @@ const AssistantReply = () => {
} }
const task = tasks[0].task; const task = tasks[0].task;
const endTask = tasks[tasks.length - 1];
return ( return (
<div className="p-6 bg-slate-100 text-gray-800"> <div className="p-6 bg-slate-100 text-gray-800">
<TwoColumns> <TwoColumns>
@@ -68,7 +73,11 @@ const AssistantReply = () => {
<Flex justify="center" ml="auto" gap={2}> <Flex justify="center" ml="auto" gap={2}>
<SkipButton>Skip</SkipButton> <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> </Flex>
</section> </section>
</div> </div>
+12 -3
View File
@@ -18,9 +18,8 @@ const UserReply = () => {
const inputRef = useRef<HTMLTextAreaElement>(null); 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) => { onSuccess: (data) => {
console.log(data);
setTasks([data]); setTasks([data]);
}, },
}); });
@@ -43,6 +42,11 @@ const UserReply = () => {
}); });
}; };
const fetchNextTask = () => {
inputRef.current.value = "";
mutate();
};
if (isLoading) { if (isLoading) {
return <LoadingScreen text="Loading..." />; return <LoadingScreen text="Loading..." />;
} }
@@ -52,6 +56,7 @@ const UserReply = () => {
} }
const task = tasks[0].task; const task = tasks[0].task;
const endTask = tasks[tasks.length - 1];
return ( return (
<div className="p-6 bg-slate-100 text-gray-800"> <div className="p-6 bg-slate-100 text-gray-800">
<TwoColumns> <TwoColumns>
@@ -69,7 +74,11 @@ const UserReply = () => {
<Flex justify="center" ml="auto" gap={2}> <Flex justify="center" ml="auto" gap={2}>
<SkipButton>Skip</SkipButton> <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> </Flex>
</section> </section>
</div> </div>
@@ -21,7 +21,7 @@ const RankAssistantReplies = () => {
*/ */
const [ranking, setRanking] = useState<number[]>([]); 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) => { onSuccess: (data) => {
setTasks([data]); setTasks([data]);
}, },
@@ -44,6 +44,11 @@ const RankAssistantReplies = () => {
}); });
}; };
const fetchNextTask = () => {
setRanking([]);
mutate();
};
if (isLoading) { if (isLoading) {
return <LoadingScreen text="Loading..." />; return <LoadingScreen text="Loading..." />;
} }
@@ -51,8 +56,9 @@ const RankAssistantReplies = () => {
if (tasks.length == 0) { if (tasks.length == 0) {
return <div className="p-6 bg-slate-100 text-gray-800">Loading...</div>; 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 ( return (
<> <>
<Head> <Head>
@@ -73,9 +79,13 @@ const RankAssistantReplies = () => {
<Flex justify="center" ml="auto" gap={2}> <Flex justify="center" ml="auto" gap={2}>
<SkipButton>Skip</SkipButton> <SkipButton>Skip</SkipButton>
<SubmitButton onClick={() => submitResponse(tasks[0])} disabled={ranking.length === 0}> {endTask.task.type !== "task_done" ? (
Submit <SubmitButton onClick={() => submitResponse(tasks[0])} disabled={ranking.length === 0}>
</SubmitButton> Submit
</SubmitButton>
) : (
<SubmitButton onClick={fetchNextTask}>Next Task</SubmitButton>
)}
</Flex> </Flex>
</section> </section>
</main> </main>
@@ -21,7 +21,7 @@ const RankInitialPrompts = () => {
*/ */
const [ranking, setRanking] = useState<number[]>([]); 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) => { onSuccess: (data) => {
setTasks([data]); setTasks([data]);
}, },
@@ -44,6 +44,11 @@ const RankInitialPrompts = () => {
}); });
}; };
const fetchNextTask = () => {
setRanking([]);
mutate();
};
if (isLoading) { if (isLoading) {
return <LoadingScreen text="Loading..." />; 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>; return <div className="p-6 bg-slate-100 text-gray-800">No tasks found...</div>;
} }
const endTask = tasks[tasks.length - 1];
return ( return (
<> <>
<Head> <Head>
@@ -72,9 +78,13 @@ const RankInitialPrompts = () => {
<Flex justify="center" ml="auto" gap={2}> <Flex justify="center" ml="auto" gap={2}>
<SkipButton>Skip</SkipButton> <SkipButton>Skip</SkipButton>
<SubmitButton onClick={() => submitResponse(tasks[0])} disabled={ranking.length === 0}> {endTask.task.type !== "task_done" ? (
Submit <SubmitButton onClick={() => submitResponse(tasks[0])} disabled={ranking.length === 0}>
</SubmitButton> Submit
</SubmitButton>
) : (
<SubmitButton onClick={fetchNextTask}>Next Task</SubmitButton>
)}
</Flex> </Flex>
</section> </section>
</main> </main>
@@ -21,7 +21,7 @@ const RankUserReplies = () => {
*/ */
const [ranking, setRanking] = useState<number[]>([]); 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) => { onSuccess: (data) => {
setTasks([data]); setTasks([data]);
}, },
@@ -44,6 +44,11 @@ const RankUserReplies = () => {
}); });
}; };
const fetchNextTask = () => {
setRanking([]);
mutate();
};
if (isLoading) { if (isLoading) {
return <LoadingScreen text="Loading..." />; return <LoadingScreen text="Loading..." />;
} }
@@ -53,6 +58,7 @@ const RankUserReplies = () => {
} }
const replies = tasks[0].task.replies as string[]; const replies = tasks[0].task.replies as string[];
const endTask = tasks[tasks.length - 1];
return ( return (
<> <>
<Head> <Head>
@@ -73,9 +79,13 @@ const RankUserReplies = () => {
<Flex justify="center" ml="auto" gap={2}> <Flex justify="center" ml="auto" gap={2}>
<SkipButton>Skip</SkipButton> <SkipButton>Skip</SkipButton>
<SubmitButton onClick={() => submitResponse(tasks[0])} disabled={ranking.length === 0}> {endTask.task.type !== "task_done" ? (
Submit <SubmitButton onClick={() => submitResponse(tasks[0])} disabled={ranking.length === 0}>
</SubmitButton> Submit
</SubmitButton>
) : (
<SubmitButton onClick={fetchNextTask}>Next Task</SubmitButton>
)}
</Flex> </Flex>
</section> </section>
</main> </main>
+8 -3
View File
@@ -23,9 +23,8 @@ const RateSummary = () => {
// Fetch the very fist task. We can ignore everything except isLoading // Fetch the very fist task. We can ignore everything except isLoading
// because the onSuccess handler will update `tasks` when ready. // 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) => { onSuccess: (data) => {
console.log(data);
setTasks([data]); setTasks([data]);
}, },
}); });
@@ -46,6 +45,7 @@ const RateSummary = () => {
const submitResponse = (t) => { const submitResponse = (t) => {
trigger({ trigger({
id: t.id, id: t.id,
update_type: "message_rating",
content: { content: {
rating: rating, rating: rating,
}, },
@@ -60,6 +60,7 @@ const RateSummary = () => {
return <div className="p-6 bg-slate-100 text-gray-800">No tasks found...</div>; return <div className="p-6 bg-slate-100 text-gray-800">No tasks found...</div>;
} }
const endTask = tasks[tasks.length - 1];
return ( return (
<> <>
<Head> <Head>
@@ -97,7 +98,11 @@ const RateSummary = () => {
<Flex justify="center" ml="auto" gap={2}> <Flex justify="center" ml="auto" gap={2}>
<SkipButton>Skip</SkipButton> <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> </Flex>
</section> </section>
</main> </main>