chore: upload a ref audio

src/pages/playground/audio/form.tsx

@@ -0,0 +1,77 @@
+import SealInput from '@/components/seal-form/seal-input';
+import UploadAudio from '@/components/upload-audio';
+import { convertFileToBase64 } from '@/utils/load-audio-file';
+import { CloseCircleFilled } from '@ant-design/icons';
+import { useIntl } from '@umijs/max';
+import { Form } from 'antd';
+import React from 'react';
+import styled from 'styled-components';
+import { useFormContext } from '../config/form-context';
+
+const SuffixWrapper = styled.div`
+  .icon {
+    font-size: 12px;
+    color: var(--ant-color-text-quaternary);
+    cursor: pointer;
+    &:hover {
+      color: var(--ant-color-text-tertiary);
+    }
+  }
+`;
+
+export const RefAudioFormItem: React.FC = () => {
+  const { meta } = useFormContext();
+  const form = Form.useFormInstance();
+  const intl = useIntl();
+  const [filleName, setFileName] = React.useState<string>('');
+
+  // handle upload audio file, transfer to a base64 url
+  const handleUploadChange = async (data: { file: any; fileList: any }) => {
+    const { file } = data;
+    const base64 = await convertFileToBase64(file);
+    form.setFieldsValue({
+      ref_audio: base64
+    });
+    setFileName(file.name);
+
+    console.log('Uploaded file base64 url:', base64);
+  };
+
+  const handleClear = () => {
+    form.setFieldsValue({
+      ref_audio: ''
+    });
+    setFileName('');
+  };
+
+  return (
+    <Form.Item
+      name="ref_audio"
+      getValueProps={(value) => ({ value: filleName ? filleName : value })}
+    >
+      <SealInput.Input
+        allowClear
+        readOnly={!!filleName}
+        suffix={
+          <SuffixWrapper>
+            {filleName ? (
+              <span onClick={handleClear}>
+                <CloseCircleFilled className="icon" />
+              </span>
+            ) : null}
+            <UploadAudio
+              size="small"
+              type="text"
+              accept={['.mp3', '.mp4', '.wav', '.m4a'].join(', ')}
+              onChange={handleUploadChange}
+            ></UploadAudio>
+          </SuffixWrapper>
+        }
+        description={intl.formatMessage({
+          id: 'playground.params.refAudio.tips'
+        })}
+        label={intl.formatMessage({ id: 'playground.params.refAudio' })}
+      ></SealInput.Input>
+    </Form.Item>
+  );
+};

src/pages/playground/audio/params-config.ts

@@ -0,0 +1,155 @@
+import _ from 'lodash';
+import { ParamsSchema } from '../config/types';
+
+export const TTSAdvancedParamsConfig: ParamsSchema[] = [
+  {
+    type: 'Input',
+    name: 'task_type',
+    options: [],
+    attrs: {
+      allowClear: true
+    },
+    label: {
+      text: 'playground.params.taskType',
+      isLocalized: true
+    },
+    rules: [
+      {
+        required: false
+      }
+    ]
+  },
+  {
+    type: 'AutoComplete',
+    name: 'language',
+    options: [],
+    initAttrs: (meta: any) => {
+      return {
+        options: _.map(meta?.languages || [], (item: string) => ({
+          label: item,
+          value: item
+        }))
+      };
+    },
+    attrs: {
+      allowClear: true
+    },
+    label: {
+      text: 'playground.params.language',
+      isLocalized: true
+    },
+    rules: [
+      {
+        required: false
+      }
+    ]
+  },
+  {
+    type: 'Select',
+    name: 'instructions',
+    label: {
+      text: 'playground.params.voiceStyle',
+      isLocalized: true
+    },
+    attrs: {
+      allowClear: true
+    },
+    initAttrs: (meta: any) => {
+      return {
+        options: _.map(meta?.voices || [], (item: string) => ({
+          label: item,
+          value: item
+        }))
+      };
+    },
+    rules: [
+      {
+        required: false
+      }
+    ]
+  },
+  {
+    type: 'InputNumber',
+    name: 'max_new_tokens',
+    label: {
+      text: 'playground.params.maxTokens',
+      isLocalized: true
+    },
+    attrs: {
+      allowClear: true,
+      step: 1,
+      min: 0
+    },
+    formItemAttrs: {
+      getValueProps: (value: number) => {
+        return {
+          value: value || null
+        };
+      }
+    },
+    rules: [
+      {
+        required: false
+      }
+    ]
+  }
+];
+
+export const TTSParamsConfig: ParamsSchema[] = [
+  {
+    type: 'AutoComplete',
+    name: 'voice',
+    options: [],
+    label: {
+      text: 'playground.params.voice',
+      isLocalized: true
+    },
+    rules: [
+      {
+        required: false,
+        message: 'Voice is required'
+      }
+    ]
+  },
+  {
+    type: 'Select',
+    name: 'response_format',
+    options: [
+      { label: 'mp3', value: 'mp3' },
+      // { label: 'opus', value: 'opus' },
+      // { label: 'aac', value: 'aac' },
+      // { label: 'flac', value: 'flac' },
+      { label: 'wav', value: 'wav' }
+      // { label: 'pcm', value: 'pcm' }
+    ],
+    label: {
+      text: 'playground.params.format',
+      isLocalized: true
+    },
+    rules: [
+      {
+        required: false
+      }
+    ]
+  }
+  // {
+  //   type: 'Select',
+  //   name: 'speed',
+  //   options: [
+  //     { label: '0.25x', value: 0.25 },
+  //     { label: '0.5x', value: 0.5 },
+  //     { label: '1x', value: 1 },
+  //     { label: '2x', value: 2 },
+  //     { label: '4x', value: 4 }
+  //   ],
+  //   label: {
+  //     text: 'playground.params.speed',
+  //     isLocalized: true
+  //   },
+  //   rules: [
+  //     {
+  //       required: false
+  //     }
+  //   ]
+  // }
+];