Cache dataset loading and clarify uploads

2026-07-01 17:13:02 +08:00
parent be397e0557
commit 3690e64b18
2 changed files with 256 additions and 45 deletions
--- a/frontend/src/main.tsx
+++ b/frontend/src/main.tsx
@@ -95,6 +95,11 @@ type UploadedDataset = {
  files?: Record<string, DatasetFileItem[]>;
 };

+type DatasetUploadResponse = {
+  dataset: UploadedDataset;
+  saved: Array<{ name: string; relative_path: string; size: number; from_archive?: boolean }>;
+};
+
 type DatasetValidation = {
  dataset: string;
  counts: { images: number; labels: number; masks: number; annotations: number };
@@ -212,6 +217,14 @@ type DeepAcceptancePayload = {
  checks?: Array<{ name: string; passed: boolean }>;
 };

+type DataLoadingState = {
+  refreshing: boolean;
+  phase: string;
+  progress: number;
+  cached: boolean;
+  updatedAt?: number | null;
+};
+
 type GpuPayload = {
  available: boolean;
  gpus: Array<{
@@ -504,7 +517,35 @@ function fileName(path?: string | null) {
  return path.split("/").filter(Boolean).pop() ?? path;
 }

+const DATA_CACHE_KEY = "seg_data_server_net.datasets.v1";
+
+type DatasetCachePayload = {
+  datasets: UploadedDataset[];
+  datasetValidations: Record<string, DatasetValidation>;
+  savedAt: number;
+};
+
+function readDatasetCache(): DatasetCachePayload | null {
+  if (typeof window === "undefined") return null;
+  try {
+    const raw = window.localStorage.getItem(DATA_CACHE_KEY);
+    return raw ? JSON.parse(raw) as DatasetCachePayload : null;
+  } catch {
+    return null;
+  }
+}
+
+function writeDatasetCache(payload: DatasetCachePayload) {
+  if (typeof window === "undefined") return;
+  try {
+    window.localStorage.setItem(DATA_CACHE_KEY, JSON.stringify(payload));
+  } catch {
+    // Cache is only a UI convenience; storage failures should never block work.
+  }
+}
+
 function useData() {
+  const cachedDatasetState = useMemo(() => readDatasetCache(), []);
  const [catalog, setCatalog] = useState<Catalog | null>(null);
  const [gpus, setGpus] = useState<GpuPayload | null>(null);
  const [condaEnvs, setCondaEnvs] = useState<CondaEnvPayload | null>(null);
@@ -512,8 +553,8 @@ function useData() {
  const [results, setResults] = useState<ResultItem[]>([]);
  const [curves, setCurves] = useState<TrainingCurve[]>([]);
  const [weightManifest, setWeightManifest] = useState<WeightManifest | null>(null);
-  const [datasets, setDatasets] = useState<UploadedDataset[]>([]);
-  const [datasetValidations, setDatasetValidations] = useState<Record<string, DatasetValidation>>({});
+  const [datasets, setDatasets] = useState<UploadedDataset[]>(cachedDatasetState?.datasets ?? []);
+  const [datasetValidations, setDatasetValidations] = useState<Record<string, DatasetValidation>>(cachedDatasetState?.datasetValidations ?? {});
  const [coverage, setCoverage] = useState<CoveragePayload | null>(null);
  const [acceptance, setAcceptance] = useState<AcceptancePayload | null>(null);
  const [realAcceptance, setRealAcceptance] = useState<AcceptancePayload | null>(null);
@@ -524,10 +565,46 @@ function useData() {
  const [agentEvaluation, setAgentEvaluation] = useState<EvaluationAgentPayload | null>(null);
  const [userAgent, setUserAgent] = useState<UserAgentPayload | null>(null);
  const [error, setError] = useState<string>("");
+  const [dataLoading, setDataLoading] = useState<DataLoadingState>({
+    refreshing: false,
+    phase: cachedDatasetState ? "使用本地缓存" : "等待加载",
+    progress: cachedDatasetState ? 100 : 0,
+    cached: Boolean(cachedDatasetState),
+    updatedAt: cachedDatasetState?.savedAt ?? null
+  });
+  const refreshSeqRef = useRef(0);

  async function refresh() {
+    const seq = refreshSeqRef.current + 1;
+    refreshSeqRef.current = seq;
+    const updateLoading = (patch: Partial<DataLoadingState>) => {
+      if (refreshSeqRef.current !== seq) return;
+      setDataLoading((current) => ({ ...current, ...patch }));
+    };
    try {
-      const [catalogNext, gpusNext, envsNext, readinessNext, capabilitiesNext, jobsNext, resultsNext, curvesNext, weightsNext, datasetsNext, coverageNext, acceptanceNext, realAcceptanceNext, realTrainAcceptanceNext, deepAcceptanceNext, agentEvaluationNext, userAgentNext] = await Promise.all([
+      updateLoading({ refreshing: true, phase: "读取数据集", progress: 8, cached: datasets.length > 0 });
+      const datasetsNext = await api<UploadedDataset[]>("/api/datasets");
+      if (refreshSeqRef.current !== seq) return;
+      setDatasets(datasetsNext);
+      writeDatasetCache({ datasets: datasetsNext, datasetValidations, savedAt: Date.now() });
+
+      updateLoading({ phase: "校验图片和 masks", progress: 32 });
+      const validationResults = await Promise.allSettled(
+        datasetsNext.map(async (dataset) => {
+          const validation = await api<DatasetValidation>(`/api/datasets/${encodeURIComponent(dataset.name)}/validate`);
+          return [dataset.name, validation] as const;
+        })
+      );
+      if (refreshSeqRef.current !== seq) return;
+      const validationEntries = validationResults
+        .filter((item): item is PromiseFulfilledResult<readonly [string, DatasetValidation]> => item.status === "fulfilled")
+        .map((item) => item.value);
+      const validationsNext = Object.fromEntries(validationEntries);
+      setDatasetValidations(validationsNext);
+      writeDatasetCache({ datasets: datasetsNext, datasetValidations: validationsNext, savedAt: Date.now() });
+
+      updateLoading({ phase: "同步任务、结果和系统状态", progress: 58 });
+      const [catalogNext, gpusNext, envsNext, readinessNext, capabilitiesNext, jobsNext, resultsNext, curvesNext, weightsNext, coverageNext, acceptanceNext, realAcceptanceNext, realTrainAcceptanceNext, deepAcceptanceNext, agentEvaluationNext, userAgentNext] = await Promise.allSettled([
        api<Catalog>("/api/catalog"),
        api<GpuPayload>("/api/system/gpus"),
        api<CondaEnvPayload>("/api/system/envs"),
@@ -537,7 +614,6 @@ function useData() {
        api<ResultItem[]>("/api/results?limit=1000"),
        api<TrainingCurve[]>("/api/results/curves?limit=100"),
        api<WeightManifest>("/api/weights"),
-        api<UploadedDataset[]>("/api/datasets"),
        api<CoveragePayload>("/api/coverage"),
        api<AcceptancePayload>("/api/acceptance/latest"),
        api<AcceptancePayload>("/api/acceptance/real/latest"),
@@ -545,39 +621,35 @@ function useData() {
        api<DeepAcceptancePayload>("/api/acceptance/deep/latest"),
        api<EvaluationAgentPayload>("/api/agents/evaluate"),
        api<UserAgentPayload>("/api/agents/user/latest")
-      ]);
-      setCatalog(catalogNext);
-      setGpus(gpusNext);
-      setCondaEnvs(envsNext);
-      setRuntimeReadiness(readinessNext);
-      setCapabilities(capabilitiesNext);
-      setJobs(jobsNext);
-      setResults(resultsNext);
-      setCurves(curvesNext);
-      setWeightManifest(weightsNext);
-      setDatasets(datasetsNext);
-      const validationEntries: Array<[string, DatasetValidation]> = [];
-      await Promise.all(
-        datasetsNext.map(async (dataset) => {
-          try {
-            const validation = await api<DatasetValidation>(`/api/datasets/${encodeURIComponent(dataset.name)}/validate`);
-            validationEntries.push([dataset.name, validation]);
-          } catch {
-            // Dataset validation is advisory; upload and job controls should remain usable.
-          }
-        })
-      );
-      setDatasetValidations(Object.fromEntries(validationEntries));
-      setCoverage(coverageNext);
-      setAcceptance(acceptanceNext);
-      setRealAcceptance(realAcceptanceNext);
-      setRealTrainAcceptance(realTrainAcceptanceNext);
-      setDeepAcceptance(deepAcceptanceNext);
-      setAgentEvaluation(agentEvaluationNext);
-      setUserAgent(userAgentNext);
-      setError("");
+      ] as const);
+      if (refreshSeqRef.current !== seq) return;
+      const secondaryErrors: string[] = [];
+      if (catalogNext.status === "fulfilled") setCatalog(catalogNext.value); else secondaryErrors.push(String(catalogNext.reason));
+      if (gpusNext.status === "fulfilled") setGpus(gpusNext.value); else secondaryErrors.push(String(gpusNext.reason));
+      if (envsNext.status === "fulfilled") setCondaEnvs(envsNext.value); else secondaryErrors.push(String(envsNext.reason));
+      if (readinessNext.status === "fulfilled") setRuntimeReadiness(readinessNext.value); else secondaryErrors.push(String(readinessNext.reason));
+      if (capabilitiesNext.status === "fulfilled") setCapabilities(capabilitiesNext.value); else secondaryErrors.push(String(capabilitiesNext.reason));
+      if (jobsNext.status === "fulfilled") setJobs(jobsNext.value); else secondaryErrors.push(String(jobsNext.reason));
+      if (resultsNext.status === "fulfilled") setResults(resultsNext.value); else secondaryErrors.push(String(resultsNext.reason));
+      if (curvesNext.status === "fulfilled") setCurves(curvesNext.value); else secondaryErrors.push(String(curvesNext.reason));
+      if (weightsNext.status === "fulfilled") setWeightManifest(weightsNext.value); else secondaryErrors.push(String(weightsNext.reason));
+      if (coverageNext.status === "fulfilled") setCoverage(coverageNext.value); else secondaryErrors.push(String(coverageNext.reason));
+      if (acceptanceNext.status === "fulfilled") setAcceptance(acceptanceNext.value); else secondaryErrors.push(String(acceptanceNext.reason));
+      if (realAcceptanceNext.status === "fulfilled") setRealAcceptance(realAcceptanceNext.value); else secondaryErrors.push(String(realAcceptanceNext.reason));
+      if (realTrainAcceptanceNext.status === "fulfilled") setRealTrainAcceptance(realTrainAcceptanceNext.value); else secondaryErrors.push(String(realTrainAcceptanceNext.reason));
+      if (deepAcceptanceNext.status === "fulfilled") setDeepAcceptance(deepAcceptanceNext.value); else secondaryErrors.push(String(deepAcceptanceNext.reason));
+      if (agentEvaluationNext.status === "fulfilled") setAgentEvaluation(agentEvaluationNext.value); else secondaryErrors.push(String(agentEvaluationNext.reason));
+      if (userAgentNext.status === "fulfilled") setUserAgent(userAgentNext.value); else secondaryErrors.push(String(userAgentNext.reason));
+      setError(secondaryErrors.length ? `部分系统信息同步失败，数据集仍可用：${secondaryErrors[0]}` : "");
+      updateLoading({ refreshing: false, phase: "加载完成", progress: 100, cached: false, updatedAt: Date.now() });
    } catch (err) {
      setError(String(err));
+      updateLoading({
+        refreshing: false,
+        phase: datasets.length ? "同步失败，继续显示缓存" : "同步失败",
+        progress: datasets.length ? 100 : 0,
+        cached: datasets.length > 0
+      });
    }
  }

@@ -587,7 +659,7 @@ function useData() {
    return () => window.clearInterval(timer);
  }, []);

-  return { catalog, gpus, condaEnvs, runtimeReadiness, capabilities, agentEvaluation, userAgent, jobs, results, curves, weightManifest, datasets, datasetValidations, coverage, acceptance, realAcceptance, realTrainAcceptance, deepAcceptance, error, refresh };
+  return { catalog, gpus, condaEnvs, runtimeReadiness, capabilities, agentEvaluation, userAgent, jobs, results, curves, weightManifest, datasets, datasetValidations, coverage, acceptance, realAcceptance, realTrainAcceptance, deepAcceptance, error, dataLoading, refresh };
 }

 function StatusPill({ status }: { status: string }) {
@@ -609,8 +681,27 @@ function JobProgressBar({ progress }: { progress?: JobProgress }) {
  );
 }

+function DataSyncStrip({ loading }: { loading: DataLoadingState }) {
+  if (!loading.refreshing && !loading.cached) return null;
+  const percent = Math.max(0, Math.min(100, loading.progress));
+  return (
+    <div className={`syncStrip ${loading.refreshing ? "loading" : ""}`} data-page-section="datasets">
+      <div className="syncMark">
+        <RefreshCcw size={15} />
+      </div>
+      <div className="syncText">
+        <strong>{loading.phase}</strong>
+        <span>{loading.cached ? "正在显示本地缓存，同步完成后会自动更新。" : "数据集列表、缩略图和配对状态会分阶段刷新。"}</span>
+      </div>
+      <div className="syncProgress" aria-label="数据同步进度">
+        <span style={{ width: `${percent}%` }} />
+      </div>
+    </div>
+  );
+}
+
 function App() {
-  const { catalog, gpus, condaEnvs, runtimeReadiness, capabilities, agentEvaluation, userAgent, jobs, results, curves, weightManifest, datasets, datasetValidations, coverage, acceptance, realAcceptance, realTrainAcceptance, deepAcceptance, error, refresh } = useData();
+  const { catalog, gpus, condaEnvs, runtimeReadiness, capabilities, agentEvaluation, userAgent, jobs, results, curves, weightManifest, datasets, datasetValidations, coverage, acceptance, realAcceptance, realTrainAcceptance, deepAcceptance, error, dataLoading, refresh } = useData();
  const [page, setPage] = useState<PageId>(pageFromHash);
  const [taskType, setTaskType] = useState("mock.echo");
  const [params, setParams] = useState(JSON.stringify(defaultParams["mock.echo"], null, 2));
@@ -965,11 +1056,12 @@ function App() {
    setBusy(true);
    try {
      setActionError("");
-      await api("/api/datasets", {
+      const created = await api<UploadedDataset>("/api/datasets", {
        method: "POST",
        body: JSON.stringify({ name: datasetName, description: datasetDescription })
      });
-      setSelectedDatasetName(datasetName);
+      setDatasetName(created.name);
+      setSelectedDatasetName(created.name);
      setUploadModalOpen(false);
      await refresh();
    } catch (err) {
@@ -997,7 +1089,9 @@ function App() {
        throw new Error(`上传失败，无法连接后端 ${API_BASE}：${err instanceof Error ? err.message : String(err)}`);
      }
      if (!res.ok) throw new Error(await res.text());
-      setSelectedDatasetName(datasetName);
+      const uploadResult = await res.json() as DatasetUploadResponse;
+      setDatasetName(uploadResult.dataset.name);
+      setSelectedDatasetName(uploadResult.dataset.name);
      setUploadModalOpen(false);
      setUploadFilesByKind((current) => ({ ...current, [uploadKind]: null }));
      await refresh();
@@ -1265,6 +1359,7 @@ function App() {
        </header>

        {(error || actionError) && <div className="alert">{actionError || error}</div>}
+        <DataSyncStrip loading={dataLoading} />

        <section className="metrics" data-page-section="overview">
          <div className="metric">
@@ -1447,12 +1542,12 @@ function App() {
                      {dataset.name} · {dataset.counts.images}/{dataset.counts.masks}
                    </option>
                  )) : (
-                    <option value="">暂无数据集</option>
+                    <option value="">{dataLoading.refreshing ? "正在加载数据集..." : "暂无数据集"}</option>
                  )}
                </select>
              </label>
              <div className="datasetMiniList">
-                {datasets.map((dataset) => (
+                {datasets.length ? datasets.map((dataset) => (
                  <div
                    key={dataset.name}
                    className={`datasetMiniItem ${selectedDataset?.name === dataset.name ? "selected" : ""}`}
@@ -1473,7 +1568,12 @@ function App() {
                      </button>
                    </div>
                  </div>
-                ))}
+                )) : (
+                  <div className="datasetListEmpty">
+                    <RefreshCcw size={17} />
+                    <span>{dataLoading.refreshing ? dataLoading.phase : "暂无数据集"}</span>
+                  </div>
+                )}
              </div>
            </div>
          </div>
@@ -1503,6 +1603,12 @@ function App() {
              <>
                <DatasetDetail dataset={selectedDataset} validation={selectedValidation} />
              </>
+            ) : dataLoading.refreshing ? (
+              <div className="panelLoading">
+                <RefreshCcw size={20} />
+                <strong>{dataLoading.phase}</strong>
+                <span>正在读取数据集、缩略图和 mask 配对状态。</span>
+              </div>
            ) : (
              <p className="muted">左侧创建或选择一个数据集后，这里会显示图片、masks、配对和异常项。</p>
            )}
@@ -1555,8 +1661,12 @@ function App() {
                  />
                </label>
                <div className="modalActions">
-                  <button className="primary" disabled={busy || datasetNameExists} onClick={createDataset}><Boxes size={17} />创建数据集</button>
-                  <button className="primary secondary" disabled={busy || !activeUploadFiles?.length} onClick={uploadDatasetFiles}><UploadCloud size={17} />{datasetNameExists ? "追加文件" : "上传文件"}</button>
+                  <button className="primary" disabled={busy || !activeUploadFiles?.length} onClick={uploadDatasetFiles}>
+                    <UploadCloud size={17} />{datasetNameExists ? "追加文件" : "创建并上传"}
+                  </button>
+                  <button className="primary ghost" disabled={busy || datasetNameExists} onClick={createDataset}>
+                    <Boxes size={17} />仅创建空数据集
+                  </button>
                </div>
              </div>
            </div>
--- a/frontend/src/styles.css
+++ b/frontend/src/styles.css
@@ -198,6 +198,12 @@ h2 {
  background: var(--cyan);
 }

+.primary.ghost {
+  border: 1px solid var(--line);
+  background: #101310;
+  color: var(--ink);
+}
+
 .primary.danger {
  background: var(--red);
 }
@@ -215,6 +221,74 @@ h2 {
  margin-bottom: 18px;
 }

+.syncStrip {
+  min-width: 0;
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr) minmax(180px, 260px);
+  align-items: center;
+  gap: 12px;
+  padding: 10px 12px;
+  margin-bottom: 16px;
+  border: 1px solid rgba(115, 210, 222, 0.35);
+  border-radius: 8px;
+  background: rgba(14, 22, 20, 0.94);
+}
+
+.syncMark {
+  width: 30px;
+  height: 30px;
+  display: grid;
+  place-items: center;
+  border-radius: 6px;
+  color: #0b0d0b;
+  background: var(--cyan);
+}
+
+.syncStrip.loading .syncMark svg,
+.panelLoading svg,
+.datasetListEmpty svg {
+  animation: syncSpin 1s linear infinite;
+}
+
+.syncText {
+  min-width: 0;
+  display: grid;
+  gap: 2px;
+}
+
+.syncText strong,
+.syncText span {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.syncText span {
+  color: var(--muted);
+  font-size: 12px;
+}
+
+.syncProgress {
+  height: 8px;
+  overflow: hidden;
+  border-radius: 999px;
+  border: 1px solid rgba(238, 242, 232, 0.12);
+  background: #080a08;
+}
+
+.syncProgress span {
+  display: block;
+  height: 100%;
+  border-radius: inherit;
+  background: linear-gradient(90deg, var(--green), var(--cyan));
+  transition: width 220ms ease;
+}
+
+@keyframes syncSpin {
+  to { transform: rotate(360deg); }
+}
+
 .metrics, .grid {
  display: grid;
  gap: 16px;
@@ -953,6 +1027,33 @@ textarea {
  overflow: auto;
 }

+.datasetListEmpty,
+.panelLoading {
+  min-width: 0;
+  display: grid;
+  place-items: center;
+  gap: 8px;
+  padding: 18px;
+  border: 1px dashed var(--line);
+  border-radius: 7px;
+  background: rgba(8, 10, 8, 0.42);
+  color: var(--muted);
+  text-align: center;
+}
+
+.panelLoading {
+  min-height: 260px;
+}
+
+.panelLoading strong {
+  color: var(--ink);
+}
+
+.panelLoading span,
+.datasetListEmpty span {
+  font-size: 12px;
+}
+
 .datasetMiniItem {
  min-width: 0;
  display: grid;