YG_FT/frontend/src/views/inference/InferenceCreateView.vue

<script setup lang="ts">
import { ref, reactive, computed, onMounted, watch } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage, type FormInstance, type FormRules } from 'element-plus'
import PageCard from '@/components/PageCard.vue'
import { getModelList, getTrainedModels } from '@/api/modules/model'
import { getSystemInfo } from '@/api/modules/system'
import { getComputeNodes, type ComputeNode } from '@/api/modules/compute'
import { createCompare, loadCompare } from '@/api/modules/compare'
import type { ModelItem, TrainedModel, GpuInfo } from '@/types'

const router = useRouter()
const formRef = ref<FormInstance>()
const submitting = ref(false)
const startupStatus = ref('')

const dbModels = ref<ModelItem[]>([])
const trainedModels = ref<TrainedModel[]>([])
const gpus = ref<GpuInfo[]>([])
const computeNodes = ref<ComputeNode[]>([])

/** 可选模型（下拉用，区分本地/已训练两类） */
interface SelectableModel {
  /** 下拉唯一值：db-{id} / trained-{id} */
  key: string
  id: string | number
  name: string
  source: 'database' | 'trained'
  model_path: string
  compute_node_id?: string
  compute_node_name?: string
  merged?: boolean
  merging?: boolean
  disabled?: boolean
}

/** 本地模型选项 */
const dbOptions = computed<SelectableModel[]>(() =>
  dbModels.value.map((m) => ({
    key: `db-${m.id}`,
    id: m.id,
    name: m.name,
    source: 'database',
    model_path: m.path || '',
  })),
)

/** 已训练模型选项（未合并的禁用） */
const trainedOptions = computed<SelectableModel[]>(() =>
  trainedModels.value.map((m) => ({
    key: `trained-${m.id}`,
    id: m.id,
    name: m.name,
    source: 'trained',
    model_path: m.merged_path || m.base_model_path || '',
    compute_node_id: m.compute_node_id,
    compute_node_name: m.compute_node_name,
    merged: m.merged,
    merging: m.merging,
    disabled: m.merged === false,
  })),
)

/** 仅显示在线算力节点上的空闲 GPU */
const onlineNodeIds = computed(() => new Set(
  computeNodes.value
    .filter((n) => n.enabled && n.scheduler_status === 'online')
    .map((n) => n.id),
))
const idleGpus = computed(() =>
  gpus.value.filter(
    (g) => g.status === 'idle' && (!g.node_id || onlineNodeIds.value.has(g.node_id)),
  ),
)
const modelMap = computed<Record<string, SelectableModel>>(() => {
  const map: Record<string, SelectableModel> = {}
  for (const m of [...dbOptions.value, ...trainedOptions.value]) map[m.key] = m
  return map
})

const form = reactive({
  name: '',
  description: '',
  /** 选中的模型 key（单选） */
  model_key: '',
  /** 使用的 GPU */
  gpu_key: '',
})

const rules: FormRules = {
  name: [{ required: true, message: '请输入推理名称', trigger: 'blur' }],
  model_key: [{ required: true, message: '请选择模型', trigger: 'change' }],
}

/** 当前选中的模型对象 */
const selectedModel = computed(() => modelMap.value[form.model_key])
const selectedGpu = computed(() => idleGpus.value.find((g) => `${g.node_id || ''}:${g.id ?? 0}` === form.gpu_key))

watch(selectedModel, (model) => {
  if (!model?.compute_node_id) return
  const gpu = idleGpus.value.find((item) => item.node_id === model.compute_node_id)
  if (gpu) form.gpu_key = `${gpu.node_id || ''}:${gpu.id ?? 0}`
})

