Merge branch 'main' into refactor-settings-operation

2025-11-09 23:53:41 +08:00 · 2024-05-13 16:29:02 +08:00
parent 968ef1e5fa e8800415b8
commit 698af0786d
28 changed files with 390 additions and 150 deletions
--- a/web/src/components/ChannelsTable.js
+++ b/web/src/components/ChannelsTable.js
@@ -31,6 +31,7 @@ import {
 } from '@douyinfe/semi-ui';
 import EditChannel from '../pages/Channel/EditChannel';
 import { IconTreeTriangleDown } from '@douyinfe/semi-icons';
+import { loadChannelModels } from './utils.js';

 function renderTimestamp(timestamp) {
  return <>{timestamp2string(timestamp)}</>;
@@ -354,27 +355,29 @@ const ChannelsTable = () => {
  };

  const copySelectedChannel = async (id) => {
-    const channelToCopy = channels.find(channel => String(channel.id) === String(id));
-    console.log(channelToCopy)
+    const channelToCopy = channels.find(
+      (channel) => String(channel.id) === String(id),
+    );
+    console.log(channelToCopy);
    channelToCopy.name += '_复制';
    channelToCopy.created_time = null;
    channelToCopy.balance = 0;
    channelToCopy.used_quota = 0;
    if (!channelToCopy) {
-        showError("渠道未找到，请刷新页面后重试。");
-        return;
+      showError('渠道未找到，请刷新页面后重试。');
+      return;
    }
    try {
-        const newChannel = {...channelToCopy, id: undefined};
-        const response = await API.post('/api/channel/', newChannel);
-        if (response.data.success) {
-            showSuccess("渠道复制成功");
-            await refresh();
-        } else {
-            showError(response.data.message);
-        }
+      const newChannel = { ...channelToCopy, id: undefined };
+      const response = await API.post('/api/channel/', newChannel);
+      if (response.data.success) {
+        showSuccess('渠道复制成功');
+        await refresh();
+      } else {
+        showError(response.data.message);
+      }
    } catch (error) {
-        showError("渠道复制失败: " + error.message);
+      showError('渠道复制失败: ' + error.message);
    }
  };

@@ -395,6 +398,7 @@ const ChannelsTable = () => {
        showError(reason);
      });
    fetchGroups().then();
+    loadChannelModels().then();
  }, []);

  const manageChannel = async (id, action, record, value) => {
--- a/web/src/components/LogsTable.js
+++ b/web/src/components/LogsTable.js
@@ -19,9 +19,15 @@ import {
  Spin,
  Table,
  Tag,
+  Tooltip,
 } from '@douyinfe/semi-ui';
 import { ITEMS_PER_PAGE } from '../constants';
-import { renderNumber, renderQuota, stringToColor } from '../helpers/render';
+import {
+  renderModelPrice,
+  renderNumber,
+  renderQuota,
+  stringToColor,
+} from '../helpers/render';
 import Paragraph from '@douyinfe/semi-ui/lib/es/typography/paragraph';

 const { Header } = Layout;
@@ -292,16 +298,44 @@ const LogsTable = () => {
      title: '详情',
      dataIndex: 'content',
      render: (text, record, index) => {
+        if (record.other === '') {
+          return (
+            <Paragraph
+              ellipsis={{
+                rows: 2,
+                showTooltip: {
+                  type: 'popover',
+                  opts: { style: { width: 240 } },
+                },
+              }}
+              style={{ maxWidth: 240 }}
+            >
+              {text}
+            </Paragraph>
+          );
+        }
+        let other = JSON.parse(record.other);
+        let content = renderModelPrice(
+          other.model_ratio,
+          other.model_price,
+          other.completion_ratio,
+          other.group_ratio,
+        );
        return (
-          <Paragraph
-            ellipsis={{
-              rows: 2,
-              showTooltip: { type: 'popover', opts: { style: { width: 240 } } },
-            }}
-            style={{ maxWidth: 240 }}
-          >
-            {text}
-          </Paragraph>
+          <Tooltip content={content}>
+            <Paragraph
+              ellipsis={{
+                rows: 2,
+                showTooltip: {
+                  type: 'popover',
+                  opts: { style: { width: 240 } },
+                },
+              }}
+              style={{ maxWidth: 240 }}
+            >
+              {text}
+            </Paragraph>
+          </Tooltip>
        );
      },
    },
--- a/web/src/components/MjLogsTable.js
+++ b/web/src/components/MjLogsTable.js
@@ -236,6 +236,31 @@ const renderTimestamp = (timestampInSeconds) => {

  return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`; // 格式化输出
 };
+// 修改renderDuration函数以包含颜色逻辑
+function renderDuration(submit_time, finishTime) {
+  // 确保startTime和finishTime都是有效的时间戳
+  if (!submit_time || !finishTime) return 'N/A'; 
+
+  // 将时间戳转换为Date对象
+  const start = new Date(submit_time);
+  const finish = new Date(finishTime);
+
+  // 计算时间差（毫秒）
+  const durationMs = finish - start;
+
+  // 将时间差转换为秒，并保留一位小数
+  const durationSec = (durationMs / 1000).toFixed(1);
+
+  // 设置颜色：大于60秒则为红色，小于等于60秒则为绿色
+  const color = durationSec > 60 ? 'red' : 'green';
+
+  // 返回带有样式的颜色标签
+  return (
+    <Tag color={color} size="large">
+      {durationSec} 秒
+    </Tag>
+  );
+}

 const LogsTable = () => {
  const [isModalOpen, setIsModalOpen] = useState(false);
@@ -248,6 +273,15 @@ const LogsTable = () => {
        return <div>{renderTimestamp(text / 1000)}</div>;
      },
    },
+    {
+      title: '花费时间',
+      dataIndex: 'finish_time', // 以finish_time作为dataIndex
+      key: 'finish_time',
+      render: (finish, record) => {
+        // 假设record.start_time是存在的，并且finish是完成时间的时间戳
+        return renderDuration(record.submit_time, finish);
+      },
+    },
    {
      title: '渠道',
      dataIndex: 'channel_id',
--- a/web/src/components/OperationSetting.js
+++ b/web/src/components/OperationSetting.js
@@ -29,6 +29,7 @@ const OperationSetting = () => {
    PreConsumedQuota: 0,
    StreamCacheQueueLength: 0,
    ModelRatio: '',
+    CompletionRatio: '',
    ModelPrice: '',
    GroupRatio: '',
    TopUpLink: '',
@@ -69,6 +70,7 @@ const OperationSetting = () => {
        if (
          item.key === 'ModelRatio' ||
          item.key === 'GroupRatio' ||
+          item.key === 'CompletionRatio' ||
          item.key === 'ModelPrice'
        ) {
          item.value = JSON.stringify(JSON.parse(item.value), null, 2);
@@ -166,6 +168,13 @@ const OperationSetting = () => {
          }
          await updateOption('ModelRatio', inputs.ModelRatio);
        }
+        if (originInputs['CompletionRatio'] !== inputs.CompletionRatio) {
+          if (!verifyJSON(inputs.CompletionRatio)) {
+            showError('模型补全倍率不是合法的 JSON 字符串');
+            return;
+          }
+          await updateOption('CompletionRatio', inputs.CompletionRatio);
+        }
        if (originInputs['GroupRatio'] !== inputs.GroupRatio) {
          if (!verifyJSON(inputs.GroupRatio)) {
            showError('分组倍率不是合法的 JSON 字符串');
@@ -304,6 +313,20 @@ const OperationSetting = () => {
                placeholder='为一个 JSON 文本，键为模型名称，值为倍率'
              />
            </Form.Group>
+            <Form.Group widths='equal'>
+              <Form.TextArea
+                label='模型补全倍率（仅对自定义模型有效）'
+                name='CompletionRatio'
+                onChange={handleInputChange}
+                style={{
+                  minHeight: 250,
+                  fontFamily: 'JetBrains Mono, Consolas',
+                }}
+                autoComplete='new-password'
+                value={inputs.CompletionRatio}
+                placeholder='为一个 JSON 文本，键为分组名称，值为倍率'
+              />
+            </Form.Group>
            <Form.Group widths='equal'>
              <Form.TextArea
                label='分组倍率'
--- a/web/src/components/utils.js
+++ b/web/src/components/utils.js
@@ -18,3 +18,32 @@ export async function onGitHubOAuthClicked(github_client_id) {
    `https://github.com/login/oauth/authorize?client_id=${github_client_id}&state=${state}&scope=user:email`,
  );
 }
+
+let channelModels = undefined;
+export async function loadChannelModels() {
+  const res = await API.get('/api/models');
+  const { success, data } = res.data;
+  if (!success) {
+    return;
+  }
+  channelModels = data;
+  localStorage.setItem('channel_models', JSON.stringify(data));
+}
+
+export function getChannelModels(type) {
+  if (channelModels !== undefined && type in channelModels) {
+    if (!channelModels[type]) {
+      return [];
+    }
+    return channelModels[type];
+  }
+  let models = localStorage.getItem('channel_models');
+  if (!models) {
+    return [];
+  }
+  channelModels = JSON.parse(models);
+  if (type in channelModels) {
+    return channelModels[type];
+  }
+  return [];
+}
--- a/web/src/constants/channel.constants.js
+++ b/web/src/constants/channel.constants.js
@@ -86,13 +86,13 @@ export const CHANNEL_OPTIONS = [
    label: '智谱 ChatGLM',
  },
  {
-    key: 16,
+    key: 26,
    text: '智谱 GLM-4V',
    value: 26,
    color: 'purple',
    label: '智谱 GLM-4V',
  },
