[] = [
dataIndex: ['team', 'name'],
ellipsis: true
},
+ {
+ title: '状态',
+ width: 140,
+ dataIndex: 'update_time',
+ // dataIndex: 'state',
+ ellipsis: true
+ },
{
title: 'API 数量',
dataIndex: 'apiNum',
diff --git a/frontend/packages/core/src/pages/aiSetting/AiSettingModal.tsx b/frontend/packages/core/src/pages/aiSetting/AiSettingModal.tsx
index a81a4c7d..f0df517d 100644
--- a/frontend/packages/core/src/pages/aiSetting/AiSettingModal.tsx
+++ b/frontend/packages/core/src/pages/aiSetting/AiSettingModal.tsx
@@ -4,31 +4,50 @@ import { BasicResponse, PLACEHOLDER, RESPONSE_TIPS, STATUS_CODE } from '@common/
import { useFetch } from '@common/hooks/http'
import { $t } from '@common/locales'
import { App, Form, InputNumber, Select, Switch, Tag, Tooltip } from 'antd'
-import { forwardRef, useEffect, useImperativeHandle, useState } from 'react'
-import { AiProviderLlmsItems, ModelDetailData } from './types'
+import { forwardRef, useEffect, useImperativeHandle, useRef, useState } from 'react'
+import { AiProviderLlmsItems, ModelDetailData, AiSettingListItem } from './types'
+import { MemberItem, SimpleTeamItem } from '@common/const/type'
+import { useGlobalContext } from '@common/contexts/GlobalStateContext'
export type AiSettingModalContentProps = {
entity: ModelDetailData & { defaultLlm: string }
readOnly: boolean
+ modelMode?: 'auto' | 'manual'
+ /** 如果是手动选择 AI 模型，那么需要更新 footer 底部的内容，所以需要这个方法去更新外部的 footer */
+ updateEntityData: (entity: ModelDetailData & { defaultLlm: string }) => void
}
export type AiSettingModalContentHandle = {
save: () => Promise
+ deployAIServer: () => Promise
}
const AiSettingModalContent = forwardRef((props, ref) => {
const [form] = Form.useForm()
const { message } = App.useApp()
- const { entity, readOnly } = props
+ const { entity, readOnly, modelMode = 'auto', updateEntityData } = props
const { fetchData } = useFetch()
const [llmList, setLlmList] = useState()
const [loading, setLoading] = useState(false)
- const [enableState, setEnableState] = useState(entity.status === 'enabled')
- const getLlmList = () => {
+ // AI 模型配置
+ const [localEntity, setLocalEntity] = useState(entity)
+ const [teamList, setTeamList] = useState([])
+ // AI 模型提供商列表
+ const modelProviderListRef = useRef([])
+ // 模型模式加载
+ const [modelModeLoading, setModelModeLoading] = useState(false)
+ const [enableState, setEnableState] = useState(localEntity?.status === 'enabled')
+ const { checkPermission } = useGlobalContext()
+
+ /**
+ * 获取 llm 列表
+ * @param id
+ */
+ const getLlmList = (id?: string) => {
setLoading(true)
fetchData>(`ai/provider/llms`, {
method: 'GET',
- eoParams: { provider: entity.id }
+ eoParams: { provider: id || localEntity.id }
})
.then((response) => {
const { code, data, msg } = response
@@ -43,25 +62,159 @@ const AiSettingModalContent = forwardRef {
- getLlmList()
+ /**
+ * 获取团队选项列表
+ * @returns
+ */
+ const getTeamOptionList = async (): any[] => {
+ const response = await fetchData>(
+ !checkPermission('system.workspace.team.view_all') ? 'simple/teams/mine' : 'simple/teams',
+ { method: 'GET', eoTransformKeys: [] }
+ )
+ const { code, data, msg } = response
+ if (code === STATUS_CODE.SUCCESS) {
+ const teamOptionList = data.teams?.map((x: MemberItem) => {
+ return { ...x, label: x.name, value: x.id }
+ })
+ setTeamList(teamOptionList)
+ if (form.getFieldValue('team') === undefined && data.teams?.length) {
+ form.setFieldValue('team', data.teams[0].id)
+ }
+ } else {
+ message.error(msg || $t(RESPONSE_TIPS.error))
+ return []
+ }
+ }
+
+ /**
+ * 获取未配置模型提供者列表
+ */
+ const getModelProviderList = () => {
+ setModelModeLoading(true)
+ fetchData>(`ai/providers/unconfigured`, {
+ method: 'GET',
+ eoTransformKeys: ['default_llm', 'default_llm_logo']
+ })
+ .then((response) => {
+ const { code, data, msg } = response
+ if (code === STATUS_CODE.SUCCESS) {
+ const providers = data.providers || []
+ modelProviderListRef.current = providers
+ if (providers.length) {
+ const id = providers[0].id
+ form.setFieldValue('modelMode', id)
+ getModelConfig(id)
+ }
+ } else {
+ message.error(msg || $t(RESPONSE_TIPS.error))
+ }
+ })
+ .finally(() => {
+ setModelModeLoading(false)
+ })
+ }
+
+ /**
+ * 获取模型配置
+ * @param id
+ */
+ const getModelConfig = (id: string) => {
+ getLlmList(id)
+ fetchData>(`ai/provider/config`, {
+ method: 'GET',
+ eoParams: { provider: id },
+ eoTransformKeys: ['get_apikey_url']
+ })
+ .then((response) => {
+ const { code, data, msg } = response
+ if (code === STATUS_CODE.SUCCESS) {
+ const modelEntity = {
+ ...data.provider,
+ defaultLlm: modelProviderListRef.current.find((x) => x.id === id)?.defaultLlm
+ }
+ setLocalEntity(modelEntity)
+ setFormFieldsValue(modelEntity)
+ updateEntityData(modelEntity)
+ } else {
+ message.error(msg || $t(RESPONSE_TIPS.error))
+ }
+ })
+ .finally(() => {
+ setModelModeLoading(false)
+ })
+ }
+
+ /**
+ * 设置表单字段值
+ * @param fieldsValue
+ */
+ const setFormFieldsValue = (fieldsValue: any) => {
try {
form.setFieldsValue({
- defaultLlm: entity.defaultLlm,
- config: entity!.config ? JSON.stringify(JSON.parse(entity!.config), null, 2) : '',
- priority: entity.priority || 1,
- enable: entity.status === 'enabled'
+ defaultLlm: fieldsValue.defaultLlm,
+ config: fieldsValue!.config ? JSON.stringify(JSON.parse(fieldsValue!.config), null, 2) : '',
+ priority: fieldsValue.priority || 1,
+ enable: fieldsValue.status === 'enabled'
})
} catch (e) {
form.setFieldsValue({
- defaultLlm: entity.defaultLlm,
+ defaultLlm: localEntity.defaultLlm,
config: '',
priority: 1,
enable: true
})
}
+ }
+ useEffect(() => {
+ // 如果是直接在 AI 模型配置,则获取默认模型列表和团队列表
+ if (modelMode === 'auto') {
+ getLlmList()
+ setFormFieldsValue(localEntity)
+ } else {
+ getModelProviderList()
+ getTeamOptionList()
+ }
}, [])
+ /**
+ * 部署 AI 服务
+ */
+ const deployAIServer: () => Promise = () => {
+ return new Promise((resolve, reject) => {
+ form
+ .validateFields()
+ .then((value) => {
+ const finalValue = {
+ config: value.config,
+ model: value.defaultLlm,
+ team: value.team,
+ provider: localEntity?.id
+ }
+ console.log(finalValue)
+ fetchData>('quick/service/ai', {
+ method: 'POST',
+ eoBody: finalValue
+ })
+ .then((response) => {
+ const { code, msg } = response
+ if (code === STATUS_CODE.SUCCESS) {
+ message.success(msg || $t(RESPONSE_TIPS.success))
+ resolve(true)
+ } else {
+ message.error(msg || $t(RESPONSE_TIPS.error))
+ reject(msg || $t(RESPONSE_TIPS.error))
+ }
+ })
+ .catch((errorInfo) => reject(errorInfo))
+ })
+ .catch((errorInfo) => reject(errorInfo))
+ })
+ }
+
+ /**
+ * 保存
+ * @returns
+ */
const save: () => Promise = () => {
return new Promise((resolve, reject) => {
form
@@ -74,7 +227,7 @@ const AiSettingModalContent = forwardRef>('ai/provider/config', {
method: 'PUT',
- eoParams: { provider: entity?.id },
+ eoParams: { provider: localEntity?.id },
eoBody: finalValue,
eoTransformKeys: ['defaultLlm']
// eoApiPrefix: 'http://uat.apikit.com:11204/mockApi/aoplatform/api/v1/'
@@ -103,7 +256,8 @@ const AiSettingModalContent = forwardRef ({
- save
+ save,
+ deployAIServer
}))
return (
@@ -117,6 +271,26 @@ const AiSettingModalContent = forwardRef
+ {modelMode === 'manual' && (
+ label={$t('模型来源')} name="modelMode" rules={[{ required: true }]}>
+
+
+ )}
label={$t('默认模型')} name="defaultLlm" rules={[{ required: true }]}>
-
-
- label={
-
- {$t('负载优先级')}
-
-
-
-
- }
- name="priority"
- rules={[
- { required: true },
- {
- validator: async (_, value) => {
- if (value <= 0) {
- throw new Error($t('优先级必须大于 0'))
- }
- return Promise.resolve()
- }
+ {modelMode === 'auto' && (
+
+ label={
+
+ {$t('负载优先级')}
+
+
+
+
}
- ]}
- initialValue={1}
- >
-
-
+ name="priority"
+ rules={[
+ { required: true },
+ {
+ validator: async (_, value) => {
+ if (value <= 0) {
+ throw new Error($t('优先级必须大于 0'))
+ }
+ return Promise.resolve()
+ }
+ }
+ ]}
+ initialValue={1}
+ >
+
+
+ )}
+ {modelMode === 'manual' && (
+
+
+
+ )}
label={$t('API Key（默认 Key）')} name="config">
- {entity.configured && (
+ {localEntity?.configured && (
{$t('当前调用状态：')}
- {entity.status === 'enabled' && {$t('正常')}}
- {entity.status === 'disabled' && {$t('停用')}}
- {entity.status === 'abnormal' && {$t('异常')}}
+ {localEntity.status === 'enabled' && {$t('正常')}}
+ {localEntity.status === 'disabled' && {$t('停用')}}
+ {localEntity.status === 'abnormal' && {$t('异常')}}
- {(entity.status === 'enabled' && !enableState) || (entity.status !== 'enabled' && enableState) ? (
+ {(localEntity.status === 'enabled' && !enableState) || (localEntity.status !== 'enabled' && enableState) ? (
* {getTooltipText(enableState)}
) : null}
diff --git a/frontend/packages/core/src/pages/aiSetting/types.ts b/frontend/packages/core/src/pages/aiSetting/types.ts
index 6ba2ea7a..6a8a4598 100644
--- a/frontend/packages/core/src/pages/aiSetting/types.ts
+++ b/frontend/packages/core/src/pages/aiSetting/types.ts
@@ -12,6 +12,7 @@ export interface ModelListData {
name: string
logo: string
defaultLlm: string
+ modelMode?: string
status: ModelStatus
api_count: number
key_count: number
diff --git a/frontend/packages/core/src/pages/guide/AIModelGuide.tsx b/frontend/packages/core/src/pages/guide/AIModelGuide.tsx
new file mode 100644
index 00000000..53c2288b
--- /dev/null
+++ b/frontend/packages/core/src/pages/guide/AIModelGuide.tsx
@@ -0,0 +1,427 @@
+import restAPIPic from '@common/assets/restAPI.svg'
+import onlineAIPic from '@common/assets/onlineAI.svg'
+import localAIPic from '@common/assets/localAI.svg'
+import { useGlobalContext } from '@common/contexts/GlobalStateContext'
+import { $t } from '@common/locales'
+import { Icon } from '@iconify/react/dist/iconify.js'
+import { App, Upload, UploadProps, Form, message, Select } from 'antd'
+import { Card } from 'antd'
+import { useRef, useState } from 'react'
+import { useNavigate } from 'react-router-dom'
+import WithPermission from '@common/components/aoplatform/WithPermission'
+import { BasicResponse, PLACEHOLDER, RESPONSE_TIPS, STATUS_CODE } from '@common/const/const'
+import { useFetch } from '@common/hooks/http'
+import { LocalModelItem, MemberItem, SimpleTeamItem } from '@common/const/type'
+import AiSettingModalContent, { AiSettingModalContentHandle } from '../aiSetting/AiSettingModal'
+import { checkAccess } from '@common/utils/permission'
+const { Dragger } = Upload
+export const AIModelGuide = () => {
+ const { modal } = App.useApp()
+ const [, forceUpdate] = useState(null)
+ const [form] = Form.useForm()
+ const entityData = useRef(null)
+ const { fetchData } = useFetch()
+ const navigateTo = useNavigate()
+ const { checkPermission, accessData } = useGlobalContext()
+ const modalRef = useRef()
+
+ /**
+ * 获取 team 选项列表
+ * @returns
+ */
+ const getTeamOptionList = async (): any[] => {
+ const response = await fetchData>(
+ !checkPermission('system.workspace.team.view_all') ? 'simple/teams/mine' : 'simple/teams',
+ { method: 'GET', eoTransformKeys: [] }
+ )
+ const { code, data, msg } = response
+ if (code === STATUS_CODE.SUCCESS) {
+ const teamOptionList = data.teams?.map((x: MemberItem) => {
+ return { ...x, label: x.name, value: x.id }
+ })
+ if (form.getFieldValue('team') === undefined && data.teams?.length) {
+ form.setFieldValue('team', data.teams[0].id)
+ }
+ return teamOptionList
+ } else {
+ message.error(msg || $t(RESPONSE_TIPS.error))
+ return []
+ }
+ }
+
+ /**
+ * 部署 rest 服务
+ * @param file
+ * @returns
+ */
+ const deployRestServer = async (file: File) => {
+ return new Promise((resolve, reject) => {
+ const formData = new FormData()
+ formData.append('file', file)
+ formData.append('type', file.type)
+ formData.append('team', form.getFieldValue('team'))
+ fetchData>('quick/service/rest', {
+ method: 'POST',
+ body: formData
+ }).then((response) => {
+ const { code, msg } = response
+ if (code === STATUS_CODE.SUCCESS) {
+ message.success(msg || $t(RESPONSE_TIPS.success))
+ resolve(true)
+ } else {
+ message.error(msg || $t(RESPONSE_TIPS.error))
+ reject(false)
+ }
+ })
+ })
+ }
+
+ const deployPopularModel = async (id: string, modalInstance: any) => {
+ await deployLocalModel({
+ modelID: id,
+ team: form.getFieldValue('team')
+ })
+ modalInstance.destroy()
+ navigateTo(`/service/list`)
+ }
+
+ /**
+ * 部署本地模型
+ * @param value
+ * @returns
+ */
+ const deployLocalModel = (value: { modelID: string; team?: number }) => {
+ return new Promise((resolve, reject) => {
+ const finalValue = {
+ model: value.modelID,
+ team: value?.team
+ }
+ console.log(finalValue)
+ fetchData>('model/local/deploy', {
+ method: 'POST',
+ eoBody: finalValue
+ })
+ .then((response) => {
+ const { code, msg } = response
+ if (code === STATUS_CODE.SUCCESS) {
+ message.success(msg || $t(RESPONSE_TIPS.success))
+ resolve(true)
+ } else {
+ message.error(msg || $t(RESPONSE_TIPS.error))
+ reject(false)
+ }
+ })
+ .catch((errorInfo) => reject(errorInfo))
+ })
+ }
+
+ /**
+ * 获取本地模型列表
+ * @returns 本地模型列表
+ */
+ const getLocalModelList = async (): any[] => {
+ const response = await fetchData>(
+ 'http://uat.apikit.com:11204/mockApi/aoplatform/api/v1/model/local/can_deploy',
+ // 'model/local/can_deploy'
+ { method: 'GET', custom: true, eoTransformKeys: ['is_popular'] }
+ )
+ // TODO_数据模拟
+ if (response.ok) {
+ const datas = await response.json()
+ const { code, data, msg } = datas
+ if (code === STATUS_CODE.SUCCESS) {
+ const modelList = data.models?.map((x: LocalModelItem) => {
+ return { ...x, label: x.name, value: x.id }
+ })
+ return modelList
+ } else {
+ message.error(msg || $t(RESPONSE_TIPS.error))
+ return []
+ }
+ } else {
+ console.error('HTTP error', response.status)
+ }
+ // const { code, data, msg } = response
+ // if (code === STATUS_CODE.SUCCESS) {
+ // const modelList = data.models?.map((x: LocalModelItem) => {
+ // return { ...x, label: x.name, value: x.id }
+ // })
+ // console.log('modelList===', modelList);
+
+ // return modelList
+ // } else {
+ // message.error(msg || $t(RESPONSE_TIPS.error))
+ // return []
+ // }
+ }
+
+ /**
+ * rest 服务卡片点击事件
+ */
+ const restCardClick = async () => {
+ form.resetFields()
+ const teamList = await getTeamOptionList()
+ const props: UploadProps = {
+ name: 'file',
+ multiple: false,
+ maxCount: 1,
+ beforeUpload: (file) => {
+ form.setFieldsValue({ key: file })
+ forceUpdate({})
+ return false
+ }
+ }
+
+ modal.confirm({
+ title: $t('添加 Rest 服务'),
+ content: (
+
+
+
+ ),
+ onOk: () => {
+ return new Promise((resolve, reject) => {
+ form
+ .validateFields()
+ .then(async (value) => {
+ await deployRestServer(value.key.file)
+ resolve(true)
+ navigateTo(`/service/list`)
+ })
+ .catch((errorInfo) => reject(errorInfo))
+ })
+ },
+ width: 600,
+ okText: $t('确认'),
+ cancelText: $t('取消'),
+ closable: true,
+ icon: <>
+ })
+ }
+
+ /**
+ * AI 模型配置弹窗
+ */
+ const aiCardClick = () => {
+ // 更新弹窗
+ const updateEntityData = (data: any) => {
+ entityData.current = data
+ // 更新弹窗
+ modalInstance.update({})
+ }
+ const modalInstance = modal.confirm({
+ title: $t('模型配置'),
+ content: (
+
+ ),
+ onOk: () => {
+ return modalRef.current?.deployAIServer().then((res) => {
+ if (res === true) {
+ navigateTo(`/service/list`)
+ }
+ })
+ },
+ width: 600,
+ okText: $t('确认'),
+ footer: (_, { OkBtn, CancelBtn }) => {
+ return (
+
+ )
+ },
+ cancelText: $t('取消'),
+ closable: true,
+ icon: <>
+ })
+ }
+
+ /**
+ * 本地部署 AI 并生成 API
+ */
+ const localModelCardClick = async () => {
+ form.resetFields()
+ const teamList = await getTeamOptionList()
+ const modelList = await getLocalModelList()
+ const modalInstance = modal.confirm({
+ title: $t('部署 AI 模型'),
+ content: (
+
+
+
+ ),
+ onOk: () => {
+ return new Promise((resolve, reject) => {
+ form
+ .validateFields()
+ .then(async (value) => {
+ await deployLocalModel(value)
+ resolve(true)
+ navigateTo(`/service/list`)
+ })
+ .catch((errorInfo) => reject(errorInfo))
+ })
+ },
+ width: 600,
+ okText: $t('确认'),
+ cancelText: $t('取消'),
+ closable: true,
+ icon: <>
+ })
+ }
+ const deployDeepSeek = (e: any) => {
+ e.stopPropagation()
+ deployLocalModel({
+ modelID: 'deepseek-r1'
+ })
+ }
+
+ const cardList = [
+ {
+ imgSrc: restAPIPic,
+ title: $t('添加 Rest 服务'),
+ description: $t('支持批量添加现有 API 文档以实现统一的外部访问。'),
+ click: restCardClick
+ },
+ {
+ imgSrc: onlineAIPic,
+ title: $t('添加在线 AI API'),
+ description: $t('快速调用 AI 模型的云服务 API，方便管理提示词和统一计费。'),
+ click: aiCardClick
+ },
+ {
+ imgSrc: localAIPic,
+ title: $t('本地部署 AI 并生成 API'),
+ description: $t('快速在本地部署开源模型并自动生成 API。'),
+ click: localModelCardClick,
+ bottomRender: (
+
+
+ {$t('部署')} Deepseek-R1
+
+ )
+ }
+ ]
+ return (
+
+ {cardList.map((item, itemIndex) => (
+
+ 
+ {item.title}
+ {item.description}
+ {item.bottomRender ? item.bottomRender : null}
+
+ ))}
+
-
-
{$t("你能通过 APIPark 快速在企业内部构建 API 开放门户/市场，享受极致的转发性能、API 可观测、服务治理、多租户管理、订阅审核流程等诸多好处。")}
-
{$t("如果你喜欢我们的产品，欢迎给我们 Star 或提供产品反馈意见。")}
-