Upload 3 files

Dockerfile

@@ -0,0 +1,84 @@
+# Stage 0: Fetcher - Get latest code and replace file
+# Use an image with git installed
+FROM alpine/git:latest AS fetcher
+
+# Define a build argument to bust the cache
+# ARG CACHE_BUSTER -- Removed as it cannot be passed dynamically on HF
+
+# Set working directory
+WORKDIR /app
+
+# Clone the main repository
+# Add date command output to a file to bust cache *before* cloning
+RUN date +%s > /tmp/build_timestamp.txt && \
+    git clone --depth 1 https://github.com/QuantumNous/new-api.git .
+
+# Copy the custom EditChannel.js from the local build context
+COPY EditChannel.js ./web/src/pages/Channel/EditChannel.js
+RUN echo "EditChannel.js copied from local context successfully."
+
+# Stage 1: Frontend Builder - Build the web UI using bun
+FROM oven/bun:latest AS frontend-builder
+
+WORKDIR /build
+
+# Copy package.json first to leverage Docker cache for dependencies
+COPY --from=fetcher /app/web/package.json .
+RUN bun install
+
+# Copy the rest of the web source code and the VERSION file
+COPY --from=fetcher /app/web .
+COPY --from=fetcher /app/VERSION .
+
+# Build the frontend, reading version from the VERSION file
+RUN DISABLE_ESLINT_PLUGIN='true' VITE_REACT_APP_VERSION=$(cat VERSION) bun run build
+
+
+# Stage 2: Backend Builder - Build the Go application
+FROM golang:alpine AS backend-builder
+
+ENV GO111MODULE=on \
+    CGO_ENABLED=0 \
+    GOOS=linux
+
+WORKDIR /build
+
+# Copy Go module files first for dependency caching
+COPY --from=fetcher /app/go.mod /app/go.sum ./
+RUN go mod download
+
+# Copy the entire application source code from the fetcher stage
+COPY --from=fetcher /app .
+
+# Copy the built frontend assets from the frontend-builder stage
+COPY --from=frontend-builder /build/dist ./web/dist
+
+# Build the Go application, embedding the version
+RUN go build -ldflags "-s -w -X 'one-api/common.Version=$(cat VERSION)'" -o one-api
+
+
+# Stage 3: Final Stage - Create the final runtime image
+FROM alpine
+
+# Update, upgrade, install runtime dependencies and clean up
+RUN apk update && \
+    apk upgrade && \
+    apk add --no-cache ca-certificates tzdata ffmpeg && \
+    update-ca-certificates && \
+    rm -rf /var/cache/apk/*
+
+# Copy the built Go application from the backend-builder stage
+COPY --from=backend-builder /build/one-api /one-api
+
+# Create the logs directory and ensure /data is writable by the application user
+RUN mkdir -p /data/logs && \
+    chmod -R a+w /data
+
+# Expose the application port
+EXPOSE 3000
+
+# Set the working directory for the running container
+WORKDIR /data
+
+# Define the entry point for the container
+ENTRYPOINT ["/one-api"] 

EditChannel.js

@@ -0,0 +1,1208 @@
+import React, { useEffect, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
+import {
+  API,
+  isMobile,
+  showError,
+  showInfo,
+  showSuccess,
+  verifyJSON,
+} from '../../helpers';
+import { CHANNEL_OPTIONS } from '../../constants';
+import {
+  SideSheet,
+  Space,
+  Spin,
+  Button,
+  Input,
+  Typography,
+  Select,
+  TextArea,
+  Checkbox,
+  Banner,
+  Modal,
+  ImagePreview,
+  Card,
+  Tag,
+} from '@douyinfe/semi-ui';
+import { getChannelModels } from '../../helpers';
+import {
+  IconSave,
+  IconClose,
+  IconServer,
+  IconSetting,
+  IconCode,
+  IconGlobe,
+} from '@douyinfe/semi-icons';
+
+const { Text, Title } = Typography;
+
+const MODEL_MAPPING_EXAMPLE = {
+  'gpt-3.5-turbo': 'gpt-3.5-turbo-0125',
+};
+
+const STATUS_CODE_MAPPING_EXAMPLE = {
+  400: '500',
+};
+
+const REGION_EXAMPLE = {
+  default: 'us-central1',
+  'claude-3-5-sonnet-20240620': 'europe-west1',
+};
+
+function type2secretPrompt(type) {
+  // inputs.type === 15 ? '按照如下格式输入：APIKey|SecretKey' : (inputs.type === 18 ? '按照如下格式输入：APPID|APISecret|APIKey' : '请输入渠道对应的鉴权密钥')
+  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';
+    case 33:
+      return '按照如下格式输入：Ak|Sk|Region';
+    default:
+      return '请输入渠道对应的鉴权密钥';
+  }
+}
+
+const EditChannel = (props) => {
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+  const channelId = props.editingChannel.id;
+  const isEdit = channelId !== undefined;
+  const [loading, setLoading] = useState(isEdit);
+  const handleCancel = () => {
+    props.handleClose();
+  };
+  const originInputs = {
+    name: '',
+    type: 1,
+    key: '',
+    openai_organization: '',
+    max_input_tokens: 0,
+    base_url: '',
+    other: '',
+    model_mapping: '',
+    status_code_mapping: '',
+    models: [],
+    auto_ban: 1,
+    test_model: '',
+    groups: ['default'],
+    priority: 0,
+    weight: 0,
+    tag: '',
+  };
+  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 [modalImageUrl, setModalImageUrl] = useState('');
+  const [isModalOpenurl, setIsModalOpenurl] = useState(false);
+  const handleInputChange = (name, value) => {
+    if (name === 'base_url' && value.endsWith('/v1')) {
+      Modal.confirm({
+        title: '警告',
+        content:
+          '不需要在末尾加/v1，New API会自动处理，添加后可能导致请求失败，是否继续？',
+        onOk: () => {
+          setInputs((inputs) => ({ ...inputs, [name]: value }));
+        },
+      });
+      return;
+    }
+    setInputs((inputs) => ({ ...inputs, [name]: value }));
+    if (name === 'type') {
+      let localModels = [];
+      switch (value) {
+        case 2:
+          localModels = [
+            'mj_imagine',
+            'mj_variation',
+            'mj_reroll',
+            'mj_blend',
+            'mj_upscale',
+            'mj_describe',
+            'mj_uploads',
+          ];
+          break;
+        case 5:
+          localModels = [
+            'swap_face',
+            'mj_imagine',
+            'mj_variation',
+            'mj_reroll',
+            'mj_blend',
+            'mj_upscale',
+            'mj_describe',
+            'mj_zoom',
+            'mj_shorten',
+            'mj_modal',
+            'mj_inpaint',
+            'mj_custom_zoom',
+            'mj_high_variation',
+            'mj_low_variation',
+            'mj_pan',
+            'mj_uploads',
+          ];
+          break;
+        case 36:
+          localModels = ['suno_music', 'suno_lyrics'];
+          break;
+        default:
+          localModels = getChannelModels(value);
+          break;
+      }
+      if (inputs.models.length === 0) {
+        setInputs((inputs) => ({ ...inputs, models: localModels }));
+      }
+      setBasicModels(localModels);
+    }
+    //setAutoBan
+  };
+
+  const loadChannel = async () => {
+    setLoading(true);
+    let res = await API.get(`/api/channel/${channelId}`);
+    if (res === undefined) {
+      return;
+    }
+    const { success, message, data } = res.data;
+    if (success) {
+      if (data.models === '') {
+        data.models = [];
+      } else {
+        data.models = data.models.split(',');
+      }
+      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);
+      }
+      setBasicModels(getChannelModels(data.type));
+      // console.log(data);
+    } else {
+      showError(message);
+    }
+    setLoading(false);
+  };
+
+  const fetchUpstreamModelList = async (name) => {
+    // if (inputs['type'] !== 1) {
+    //   showError(t('仅支持 OpenAI 接口格式'));
+    //   return;
+    // }
+    setLoading(true);
+    const models = inputs['models'] || [];
+    let err = false;
+
+    if (isEdit) {
+      // 如果是编辑模式，使用已有的channel id获取模型列表
+      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(t('请填写密钥'));
+        err = true;
+      } else {
+        try {
+          const res = await API.post('/api/channel/fetch_models', {
+            base_url: inputs['base_url'],
+            type: inputs['type'],
+            key: inputs['key'],
+          });
+
+          if (res.data && res.data.success) {
+            models.push(...res.data.data);
+          } else {
+            err = true;
+          }
+        } catch (error) {
+          console.error('Error fetching models:', error);
+          err = true;
+        }
+      }
+    }
+
+    if (!err) {
+      handleInputChange(name, Array.from(new Set(models)));
+      showSuccess(t('获取模型列表成功'));
+    } else {
+      showError(t('获取模型列表失败'));
+    }
+    setLoading(false);
+  };
+
+  const fetchModels = async () => {
+    try {
+      let res = await API.get(`/api/channel/models`);
+      let localModelOptions = res.data.data.map((model) => ({
+        label: 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-') || model.id.startsWith('text-');
+          })
+          .map((model) => model.id),
+      );
+    } catch (error) {
+      showError(error.message);
+    }
+  };
+
+  const fetchGroups = async () => {
+    try {
+      let res = await API.get(`/api/group/`);
+      if (res === undefined) {
+        return;
+      }
+      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.label === model)) {
+        localModelOptions.push({
+          label: model,
+          value: model,
+        });
+      }
+    });
+    setModelOptions(localModelOptions);
+  }, [originModelOptions, inputs.models]);
+
+  useEffect(() => {
+    fetchModels().then();
+    fetchGroups().then();
+    if (isEdit) {
+      loadChannel().then(() => { });
+    } else {
+      setInputs(originInputs);
+      let localModels = getChannelModels(inputs.type);
+      setBasicModels(localModels);
+      setInputs((inputs) => ({ ...inputs, models: localModels }));
+    }
+  }, [props.editingChannel.id]);
+
+  const submit = async () => {
+    if (!isEdit && (inputs.name === '' || inputs.key === '')) {
+      showInfo(t('请填写渠道名称和渠道密钥！'));
+      return;
+    }
+    if (inputs.models.length === 0) {
+      showInfo(t('请至少选择一个模型！'));
+      return;
+    }
+    if (inputs.model_mapping !== '' && !verifyJSON(inputs.model_mapping)) {
+      showInfo(t('模型映射必须是合法的 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 === 18 && localInputs.other === '') {
+      localInputs.other = 'v2.1';
+    }
+    let res;
+    if (!Array.isArray(localInputs.models)) {
+      showError(t('提交失败，请勿重复提交！'));
+      handleCancel();
+      return;
+    }
+    localInputs.auto_ban = autoBan ? 1 : 0;
+    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(t('渠道更新成功！'));
+      } else {
+        showSuccess(t('渠道创建成功！'));
+        setInputs(originInputs);
+      }
+      props.refresh();
+      props.handleClose();
+    } else {
+      showError(message);
+    }
+  };
+
+  const addCustomModels = () => {
+    if (customModel.trim() === '') return;
+    const modelArray = customModel.split(',').map((model) => model.trim());
+
+    let localModels = [...inputs.models];
+    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(t('某些模型已存在！'));
+        hasError = true;
+      }
+    });
+
+    if (hasError) return;
+
+    setModelOptions(localModelOptions);
+    setCustomModel('');
+    handleInputChange('models', localModels);
+  };
+
+  const handleAddPrefix = () => {
+    const channelName = inputs.name;
+    const currentModels = inputs.models; // This is an array of strings
+
+    if (!channelName || !currentModels || currentModels.length === 0) {
+      showError(t('请先填写渠道名称并选择模型！'));
+      return;
+    }
+
+    const prefixedModels = currentModels.map(
+      (model) => `${channelName}/${model}`,
+    );
+
+    const mapping = {};
+    prefixedModels.forEach((prefixedModel, index) => {
+      mapping[prefixedModel] = currentModels[index];
+    });
+
+    const modelMappingJson = JSON.stringify(mapping, null, 2); // Pretty print JSON
+
+    handleInputChange('models', prefixedModels);
+    handleInputChange('model_mapping', modelMappingJson);
+    showSuccess(t('模型前缀添加成功！'));
+  };
+
+  return (
+    <>
+      <SideSheet
+        placement={isEdit ? 'right' : 'left'}
+        title={
+          <Space>
+            <Tag color="blue" shape="circle">{isEdit ? t('编辑') : t('新建')}</Tag>
+            <Title heading={4} className="m-0">
+              {isEdit ? t('更新渠道信息') : t('创建新的渠道')}
+            </Title>
+          </Space>
+        }
+        headerStyle={{
+          borderBottom: '1px solid var(--semi-color-border)',
+          padding: '24px'
+        }}
+        bodyStyle={{
+          backgroundColor: 'var(--semi-color-bg-0)',
+          padding: '0'
+        }}
+        visible={props.visible}
+        width={isMobile() ? '100%' : 600}
+        footer={
+          <div className="flex justify-end bg-white">
+            <Space>
+              <Button
+                theme="solid"
+                size="large"
+                className="!rounded-full"
+                onClick={submit}
+                icon={<IconSave />}
+              >
+                {t('提交')}
+              </Button>
+              <Button
+                theme="light"
+                size="large"
+                className="!rounded-full"
+                type="primary"
+                onClick={handleCancel}
+                icon={<IconClose />}
+              >
+                {t('取消')}
+              </Button>
+            </Space>
+          </div>
+        }
+        closeIcon={null}
+        onCancel={() => handleCancel()}
+      >
+        <Spin spinning={loading}>
+          <div className="p-6">
+            <Card className="!rounded-2xl shadow-sm border-0 mb-6">
+              <div className="flex items-center mb-4 p-6 rounded-xl" style={{
+                background: 'linear-gradient(135deg, #1e3a8a 0%, #2563eb 50%, #3b82f6 100%)',
+                position: 'relative'
+              }}>
+                <div className="absolute inset-0 overflow-hidden">
+                  <div className="absolute -top-10 -right-10 w-40 h-40 bg-white opacity-5 rounded-full"></div>
+                  <div className="absolute -bottom-8 -left-8 w-24 h-24 bg-white opacity-10 rounded-full"></div>
+                </div>
+                <div className="w-10 h-10 rounded-full bg-white/20 flex items-center justify-center mr-4 relative">
+                  <IconServer size="large" style={{ color: '#ffffff' }} />
+                </div>
+                <div className="relative">
+                  <Text style={{ color: '#ffffff' }} className="text-lg font-medium">{t('基本信息')}</Text>
+                  <div style={{ color: '#ffffff' }} className="text-sm opacity-80">{t('渠道的基本配置信息')}</div>
+                </div>
+              </div>
+
+              <div className="space-y-4">
+                <div>
+                  <Text strong className="block mb-2">{t('类型')}</Text>
+                  <Select
+                    name='type'
+                    required
+                    optionList={CHANNEL_OPTIONS}
+                    value={inputs.type}
+                    onChange={(value) => handleInputChange('type', value)}
+                    style={{ width: '100%' }}
+                    filter
+                    searchPosition='dropdown'
+                    placeholder={t('请选择渠道类型')}
+                    size="large"
+                    className="!rounded-lg"
+                  />
+                </div>
+
+                <div>
+                  <Text strong className="block mb-2">{t('名称')}</Text>
+                  <Input
+                    required
+                    name='name'
+                    placeholder={t('请为渠道命名')}
+                    onChange={(value) => {
+                      handleInputChange('name', value);
+                    }}
+                    value={inputs.name}
+                    autoComplete='new-password'
+                    size="large"
+                    className="!rounded-lg"
+                  />
+                </div>
+
+                <div>
+                  <Text strong className="block mb-2">{t('密钥')}</Text>
+                  {batch ? (
+                    <TextArea
+                      name='key'
+                      required
+                      placeholder={t('请输入密钥，一行一个')}
+                      onChange={(value) => {
+                        handleInputChange('key', value);
+                      }}
+                      value={inputs.key}
+                      style={{ minHeight: 150, fontFamily: 'JetBrains Mono, Consolas' }}
+                      autoComplete='new-password'
+                      className="!rounded-lg"
+                    />
+                  ) : (
+                    <>
+                      {inputs.type === 41 ? (
+                        <TextArea
+                          name='key'
+                          required
+                          placeholder={
+                            '{\n' +
+                            '  "type": "service_account",\n' +
+                            '  "project_id": "abc-bcd-123-456",\n' +
+                            '  "private_key_id": "123xxxxx456",\n' +
+                            '  "private_key": "-----BEGIN PRIVATE KEY-----xxxx\n' +
+                            '  "client_email": "xxx@developer.gserviceaccount.com",\n' +
+                            '  "client_id": "111222333",\n' +
+                            '  "auth_uri": "https://accounts.google.com/o/oauth2/auth",\n' +
+                            '  "token_uri": "https://oauth2.googleapis.com/token",\n' +
+                            '  "auth_provider_x509_cert_url": "https://www.googleapis.com/oauth2/v1/certs",\n' +
+                            '  "client_x509_cert_url": "https://xxxxx.gserviceaccount.com",\n' +
+                            '  "universe_domain": "googleapis.com"\n' +
+                            '}'
+                          }
+                          onChange={(value) => {
+                            handleInputChange('key', value);
+                          }}
+                          autosize={{ minRows: 10 }}
+                          value={inputs.key}
+                          autoComplete='new-password'
+                          className="!rounded-lg font-mono"
+                        />
+                      ) : (
+                        <Input
+                          name='key'
+                          required
+                          placeholder={t(type2secretPrompt(inputs.type))}
+                          onChange={(value) => {
+                            handleInputChange('key', value);
+                          }}
+                          value={inputs.key}
+                          autoComplete='new-password'
+                          size="large"
+                          className="!rounded-lg"
+                        />
+                      )}
+                    </>
+                  )}
+                </div>
+
+                {!isEdit && (
+                  <div className="flex items-center">
+                    <Checkbox
+                      checked={batch}
+                      onChange={() => setBatch(!batch)}
+                    />
+                    <Text strong className="ml-2">{t('批量创建')}</Text>
+                  </div>
+                )}
+              </div>
+            </Card>
+
+            {/* API Configuration Card */}
+            <Card className="!rounded-2xl shadow-sm border-0 mb-6">
+              <div className="flex items-center mb-4 p-6 rounded-xl" style={{
+                background: 'linear-gradient(135deg, #065f46 0%, #059669 50%, #10b981 100%)',
+                position: 'relative'
+              }}>
+                <div className="absolute inset-0 overflow-hidden">
+                  <div className="absolute -top-10 -right-10 w-40 h-40 bg-white opacity-5 rounded-full"></div>
+                  <div className="absolute -bottom-8 -left-8 w-24 h-24 bg-white opacity-10 rounded-full"></div>
+                </div>
+                <div className="w-10 h-10 rounded-full bg-white/20 flex items-center justify-center mr-4 relative">
+                  <IconGlobe size="large" style={{ color: '#ffffff' }} />
+                </div>
+                <div className="relative">
+                  <Text style={{ color: '#ffffff' }} className="text-lg font-medium">{t('API 配置')}</Text>
+                  <div style={{ color: '#ffffff' }} className="text-sm opacity-80">{t('API 地址和相关配置')}</div>
+                </div>
+              </div>
+
+              <div className="space-y-4">
+                {inputs.type === 40 && (
+                  <Banner
+                    type='info'
+                    description={
+                      <div>
+                        <Text strong>{t('邀请链接')}:</Text>
+                        <Text
+                          link
+                          underline
+                          className="ml-2 cursor-pointer"
+                          onClick={() => window.open('https://cloud.siliconflow.cn/i/hij0YNTZ')}
+                        >
+                          https://cloud.siliconflow.cn/i/hij0YNTZ
+                        </Text>
+                      </div>
+                    }
+                    className='!rounded-lg'
+                  />
+                )}
+
+                {inputs.type === 3 && (
+                  <>
+                    <Banner
+                      type='warning'
+                      description={t('2025年5月10日后添加的渠道，不需要再在部署的时候移除模型名称中的"."')}
+                      className='!rounded-lg'
+                    />
+                    <div>
+                      <Text strong className="block mb-2">AZURE_OPENAI_ENDPOINT</Text>
+                      <Input
+                        name='azure_base_url'
+                        placeholder={t('请输入 AZURE_OPENAI_ENDPOINT，例如：https://docs-test-001.openai.azure.com')}
+                        onChange={(value) => handleInputChange('base_url', value)}
+                        value={inputs.base_url}
+                        autoComplete='new-password'
+                        size="large"
+                        className="!rounded-lg"
+                      />
+                    </div>
+                    <div>
+                      <Text strong className="block mb-2">{t('默认 API 版本')}</Text>
+                      <Input
+                        name='azure_other'
+                        placeholder={t('请输入默认 API 版本，例如：2025-04-01-preview')}
+                        onChange={(value) => handleInputChange('other', value)}
+                        value={inputs.other}
+                        autoComplete='new-password'
+                        size="large"
+                        className="!rounded-lg"
+                      />
+                    </div>
+                  </>
+                )}
+
+                {inputs.type === 8 && (
+                  <>
+                    <Banner
+                      type='warning'
+                      description={t('如果你对接的是上游One API或者New API等转发项目，请使用OpenAI类型，不要使用此类型，除非你知道你在做什么。')}
+                      className='!rounded-lg'
+                    />
+                    <div>
+                      <Text strong className="block mb-2">{t('完整的 Base URL，支持变量{model}')}</Text>
+                      <Input
+                        name='base_url'
+                        placeholder={t('请输入完整的URL，例如：https://api.openai.com/v1/chat/completions')}
+                        onChange={(value) => handleInputChange('base_url', value)}
+                        value={inputs.base_url}
+                        autoComplete='new-password'
+                        size="large"
+                        className="!rounded-lg"
+                      />
+                    </div>
+                  </>
+                )}
+
+                {inputs.type === 37 && (
+                  <Banner
+                    type='warning'
+                    description={t('Dify渠道只适配chatflow和agent，并且agent不支持图片！')}
+                    className='!rounded-lg'
+                  />
+                )}
+
+                {inputs.type !== 3 && inputs.type !== 8 && inputs.type !== 22 && inputs.type !== 36 && inputs.type !== 45 && (
+                  <div>
+                    <Text strong className="block mb-2">{t('API地址')}</Text>
+                    <Input
+                      name='base_url'
+                      placeholder={t('此项可选，用于通过自定义API地址来进行 API 调用，末尾不要带/v1和/')}
+                      onChange={(value) => handleInputChange('base_url', value)}
+                      value={inputs.base_url}
+                      autoComplete='new-password'
+                      size="large"
+                      className="!rounded-lg"
+                    />
+                    <Text type="tertiary" className="mt-1 text-xs">
+                      {t('对于官方渠道，new-api已经内置地址，除非是第三方代理站点或者Azure的特殊接入地址，否则不需要填写')}
+                    </Text>
+                  </div>
+                )}
+
+                {inputs.type === 22 && (
+                  <div>
+                    <Text strong className="block mb-2">{t('私有部署地址')}</Text>
+                    <Input
+                      name='base_url'
+                      placeholder={t('请输入私有部署地址，格式为：https://fastgpt.run/api/openapi')}
+                      onChange={(value) => handleInputChange('base_url', value)}
+                      value={inputs.base_url}
+                      autoComplete='new-password'
+                      size="large"
+                      className="!rounded-lg"
+                    />
+                  </div>
+                )}
+
+                {inputs.type === 36 && (
+                  <div>
+                    <Text strong className="block mb-2">
+                      {t('注意非Chat API，请务必填写正确的API地址，否则可能导致无法使用')}
+                    </Text>
+                    <Input
+                      name='base_url'
+                      placeholder={t('请输入到 /suno 前的路径，通常就是域名，例如：https://api.example.com')}
+                      onChange={(value) => handleInputChange('base_url', value)}
+                      value={inputs.base_url}
+                      autoComplete='new-password'
+                      size="large"
+                      className="!rounded-lg"
+                    />
+                  </div>
+                )}
+              </div>
+            </Card>
+
+            {/* Model Configuration Card */}
+            <Card className="!rounded-2xl shadow-sm border-0 mb-6">
+              <div className="flex items-center mb-4 p-6 rounded-xl" style={{
+                background: 'linear-gradient(135deg, #4c1d95 0%, #6d28d9 50%, #7c3aed 100%)',
+                position: 'relative'
+              }}>
+                <div className="absolute inset-0 overflow-hidden">
+                  <div className="absolute -top-10 -right-10 w-40 h-40 bg-white opacity-5 rounded-full"></div>
+                  <div className="absolute -bottom-8 -left-8 w-24 h-24 bg-white opacity-10 rounded-full"></div>
+                </div>
+                <div className="w-10 h-10 rounded-full bg-white/20 flex items-center justify-center mr-4 relative">
+                  <IconCode size="large" style={{ color: '#ffffff' }} />
+                </div>
+                <div className="relative">
+                  <Text style={{ color: '#ffffff' }} className="text-lg font-medium">{t('模型配置')}</Text>
+                  <div style={{ color: '#ffffff' }} className="text-sm opacity-80">{t('模型选择和映射设置')}</div>
+                </div>
+              </div>
+
+              <div className="space-y-4">
+                <div>
+                  <Text strong className="block mb-2">{t('模型')}</Text>
+                  <Select
+                    placeholder={t('请选择该渠道所支持的模型')}
+                    name='models'
+                    required
+                    multiple
+                    selection
+                    filter
+                    searchPosition='dropdown'
+                    onChange={(value) => handleInputChange('models', value)}
+                    value={inputs.models}
+                    autoComplete='new-password'
+                    optionList={modelOptions}
+                    size="large"
+                    className="!rounded-lg"
+                  />
+                </div>
+
+                <div className="flex flex-wrap gap-2">
+                  <Button
+                    type='primary'
+                    onClick={() => handleInputChange('models', basicModels)}
+                    size="large"
+                    className="!rounded-lg"
+                  >
+                    {t('填入相关模型')}
+                  </Button>
+                  <Button
+                    type='secondary'
+                    onClick={() => handleInputChange('models', fullModels)}
+                    size="large"
+                    className="!rounded-lg"
+                  >
+                    {t('填入所有模型')}
+                  </Button>
+                  <Button
+                    type='tertiary'
+                    onClick={() => fetchUpstreamModelList('models')}
+                    size="large"
+                    className="!rounded-lg"
+                  >
+                    {t('获取模型列表')}
+                  </Button>
+                  <Button
+                    theme='light'
+                    type='primary'
+                    onClick={handleAddPrefix}
+                    size='large'
+                    className='!rounded-lg'
+                  >
+                    {t('一键添加前缀')}
+                  </Button>
+                  <Button
+                    type='warning'
+                    onClick={() => handleInputChange('models', [])}
+                    size="large"
+                    className="!rounded-lg"
+                  >
+                    {t('清除所有模型')}
+                  </Button>
+                </div>
+
+                <div>
+                  <Input
+                    addonAfter={
+                      <Button type='primary' onClick={addCustomModels} className="!rounded-r-lg">
+                        {t('填入')}
+                      </Button>
+                    }
+                    placeholder={t('输入自定义模型名称')}
+                    value={customModel}
+                    onChange={(value) => setCustomModel(value.trim())}
+                    size="large"
+                    className="!rounded-lg"
+                  />
+                </div>
+
+                <div>
+                  <Text strong className="block mb-2">{t('模型重定向')}</Text>
+                  <TextArea
+                    placeholder={
+                      t('此项可选，用于修改请求体中的模型名称，为一个 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'
+                    className="!rounded-lg font-mono"
+                  />
+                  <Text
+                    className="!text-semi-color-primary cursor-pointer mt-1 block"
+                    onClick={() => handleInputChange('model_mapping', JSON.stringify(MODEL_MAPPING_EXAMPLE, null, 2))}
+                  >
+                    {t('填入模板')}
+                  </Text>
+                </div>
+
+                <div>
+                  <Text strong className="block mb-2">{t('默认测试模型')}</Text>
+                  <Input
+                    name='test_model'
+                    placeholder={t('不填则为模型列表第一个')}
+                    onChange={(value) => handleInputChange('test_model', value)}
+                    value={inputs.test_model}
+                    size="large"
+                    className="!rounded-lg"
+                  />
+                </div>
+              </div>
+            </Card>
+
+            {/* Advanced Settings Card */}
+            <Card className="!rounded-2xl shadow-sm border-0 mb-6">
+              <div className="flex items-center mb-4 p-6 rounded-xl" style={{
+                background: 'linear-gradient(135deg, #92400e 0%, #d97706 50%, #f59e0b 100%)',
+                position: 'relative'
+              }}>
+                <div className="absolute inset-0 overflow-hidden">
+                  <div className="absolute -top-10 -right-10 w-40 h-40 bg-white opacity-5 rounded-full"></div>
+                  <div className="absolute -bottom-8 -left-8 w-24 h-24 bg-white opacity-10 rounded-full"></div>
+                </div>
+                <div className="w-10 h-10 rounded-full bg-white/20 flex items-center justify-center mr-4 relative">
+                  <IconSetting size="large" style={{ color: '#ffffff' }} />
+                </div>
+                <div className="relative">
+                  <Text style={{ color: '#ffffff' }} className="text-lg font-medium">{t('高级设置')}</Text>
+                  <div style={{ color: '#ffffff' }} className="text-sm opacity-80">{t('渠道的高级配置选项')}</div>
+                </div>
+              </div>
+
+              <div className="space-y-4">
+                <div>
+                  <Text strong className="block mb-2">{t('分组')}</Text>
+                  <Select
+                    placeholder={t('请选择可以使用该渠道的分组')}
+                    name='groups'
+                    required
+                    multiple
+                    selection
+                    allowAdditions
+                    additionLabel={t('请在系统设置页面编辑分组倍率以添加新的分组：')}
+                    onChange={(value) => handleInputChange('groups', value)}
+                    value={inputs.groups}
+                    autoComplete='new-password'
+                    optionList={groupOptions}
+                    size="large"
+                    className="!rounded-lg"
+                  />
+                </div>
+
+                {inputs.type === 18 && (
+                  <div>
+                    <Text strong className="block mb-2">{t('模型版本')}</Text>
+                    <Input
+                      name='other'
+                      placeholder={'请输入星火大模型版本，注意是接口地址中的版本号，例如：v2.1'}
+                      onChange={(value) => handleInputChange('other', value)}
+                      value={inputs.other}
+                      autoComplete='new-password'
+                      size="large"
+                      className="!rounded-lg"
+                    />
+                  </div>
+                )}
+
+                {inputs.type === 41 && (
+                  <div>
+                    <Text strong className="block mb-2">{t('部署地区')}</Text>
+                    <TextArea
+                      name='other'
+                      placeholder={t(
+                        '请输入部署地区，例如：us-central1\n支持使用模型映射格式\n' +
+                        '{\n' +
+                        '    "default": "us-central1",\n' +
+                        '    "claude-3-5-sonnet-20240620": "europe-west1"\n' +
+                        '}'
+                      )}
+                      autosize={{ minRows: 2 }}
+                      onChange={(value) => handleInputChange('other', value)}
+                      value={inputs.other}
+                      autoComplete='new-password'
+                      className="!rounded-lg font-mono"
+                    />
+                    <Text
+                      className="!text-semi-color-primary cursor-pointer mt-1 block"
+                      onClick={() => handleInputChange('other', JSON.stringify(REGION_EXAMPLE, null, 2))}
+                    >
+                      {t('填入模板')}
+                    </Text>
+                  </div>
+                )}
+
+                {inputs.type === 21 && (
+                  <div>
+                    <Text strong className="block mb-2">{t('知识库 ID')}</Text>
+                    <Input
+                      name='other'
+                      placeholder={'请输入知识库 ID，例如：123456'}
+                      onChange={(value) => handleInputChange('other', value)}
+                      value={inputs.other}
+                      autoComplete='new-password'
+                      size="large"
+                      className="!rounded-lg"
+                    />
+                  </div>
+                )}
+
+                {inputs.type === 39 && (
+                  <div>
+                    <Text strong className="block mb-2">Account ID</Text>
+                    <Input
+                      name='other'
+                      placeholder={'请输入Account ID，例如：d6b5da8hk1awo8nap34ube6gh'}
+                      onChange={(value) => handleInputChange('other', value)}
+                      value={inputs.other}
+                      autoComplete='new-password'
+                      size="large"
+                      className="!rounded-lg"
+                    />
+                  </div>
+                )}
+
+                {inputs.type === 49 && (
+                  <div>
+                    <Text strong className="block mb-2">{t('智能体ID')}</Text>
+                    <Input
+                      name='other'
+                      placeholder={'请输入智能体ID，例如：7342866812345'}
+                      onChange={(value) => handleInputChange('other', value)}
+                      value={inputs.other}
+                      autoComplete='new-password'
+                      size="large"
+                      className="!rounded-lg"
+                    />
+                  </div>
+                )}
+
+                <div>
+                  <Text strong className="block mb-2">{t('渠道标签')}</Text>
+                  <Input
+                    name='tag'
+                    placeholder={t('渠道标签')}
+                    onChange={(value) => handleInputChange('tag', value)}
+                    value={inputs.tag}
+                    autoComplete='new-password'
+                    size="large"
+                    className="!rounded-lg"
+                  />
+                </div>
+
+                <div>
+                  <Text strong className="block mb-2">{t('渠道优先级')}</Text>
+                  <Input
+                    name='priority'
+                    placeholder={t('渠道优先级')}
+                    onChange={(value) => {
+                      const number = parseInt(value);
+                      if (isNaN(number)) {
+                        handleInputChange('priority', value);
+                      } else {
+                        handleInputChange('priority', number);
+                      }
+                    }}
+                    value={inputs.priority}
+                    autoComplete='new-password'
+                    size="large"
+                    className="!rounded-lg"
+                  />
+                </div>
+
+                <div>
+                  <Text strong className="block mb-2">{t('渠道权重')}</Text>
+                  <Input
+                    name='weight'
+                    placeholder={t('渠道权重')}
+                    onChange={(value) => {
+                      const number = parseInt(value);
+                      if (isNaN(number)) {
+                        handleInputChange('weight', value);
+                      } else {
+                        handleInputChange('weight', number);
+                      }
+                    }}
+                    value={inputs.weight}
+                    autoComplete='new-password'
+                    size="large"
+                    className="!rounded-lg"
+                  />
+                </div>
+
+                <div>
+                  <Text strong className="block mb-2">{t('渠道额外设置')}</Text>
+                  <TextArea
+                    placeholder={
+                      t('此项可选，用于配置渠道特定设置，为一个 JSON 字符串，例如：') +
+                      '\n{\n  "force_format": true\n}'
+                    }
+                    name='setting'
+                    onChange={(value) => handleInputChange('setting', value)}
+                    autosize
+                    value={inputs.setting}
+                    autoComplete='new-password'
+                    className="!rounded-lg font-mono"
+                  />
+                  <div className="flex gap-2 mt-1">
+                    <Text
+                      className="!text-semi-color-primary cursor-pointer"
+                      onClick={() => {
+                        handleInputChange(
+                          'setting',
+                          JSON.stringify({ force_format: true }, null, 2),
+                        );
+                      }}
+                    >
+                      {t('填入模板')}
+                    </Text>
+                    <Text
+                      className="!text-semi-color-primary cursor-pointer"
+                      onClick={() => {
+                        window.open(
+                          'https://github.com/QuantumNous/new-api/blob/main/docs/channel/other_setting.md',
+                        );
+                      }}
+                    >
+                      {t('设置说明')}
+                    </Text>
+                  </div>
+                </div>
+
+                <div>
+                  <Text strong className="block mb-2">{t('参数覆盖')}</Text>
+                  <TextArea
+                    placeholder={
+                      t('此项可选，用于覆盖请求参数。不支持覆盖 stream 参数。为一个 JSON 字符串，例如：') +
+                      '\n{\n  "temperature": 0\n}'
+                    }
+                    name='param_override'
+                    onChange={(value) => handleInputChange('param_override', value)}
+                    autosize
+                    value={inputs.param_override}
+                    autoComplete='new-password'
+                    className="!rounded-lg font-mono"
+                  />
+                </div>
+
+                {inputs.type === 1 && (
+                  <div>
+                    <Text strong className="block mb-2">{t('组织')}</Text>
+                    <Input
+                      name='openai_organization'
+                      placeholder={t('请输入组织org-xxx')}
+                      onChange={(value) => handleInputChange('openai_organization', value)}
+                      value={inputs.openai_organization}
+                      size="large"
+                      className="!rounded-lg"
+                    />
+                    <Text type="tertiary" className="mt-1 text-xs">
+                      {t('组织，可选，不填则为默认组织')}
+                    </Text>
+                  </div>
+                )}
+
+                <div className="flex items-center">
+                  <Checkbox
+                    checked={autoBan}
+                    onChange={() => setAutoBan(!autoBan)}
+                  />
+                  <Text strong className="ml-2">
+                    {t('是否自动禁用（仅当自动禁用开启时有效），关闭后不会自动禁用该渠道')}
+                  </Text>
+                </div>
+
+                <div>
+                  <Text strong className="block mb-2">
+                    {t('状态码复写（仅影响本地判断，不修改返回到上游的状态码）')}
+                  </Text>
+                  <TextArea
+                    placeholder={
+                      t('此项可选，用于复写返回的状态码，比如将claude渠道的400错误复写为500（用于重试），请勿滥用该功能，例如：') +
+                      '\n' +
+                      JSON.stringify(STATUS_CODE_MAPPING_EXAMPLE, null, 2)
+                    }
+                    name='status_code_mapping'
+                    onChange={(value) => handleInputChange('status_code_mapping', value)}
+                    autosize
+                    value={inputs.status_code_mapping}
+                    autoComplete='new-password'
+                    className="!rounded-lg font-mono"
+                  />
+                  <Text
+                    className="!text-semi-color-primary cursor-pointer mt-1 block"
+                    onClick={() => {
+                      handleInputChange(
+                        'status_code_mapping',
+                        JSON.stringify(STATUS_CODE_MAPPING_EXAMPLE, null, 2),
+                      );
+                    }}
+                  >
+                    {t('填入模板')}
+                  </Text>
+                </div>
+              </div>
+            </Card>
+          </div>
+        </Spin>
+        <ImagePreview
+          src={modalImageUrl}
+          visible={isModalOpenurl}
+          onVisibleChange={(visible) => setIsModalOpenurl(visible)}
+        />
+      </SideSheet>
+    </>
+  );
+};
+
+export default EditChannel;

