import { useCallback, useContext, useEffect, useRef, useState } from "react";
|
import { Button } from "@humansignal/ui";
|
import { useUpdatePageTitle, createTitleFromSegments } from "@humansignal/core";
|
import { Form, TextArea, Toggle } from "../../components/Form";
|
import { MenubarContext } from "../../components/Menubar/Menubar";
|
import { cn } from "../../utils/bem";
|
|
import { ModelVersionSelector } from "./AnnotationSettings/ModelVersionSelector";
|
import { ProjectContext } from "../../providers/ProjectProvider";
|
import { Divider } from "../../components/Divider/Divider";
|
|
export const AnnotationSettings = () => {
|
const { project, fetchProject } = useContext(ProjectContext);
|
const pageContext = useContext(MenubarContext);
|
const formRef = useRef();
|
const [collab, setCollab] = useState(null);
|
|
useUpdatePageTitle(createTitleFromSegments([project?.title, "标注设置"]));
|
|
useEffect(() => {
|
pageContext.setProps({ formRef });
|
}, [formRef]);
|
|
const updateProject = useCallback(() => {
|
fetchProject(project.id, true);
|
}, [project]);
|
|
return (
|
<div className={cn("annotation-settings").toClassName()}>
|
<div className={cn("annotation-settings").elem("wrapper").toClassName()}>
|
<h1>标注设置</h1>
|
<div className={cn("settings-wrapper").toClassName()}>
|
<Form
|
ref={formRef}
|
action="updateProject"
|
formData={{ ...project }}
|
params={{ pk: project.id }}
|
onSubmit={updateProject}
|
>
|
<Form.Row columnCount={1}>
|
<div className={cn("settings-wrapper").elem("header").toClassName()}>标注说明</div>
|
<div class="settings-description">
|
<p style={{ marginBottom: "0" }}>编写说明以帮助用户完成标注任务。</p>
|
<p style={{ marginTop: "8px" }}>
|
说明字段支持 HTML 标记，允许使用图像、iframes (pdf)。
|
</p>
|
</div>
|
<div>
|
<Toggle label="在标注前显示" name="show_instruction" />
|
</div>
|
<TextArea name="expert_instruction" style={{ minHeight: 128, maxWidth: "520px" }} />
|
</Form.Row>
|
|
<Divider height={32} />
|
|
<Form.Row columnCount={1}>
|
<br />
|
<div className={cn("settings-wrapper").elem("header").toClassName()}>预标注</div>
|
<div>
|
<Toggle
|
label="使用预测结果预标注任务"
|
description={<span>启用并选择用于预标注的预测结果集。</span>}
|
name="show_collab_predictions"
|
onChange={(e) => {
|
setCollab(e.target.checked);
|
}}
|
/>
|
</div>
|
|
{(collab !== null ? collab : project.show_collab_predictions) && <ModelVersionSelector />}
|
</Form.Row>
|
|
<Form.Actions>
|
<Form.Indicator>
|
<span case="success">已保存！</span>
|
</Form.Indicator>
|
<Button type="submit" look="primary" className="w-[150px]" aria-label="保存标注设置">
|
保存
|
</Button>
|
</Form.Actions>
|
</Form>
|
</div>
|
</div>
|
</div>
|
);
|
};
|
|
AnnotationSettings.title = "标注";
|
AnnotationSettings.path = "/annotation";
|
