Skip to content

phsl / new-api

Go to a project
Commit f9495e91 by CaIon
Options

更新渠道管理

parent a539b200
Showing with 1247 additions and 1094 deletions
controller/channel-billing.go
...@@ -292,7 +292,7 @@ func UpdateChannelBalance(c *gin.Context) { ...@@ -292,7 +292,7 @@ func UpdateChannelBalance(c *gin.Context) {
} }
func updateAllChannelsBalance() error { func updateAllChannelsBalance() error {
channels, err := model.GetAllChannels(0, 0, true) channels, err := model.GetAllChannels(0, 0, true, false)
if err != nil { if err != nil {
return err return err
} }
......
controller/channel-test.go
...@@ -163,7 +163,7 @@ func testAllChannels(notify bool) error { ...@@ -163,7 +163,7 @@ func testAllChannels(notify bool) error {
} }
testAllChannelsRunning = true testAllChannelsRunning = true
testAllChannelsLock.Unlock() testAllChannelsLock.Unlock()
channels, err := model.GetAllChannels(0, 0, true) channels, err := model.GetAllChannels(0, 0, true, false)
if err != nil { if err != nil {
return err return err
} }
......
controller/channel.go
...@@ -18,7 +18,8 @@ func GetAllChannels(c *gin.Context) { ...@@ -18,7 +18,8 @@ func GetAllChannels(c *gin.Context) {
if pageSize < 0 { if pageSize < 0 {
pageSize = common.ItemsPerPage pageSize = common.ItemsPerPage
} }
channels, err := model.GetAllChannels(p*pageSize, pageSize, false) idSort, _ := strconv.ParseBool(c.Query("id_sort"))
channels, err := model.GetAllChannels(p*pageSize, pageSize, false, idSort)
if err != nil { if err != nil {
c.JSON(http.StatusOK, gin.H{ c.JSON(http.StatusOK, gin.H{
"success": false, "success": false,
...@@ -36,7 +37,9 @@ func GetAllChannels(c *gin.Context) { ...@@ -36,7 +37,9 @@ func GetAllChannels(c *gin.Context) {
func SearchChannels(c *gin.Context) { func SearchChannels(c *gin.Context) {
keyword := c.Query("keyword") keyword := c.Query("keyword")
channels, err := model.SearchChannels(keyword) group := c.Query("group")
//idSort, _ := strconv.ParseBool(c.Query("id_sort"))
channels, err := model.SearchChannels(keyword, group)
if err != nil { if err != nil {
c.JSON(http.StatusOK, gin.H{ c.JSON(http.StatusOK, gin.H{
"success": false, "success": false,
......
model/channel.go
...@@ -28,23 +28,35 @@ type Channel struct { ...@@ -28,23 +28,35 @@ type Channel struct {
AutoBan *int `json:"auto_ban" gorm:"default:1"` AutoBan *int `json:"auto_ban" gorm:"default:1"`
} }
func GetAllChannels(startIdx int, num int, selectAll bool) ([]*Channel, error) { func GetAllChannels(startIdx int, num int, selectAll bool, idSort bool) ([]*Channel, error) {
var channels []*Channel var channels []*Channel
var err error var err error
order := "priority desc"
if idSort {
order = "id desc"
}
if selectAll { if selectAll {
err = DB.Order("priority desc").Find(&channels).Error err = DB.Order(order).Find(&channels).Error
} else { } else {
err = DB.Order("priority desc").Limit(num).Offset(startIdx).Omit("key").Find(&channels).Error err = DB.Order(order).Limit(num).Offset(startIdx).Omit("key").Find(&channels).Error
} }
return channels, err return channels, err
} }
func SearchChannels(keyword string) (channels []*Channel, err error) { func SearchChannels(keyword string, group string) (channels []*Channel, err error) {
keyCol := "`key`" keyCol := "`key`"
if common.UsingPostgreSQL { if common.UsingPostgreSQL {
keyCol = `"key"` keyCol = `"key"`
} }
err = DB.Omit("key").Where("id = ? or name LIKE ? or "+keyCol+" = ?", common.String2Int(keyword), keyword+"%", keyword).Find(&channels).Error if group != "" {
groupCol := "`group`"
if common.UsingPostgreSQL {
groupCol = `"group"`
}
err = DB.Omit("key").Where("(id = ? or name LIKE ? or "+keyCol+" = ?) and "+groupCol+" LIKE ?", common.String2Int(keyword), keyword+"%", keyword, "%"+group+"%").Find(&channels).Error
} else {
err = DB.Omit("key").Where("id = ? or name LIKE ? or "+keyCol+" = ?", common.String2Int(keyword), keyword+"%", keyword).Find(&channels).Error
}
return channels, err return channels, err
} }
......
web/src/components/ChannelsTable.js
import React, { useEffect, useState } from 'react'; import React, {useEffect, useState} from 'react';
import { Button, Form, Input, Label, Message, Pagination, Popup, Table } from 'semantic-ui-react'; import {Input, Label, Message, Popup} from 'semantic-ui-react';
import { Link } from 'react-router-dom'; import {Link} from 'react-router-dom';
import { API, setPromptShown, shouldShowPrompt, showError, showInfo, showSuccess, timestamp2string } from '../helpers'; import {API, setPromptShown, shouldShowPrompt, showError, showInfo, showSuccess, timestamp2string} from '../helpers';
import { CHANNEL_OPTIONS, ITEMS_PER_PAGE } from '../constants'; import {CHANNEL_OPTIONS, ITEMS_PER_PAGE} from '../constants';
import {renderGroup, renderNumber, renderQuota} from '../helpers/render'; import {renderGroup, renderNumber, renderQuota, renderQuotaWithPrompt} from '../helpers/render';
import {
Avatar,
Tag,
Table,
Button,
Popover,
Form,
Modal,
Popconfirm,
Space,
Tooltip,
Switch,
Typography, InputNumber
} from "@douyinfe/semi-ui";
import EditChannel from "../pages/Channel/EditChannel";
function renderTimestamp(timestamp) { function renderTimestamp(timestamp) {
return ( return (
<> <>
{timestamp2string(timestamp)} {timestamp2string(timestamp)}
</> </>
); );
} }
let type2label = undefined; let type2label = undefined;
function renderType(type) { function renderType(type) {
if (!type2label) { if (!type2label) {
type2label = new Map; type2label = new Map;
for (let i = 0; i < CHANNEL_OPTIONS.length; i++) { for (let i = 0; i < CHANNEL_OPTIONS.length; i++) {
type2label[CHANNEL_OPTIONS[i].value] = CHANNEL_OPTIONS[i]; type2label[CHANNEL_OPTIONS[i].value] = CHANNEL_OPTIONS[i];
}
type2label[0] = {value: 0, text: '未知类型', color: 'grey'};
} }
type2label[0] = { value: 0, text: '未知类型', color: 'grey' }; return <Tag size='large' color={type2label[type]?.color}>{type2label[type]?.text}</Tag>;
}
return <Label basic color={type2label[type]?.color}>{type2label[type]?.text}</Label>;
} }
function renderBalance(type, balance) { function renderBalance(type, balance) {
switch (type) { switch (type) {
case 1: // OpenAI case 1: // OpenAI
return <span>${balance.toFixed(2)}</span>; return <span>${balance.toFixed(2)}</span>;
case 4: // CloseAI case 4: // CloseAI
return <span>¥{balance.toFixed(2)}</span>; return <span>¥{balance.toFixed(2)}</span>;
case 8: // 自定义 case 8: // 自定义
return <span>${balance.toFixed(2)}</span>; return <span>${balance.toFixed(2)}</span>;
case 5: // OpenAI-SB case 5: // OpenAI-SB
return <span>¥{(balance / 10000).toFixed(2)}</span>; return <span>¥{(balance / 10000).toFixed(2)}</span>;
case 10: // AI Proxy case 10: // AI Proxy
return <span>{renderNumber(balance)}</span>; return <span>{renderNumber(balance)}</span>;
case 12: // API2GPT case 12: // API2GPT
return <span>¥{balance.toFixed(2)}</span>; return <span>¥{balance.toFixed(2)}</span>;
case 13: // AIGC2D case 13: // AIGC2D
return <span>{renderNumber(balance)}</span>; return <span>{renderNumber(balance)}</span>;
default: default:
return <span>不支持</span>; return <span>不支持</span>;
} }
} }
const ChannelsTable = () => { const ChannelsTable = () => {
const [channels, setChannels] = useState([]); const columns = [
const [loading, setLoading] = useState(true); {
const [activePage, setActivePage] = useState(1); title: 'ID',
const [searchKeyword, setSearchKeyword] = useState(''); dataIndex: 'id',
const [searching, setSearching] = useState(false); },
const [updatingBalance, setUpdatingBalance] = useState(false); {
const [pageSize, setPageSize] = useState(ITEMS_PER_PAGE); title: '名称',
const [showPrompt, setShowPrompt] = useState(shouldShowPrompt("channel-test")); dataIndex: 'name',
},
const loadChannels = async (startIdx) => { {
const res = await API.get(`/api/channel/?p=${startIdx}&page_size=${pageSize}`); title: '分组',
const { success, message, data } = res.data; dataIndex: 'group',
if (success) { render: (text, record, index) => {
if (startIdx === 0) { return (
setChannels(data); <div>
} else { <Space spacing={2}>
let newChannels = [...channels]; {
newChannels.splice(startIdx * pageSize, data.length, ...data); text.split(',').map((item, index) => {
setChannels(newChannels); return (renderGroup(item))
} })
} else { }
showError(message); </Space>
} </div>
setLoading(false); );
}; },
},
const onPaginationChange = (e, { activePage }) => { {
(async () => { title: '类型',
if (activePage === Math.ceil(channels.length / pageSize) + 1) { dataIndex: 'type',
// In this case we have to load more data and then append them. render: (text, record, index) => {
await loadChannels(activePage - 1, pageSize); return (
} <div>
setActivePage(activePage); {renderType(text)}
})(); </div>
}; );
},
const setItemsPerPage = (e) => { },
console.log(e.target.value); {
//parseInt(e.target.value); title: '状态',
setPageSize(parseInt(e.target.value)); dataIndex: 'status',
loadChannels(0); render: (text, record, index) => {
} return (
<div>
const refresh = async () => { {renderStatus(text)}
setLoading(true); </div>
await loadChannels(activePage - 1); );
}; },
},
useEffect(() => { {
loadChannels(0) title: '响应时间',
.then() dataIndex: 'response_time',
.catch((reason) => { render: (text, record, index) => {
showError(reason); return (
}); <div>
}, []); {renderResponseTime(text)}
</div>
const manageChannel = async (id, action, idx, value) => { );
let data = { id }; },
let res; },
switch (action) { {
case 'delete': title: '已用/剩余',
res = await API.delete(`/api/channel/${id}/`); dataIndex: 'expired_time',
break; render: (text, record, index) => {
case 'enable': return (
data.status = 1; <div>
res = await API.put('/api/channel/', data); <Space spacing={1}>
break; <Tooltip content={'已用额度'}>
case 'disable': <Tag color='white' type='ghost' size='large'>{renderQuota(record.used_quota)}</Tag>
data.status = 2; </Tooltip>
res = await API.put('/api/channel/', data); <Tooltip content={'剩余额度，点击更新'}>
break; <Tag color='white' type='ghost' size='large' onClick={() => {updateChannelBalance(record)}}>{renderQuota(record.balance)}</Tag>
case 'priority': </Tooltip>
if (value === '') { </Space>
return; </div>
);
},
},
{
title: '优先级',
dataIndex: 'priority',
render: (text, record, index) => {
return (
<div>
<InputNumber
style={{width: 70}}
name='name'
onChange={value => {
manageChannel(record.id, 'priority', record, value);
}}
defaultValue={record.priority}
min={0}
/>
</div>
);
},
},
{
title: '',
dataIndex: 'operate',
render: (text, record, index) => (
<div>
<Popconfirm
title="确定是否要删除此渠道？"
content="此修改将不可逆"
okType={'danger'}
position={'left'}
onConfirm={() => {
manageChannel(record.id, 'delete', record).then(
() => {
removeRecord(record.id);
}
)
}}
>
<Button theme='light' type='danger' style={{marginRight: 1}}>删除</Button>
</Popconfirm>
{
record.status === 1 ?
<Button theme='light' type='warning' style={{marginRight: 1}} onClick={
async () => {
manageChannel(
record.id,
'disable',
record
)
}
}>禁用</Button> :
<Button theme='light' type='secondary' style={{marginRight: 1}} onClick={
async () => {
manageChannel(
record.id,
'enable',
record
);
}
}>启用</Button>
}
<Button theme='light' type='tertiary' style={{marginRight: 1}} onClick={
() => {
setEditingChannel(record);
setShowEdit(true);
}
}>编辑</Button>
</div>
),
},
];
const [channels, setChannels] = useState([]);
const [loading, setLoading] = useState(true);
const [activePage, setActivePage] = useState(1);
const [idSort, setIdSort] = useState(false);
const [searchKeyword, setSearchKeyword] = useState('');
const [searchGroup, setSearchGroup] = useState('');
const [searching, setSearching] = useState(false);
const [updatingBalance, setUpdatingBalance] = useState(false);
const [pageSize, setPageSize] = useState(ITEMS_PER_PAGE);
const [showPrompt, setShowPrompt] = useState(shouldShowPrompt("channel-test"));
const [channelCount, setChannelCount] = useState(pageSize);
const [groupOptions, setGroupOptions] = useState([]);
const [showEdit, setShowEdit] = useState(false);
const [editingChannel, setEditingChannel] = useState({
id: undefined,
});
const removeRecord = id => {
let newDataSource = [...channels];
if (id != null) {
let idx = newDataSource.findIndex(data => data.id === id);
if (idx > -1) {
newDataSource.splice(idx, 1);
setChannels(newDataSource);
}
} }
data.priority = parseInt(value); };
res = await API.put('/api/channel/', data);
break; const setChannelFormat = (channels) => {
case 'weight': for (let i = 0; i < channels.length; i++) {
if (value === '') { channels[i].key = '' + channels[i].id;
return;
} }
data.weight = parseInt(value); // data.key = '' + data.id
if (data.weight < 0) { setChannels(channels);
data.weight = 0; if (channels.length >= pageSize) {
setChannelCount(channels.length + pageSize);
} else {
setChannelCount(channels.length);
} }
res = await API.put('/api/channel/', data);
break;
}
const { success, message } = res.data;
if (success) {
showSuccess('操作成功完成！');
let channel = res.data.data;
let newChannels = [...channels];
let realIdx = (activePage - 1) * pageSize + idx;
if (action === 'delete') {
newChannels[realIdx].deleted = true;
} else {
newChannels[realIdx].status = channel.status;
}
setChannels(newChannels);
} else {
showError(message);
} }
};
const loadChannels = async (startIdx) => {
const renderStatus = (status) => { setLoading(true);
switch (status) { const res = await API.get(`/api/channel/?p=${startIdx}&page_size=${pageSize}&id_sort=${idSort}`);
case 1: const {success, message, data} = res.data;
return <Label basic color='green'>已启用</Label>; if (success) {
case 2: if (startIdx === 0) {
return ( setChannelFormat(data);
<Popup } else {
trigger={<Label basic color='red'> let newChannels = [...channels];
已禁用 newChannels.splice(startIdx * pageSize, data.length, ...data);
</Label>} setChannelFormat(newChannels);
content='本渠道被手动禁用' }
basic } else {
/> showError(message);
); }
case 3: setLoading(false);
return ( };
<Popup
trigger={<Label basic color='yellow'> useEffect(() => {
已禁用 loadChannels(0)
</Label>} .then()
content='本渠道被程序自动禁用' .catch((reason) => {
basic showError(reason);
/> });
); }, [pageSize]);
default:
return ( const refresh = async () => {
<Label basic color='grey'> await loadChannels(activePage - 1);
未知状态 };
</Label>
); useEffect(() => {
} loadChannels(0)
}; .then()
.catch((reason) => {
const renderResponseTime = (responseTime) => { showError(reason);
let time = responseTime / 1000; });
time = time.toFixed(2) + ' 秒'; fetchGroups().then();
if (responseTime === 0) { console.log(localStorage.getItem('id-sort'))
return <Label basic color='grey'>未测试</Label>; if (localStorage.getItem('id-sort') === 'true') {
} else if (responseTime <= 1000) { setIdSort(true)
return <Label basic color='green'>{time}</Label>; }
} else if (responseTime <= 3000) { }, []);
return <Label basic color='olive'>{time}</Label>;
} else if (responseTime <= 5000) { useEffect(() => {
return <Label basic color='yellow'>{time}</Label>; searchChannels()
} else { }, [searchGroup]);
return <Label basic color='red'>{time}</Label>;
} useEffect(() => {
}; refresh()
localStorage.setItem('id-sort', idSort + '');
const searchChannels = async () => { }, [idSort]);
if (searchKeyword === '') {
// if keyword is blank, load files instead. const manageChannel = async (id, action, record, value) => {
await loadChannels(0); let data = {id};
setActivePage(1); let res;
return; switch (action) {
} case 'delete':
setSearching(true); res = await API.delete(`/api/channel/${id}/`);
const res = await API.get(`/api/channel/search?keyword=${searchKeyword}`); break;
const { success, message, data } = res.data; case 'enable':
if (success) { data.status = 1;
setChannels(data); res = await API.put('/api/channel/', data);
setActivePage(1); break;
} else { case 'disable':
showError(message); data.status = 2;
} res = await API.put('/api/channel/', data);
setSearching(false); break;
}; case 'priority':
if (value === '') {
const testChannel = async (id, name, idx) => { return;
const res = await API.get(`/api/channel/test/${id}/`); }
const { success, message, time } = res.data; data.priority = parseInt(value);
if (success) { res = await API.put('/api/channel/', data);
let newChannels = [...channels]; break;
let realIdx = (activePage - 1) * pageSize + idx; case 'weight':
newChannels[realIdx].response_time = time * 1000; if (value === '') {
newChannels[realIdx].test_time = Date.now() / 1000; return;
setChannels(newChannels); }
showInfo(`通道 ${name} 测试成功，耗时 ${time.toFixed(2)} 秒。`); data.weight = parseInt(value);
} else { if (data.weight < 0) {
showError(message); data.weight = 0;
} }
}; res = await API.put('/api/channel/', data);
break;
const testAllChannels = async () => { }
const res = await API.get(`/api/channel/test`); const {success, message} = res.data;
const { success, message } = res.data; if (success) {
if (success) { showSuccess('操作成功完成！');
showInfo('已成功开始测试所有已启用通道，请刷新页面查看结果。'); let channel = res.data.data;
} else { let newChannels = [...channels];
showError(message); if (action === 'delete') {
}
}; } else {
record.status = channel.status;
const deleteAllDisabledChannels = async () => { }
const res = await API.delete(`/api/channel/disabled`); setChannels(newChannels);
const { success, message, data } = res.data; } else {
if (success) { showError(message);
showSuccess(`已删除所有禁用渠道，共计 ${data} 个`); }
await refresh(); };
} else {
showError(message); const renderStatus = (status) => {
} switch (status) {
}; case 1:
return <Tag size='large' color='green'>已启用</Tag>;
const updateChannelBalance = async (id, name, idx) => { case 2:
const res = await API.get(`/api/channel/update_balance/${id}/`); return (
const { success, message, balance } = res.data;
if (success) {
let newChannels = [...channels];
let realIdx = (activePage - 1) * pageSize + idx;
newChannels[realIdx].balance = balance;
newChannels[realIdx].balance_updated_time = Date.now() / 1000;
setChannels(newChannels);
showInfo(`通道 ${name} 余额更新成功！`);
} else {
showError(message);
}
};
const updateAllChannelsBalance = async () => {
setUpdatingBalance(true);
const res = await API.get(`/api/channel/update_balance`);
const { success, message } = res.data;
if (success) {
showInfo('已更新完毕所有已启用通道余额！');
} else {
showError(message);
}
setUpdatingBalance(false);
};
const handleKeywordChange = async (e, { value }) => {
setSearchKeyword(value.trim());
};
const sortChannel = (key) => {
if (channels.length === 0) return;
setLoading(true);
let sortedChannels = [...channels];
if (typeof sortedChannels[0][key] === 'string') {
sortedChannels.sort((a, b) => {
return ('' + a[key]).localeCompare(b[key]);
});
} else {
sortedChannels.sort((a, b) => {
if (a[key] === b[key]) return 0;
if (a[key] > b[key]) return -1;
if (a[key] < b[key]) return 1;
});
}
if (sortedChannels[0].id === channels[0].id) {
sortedChannels.reverse();
}
setChannels(sortedChannels);
setLoading(false);
};
return (
<>
<Form onSubmit={searchChannels}>
<Form.Input
icon='search'
fluid
iconPosition='left'
placeholder='搜索渠道的 ID，名称和密钥 ...'
value={searchKeyword}
loading={searching}
onChange={handleKeywordChange}
/>
</Form>
{
showPrompt && (
<Message onDismiss={() => {
setShowPrompt(false);
setPromptShown("channel-test");
}}>
当前版本测试是通过按照 OpenAI API 格式使用 gpt-3.5-turbo
模型进行非流式请求实现的，因此测试报错并不一定代表通道不可用，该功能后续会修复。
另外，OpenAI 渠道已经不再支持通过 key 获取余额，因此余额显示为 0。对于支持的渠道类型，请点击余额进行刷新。
</Message>
)
}
<Table basic compact size='small'>
<Table.Header>
<Table.Row>
<Table.HeaderCell
style={{ cursor: 'pointer' }}
onClick={() => {
sortChannel('id');
}}
>
ID
</Table.HeaderCell>
<Table.HeaderCell
style={{ cursor: 'pointer' }}
onClick={() => {
sortChannel('name');
}}
>
名称
</Table.HeaderCell>
<Table.HeaderCell
style={{ cursor: 'pointer' }}
onClick={() => {
sortChannel('group');
}}
width={1}
>
分组
</Table.HeaderCell>
<Table.HeaderCell
style={{ cursor: 'pointer' }}
onClick={() => {
sortChannel('type');
}}
width={2}
>
类型
</Table.HeaderCell>
<Table.HeaderCell
style={{ cursor: 'pointer' }}
onClick={() => {
sortChannel('status');
}}
width={2}
>
状态
</Table.HeaderCell>
<Table.HeaderCell
style={{ cursor: 'pointer' }}
onClick={() => {
sortChannel('response_time');
}}
>
响应时间
</Table.HeaderCell>
<Table.HeaderCell
style={{ cursor: 'pointer' }}
onClick={() => {
sortChannel('used_quota');
}}
width={1}
>
已使用
</Table.HeaderCell>
<Table.HeaderCell
style={{ cursor: 'pointer' }}
onClick={() => {
sortChannel('balance');
}}
>
余额
</Table.HeaderCell>
<Table.HeaderCell
style={{ cursor: 'pointer' }}
onClick={() => {
sortChannel('priority');
}}
>
优先级
</Table.HeaderCell>
<Table.HeaderCell>操作</Table.HeaderCell>
</Table.Row>
</Table.Header>
<Table.Body>
{channels
.slice(
(activePage - 1) * pageSize,
activePage * pageSize
)
.map((channel, idx) => {
if (channel.deleted) return <></>;
return (
<Table.Row key={channel.id}>
<Table.Cell>{channel.id}</Table.Cell>
<Table.Cell>{channel.name ? channel.name : '无'}</Table.Cell>
<Table.Cell>{renderGroup(channel.group)}</Table.Cell>
<Table.Cell>{renderType(channel.type)}</Table.Cell>
<Table.Cell>{renderStatus(channel.status)}</Table.Cell>
<Table.Cell>
<Popup
content={channel.test_time ? renderTimestamp(channel.test_time) : '未测试'}
key={channel.id}
trigger={renderResponseTime(channel.response_time)}
basic
/>
</Table.Cell>
<Table.Cell>{renderQuota(channel.used_quota)}</Table.Cell>
<Table.Cell>
<Popup <Popup
trigger={<span onClick={() => { trigger={<Tag size='large' color='red'>
updateChannelBalance(channel.id, channel.name, idx); 已禁用
}} style={{ cursor: 'pointer' }}> </Tag>}
{renderBalance(channel.type, channel.balance)} content='本渠道被手动禁用'
</span>} basic
content='点击更新'
basic
/> />
</Table.Cell> );
<Table.Cell> case 3:
return (
<Popup <Popup
trigger={<Input type='number' defaultValue={channel.priority} onBlur={(event) => { trigger={<Tag size='large' color='yellow'>
manageChannel( 已禁用
channel.id, </Tag>}
'priority', content='本渠道被程序自动禁用'
idx, basic
event.target.value
);
}}>
<input style={{ maxWidth: '60px' }} />
</Input>}
content='渠道选择优先级，越高越优先'
basic
/> />
</Table.Cell> );
<Table.Cell> default:
<div> return (
<Button <Tag size='large' color='grey'>
size={'small'} 未知状态
positive </Tag>
onClick={() => { );
testChannel(channel.id, channel.name, idx); }
}} };
>
测试 const renderResponseTime = (responseTime) => {
</Button> let time = responseTime / 1000;
<Popup time = time.toFixed(2) + ' 秒';
trigger={ if (responseTime === 0) {
<Button size='small' negative> return <Tag size='large' color='grey'>未测试</Tag>;
删除 } else if (responseTime <= 1000) {
</Button> return <Tag size='large' color='green'>{time}</Tag>;
} } else if (responseTime <= 3000) {
on='click' return <Tag size='large' color='lime'>{time}</Tag>;
flowing } else if (responseTime <= 5000) {
hoverable return <Tag size='large' color='yellow'>{time}</Tag>;
> } else {
<Button return <Tag size='large' color='red'>{time}</Tag>;
negative }
onClick={() => { };
manageChannel(channel.id, 'delete', idx);
}} const searchChannels = async () => {
> if (searchKeyword === '' && searchGroup === '') {
删除渠道 {channel.name} // if keyword is blank, load files instead.
</Button> await loadChannels(0);
</Popup> setActivePage(1);
<Button return;
size={'small'} }
onClick={() => { setSearching(true);
manageChannel( const res = await API.get(`/api/channel/search?keyword=${searchKeyword}&group=${searchGroup}`);
channel.id, const {success, message, data} = res.data;
channel.status === 1 ? 'disable' : 'enable', if (success) {
idx setChannels(data);
); setActivePage(1);
}} } else {
> showError(message);
{channel.status === 1 ? '禁用' : '启用'} }
</Button> setSearching(false);
<Button };
size={'small'}
as={Link} const testChannel = async (id, name, idx) => {
to={'/channel/edit/' + channel.id} const res = await API.get(`/api/channel/test/${id}/`);
> const {success, message, time} = res.data;
编辑 if (success) {
</Button> let newChannels = [...channels];
</div> let realIdx = (activePage - 1) * pageSize + idx;
</Table.Cell> newChannels[realIdx].response_time = time * 1000;
</Table.Row> newChannels[realIdx].test_time = Date.now() / 1000;
); setChannels(newChannels);
})} showInfo(`通道 ${name} 测试成功，耗时 ${time.toFixed(2)} 秒。`);
</Table.Body> } else {
showError(message);
<Table.Footer> }
<Table.Row> };
<Table.HeaderCell colSpan='10'>
<Button size='small' as={Link} to='/channel/add' loading={loading}> const testAllChannels = async () => {
添加新的渠道 const res = await API.get(`/api/channel/test`);
</Button> const {success, message} = res.data;
<Button size='small' loading={loading} onClick={testAllChannels}> if (success) {
测试所有已启用通道 showInfo('已成功开始测试所有已启用通道，请刷新页面查看结果。');
</Button> } else {
<Button size='small' onClick={updateAllChannelsBalance} showError(message);
loading={loading || updatingBalance}>更新所有已启用通道余额</Button> }
};
<div style={{ float: 'right' }}>
<div className="ui labeled input" style={{marginRight: '10px'}}> const deleteAllDisabledChannels = async () => {
<div className="ui label">每页数量</div> const res = await API.delete(`/api/channel/disabled`);
<Input type="number" style={{width: '70px'}} defaultValue={ITEMS_PER_PAGE} onBlur={setItemsPerPage}></Input> const {success, message, data} = res.data;
if (success) {
showSuccess(`已删除所有禁用渠道，共计 ${data} 个`);
await refresh();
} else {
showError(message);
}
};
const updateChannelBalance = async (record) => {
const res = await API.get(`/api/channel/update_balance/${record.id}/`);
const {success, message, balance} = res.data;
if (success) {
record.balance = balance;
record.balance_updated_time = Date.now() / 1000;
showInfo(`通道 ${record.name} 余额更新成功！`);
} else {
showError(message);
}
};
const updateAllChannelsBalance = async () => {
setUpdatingBalance(true);
const res = await API.get(`/api/channel/update_balance`);
const {success, message} = res.data;
if (success) {
showInfo('已更新完毕所有已启用通道余额！');
} else {
showError(message);
}
setUpdatingBalance(false);
};
const sortChannel = (key) => {
if (channels.length === 0) return;
setLoading(true);
let sortedChannels = [...channels];
if (typeof sortedChannels[0][key] === 'string') {
sortedChannels.sort((a, b) => {
return ('' + a[key]).localeCompare(b[key]);
});
} else {
sortedChannels.sort((a, b) => {
if (a[key] === b[key]) return 0;
if (a[key] > b[key]) return -1;
if (a[key] < b[key]) return 1;
});
}
if (sortedChannels[0].id === channels[0].id) {
sortedChannels.reverse();
}
setChannels(sortedChannels);
setLoading(false);
};
let pageData = channels.slice((activePage - 1) * pageSize, activePage * pageSize);
const handlePageChange = page => {
setActivePage(page);
if (page === Math.ceil(channels.length / pageSize) + 1) {
// In this case we have to load more data and then append them.
loadChannels(page - 1).then(r => {
});
}
};
const fetchGroups = async () => {
try {
let res = await API.get(`/api/group/`);
// add 'all' option
// res.data.data.unshift('all');
setGroupOptions(res.data.data.map((group) => ({
label: group,
value: group,
})));
} catch (error) {
showError(error.message);
}
};
const closeEdit = () => {
setShowEdit(false);
}
const handleRow = (record, index) => {
if (record.status !== 1) {
return {
style: {
background: 'var(--semi-color-disabled-border)',
},
};
} else {
return {};
}
};
return (
<>
<EditChannel refresh={refresh} visible={showEdit} handleClose={closeEdit} editingChannel={editingChannel}/>
<Form onSubmit={searchChannels} labelPosition='left'>
<div style={{display: 'flex'}}>
<Space>
<Form.Input
field='search'
label='关键词'
placeholder='ID，名称和密钥 ...'
value={searchKeyword}
loading={searching}
onChange={(v)=>{
setSearchKeyword(v.trim())
}}
/>
<Form.Select field="group" label='分组' optionList={groupOptions} onChange={(v) => {
setSearchGroup(v)
}}/>
</Space>
</div> </div>
<Pagination </Form>
activePage={activePage} <div style={{marginTop: 10, display: 'flex'}}>
onPageChange={onPaginationChange} <Space>
size='small' <Typography.Text strong>使用ID排序</Typography.Text>
siblingRange={1} <Switch checked={idSort} label='使用ID排序' uncheckedText="关" aria-label="是否用ID排序" onChange={(v) => {
totalPages={ setIdSort(v)
Math.ceil(channels.length / pageSize) + }}></Switch>
(channels.length % pageSize === 0 ? 1 : 0) </Space>
} </div>
/>
</div> <Table columns={columns} dataSource={pageData} pagination={{
<Popup currentPage: activePage,
trigger={ pageSize: pageSize,
<Button size='small' loading={loading}> total: channelCount,
删除禁用渠道 pageSizeOpts: [10, 20, 50, 100],
</Button> showSizeChanger: true,
} onPageSizeChange: (size) => {
on='click' setPageSize(size)
flowing setActivePage(1)
hoverable },
> onPageChange: handlePageChange,
<Button size='small' loading={loading} negative onClick={deleteAllDisabledChannels}> }} loading={loading} onRow={handleRow}/>
确认删除 <div style={{display: 'flex'}}>
</Button> <Space>
</Popup> <Button theme='light' type='primary' style={{marginRight: 8}} onClick={
<Button size='small' onClick={refresh} loading={loading}>刷新</Button> () => {
setEditingChannel({
</Table.HeaderCell> id: undefined,
</Table.Row> });
</Table.Footer> setShowEdit(true)
</Table> }
</> }>添加渠道</Button>
); <Popconfirm
title="确定？"
okType={'warning'}
onConfirm={testAllChannels}
>
<Button theme='light' type='warning' style={{marginRight: 8}}>测试所有已启用通道</Button>
</Popconfirm>
<Popconfirm
title="确定？"
okType={'secondary'}
onConfirm={updateAllChannelsBalance}
>
<Button theme='light' type='secondary' style={{marginRight: 8}}>更新所有已启用通道余额</Button>
</Popconfirm>
<Popconfirm
title="确定是否要删除禁用通道？"
content="此修改将不可逆"
okType={'danger'}
onConfirm={deleteAllDisabledChannels}
>
<Button theme='light' type='danger' style={{marginRight: 8}}>删除禁用通道</Button>
</Popconfirm>
<Button theme='light' type='primary' style={{marginRight: 8}} onClick={refresh}>刷新</Button>
</Space>
</div>
</>
);
}; };
export default ChannelsTable; export default ChannelsTable;
web/src/components/RedemptionsTable.js
...@@ -164,11 +164,24 @@ const RedemptionsTable = () => { ...@@ -164,11 +164,24 @@ const RedemptionsTable = () => {
setShowEdit(false); setShowEdit(false);
} }
const setCount = (data) => { // const setCount = (data) => {
if (data.length >= (activePage) * ITEMS_PER_PAGE) { // if (data.length >= (activePage) * ITEMS_PER_PAGE) {
setTokenCount(data.length + 1); // setTokenCount(data.length + 1);
// } else {
// setTokenCount(data.length);
// }
// }
const setRedemptionFormat = (redeptions) => {
for (let i = 0; i < redeptions.length; i++) {
redeptions[i].key = '' + redeptions[i].id;
}
// data.key = '' + data.id
setRedemptions(redeptions);
if (redeptions.length >= (activePage) * ITEMS_PER_PAGE) {
setTokenCount(redeptions.length + 1);
} else { } else {
setTokenCount(data.length); setTokenCount(redeptions.length);
} }
} }
...@@ -177,13 +190,11 @@ const RedemptionsTable = () => { ...@@ -177,13 +190,11 @@ const RedemptionsTable = () => {
const {success, message, data} = res.data; const {success, message, data} = res.data;
if (success) { if (success) {
if (startIdx === 0) { if (startIdx === 0) {
setRedemptions(data); setRedemptionFormat(data);
setCount(data);
} else { } else {
let newRedemptions = redemptions; let newRedemptions = redemptions;
newRedemptions.push(...data); newRedemptions.push(...data);
setRedemptions(newRedemptions); setRedemptionFormat(newRedemptions);
setCount(newRedemptions);
} }
} else { } else {
showError(message); showError(message);
......
web/src/constants/channel.constants.js
export const CHANNEL_OPTIONS = [ export const CHANNEL_OPTIONS = [
{ key: 1, text: 'OpenAI', value: 1, color: 'green' }, { key: 1, text: 'OpenAI', value: 1, color: 'green', label: 'OpenAI' },
{ key: 99, text: 'Midjourney-Proxy', value: 99, color: 'green' }, { key: 24, text: 'Midjourney Proxy', value: 24, color: 'light-blue', label: 'Midjourney Proxy' },
{ key: 14, text: 'Anthropic Claude', value: 14, color: 'black' }, { key: 14, text: 'Anthropic Claude', value: 14, color: 'black', label: 'Anthropic Claude' },
{ key: 3, text: 'Azure OpenAI', value: 3, color: 'olive' }, { key: 3, text: 'Azure OpenAI', value: 3, color: 'olive', label: 'Azure OpenAI' },
{ key: 11, text: 'Google PaLM2', value: 11, color: 'orange' }, { key: 11, text: 'Google PaLM2', value: 11, color: 'orange', label: 'Google PaLM2' },
{ key: 15, text: '百度文心千帆', value: 15, color: 'blue' }, { key: 15, text: '百度文心千帆', value: 15, color: 'blue', label: '百度文心千帆' },
{ key: 17, text: '阿里通义千问', value: 17, color: 'orange' }, { key: 17, text: '阿里通义千问', value: 17, color: 'orange', label: '阿里通义千问' },
{ key: 18, text: '讯飞星火认知', value: 18, color: 'blue' }, { key: 18, text: '讯飞星火认知', value: 18, color: 'blue', label: '讯飞星火认知' },
{ key: 16, text: '智谱 ChatGLM', value: 16, color: 'violet' }, { key: 16, text: '智谱 ChatGLM', value: 16, color: 'violet', label: '智谱 ChatGLM' },
{ key: 19, text: '360 智脑', value: 19, color: 'blue' }, { key: 19, text: '360 智脑', value: 19, color: 'blue', label: '360 智脑' },
{ key: 23, text: '腾讯混元', value: 23, color: 'teal' }, { key: 23, text: '腾讯混元', value: 23, color: 'teal', label: '腾讯混元' },
{ key: 8, text: '自定义渠道', value: 8, color: 'pink' }, { key: 8, text: '自定义渠道', value: 8, color: 'pink', label: '自定义渠道' },
{ key: 22, text: '知识库：FastGPT', value: 22, color: 'blue' }, { key: 22, text: '知识库：FastGPT', value: 22, color: 'blue', label: '知识库：FastGPT' },
{ key: 21, text: '知识库：AI Proxy', value: 21, color: 'purple' }, { key: 21, text: '知识库：AI Proxy', value: 21, color: 'purple', label: '知识库：AI Proxy' },
{ 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' }
];
\ No newline at end of file
web/src/pages/Channel/EditChannel.js
import React, { useEffect, useState } from 'react'; import React, {useEffect, useRef, useState} from 'react';
import { Button, Form, Header, Input, Message, Segment } from 'semantic-ui-react'; import {useNavigate, useParams} from 'react-router-dom';
import { useNavigate, useParams } from 'react-router-dom'; import {API, isMobile, showError, showInfo, showSuccess, verifyJSON} from '../../helpers';
import { API, showError, showInfo, showSuccess, verifyJSON } from '../../helpers'; import {CHANNEL_OPTIONS} from '../../constants';
import { CHANNEL_OPTIONS } from '../../constants'; import Title from "@douyinfe/semi-ui/lib/es/typography/title";
import {SideSheet, Space, Spin, Button, Input, Typography, Select, TextArea, Checkbox, Banner} from "@douyinfe/semi-ui";
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',
'gpt-4-0314': 'gpt-4', 'gpt-4-0314': 'gpt-4',
'gpt-4-32k-0314': 'gpt-4-32k' 'gpt-4-32k-0314': 'gpt-4-32k'
}; };
function type2secretPrompt(type) { function type2secretPrompt(type) {
// inputs.type === 15 ? '按照如下格式输入：APIKey|SecretKey' : (inputs.type === 18 ? '按照如下格式输入：APPID|APISecret|APIKey' : '请输入渠道对应的鉴权密钥') // inputs.type === 15 ? '按照如下格式输入：APIKey|SecretKey' : (inputs.type === 18 ? '按照如下格式输入：APPID|APISecret|APIKey' : '请输入渠道对应的鉴权密钥')
switch (type) { switch (type) {
case 15:
return '按照如下格式输入：APIKey|SecretKey';
case 18:
return '按照如下格式输入：APPID|APISecret|APIKey';
case 22:
return '按照如下格式输入：APIKey-AppId，例如：fastgpt-0sp2gtvfdgyi4k30jwlgwf1i-64f335d84283f05518e9e041';
case 23:
return '按照如下格式输入：AppId|SecretId|SecretKey';
default:
return '请输入渠道对应的鉴权密钥';
}
}
const EditChannel = () => {
const params = useParams();
const navigate = useNavigate();
const channelId = params.id;
const isEdit = channelId !== undefined;
const [loading, setLoading] = useState(isEdit);
const handleCancel = () => {
navigate('/channel');
};
const originInputs = {
name: '',
type: 1,
key: '',
openai_organization:'',
base_url: '',
other: '',
model_mapping: '',
models: [],
auto_ban: 1,
groups: ['default']
};
const [batch, setBatch] = useState(false);
const [autoBan, setAutoBan] = useState(true);
// const [autoBan, setAutoBan] = useState(true);
const [inputs, setInputs] = useState(originInputs);
const [originModelOptions, setOriginModelOptions] = useState([]);
const [modelOptions, setModelOptions] = useState([]);
const [groupOptions, setGroupOptions] = useState([]);
const [basicModels, setBasicModels] = useState([]);
const [fullModels, setFullModels] = useState([]);
const [customModel, setCustomModel] = useState('');
const handleInputChange = (e, { name, value }) => {
setInputs((inputs) => ({ ...inputs, [name]: value }));
if (name === 'type' && inputs.models.length === 0) {
let localModels = [];
switch (value) {
case 14:
localModels = ['claude-instant-1', 'claude-2'];
break;
case 11:
localModels = ['PaLM-2'];
break;
case 15: case 15:
localModels = ['ERNIE-Bot', 'ERNIE-Bot-turbo', 'ERNIE-Bot-4', 'Embedding-V1']; return '按照如下格式输入：APIKey|SecretKey';
break;
case 17:
localModels = ['qwen-turbo', 'qwen-plus', 'text-embedding-v1'];
break;
case 16:
localModels = ['chatglm_pro', 'chatglm_std', 'chatglm_lite'];
break;
case 18: case 18:
localModels = ['SparkDesk']; return '按照如下格式输入：APPID|APISecret|APIKey';
break; case 22:
case 19: return '按照如下格式输入：APIKey-AppId，例如：fastgpt-0sp2gtvfdgyi4k30jwlgwf1i-64f335d84283f05518e9e041';
localModels = ['360GPT_S2_V9', 'embedding-bert-512-v1', 'embedding_s1_v1', 'semantic_similarity_s1_v1'];
break;
case 23: case 23:
localModels = ['hunyuan']; return '按照如下格式输入：AppId|SecretId|SecretKey';
break; default:
} return '请输入渠道对应的鉴权密钥';
setInputs((inputs) => ({ ...inputs, models: localModels }));
} }
//setAutoBan }
};
const loadChannel = async () => { const EditChannel = (props) => {
let res = await API.get(`/api/channel/${channelId}`); const navigate = useNavigate();
const { success, message, data } = res.data; const channelId = props.editingChannel.id;
if (success) { const isEdit = channelId !== undefined;
if (data.models === '') { const [loading, setLoading] = useState(isEdit);
data.models = []; const handleCancel = () => {
} else { props.handleClose()
data.models = data.models.split(','); };
} const originInputs = {
if (data.group === '') { name: '',
data.groups = []; type: 1,
} else { key: '',
data.groups = data.group.split(','); openai_organization: '',
} base_url: '',
if (data.model_mapping !== '') { other: '',
data.model_mapping = JSON.stringify(JSON.parse(data.model_mapping), null, 2); model_mapping: '',
} models: [],
setInputs(data); auto_ban: 1,
if (data.auto_ban === 0) { groups: ['default']
setAutoBan(false); };
} else { const [batch, setBatch] = useState(false);
setAutoBan(true); const [autoBan, setAutoBan] = useState(true);
} // const [autoBan, setAutoBan] = useState(true);
// console.log(data); const [inputs, setInputs] = useState(originInputs);
} else { const [originModelOptions, setOriginModelOptions] = useState([]);
showError(message); const [modelOptions, setModelOptions] = useState([]);
} const [groupOptions, setGroupOptions] = useState([]);
setLoading(false); const [basicModels, setBasicModels] = useState([]);
}; const [fullModels, setFullModels] = useState([]);
const [customModel, setCustomModel] = useState('');
const handleInputChange = (name, value) => {
setInputs((inputs) => ({...inputs, [name]: value}));
if (name === 'type' && inputs.models.length === 0) {
let localModels = [];
switch (value) {
case 14:
localModels = ['claude-instant-1', 'claude-2'];
break;
case 11:
localModels = ['PaLM-2'];
break;
case 15:
localModels = ['ERNIE-Bot', 'ERNIE-Bot-turbo', 'ERNIE-Bot-4', 'Embedding-V1'];
break;
case 17:
localModels = ['qwen-turbo', 'qwen-plus', 'text-embedding-v1'];
break;
case 16:
localModels = ['chatglm_pro', 'chatglm_std', 'chatglm_lite'];
break;
case 18:
localModels = ['SparkDesk'];
break;
case 19:
localModels = ['360GPT_S2_V9', 'embedding-bert-512-v1', 'embedding_s1_v1', 'semantic_similarity_s1_v1'];
break;
case 23:
localModels = ['hunyuan'];
break;
}
setInputs((inputs) => ({...inputs, models: localModels}));
}
//setAutoBan
};
const fetchModels = async () => {
try {
let res = await API.get(`/api/channel/models`);
let localModelOptions = res.data.data.map((model) => ({
key: model.id,
text: model.id,
value: model.id
}));
setOriginModelOptions(localModelOptions);
setFullModels(res.data.data.map((model) => model.id));
setBasicModels(res.data.data.filter((model) => {
return model.id.startsWith('gpt-3') || model.id.startsWith('text-');
}).map((model) => model.id));
} catch (error) {
showError(error.message);
}
};
const fetchGroups = async () => { const loadChannel = async () => {
try { setLoading(true)
let res = await API.get(`/api/group/`); let res = await API.get(`/api/channel/${channelId}`);
setGroupOptions(res.data.data.map((group) => ({ const {success, message, data} = res.data;
key: group, if (success) {
text: group, if (data.models === '') {
value: group data.models = [];
}))); } else {
} catch (error) { data.models = data.models.split(',');
showError(error.message); }
} if (data.group === '') {
}; data.groups = [];
} else {
data.groups = data.group.split(',');
}
if (data.model_mapping !== '') {
data.model_mapping = JSON.stringify(JSON.parse(data.model_mapping), null, 2);
}
setInputs(data);
if (data.auto_ban === 0) {
setAutoBan(false);
} else {
setAutoBan(true);
}
// console.log(data);
} else {
showError(message);
}
setLoading(false);
};
useEffect(() => { const fetchModels = async () => {
let localModelOptions = [...originModelOptions]; try {
inputs.models.forEach((model) => { let res = await API.get(`/api/channel/models`);
if (!localModelOptions.find((option) => option.key === model)) { let localModelOptions = res.data.data.map((model) => ({
localModelOptions.push({ label: model.id,
key: model, value: model.id
text: model, }));
value: model setOriginModelOptions(localModelOptions);
setFullModels(res.data.data.map((model) => model.id));
setBasicModels(res.data.data.filter((model) => {
return model.id.startsWith('gpt-3') || model.id.startsWith('text-');
}).map((model) => model.id));
} catch (error) {
showError(error.message);
}
};
const fetchGroups = async () => {
try {
let res = await API.get(`/api/group/`);
setGroupOptions(res.data.data.map((group) => ({
label: group,
value: group
})));
} catch (error) {
showError(error.message);
}
};
useEffect(() => {
let localModelOptions = [...originModelOptions];
inputs.models.forEach((model) => {
if (!localModelOptions.find((option) => option.key === model)) {
localModelOptions.push({
label: model,
value: model
});
}
}); });
} setModelOptions(localModelOptions);
}); }, [originModelOptions, inputs.models]);
setModelOptions(localModelOptions);
}, [originModelOptions, inputs.models]);
useEffect(() => { useEffect(() => {
if (isEdit) { fetchModels().then();
loadChannel().then(); fetchGroups().then();
} if (isEdit) {
fetchModels().then(); loadChannel().then(
fetchGroups().then(); () => {
}, []);
useEffect(() => { }
setInputs((inputs) => ({ ...inputs, auto_ban: autoBan ? 1 : 0 })); );
console.log(autoBan); } else {
}, [autoBan]); setInputs(originInputs)
}
}, [props.editingChannel.id]);
const submit = async () => {
if (!isEdit && (inputs.name === '' || inputs.key === '')) {
showInfo('请填写渠道名称和渠道密钥！');
return;
}
if (inputs.models.length === 0) {
showInfo('请至少选择一个模型！');
return;
}
if (inputs.model_mapping !== '' && !verifyJSON(inputs.model_mapping)) {
showInfo('模型映射必须是合法的 JSON 格式！');
return;
}
let localInputs = inputs;
if (localInputs.base_url && localInputs.base_url.endsWith('/')) {
localInputs.base_url = localInputs.base_url.slice(0, localInputs.base_url.length - 1);
}
if (localInputs.type === 3 && localInputs.other === '') {
localInputs.other = '2023-06-01-preview';
}
if (localInputs.type === 18 && localInputs.other === '') {
localInputs.other = 'v2.1';
}
let res;
if (!Array.isArray(localInputs.models)) {
showError('提交失败，请勿重复提交！');
handleCancel();
return;
}
localInputs.models = localInputs.models.join(',');
localInputs.group = localInputs.groups.join(',');
if (isEdit) {
res = await API.put(`/api/channel/`, { ...localInputs, id: parseInt(channelId) });
} else {
res = await API.post(`/api/channel/`, localInputs);
}
const { success, message } = res.data;
if (success) {
if (isEdit) {
showSuccess('渠道更新成功！');
} else {
showSuccess('渠道创建成功！');
setInputs(originInputs);
}
} else {
showError(message);
}
};
const addCustomModel = () => { const submit = async () => {
if (customModel.trim() === '') return; if (!isEdit && (inputs.name === '' || inputs.key === '')) {
if (inputs.models.includes(customModel)) return; showInfo('请填写渠道名称和渠道密钥！');
let localModels = [...inputs.models]; return;
localModels.push(customModel); }
let localModelOptions = []; if (inputs.models.length === 0) {
localModelOptions.push({ showInfo('请至少选择一个模型！');
key: customModel, return;
text: customModel, }
value: customModel if (inputs.model_mapping !== '' && !verifyJSON(inputs.model_mapping)) {
}); showInfo('模型映射必须是合法的 JSON 格式！');
setModelOptions(modelOptions => { return;
return [...modelOptions, ...localModelOptions]; }
}); let localInputs = {...inputs};
setCustomModel(''); if (localInputs.base_url && localInputs.base_url.endsWith('/')) {
handleInputChange(null, { name: 'models', value: localModels }); localInputs.base_url = localInputs.base_url.slice(0, localInputs.base_url.length - 1);
}; }
if (localInputs.type === 3 && localInputs.other === '') {
localInputs.other = '2023-06-01-preview';
}
if (localInputs.type === 18 && localInputs.other === '') {
localInputs.other = 'v2.1';
}
let res;
if (!Array.isArray(localInputs.models)) {
showError('提交失败，请勿重复提交！');
handleCancel();
return;
}
localInputs.models = localInputs.models.join(',');
localInputs.group = localInputs.groups.join(',');
if (isEdit) {
res = await API.put(`/api/channel/`, {...localInputs, id: parseInt(channelId)});
} else {
res = await API.post(`/api/channel/`, localInputs);
}
const {success, message} = res.data;
if (success) {
if (isEdit) {
showSuccess('渠道更新成功！');
} else {
showSuccess('渠道创建成功！');
setInputs(originInputs);
}
props.refresh();
props.handleClose();
} else {
showError(message);
}
};
return ( const addCustomModel = () => {
<> if (customModel.trim() === '') return;
<Segment loading={loading}> if (inputs.models.includes(customModel)) return;
<Header as='h3'>{isEdit ? '更新渠道信息' : '创建新的渠道'}</Header> let localModels = [...inputs.models];
<Form autoComplete='new-password'> localModels.push(customModel);
<Form.Field> let localModelOptions = [];
<Form.Select localModelOptions.push({
label='类型' key: customModel,
name='type' text: customModel,
required value: customModel
options={CHANNEL_OPTIONS} });
value={inputs.type} setModelOptions(modelOptions => {
onChange={handleInputChange} return [...modelOptions, ...localModelOptions];
/> });
</Form.Field> setCustomModel('');
{ handleInputChange('models', localModels);
inputs.type === 3 && ( };
<>
<Message> return (
注意，<strong>模型部署名称必须和模型名称保持一致</strong>，因为 One API 会把请求体中的 model <>
参数替换为你的部署名称（模型名称中的点会被剔除），<a target='_blank' <SideSheet
href='https://github.com/songquanpeng/one-api/issues/133?notification_referrer_id=NT_kwDOAmJSYrM2NjIwMzI3NDgyOjM5OTk4MDUw#issuecomment-1571602271'>图片演示</a>。 placement={isEdit ? 'right' : 'left'}
</Message> title={<Title level={3}>{isEdit ? '更新渠道信息' : '创建新的渠道'}</Title>}
<Form.Field> headerStyle={{borderBottom: '1px solid var(--semi-color-border)'}}
<Form.Input bodyStyle={{borderBottom: '1px solid var(--semi-color-border)'}}
label='AZURE_OPENAI_ENDPOINT' visible={props.visible}
name='base_url' footer={
placeholder={'请输入 AZURE_OPENAI_ENDPOINT，例如：https://docs-test-001.openai.azure.com'} <div style={{display: 'flex', justifyContent: 'flex-end'}}>
onChange={handleInputChange} <Space>
value={inputs.base_url} <Button theme='solid' size={'large'} onClick={submit}>提交</Button>
autoComplete='new-password' <Button theme='solid' size={'large'} type={'tertiary'} onClick={handleCancel}>取消</Button>
/> </Space>
</Form.Field> </div>
<Form.Field>
<Form.Input
label='默认 API 版本'
name='other'
placeholder={'请输入默认 API 版本，例如：2023-06-01-preview，该配置可以被实际的请求查询参数所覆盖'}
onChange={handleInputChange}
value={inputs.other}
autoComplete='new-password'
/>
</Form.Field>
</>
)
}
{
inputs.type === 8 && (
<Form.Field>
<Form.Input
label='Base URL'
name='base_url'
placeholder={'请输入自定义渠道的 Base URL，例如：https://openai.justsong.cn'}
onChange={handleInputChange}
value={inputs.base_url}
autoComplete='new-password'
/>
</Form.Field>
)
}
<Form.Field>
<Form.Input
label='名称'
required
name='name'
placeholder={'请为渠道命名'}
onChange={handleInputChange}
value={inputs.name}
autoComplete='new-password'
/>
</Form.Field>
<Form.Field>
<Form.Dropdown
label='分组'
placeholder={'请选择可以使用该渠道的分组'}
name='groups'
required
fluid
multiple
selection
allowAdditions
additionLabel={'请在系统设置页面编辑分组倍率以添加新的分组：'}
onChange={handleInputChange}
value={inputs.groups}
autoComplete='new-password'
options={groupOptions}
/>
</Form.Field>
{
inputs.type === 18 && (
<Form.Field>
<Form.Input
label='模型版本'
name='other'
placeholder={'请输入星火大模型版本，注意是接口地址中的版本号，例如：v2.1'}
onChange={handleInputChange}
value={inputs.other}
autoComplete='new-password'
/>
</Form.Field>
)
}
{
inputs.type === 21 && (
<Form.Field>
<Form.Input
label='知识库 ID'
name='other'
placeholder={'请输入知识库 ID，例如：123456'}
onChange={handleInputChange}
value={inputs.other}
autoComplete='new-password'
/>
</Form.Field>
)
}
<Form.Field>
<Form.Dropdown
label='模型'
placeholder={'请选择该渠道所支持的模型'}
name='models'
required
fluid
multiple
selection
onChange={handleInputChange}
value={inputs.models}
autoComplete='new-password'
options={modelOptions}
/>
</Form.Field>
<div style={{ lineHeight: '40px', marginBottom: '12px' }}>
<Button type={'button'} onClick={() => {
handleInputChange(null, { name: 'models', value: basicModels });
}}>填入基础模型</Button>
<Button type={'button'} onClick={() => {
handleInputChange(null, { name: 'models', value: fullModels });
}}>填入所有模型</Button>
<Button type={'button'} onClick={() => {
handleInputChange(null, { name: 'models', value: [] });
}}>清除所有模型</Button>
<Input
action={
<Button type={'button'} onClick={addCustomModel}>填入</Button>
}
placeholder='输入自定义模型名称'
value={customModel}
onChange={(e, { value }) => {
setCustomModel(value);
}}
onKeyDown={(e) => {
if (e.key === 'Enter') {
addCustomModel();
e.preventDefault();
} }
}} closeIcon={null}
/> onCancel={() => handleCancel()}
</div> width={isMobile() ? '100%' : 600}
<Form.Field> >
<Form.TextArea <Spin spinning={loading}>
label='模型重定向' <div style={{marginTop: 10}}>
placeholder={`此项可选，用于修改请求体中的模型名称，为一个 JSON 字符串，键为请求中模型名称，值为要替换的模型名称，例如：\n${JSON.stringify(MODEL_MAPPING_EXAMPLE, null, 2)}`} <Typography.Text strong>类型：</Typography.Text>
name='model_mapping' </div>
onChange={handleInputChange} <Select
value={inputs.model_mapping} name='type'
style={{ minHeight: 150, fontFamily: 'JetBrains Mono, Consolas' }} required
autoComplete='new-password' optionList={CHANNEL_OPTIONS}
/> value={inputs.type}
</Form.Field> onChange={value => handleInputChange('type', value)}
{ style={{width: '50%'}}
batch ? <Form.Field> />
<Form.TextArea {
label='密钥' inputs.type === 3 && (
name='key' <>
required <div style={{marginTop: 10}}>
placeholder={'请输入密钥，一行一个'} <Banner type={"warning"} description={
onChange={handleInputChange} <>
value={inputs.key} 注意，<strong>模型部署名称必须和模型名称保持一致</strong>，因为 One API 会把请求体中的
style={{ minHeight: 150, fontFamily: 'JetBrains Mono, Consolas' }} model
autoComplete='new-password' 参数替换为你的部署名称（模型名称中的点会被剔除），<a target='_blank'
/> href='https://github.com/songquanpeng/one-api/issues/133?notification_referrer_id=NT_kwDOAmJSYrM2NjIwMzI3NDgyOjM5OTk4MDUw#issuecomment-1571602271'>图片演示</a>。
</Form.Field> : <Form.Field> </>
<Form.Input }>
label='密钥' </Banner>
name='key' </div>
required <div style={{marginTop: 10}}>
placeholder={type2secretPrompt(inputs.type)} <Typography.Text strong>AZURE_OPENAI_ENDPOINT：</Typography.Text>
onChange={handleInputChange} </div>
value={inputs.key} <Input
autoComplete='new-password' label='AZURE_OPENAI_ENDPOINT'
/> name='azure_base_url'
</Form.Field> placeholder={'请输入 AZURE_OPENAI_ENDPOINT，例如：https://docs-test-001.openai.azure.com'}
} onChange={value => {
<Form.Field> handleInputChange('base_url', value)
<Form.Input }}
label='组织，可选，不填则为默认组织' value={inputs.base_url}
name='openai_organization' autoComplete='new-password'
placeholder='请输入组织org-xxx' />
onChange={handleInputChange} <div style={{marginTop: 10}}>
value={inputs.openai_organization} <Typography.Text strong>默认 API 版本：</Typography.Text>
/> </div>
</Form.Field> <Input
<Form.Field> label='默认 API 版本'
<Form.Checkbox name='azure_other'
label='是否自动禁用（仅当自动禁用开启时有效），关闭后不会自动禁用该渠道' placeholder={'请输入默认 API 版本，例如：2023-06-01-preview，该配置可以被实际的请求查询参数所覆盖'}
name='auto_ban' onChange={value => {
checked={autoBan} handleInputChange('other', value)
onChange={ }}
() => { value={inputs.other}
setAutoBan(!autoBan); autoComplete='new-password'
/>
</>
)
}
{
inputs.type === 8 && (
<>
<div style={{marginTop: 10}}>
<Typography.Text strong>Base URL：</Typography.Text>
</div>
<Input
name='base_url'
placeholder={'请输入自定义渠道的 Base URL'}
onChange={value => {
handleInputChange('base_url', value)
}}
value={inputs.base_url}
autoComplete='new-password'
/>
</>
)
}
<div style={{marginTop: 10}}>
<Typography.Text strong>名称：</Typography.Text>
</div>
<Input
required
name='name'
placeholder={'请为渠道命名'}
onChange={value => {
handleInputChange('name', value)
}}
value={inputs.name}
autoComplete='new-password'
/>
<div style={{marginTop: 10}}>
<Typography.Text strong>分组：</Typography.Text>
</div>
<Select
placeholder={'请选择可以使用该渠道的分组'}
name='groups'
required
multiple
selection
allowAdditions
additionLabel={'请在系统设置页面编辑分组倍率以添加新的分组：'}
onChange={value => {
handleInputChange('groups', value)
}}
value={inputs.groups}
autoComplete='new-password'
optionList={groupOptions}
/>
{
inputs.type === 18 && (
<>
<div style={{marginTop: 10}}>
<Typography.Text strong>模型版本：</Typography.Text>
</div>
<Input
name='other'
placeholder={'请输入星火大模型版本，注意是接口地址中的版本号，例如：v2.1'}
onChange={value => {
handleInputChange('other', value)
}}
value={inputs.other}
autoComplete='new-password'
/>
</>
)
}
{
inputs.type === 21 && (
<>
<div style={{marginTop: 10}}>
<Typography.Text strong>知识库 ID：</Typography.Text>
</div>
<Input
label='知识库 ID'
name='other'
placeholder={'请输入知识库 ID，例如：123456'}
onChange={value => {
handleInputChange('other', value)
}}
value={inputs.other}
autoComplete='new-password'
/>
</>
)
}
<div style={{marginTop: 10}}>
<Typography.Text strong>模型：</Typography.Text>
</div>
<Select
placeholder={'请选择该渠道所支持的模型'}
name='models'
required
multiple
selection
onChange={value => {
handleInputChange('models', value)
}}
value={inputs.models}
autoComplete='new-password'
optionList={modelOptions}
/>
<div style={{lineHeight: '40px', marginBottom: '12px'}}>
<Space>
<Button type='primary' onClick={() => {
handleInputChange('models', basicModels);
}}>填入基础模型</Button>
<Button type='secondary' onClick={() => {
handleInputChange('models', fullModels);
}}>填入所有模型</Button>
<Button type='warning' onClick={() => {
handleInputChange('models', []);
}}>清除所有模型</Button>
</Space>
<Input
addonAfter={
<Button type='primary' onClick={addCustomModel}>填入</Button>
}
placeholder='输入自定义模型名称'
value={customModel}
onChange={(value) => {
setCustomModel(value);
}}
/>
</div>
<div style={{marginTop: 10}}>
<Typography.Text strong>模型重定向：</Typography.Text>
</div>
<TextArea
placeholder={`此项可选，用于修改请求体中的模型名称，为一个 JSON 字符串，键为请求中模型名称，值为要替换的模型名称，例如：\n${JSON.stringify(MODEL_MAPPING_EXAMPLE, null, 2)}`}
name='model_mapping'
onChange={value => {
handleInputChange('model_mapping', value)
}}
autosize
value={inputs.model_mapping}
autoComplete='new-password'
/>
<Typography.Text style={{
color: 'rgba(var(--semi-blue-5), 1)',
userSelect: 'none',
cursor: 'pointer'
}} onClick={
() => {
handleInputChange('model_mapping', JSON.stringify(MODEL_MAPPING_EXAMPLE, null, 2))
}
}>
填入模板
</Typography.Text>
<div style={{marginTop: 10}}>
<Typography.Text strong>密钥：</Typography.Text>
</div>
{
batch ?
<TextArea
label='密钥'
name='key'
required
placeholder={'请输入密钥，一行一个'}
onChange={value => {
handleInputChange('key', value)
}}
value={inputs.key}
style={{minHeight: 150, fontFamily: 'JetBrains Mono, Consolas'}}
autoComplete='new-password'
/>
:
<Input
label='密钥'
name='key'
required
placeholder={type2secretPrompt(inputs.type)}
onChange={value => {
handleInputChange('key', value)
}}
value={inputs.key}
autoComplete='new-password'
/>
}
<div style={{marginTop: 10}}>
<Typography.Text strong>组织：</Typography.Text>
</div>
<Input
label='组织，可选，不填则为默认组织'
name='openai_organization'
placeholder='请输入组织org-xxx'
onChange={value => {
handleInputChange('openai_organization', value)
}}
value={inputs.openai_organization}
/>
<div style={{marginTop: 10, display: 'flex'}}>
<Space>
<Checkbox
name='auto_ban'
checked={autoBan}
onChange={
() => {
setAutoBan(!autoBan);
}
}
// onChange={handleInputChange}
/>
<Typography.Text
strong>是否自动禁用（仅当自动禁用开启时有效），关闭后不会自动禁用该渠道：</Typography.Text>
</Space>
</div>
{
!isEdit && (
<div style={{marginTop: 10, display: 'flex'}}>
<Space>
<Checkbox
checked={batch}
label='批量创建'
name='batch'
onChange={() => setBatch(!batch)}
/>
<Typography.Text strong>批量创建</Typography.Text>
</Space>
</div>
)
} }
} {
// onChange={handleInputChange} inputs.type !== 3 && inputs.type !== 8 && inputs.type !== 22 && (
/> <>
</Form.Field> <div style={{marginTop: 10}}>
{ <Typography.Text strong>代理：</Typography.Text>
!isEdit && ( </div>
<Form.Checkbox <Input
checked={batch} label='代理'
label='批量创建' name='base_url'
name='batch' placeholder={'此项可选，用于通过代理站来进行 API 调用'}
onChange={() => setBatch(!batch)} onChange={value => {
/> handleInputChange('base_url', value)
) }}
} value={inputs.base_url}
{ autoComplete='new-password'
inputs.type !== 3 && inputs.type !== 8 && inputs.type !== 22 && ( />
<Form.Field> </>
<Form.Input )
label='代理' }
name='base_url' {
placeholder={'此项可选，用于通过代理站来进行 API 调用，请输入代理站地址，格式为：https://domain.com'} inputs.type === 22 && (
onChange={handleInputChange} <>
value={inputs.base_url} <div style={{marginTop: 10}}>
autoComplete='new-password' <Typography.Text strong>私有部署地址：</Typography.Text>
/> </div>
</Form.Field> <Input
) name='base_url'
} placeholder={'请输入私有部署地址，格式为：https://fastgpt.run/api/openapi'}
{ onChange={value => {
inputs.type === 22 && ( handleInputChange('base_url', value)
<Form.Field> }}
<Form.Input value={inputs.base_url}
label='私有部署地址' autoComplete='new-password'
name='base_url' />
placeholder={'请输入私有部署地址，格式为：https://fastgpt.run/api/openapi'} </>
onChange={handleInputChange} )
value={inputs.base_url} }
autoComplete='new-password'
/> </Spin>
</Form.Field> </SideSheet>
) </>
} );
<Button onClick={handleCancel}>取消</Button>
<Button type={isEdit ? 'button' : 'submit'} positive onClick={submit}>提交</Button>
</Form>
</Segment>
</>
);
}; };
export default EditChannel; export default EditChannel;
web/src/pages/Channel/index.js
import React from 'react'; import React from 'react';
import { Header, Segment } from 'semantic-ui-react';
import ChannelsTable from '../../components/ChannelsTable'; import ChannelsTable from '../../components/ChannelsTable';
import {Layout} from "@douyinfe/semi-ui";
import RedemptionsTable from "../../components/RedemptionsTable";
const File = () => ( const File = () => (
<> <>
<Segment> <Layout>
<Header as='h3'>管理渠道</Header> <Layout.Header>
<ChannelsTable /> <h3>管理渠道</h3>
</Segment> </Layout.Header>
</> <Layout.Content>
<ChannelsTable/>
</Layout.Content>
</Layout>
</>
); );
export default File; export default File;
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment