Merge branch 'main' into refactor-settings-operation

web/src/App.js

@@ -22,6 +22,7 @@ import Log from './pages/Log';
 import Chat from './pages/Chat';
 import { Layout } from '@douyinfe/semi-ui';
 import Midjourney from './pages/Midjourney';
+import Pricing from './pages/Pricing/index.js';
 // import Detail from './pages/Detail';
 
 const Home = lazy(() => import('./pages/Home'));
@@ -219,6 +220,14 @@ function App() {
               </PrivateRoute>
             }
           />
+          <Route
+            path='/pricing'
+            element={
+              <Suspense fallback={<Loading></Loading>}>
+                <Pricing />
+              </Suspense>
+            }
+          />
           <Route
             path='/about'
             element={

web/src/components/LoginForm.js

@@ -19,6 +19,7 @@ import TelegramLoginButton from 'react-telegram-login';
 
 import { IconGithubLogo } from '@douyinfe/semi-icons';
 import WeChatIcon from './WeChatIcon';
+import { setUserData } from '../helpers/data.js';
 
 const LoginForm = () => {
   const [inputs, setInputs] = useState({
@@ -99,7 +100,7 @@ const LoginForm = () => {
       const { success, message, data } = res.data;
       if (success) {
         userDispatch({ type: 'login', payload: data });
-        localStorage.setItem('user', JSON.stringify(data));
+        setUserData(data);
         showSuccess('登录成功！');
         if (username === 'root' && password === '123456') {
           Modal.error({

web/src/components/LogsTable.js

@@ -316,6 +316,8 @@ const LogsTable = () => {
         }
         let other = JSON.parse(record.other);
         let content = renderModelPrice(
+          record.prompt_tokens,
+          record.completion_tokens,
           other.model_ratio,
           other.model_price,
           other.completion_ratio,
@@ -326,10 +328,6 @@ const LogsTable = () => {
             <Paragraph
               ellipsis={{
                 rows: 2,
-                showTooltip: {
-                  type: 'popover',
-                  opts: { style: { width: 240 } },
-                },
               }}
               style={{ maxWidth: 240 }}
             >

web/src/components/ModelPricing.js

@@ -0,0 +1,229 @@
+import React, { useContext, useEffect, useState } from 'react';
+import { API, copy, showError, showSuccess } from '../helpers';
+
+import { Banner, Layout, Modal, Table, Tag, Tooltip } from '@douyinfe/semi-ui';
+import { stringToColor } from '../helpers/render.js';
+import { UserContext } from '../context/User/index.js';
+import Text from '@douyinfe/semi-ui/lib/es/typography/text';
+
+function renderQuotaType(type) {
+  // Ensure all cases are string literals by adding quotes.
+  switch (type) {
+    case 1:
+      return (
+        <Tag color='green' size='large'>
+          按次计费
+        </Tag>
+      );
+    case 0:
+      return (
+        <Tag color='blue' size='large'>
+          按量计费
+        </Tag>
+      );
+    default:
+      return (
+        <Tag color='white' size='large'>
+          未知
+        </Tag>
+      );
+  }
+}
+
+function renderAvailable(available) {
+  return available ? (
+    <Tag color='green' size='large'>
+      可用
+    </Tag>
+  ) : (
+    <Tooltip content='您所在的分组不可用'>
+      <Tag color='red' size='large'>
+        不可用
+      </Tag>
+    </Tooltip>
+  );
+}
+
+const ModelPricing = () => {
+  const columns = [
+    {
+      title: '可用性',
+      dataIndex: 'available',
+      render: (text, record, index) => {
+        return renderAvailable(text);
+      },
+    },
+    {
+      title: '提供者',
+      dataIndex: 'owner_by',
+      render: (text, record, index) => {
+        return (
+          <>
+            <Tag color={stringToColor(text)} size='large'>
+              {text}
+            </Tag>
+          </>
+        );
+      },
+    },
+    {
+      title: '模型名称',
+      dataIndex: 'model_name', // 以finish_time作为dataIndex
+      render: (text, record, index) => {
+        return (
+          <>
+            <Tag
+              color={stringToColor(record.owner_by)}
+              size='large'
+              onClick={() => {
+                copyText(text);
+              }}
+            >
+              {text}
+            </Tag>
+          </>
+        );
+      },
+    },
+    {
+      title: '计费类型',
+      dataIndex: 'quota_type',
+      render: (text, record, index) => {
+        return renderQuotaType(parseInt(text));
+      },
+    },
+    {
+      title: '模型倍率',
+      dataIndex: 'model_ratio',
+      render: (text, record, index) => {
+        return <div>{record.quota_type === 0 ? text : 'N/A'}</div>;
+      },
+    },
+    {
+      title: '补全倍率',
+      dataIndex: 'completion_ratio',
+      render: (text, record, index) => {
+        let ratio = parseFloat(text.toFixed(3));
+        return <div>{record.quota_type === 0 ? ratio : 'N/A'}</div>;
+      },
+    },
+    {
+      title: '模型价格',
+      dataIndex: 'model_price',
+      render: (text, record, index) => {
+        let content = text;
+        if (record.quota_type === 0) {
+          let inputRatioPrice = record.model_ratio * 2.0 * record.group_ratio;
+          let completionRatioPrice =
+            record.model_ratio *
+            record.completion_ratio *
+            2.0 *
+            record.group_ratio;
+          content = (
+            <>
+              <Text>提示 ${inputRatioPrice} / 1M tokens</Text>
+              <br />
+              <Text>补全 ${completionRatioPrice} / 1M tokens</Text>
+            </>
+          );
+        } else {
+          let price = parseFloat(text) * record.group_ratio;
+          content = <>模型价格：${price}</>;
+        }
+        return <div>{content}</div>;
+      },
+    },
+  ];
+
+  const [models, setModels] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [userState, userDispatch] = useContext(UserContext);
+  const [groupRatio, setGroupRatio] = useState(1);
+
+  const setModelsFormat = (models, groupRatio) => {
+    for (let i = 0; i < models.length; i++) {
+      models[i].key = i;
+      models[i].group_ratio = groupRatio;
+    }
+    // sort by quota_type
+    models.sort((a, b) => {
+      return a.quota_type - b.quota_type;
+    });
+
+    // sort by owner_by, openai is max, other use localeCompare
+    models.sort((a, b) => {
+      if (a.owner_by === 'openai') {
+        return -1;
+      } else if (b.owner_by === 'openai') {
+        return 1;
+      } else {
+        return a.owner_by.localeCompare(b.owner_by);
+      }
+    });
+
+    setModels(models);
+  };
+
+  const loadPricing = async () => {
+    setLoading(true);
+
+    let url = '';
+    url = `/api/pricing`;
+    const res = await API.get(url);
+    const { success, message, data, group_ratio } = res.data;
+    if (success) {
+      setGroupRatio(group_ratio);
+      setModelsFormat(data, group_ratio);
+    } else {
+      showError(message);
+    }
+    setLoading(false);
+  };
+
+  const refresh = async () => {
+    await loadPricing();
+  };
+
+  const copyText = async (text) => {
+    if (await copy(text)) {
+      showSuccess('已复制：' + text);
+    } else {
+      // setSearchKeyword(text);
+      Modal.error({ title: '无法复制到剪贴板，请手动复制', content: text });
+    }
+  };
+
+  useEffect(() => {
+    refresh().then();
+  }, []);
+
+  return (
+    <>
+      <Layout>
+        {userState.user ? (
+          <Banner
+            type='info'
+            description={`您的分组为：${userState.user.group}，分组倍率为：${groupRatio}`}
+          />
+        ) : (
+          <Banner
+            type='warning'
+            description={`您还未登陆，显示的价格为默认分组倍率: ${groupRatio}`}
+          />
+        )}
+        <Table
+          style={{ marginTop: 5 }}
+          columns={columns}
+          dataSource={models}
+          loading={loading}
+          pagination={{
+            pageSize: models.length,
+            showSizeChanger: false,
+          }}
+        />
+      </Layout>
+    </>
+  );
+};
+
+export default ModelPricing;

web/src/components/SiderBar.js

@@ -23,10 +23,12 @@ import {
   IconImage,
   IconKey,
   IconLayers,
+  IconPriceTag,
   IconSetting,
   IconUser,
 } from '@douyinfe/semi-icons';
 import { Layout, Nav } from '@douyinfe/semi-ui';
+import { setStatusData } from '../helpers/data.js';
 
 // HeaderBar Buttons
 
@@ -55,6 +57,7 @@ const SiderBar = () => {
     about: '/about',
     chat: '/chat',
     detail: '/detail',
+    pricing: '/pricing',
   };
 
   const headerButtons = useMemo(
@@ -100,6 +103,12 @@ const SiderBar = () => {
         to: '/topup',
         icon: <IconCreditCard />,
       },
+      {
+        text: '模型价格',
+        itemKey: 'pricing',
+        to: '/pricing',
+        icon: <IconPriceTag />,
+      },
       {
         text: '用户管理',
         itemKey: 'user',
@@ -161,34 +170,8 @@ const SiderBar = () => {
     }
     const { success, data } = res.data;
     if (success) {
-      localStorage.setItem('status', JSON.stringify(data));
       statusDispatch({ type: 'set', payload: data });
-      localStorage.setItem('system_name', data.system_name);
-      localStorage.setItem('logo', data.logo);
-      localStorage.setItem('footer_html', data.footer_html);
-      localStorage.setItem('quota_per_unit', data.quota_per_unit);
-      localStorage.setItem('display_in_currency', data.display_in_currency);
-      localStorage.setItem('enable_drawing', data.enable_drawing);
-      localStorage.setItem('enable_data_export', data.enable_data_export);
-      localStorage.setItem(
-        'data_export_default_time',
-        data.data_export_default_time,
-      );
-      localStorage.setItem(
-        'default_collapse_sidebar',
-        data.default_collapse_sidebar,
-      );
-      localStorage.setItem('mj_notify_enabled', data.mj_notify_enabled);
-      if (data.chat_link) {
-        localStorage.setItem('chat_link', data.chat_link);
-      } else {
-        localStorage.removeItem('chat_link');
-      }
-      if (data.chat_link2) {
-        localStorage.setItem('chat_link2', data.chat_link2);
-      } else {
-        localStorage.removeItem('chat_link2');
-      }
+      setStatusData(data);
     } else {
       showError('无法正常连接至服务器！');
     }

web/src/helpers/data.js

@@ -0,0 +1,33 @@
+export function setStatusData(data) {
+  localStorage.setItem('status', JSON.stringify(data));
+  localStorage.setItem('system_name', data.system_name);
+  localStorage.setItem('logo', data.logo);
+  localStorage.setItem('footer_html', data.footer_html);
+  localStorage.setItem('quota_per_unit', data.quota_per_unit);
+  localStorage.setItem('display_in_currency', data.display_in_currency);
+  localStorage.setItem('enable_drawing', data.enable_drawing);
+  localStorage.setItem('enable_data_export', data.enable_data_export);
+  localStorage.setItem(
+    'data_export_default_time',
+    data.data_export_default_time,
+  );
+  localStorage.setItem(
+    'default_collapse_sidebar',
+    data.default_collapse_sidebar,
+  );
+  localStorage.setItem('mj_notify_enabled', data.mj_notify_enabled);
+  if (data.chat_link) {
+    localStorage.setItem('chat_link', data.chat_link);
+  } else {
+    localStorage.removeItem('chat_link');
+  }
+  if (data.chat_link2) {
+    localStorage.setItem('chat_link2', data.chat_link2);
+  } else {
+    localStorage.removeItem('chat_link2');
+  }
+}
+
+export function setUserData(data) {
+  localStorage.setItem('user', JSON.stringify(data));
+}

web/src/helpers/render.js

@@ -1,4 +1,3 @@
-import { Label } from 'semantic-ui-react';
 import { Tag } from '@douyinfe/semi-ui';
 
 export function renderText(text, limit) {
@@ -136,6 +135,8 @@ export function renderQuota(quota, digits = 2) {
 }
 
 export function renderModelPrice(
+  inputTokens,
+  completionTokens,
   modelRatio,
   modelPrice = -1,
   completionRatio,
@@ -148,15 +149,24 @@ export function renderModelPrice(
     if (completionRatio === undefined) {
       completionRatio = 0;
     }
-    let inputRatioPrice = modelRatio * 0.002 * groupRatio;
-    let completionRatioPrice =
-      modelRatio * completionRatio * 0.002 * groupRatio;
+    let inputRatioPrice = modelRatio * 2.0 * groupRatio;
+    let completionRatioPrice = modelRatio * completionRatio * 2.0 * groupRatio;
+    let price =
+      (inputTokens / 1000000) * inputRatioPrice +
+      (completionTokens / 1000000) * completionRatioPrice;
     return (
-      '输入：$' +
-      inputRatioPrice.toFixed(3) +
-      '/1K tokens，补全：$' +
-      completionRatioPrice.toFixed(3) +
-      '/1K tokens'
+      <>
+        <article>
+          <p>提示 ${inputRatioPrice} / 1M tokens</p>
+          <p>补全 ${completionRatioPrice} / 1M tokens</p>
+          <p></p>
+          <p>
+            提示 {inputTokens} tokens / 1M tokens * ${inputRatioPrice} + 补全{' '}
+            {completionTokens} tokens / 1M tokens * ${completionRatioPrice} = $
+            {price.toFixed(6)}
+          </p>
+        </article>
+      </>
     );
   }
 }

web/src/pages/Channel/EditChannel.js

@@ -99,6 +99,7 @@ const EditChannel = (props) => {
             'mj_blend',
             'mj_upscale',
             'mj_describe',
+            'mj_uploads',
           ];
           break;
         case 5:
@@ -118,6 +119,7 @@ const EditChannel = (props) => {
             'mj_high_variation',
             'mj_low_variation',
             'mj_pan',
+            'mj_uploads',
           ];
           break;
         default:
@@ -296,24 +298,39 @@ const EditChannel = (props) => {
     }
   };
 
-  const addCustomModel = () => {
+  const addCustomModels = () => {
     if (customModel.trim() === '') return;
-    if (inputs.models.includes(customModel)) return showError('该模型已存在！');
+    // 使用逗号分隔字符串，然后去除每个模型名称前后的空格
+    const modelArray = customModel.split(',').map(model => model.trim());
+    
     let localModels = [...inputs.models];
-    localModels.push(customModel);
-    let localModelOptions = [];
-    localModelOptions.push({
-      key: customModel,
-      text: customModel,
-      value: customModel,
-    });
-    setModelOptions((modelOptions) => {
-      return [...modelOptions, ...localModelOptions];
+    let localModelOptions = [...modelOptions];
+    let hasError = false;
+
+    modelArray.forEach(model => {
+      // 检查模型是否已存在，且模型名称非空
+      if (model && !localModels.includes(model)) {
+        localModels.push(model); // 添加到模型列表
+        localModelOptions.push({ // 添加到下拉选项
+          key: model,
+          text: model,
+          value: model,
+        });
+      } else if (model) {
+        showError('某些模型已存在！');
+        hasError = true;
+      }
     });
+
+    if (hasError) return; // 如果有错误则终止操作
+
+    // 更新状态值
+    setModelOptions(localModelOptions);
     setCustomModel('');
     handleInputChange('models', localModels);
   };
 
+
   return (
     <>
       <SideSheet
@@ -540,7 +557,7 @@ const EditChannel = (props) => {
             </Space>
             <Input
               addonAfter={
-                <Button type='primary' onClick={addCustomModel}>
+                <Button type='primary' onClick={addCustomModels}>
                   填入
                 </Button>
               }

web/src/pages/Pricing/index.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import ModelPricing from '../../components/ModelPricing.js';
+
+const Pricing = () => (
+  <>
+    <ModelPricing />
+  </>
+);
+
+export default Pricing;