mirror of
https://github.com/songquanpeng/one-api.git
synced 2025-09-17 09:16:36 +08:00
feat: enhance channel options with tips and descriptions for better user guidance
This commit is contained in:
parent
3e3b8230ac
commit
4375246e24
@ -1,48 +1,60 @@
|
|||||||
export const CHANNEL_OPTIONS = [
|
export const CHANNEL_OPTIONS = [
|
||||||
{ key: 1, text: 'OpenAI', value: 1, color: 'green' },
|
{key: 1, text: 'OpenAI', value: 1, color: 'green'},
|
||||||
{ key: 14, text: 'Anthropic Claude', value: 14, color: 'black' },
|
{key: 14, text: 'Anthropic Claude', value: 14, color: 'black'},
|
||||||
{ key: 33, text: 'AWS', value: 33, color: 'black' },
|
{key: 33, text: 'AWS', value: 33, color: 'black'},
|
||||||
{ key: 3, text: 'Azure OpenAI', value: 3, color: 'olive' },
|
{key: 3, text: 'Azure OpenAI', value: 3, color: 'olive'},
|
||||||
{ key: 11, text: 'Google PaLM2', value: 11, color: 'orange' },
|
{key: 11, text: 'Google PaLM2', value: 11, color: 'orange'},
|
||||||
{ key: 24, text: 'Google Gemini', value: 24, color: 'orange' },
|
{key: 24, text: 'Google Gemini', value: 24, color: 'orange'},
|
||||||
{ key: 28, text: 'Mistral AI', value: 28, color: 'orange' },
|
{key: 28, text: 'Mistral AI', value: 28, color: 'orange'},
|
||||||
{ key: 41, text: 'Novita', value: 41, color: 'purple' },
|
{key: 41, text: 'Novita', value: 41, color: 'purple'},
|
||||||
{key: 40, text: '火山引擎', value: 40, color: 'blue'},
|
{
|
||||||
{ key: 15, text: '百度文心千帆', value: 15, color: 'blue' },
|
key: 40,
|
||||||
{ key: 17, text: '阿里通义千问', value: 17, color: 'orange' },
|
text: '火山引擎',
|
||||||
{ key: 18, text: '讯飞星火认知', value: 18, color: 'blue' },
|
value: 40,
|
||||||
{ key: 16, text: '智谱 ChatGLM', value: 16, color: 'violet' },
|
color: 'blue',
|
||||||
{ key: 19, text: '360 智脑', value: 19, color: 'blue' },
|
description: '原字节跳动豆包',
|
||||||
{ key: 25, text: 'Moonshot AI', value: 25, color: 'black' },
|
},
|
||||||
{ key: 23, text: '腾讯混元', value: 23, color: 'teal' },
|
{
|
||||||
{ key: 26, text: '百川大模型', value: 26, color: 'orange' },
|
key: 15,
|
||||||
{ key: 27, text: 'MiniMax', value: 27, color: 'red' },
|
text: '百度文心千帆',
|
||||||
{ key: 29, text: 'Groq', value: 29, color: 'orange' },
|
value: 15,
|
||||||
{ key: 30, text: 'Ollama', value: 30, color: 'black' },
|
color: 'blue',
|
||||||
{ key: 31, text: '零一万物', value: 31, color: 'green' },
|
tip: '请前往<a href="https://console.bce.baidu.com/qianfan/ais/console/applicationConsole/application/v1" target="_blank">此处</a>获取 AK(API Key)以及 SK(Secret Key)',
|
||||||
{ key: 32, text: '阶跃星辰', value: 32, color: 'blue' },
|
},
|
||||||
{ key: 34, text: 'Coze', value: 34, color: 'blue' },
|
{key: 17, text: '阿里通义千问', value: 17, color: 'orange'},
|
||||||
{ key: 35, text: 'Cohere', value: 35, color: 'blue' },
|
{key: 18, text: '讯飞星火认知', value: 18, color: 'blue'},
|
||||||
{ key: 36, text: 'DeepSeek', value: 36, color: 'black' },
|
{key: 16, text: '智谱 ChatGLM', value: 16, color: 'violet'},
|
||||||
{ key: 37, text: 'Cloudflare', value: 37, color: 'orange' },
|
{key: 19, text: '360 智脑', value: 19, color: 'blue'},
|
||||||
{ key: 38, text: 'DeepL', value: 38, color: 'black' },
|
{key: 25, text: 'Moonshot AI', value: 25, color: 'black'},
|
||||||
{ key: 39, text: 'together.ai', value: 39, color: 'blue' },
|
{key: 23, text: '腾讯混元', value: 23, color: 'teal'},
|
||||||
{ key: 42, text: 'VertexAI', value: 42, color: 'blue' },
|
{key: 26, text: '百川大模型', value: 26, color: 'orange'},
|
||||||
{ key: 43, text: 'Proxy', value: 43, color: 'blue' },
|
{key: 27, text: 'MiniMax', value: 27, color: 'red'},
|
||||||
{ key: 44, text: 'SiliconFlow', value: 44, color: 'blue' },
|
{key: 29, text: 'Groq', value: 29, color: 'orange'},
|
||||||
{ key: 45, text: 'xAI', value: 45, color: 'blue' },
|
{key: 30, text: 'Ollama', value: 30, color: 'black'},
|
||||||
{ key: 46, text: 'Replicate', value: 46, color: 'blue' },
|
{key: 31, text: '零一万物', value: 31, color: 'green'},
|
||||||
{ key: 8, text: '自定义渠道', value: 8, color: 'pink' },
|
{key: 32, text: '阶跃星辰', value: 32, color: 'blue'},
|
||||||
{ key: 22, text: '知识库:FastGPT', value: 22, color: 'blue' },
|
{key: 34, text: 'Coze', value: 34, color: 'blue'},
|
||||||
{ key: 21, text: '知识库:AI Proxy', value: 21, color: 'purple' },
|
{key: 35, text: 'Cohere', value: 35, color: 'blue'},
|
||||||
{ key: 20, text: '代理:OpenRouter', value: 20, color: 'black' },
|
{key: 36, text: 'DeepSeek', value: 36, color: 'black'},
|
||||||
{ key: 2, text: '代理:API2D', value: 2, color: 'blue' },
|
{key: 37, text: 'Cloudflare', value: 37, color: 'orange'},
|
||||||
{ key: 5, text: '代理:OpenAI-SB', value: 5, color: 'brown' },
|
{key: 38, text: 'DeepL', value: 38, color: 'black'},
|
||||||
{ key: 7, text: '代理:OhMyGPT', value: 7, color: 'purple' },
|
{key: 39, text: 'together.ai', value: 39, color: 'blue'},
|
||||||
{ key: 10, text: '代理:AI Proxy', value: 10, color: 'purple' },
|
{key: 42, text: 'VertexAI', value: 42, color: 'blue'},
|
||||||
{ key: 4, text: '代理:CloseAI', value: 4, color: 'teal' },
|
{key: 43, text: 'Proxy', value: 43, color: 'blue'},
|
||||||
{ key: 6, text: '代理:OpenAI Max', value: 6, color: 'violet' },
|
{key: 44, text: 'SiliconFlow', value: 44, color: 'blue'},
|
||||||
{ key: 9, text: '代理:AI.LS', value: 9, color: 'yellow' },
|
{key: 45, text: 'xAI', value: 45, color: 'blue'},
|
||||||
{ key: 12, text: '代理:API2GPT', value: 12, color: 'blue' },
|
{key: 46, text: 'Replicate', value: 46, color: 'blue'},
|
||||||
{ key: 13, text: '代理:AIGC2D', value: 13, color: 'purple' }
|
{key: 8, text: '自定义渠道', value: 8, color: 'pink'},
|
||||||
|
{key: 22, text: '知识库:FastGPT', value: 22, color: 'blue'},
|
||||||
|
{key: 21, text: '知识库:AI Proxy', value: 21, color: 'purple'},
|
||||||
|
{key: 20, text: '代理:OpenRouter', value: 20, color: 'black'},
|
||||||
|
{key: 2, text: '代理:API2D', value: 2, color: 'blue'},
|
||||||
|
{key: 5, text: '代理:OpenAI-SB', value: 5, color: 'brown'},
|
||||||
|
{key: 7, text: '代理:OhMyGPT', value: 7, color: 'purple'},
|
||||||
|
{key: 10, text: '代理:AI Proxy', value: 10, color: 'purple'},
|
||||||
|
{key: 4, text: '代理:CloseAI', value: 4, color: 'teal'},
|
||||||
|
{key: 6, text: '代理:OpenAI Max', value: 6, color: 'violet'},
|
||||||
|
{key: 9, text: '代理:AI.LS', value: 9, color: 'yellow'},
|
||||||
|
{key: 12, text: '代理:API2GPT', value: 12, color: 'blue'},
|
||||||
|
{key: 13, text: '代理:AIGC2D', value: 13, color: 'purple'},
|
||||||
];
|
];
|
||||||
|
13
web/default/src/helpers/helper.js
Normal file
13
web/default/src/helpers/helper.js
Normal file
@ -0,0 +1,13 @@
|
|||||||
|
import {CHANNEL_OPTIONS} from '../constants';
|
||||||
|
|
||||||
|
let channelMap = undefined;
|
||||||
|
|
||||||
|
export function getChannelOption(channelId) {
|
||||||
|
if (channelMap === undefined) {
|
||||||
|
channelMap = {};
|
||||||
|
CHANNEL_OPTIONS.forEach((option) => {
|
||||||
|
channelMap[option.key] = option;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
return channelMap[channelId];
|
||||||
|
}
|
@ -1,5 +1,6 @@
|
|||||||
import { Label } from 'semantic-ui-react';
|
import {Label, Message} from 'semantic-ui-react';
|
||||||
import { useTranslation } from 'react-i18next';
|
import {getChannelOption} from './helper';
|
||||||
|
import React from 'react';
|
||||||
|
|
||||||
export function renderText(text, limit) {
|
export function renderText(text, limit) {
|
||||||
if (text.length > limit) {
|
if (text.length > limit) {
|
||||||
@ -98,3 +99,15 @@ export function renderColorLabel(text) {
|
|||||||
</Label>
|
</Label>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export function renderChannelTip(channelId) {
|
||||||
|
let channel = getChannelOption(channelId);
|
||||||
|
if (channel === undefined || channel.tip === undefined) {
|
||||||
|
return <></>;
|
||||||
|
}
|
||||||
|
return (
|
||||||
|
<Message>
|
||||||
|
<div dangerouslySetInnerHTML={{__html: channel.tip}}></div>
|
||||||
|
</Message>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
@ -1,25 +1,10 @@
|
|||||||
import React, { useEffect, useState } from 'react';
|
import React, {useEffect, useState} from 'react';
|
||||||
import { useTranslation } from 'react-i18next';
|
import {useTranslation} from 'react-i18next';
|
||||||
import {
|
import {Button, Card, Form, Input, Message,} from 'semantic-ui-react';
|
||||||
Button,
|
import {useNavigate, useParams} from 'react-router-dom';
|
||||||
Form,
|
import {API, copy, getChannelModels, showError, showInfo, showSuccess, verifyJSON,} from '../../helpers';
|
||||||
Header,
|
import {CHANNEL_OPTIONS} from '../../constants';
|
||||||
Input,
|
import {renderChannelTip} from '../../helpers/render';
|
||||||
Message,
|
|
||||||
Segment,
|
|
||||||
Card,
|
|
||||||
} from 'semantic-ui-react';
|
|
||||||
import { useNavigate, useParams } from 'react-router-dom';
|
|
||||||
import {
|
|
||||||
API,
|
|
||||||
copy,
|
|
||||||
getChannelModels,
|
|
||||||
showError,
|
|
||||||
showInfo,
|
|
||||||
showSuccess,
|
|
||||||
verifyJSON,
|
|
||||||
} from '../../helpers';
|
|
||||||
import { CHANNEL_OPTIONS } from '../../constants';
|
|
||||||
|
|
||||||
const MODEL_MAPPING_EXAMPLE = {
|
const MODEL_MAPPING_EXAMPLE = {
|
||||||
'gpt-3.5-turbo-0301': 'gpt-3.5-turbo',
|
'gpt-3.5-turbo-0301': 'gpt-3.5-turbo',
|
||||||
@ -310,6 +295,7 @@ const EditChannel = () => {
|
|||||||
options={groupOptions}
|
options={groupOptions}
|
||||||
/>
|
/>
|
||||||
</Form.Field>
|
</Form.Field>
|
||||||
|
{renderChannelTip(inputs.type)}
|
||||||
|
|
||||||
{/* Azure OpenAI specific fields */}
|
{/* Azure OpenAI specific fields */}
|
||||||
{inputs.type === 3 && (
|
{inputs.type === 3 && (
|
||||||
|
Loading…
Reference in New Issue
Block a user