add support for TTS model (#2095)

### What problem does this PR solve?

add support for TTS model
#1853

### Type of change

- [x] New Feature (non-breaking change which adds functionality)

---------

Co-authored-by: Zhedong Cen <cenzhedong2@126.com>
Co-authored-by: Kevin Hu <kevinhu.sh@gmail.com>

web/src/pages/user-setting/setting-model/constant.ts

@@ -35,6 +35,7 @@ export const IconMap = {
   'Tencent Hunyuan': 'hunyuan',
   'XunFei Spark': 'spark',
   BaiduYiyan: 'yiyan',
+  'Fish Audio': 'fish-audio',
 };
 
 export const BedrockRegionList = [

web/src/pages/user-setting/setting-model/fish-audio-modal/index.tsx

@@ -0,0 +1,101 @@
+import { useTranslate } from '@/hooks/common-hooks';
+import { IModalProps } from '@/interfaces/common';
+import { IAddLlmRequestBody } from '@/interfaces/request/llm';
+import { Flex, Form, Input, Modal, Select, Space } from 'antd';
+import omit from 'lodash/omit';
+
+type FieldType = IAddLlmRequestBody & {
+  fish_audio_ak: string;
+  fish_audio_refid: string;
+};
+
+const { Option } = Select;
+
+const FishAudioModal = ({
+  visible,
+  hideModal,
+  onOk,
+  loading,
+  llmFactory,
+}: IModalProps<IAddLlmRequestBody> & { llmFactory: string }) => {
+  const [form] = Form.useForm<FieldType>();
+
+  const { t } = useTranslate('setting');
+
+  const handleOk = async () => {
+    const values = await form.validateFields();
+    const modelType = values.model_type;
+
+    const data = {
+      ...omit(values),
+      model_type: modelType,
+      llm_factory: llmFactory,
+    };
+    console.info(data);
+
+    onOk?.(data);
+  };
+
+  return (
+    <Modal
+      title={t('addLlmTitle', { name: llmFactory })}
+      open={visible}
+      onOk={handleOk}
+      onCancel={hideModal}
+      okButtonProps={{ loading }}
+      footer={(originNode: React.ReactNode) => {
+        return (
+          <Flex justify={'space-between'}>
+            <a href={`https://fish.audio`} target="_blank" rel="noreferrer">
+              {t('FishAudioLink')}
+            </a>
+            <Space>{originNode}</Space>
+          </Flex>
+        );
+      }}
+      confirmLoading={loading}
+    >
+      <Form
+        name="basic"
+        style={{ maxWidth: 600 }}
+        autoComplete="off"
+        layout={'vertical'}
+        form={form}
+      >
+        <Form.Item<FieldType>
+          label={t('modelType')}
+          name="model_type"
+          initialValue={'tts'}
+          rules={[{ required: true, message: t('modelTypeMessage') }]}
+        >
+          <Select placeholder={t('modelTypeMessage')}>
+            <Option value="tts">tts</Option>
+          </Select>
+        </Form.Item>
+        <Form.Item<FieldType>
+          label={t('modelName')}
+          name="llm_name"
+          rules={[{ required: true, message: t('FishAudioModelNameMessage') }]}
+        >
+          <Input placeholder={t('FishAudioModelNameMessage')} />
+        </Form.Item>
+        <Form.Item<FieldType>
+          label={t('addFishAudioAK')}
+          name="FishAudio_ak"
+          rules={[{ required: true, message: t('FishAudioAKMessage') }]}
+        >
+          <Input placeholder={t('FishAudioAKMessage')} />
+        </Form.Item>
+        <Form.Item<FieldType>
+          label={t('addFishAudioRefID')}
+          name="FishAudio_refid"
+          rules={[{ required: false, message: t('FishAudioRefIDMessage') }]}
+        >
+          <Input placeholder={t('FishAudioRefIDMessage')} />
+        </Form.Item>
+      </Form>
+    </Modal>
+  );
+};
+
+export default FishAudioModal;

web/src/pages/user-setting/setting-model/hooks.ts

@@ -244,6 +244,33 @@ export const useSubmityiyan = () => {
   };
 };
 
+export const useSubmitFishAudio = () => {
+  const { addLlm, loading } = useAddLlm();
+  const {
+    visible: FishAudioAddingVisible,
+    hideModal: hideFishAudioAddingModal,
+    showModal: showFishAudioAddingModal,
+  } = useSetModalState();
+
+  const onFishAudioAddingOk = useCallback(
+    async (payload: IAddLlmRequestBody) => {
+      const ret = await addLlm(payload);
+      if (ret === 0) {
+        hideFishAudioAddingModal();
+      }
+    },
+    [hideFishAudioAddingModal, addLlm],
+  );
+
+  return {
+    FishAudioAddingLoading: loading,
+    onFishAudioAddingOk,
+    FishAudioAddingVisible,
+    hideFishAudioAddingModal,
+    showFishAudioAddingModal,
+  };
+};
+
 export const useSubmitBedrock = () => {
   const { addLlm, loading } = useAddLlm();
   const {

web/src/pages/user-setting/setting-model/index.tsx

@@ -30,10 +30,12 @@ import { isLocalLlmFactory } from '../utils';
 import ApiKeyModal from './api-key-modal';
 import BedrockModal from './bedrock-modal';
 import { IconMap } from './constant';
+import FishAudioModal from './fish-audio-modal';
 import {
   useHandleDeleteLlm,
   useSubmitApiKey,
   useSubmitBedrock,
+  useSubmitFishAudio,
   useSubmitHunyuan,
   useSubmitOllama,
   useSubmitSpark,
@@ -98,7 +100,8 @@ const ModelCard = ({ item, clickApiKey }: IModelCardProps) => {
                 item.name === 'VolcEngine' ||
                 item.name === 'Tencent Hunyuan' ||
                 item.name === 'XunFei Spark' ||
-                item.name === 'BaiduYiyan'
+                item.name === 'BaiduYiyan' ||
+                item.name === 'Fish Audio'
                   ? t('addTheModel')
                   : 'API-Key'}
                 <SettingOutlined />
@@ -196,6 +199,14 @@ const UserSettingModel = () => {
     yiyanAddingLoading,
   } = useSubmityiyan();
 
+  const {
+    FishAudioAddingVisible,
+    hideFishAudioAddingModal,
+    showFishAudioAddingModal,
+    onFishAudioAddingOk,
+    FishAudioAddingLoading,
+  } = useSubmitFishAudio();
+
   const {
     bedrockAddingLoading,
     onBedrockAddingOk,
@@ -211,6 +222,7 @@ const UserSettingModel = () => {
       'Tencent Hunyuan': showHunyuanAddingModal,
       'XunFei Spark': showSparkAddingModal,
       BaiduYiyan: showyiyanAddingModal,
+      'Fish Audio': showFishAudioAddingModal,
     }),
     [
       showBedrockAddingModal,
@@ -218,6 +230,7 @@ const UserSettingModel = () => {
       showHunyuanAddingModal,
       showSparkAddingModal,
       showyiyanAddingModal,
+      showFishAudioAddingModal,
     ],
   );
 
@@ -350,6 +363,13 @@ const UserSettingModel = () => {
         loading={yiyanAddingLoading}
         llmFactory={'BaiduYiyan'}
       ></YiyanModal>
+      <FishAudioModal
+        visible={FishAudioAddingVisible}
+        hideModal={hideFishAudioAddingModal}
+        onOk={onFishAudioAddingOk}
+        loading={FishAudioAddingLoading}
+        llmFactory={'Fish Audio'}
+      ></FishAudioModal>
       <BedrockModal
         visible={bedrockAddingVisible}
         hideModal={hideBedrockAddingModal}

web/src/pages/user-setting/setting-model/spark-modal/index.tsx

@@ -82,9 +82,9 @@ const SparkModal = ({
         <Form.Item<FieldType>
           label={t('addSparkAPIPassword')}
           name="spark_api_password"
-          rules={[{ required: true, message: t('SparkPasswordMessage') }]}
+          rules={[{ required: true, message: t('SparkAPIPasswordMessage') }]}
         >
-          <Input placeholder={t('SparkSIDMessage')} />
+          <Input placeholder={t('SparkAPIPasswordMessage')} />
         </Form.Item>
       </Form>
     </Modal>

web/src/pages/user-setting/setting-model/system-model-setting-modal/index.tsx

@@ -83,6 +83,13 @@ const SystemModelSettingModal = ({
         >
           <Select options={allOptions[LlmModelType.Rerank]} />
         </Form.Item>
+        <Form.Item
+          label={t('ttsModel')}
+          name="tts_id"
+          tooltip={t('ttsModelTip')}
+        >
+          <Select options={allOptions[LlmModelType.TTS]} />
+        </Form.Item>
       </Form>
     </Modal>
   );