Merge pull request LAION-AI#350 from kostiak/context-messages

Context messages
davidsolomon21cn · Jan 4, 2023 · 66662d9 · 66662d9
2 parents fea6e70 + 8aad3be
commit 66662d9
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 0 deletions.
diff --git a/website/src/components/ContextMessages.tsx b/website/src/components/ContextMessages.tsx
@@ -0,0 +1,17 @@
+import { Box } from "@chakra-ui/react";
+import { Message } from "./Messages";
+
+export const ContextMessages = ({ messages }: { messages: Message[] }) => {
+  return (
+    <Box className="flex flex-col gap-1">
+      {messages.map((message, i) => {
+        return (
+          <Box key={i}>
+            <span>{message.is_assistant ? "Assistant: " : "User: "}</span>
+            <span>{message.text}</span>
+          </Box>
+        );
+      })}
+    </Box>
+  );
+};
diff --git a/website/src/pages/evaluate/rank_assistant_replies.tsx b/website/src/pages/evaluate/rank_assistant_replies.tsx
@@ -1,7 +1,9 @@
 import { useColorMode } from "@chakra-ui/react";
 import Head from "next/head";
 import { 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 { TaskControls } from "src/components/Survey/TaskControls";
@@ -64,6 +66,7 @@ const RankAssistantReplies = () => {
   }
 
   const replies = tasks[0].task.replies as string[];
+  const messages = tasks[0].task.conversation.messages as Message[];
 
   return (
     <>
@@ -77,6 +80,7 @@ const RankAssistantReplies = () => {
           <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>
 

diff --git a/website/src/pages/evaluate/rank_user_replies.tsx b/website/src/pages/evaluate/rank_user_replies.tsx
@@ -9,6 +9,8 @@ import fetcher from "src/lib/fetcher";
 import poster from "src/lib/poster";
 import useSWRImmutable from "swr/immutable";
 import useSWRMutation from "swr/mutation";
+import { Message } from "src/components/Messages";
+import { ContextMessages } from "src/components/ContextMessages";
 
 const RankUserReplies = () => {
   const [tasks, setTasks] = useState([]);
@@ -63,6 +65,7 @@ const RankUserReplies = () => {
     );
   }
   const replies = tasks[0].task.replies as string[];
+  const messages = tasks[0].task.conversation.messages as Message[];
 
   return (
     <>
@@ -76,6 +79,7 @@ const RankUserReplies = () => {
           <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>