Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Btns #168

Open
wants to merge 3 commits into
base: develop
Choose a base branch
from
Open

Btns #168

Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
673 changes: 360 additions & 313 deletions src/app/new-project/newproject.js

Large diffs are not rendered by default.

6 changes: 6 additions & 0 deletions src/app/ui/pages/chat/AnnotatePage.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -690,6 +690,9 @@ const AnnotatePage = () => {
case "InstructionDrivenChat":
componentToRender = (
<InstructionDrivenChatPage
key={`annotations-${annotations?.length}-${
annotations?.[0]?.id || "default"
}`}
handleClick={handleAnnotationClick}
chatHistory={chatHistory}
setChatHistory={setChatHistory}
Expand All @@ -707,6 +710,9 @@ const AnnotatePage = () => {
case "ModelInteractionEvaluation":
componentToRender = (
<ModelInteractionEvaluation
key={`annotations-${annotations?.length}-${
annotations?.[0]?.id || "default"
}`}
setCurrentInteraction={setCurrentInteraction}
currentInteraction={currentInteraction}
interactions={interactions}
Expand Down
253 changes: 119 additions & 134 deletions src/app/ui/pages/chat/InstructionDrivenChatPage.js
Original file line number Diff line number Diff line change
Expand Up @@ -65,7 +65,8 @@ const InstructionDrivenChatPage = ({
stage,
notes,
info,
disableUpdateButton
disableUpdateButton,
annotation,
}) => {
/* eslint-disable react-hooks/exhaustive-deps */
const tooltipStyle = useStyles();
Expand All @@ -74,7 +75,7 @@ const InstructionDrivenChatPage = ({
const { taskId } = useParams();
const [annotationId, setAnnotationId] = useState();
const bottomRef = useRef(null);
const [hasMounted,setHasMounted] = useState(false);
const [hasMounted, setHasMounted] = useState(false);
const [showChatContainer, setShowChatContainer] = useState(false);
const [open, setOpen] = useState(false);
const [loading, setLoading] = useState(false);
Expand All @@ -89,12 +90,10 @@ const InstructionDrivenChatPage = ({
const handleOpen = () => {
setOpen(true);
};
console.log(disableUpdateButton);
console.log(disableUpdateButton);
const handleClose = () => {
setOpen(false);
};



const renderSnackBar = () => {
return (
Expand Down Expand Up @@ -126,123 +125,107 @@ console.log(disableUpdateButton);
});
}
};

useEffect(() => {
const fetchData = async () => {
const taskAnnotationsObj = new GetTaskAnnotationsAPI(taskId);
const response = await fetch(taskAnnotationsObj.apiEndPoint(), {
method: "GET",
headers: taskAnnotationsObj.getHeaders().headers,
let modifiedChatHistory = [];
if (
annotation &&
Array.isArray(annotation[0]?.result) &&
[...annotation[0]?.result]?.length
) {
modifiedChatHistory = annotation[0]?.result?.map((interaction) => {
return {
...interaction,
output: formatResponse(interaction.output),
};
});
const data = await response.json();
let modifiedChatHistory = [];
if (data && Array.isArray(data[0]?.result) && [...data[0]?.result]?.length) {
if (stage === "Review") {
let reviewData = data.find((item) => item.annotation_type === 2);
if (reviewData.annotation_status === "unreviewed") {
reviewData = data.find((item) => item.annotation_type === 1);
}
modifiedChatHistory = reviewData?.result?.map((interaction) => {
return {
...interaction,
output: formatResponse(interaction.output),
};
});
}else if(stage=="SuperChecker"){
let obj = data.filter((data)=>data.annotation_type==3)
modifiedChatHistory = obj[0]?.result?.map((interaction) => {
return {
...interaction,
output: formatResponse(interaction.output),
};
});
}else if(stage=="Annotation"){
let obj = data.filter((data)=>data.annotation_type==1)
modifiedChatHistory = obj[0]?.result?.map((interaction) => {
return {
...interaction,
output: formatResponse(interaction.output),
};
});
}
else{
let obj = data?.filter((data)=>data.annotation_type==1)
modifiedChatHistory = obj[0]?.result?.map((interaction) => {
return {
...interaction,
output: formatResponse(interaction.output),
};
});
}
setChatHistory([...modifiedChatHistory]);
} else {
setChatHistory([]);
}
setAnnotationId(data[0]?.id);
if (data[0]?.result) setShowChatContainer(true);
};
fetchData();
}, [taskId]);
setChatHistory([...modifiedChatHistory]);
} else {
setChatHistory([]);
}
setAnnotationId(annotation[0]?.id);
if (annotation[0]?.result) setShowChatContainer(true);
}, []);

const cleanMetaInfo = (value) => value.replace(/\(for example:.*?\)/gi, '').trim();
const cleanMetaInfo = (value) =>
value.replace(/\(for example:.*?\)/gi, "").trim();

const escapeRegExp = (string) => {
return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
return string.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
};

const formatTextWithTooltips = (text, info) => {
// Ensure text is a string
text = String(text);

// Clean the meta info values
const metaInfoIntent = cleanMetaInfo(String(info.meta_info_intent));
const metaInfoLanguage = cleanMetaInfo(String(info.meta_info_language));
const metaInfoDomain = cleanMetaInfo(String(info.meta_info_domain));

let formattedText = text;

const placeholders = [
{ key: 'meta_info_intent', value: metaInfoIntent, tooltip: 'Intent of the instruction' },
{ key: 'meta_info_language', value: metaInfoLanguage, tooltip: 'Language used' },
{ key: 'meta_info_domain', value: metaInfoDomain, tooltip: 'Domain of the content' }
{
key: "meta_info_intent",
value: metaInfoIntent,
tooltip: "Intent of the instruction",
},
{
key: "meta_info_language",
value: metaInfoLanguage,
tooltip: "Language used",
},
{
key: "meta_info_domain",
value: metaInfoDomain,
tooltip: "Domain of the content",
},
];

placeholders.forEach(({ value, tooltip }) => {
if (value !== 'None') {
if (value !== "None") {
const escapedValue = escapeRegExp(value);
const regex = new RegExp(`(${escapedValue})`, 'gi');
const regex = new RegExp(`(${escapedValue})`, "gi");
text = text.replace(regex, (match) => {
return `<Tooltip title="${tooltip}"><strong>${match}</strong></Tooltip>`;
});

}
});

return text;
};
const formattedText = formatTextWithTooltips(info.instruction_data, info);
const handleButtonClick = async () => {
const formattedText = formatTextWithTooltips(info.instruction_data, info);

const handleButtonClick = async () => {
if (inputValue) {
setLoading(true);
const body = {
result: inputValue,
lead_time: (new Date() - loadtime) / 1000 + Number(id?.lead_time?.lead_time ?? 0),
lead_time:
(new Date() - loadtime) / 1000 +
Number(id?.lead_time?.lead_time ?? 0),
auto_save: true,
task_id: taskId,
};
console.log(id,stage);
if(stage==="Alltask"){
body.annotation_status = id?.annotation_status
}else{
body.annotation_status = localStorage.getItem("labellingMode")
console.log(id, stage);
if (stage === "Alltask") {
body.annotation_status = id?.annotation_status;
} else {
body.annotation_status = localStorage.getItem("labellingMode");
}
if (stage === "Review") {
body.review_notes = JSON.stringify(notes?.current?.getEditor().getContents());
body.review_notes = JSON.stringify(
notes?.current?.getEditor().getContents(),
);
} else if (stage === "SuperChecker") {
body.superchecker_notes = JSON.stringify(notes?.current?.getEditor().getContents());
body.superchecker_notes = JSON.stringify(
notes?.current?.getEditor().getContents(),
);
} else {
body.annotation_notes = JSON.stringify(notes?.current?.getEditor().getContents());
body.annotation_notes = JSON.stringify(
notes?.current?.getEditor().getContents(),
);
}
if (stage === "Review" || stage === "SuperChecker") {
body.parentannotation = id?.parent_annotation;
Expand Down Expand Up @@ -283,7 +266,7 @@ console.log(disableUpdateButton);
});
}
setTimeout(() => {
bottomRef.current.scrollIntoView({ behavior: 'smooth' });
bottomRef.current.scrollIntoView({ behavior: "smooth" });
}, 1000);
setShowChatContainer(true);
};
Expand Down Expand Up @@ -336,28 +319,30 @@ console.log(disableUpdateButton);
<ReactMarkdown className="flex-col">
{formatPrompt(message.prompt)}
</ReactMarkdown>
{index === chatHistory.length - 1 && stage !== "Alltask" && !disableUpdateButton &&(
<IconButton
size="large"
sx={{
position: "absolute",
bottom: 0,
right: 0,
margin: "0.5rem",
borderRadius: "50%",
}}
onClick={() => {
handleClick("delete-pair", id?.id, 0.0);
}}
>
<DeleteOutlinedIcon
style={{
color: "#EE6633",
fontSize: "1.2rem",
{index === chatHistory.length - 1 &&
stage !== "Alltask" &&
!disableUpdateButton && (
<IconButton
size="large"
sx={{
position: "absolute",
bottom: 0,
right: 0,
margin: "0.5rem",
borderRadius: "50%",
}}
/>
</IconButton>
)}
onClick={() => {
handleClick("delete-pair", id?.id, 0.0);
}}
>
<DeleteOutlinedIcon
style={{
color: "#EE6633",
fontSize: "1.2rem",
}}
/>
</IconButton>
)}
</Box>
</Box>

Expand Down Expand Up @@ -556,7 +541,6 @@ console.log(disableUpdateButton);
display: "flex",
justifyContent: "center",
alignItems: "center",

}}
>
<Typography
Expand All @@ -572,18 +556,17 @@ console.log(disableUpdateButton);
{translate("typography.instructions")}
</Typography>


<Tooltip
title={
<span style={{ fontFamily: 'Roboto, sans-serif' }}>
Hint and Metadata
</span>
}
>
<IconButton onClick={handleOpen}>
<TipsAndUpdatesIcon color="primary.dark" fontSize="large" />
</IconButton>
</Tooltip>
<Tooltip
title={
<span style={{ fontFamily: "Roboto, sans-serif" }}>
Hint and Metadata
</span>
}
>
<IconButton onClick={handleOpen}>
<TipsAndUpdatesIcon color="primary.dark" fontSize="large" />
</IconButton>
</Tooltip>
</Box>

<Typography
Expand All @@ -600,7 +583,7 @@ console.log(disableUpdateButton);
justifyContent: "center",
}}
>
{info.instruction_data}
{info.instruction_data}
</Typography>
</Box>
</Grid>
Expand Down Expand Up @@ -631,17 +614,19 @@ console.log(disableUpdateButton);
</Box>
<div ref={bottomRef} />
</Grid>
{stage!=="Alltask" && !disableUpdateButton ?<Grid item xs={12} sx={{ boxSizing: "border-box" }}>
<Textarea
handleButtonClick={handleButtonClick}
handleOnchange={handleOnchange}
size={12}
grid_size={"80.6rem"}
class_name={""}
loading={loading}
inputValue={inputValue}
/>
</Grid>:null}
{stage !== "Alltask" && !disableUpdateButton ? (
<Grid item xs={12} sx={{ boxSizing: "border-box" }}>
<Textarea
handleButtonClick={handleButtonClick}
handleOnchange={handleOnchange}
size={12}
grid_size={"80.6rem"}
class_name={""}
loading={loading}
inputValue={inputValue}
/>
</Grid>
) : null}
</Grid>

<Modal
Expand Down Expand Up @@ -682,4 +667,4 @@ console.log(disableUpdateButton);
);
};

export default InstructionDrivenChatPage;
export default InstructionDrivenChatPage;
Loading
Loading