chore: more hints in model mapping textarea (#205)

* chore: more hints in model mapping textarea

* fix: fix variable not defined

---------

Co-authored-by: JustSong <songquanpeng@foxmail.com>

web/src/constants/channel.constants.js

@@ -10,4 +10,4 @@ export const CHANNEL_OPTIONS = [
   { key: 9, text: 'AI.LS', value: 9, color: 'yellow' },
   { key: 9, text: 'AI.LS', value: 9, color: 'yellow' },
   { key: 10, text: 'AI Proxy', value: 10, color: 'purple' },
   { key: 10, text: 'AI Proxy', value: 10, color: 'purple' },
   { key: 12, text: 'API2GPT', value: 12, color: 'blue' }
   { key: 12, text: 'API2GPT', value: 12, color: 'blue' }
-];
+];
\ No newline at end of file

web/src/pages/Channel/EditChannel.js

@@ -4,6 +4,12 @@ import { useParams } from 'react-router-dom';
 import { API, showError, showInfo, showSuccess, verifyJSON } from '../../helpers';
 import { API, showError, showInfo, showSuccess, verifyJSON } from '../../helpers';
 import { CHANNEL_OPTIONS } from '../../constants';
 import { CHANNEL_OPTIONS } from '../../constants';
 
 
+const MODEL_MAPPING_EXAMPLE = {
+  'gpt-3.5-turbo-0301': 'gpt-3.5-turbo',
+  'gpt-4-0314': 'gpt-4',
+  'gpt-4-32k-0314': 'gpt-4-32k'
+};
+
 const EditChannel = () => {
 const EditChannel = () => {
   const params = useParams();
   const params = useParams();
   const channelId = params.id;
   const channelId = params.id;
@@ -15,7 +21,7 @@ const EditChannel = () => {
     key: '',
     key: '',
     base_url: '',
     base_url: '',
     other: '',
     other: '',
-    model_mapping:'',
+    model_mapping: '',
     models: [],
     models: [],
     groups: ['default']
     groups: ['default']
   };
   };
@@ -98,7 +104,7 @@ const EditChannel = () => {
       showInfo('请至少选择一个模型！');
       showInfo('请至少选择一个模型！');
       return;
       return;
     }
     }
-    if (inputs.model_mapping !== "" && !verifyJSON(inputs.model_mapping)) {
+    if (inputs.model_mapping !== '' && !verifyJSON(inputs.model_mapping)) {
       showInfo('模型映射必须是合法的 JSON 格式！');
       showInfo('模型映射必须是合法的 JSON 格式！');
       return;
       return;
     }
     }
@@ -257,11 +263,11 @@ const EditChannel = () => {
           <Form.Field>
           <Form.Field>
             <Form.TextArea
             <Form.TextArea
               label='模型映射'
               label='模型映射'
-              placeholder={'为一个 JSON 文本，键为用户请求的模型名称，值为要替换的模型名称'}
+              placeholder={`为一个 JSON 文本，键为用户请求的模型名称，值为要替换的模型名称，例如：\n${JSON.stringify(MODEL_MAPPING_EXAMPLE, null, 2)}`}
               name='model_mapping'
               name='model_mapping'
               onChange={handleInputChange}
               onChange={handleInputChange}
               value={inputs.model_mapping}
               value={inputs.model_mapping}
-              style={{ minHeight: 100, fontFamily: 'JetBrains Mono, Consolas' }}
+              style={{ minHeight: 150, fontFamily: 'JetBrains Mono, Consolas' }}
               autoComplete='new-password'
               autoComplete='new-password'
             />
             />
           </Form.Field>
           </Form.Field>