Function ModelEditor

core/http/react-ui/src/pages/ModelEditor.jsx:83–693

()

}

export default function ModelEditor() {
  const { t } = useTranslation('modelEditor')
  const { name } = useParams()
  const [searchParams] = useSearchParams()
  const navigate = useNavigate()
  const location = useLocation()
  // Where the Back button returns to. Set by whichever page linked here (see
  // utils/editorNav); falls back to the historical defaults for direct visits.
  const backState = location.state && location.state.from ? location.state : null
  const { addToast } = useOutletContext()
  const { sections, fields, loading: metaLoading, error: metaError } = useConfigMetadata()

  // Registered schema leaf paths. flattenConfig stops recursing at these so
  // map-typed fields (e.g. pii_detection.entity_actions) bind as a whole
  // object to their registered editor instead of vanishing into sub-paths.
  const leafPaths = useMemo(() => new Set(fields.map(f => f.path)), [fields])

  // The parsed (not-yet-flattened) config loaded from the server. Flattening
  // is deferred to a separate effect keyed on leafPaths so the schema metadata
  // can arrive after the config without a fetch race re-clobbering values.
  const [loadedConfig, setLoadedConfig] = useState(null)

  const isCreateMode = !name
  const [selectedTemplate, setSelectedTemplate] = useState(null)

  const [tab, setTab] = useState('interactive') // 'interactive' | 'yaml'
  const [yamlText, setYamlText] = useState('')
  const [savedYamlText, setSavedYamlText] = useState('')
  const [values, setValues] = useState({})
  const [initialValues, setInitialValues] = useState({})
  const [activeFieldPaths, setActiveFieldPaths] = useState(new Set())
  const [collapsedSections, setCollapsedSections] = useState(new Set())
  const [configLoading, setConfigLoading] = useState(!isCreateMode)
  const [saving, setSaving] = useState(false)
  const [activeSection, setActiveSection] = useState(null)
  const [tabSwitchWarning, setTabSwitchWarning] = useState(false)

  const sectionRefs = useRef({})

  const vramEstimate = useVramEstimate({
    model: name,
    contextSize: values['context_size'],
    gpuLayers: values['gpu_layers'],
  })

  const handleSelectTemplate = useCallback((template) => {
    setSelectedTemplate(template)
    const flat = { ...template.fields }
    setValues(flat)
    setInitialValues({})
    setActiveFieldPaths(new Set(Object.keys(flat)))
  }, [])

  // Auto-select template from URL query param (e.g. ?template=pipeline)
  useEffect(() => {
    if (!isCreateMode) return
    const templateId = searchParams.get('template')
    if (templateId) {