-  { key: 16, text: 'Moonshot', value: 25, color: 'green', label: 'Moonshot' },
+  { key: 25, text: 'Moonshot', value: 25, color: 'green', label: 'Moonshot' },
  { key: 19, text: '360 智脑', value: 19, color: 'blue', label: '360 智脑' },
  { key: 23, text: '腾讯混元', value: 23, color: 'teal', label: '腾讯混元' },
  { key: 31, text: '零一万物', value: 31, color: 'green', label: '零一万物' },
--- a/web/src/helpers/render.js
+++ b/web/src/helpers/render.js
@@ -135,6 +135,32 @@ export function renderQuota(quota, digits = 2) {
  return renderNumber(quota);
 }

+export function renderModelPrice(
+  modelRatio,
+  modelPrice = -1,
+  completionRatio,
+  groupRatio,
+) {
+  // 1 ratio = $0.002 / 1K tokens
+  if (modelPrice !== -1) {
+    return '模型价格：$' + modelPrice * groupRatio;
+  } else {
+    if (completionRatio === undefined) {
+      completionRatio = 0;
+    }
+    let inputRatioPrice = modelRatio * 0.002 * groupRatio;
+    let completionRatioPrice =
+      modelRatio * completionRatio * 0.002 * groupRatio;
+    return (
+      '输入：$' +
+      inputRatioPrice.toFixed(3) +
+      '/1K tokens，补全：$' +
+      completionRatioPrice.toFixed(3) +
+      '/1K tokens'
+    );
+  }
+}
+
 export function renderQuotaWithPrompt(quota, digits) {
  let displayInCurrency = localStorage.getItem('display_in_currency');
  displayInCurrency = displayInCurrency === 'true';
--- a/web/src/pages/Channel/EditChannel.js
+++ b/web/src/pages/Channel/EditChannel.js
@@ -23,6 +23,7 @@ import {
  Banner,
 } from '@douyinfe/semi-ui';
 import { Divider } from 'semantic-ui-react';
+import { getChannelModels, loadChannelModels } from '../../components/utils.js';

 const MODEL_MAPPING_EXAMPLE = {
  'gpt-3.5-turbo-0301': 'gpt-3.5-turbo',
@@ -87,97 +88,9 @@ const EditChannel = (props) => {
  const [customModel, setCustomModel] = useState('');
  const handleInputChange = (name, value) => {
    setInputs((inputs) => ({ ...inputs, [name]: value }));
-    if (name === 'type' && inputs.models.length === 0) {
+    if (name === 'type') {
      let localModels = [];
      switch (value) {
-        case 33:
-        case 14:
-          localModels = [
-            'claude-instant-1.2',
-            'claude-2',
-            'claude-2.0',
-            'claude-2.1',
-            'claude-3-opus-20240229',
-            'claude-3-sonnet-20240229',
-            'claude-3-haiku-20240307',
-          ];
-          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',
-            'qwen-max',
-            'qwen-max-longcontext',
-            'text-embedding-v1',
-          ];
-          break;
-        case 16:
-          localModels = ['chatglm_pro', 'chatglm_std', 'chatglm_lite'];
-          break;
-        case 18:
-          localModels = [
-            'SparkDesk',
-            'SparkDesk-v1.1',
-            'SparkDesk-v2.1',
-            'SparkDesk-v3.1',
-            'SparkDesk-v3.5',
-          ];
-          break;
-        case 19:
-          localModels = [
-            '360GPT_S2_V9',
-            'embedding-bert-512-v1',
-            'embedding_s1_v1',
-            'semantic_similarity_s1_v1',
-          ];
-          break;
-        case 23:
-          localModels = ['hunyuan'];
-          break;
-        case 24:
-          localModels = [
-            'gemini-1.0-pro-001',
-            'gemini-1.0-pro-vision-001',
-            'gemini-1.5-pro',
-            'gemini-1.5-pro-latest',
-            'gemini-pro',
-            'gemini-pro-vision',
-          ];
-          break;
-        case 34:
-          localModels = [
-            'command-r',
-            'command-r-plus',
-            'command-light',
-            'command-light-nightly',
-            'command',
-            'command-nightly',
-          ];
-          break;
-        case 25:
-          localModels = [
-            'moonshot-v1-8k',
-            'moonshot-v1-32k',
-            'moonshot-v1-128k',
-          ];
-          break;
-        case 26:
-          localModels = ['glm-4', 'glm-4v', 'glm-3-turbo'];
-          break;
-        case 31:
-          localModels = ['yi-34b-chat-0205', 'yi-34b-chat-200k', 'yi-vl-plus'];
-          break;
        case 2:
          localModels = [
            'mj_imagine',
@@ -207,8 +120,14 @@ const EditChannel = (props) => {
            'mj_pan',
          ];
          break;
+        default:
+          localModels = getChannelModels(value);
+          break;
      }
-      setInputs((inputs) => ({ ...inputs, models: localModels }));
+      if (inputs.models.length === 0) {
+        setInputs((inputs) => ({ ...inputs, models: localModels }));
+      }
+      setBasicModels(localModels);
    }
    //setAutoBan
  };
@@ -244,6 +163,7 @@ const EditChannel = (props) => {
      } else {
        setAutoBan(true);
      }
+      setBasicModels(getChannelModels(data.type));
      // console.log(data);
    } else {
      showError(message);
@@ -312,6 +232,9 @@ const EditChannel = (props) => {
      loadChannel().then(() => {});
    } else {
      setInputs(originInputs);
+      let localModels = getChannelModels(inputs.type);
+      setBasicModels(localModels);
+      setInputs((inputs) => ({ ...inputs, models: localModels }));
    }
  }, [props.editingChannel.id]);

@@ -596,7 +519,7 @@ const EditChannel = (props) => {
                  handleInputChange('models', basicModels);
                }}
              >
-                填入基础模型
+                填入相关模型
              </Button>
              <Button
                type='secondary'
--- a/web/src/pages/User/EditUser.js
+++ b/web/src/pages/User/EditUser.js
@@ -1,12 +1,13 @@
 import React, { useEffect, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { API, isMobile, showError, showSuccess } from '../../helpers';
-import { renderQuotaWithPrompt } from '../../helpers/render';
+import { renderQuota, renderQuotaWithPrompt } from '../../helpers/render';
 import Title from '@douyinfe/semi-ui/lib/es/typography/title';
 import {
  Button,
  Divider,
  Input,
+  Modal,
  Select,
  SideSheet,
  Space,
@@ -17,6 +18,8 @@ import {
 const EditUser = (props) => {
  const userId = props.editingUser.id;
  const [loading, setLoading] = useState(true);
+  const [addQuotaModalOpen, setIsModalOpen] = useState(false);
+  const [addQuotaLocal, setAddQuotaLocal] = useState('');
  const [inputs, setInputs] = useState({
    username: '',
    display_name: '',
@@ -107,6 +110,16 @@ const EditUser = (props) => {
    setLoading(false);
  };

+  const addLocalQuota = () => {
+    let newQuota = parseInt(quota) + parseInt(addQuotaLocal);
+    setInputs((inputs) => ({ ...inputs, quota: newQuota }));
+  };
+
+  const openAddQuotaModal = () => {
+    setAddQuotaLocal('0');
+    setIsModalOpen(true);
+  };
+
  return (
    <>
      <SideSheet
@@ -192,14 +205,17 @@ const EditUser = (props) => {
              <div style={{ marginTop: 20 }}>
                <Typography.Text>{`剩余额度${renderQuotaWithPrompt(quota)}`}</Typography.Text>
              </div>
-              <Input
-                name='quota'
-                placeholder={'请输入新的剩余额度'}
-                onChange={(value) => handleInputChange('quota', value)}
-                value={quota}
-                type={'number'}
-                autoComplete='new-password'
-              />
+              <Space>
+                <Input
+                  name='quota'
+                  placeholder={'请输入新的剩余额度'}
+                  onChange={(value) => handleInputChange('quota', value)}
+                  value={quota}
+                  type={'number'}
+                  autoComplete='new-password'
+                />
+                <Button onClick={openAddQuotaModal}>添加额度</Button>
+              </Space>
            </>
          )}
          <Divider style={{ marginTop: 20 }}>以下信息不可修改</Divider>
@@ -245,6 +261,30 @@ const EditUser = (props) => {
          />
        </Spin>
      </SideSheet>
+      <Modal
+        centered={true}
+        visible={addQuotaModalOpen}
+        onOk={() => {
+          addLocalQuota();
+          setIsModalOpen(false);
+        }}
+        onCancel={() => setIsModalOpen(false)}
+        closable={null}
+      >
+        <div style={{ marginTop: 20 }}>
+          <Typography.Text>{`新额度${renderQuota(quota)} + ${renderQuota(addQuotaLocal)} = ${renderQuota(quota + parseInt(addQuotaLocal))}`}</Typography.Text>
+        </div>
+        <Input
+          name='addQuotaLocal'
+          placeholder={'需要添加的额度（支持负数）'}
+          onChange={(value) => {
+            setAddQuotaLocal(value);
+          }}
+          value={addQuotaLocal}
+          type={'number'}
+          autoComplete='new-password'
+        />
+      </Modal>
    </>
  );
 };