async function handleSubmit() {
  if (!formRef.value) return
  await formRef.value.validate(async (valid) => {
    if (!valid) return
    const m = selectedModel.value
    if (!m) {
      ElMessage.warning('请选择模型')
      return
    }
    submitting.value = true
    startupStatus.value = '正在创建推理任务...'
    try {
      if (!m.model_path) {
        ElMessage.warning('当前模型未配置算力节点可访问路径，请先在模型管理中维护模型路径')
        return
      }

      // Step 1: 创建推理任务记录
      const taskResult = await createCompare({
        name: form.name || m.name,
        description: form.description,
        status: 'pending',
        models: [
          {
            model_id: String(m.id),
            model_name: m.name,
            model_path: m.model_path,
            source: m.source,
            gpu_id: selectedGpu.value?.id ?? 0,
            node_id: selectedGpu.value?.node_id || m.compute_node_id,
            node_name: selectedGpu.value?.node_name || m.compute_node_name,
          },
        ],
      })
      const taskId = taskResult?.id || 'unknown'

      // Step 2: 统一通过推理任务加载接口异步派发模型加载，状态会落到列表记录中。
      startupStatus.value = '正在启动模型服务，首次加载可能需要数分钟...'
      const loadResult: any = await loadCompare(taskId)
      if (loadResult?.status === 'failed' || loadResult?.error) {
        ElMessage.warning(`模型加载失败：${loadResult?.error || '请检查算力节点日志'}`)
        router.push('/model-inference')
        return
      }

      // 加载为异步派发，回到列表页可看到“启动中 → 已就绪”的状态流转
      ElMessage.success('模型加载中，就绪后即可对话')
      router.push('/model-inference')
    } catch (e: any) {
      const reason = e?.message || e?.toString() || '未知错误'
      ElMessage.warning(`推理服务启动失败：${reason}`)
    } finally {
      submitting.value = false
      startupStatus.value = ''
    }
  })
}

function handleCancel() {
  router.back()
}

async function loadData() {
  try {
    const [db, trained, sys, nodes] = await Promise.all([
      getModelList(),
      getTrainedModels(),
      getSystemInfo(),
      getComputeNodes(),
    ])
    dbModels.value = db || []
    trainedModels.value = trained?.models || []
    gpus.value = sys?.gpu || []
    computeNodes.value = nodes || []
    // 默认选中第一个空闲 GPU
    if (idleGpus.value.length > 0) {
      const firstGpu = idleGpus.value[0]
      form.gpu_key = `${firstGpu.node_id || ''}:${firstGpu.id ?? 0}`
    }
  } catch {
    // ignore
  }
}

onMounted(loadData)
</script>

<template>
  <PageCard title="新建推理">
    <el-form ref="formRef" :model="form" :rules="rules" label-width="100px">
      <el-form-item label="推理名称" prop="name">
        <el-input v-model="form.name" placeholder="请输入推理名称" maxlength="50" show-word-limit style="max-width: 400px" />
      </el-form-item>
      <el-form-item label="描述">
        <el-input v-model="form.description" type="textarea" :rows="2" maxlength="200" show-word-limit style="max-width: 400px" />
      </el-form-item>

      <el-divider content-position="left">选择模型</el-divider>
      <el-form-item label="选择模型" prop="model_key">
        <el-select
          v-model="form.model_key"
          placeholder="请选择模型"
          filterable
          style="width: 400px"
        >
          <el-option-group label="本地模型">
            <el-option
              v-for="m in dbOptions"
              :key="m.key"
              :label="m.name"
              :value="m.key"
            />
          </el-option-group>
          <el-option-group label="已训练模型">
            <el-option
              v-for="m in trainedOptions"
              :key="m.key"
              :label="m.name + (m.disabled ? '（未合并）' : '')"
              :value="m.key"
              :disabled="m.disabled"
            />
          </el-option-group>
        </el-select>
      </el-form-item>

      <el-form-item label="GPU">
        <el-select v-model="form.gpu_key" style="width: 400px">
          <el-option
            v-for="g in idleGpus"
            :key="`${g.node_id || ''}:${g.id ?? 0}`"
            :label="`${g.node_name || g.node_code || '算力节点'} / ${g.name} (GPU${g.id ?? 0}) [空闲]`"
            :value="`${g.node_id || ''}:${g.id ?? 0}`"
          />
        </el-select>
      </el-form-item>

      <el-form-item v-if="startupStatus" label="启动状态">
        <el-alert :title="startupStatus" type="info" :closable="false" show-icon />
      </el-form-item>

      <el-form-item>
        <el-button type="primary" :loading="submitting" @click="handleSubmit">开始推理</el-button>
        <el-button @click="handleCancel">取消</el-button>
      </el-form-item>
    </el-form>
  </PageCard>
</template>