chore: providers logo
This commit is contained in:
@@ -0,0 +1,86 @@
|
||||
import ai360 from '@/assets/providers-logo/ai360.svg';
|
||||
import azure from '@/assets/providers-logo/azureai.svg';
|
||||
import baichuan from '@/assets/providers-logo/baichuan.svg';
|
||||
import baiduCloud from '@/assets/providers-logo/baiducloud.svg';
|
||||
import bedrock from '@/assets/providers-logo/bedrock.svg';
|
||||
import claude from '@/assets/providers-logo/claude.svg';
|
||||
import cloudflare from '@/assets/providers-logo/cloudflare.svg';
|
||||
import cohere from '@/assets/providers-logo/cohere.svg';
|
||||
import coze from '@/assets/providers-logo/coze.svg';
|
||||
import deepl from '@/assets/providers-logo/deepl.svg';
|
||||
import deepseek from '@/assets/providers-logo/deepseek.svg';
|
||||
import dify from '@/assets/providers-logo/dify.svg';
|
||||
import doubao from '@/assets/providers-logo/doubao.svg';
|
||||
import fireworks from '@/assets/providers-logo/fireworks.svg';
|
||||
import gemini from '@/assets/providers-logo/gemini.svg';
|
||||
import github from '@/assets/providers-logo/github.svg';
|
||||
import grok from '@/assets/providers-logo/grok.svg';
|
||||
import groq from '@/assets/providers-logo/groq.svg';
|
||||
import hunyuan from '@/assets/providers-logo/hunyuan.svg';
|
||||
import longcat from '@/assets/providers-logo/longcat.svg';
|
||||
import minimax from '@/assets/providers-logo/minimax.svg';
|
||||
import mistral from '@/assets/providers-logo/mistral.svg';
|
||||
import moonshot from '@/assets/providers-logo/moonshot.svg';
|
||||
import triton from '@/assets/providers-logo/nvidia.svg';
|
||||
import ollama from '@/assets/providers-logo/ollama.svg';
|
||||
import openai from '@/assets/providers-logo/openai.svg';
|
||||
import openrouter from '@/assets/providers-logo/openrouter.svg';
|
||||
import qwen from '@/assets/providers-logo/qwen.svg';
|
||||
import spark from '@/assets/providers-logo/spark.svg';
|
||||
import stepfun from '@/assets/providers-logo/stepfun.svg';
|
||||
import togetherai from '@/assets/providers-logo/together.svg';
|
||||
import yi from '@/assets/providers-logo/yi.svg';
|
||||
import zhipuai from '@/assets/providers-logo/zhipu.svg';
|
||||
import { ProviderEnum } from '../config/providers';
|
||||
|
||||
const ProviderLogoMap: Record<string, string> = {
|
||||
[ProviderEnum.BAIDU]: baiduCloud,
|
||||
[ProviderEnum.FIREWORKS]: fireworks,
|
||||
[ProviderEnum.GEMINI]: gemini,
|
||||
[ProviderEnum.YI]: yi,
|
||||
[ProviderEnum.AI360]: ai360,
|
||||
[ProviderEnum.AZURE]: azure,
|
||||
[ProviderEnum.BAICHUAN]: baichuan,
|
||||
[ProviderEnum.BEDROCK]: bedrock,
|
||||
[ProviderEnum.CLAUDE]: claude,
|
||||
[ProviderEnum.CLOUDFLARE]: cloudflare,
|
||||
[ProviderEnum.COHERE]: cohere,
|
||||
[ProviderEnum.COZE]: coze,
|
||||
[ProviderEnum.DEEPL]: deepl,
|
||||
[ProviderEnum.DEEPSEEK]: deepseek,
|
||||
[ProviderEnum.DIFY]: dify,
|
||||
[ProviderEnum.DOUBAO]: doubao,
|
||||
[ProviderEnum.GROK]: grok,
|
||||
[ProviderEnum.GROQ]: groq,
|
||||
[ProviderEnum.HUNYUAN]: hunyuan,
|
||||
[ProviderEnum.LONGCAT]: longcat,
|
||||
[ProviderEnum.MINIMAX]: minimax,
|
||||
[ProviderEnum.MISTRAL]: mistral,
|
||||
[ProviderEnum.MOONSHOT]: moonshot,
|
||||
[ProviderEnum.OLLAMA]: ollama,
|
||||
[ProviderEnum.OPENAI]: openai,
|
||||
[ProviderEnum.OPENROUTER]: openrouter,
|
||||
[ProviderEnum.QWEN]: qwen,
|
||||
[ProviderEnum.SPARK]: spark,
|
||||
[ProviderEnum.STEPFUN]: stepfun,
|
||||
[ProviderEnum.TOGETHERAI]: togetherai,
|
||||
[ProviderEnum.ZHIPUAI]: zhipuai,
|
||||
[ProviderEnum.GITHUB]: github,
|
||||
[ProviderEnum.TRITON]: triton
|
||||
};
|
||||
|
||||
const ProviderLogo: React.FC<{
|
||||
provider: string;
|
||||
style?: React.CSSProperties;
|
||||
}> = ({ provider, style }) => {
|
||||
const logoSrc = ProviderLogoMap[provider] || '';
|
||||
return (
|
||||
<img
|
||||
src={logoSrc}
|
||||
alt={`${provider} logo`}
|
||||
style={{ width: 16, height: 16, ...style }}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
export default ProviderLogo;
|
||||
@@ -34,11 +34,47 @@ export enum ProviderEnum {
|
||||
ZHIPUAI = 'zhipuai'
|
||||
}
|
||||
|
||||
export const ProviderI18nKeyMap: Record<ProviderEnum, string> = {
|
||||
[ProviderEnum.AI360]: 'ai.provider.ai360',
|
||||
[ProviderEnum.AZURE]: 'ai.provider.azure',
|
||||
[ProviderEnum.BAICHUAN]: 'ai.provider.baichuan',
|
||||
[ProviderEnum.BAIDU]: 'ai.provider.baidu',
|
||||
[ProviderEnum.BEDROCK]: 'ai.provider.bedrock',
|
||||
[ProviderEnum.CLAUDE]: 'ai.provider.claude',
|
||||
[ProviderEnum.CLOUDFLARE]: 'ai.provider.cloudflare',
|
||||
[ProviderEnum.COHERE]: 'ai.provider.cohere',
|
||||
[ProviderEnum.COZE]: 'ai.provider.coze',
|
||||
[ProviderEnum.DEEPL]: 'ai.provider.deepl',
|
||||
[ProviderEnum.DEEPSEEK]: 'ai.provider.deepseek',
|
||||
[ProviderEnum.DIFY]: 'ai.provider.dify',
|
||||
[ProviderEnum.DOUBAO]: 'ai.provider.doubao',
|
||||
[ProviderEnum.FIREWORKS]: 'ai.provider.fireworks',
|
||||
[ProviderEnum.GEMINI]: 'ai.provider.gemini',
|
||||
[ProviderEnum.GITHUB]: 'ai.provider.github',
|
||||
[ProviderEnum.GROK]: 'ai.provider.grok',
|
||||
[ProviderEnum.GROQ]: 'ai.provider.groq',
|
||||
[ProviderEnum.HUNYUAN]: 'ai.provider.hunyuan',
|
||||
[ProviderEnum.LONGCAT]: 'ai.provider.longcat',
|
||||
[ProviderEnum.MINIMAX]: 'ai.provider.minimax',
|
||||
[ProviderEnum.MISTRAL]: 'ai.provider.mistral',
|
||||
[ProviderEnum.MOONSHOT]: 'ai.provider.moonshot',
|
||||
[ProviderEnum.OLLAMA]: 'ai.provider.ollama',
|
||||
[ProviderEnum.OPENAI]: 'ai.provider.openai',
|
||||
[ProviderEnum.OPENROUTER]: 'ai.provider.openrouter',
|
||||
[ProviderEnum.QWEN]: 'ai.provider.qwen',
|
||||
[ProviderEnum.SPARK]: 'ai.provider.spark',
|
||||
[ProviderEnum.STEPFUN]: 'ai.provider.stepfun',
|
||||
[ProviderEnum.TOGETHERAI]: 'ai.provider.together-ai',
|
||||
[ProviderEnum.TRITON]: 'ai.provider.triton',
|
||||
[ProviderEnum.YI]: 'ai.provider.yi',
|
||||
[ProviderEnum.ZHIPUAI]: 'ai.provider.zhipuai'
|
||||
};
|
||||
|
||||
// generate provider list: {label: string;value:string}[]
|
||||
export const maasProviderOptions = Object.entries(ProviderEnum).map(
|
||||
([key, value]) => ({
|
||||
locale: false,
|
||||
label: key,
|
||||
locale: true,
|
||||
label: ProviderI18nKeyMap[value],
|
||||
value: value,
|
||||
key: value
|
||||
})
|
||||
@@ -49,7 +85,7 @@ export const maasProviderLabelMap: Record<string, string> = Object.entries(
|
||||
ProviderEnum
|
||||
).reduce(
|
||||
(acc, [key, value]) => {
|
||||
acc[value] = key;
|
||||
acc[value] = ProviderI18nKeyMap[value];
|
||||
return acc;
|
||||
},
|
||||
{} as Record<string, string>
|
||||
|
||||
@@ -2,12 +2,23 @@ import SealInput from '@/components/seal-form/seal-input';
|
||||
import SealSelect from '@/components/seal-form/seal-select';
|
||||
import { useIntl } from '@umijs/max';
|
||||
import { Form } from 'antd';
|
||||
import ProviderLogo from '../components/provider-logo';
|
||||
import { maasProviderOptions } from '../config/providers';
|
||||
import { FormData } from '../config/types';
|
||||
|
||||
const Basic = () => {
|
||||
const intl = useIntl();
|
||||
const form = Form.useFormInstance<FormData>();
|
||||
|
||||
const optionRender = (option: any) => {
|
||||
return (
|
||||
<div style={{ display: 'flex', alignItems: 'center' }}>
|
||||
<ProviderLogo provider={option.value} />
|
||||
<span style={{ marginLeft: 8 }}>{option.label}</span>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<Form.Item<FormData> name="name" data-field="name">
|
||||
@@ -20,7 +31,10 @@ const Basic = () => {
|
||||
</Form.Item>
|
||||
<Form.Item<FormData> name={['config', 'type']}>
|
||||
<SealSelect
|
||||
showSearch
|
||||
options={maasProviderOptions}
|
||||
optionRender={optionRender}
|
||||
labelRender={optionRender}
|
||||
label={intl.formatMessage({
|
||||
id: 'providers.table.providerName'
|
||||
})}
|
||||
|
||||
@@ -10,6 +10,7 @@ import { useIntl } from '@umijs/max';
|
||||
import { Tag } from 'antd';
|
||||
import dayjs from 'dayjs';
|
||||
import { useMemo } from 'react';
|
||||
import ProviderLogo from '../components/provider-logo';
|
||||
import { maasProviderLabelMap, rowActionList } from '../config';
|
||||
import { MaasProviderItem } from '../config/types';
|
||||
|
||||
@@ -46,8 +47,11 @@ const useProviderColumns = (
|
||||
span: 4,
|
||||
render: (value: string) => (
|
||||
<>
|
||||
<ProviderLogo provider={value} style={{ marginRight: 8 }} />
|
||||
<AutoTooltip ghost minWidth={20}>
|
||||
{maasProviderLabelMap[value]}
|
||||
{maasProviderLabelMap[value]
|
||||
? intl.formatMessage({ id: maasProviderLabelMap[value] })
|
||||
: value}
|
||||
</AutoTooltip>
|
||||
</>
|
||||
)
|
||||
|
||||
Reference in New Issue
Block a user