init

Bin

2025-12-16 9e0b2ba2c317b1a86212f24cbae3195ad1f3dbfa

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
import { useCallback, useContext, useEffect, useState } from "react";
import { useAPI } from "../../../providers/ApiProvider";
import { Select } from "../../../components/Form";
import { ProjectContext } from "../../../providers/ProjectProvider";
 
export const ModelVersionSelector = ({
  name = "model_version",
  valueName = "model_version",
  apiName = "projectModelVersions",
  ...props
}) => {
  const api = useAPI();
  const { project } = useContext(ProjectContext);
  const [loading, setLoading] = useState(true);
  const [versions, setVersions] = useState([]);
  const [models, setModels] = useState([]);
  const [version, setVersion] = useState(null);
  const [placeholder, setPlaceholder] = useState("");
 
  useEffect(() => {
    setVersion(project?.[valueName] || null);
  }, [project?.[valueName], versions]);
 
  const fetchMLVersions = useCallback(async () => {
    const pk = project?.id;
 
    if (!pk) return;
 
    const modelVersions = await api.callApi(apiName, {
      params: {
        pk,
        extended: true,
        include_live_models: true,
      },
    });
 
    if (modelVersions?.live?.length > 0) {
      const liveModels = modelVersions.live.map((item) => {
        const label = `${item.title} (${item.readable_state})`;
 
        return {
          group: "Models",
          value: item.title,
          label,
        };
      });
 
      setModels(liveModels);
    }
 
    if (modelVersions?.static?.length > 0) {
      const staticModels = modelVersions.static.map((item) => {
        const label = `${item.model_version} (${item.count} predictions)`;
 
        return {
          group: "Predictions",
          value: item.model_version,
          label,
        };
      });
 
      setVersions(staticModels);
    }
 
    if (!modelVersions?.static?.length && !modelVersions?.live?.length) {
      setPlaceholder("没有可用的模型或预测");
    }
 
    setLoading(false);
  }, [project?.id, apiName]);
 
  useEffect(() => {
    fetchMLVersions();
  }, [fetchMLVersions]);
 
  return (
    <div>
      <label>Select which predictions or which model you want to use:</label>
      <div style={{ display: "flex", alignItems: "center", width: 400 }}>
        <div style={{ flex: 1, paddingRight: 16 }}>
          <Select
            name={name}
            disabled={!versions.length && !models.length}
            value={version}
            onChange={setVersion}
            options={[...models, ...versions]}
            placeholder={placeholder || "请选择模型或预测"}
            isInProgress={loading}
            {...props}
          />
        </div>
      </div>
    </div>
  );
};