README.md

@@ -1,10 +1,35 @@
----
-title: New Api
-emoji: 📚
-colorFrom: green
-colorTo: yellow
-sdk: docker
-pinned: false
----
-
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+---
+title: Custom New-API Instance
+emoji: 🚀
+colorFrom: blue
+colorTo: green
+sdk: docker
+app_port: 3000
+license: apache-2.0
+---
+
+# Custom New-API Instance with Model Prefix Feature
+
+This Hugging Face Space runs a customized instance of the [New-API](https://github.com/QuantumNous/new-api) project.
+
+## Key Features
+
+*   **Always Up-to-Date:** Automatically clones the latest code from the `QuantumNous/new-api` repository on each build, ensuring you have recent updates.
+*   **Custom UI Enhancement:** Includes a modified `EditChannel.js` from [timigogo/new-api-edit-channel](https://github.com/timigogo/new-api-edit-channel) which re-implements the "一键添加模型前缀" (Add Prefix with One Click) button on the channel editing page. This allows easy prefixing of model names with the channel name and generates the corresponding model mapping.
+*   **Dockerized Deployment:** Uses the provided multi-stage `Dockerfile` for a clean and reproducible build process. The Dockerfile handles fetching code, replacing the file, and building both frontend and backend components.
+
+## Usage
+
+Once the Space is running, you can access the New-API web interface via the public URL assigned by Hugging Face. The application listens on port 3000 internally.
+
+Use this instance as you would a standard New-API deployment. The primary difference is the added button functionality on the channel editing form.
+
+## Technical Details
+
+*   **Base Project:** [QuantumNous/new-API](https://github.com/QuantumNous/new-api) (Cloned automatically)
+*   **Customization Source:** [timigogo/new-api-edit-channel](https://github.com/timigogo/new-api-edit-channel) (`EditChannel.js`) (Cloned automatically)
+*   **Build Environment:** Defined by `Dockerfile`. The build process includes cache-busting techniques to ensure the latest code is fetched when the Space is rebuilt.
+
+## License
+
+This customized deployment is based on the New-API project, which uses the Apache 2.0 License. The license terms apply accordingly.