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

<script setup lang="ts">
import { ref, reactive, computed, onMounted } 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, preloadLocalModel, preloadTrainedModel } 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
  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 || '',
    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_id: 0,
})

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

/** 当前选中的模型对象 */
const selectedModel = computed(() => modelMap.value[form.model_key])

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 {
      // Step 1: 将模型加载到算力节点
      const preloadPayload = {
        model_name_or_path: m.model_path,
        model_name: m.name,
        template: 'qwen',
      }
      let preloadResult: any
      if (m.source === 'trained') {
        preloadResult = await preloadTrainedModel(preloadPayload)
      } else {
        preloadResult = await preloadLocalModel(preloadPayload)
      }

      if (preloadResult && (preloadResult as any).error) {
        ElMessage.warning(`模型加载失败：${(preloadResult as any).error}`)
        submitting.value = false
        startupStatus.value = ''
        return
      }

      // Step 2: 创建推理任务记录
      const taskResult = await createCompare({
        name: form.name || m.name,
        description: form.description,
        models: [
          {
            model_id: String(m.id),
            model_name: m.name,
            model_path: m.model_path,
            source: m.source,
            gpu_id: form.gpu_id,
          },
        ],
      })
      const taskId = taskResult?.id || 'unknown'

      ElMessage.success('模型已启动')
      router.push({
        path: `/model-inference/chat/${taskId}`,
        query: {
          model: m.name,
          source: m.source,
          model_path: m.model_path,
        },
      })
    } catch (e: any) {
      // 真实 API 失败时回退到 mock 模式（方便无算力节点的开发调试）
      const m = selectedModel.value!
      const reason = e?.message || e?.toString() || '未知错误'
      ElMessage.warning(`推理服务启动失败：${reason}，进入 mock 演示模式`)
      router.push({
        path: '/model-inference/chat/mock',
        query: { model: m.name },
      })
    } 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) form.gpu_id = idleGpus.value[0].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_id" style="width: 400px">
          <el-option
            v-for="g in idleGpus"
            :key="g.id ?? 0"
            :label="`${g.name} (GPU${g.id ?? 0}) [空闲]`"
            :value="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>