import { useCallback, useContext, useEffect, useState } from "react";
|
import { Divider } from "../../../components/Divider/Divider";
|
import { EmptyState, SimpleCard } from "@humansignal/ui";
|
import { IconPredictions, Typography, IconExternal } from "@humansignal/ui";
|
import { useUpdatePageTitle, createTitleFromSegments } from "@humansignal/core";
|
import { useAPI } from "../../../providers/ApiProvider";
|
import { ProjectContext } from "../../../providers/ProjectProvider";
|
import { Spinner } from "../../../components/Spinner/Spinner";
|
import { PredictionsList } from "./PredictionsList";
|
|
export const PredictionsSettings = () => {
|
const api = useAPI();
|
const { project } = useContext(ProjectContext);
|
const [versions, setVersions] = useState([]);
|
const [loading, setLoading] = useState(false);
|
const [loaded, setLoaded] = useState(false);
|
|
useUpdatePageTitle(createTitleFromSegments([project?.title, "预测设置"]));
|
|
const fetchVersions = useCallback(async () => {
|
setLoading(true);
|
const versions = await api.callApi("projectModelVersions", {
|
params: {
|
pk: project.id,
|
extended: true,
|
},
|
});
|
|
if (versions) setVersions(versions.static);
|
setLoading(false);
|
setLoaded(true);
|
}, [project, setVersions]);
|
|
useEffect(() => {
|
if (project.id) {
|
fetchVersions();
|
}
|
}, [project]);
|
|
return (
|
<section className="max-w-[42rem]">
|
<Typography variant="headline" size="medium" className="mb-tight">
|
预测
|
</Typography>
|
<div>
|
{loading && <Spinner size={32} />}
|
|
{loaded && versions.length > 0 && (
|
<>
|
<Typography variant="title" size="medium">
|
预测列表
|
</Typography>
|
<Typography size="small" className="text-neutral-content-subtler mt-base mb-wider">
|
项目中可用的预测列表。每张卡片关联一个单独的模型版本。了解如何导入预测，{" "}
|
<a href="https://labelstud.io/guide/predictions.html" target="_blank" rel="noreferrer">
|
请参阅文档
|
</a>
|
.
|
</Typography>
|
</>
|
)}
|
|
{loaded && versions.length === 0 && (
|
<SimpleCard title="" className="bg-primary-background border-primary-border-subtler p-base">
|
<EmptyState
|
size="medium"
|
variant="primary"
|
icon={<IconPredictions />}
|
title="尚未上传预测"
|
description="上传预测以自动预标注数据并加速标注。从多个模型版本导入预测以比较其性能，或从模型页面连接实时模型以按需生成预测。"
|
footer={
|
!window.APP_SETTINGS?.whitelabel_is_active && (
|
<Typography variant="label" size="small" className="text-primary-link">
|
<a
|
href="https://labelstud.io/guide/predictions"
|
target="_blank"
|
rel="noopener noreferrer"
|
data-testid="predictions-help-link"
|
aria-label="了解更多关于预测的信息（在新窗口打开）"
|
className="inline-flex items-center gap-1 hover:underline"
|
>
|
了解更多
|
<IconExternal width={16} height={16} />
|
</a>
|
</Typography>
|
)
|
}
|
/>
|
</SimpleCard>
|
)}
|
|
<PredictionsList project={project} versions={versions} fetchVersions={fetchVersions} />
|
|
<Divider height={32} />
|
</div>
|
</section>
|
);
|
};
|
|
PredictionsSettings.title = "预测";
|
PredictionsSettings.path = "/predictions";
|
