424 lines
16 KiB
TypeScript
424 lines
16 KiB
TypeScript
import React, { useEffect, useState } from 'react';
|
||
import {
|
||
Button, Card, Checkbox, Form, Input, InputNumber, message, Modal, Popconfirm, Select, Space, Switch, Table, Tag, Typography,
|
||
} from 'antd';
|
||
import {
|
||
PictureOutlined, PlusOutlined, EditOutlined, DeleteOutlined,
|
||
} from '@ant-design/icons';
|
||
import { getImageEngines, saveImageEngine, deleteImageEngine } from '../api';
|
||
|
||
interface ImageEngine {
|
||
id: string;
|
||
name: string;
|
||
provider: string;
|
||
apiBase: string;
|
||
apiKey: string;
|
||
modelName: string;
|
||
supportedModels: string[];
|
||
supportedSizes: Record<string, Record<string, string>>;
|
||
defaultSize: string;
|
||
maxImageCount: number;
|
||
generateUrl: string;
|
||
isActive: boolean;
|
||
priority: number;
|
||
multiGenerationEnabled: boolean;
|
||
maxGenerationCount: number;
|
||
multiImageMaxImages: number;
|
||
maxReferenceImageCount: number;
|
||
outputFormat: '' | 'png' | 'jpeg';
|
||
}
|
||
|
||
function parseJsonArray(val: unknown): any[] {
|
||
if (Array.isArray(val)) return val;
|
||
if (typeof val === 'string') {
|
||
try { return JSON.parse(val); } catch { return []; }
|
||
}
|
||
return [];
|
||
}
|
||
|
||
function parseSizes(val: unknown): Record<string, Record<string, string>> {
|
||
if (val && typeof val === 'object' && !Array.isArray(val)) return val as Record<string, Record<string, string>>;
|
||
if (typeof val === 'string') {
|
||
try { const p = JSON.parse(val); return (p && typeof p === 'object' && !Array.isArray(p)) ? p : {}; } catch { return {}; }
|
||
}
|
||
return {};
|
||
}
|
||
|
||
// Default size options with pixel mappings
|
||
const SIZE_OPTIONS: Record<string, Record<string, string>> = {
|
||
"1K": {
|
||
"1:1": "1024x1024",
|
||
"4:3": "1152x864",
|
||
"3:4": "864x1152",
|
||
"16:9": "1312x736",
|
||
"9:16": "736x1312",
|
||
"3:2": "1248x832",
|
||
"2:3": "832x1248",
|
||
"21:9": "1568x672",
|
||
},
|
||
"2K": {
|
||
"1:1": "2048x2048",
|
||
"4:3": "2304x1728",
|
||
"3:4": "1728x2304",
|
||
"16:9": "2848x1600",
|
||
"9:16": "1600x2848",
|
||
"3:2": "2496x1664",
|
||
"2:3": "1664x2496",
|
||
"21:9": "3136x1344",
|
||
},
|
||
"4K": {
|
||
"1:1": "4096x4096",
|
||
"4:3": "4704x3520",
|
||
"3:4": "3520x4704",
|
||
"16:9": "5504x3040",
|
||
"9:16": "3040x5504",
|
||
"3:2": "4992x3328",
|
||
"2:3": "3328x4992",
|
||
"21:9": "6197x2656",
|
||
},
|
||
};
|
||
|
||
const ALL_RATIOS = ["1:1", "4:3", "3:4", "16:9", "9:16", "3:2", "2:3", "21:9"];
|
||
|
||
const AdminImageEngines: React.FC = () => {
|
||
const [engines, setEngines] = useState<ImageEngine[]>([]);
|
||
const [loading, setLoading] = useState(false);
|
||
const [modal, setModal] = useState<{ open: boolean; engine: ImageEngine | null }>({ open: false, engine: null });
|
||
const [form] = Form.useForm();
|
||
const multiGenerationEnabled = Form.useWatch('multiGenerationEnabled', form) ?? false;
|
||
|
||
const load = async () => {
|
||
setLoading(true);
|
||
try {
|
||
const data = await getImageEngines();
|
||
setEngines(data.map((e: any) => ({
|
||
...e,
|
||
supportedModels: parseJsonArray(e.supportedModels),
|
||
supportedSizes: parseSizes(e.supportedSizes),
|
||
})));
|
||
} catch {
|
||
message.error('加载图片引擎失败');
|
||
} finally {
|
||
setLoading(false);
|
||
}
|
||
};
|
||
|
||
useEffect(() => { load(); }, []);
|
||
|
||
const handleSave = async () => {
|
||
try {
|
||
const values = await form.validateFields();
|
||
// Build supportedSizes from form values
|
||
const sizes: Record<string, Record<string, string>> = {};
|
||
for (const tier of ["1K", "2K", "4K"]) {
|
||
const selected: string[] = values[`size_${tier}`] || [];
|
||
if (selected.length > 0) {
|
||
sizes[tier] = {};
|
||
for (const ratio of selected) {
|
||
sizes[tier][ratio] = SIZE_OPTIONS[tier]?.[ratio] || ratio;
|
||
}
|
||
}
|
||
}
|
||
const payload = {
|
||
name: values.name,
|
||
provider: values.provider,
|
||
api_base: values.apiBase,
|
||
api_key: values.apiKey,
|
||
model_name: values.modelName,
|
||
supported_models: JSON.stringify(values.supportedModels || []),
|
||
supported_sizes: JSON.stringify(sizes),
|
||
default_size: values.defaultSize || '2K',
|
||
max_image_count: values.maxImageCount ?? 0,
|
||
generate_url: values.generateUrl || '',
|
||
is_active: values.isActive ?? true,
|
||
priority: values.priority ?? 0,
|
||
multi_generation_enabled: values.multiGenerationEnabled ?? false,
|
||
max_generation_count: values.maxGenerationCount ?? 1,
|
||
multi_image_max_images: values.multiImageMaxImages ?? 15,
|
||
max_reference_image_count: values.maxReferenceImageCount ?? 14,
|
||
output_format: values.outputFormat ?? '',
|
||
};
|
||
if (modal.engine) {
|
||
await saveImageEngine({ id: modal.engine.id, ...payload });
|
||
message.success('已更新');
|
||
} else {
|
||
await saveImageEngine(payload);
|
||
message.success('已添加');
|
||
}
|
||
setModal({ open: false, engine: null });
|
||
form.resetFields();
|
||
load();
|
||
} catch (e: any) {
|
||
if (e?.errorFields) return;
|
||
message.error(e?.message || '保存失败');
|
||
}
|
||
};
|
||
|
||
const handleDelete = async (id: string) => {
|
||
try {
|
||
await deleteImageEngine(id);
|
||
message.success('已删除');
|
||
load();
|
||
} catch {
|
||
message.error('删除失败');
|
||
}
|
||
};
|
||
|
||
const openEdit = (engine?: ImageEngine) => {
|
||
setModal({ open: true, engine: engine || null });
|
||
if (engine) {
|
||
const sizeFields: Record<string, string[]> = {};
|
||
for (const tier of ["1K", "2K", "4K"]) {
|
||
sizeFields[`size_${tier}`] = Object.keys(engine.supportedSizes?.[tier] || {});
|
||
}
|
||
form.setFieldsValue({
|
||
...engine,
|
||
...sizeFields,
|
||
});
|
||
} else {
|
||
form.resetFields();
|
||
form.setFieldsValue({
|
||
isActive: true, priority: 0,
|
||
multiGenerationEnabled: false, maxGenerationCount: 1, multiImageMaxImages: 15,
|
||
maxReferenceImageCount: 14, outputFormat: '',
|
||
supportedModels: ['doubao-seedream-5-0-260128'],
|
||
defaultSize: '2K',
|
||
maxImageCount: 0,
|
||
size_1K: ALL_RATIOS,
|
||
size_2K: ALL_RATIOS,
|
||
size_4K: ALL_RATIOS,
|
||
});
|
||
}
|
||
};
|
||
|
||
const columns = [
|
||
{
|
||
title: '引擎名称', key: 'name', width: 180,
|
||
render: (_: any, r: ImageEngine) => (
|
||
<div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
|
||
<div style={{
|
||
width: 36, height: 36, borderRadius: 8,
|
||
background: r.isActive
|
||
? 'linear-gradient(135deg, #10b981, #059669)'
|
||
: 'linear-gradient(135deg, #94a3b8, #cbd5e1)',
|
||
display: 'flex', alignItems: 'center', justifyContent: 'center',
|
||
color: '#fff', fontSize: 16,
|
||
}}><PictureOutlined /></div>
|
||
<div>
|
||
<Typography.Text strong>{r.name}</Typography.Text>
|
||
<div style={{ color: '#94a3b8', fontSize: 12 }}>{r.modelName}</div>
|
||
</div>
|
||
</div>
|
||
),
|
||
},
|
||
{
|
||
title: '1K 支持比例', key: 'sizes_1k', width: 260,
|
||
render: (_: any, r: ImageEngine) => {
|
||
const ratios = Object.keys(r.supportedSizes?.["1K"] || {});
|
||
if (ratios.length === 0) return <span style={{ color: '#bfbfbf' }}>-</span>;
|
||
return <Space size={2} wrap>{ratios.map(ratio => (
|
||
<Tag key={ratio} color="green">{ratio} {r.supportedSizes["1K"][ratio]}</Tag>
|
||
))}</Space>;
|
||
},
|
||
},
|
||
{
|
||
title: '2K 支持比例', key: 'sizes_2k', width: 260,
|
||
render: (_: any, r: ImageEngine) => {
|
||
const ratios = Object.keys(r.supportedSizes?.["2K"] || {});
|
||
if (ratios.length === 0) return <span style={{ color: '#bfbfbf' }}>-</span>;
|
||
return <Space size={2} wrap>{ratios.map(ratio => (
|
||
<Tag key={ratio} color="blue">{ratio} {r.supportedSizes["2K"][ratio]}</Tag>
|
||
))}</Space>;
|
||
},
|
||
},
|
||
{
|
||
title: '4K 支持比例', key: 'sizes_4k', width: 260,
|
||
render: (_: any, r: ImageEngine) => {
|
||
const ratios = Object.keys(r.supportedSizes?.["4K"] || {});
|
||
if (ratios.length === 0) return <span style={{ color: '#bfbfbf' }}>-</span>;
|
||
return <Space size={2} wrap>{ratios.map(ratio => (
|
||
<Tag key={ratio} color="purple">{ratio} {r.supportedSizes["4K"][ratio]}</Tag>
|
||
))}</Space>;
|
||
},
|
||
},
|
||
{
|
||
title: '最大图片', dataIndex: 'maxImageCount', width: 100,
|
||
render: (v: number) => <Tag color="purple">{v} 张</Tag>,
|
||
},
|
||
{
|
||
title: '多份生成', dataIndex: 'multiGenerationEnabled', width: 100,
|
||
render: (v: boolean) => <Tag color={v ? 'blue' : 'default'}>{v ? '开启' : '关闭'}</Tag>,
|
||
},
|
||
{
|
||
title: '数量上限', dataIndex: 'maxGenerationCount', width: 100,
|
||
render: (v: number, r: ImageEngine) => (
|
||
<Tag color={r.multiGenerationEnabled && Number(v || 1) > 1 ? 'magenta' : 'default'}>
|
||
最多 {r.multiGenerationEnabled ? (v || 1) : 1} 份
|
||
</Tag>
|
||
),
|
||
},
|
||
{
|
||
title: '状态', dataIndex: 'isActive', width: 80,
|
||
render: (v: boolean) => <Tag color={v ? 'green' : 'default'}>{v ? '启用' : '停用'}</Tag>,
|
||
},
|
||
{
|
||
title: '操作', key: 'action', width: 150, fixed: 'right' as const,
|
||
render: (_: any, r: ImageEngine) => (
|
||
<Space size={4}>
|
||
<Button type="link" size="small" icon={<EditOutlined />} onClick={() => openEdit(r)}>编辑</Button>
|
||
<Popconfirm title="确定删除？" onConfirm={() => handleDelete(r.id)}>
|
||
<Button type="link" size="small" danger icon={<DeleteOutlined />}>删除</Button>
|
||
</Popconfirm>
|
||
</Space>
|
||
),
|
||
},
|
||
];
|
||
|
||
return (
|
||
<div>
|
||
<Card style={{ borderRadius: 12, border: '1px solid #f0f0f5' }}>
|
||
<div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 16 }}>
|
||
<Space>
|
||
<PictureOutlined style={{ fontSize: 18, color: '#10b981' }} />
|
||
<Typography.Text strong style={{ fontSize: 16 }}>图片引擎配置</Typography.Text>
|
||
<Tag color="green">{engines.length} 个引擎</Tag>
|
||
</Space>
|
||
<Button type="primary" icon={<PlusOutlined />} onClick={() => openEdit()} style={{ borderRadius: 8 }}>
|
||
添加引擎
|
||
</Button>
|
||
</div>
|
||
|
||
<Table
|
||
columns={columns}
|
||
dataSource={engines}
|
||
rowKey="id"
|
||
loading={loading}
|
||
pagination={false}
|
||
scroll={{ x: 1000 }}
|
||
/>
|
||
</Card>
|
||
|
||
<Modal
|
||
title={<Space><PictureOutlined />{modal.engine ? '编辑引擎' : '添加引擎'}</Space>}
|
||
open={modal.open}
|
||
onOk={handleSave}
|
||
onCancel={() => { setModal({ open: false, engine: null }); form.resetFields(); }}
|
||
okText="保存" cancelText="取消" width={680}
|
||
>
|
||
<Form form={form} layout="vertical" style={{ marginTop: 16 }}>
|
||
<div style={{ display: 'flex', gap: 16 }}>
|
||
<Form.Item name="name" label="引擎名称" style={{ flex: 1 }}
|
||
rules={[{ required: true }]}>
|
||
<Input placeholder="豆包文生图" size="large" />
|
||
</Form.Item>
|
||
<Form.Item name="provider" label="提供商" style={{ flex: 1 }}
|
||
rules={[{ required: true }]}>
|
||
<Select size="large" options={[
|
||
{ value: 'ark', label: '火山引擎 (Ark)' },
|
||
]} />
|
||
</Form.Item>
|
||
</div>
|
||
<Form.Item name="apiBase" label="API基础地址" rules={[{ required: true }]}>
|
||
<Input placeholder="https://ark.cn-beijing.volces.com/api/v3" size="large" />
|
||
</Form.Item>
|
||
<Form.Item name="apiKey" label="API Key">
|
||
<Input.Password placeholder="sk-****" size="large" />
|
||
</Form.Item>
|
||
<Form.Item name="modelName" label="默认模型">
|
||
<Input placeholder="doubao-seedream-5-0-260128" size="large" />
|
||
</Form.Item>
|
||
<Form.Item name="supportedModels" label="支持模型列表">
|
||
<Select mode="tags" size="large" placeholder="输入模型ID后回车添加" tokenSeparators={[',', '，']}
|
||
options={[{ value: 'doubao-seedream-5-0-260128' }]} />
|
||
</Form.Item>
|
||
|
||
{/* Size config */}
|
||
<div style={{ background: '#f8f9fc', borderRadius: 10, padding: 16, marginBottom: 8 }}>
|
||
<Typography.Text strong style={{ fontSize: 14 }}>尺寸配置</Typography.Text>
|
||
<Typography.Text style={{ fontSize: 12, color: '#94a3b8', marginLeft: 8 }}>
|
||
勾选每个档位支持的比例，前台选择后传对应像素值给SDK
|
||
</Typography.Text>
|
||
</div>
|
||
|
||
{["1K", "2K", "4K"].map(tier => (
|
||
<div key={tier} style={{
|
||
background: '#fafbfc', borderRadius: 10, padding: '12px 16px',
|
||
marginBottom: 12, border: '1px solid #f0f0f5',
|
||
}}>
|
||
<Typography.Text strong style={{ fontSize: 13, color: tier === '2K' ? '#3b82f6' : '#8b5cf6' }}>
|
||
{tier}
|
||
</Typography.Text>
|
||
<Form.Item name={`size_${tier}`} style={{ marginTop: 8, marginBottom: 0 }}>
|
||
<Checkbox.Group style={{ width: '100%' }}>
|
||
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: '6px 0' }}>
|
||
{ALL_RATIOS.map(ratio => (
|
||
<Checkbox key={ratio} value={ratio} style={{ fontSize: 12 }}>
|
||
{ratio} <span style={{ color: '#94a3b8', fontSize: 11 }}>{SIZE_OPTIONS[tier]?.[ratio]}</span>
|
||
</Checkbox>
|
||
))}
|
||
</div>
|
||
</Checkbox.Group>
|
||
</Form.Item>
|
||
</div>
|
||
))}
|
||
|
||
<Form.Item name="defaultSize" label="默认尺寸档位">
|
||
<Select size="large" options={[
|
||
{ value: '1K', label: '1K' },
|
||
{ value: '2K', label: '2K' },
|
||
{ value: '4K', label: '4K' },
|
||
]} />
|
||
</Form.Item>
|
||
<Form.Item name="maxImageCount" label="最大图片数量">
|
||
<Input type="number" size="large" />
|
||
</Form.Item>
|
||
<Form.Item name="generateUrl" label="生成接口地址">
|
||
<Input placeholder="https://ark.cn-beijing.volces.com/api/v3/images/generations" size="large" />
|
||
</Form.Item>
|
||
<div style={{ background: '#f8f9fc', borderRadius: 10, padding: 16, marginBottom: 12 }}>
|
||
<Typography.Text strong>多份生成能力</Typography.Text>
|
||
<Typography.Paragraph style={{ margin: '6px 0 0', color: '#64748b', fontSize: 12 }}>
|
||
管理后台只控制是否允许客户端选择多份及最大数量。客户端本次选择 2-5 份时，后端只调用一次火山同步组图 API；失败绝不降级成多次单图请求。
|
||
</Typography.Paragraph>
|
||
</div>
|
||
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, minmax(0, 1fr))', gap: 16 }}>
|
||
<Form.Item name="multiGenerationEnabled" label="允许客户端多份生成" valuePropName="checked">
|
||
<Switch checkedChildren="开启" unCheckedChildren="关闭" />
|
||
</Form.Item>
|
||
<Form.Item name="maxGenerationCount" label="客户端最大生成数量" rules={[{ required: true }]}>
|
||
<InputNumber min={1} max={5} precision={0} size="large" style={{ width: '100%' }} disabled={!multiGenerationEnabled} />
|
||
</Form.Item>
|
||
<Form.Item name="multiImageMaxImages" label="组图输入输出总上限" rules={[{ required: true }]}>
|
||
<InputNumber min={1} max={15} precision={0} size="large" style={{ width: '100%' }} />
|
||
</Form.Item>
|
||
<Form.Item name="maxReferenceImageCount" label="最大参考图数量" rules={[{ required: true }]}>
|
||
<InputNumber min={0} max={14} precision={0} size="large" style={{ width: '100%' }} />
|
||
</Form.Item>
|
||
<Form.Item name="outputFormat" label="供应商输出格式">
|
||
<Select size="large" options={[
|
||
{ value: '', label: '不传（兼容不支持 output_format 的模型）' },
|
||
{ value: 'png', label: 'PNG' },
|
||
{ value: 'jpeg', label: 'JPEG' },
|
||
]} />
|
||
</Form.Item>
|
||
</div>
|
||
<div style={{ display: 'flex', gap: 16 }}>
|
||
<Form.Item name="priority" label="优先级">
|
||
<Select size="large" options={[
|
||
{ value: 0, label: '0 (默认)' },
|
||
{ value: 1, label: '1' }, { value: 2, label: '2' }, { value: 3, label: '3' },
|
||
{ value: 5, label: '5' }, { value: 10, label: '10 (最高)' },
|
||
]} />
|
||
</Form.Item>
|
||
<Form.Item name="isActive" label="启用状态" valuePropName="checked" style={{ paddingTop: 30 }}>
|
||
<Switch />
|
||
</Form.Item>
|
||
</div>
|
||
</Form>
|
||
</Modal>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default AdminImageEngines;
|