feat: 完善获取模型列表功能 （close #237)

价格页样式修改、倍率说明、大小写搜索、复制名称

controller/channel.go

@@ -1,6 +1,8 @@
 package controller
 
 import (
+	"encoding/json"
+	"fmt"
 	"github.com/gin-gonic/gin"
 	"net/http"
 	"one-api/common"
@@ -9,6 +11,34 @@ import (
 	"strings"
 )
 
+type OpenAIModel struct {
+	ID         string `json:"id"`
+	Object     string `json:"object"`
+	Created    int64  `json:"created"`
+	OwnedBy    string `json:"owned_by"`
+	Permission []struct {
+		ID                 string `json:"id"`
+		Object             string `json:"object"`
+		Created            int64  `json:"created"`
+		AllowCreateEngine  bool   `json:"allow_create_engine"`
+		AllowSampling      bool   `json:"allow_sampling"`
+		AllowLogprobs      bool   `json:"allow_logprobs"`
+		AllowSearchIndices bool   `json:"allow_search_indices"`
+		AllowView          bool   `json:"allow_view"`
+		AllowFineTuning    bool   `json:"allow_fine_tuning"`
+		Organization       string `json:"organization"`
+		Group              string `json:"group"`
+		IsBlocking         bool   `json:"is_blocking"`
+	} `json:"permission"`
+	Root   string `json:"root"`
+	Parent string `json:"parent"`
+}
+
+type OpenAIModelsResponse struct {
+	Data    []OpenAIModel `json:"data"`
+	Success bool          `json:"success"`
+}
+
 func GetAllChannels(c *gin.Context) {
 	p, _ := strconv.Atoi(c.Query("p"))
 	pageSize, _ := strconv.Atoi(c.Query("page_size"))
@@ -35,6 +65,65 @@ func GetAllChannels(c *gin.Context) {
 	return
 }
 
+func FetchUpstreamModels(c *gin.Context) {
+	id, err := strconv.Atoi(c.Param("id"))
+	if err != nil {
+		c.JSON(http.StatusOK, gin.H{
+			"success": false,
+			"message": err.Error(),
+		})
+		return
+	}
+	channel, err := model.GetChannelById(id, true)
+	if err != nil {
+		c.JSON(http.StatusOK, gin.H{
+			"success": false,
+			"message": err.Error(),
+		})
+		return
+	}
+	if channel.Type != common.ChannelTypeOpenAI {
+		c.JSON(http.StatusOK, gin.H{
+			"success": false,
+			"message": "仅支持 OpenAI 类型渠道",
+		})
+		return
+	}
+	url := fmt.Sprintf("%s/v1/models", *channel.BaseURL)
+	body, err := GetResponseBody("GET", url, channel, GetAuthHeader(channel.Key))
+	if err != nil {
+		c.JSON(http.StatusOK, gin.H{
+			"success": false,
+			"message": err.Error(),
+		})
+	}
+	result := OpenAIModelsResponse{}
+	err = json.Unmarshal(body, &result)
+	if err != nil {
+		c.JSON(http.StatusOK, gin.H{
+			"success": false,
+			"message": err.Error(),
+		})
+	}
+	if !result.Success {
+		c.JSON(http.StatusOK, gin.H{
+			"success": false,
+			"message": "上游返回错误",
+		})
+	}
+
+	var ids []string
+	for _, model := range result.Data {
+		ids = append(ids, model.ID)
+	}
+
+	c.JSON(http.StatusOK, gin.H{
+		"success": true,
+		"message": "",
+		"data":    ids,
+	})
+}
+
 func FixChannelsAbilities(c *gin.Context) {
 	count, err := model.FixAbility()
 	if err != nil {

controller/model.go

@@ -203,9 +203,10 @@ func RetrieveModel(c *gin.Context) {
 
 func GetPricing(c *gin.Context) {
 	userId := c.GetInt("id")
-	group, err := model.CacheGetUserGroup(userId)
+	// if no login, get default group ratio
 	groupRatio := common.GetGroupRatio("default")
-	if err != nil {
+	group, err := model.CacheGetUserGroup(userId)
+	if err == nil {
 		groupRatio = common.GetGroupRatio(group)
 	}
 	pricing := model.GetPricing(group)

router/api-router.go

@@ -90,6 +90,8 @@ func SetApiRouter(router *gin.Engine) {
 			channelRoute.DELETE("/:id", controller.DeleteChannel)
 			channelRoute.POST("/batch", controller.DeleteChannelBatch)
 			channelRoute.POST("/fix", controller.FixChannelsAbilities)
+			channelRoute.GET("/fetch_models/:id", controller.FetchUpstreamModels)
+
 		}
 		tokenRoute := apiRouter.Group("/token")
 		tokenRoute.Use(middleware.UserAuth())

web/src/components/LogsTable.js

@@ -325,6 +325,9 @@ const LogsTable = () => {
       title: '详情',
       dataIndex: 'content',
       render: (text, record, index) => {
+        if (record.other === '') {
+          record.other = '{}'
+        }
         let other = JSON.parse(record.other);
         if (other == null) {
           return (

web/src/components/ModelPricing.js

@@ -1,4 +1,4 @@
-import React, { useContext, useEffect, useRef, useState } from 'react';
+import React, { useContext, useEffect, useRef, useMemo, useState } from 'react';
 import { API, copy, showError, showSuccess } from '../helpers';
 
 import {
@@ -10,8 +10,16 @@ import {
   Table,
   Tag,
   Tooltip,
+  Popover,
+  ImagePreview,
+  Button,
 } from '@douyinfe/semi-ui';
-import { stringToColor } from '../helpers/render.js';
+import {
+  IconMore,
+  IconVerify,
+  IconUploadError,
+  IconHelpCircle,
+} from '@douyinfe/semi-icons';
 import { UserContext } from '../context/User/index.js';
 import Text from '@douyinfe/semi-ui/lib/es/typography/text';
 
@@ -20,42 +28,74 @@ function renderQuotaType(type) {
   switch (type) {
     case 1:
       return (
-        <Tag color='green' size='large'>
+        <Tag color='teal' size='large'>
           按次计费
         </Tag>
       );
     case 0:
       return (
-        <Tag color='blue' size='large'>
+        <Tag color='violet' size='large'>
           按量计费
         </Tag>
       );
     default:
-      return (
-        <Tag color='white' size='large'>
-          未知
-        </Tag>
-      );
+      return '未知';
   }
 }
 
 function renderAvailable(available) {
   return available ? (
-    <Tag color='green' size='large'>
-      可用
-    </Tag>
+    <Popover
+        content={
+          <div style={{ padding: 8 }}>您的分组可以使用该模型</div>
+        }
+        position='top'
+        key={available}
+        style={{
+            backgroundColor: 'rgba(var(--semi-blue-4),1)',
+            borderColor: 'rgba(var(--semi-blue-4),1)',
+            color: 'var(--semi-color-white)',
+            borderWidth: 1,
+            borderStyle: 'solid',
+        }}
+    >
+        <IconVerify style={{ color: 'green' }}  size="large" />
+    </Popover>
   ) : (
-    <Tooltip content='您所在的分组不可用'>
-      <Tag color='red' size='large'>
-        不可用
-      </Tag>
-    </Tooltip>
+    <Popover
+        content={
+          <div style={{ padding: 8 }}>您的分组无权使用该模型</div>
+        }
+        position='top'
+        key={available}
+        style={{
+            backgroundColor: 'rgba(var(--semi-blue-4),1)',
+            borderColor: 'rgba(var(--semi-blue-4),1)',
+            color: 'var(--semi-color-white)',
+            borderWidth: 1,
+            borderStyle: 'solid',
+        }}
+    >
+        <IconUploadError style={{ color: '#FFA54F' }}  size="large" />
+    </Popover>
   );
 }
 
 const ModelPricing = () => {
   const [filteredValue, setFilteredValue] = useState([]);
   const compositionRef = useRef({ isComposition: false });
+  const [selectedRowKeys, setSelectedRowKeys] = useState([]);
+  const [modalImageUrl, setModalImageUrl] = useState('');
+  const [isModalOpenurl, setIsModalOpenurl] = useState(false);
+
+  const rowSelection = useMemo(
+      () => ({
+          onChange: (selectedRowKeys, selectedRows) => {
+            setSelectedRowKeys(selectedRowKeys);
+          },
+      }),
+      []
+  );
 
   const handleChange = (value) => {
     if (compositionRef.current.isComposition) {
@@ -103,7 +143,7 @@ const ModelPricing = () => {
         return (
           <>
             <Tag
-              color={stringToColor(text)}
+              color='green'
               size='large'
               onClick={() => {
                 copyText(text);
@@ -114,7 +154,8 @@ const ModelPricing = () => {
           </>
         );
       },
-      onFilter: (value, record) => record.model_name.includes(value),
+      onFilter: (value, record) =>
+        record.model_name.toLowerCase().includes(value.toLowerCase()),
       filteredValue,
     },
     {
@@ -126,18 +167,43 @@ const ModelPricing = () => {
       sorter: (a, b) => a.quota_type - b.quota_type,
     },
     {
-      title: '模型倍率',
+      title: () => (
+        <span style={{'display':'flex','alignItems':'center'}}>
+          倍率
+          <Popover
+            content={
+              <div style={{ padding: 8 }}>倍率是为了方便换算不同价格的模型<br/>点击查看倍率说明</div>
+            }
+            position='top'
+            style={{
+                backgroundColor: 'rgba(var(--semi-blue-4),1)',
+                borderColor: 'rgba(var(--semi-blue-4),1)',
+                color: 'var(--semi-color-white)',
+                borderWidth: 1,
+                borderStyle: 'solid',
+            }}
+          >
+            <IconHelpCircle
+              onClick={() => {
+                setModalImageUrl('/ratio.png');
+                setIsModalOpenurl(true);
+              }}
+            />
+          </Popover>
+        </span>
+      ),
       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>;
+        let content = text;
+        let completionRatio = parseFloat(record.completion_ratio.toFixed(3));
+        content = (
+          <>
+            <Text>模型：{record.quota_type === 0 ? text : '无'}</Text>
+            <br />
+            <Text>补全：{record.quota_type === 0 ? completionRatio : '无'}</Text>
+          </>
+        );
+        return <div>{content}</div>;
       },
     },
     {
@@ -146,10 +212,11 @@ const ModelPricing = () => {
       render: (text, record, index) => {
         let content = text;
         if (record.quota_type === 0) {
-          let inputRatioPrice = record.model_ratio * record.group_ratio;
+          // 这里的 *2 是因为 1倍率=0.002刀，请勿删除
+          let inputRatioPrice = record.model_ratio * 2 * record.group_ratio;
           let completionRatioPrice =
             record.model_ratio *
-            record.completion_ratio *
+            record.completion_ratio * 2 *
             record.group_ratio;
           content = (
             <>
@@ -174,7 +241,7 @@ const ModelPricing = () => {
 
   const setModelsFormat = (models, groupRatio) => {
     for (let i = 0; i < models.length; i++) {
-      models[i].key = i;
+      models[i].key = models[i].model_name;
       models[i].group_ratio = groupRatio;
     }
     // sort by quota_type
@@ -237,15 +304,38 @@ const ModelPricing = () => {
       <Layout>
         {userState.user ? (
           <Banner
-            type='info'
+            type="success"
+            fullMode={false}
+            closeIcon="null"
             description={`您的分组为：${userState.user.group}，分组倍率为：${groupRatio}`}
           />
         ) : (
           <Banner
             type='warning'
+            fullMode={false}
+            closeIcon="null"
             description={`您还未登陆，显示的价格为默认分组倍率: ${groupRatio}`}
           />
         )}
+        <br/>
+        <Banner 
+            type="info"
+            fullMode={false}
+            description={<div>按量计费费用 = 分组倍率 × 模型倍率 × （提示token数 + 补全token数 × 补全倍率）/ 500000 （单位：美元）</div>}
+            closeIcon="null"
+        />
+        <br/>
+        <Button
+          theme='light'
+          type='tertiary'
+          style={{width: 150}}
+          onClick={() => {
+            copyText(selectedRowKeys);
+          }}
+          disabled={selectedRowKeys == ""}
+        >
+          复制选中模型
+        </Button>
         <Table
           style={{ marginTop: 5 }}
           columns={columns}
@@ -255,6 +345,12 @@ const ModelPricing = () => {
             pageSize: models.length,
             showSizeChanger: false,
           }}
+          rowSelection={rowSelection}
+        />
+        <ImagePreview
+          src={modalImageUrl}
+          visible={isModalOpenurl}
+          onVisibleChange={(visible) => setIsModalOpenurl(visible)}
         />
       </Layout>
     </>

web/src/helpers/render.js

@@ -149,8 +149,9 @@ export function renderModelPrice(
     if (completionRatio === undefined) {
       completionRatio = 0;
     }
-    let inputRatioPrice = modelRatio * groupRatio;
-    let completionRatioPrice = modelRatio * completionRatio * groupRatio;
+    // 这里的 *2 是因为 1倍率=0.002刀，请勿删除
+    let inputRatioPrice = modelRatio * 2.0 * groupRatio;
+    let completionRatioPrice = modelRatio * 2.0 * completionRatio * groupRatio;
     let price =
       (inputTokens / 1000000) * inputRatioPrice +
       (completionTokens / 1000000) * completionRatioPrice;

web/src/pages/Channel/EditChannel.js

@@ -15,6 +15,7 @@ import {
   Space,
   Spin,
   Button,
+  Tooltip,
   Input,
   Typography,
   Select,
@@ -24,6 +25,7 @@ import {
 } from '@douyinfe/semi-ui';
 import { Divider } from 'semantic-ui-react';
 import { getChannelModels, loadChannelModels } from '../../components/utils.js';
+import axios from 'axios';
 
 const MODEL_MAPPING_EXAMPLE = {
   'gpt-3.5-turbo-0301': 'gpt-3.5-turbo',
@@ -35,6 +37,8 @@ const STATUS_CODE_MAPPING_EXAMPLE = {
   400: '500',
 };
 
+const fetchButtonTips = "1. 新建渠道时，请求通过当前浏览器发出；2. 编辑已有渠道，请求通过后端服务器发出"
+
 function type2secretPrompt(type) {
   // inputs.type === 15 ? '按照如下格式输入：APIKey|SecretKey' : (inputs.type === 18 ? '按照如下格式输入：APPID|APISecret|APIKey' : '请输入渠道对应的鉴权密钥')
   switch (type) {
@@ -173,12 +177,60 @@ const EditChannel = (props) => {
     setLoading(false);
   };
 
+
+  const fetchUpstreamModelList = async (name) => {
+    if (inputs["type"] !== 1) {
+      showError("仅支持 OpenAI 接口格式")
+      return;
+    }
+    setLoading(true)
+    const models = inputs["models"] || []
+    let err = false;
+    if (isEdit) {
+      const res = await API.get("/api/channel/fetch_models/" + channelId)
+      if (res.data && res.data?.success) {
+        models.push(...res.data.data)
+      } else {
+        err = true
+      }
+    } else {
+      if (!inputs?.["key"]) {
+        showError("请填写密钥")
+        err = true
+      } else {
+        try {
+          const host = new URL((inputs["base_url"] || "https://api.openai.com"))
+
+          const url = `https://${host.hostname}/v1/models`;
+          const key = inputs["key"];
+          const res = await axios.get(url, {
+            headers: {
+              'Authorization': `Bearer ${key}`
+            }
+          })
+          if (res.data && res.data?.success) {
+            models.push(...es.data.data.map((model) => model.id))
+          } else {
+            err = true
+          }
+        }
+        catch (error) {
+          err = true
+        }
+      }
+    }
+    if (!err) {
+      handleInputChange(name, Array.from(new Set(models)));
+      showSuccess("获取模型列表成功");
+    } else {
+      showError('获取模型列表失败');
+    }
+    setLoading(false);
+  }
+
   const fetchModels = async () => {
     try {
       let res = await API.get(`/api/channel/models`);
-      if (res === undefined) {
-        return;
-      }
       let localModelOptions = res.data.data.map((model) => ({
         label: model.id,
         value: model.id,
@@ -331,6 +383,7 @@ const EditChannel = (props) => {
     handleInputChange('models', localModels);
   };
 
+
   return (
     <>
       <SideSheet
@@ -550,6 +603,16 @@ const EditChannel = (props) => {
               >
                 填入所有模型
               </Button>
+              <Tooltip content={fetchButtonTips}>
+                <Button
+                  type='tertiary'
+                  onClick={() => {
+                    fetchUpstreamModelList('models');
+                  }}
+                >
+                  获取模型列表
+                </Button>
+              </Tooltip>
               <Button
                 type='warning'
                 onClick={() => {